Text table

// table: Box and Text only, no Svg, so what gets judged is the pane's own text layout. Each row is a row
// of Text cells, and each cell is a string padded to its column width so the columns line up in a
// monospace face. Numbers are padded on the left (right-aligned). The owner column is dimmed as secondary.
const COLS = [
  { w: 14, right: false }, // name
  { w: 8, right: false }, // owner
  { w: 5, right: true }, // count
  { w: 8, right: true }, // change
  { w: 8, right: false }, // status
]
const GAP = 1 // the row Box gap; the rule below is sized to include it
const RULE = '-'.repeat(COLS.reduce((n, c) => n + c.w, 0) + GAP * (COLS.length - 1))

const HEAD = ['name', 'owner', 'count', 'change', 'status']
const ROWS = [
  ['mean-revert', 'mika', 14, '+1.24%', 'open'],
  ['breakout-2', 'ren', 6, '-0.37%', 'hold'],
  ['pairs-eth', 'mika', 22, '+0.08%', 'open'],
  ['vol-carry', 'sho', 3, '-2.11%', 'review'],
  ['gap-fill', 'kai', 9, '+0.66%', 'filled'],
  ['sector-rot', 'ren', 17, '+3.02%', 'open'],
  ['range-scalp', 'yui', 40, '-0.19%', 'paused'],
  ['news-drift', 'sho', 5, '+0.44%', 'review'],
  ['basis-arb', 'kai', 11, '-0.92%', 'hold'],
  ['trend-4h', 'mika', 8, '+1.71%', 'open'],
  ['opening-rng', 'yui', 4, '-1.08%', 'closed'],
  ['earnings-pm', 'ren', 2, '+0.27%', 'new'],
]

const pad = (s, col) => (col.right ? String(s).padStart(col.w) : String(s).padEnd(col.w))

// One table row: a Box of Text cells. dimAll dims the header; the owner column is always dimmed.
function row(ui, key, values, dimAll) {
  const { Box, Text } = ui
  return Box({
    key,
    flexDirection: 'row',
    gap: GAP,
    children: values.map((v, i) => Text({
      key: i,
      dimColor: dimAll || i === 1,
      children: [pad(v, COLS[i])],
    })),
  })
}

export default {
  id: 'table',
  title: 'Text table',
  category: 'compare',
  description: 'Box and Text only: padded cells line up in a monospace face, numbers right-aligned, the owner column dimmed.',
  element: ui => {
    const { Box, Text } = ui
    return Box({
      flexDirection: 'column',
      children: [
        Text({ bold: true, children: ['Open positions (sample)'] }),
        row(ui, 'head', HEAD, true),
        Text({ dimColor: true, children: [RULE] }),
        ...ROWS.map((r, i) => row(ui, `r${i}`, r, false)),
      ],
    })
  },
}