Revenue by Region in JavaScript

// One dataset, six panels: `trellis.by: 'region'` splits the series into one
// pixel-aligned panel per region. Every panel shares the SAME y scale (so
// "the West is bigger" stays true while shapes are compared), the same x
// window, one legend and one crosshair that sweeps all six panels: hover any
// panel and read the same month everywhere. The keyless 'Target' series
// carries no region, so it repeats in every panel as a reference line.
//
// Deterministic monthly revenue walks so the e2e snapshot is stable.
function mulberry32(seed) {
  return function () {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

var REGIONS = [
  { name: 'North', seed: 11, base: 58 },
  { name: 'South', seed: 23, base: 42 },
  { name: 'East', seed: 35, base: 74 },
  { name: 'West', seed: 47, base: 90 },
  { name: 'Central', seed: 59, base: 35 },
  { name: 'Northeast', seed: 71, base: 62 },
]

function monthlyRevenue(seed, base) {
  var rand = mulberry32(seed)
  var out = []
  var ts = new Date('01 Jan 2025').getTime()
  var val = base
  for (var i = 0; i < 12; i++) {
    val += (rand() - 0.45) * 9
    out.push([ts, Math.round(val * 10) / 10])
    ts += 2678400000 // ~1 month
  }
  return out
}

var trellisSeries = REGIONS.map(function (r) {
  return {
    name: 'Revenue',
    region: r.name,
    data: monthlyRevenue(r.seed, r.base),
  }
})

// Reference series: no `region` key, so it repeats in every panel.
trellisSeries.push({
  name: 'Target',
  data: monthlyRevenue(1, 65).map(function (d) {
    return [d[0], 65]
  }),
})

var options = {
  series: trellisSeries,
  chart: {
    id: 'revenueTrellis',
    type: 'line',
    height: 640,
    animations: {
      enabled: false,
    },
  },
  trellis: {
    by: 'region',
    minPanelWidth: 260,
    gap: 14,
    header: {
      formatter: function (key) {
        return key
      },
    },
  },
  colors: ['#0EA5E9', '#94A3B8'],
  stroke: {
    width: [3, 2],
    curve: 'straight',
    dashArray: [0, 5],
  },
  xaxis: {
    type: 'datetime',
  },
  yaxis: {
    labels: {
      formatter: function (val) {
        return '$' + Math.round(val) + 'k'
      },
    },
  },
  dataLabels: {
    enabled: false,
  },
  tooltip: {
    x: {
      format: 'MMM yyyy',
    },
  },
}

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