KPI Gauge Grid in JavaScript

// Eighteen stores, one gauge each, every gauge against the SAME target. A
// gauge grid is scannable for "who is under target" in a way an 18-bar chart
// is not, and a radialBar still reads at 120px. The trellis owns the grid,
// the headers and the responsive columns; each panel is a real radialBar.
//
// Deterministic values 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 STORES = [
  'Aurora',
  'Brookfield',
  'Cedar Park',
  'Dunwoody',
  'Eastvale',
  'Fairfield',
  'Glenview',
  'Harborside',
  'Ironwood',
  'Junction',
  'Kingsford',
  'Lakeshore',
  'Maplewood',
  'Northgate',
  'Oakhurst',
  'Pinecrest',
  'Quarry Bay',
  'Riverton',
]

var rand = mulberry32(20260821)
var gaugeSeries = STORES.map(function (store) {
  // Attainment 48..104%, a few clear laggards in the mix.
  var v = Math.round(48 + rand() * 56)
  return { name: 'Attainment', store: store, data: [Math.min(v, 100)] }
})

var options = {
  series: gaugeSeries,
  chart: {
    id: 'gaugeTrellis',
    type: 'radialBar',
    height: 470,
    animations: {
      enabled: false,
    },
  },
  trellis: {
    by: 'store',
    columns: 6,
    minPanelWidth: 150,
    gap: 8,
    panel: function (key, meta) {
      var s = gaugeSeries[meta.index]
      var v = s && s.data[0] ? s.data[0] : 0
      var color = v >= 85 ? '#15803D' : v >= 65 ? '#D97706' : '#DC2626'
      return { colors: [color] }
    },
  },
  plotOptions: {
    radialBar: {
      hollow: {
        size: '54%',
      },
      track: {
        background: '#E5E7EB',
      },
      dataLabels: {
        name: {
          show: false,
        },
        value: {
          show: true,
          offsetY: 6,
          fontSize: '15px',
          fontWeight: 700,
          formatter: function (val) {
            return Math.round(Number(val)) + '%'
          },
        },
      },
    },
  },
  stroke: {
    lineCap: 'round',
  },
  labels: ['Attainment'],
}

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