<template>
  <div>
    <div id="chart">
      <apexchart
        type="violin"
        height="420"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

// Build a Gaussian density profile + raw observations for a group.
// The sample template seeds Math.random, so this renders identically across reloads.
function gaussianViolin(mean, sd, n) {
  var density = []
  for (var v = mean - 3 * sd; v <= mean + 3 * sd; v += sd / 6) {
    var z = (v - mean) / sd
    density.push([v, Math.exp(-0.5 * z * z)])
  }
  var points = []
  for (var k = 0; k < n; k++) {
    // Box–Muller transform on two uniform samples
    var u1 = Math.random(),
      u2 = Math.random()
    var g = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2)
    points.push(mean + g * sd)
  }
  return { density: density, points: points }
}

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          name: 'Measurement',
          data: [
            { x: 'Group A', y: gaussianViolin(50, 8, 400) },
            { x: 'Group B', y: gaussianViolin(62, 5, 600) },
            { x: 'Group C', y: gaussianViolin(45, 12, 250) },
            { x: 'Group D', y: gaussianViolin(55, 6, 500) },
            { x: 'Group E', y: gaussianViolin(48, 10, 350) },
            { x: 'Group F', y: gaussianViolin(58, 7, 450) },
            { x: 'Group G', y: gaussianViolin(52, 9, 300) },
          ],
        },
      ],
      chartOptions: {
        chart: {
          type: 'violin',
          height: 420,
        },
        title: {
          text: 'Distribution by group',
        },
        plotOptions: {
          violin: {
            bandwidthScale: 1,
            points: {
              show: false, // density curve only — no jitter overlay
            },
          },
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 820px;
  margin: 35px auto;
}
</style>