Stat tiles

// tiles: six stat tiles in two rows of three, in candle's look. Each tile is a 1px outline at 14% ink
// with a muted label, a 22px value, a delta with a triangle drawn as a path (not a text glyph), and a
// 1px sparkline along the bottom. The sparklines come from a seeded walk, so the picture repeats.
const W = 380
const H = 204
const TILE = { w: 116, h: 90, gap: 8, margin: 8 }
const UP = '#2C7A39'
const DOWN = '#AB2B3F'
const INK = '#141413'
const MUTED = '#73726C'
const CLAUDE = '#D77757'
const STAGE = '#FAF9F5'
const FONT = "'Inter Tight','Segoe UI',system-ui,sans-serif"

const TILES = [
  { label: 'Equity', value: '12.48M', up: true, delta: '+2.4%', seed: 20261001, drift: 0.02 },
  { label: 'Day P/L', value: '+182K', up: true, delta: '+1.5%', seed: 20261002, drift: 0.02 },
  { label: 'Win rate', value: '58.3%', up: false, delta: '-0.8pt', seed: 20261003, drift: -0.02 },
  { label: 'Orders', value: '142', up: true, delta: '+12', seed: 20261004, drift: 0.01 },
  { label: 'Fills', value: '1,087', up: false, delta: '-4.1%', seed: 20261005, drift: -0.01 },
  { label: 'Drawdown', value: '-2.9%', up: true, delta: '+0.4pt', seed: 20261006, drift: 0.01, accent: true },
]

// A seeded walk with a drift, scaled to 0..1: the same line every time, and it leans with the delta
function walk(seed, n, drift) {
  let s = seed
  const rnd = () => (s = (Math.imul(s, 1103515245) + 12345) & 0x7fffffff) / 0x7fffffff
  const out = []
  let v = 0.5
  for (let i = 0; i < n; i++) {
    v += (rnd() - 0.5) * 0.3 + drift
    out.push(v)
  }
  const lo = Math.min(...out)
  const hi = Math.max(...out)
  return out.map(x => (x - lo) / (hi - lo || 1))
}

function tile(t, i) {
  const x = TILE.margin + (i % 3) * (TILE.w + TILE.gap)
  const y = TILE.margin + Math.floor(i / 3) * (TILE.h + TILE.gap)
  const trend = t.up ? UP : DOWN
  const pts = walk(t.seed, 24, t.drift)
  // The sparkline band is y+66 to y+82, inset 8px from each side of the tile
  const d = pts.map((v, k) => {
    const px = x + 8 + ((TILE.w - 16) * k) / (pts.length - 1)
    const py = y + 82 - v * 16
    return `${k ? 'L' : 'M'}${px.toFixed(1)} ${py.toFixed(1)}`
  }).join('')
  const tri = t.up
    ? `M${x + 8} ${y + 58}L${x + 14} ${y + 58}L${x + 11} ${y + 51.5}Z`
    : `M${x + 8} ${y + 51.5}L${x + 14} ${y + 51.5}L${x + 11} ${y + 58}Z`
  return [
    `<rect x="${x + 0.5}" y="${y + 0.5}" width="${TILE.w - 1}" height="${TILE.h - 1}" rx="3" fill="none" stroke="${INK}" stroke-opacity="0.14"/>`,
    `<text x="${x + 8}" y="${y + 14}" font-size="9" font-family="${FONT}" fill="${MUTED}">${t.label}</text>`,
    `<text x="${x + 8}" y="${y + 42}" font-size="22" font-family="${FONT}" fill="${INK}">${t.value}</text>`,
    `<path d="${tri}" fill="${trend}"/>`,
    `<text x="${x + 18}" y="${y + 58}" font-size="9" font-family="${FONT}" fill="${trend}">${t.delta}</text>`,
    // Claude orange marks the drawdown line only: the one tile where a rise is a warning
    `<path d="${d}" fill="none" stroke="${t.accent ? CLAUDE : trend}" stroke-width="1" stroke-linejoin="round"/>`,
  ].join('')
}

const SOURCE = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}"><rect width="${W}" height="${H}" rx="4" fill="${STAGE}"/>${TILES.map(tile).join('')}</svg>`

export default {
  id: 'tiles',
  title: 'Stat tiles',
  category: 'usage',
  description: 'Six stat tiles with a muted label, a large value, a delta with a drawn triangle and a sparkline along the bottom.',
  element: ui => ui.Svg({ source: SOURCE, alt: 'Six stat tiles in two rows of three, each with a value, a delta and a sparkline', width: W, height: H }),
}