<template>
  <div>
    <div class="wrap">
      <h1>Six tickers, one grid</h1>
      <p class="lead">
        Price levels 40x apart, so each panel keeps its own y scale, yet all six
        plot rectangles are pixel-identical. Zoom anywhere: every ticker follows
        on the same date window, and one reset brings them all back.
      </p>

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

      <div class="note">
        <code>scales.y: 'independent'</code> gives every ticker its own domain
        (a $24 stock and a $900 stock cannot share an axis honestly), and an
        independent scale draws its own labels on every panel. The panels stay
        aligned anyway: the trellis measures each panel's label gutter and
        pushes the widest as a shared <code>yaxis.labels.minWidth</code>, so
        shapes compare cleanly across the grid. The x window is shared:
        drag-zoom any panel and the whole grid moves; the single toolbar's reset
        restores it. 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'

// Six tickers whose price levels differ by 40x: a shared y scale would
// flatten the cheap ones into noise, so this trellis uses
// `scales: { y: 'independent' }`. Each panel gets its own honest domain, and
// the panels are STILL pixel-aligned: the trellis measures every panel's
// axis-label gutter and pushes the widest as a shared floor, so the plot
// rectangles agree to the pixel and the shapes stay comparable.
//
// One toolbar for the grid: drag or wheel-zoom in any panel and every panel
// follows on the shared x window; reset restores all six at once.
//
// Deterministic OHLC 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
  }
}

function ohlcWalk(seed, start, vol) {
  var rand = mulberry32(seed)
  var r2 = function (v) {
    return Math.round(v * 100) / 100
  }
  var out = []
  var ts = new Date('01 Jan 2025').getTime()
  var close = start
  for (var i = 0; i < 40; i++) {
    var open = close
    close = Math.max(vol, open + (rand() - 0.48) * vol * 2)
    var high = Math.max(open, close) + rand() * vol
    var low = Math.max(vol * 0.2, Math.min(open, close) - rand() * vol)
    out.push({ x: ts, y: [r2(open), r2(high), r2(low), r2(close)] })
    ts += 86400000
  }
  return out
}

var TICKERS = [
  { ticker: 'ANVL', seed: 3, start: 24, vol: 0.9 },
  { ticker: 'BRCK', seed: 17, start: 61, vol: 2.1 },
  { ticker: 'CDER', seed: 29, start: 142, vol: 4.5 },
  { ticker: 'DELM', seed: 41, start: 310, vol: 9 },
  { ticker: 'ELMS', seed: 53, start: 78, vol: 2.6 },
  { ticker: 'FRST', seed: 67, start: 927, vol: 24 },
]

// One series NAME across the grid (the headers already name the tickers), so
// the shared legend has nothing to add and stays hidden.
var stockSeries = TICKERS.map(function (t) {
  return {
    name: 'OHLC',
    ticker: t.ticker,
    data: ohlcWalk(t.seed, t.start, t.vol),
  }
})

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: stockSeries,
      chartOptions: {
        chart: {
          id: 'stockTrellis',
          type: 'candlestick',
          height: 620,
          animations: {
            enabled: false,
          },
        },
        trellis: {
          by: 'ticker',
          columns: 3,
          gap: 14,
          scales: {
            y: 'independent',
          },
        },
        xaxis: {
          type: 'datetime',
        },
        yaxis: {
          labels: {
            formatter: function (val) {
              return '$' + Math.round(val)
            },
          },
        },
        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: 1040px;
  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: #fffbeb;
  border-left: 3px solid #d97706;
  padding: 12px 16px;
  font-size: 13px;
  color: #333;
  border-radius: 2px;
  line-height: 1.6;
  margin: 26px auto 0;
}
.note code {
  background: #fef3c7;
  padding: 1px 5px;
  border-radius: 3px;
}
</style>