<template>
  <div>
    <div class="wrap">
      <h1>Revenue by region</h1>
      <p class="lead">
        Six regions, one shared scale: each panel is a real chart, and all six
        are pixel-aligned so the shapes compare honestly. Hover anywhere: the
        crosshair sweeps every panel at the same month.
      </p>

      <div class="chart-wrap">
        <div id="chart">
          <apexchart
            type="line"
            height="640"
            :options="chartOptions"
            :series="series"
          ></apexchart>
        </div>
      </div>

      <div class="note">
        A trellis (small multiples) splits one dataset into a grid of panels:
        <code>trellis.by: 'region'</code> is the whole configuration. The
        trellis owns everything shared: the y domain (union of all panels, so
        panels never lie), the x window, one legend (click
        <code>Target</code> to hide it in every panel), one zoom/pan/reset
        toolbar, and the responsive column count (resize the window: 3 &rarr; 2
        &rarr; 1 columns from <code>minPanelWidth</code> alone). The keyless
        <code>Target</code> series repeats in every panel as a reference line.
        Trellis is a premium feature; without a license it renders with a trial
        watermark.
      </div>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

import 'apexcharts/features/trellis'

// 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]
  }),
})

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: trellisSeries,
      chartOptions: {
        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',
          },
        },
      },
    }
  },
}
</script>

<style>
body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fafbfc;
  color: #2c3e50;
  margin: 0;
  padding: 32px 16px;
}
.wrap {
  max-width: 960px;
  margin: 0 auto;
}
h1 {
  font-size: 22px;
  margin: 0 0 8px;
}
.lead {
  color: #5b6b78;
  line-height: 1.5;
  margin: 0 0 20px;
}
.chart-wrap {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.note {
  background: #eef2ff;
  border-left: 3px solid #0ea5e9;
  padding: 12px 16px;
  font-size: 13px;
  color: #333;
  border-radius: 2px;
  line-height: 1.6;
  margin: 26px auto 0;
}
.note code {
  background: #e0e7ff;
  padding: 1px 5px;
  border-radius: 3px;
}
</style>