<bmx-trading-chart>

<bmx-trading-chart id="ex-tc" label="Share price" symbol="NWRL" interval="1D" file-name="nwrl" locale="en-GB" time-zone="Europe/London"></bmx-trading-chart>
<p class="note" id="ex-tc-out" role="status">Two years of daily bars for an invented share, with a 50-day moving average, Bollinger Bands, volume, RSI, a trend line and a Fibonacci retracement. Scroll or pinch to zoom, drag to move back in time, add indicators, draw, or replay the bars one at a time. "Go live" sends a price every half second into a one-minute chart with an order book beside it, as a market feed would.</p>

<div class="row" style="gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-block: 0.5rem 1.5rem">
  <button type="button" id="ex-tc-live">Go live</button>
  <button type="button" id="ex-tc-compare">Compare with an index</button>
  <button type="button" id="ex-tc-daily">Back to daily bars</button>
</div>

<script type="module">
  await customElements.whenDefined('bmx-trading-chart');
  const el = document.getElementById('ex-tc');
  const out = document.getElementById('ex-tc-out');

  /** Invented daily prices: a random walk with drift and calmer and busier spells, weekdays only. */
  function dailyBars(count = 520, seed = 11) {
    let s = seed;
    const rnd = () => ((s = (s * 16807) % 2147483647) / 2147483647);
    const gauss = () => Math.sqrt(-2 * Math.log(rnd())) * Math.cos(2 * Math.PI * rnd());
    const bars = [];
    let t = Date.UTC(2024, 6, 1);
    let price = 142;
    let vol = 0.014;
    while (bars.length < count) {
      const day = new Date(t).getUTCDay();
      if (day !== 0 && day !== 6) {
        vol = Math.min(0.035, Math.max(0.007, vol * (1 + 0.12 * gauss())));
        const open = price * (1 + gauss() * vol * 0.3);
        const close = open * (1 + gauss() * vol + 0.0006);
        const high = Math.max(open, close) * (1 + Math.abs(gauss()) * vol * 0.5);
        const low = Math.min(open, close) * (1 - Math.abs(gauss()) * vol * 0.5);
        const r = x => Math.round(x * 100) / 100;
        bars.push({ time: t, open: r(open), high: r(high), low: r(low), close: r(close), volume: Math.round(2e6 * (0.5 + rnd()) * (1 + Math.abs(close / open - 1) * 40)) });
        price = close;
      }
      t += 86400000;
    }
    return bars;
  }

  const daily = dailyBars();
  function showDaily() {
    el.interval = '1D';
    el.data = daily;
    el.indicators = [
      { type: 'sma', params: { length: 50 } },
      { type: 'bollinger', params: { length: 20, mult: 2 } },
      { type: 'rsi', params: { length: 14 } },
    ];
    // A trend line along recent lows and a retracement of the last big move, anchored to times and prices.
    const n = daily.length;
    const lowest = (from, to) => daily.slice(from, to).reduce((a, b) => (b.low < a.low ? b : a));
    const highest = (from, to) => daily.slice(from, to).reduce((a, b) => (b.high > a.high ? b : a));
    const l1 = lowest(n - 120, n - 70);
    const l2 = lowest(n - 40, n - 5);
    const top = highest(n - 120, n);
    const bottom = lowest(n - 120, n);
    el.drawings = [
      { type: 'trend', points: [{ time: l1.time, price: l1.low }, { time: l2.time, price: l2.low }] },
      { type: 'fibonacci', points: top.time < bottom.time ? [{ time: top.time, price: top.high }, { time: bottom.time, price: bottom.low }] : [{ time: bottom.time, price: bottom.low }, { time: top.time, price: top.high }] },
    ];
    el.setOrderBook(null);
  }
  showDaily();

  let timer = 0;
  document.getElementById('ex-tc-live').addEventListener('click', () => {
    clearInterval(timer);
    // An hour of one-minute bars, then a price every half second.
    const now = Date.now();
    const start = now - (now % 60000) - 60 * 60000;
    let price = daily[daily.length - 1].close;
    const bars = [];
    for (let t = start; t < now - (now % 60000); t += 60000) {
      const open = price;
      const close = open * (1 + (Math.random() - 0.5) * 0.004);
      const r = x => Math.round(x * 100) / 100;
      bars.push({ time: t, open: r(open), high: r(Math.max(open, close) * 1.0008), low: r(Math.min(open, close) * 0.9992), close: r(close), volume: Math.round(20000 + Math.random() * 30000) });
      price = close;
    }
    el.interval = '1m';
    el.data = bars;
    el.indicators = [{ type: 'ema', params: { length: 9 } }, { type: 'vwap' }, { type: 'macd' }];
    el.drawings = [];
    // An order book around the price: sizes growing away from it, changed a little with every tick.
    const book = () => {
      const bids = [];
      const asks = [];
      const best = Math.floor(price * 20) / 20;
      for (let i = 0; i < 40; i++) {
        bids.push([+(best - i * 0.05).toFixed(2), Math.round((80 + i * 25) * (0.5 + Math.random()) * (Math.random() < 0.06 ? 5 : 1))]);
        asks.push([+(best + (i + 1) * 0.05).toFixed(2), Math.round((80 + i * 25) * (0.5 + Math.random()) * (Math.random() < 0.06 ? 5 : 1))]);
      }
      return { bids, asks };
    };
    el.setOrderBook(book());
    el.showOrderBook = true;
    timer = setInterval(() => {
      price *= 1 + (Math.random() - 0.495) * 0.0012;
      el.pushTick({ time: Date.now(), price: Math.round(price * 100) / 100, volume: Math.round(Math.random() * 900) });
      el.setOrderBook(book());
    }, 500);
    out.textContent = 'Live: a price every half second goes into the last one-minute bar; the countdown under the price is the time left in the bar.';
  });
  document.getElementById('ex-tc-compare').addEventListener('click', async () => {
    for (const c of await el.getCompares()) await el.removeCompare(c.id);
    // An invented index over the same days, calmer than the share.
    const index = dailyBars(daily.length, 29).map((b, i) => ({ time: daily[i].time, close: Math.round((4000 + (b.close - 142) * 9) * 100) / 100 }));
    await el.addCompare('Index', index);
    out.textContent = 'The index is drawn over the share; the scale shows the change of each in per cent from the first bar in view.';
  });
  el.addEventListener('bmxDrawingChange', e => {
    out.textContent = `${e.detail.drawings.length} drawing${e.detail.drawings.length === 1 ? '' : 's'} on the chart (${e.detail.reason}).`;
  });
  el.addEventListener('bmxBookClick', e => {
    out.textContent = `${e.detail.side === 'bid' ? 'Sell' : 'Buy'} at ${e.detail.price.toFixed(2)}? (${e.detail.size} resting there.)`;
  });
  el.addEventListener('bmxReplay', e => {
    if (e.detail.state === 'start') out.textContent = 'Replay: play, or step a bar at a time - the indicators only see the bars shown.';
  });
  document.getElementById('ex-tc-daily').addEventListener('click', () => {
    clearInterval(timer);
    el.getCompares().then(list => list.forEach(c => el.removeCompare(c.id)));
    showDaily();
    out.textContent = 'Daily bars again.';
  });

  el.addEventListener('bmxChange', e => {
    if (e.detail.reason === 'indicators') out.textContent = `Indicators: ${e.detail.state.indicators.map(i => i.type.toUpperCase()).join(', ') || 'none'}.`;
  });
  el.addEventListener('bmxExport', e => {
    out.textContent = `Saved ${e.detail.fileName} (${Math.round(e.detail.bytes.length / 1024)} KB).`;
  });
</script>