@w5-ui/react 0.1.0

package/src/components/ContourPlot.tsx

@@ -0,0 +1,255 @@
+export interface ContourPoint {
+  x: number
+  y: number
+}
+
+export interface ContourPlotProps {
+  points: ContourPoint[]
+  xRange?: [number, number]
+  yRange?: [number, number]
+  height?: number
+  bandwidth?: number
+  color?: string
+  ariaLabel?: string
+}
+
+const VW = 340
+const PAD_L = 28
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 20
+const GW = 38
+const GH = 28
+const LEVELS = [0.12, 0.3, 0.54, 0.78]
+
+function buildGrid(pts: Array<{ gx: number; gy: number }>, bw: number): number[][] {
+  const bw2 = bw * bw
+  const g: number[][] = Array.from({ length: GH + 1 }, () =>
+    Array.from({ length: GW + 1 }, () => 0),
+  )
+  for (let r = 0; r <= GH; r++) {
+    for (let c = 0; c <= GW; c++) {
+      let d = 0
+      for (const p of pts) {
+        const dx = c - p.gx,
+          dy = r - p.gy
+        d += Math.exp((-0.5 * (dx * dx + dy * dy)) / bw2)
+      }
+      g[r][c] = d
+    }
+  }
+  let mx = 0
+  for (const row of g) for (const v of row) if (v > mx) mx = v
+  if (mx > 0) for (const row of g) for (let c = 0; c < row.length; c++) row[c] /= mx
+  return g
+}
+
+function edgeCross(v0: number, v1: number, t: number): number {
+  const d = v1 - v0
+  return Math.abs(d) < 1e-9 ? 0.5 : Math.max(0, Math.min(1, (t - v0) / d))
+}
+
+type P = [number, number]
+
+function marchCell(tl: number, tr: number, bl: number, br: number, t: number): Array<[P, P]> {
+  const a = tl >= t ? 1 : 0
+  const b = tr >= t ? 1 : 0
+  const c = bl >= t ? 1 : 0
+  const d = br >= t ? 1 : 0
+  const T = (): P => [edgeCross(tl, tr, t), 0]
+  const R = (): P => [1, edgeCross(tr, br, t)]
+  const B = (): P => [edgeCross(bl, br, t), 1]
+  const L = (): P => [0, edgeCross(tl, bl, t)]
+  switch ((a << 3) | (b << 2) | (c << 1) | d) {
+    case 0:
+    case 15:
+      return []
+    case 1:
+      return [[R(), B()]]
+    case 2:
+      return [[B(), L()]]
+    case 3:
+      return [[L(), R()]]
+    case 4:
+      return [[T(), R()]]
+    case 5:
+      return [[T(), B()]]
+    case 6: {
+      const m = (tl + tr + bl + br) / 4
+      return m >= t
+        ? [
+            [T(), L()],
+            [R(), B()],
+          ]
+        : [
+            [T(), R()],
+            [L(), B()],
+          ]
+    }
+    case 7:
+      return [[T(), L()]]
+    case 8:
+      return [[T(), L()]]
+    case 9: {
+      const m = (tl + tr + bl + br) / 4
+      return m >= t
+        ? [
+            [T(), R()],
+            [L(), B()],
+          ]
+        : [
+            [T(), L()],
+            [R(), B()],
+          ]
+    }
+    case 10:
+      return [[T(), B()]]
+    case 11:
+      return [[T(), R()]]
+    case 12:
+      return [[L(), R()]]
+    case 13:
+      return [[B(), L()]]
+    case 14:
+      return [[R(), B()]]
+  }
+  return []
+}
+
+export function ContourPlot({
+  points,
+  xRange,
+  yRange,
+  height = 200,
+  bandwidth = 3.5,
+  color = '#006FFF',
+  ariaLabel = 'Contour plot',
+}: ContourPlotProps) {
+  if (!points.length) return null
+
+  const PW = VW - PAD_L - PAD_R
+  const PH = height - PAD_T - PAD_B
+
+  const xs = points.map((p) => p.x)
+  const ys = points.map((p) => p.y)
+  const xMin = xRange?.[0] ?? Math.min(...xs)
+  const xMax = xRange?.[1] ?? Math.max(...xs)
+  const yMin = yRange?.[0] ?? Math.min(...ys)
+  const yMax = yRange?.[1] ?? Math.max(...ys)
+  const xSpan = xMax - xMin || 1
+  const ySpan = yMax - yMin || 1
+
+  const gridPts = points.map((p) => ({
+    gx: ((p.x - xMin) / xSpan) * GW,
+    gy: (1 - (p.y - yMin) / ySpan) * GH,
+  }))
+  const grid = buildGrid(gridPts, bandwidth)
+
+  const cellW = PW / GW
+  const cellH = PH / GH
+  const svgX = (col: number, lx: number) => PAD_L + (col + lx) * cellW
+  const svgY = (row: number, ly: number) => PAD_T + (row + ly) * cellH
+
+  const tyY = (v: number) => PAD_T + (1 - (v - yMin) / ySpan) * PH
+  const txX = (v: number) => PAD_L + ((v - xMin) / xSpan) * PW
+  const yTicks = [yMin, (yMin + yMax) / 2, yMax]
+  const xTicks = [xMin, (xMin + xMax) / 2, xMax]
+
+  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"
+      >
+        {yTicks.map((v, i) => (
+          <g key={i}>
+            <line
+              x1={PAD_L}
+              y1={tyY(v)}
+              x2={PAD_L + PW}
+              y2={tyY(v)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD_L - 4}
+              y={tyY(v) + 3}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {Math.round(v)}
+            </text>
+          </g>
+        ))}
+
+        {points.map((p, i) => (
+          <circle
+            key={i}
+            cx={PAD_L + ((p.x - xMin) / xSpan) * PW}
+            cy={PAD_T + (1 - (p.y - yMin) / ySpan) * PH}
+            r={1.5}
+            fill={color}
+            opacity={0.2}
+          />
+        ))}
+
+        {LEVELS.map((t, li) => {
+          const opacity = 0.28 + li * 0.18
+          const sw = 0.55 + li * 0.28
+          const lines: Array<{ key: string; x1: number; y1: number; x2: number; y2: number }> = []
+          for (let r = 0; r < GH; r++) {
+            for (let col = 0; col < GW; col++) {
+              const segs = marchCell(
+                grid[r][col],
+                grid[r][col + 1],
+                grid[r + 1][col],
+                grid[r + 1][col + 1],
+                t,
+              )
+              segs.forEach(([[lx0, ly0], [lx1, ly1]], si) => {
+                lines.push({
+                  key: `${r}-${col}-${si}`,
+                  x1: svgX(col, lx0),
+                  y1: svgY(r, ly0),
+                  x2: svgX(col, lx1),
+                  y2: svgY(r, ly1),
+                })
+              })
+            }
+          }
+          return lines.map((s) => (
+            <line
+              key={`${li}-${s.key}`}
+              x1={s.x1}
+              y1={s.y1}
+              x2={s.x2}
+              y2={s.y2}
+              stroke={color}
+              strokeWidth={sw}
+              opacity={opacity}
+              strokeLinecap="round"
+            />
+          ))
+        })}
+
+        {xTicks.map((v, i) => (
+          <text
+            key={i}
+            x={txX(v)}
+            y={height - 4}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {Math.round(v)}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/CopyButton.tsx

@@ -0,0 +1,47 @@
+import { useState, useCallback } from 'react'
+
+const CopyIcon = () => (
+  <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable={false}>
+    <rect x="4" y="1" width="9" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+    <rect x="1" y="4" width="9" height="10" rx="1.5" stroke="currentColor" strokeWidth="1.5" />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg viewBox="0 0 14 14" width="14" height="14" fill="none" aria-hidden="true" focusable={false}>
+    <path
+      d="M2.5 7.5l3.5 3.5L12 3"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+)
+
+export interface CopyButtonProps {
+  text: string
+  label?: string
+}
+
+export function CopyButton({ text, label = 'Copy' }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }, [text])
+
+  return (
+    <button
+      type="button"
+      className={`copy-btn${copied ? ' copy-btn--done' : ''}`}
+      aria-label={copied ? 'Copied!' : label}
+      onClick={handleCopy}
+    >
+      {copied ? <CheckIcon /> : <CopyIcon />}
+    </button>
+  )
+}

package/src/components/CorrelationMatrix.tsx

@@ -0,0 +1,107 @@
+export interface CorrelationMatrixProps {
+  labels: string[]
+  data: number[][]
+  cellSize?: number
+  ariaLabel?: string
+}
+
+const LABEL_W = 68
+const LABEL_H = 26
+const DARK = [26, 29, 43] as const
+const BLUE = [0, 111, 255] as const
+const RED = [255, 59, 48] as const
+
+function lerp(a: number, b: number, t: number): number {
+  return Math.round(a + (b - a) * t)
+}
+
+function cellColor(v: number): string {
+  const t = Math.max(0, Math.min(1, Math.abs(v)))
+  const [r0, g0, b0] = DARK
+  if (v >= 0) {
+    const [r1, g1, b1] = BLUE
+    return `rgb(${lerp(r0, r1, t)},${lerp(g0, g1, t)},${lerp(b0, b1, t)})`
+  }
+  const [r1, g1, b1] = RED
+  return `rgb(${lerp(r0, r1, t)},${lerp(g0, g1, t)},${lerp(b0, b1, t)})`
+}
+
+export function CorrelationMatrix({
+  labels,
+  data,
+  cellSize = 52,
+  ariaLabel = 'Correlation matrix',
+}: CorrelationMatrixProps) {
+  const n = labels.length
+  const svgW = LABEL_W + n * cellSize
+  const svgH = LABEL_H + n * cellSize
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ width: '100%' }}>
+      <svg
+        viewBox={`0 0 ${svgW} ${svgH}`}
+        style={{ width: '100%', height: 'auto', display: 'block' }}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {labels.map((label, j) => (
+          <text
+            key={j}
+            x={LABEL_W + j * cellSize + cellSize / 2}
+            y={LABEL_H - 4}
+            textAnchor="middle"
+            fontSize={9}
+            fill="#A4A7B5"
+            fontFamily="inherit"
+          >
+            {label}
+          </text>
+        ))}
+        {labels.map((label, i) => (
+          <text
+            key={i}
+            x={LABEL_W - 4}
+            y={LABEL_H + i * cellSize + cellSize / 2}
+            textAnchor="end"
+            dominantBaseline="middle"
+            fontSize={9}
+            fill="#A4A7B5"
+            fontFamily="inherit"
+          >
+            {label}
+          </text>
+        ))}
+        {data.map((row, i) =>
+          row.map((v, j) => {
+            const x = LABEL_W + j * cellSize
+            const y = LABEL_H + i * cellSize
+            return (
+              <g key={`${i}-${j}`}>
+                <rect
+                  x={x + 1}
+                  y={y + 1}
+                  width={cellSize - 2}
+                  height={cellSize - 2}
+                  fill={cellColor(v)}
+                  rx={3}
+                />
+                <text
+                  x={x + cellSize / 2}
+                  y={y + cellSize / 2}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  fontSize={10}
+                  fill={Math.abs(v) >= 0.5 ? '#fff' : '#A4A7B5'}
+                  fontFamily="inherit"
+                  fontWeight={i === j ? '700' : '400'}
+                >
+                  {v.toFixed(2)}
+                </text>
+              </g>
+            )
+          }),
+        )}
+      </svg>
+    </div>
+  )
+}

package/src/components/CountUp.tsx

@@ -0,0 +1,70 @@
+import { useState, useEffect, useRef } from 'react'
+
+export interface CountUpProps {
+  from?: number
+  to: number
+  duration?: number
+  decimals?: number
+  prefix?: string
+  suffix?: string
+  separator?: string
+  className?: string
+}
+
+function easeOut(t: number): number {
+  return 1 - Math.pow(1 - t, 3)
+}
+
+function fmt(n: number, decimals: number, separator: string): string {
+  const fixed = n.toFixed(decimals)
+  if (!separator) return fixed
+  const [int, dec] = fixed.split('.')
+  const intFmt = int.replace(/\B(?=(\d{3})+(?!\d))/g, separator)
+  return dec !== undefined ? `${intFmt}.${dec}` : intFmt
+}
+
+export function CountUp({
+  from = 0,
+  to,
+  duration = 1200,
+  decimals = 0,
+  prefix = '',
+  suffix = '',
+  separator = ',',
+  className,
+}: CountUpProps) {
+  const [current, setCurrent] = useState(from)
+  const rafRef = useRef<number>(0)
+  const reduced =
+    typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  useEffect(() => {
+    if (reduced) {
+      setCurrent(to)
+      return
+    }
+    const t0 = performance.now()
+    const range = to - from
+    function tick(now: number) {
+      const t = Math.min((now - t0) / duration, 1)
+      setCurrent(from + range * easeOut(t))
+      if (t < 1) rafRef.current = requestAnimationFrame(tick)
+    }
+    rafRef.current = requestAnimationFrame(tick)
+    return () => cancelAnimationFrame(rafRef.current)
+  }, [from, to, duration, reduced])
+
+  const display = fmt(current, decimals, separator)
+  const label = `${prefix}${fmt(to, decimals, separator)}${suffix}`
+
+  return (
+    <span className={className}>
+      <span aria-hidden="true">
+        {prefix}
+        {display}
+        {suffix}
+      </span>
+      <span className="sr-only">{label}</span>
+    </span>
+  )
+}

package/src/components/CumulativeDistribution.tsx

@@ -0,0 +1,155 @@
+import { useMemo } from 'react'
+
+export interface CdfSeries {
+  label: string
+  color: string
+  values: number[]
+}
+
+export interface CumulativeDistributionProps {
+  series: CdfSeries[]
+  guides?: number[]
+  height?: number
+  unit?: string
+  ariaLabel?: string
+}
+
+const W = 400
+const PL = 38
+const PR = 12
+const PT = 14
+const PB = 28
+
+export function CumulativeDistribution({
+  series,
+  guides = [50, 95],
+  height = 160,
+  unit = '',
+  ariaLabel = 'Cumulative distribution chart',
+}: CumulativeDistributionProps) {
+  const layout = useMemo(() => {
+    const allVals = series.flatMap((s) => s.values)
+    if (!allVals.length) return null
+
+    const xMin = Math.min(...allVals)
+    const xMax = Math.max(...allVals)
+    const xRange = xMax - xMin || 1
+    const cW = W - PL - PR
+    const cH = height - PT - PB
+
+    const toX = (v: number) => PL + ((v - xMin) / xRange) * cW
+    const toY = (p: number) => PT + (1 - p) * cH
+
+    const paths = series.map((s) => {
+      const sorted = [...s.values].sort((a, b) => a - b)
+      const n = sorted.length
+      let d = `M${toX(xMin).toFixed(1)},${toY(0).toFixed(1)}`
+      sorted.forEach((v, i) => {
+        d += ` H${toX(v).toFixed(1)} V${toY((i + 1) / n).toFixed(1)}`
+      })
+      d += ` H${toX(xMax).toFixed(1)}`
+      return { label: s.label, color: s.color, d }
+    })
+
+    const yTicks = [0, 0.25, 0.5, 0.75, 1].map((p) => ({
+      y: toY(p),
+      label: `${Math.round(p * 100)}%`,
+    }))
+
+    const step = xRange / 4
+    const xTicks = Array.from({ length: 5 }, (_, i) => {
+      const v = xMin + step * i
+      return { x: toX(v), label: `${Math.round(v)}${unit}` }
+    })
+
+    const guideLines = guides.map((g) => ({ p: g, y: toY(g / 100) }))
+
+    return { paths, yTicks, xTicks, guideLines }
+  }, [series, guides, height, unit])
+
+  if (!layout) return null
+  const { paths, yTicks, xTicks, guideLines } = layout
+
+  return (
+    <div role="img" aria-label={ariaLabel} style={{ lineHeight: 0 }}>
+      <svg
+        viewBox={`0 0 ${W} ${height}`}
+        width="100%"
+        height={height}
+        aria-hidden="true"
+        focusable="false"
+      >
+        {yTicks.map((t) => (
+          <line
+            key={t.label}
+            x1={PL}
+            x2={W - PR}
+            y1={t.y}
+            y2={t.y}
+            stroke="rgba(255,255,255,0.06)"
+            strokeWidth={1}
+          />
+        ))}
+        {guideLines.map((g) => (
+          <g key={g.p}>
+            <line
+              x1={PL}
+              x2={W - PR}
+              y1={g.y}
+              y2={g.y}
+              stroke="rgba(255,255,255,0.18)"
+              strokeWidth={1}
+              strokeDasharray="4 3"
+            />
+            <text
+              x={W - PR - 2}
+              y={g.y - 3}
+              textAnchor="end"
+              fill="#6E7079"
+              fontSize={9}
+              fontFamily="inherit"
+            >
+              p{g.p}
+            </text>
+          </g>
+        ))}
+        {paths.map((s) => (
+          <path
+            key={s.label}
+            d={s.d}
+            fill="none"
+            stroke={s.color}
+            strokeWidth={2}
+            strokeLinejoin="round"
+          />
+        ))}
+        {yTicks.map((t) => (
+          <text
+            key={t.label}
+            x={PL - 4}
+            y={t.y + 4}
+            textAnchor="end"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {t.label}
+          </text>
+        ))}
+        {xTicks.map((t, i) => (
+          <text
+            key={i}
+            x={t.x}
+            y={height - PB + 14}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {t.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}