vn-stockmarket-heatmap

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    if (!isOpen) { // pane survived a /reload-plugins: module state reset, command.run not re-run
      isOpen = true
      startTimers($)
      void refresh($)
      void refreshWatch($)
    }
    try {
    const { Box, Text, Button, Input, Select, Svg } = $.ui.resolve(e) as any
    const desktop = e.surface === 'desktop'
    const q = await read($, quotes)
    const m = await read($, meta)
    const v = await read($, view)
    const sel = await read($, only)
    const z = await read($, zoom)
    const ix = await read($, idx)
    const cols = Math.max(30, (e.props as any)?.bodyColumns ?? e.viewport?.columns ?? 80)
    const rows = (e.viewport?.rows ?? 30) - 6

    const age = m.at ? Math.round((Date.now() - m.at) / 1000) : 0

    const sectors = [...new Set(q.map(x => x.g))].sort()
    const picked = sel ? sel.split('|') : []
    const pool = picked.length ? q.filter(y => picked.includes(y.g)) : q
    const by = new Map<string, Quote[]>()
    for (const x of pool) {
      const key = v === 'sector' ? x.g : EXCHANGE[x.x] || '?'
      by.set(key, [...(by.get(key) ?? []), x])
    }
    const groups: Group[] = [...by.entries()].map(([name, xs]) => {
      const avg = wavg(xs)
      const s = SHORT[name] ?? name.split(' ')[0] ?? name
      return {
        heads: [`${name} ${fmt(avg)}`, `${s} ${fmt(avg)}`, s, ...[TINY[name]].filter((x): x is string => !!x)],
        tone: avg >= 0 ? '#7CE0A0' : '#FF8A80',
        v: xs.reduce((s, x) => s + x.m, 0),
        tiles: xs.map(x => ({ label: x.s, sub: fmt(x.p), bg: COLOR(x), v: x.m })),
      }
    }).sort((a, b) => b.v - a.v)
    const n2 = (v: number) => v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
    const ixs = ix.map(x => ({
      key: x.name,
      head: `${x.name} ${n2(x.price)} `,
      chg: `${x.change > 0 ? '▲' : x.change < 0 ? '▼' : '■'}${n2(x.change)} (${n2(x.pct)}%)`,
      color: x.change > 0 ? '#2FA55A' : x.change < 0 ? '#C0392B' : '#C9A227',
    }))
    const ixLen = ixs.reduce((n, x) => n + x.head.length + x.chg.length + 3, 0)
    const ixRows = (ixs.length ? Math.ceil(ixLen / cols) : 0) + (sel && !desktop ? 1 : 0) // + chips row
    const W = Math.max(30, cols - 1)
    const narrow = W < 62 // short labels so no control row wraps
    const bodyRows = (e.props as any)?.scroll?.bodyRows ?? (e.viewport?.rows ?? 30) - 3
    const t = await read($, tab)
    const l = await read($, lists)
    const wr = await read($, wrows)
    const wm = await read($, wmeta)
    const wl = (await read($, wlrows)).slice(0, 8)
    const q0 = await read($, wq)
    const msg = await read($, wmsg)
    const cap = Math.max(1, Math.floor(bodyRows * 0.3) - 4)
    const kind = t === 'port' ? 'port' : 'vol'
    // Two side-by-side tables only when the list overflows one AND each half still fits (dropping at most Buy/Sell);
    // otherwise one table, dropping low-priority columns until it fits. Never wraps.
    const dualCols = t !== 'port' && wr.length > cap ? fit(kind, Math.floor((W - 2) / 2), kind === 'vol' ? 0 : 2) : undefined
    const dual = !!dualCols
    const cs = dualCols ?? fit(kind, W, kind === 'vol' ? 0 : 99) ?? (kind === 'vol' ? COLS[kind] : COLS[kind].filter(c => !DROP[kind].includes(c.h)))
    const shown = wr // pane scrolls: show every row instead of truncating
    const half = dual ? Math.ceil(shown.length / 2) : shown.length
    const H = Math.max(8, Math.floor(bodyRows * 0.55) - 3 - ixRows) // fixed share; tables below scroll
    const grid = q.length && !desktop ? buildGrid(groups, W, H, z) : []
    gridTop = 3 + ixRows // clock, status, buttons, index row(s)
    gridLen = grid.length
    scrollOff = (e.props as any)?.scroll?.offset ?? 0
    const cut = (s: string) => (s.length > W ? s.slice(0, W) : s)
    const head = cs.map(c => (c.left ? c.h.padEnd(c.w) : c.h.padStart(c.w))).join('')

    const rowCell = (r: WRow) => {
      const pos = l.port[r.s]
      const bg = r.fl > 0 ? UP_BG : r.fl < 0 ? DN_BG : undefined
      return (
        <Text>
          {cs.map(c => {
            const v = c.cell(r, pos)
            return <Text key={c.h} bold={v.b} dimColor={v.dim} color={v.c} backgroundColor={bg}>{c.left ? v.s.padEnd(c.w) : v.s.padStart(c.w)}</Text>
          })}
        </Text>
      )
    }

    if (desktop) {
      // Fill the pane: ~8px per column. Table zoom (A-/A+) scales the SVG text; once two tables fit side by side, it shows two.
      const mapW = Math.max(480, Math.round(cols * 8))
      const tz0 = await read($, tzoom)
      const adj = await read($, mapadj)
      const slIdx = Math.max(0, Math.min(SL_N - 1, Math.round(adj / SL_STEP) + SL_AUTO))
      const table = (rs: WRow[], k: 'vol' | 'port' | 'wl', fs: number, pl = false) => {
        const lh = Math.round(fs * 1.65)
        const pxCells = (px: number) => Math.floor(px / (fs * 0.62))
        const two = rs.length > 1 ? fit(k, pxCells((mapW - 24) / 2), k === 'vol' ? 3 : 2) : undefined // VN30 (vol): drops Room/F.Sell/F.Buy to fit two tables; Vol/Buy/Sell stay
        const cs = two ?? fit(k, pxCells(mapW), k === 'vol' ? 0 : 99) ?? (k === 'vol' ? COLS[k] : COLS[k].filter(c => !DROP[k].includes(c.h)))
        const h = ((two ? Math.ceil(rs.length / 2) : rs.length) + 1) * lh + 4
        const svg = () => tableSvg(cs, rs.map(r => ({ cells: cs.map(c => c.cell(r, pl ? l.port[r.s] : undefined)), bg: r.fl > 0 ? '#2ECC71' : r.fl < 0 ? '#FF5A4D' : undefined } as TRow)), mapW, fs, !!two)
        return { svg, h }
      }
      const tblH = (fs: number) => (wr.length ? table(wr, kind, fs, t === 'port').h : 40) + (wl.length ? table(wl, 'wl', fs).h : 0)
      // ~19px per row; fixed chrome (header, selects, index row, 2 sliders, tab, total, search, hint, watchlist title + remove row) ≈ 400px.
      const total = (e.viewport?.rows ?? 60) * 19 - 400
      const clampMap = (h: number) => Math.max(200, Math.min(1100, Math.round(h)))
      // Auto text size (tz0 < 0): the map keeps the space it gets at the default size (+ the map-size slider), and the tables take whatever height is left, so the biggest text that still fits wins. Smaller map => bigger text; bigger map => smaller text.
      const refFs = TABLE_FS[tz0 >= 0 ? Math.min(TABLE_FS.length - 1, tz0) : TABLE_FS_DEF]!
      const mapH = Math.max(160, Math.min(2400, clampMap(total - tblH(refFs)) + adj))
      const autoIdx = TABLE_FS.map((_, i) => i).reverse().find(i => tblH(TABLE_FS[i]!) <= total - mapH) ?? 0
      const tz = tz0 >= 0 ? Math.min(TABLE_FS.length - 1, tz0) : autoIdx
      const fs = TABLE_FS[tz]!
      const mainT = wr.length ? table(wr, kind, fs, t === 'port') : undefined
      const wlT = wl.length ? table(wl, 'wl', fs) : undefined
      return (
        <Box flexDirection="column" backgroundColor="#202226" flexGrow={1}>
          <Text bold>HCMC {new Date(Date.now() + 7 * 3600_000).toISOString().slice(11, 19)} <Text dimColor>{m.status === 'live' ? `${age}s ago` : m.status}<Text color={session().c}> · {session().t}</Text>{capsHave < capsOf ? ` · caps ${capsHave}/${capsOf}` : ''} · Source: SSI API</Text></Text>
          <Box flexWrap="wrap">
            <Select
              key="sel-view"
              label="Group by "
              value={v}
              options={[{ value: 'sector', label: 'Sector' }, { value: 'exchange', label: 'Exchange' }]}
              onSelect={(x: string) => { void update($, view, () => x as View) }}
            />
            <Select
              key="sel-filter"
              label="Filter "
              value="__sum"
              options={[
                { value: '__sum', label: picked.length ? picked.join(', ').slice(0, 40) : 'All sectors' },
                { value: '__all', label: 'Clear filter (all sectors)' },
                ...sectors.map(x => ({ value: x, label: `${picked.includes(x) ? '✓ ' : '   '}${x}` })),
              ]}
              onSelect={(x: string) => {
                if (x === '__sum') return
                void update($, only, cur => {
                  if (x === '__all') return ''
                  const c = cur ? cur.split('|') : []
                  return (c.includes(x) ? c.filter(y => y !== x) : [...c, x]).join('|')
                })
              }}
            />
          </Box>
          {picked.length > 0 && (
            <Box flexWrap="wrap">
              <Text dimColor>Showing </Text>
              {picked.map(x => <Button key={`chip-${x}`} label={`${x} ✕`} onPress={() => update($, only, cur => cur.split('|').filter(y => y !== x).join('|'))} />)}
            </Box>
          )}
          {ixs.length > 0 && <Box flexWrap="wrap">{ixs.map(x => <Text key={x.key}><Text bold>{x.head}</Text><Text color={x.color}>{x.chg}{'   '}</Text></Text>)}</Box>}
          {q.length === 0 ? <Text dimColor>Loading…</Text> : <Svg source={buildSvg(groups, mapW, mapH)} alt="Vietnam stock-market treemap by market cap, coloured by daily change" />}
          <Box>
            <Text dimColor>Map size </Text>
            {Array.from({ length: SL_N }, (_, k) => (
              <Button key={`ms${k}`} plain label={k <= slIdx ? '█' : '░'} onPress={() => update($, mapadj, () => (k - SL_AUTO) * SL_STEP)} />
            ))}
            <Button key="map-auto" label="⟲" onPress={() => update($, mapadj, () => 0)} />
          </Box>