@w5-ui/react 0.1.0

package/src/components/ViolinPlot.tsx

@@ -0,0 +1,158 @@
+export interface ViolinSeries {
+  label: string
+  values: number[]
+  color?: string
+}
+
+export interface ViolinPlotProps {
+  series: ViolinSeries[]
+  yRange?: [number, number]
+  height?: number
+  ariaLabel?: string
+}
+
+const COLORS = ['#006FFF', '#00C8C8', '#F5A623', '#7FB6FF', '#A878F5', '#F56342']
+const SQRT_TWO_PI = Math.sqrt(2 * Math.PI)
+const NUM_PTS = 60
+
+function bandwidth(vals: number[]): number {
+  const n = vals.length
+  const m = vals.reduce((a, b) => a + b, 0) / n
+  const s = Math.sqrt(vals.reduce((a, b) => a + (b - m) ** 2, 0) / n)
+  return Math.max(0.9 * s * Math.pow(n, -0.2), 0.5)
+}
+
+function kde(vals: number[], bw: number, pts: number[]): number[] {
+  const n = vals.length
+  const c = 1 / (n * bw * SQRT_TWO_PI)
+  return pts.map(
+    (y) =>
+      c *
+      vals.reduce((acc, x) => {
+        const z = (y - x) / bw
+        return acc + Math.exp(-0.5 * z * z)
+      }, 0),
+  )
+}
+
+function median(vals: number[]): number {
+  const s = [...vals].sort((a, b) => a - b)
+  const m = Math.floor(s.length / 2)
+  return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2
+}
+
+export function ViolinPlot({
+  series,
+  yRange,
+  height = 160,
+  ariaLabel = 'Violin plot',
+}: ViolinPlotProps) {
+  const VW = 380
+  const VH = height
+  const PAD_L = 28
+  const PAD_R = 8
+  const PAD_T = 8
+  const PAD_B = 20
+
+  const allVals = series.flatMap((s) => s.values)
+  const [yMin, yMax] = yRange ?? [Math.min(...allVals), Math.max(...allVals)]
+
+  const TRACK_W = VW - PAD_L - PAD_R
+  const TRACK_H = VH - PAD_T - PAD_B
+  const slotW = TRACK_W / series.length
+  const maxHalfW = slotW * 0.38
+
+  const evalPts = Array.from(
+    { length: NUM_PTS },
+    (_, i) => yMin + (i / (NUM_PTS - 1)) * (yMax - yMin),
+  )
+
+  function ySvg(v: number) {
+    return PAD_T + ((yMax - v) / (yMax - yMin)) * TRACK_H
+  }
+
+  const violins = series.map((s, si) => {
+    const bw = bandwidth(s.values)
+    const dens = kde(s.values, bw, evalPts)
+    const maxD = Math.max(...dens, 1e-9)
+    const cx = PAD_L + si * slotW + slotW / 2
+
+    const pts = evalPts.map((v, i) => ({ x: (dens[i] / maxD) * maxHalfW, y: ySvg(v) }))
+    const right = pts.map((p) => `${(cx + p.x).toFixed(1)},${p.y.toFixed(1)}`)
+    const left = [...pts].reverse().map((p) => `${(cx - p.x).toFixed(1)},${p.y.toFixed(1)}`)
+    const d = `M${cx},${ySvg(yMin)} L${right.join(' L')} L${left.join(' L')} Z`
+
+    const med = median(s.values)
+    return {
+      d,
+      cx,
+      medY: ySvg(med),
+      maxHalfW,
+      color: s.color ?? COLORS[si % COLORS.length],
+      label: s.label,
+    }
+  })
+
+  const ticks = [0, 0.25, 0.5, 0.75, 1].map((t) => {
+    const v = yMin + t * (yMax - yMin)
+    return { v, y: ySvg(v) }
+  })
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${VH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {ticks.map(({ v, y }) => (
+          <g key={v}>
+            <line
+              x1={PAD_L}
+              y1={y}
+              x2={VW - PAD_R}
+              y2={y}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD_L - 3}
+              y={y + 3}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {v.toFixed(0)}
+            </text>
+          </g>
+        ))}
+        {violins.map((v, si) => (
+          <g key={si}>
+            <path d={v.d} fill={v.color} opacity={0.72} />
+            <line
+              x1={v.cx - v.maxHalfW * 0.45}
+              y1={v.medY}
+              x2={v.cx + v.maxHalfW * 0.45}
+              y2={v.medY}
+              stroke="#fff"
+              strokeWidth={1.5}
+              strokeLinecap="round"
+            />
+            <text
+              x={v.cx}
+              y={VH - 5}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {v.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/VirtualList.tsx

@@ -0,0 +1,59 @@
+import { useState, useCallback, type ReactNode } from 'react'
+
+export interface VirtualListProps<T> {
+  items: T[]
+  itemHeight: number
+  height: number
+  renderItem: (item: T, index: number) => ReactNode
+  overscan?: number
+  label?: string
+  className?: string
+}
+
+export function VirtualList<T>({
+  items,
+  itemHeight,
+  height,
+  renderItem,
+  overscan = 3,
+  label,
+  className,
+}: VirtualListProps<T>) {
+  const [scrollTop, setScrollTop] = useState(0)
+
+  const totalHeight = items.length * itemHeight
+  const firstVisible = Math.floor(scrollTop / itemHeight)
+  const startIndex = Math.max(0, firstVisible - overscan)
+  const endIndex = Math.min(
+    items.length,
+    firstVisible + Math.ceil(height / itemHeight) + overscan + 1,
+  )
+
+  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    setScrollTop(e.currentTarget.scrollTop)
+  }, [])
+
+  return (
+    <div
+      role="list"
+      aria-label={label}
+      className={['vl', className].filter(Boolean).join(' ')}
+      style={{ height, overflowY: 'auto' }}
+      onScroll={handleScroll}
+    >
+      <div style={{ height: totalHeight, position: 'relative' }}>
+        <div style={{ position: 'absolute', top: startIndex * itemHeight, width: '100%' }}>
+          {items.slice(startIndex, endIndex).map((item, i) => (
+            <div
+              key={startIndex + i}
+              role="listitem"
+              style={{ height: itemHeight, overflow: 'hidden' }}
+            >
+              {renderItem(item, startIndex + i)}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/WaffleChart.tsx

@@ -0,0 +1,79 @@
+export interface WaffleSegment {
+  label: string
+  value: number
+  color?: string
+}
+
+export interface WaffleChartProps {
+  segments: WaffleSegment[]
+  total?: number
+  cols?: number
+  rows?: number
+  gap?: number
+  ariaLabel?: string
+}
+
+const COLORS = ['#006FFF', '#00C7A8', '#F5A623', '#FF6B6B', '#A78BFA']
+const VW = 280
+const LEGEND_H = 24
+
+export function WaffleChart({
+  segments,
+  total,
+  cols = 10,
+  rows = 10,
+  gap = 2,
+  ariaLabel = 'Waffle chart',
+}: WaffleChartProps) {
+  const totalCells = cols * rows
+  const sum = total ?? segments.reduce((s, seg) => s + seg.value, 0)
+  const cellSize = (VW - gap * (cols - 1)) / cols
+  const gridH = rows * cellSize + gap * (rows - 1)
+  const svgH = gridH + LEGEND_H + 6
+
+  const cellMap: number[] = Array.from({ length: totalCells }, () => -1)
+  let cursor = 0
+  segments.forEach((seg, si) => {
+    const count = Math.round((seg.value / sum) * totalCells)
+    for (let j = 0; j < count && cursor < totalCells; j++, cursor++) {
+      cellMap[cursor] = si
+    }
+  })
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${svgH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {Array.from({ length: totalCells }, (_, i) => {
+          const col = i % cols
+          const row = Math.floor(i / cols)
+          const x = col * (cellSize + gap)
+          const y = row * (cellSize + gap)
+          const si = cellMap[i]
+          const fill =
+            si >= 0 ? (segments[si].color ?? COLORS[si % COLORS.length]) : 'rgba(255,255,255,0.06)'
+          return <rect key={i} x={x} y={y} width={cellSize} height={cellSize} fill={fill} rx={1} />
+        })}
+
+        {segments.map((seg, si) => {
+          const color = seg.color ?? COLORS[si % COLORS.length]
+          const pct = Math.round((seg.value / sum) * 100)
+          const lx = si * (VW / segments.length)
+          const ly = gridH + 8
+          return (
+            <g key={si}>
+              <rect x={lx} y={ly} width={8} height={8} fill={color} rx={1} />
+              <text x={lx + 11} y={ly + 7.5} fill="#A4A7B5" fontSize={9} fontFamily="inherit">
+                {seg.label} {pct}%
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/WaterfallChart.tsx

@@ -0,0 +1,164 @@
+import { useMemo } from 'react'
+
+export interface WaterfallBar {
+  label: string
+  value: number
+  type?: 'start' | 'delta' | 'total'
+}
+
+export interface WaterfallChartProps {
+  bars: WaterfallBar[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 320
+const PAD = { t: 12, r: 8, b: 24, l: 8 }
+const COLOR_START = '#006FFF'
+const COLOR_POS = '#00C875'
+const COLOR_NEG = '#F04949'
+const COLOR_TOTAL = '#A78BFA'
+
+export function WaterfallChart({
+  bars,
+  height = 160,
+  ariaLabel = 'Waterfall chart',
+}: WaterfallChartProps) {
+  const { rects, connectors, labels } = useMemo(() => {
+    if (!bars.length) return { rects: [], connectors: [], labels: [] }
+    const chartH = height - PAD.t - PAD.b
+    const chartW = VW - PAD.l - PAD.r
+    const n = bars.length
+    const colW = chartW / n
+    const gap = colW * 0.15
+    const barW = colW - gap * 2
+
+    // compute cumulative bases
+    const cumBases: number[] = []
+    let acc = 0
+    for (const b of bars) {
+      if (b.type === 'start' || b.type === 'total') {
+        cumBases.push(0)
+        if (b.type === 'start') acc = b.value
+        else acc = b.value
+      } else {
+        cumBases.push(acc)
+        acc += b.value
+      }
+    }
+
+    // y domain: include 0 and all tops/bases
+    const tops = bars.map((b, i) => {
+      if (b.type === 'start' || b.type === 'total') return b.value
+      return cumBases[i] + b.value
+    })
+    const allVals = [0, ...cumBases, ...tops]
+    const minV = Math.min(...allVals)
+    const maxV = Math.max(...allVals)
+    const range = maxV - minV || 1
+
+    const toY = (v: number) => PAD.t + (1 - (v - minV) / range) * chartH
+    const bot = PAD.t + chartH
+
+    const rects = bars.map((b, i) => {
+      const base = cumBases[i]
+      const top = b.type === 'start' || b.type === 'total' ? b.value : base + b.value
+      const y0 = toY(Math.max(base, top))
+      const y1 = toY(Math.min(base, top))
+      const x = PAD.l + i * colW + gap
+      const color =
+        b.type === 'start'
+          ? COLOR_START
+          : b.type === 'total'
+            ? COLOR_TOTAL
+            : b.value >= 0
+              ? COLOR_POS
+              : COLOR_NEG
+      return {
+        x: x.toFixed(1),
+        y: y0.toFixed(1),
+        w: barW.toFixed(1),
+        h: Math.max(y1 - y0, 1).toFixed(1),
+        color,
+        topV: top,
+        baseV: base,
+      }
+    })
+
+    // connector: horizontal line from top of bar i to x of bar i+1
+    const connectors = rects.slice(0, -1).map((r, i) => {
+      const nextX = PAD.l + (i + 1) * colW + gap
+      const nextEndX = nextX + barW
+      const topY = parseFloat(r.y)
+      return { x1: parseFloat(r.x), x2: nextEndX + barW + gap, y: topY }
+    })
+
+    const labels = bars.map((b, i) => ({
+      x: (PAD.l + (i + 0.5) * colW).toFixed(1),
+      y: (bot + 10).toFixed(1),
+      label: b.label,
+    }))
+
+    return { rects, connectors, labels }
+  }, [bars, height])
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${height}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {[0.25, 0.5, 0.75, 1].map((f, i) => (
+          <line
+            key={i}
+            x1={PAD.l}
+            y1={(PAD.t + (1 - f) * (height - PAD.t - PAD.b)).toFixed(1)}
+            x2={VW - PAD.r}
+            y2={(PAD.t + (1 - f) * (height - PAD.t - PAD.b)).toFixed(1)}
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        {connectors.map((c, i) => (
+          <line
+            key={i}
+            x1={c.x1}
+            y1={c.y}
+            x2={c.x2}
+            y2={c.y}
+            stroke="rgba(255,255,255,0.2)"
+            strokeWidth={1}
+            strokeDasharray="2 2"
+          />
+        ))}
+        {rects.map((r, i) => (
+          <rect
+            key={i}
+            x={r.x}
+            y={r.y}
+            width={r.w}
+            height={r.h}
+            fill={r.color}
+            fillOpacity={0.85}
+            rx={2}
+          />
+        ))}
+        {labels.map((l, i) => (
+          <text
+            key={i}
+            x={l.x}
+            y={l.y}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {l.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/WordCloud.tsx

@@ -0,0 +1,107 @@
+export interface WordCloudItem {
+  word: string
+  weight: number
+  color?: string
+}
+
+export interface WordCloudProps {
+  items: WordCloudItem[]
+  height?: number
+  ariaLabel?: string
+}
+
+const VW = 380
+const PAD = 14
+const MIN_FONT = 9
+const MAX_FONT = 28
+const GAP = 6
+const COLORS = [
+  '#006FFF',
+  '#00C8C8',
+  '#F5A623',
+  '#7FB6FF',
+  '#A878F5',
+  '#F56342',
+  '#00C875',
+  '#FF7BB1',
+]
+
+export function WordCloud({ items, height = 160, ariaLabel = 'Word cloud' }: WordCloudProps) {
+  const sorted = [...items].sort((a, b) => b.weight - a.weight)
+  const maxW = sorted[0]?.weight ?? 1
+  const minW = sorted[sorted.length - 1]?.weight ?? 0
+  const range = maxW - minW || 1
+
+  const words = sorted.map((item, i) => {
+    const t = (item.weight - minW) / range
+    const fontSize = MIN_FONT + t * (MAX_FONT - MIN_FONT)
+    const approxW = item.word.length * fontSize * 0.56 + GAP * 2
+    return {
+      word: item.word,
+      weight: item.weight,
+      fontSize,
+      approxW,
+      color: item.color ?? COLORS[i % COLORS.length],
+      bold: fontSize >= 16,
+    }
+  })
+
+  const usableW = VW - PAD * 2
+  const rows: (typeof words)[] = []
+  let row: typeof words = []
+  let rowW = 0
+
+  for (const w of words) {
+    if (rowW + w.approxW > usableW && row.length > 0) {
+      rows.push(row)
+      row = [w]
+      rowW = w.approxW
+    } else {
+      row.push(w)
+      rowW += w.approxW
+    }
+  }
+  if (row.length) rows.push(row)
+
+  const ROW_H = 32
+  const totalH = rows.length * ROW_H + PAD * 2
+  const svgH = Math.max(height, totalH)
+  const offsetY = PAD + (svgH - totalH) / 2
+
+  const placed = rows.flatMap((r, ri) => {
+    const rowUsed = r.reduce((s, w) => s + w.approxW, 0)
+    let x = PAD + (usableW - rowUsed) / 2
+    const baseY = offsetY + ri * ROW_H
+    return r.map((w) => {
+      const cx = x + w.approxW / 2
+      x += w.approxW
+      return { ...w, cx, cy: baseY + w.fontSize }
+    })
+  })
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${VW} ${svgH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {placed.map((w, i) => (
+          <text
+            key={i}
+            x={w.cx}
+            y={w.cy}
+            textAnchor="middle"
+            fill={w.color}
+            fontSize={w.fontSize}
+            fontWeight={w.bold ? 600 : 400}
+            fontFamily="inherit"
+          >
+            {w.word}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}