// ── Reproducible synthetic data (seeded PRNG, no network) ──────────────
function mulberry32(a) {
  return function () {
    a |= 0
    a = (a + 0x6d2b79f5) | 0
    var t = Math.imul(a ^ (a >>> 15), 1 | a)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}
var rng = mulberry32(98761234)

function gauss(mean, sd) {
  var u = 0,
    v = 0
  while (u === 0) u = rng()
  while (v === 0) v = rng()
  return mean + sd * Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v)
}

function quantile(sorted, q) {
  var pos = (sorted.length - 1) * q
  var b = Math.floor(pos)
  var r = pos - b
  return sorted[b + 1] !== undefined
    ? sorted[b] + r * (sorted[b + 1] - sorted[b])
    : sorted[b]
}

// For each region draw a sample, then derive both the 5-number summary (the box)
// and keep the raw observations (the overlaid points).
function buildBox(name, n, mean, sd) {
  var data = []
  for (var i = 0; i < n; i++) data.push(Math.round(gauss(mean, sd) * 10) / 10)
  var s = data.slice().sort(function (a, b) {
    return a - b
  })
  return {
    x: name,
    y: [
      s[0],
      quantile(s, 0.25),
      quantile(s, 0.5),
      quantile(s, 0.75),
      s[s.length - 1],
    ],
    points: data,
  }
}

var REGIONS = [
  buildBox('North', 45, 68, 8),
  buildBox('South', 45, 74, 6),
  buildBox('East', 45, 61, 11),
  buildBox('West', 45, 70, 7),
]

var options = {
  series: [
    {
      name: 'Response time',
      type: 'boxPlot',
      data: REGIONS,
    },
  ],
  chart: {
    type: 'boxPlot',
    height: 460,
  },
  title: {
    text: 'Response time distribution by region',
  },
  plotOptions: {
    bar: {
      horizontal: true,
      barHeight: '50%',
    },
    boxPlot: {
      colors: { upper: '#5b8def', lower: '#a3c0f9' },
      // overlay each raw observation as a jittered dot
      points: { show: true, size: 3, jitter: 0.6 },
    },
  },
  stroke: { colors: ['#37474f'] },
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()