<template>
  <div>
    <div class="wrap">
      <h1>Sessions by country, all twenty of them</h1>
      <p class="lead">
        One shared scale, so flat really means small, and the spike in New
        Zealand is unmissable even from the bottom of the tail. Drag the card's
        bottom-right corner: the grid recolumns 4 &rarr; 3 &rarr; 2 &rarr; 1
        from the container width alone.
      </p>

      <div class="chart-wrap">
        <div id="chart">
          <apexchart
            type="area"
            :options="chartOptions"
            :series="series"
          ></apexchart>
        </div>
      </div>
      <div class="hint">&#8598; drag the card's corner handle to resize</div>

      <div class="note">
        The responsive column count needs no breakpoints:
        <code>minPanelWidth: 240</code> is the whole configuration, and the
        trellis's single ResizeObserver recolumns the SAME panel instances (no
        re-creation, no re-mounting) as its container changes. The bottom row's
        x labels and the first column's y labels follow the new edges
        automatically; label space is reserved in every panel, so the plots stay
        pixel-aligned through every layout. Above 64 panels the grid would also
        virtualize automatically. 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'

// Twenty countries, sixty days of sessions each, on ONE shared y scale, so
// the long tail reads honestly (flat means small, not "own scale"). The
// column count comes from the container's own width and `minPanelWidth`
// alone: 4 -> 3 -> 2 -> 1 as the container narrows. The chart card has a CSS
// resize handle (bottom-right corner), so drag it: the trellis's single
// ResizeObserver recolumns the live panels without re-creating them.
//
// Why not a top-5 chart with an "other" bucket? Because the tail is where
// the anomalies live: watch New Zealand spike mid-series.
//
// Deterministic 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 COUNTRIES = [
  { name: 'United States', seed: 5, base: 48000 },
  { name: 'India', seed: 11, base: 30500 },
  { name: 'United Kingdom', seed: 19, base: 22000 },
  { name: 'Germany', seed: 23, base: 18200 },
  { name: 'Brazil', seed: 31, base: 15400 },
  { name: 'France', seed: 37, base: 13100 },
  { name: 'Canada', seed: 43, base: 12000 },
  { name: 'Australia', seed: 47, base: 9600 },
  { name: 'Japan', seed: 59, base: 8100 },
  { name: 'Netherlands', seed: 61, base: 6200 },
  { name: 'Spain', seed: 71, base: 5100 },
  { name: 'Mexico', seed: 79, base: 4300 },
  { name: 'Sweden', seed: 83, base: 3600 },
  { name: 'Poland', seed: 89, base: 3000 },
  { name: 'Singapore', seed: 97, base: 2600 },
  { name: 'South Africa', seed: 101, base: 2200 },
  { name: 'Argentina', seed: 107, base: 1800 },
  { name: 'Ireland', seed: 113, base: 1500 },
  { name: 'Thailand', seed: 127, base: 1200 },
  { name: 'New Zealand', seed: 131, base: 900 },
]

function dailySessions(seed, base, spikeAt) {
  var rand = mulberry32(seed)
  var out = []
  var ts = new Date('01 Jan 2025').getTime()
  var val = base
  for (var i = 0; i < 60; i++) {
    val = Math.max(base * 0.5, val + (rand() - 0.5) * base * 0.12)
    var v = val
    // The anomaly the top-5 chart would never show: a three-day viral spike.
    if (spikeAt && i >= spikeAt && i < spikeAt + 3) {
      v = val + 11000 * (1 - (i - spikeAt) * 0.3)
    }
    out.push([ts, Math.round(v)])
    ts += 86400000
  }
  return out
}

var trafficSeries = COUNTRIES.map(function (c) {
  return {
    name: 'Sessions',
    country: c.name,
    data: dailySessions(c.seed, c.base, c.name === 'New Zealand' ? 34 : 0),
  }
})

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: trafficSeries,
      chartOptions: {
        chart: {
          id: 'trafficTrellis',
          type: 'area',
          animations: {
            enabled: false,
          },
        },
        trellis: {
          by: 'country',
          minPanelWidth: 240,
          panelHeight: 120,
          gap: 12,
        },
        colors: ['#0369A1'],
        stroke: {
          width: 2,
          curve: 'straight',
        },
        fill: {
          type: 'gradient',
          gradient: {
            opacityFrom: 0.35,
            opacityTo: 0.05,
          },
        },
        xaxis: {
          type: 'datetime',
        },
        yaxis: {
          labels: {
            formatter: function (val) {
              return Math.round(val / 1000) + 'k'
            },
          },
        },
        dataLabels: {
          enabled: false,
        },
        tooltip: {
          x: {
            format: 'dd MMM',
          },
        },
      },
    }
  },
}
</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: 1120px;
  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);
  /* Drag the bottom-right handle: the trellis recolumns live. */
  resize: horizontal;
  overflow: hidden;
  min-width: 320px;
  max-width: 100%;
}
.hint {
  font-size: 12px;
  color: #8a97a3;
  text-align: right;
  margin: 6px 2px 0;
}
.note {
  background: #eff6ff;
  border-left: 3px solid #0369a1;
  padding: 12px 16px;
  font-size: 13px;
  color: #333;
  border-radius: 2px;
  line-height: 1.6;
  margin: 26px auto 0;
}
.note code {
  background: #dbeafe;
  padding: 1px 5px;
  border-radius: 3px;
}
</style>