@w5-ui/react 0.1.0

package/src/components/GanttChart.tsx

@@ -0,0 +1,96 @@
+export interface GanttTask {
+  label: string
+  start: number
+  end: number
+  color?: string
+}
+
+export interface GanttChartProps {
+  tasks: GanttTask[]
+  xLabels?: string[]
+  ariaLabel?: string
+}
+
+const VW = 340
+const LABEL_W = 100
+const PAD_R = 8
+const TRACK_W = VW - LABEL_W - PAD_R
+const ROW_H = 28
+const BAR_H = 14
+const PAD_T = 6
+const AXIS_H = 18
+
+export function GanttChart({ tasks, xLabels = [], ariaLabel = 'Gantt chart' }: GanttChartProps) {
+  const svgH = PAD_T + tasks.length * ROW_H + AXIS_H
+  const ticks = xLabels.length
+    ? xLabels.map((lbl, i) => ({ x: LABEL_W + (i / (xLabels.length - 1 || 1)) * TRACK_W, lbl }))
+    : []
+
+  const tx = (v: number) => LABEL_W + v * TRACK_W
+
+  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"
+      >
+        {ticks.map(({ x, lbl }, i) => (
+          <g key={i}>
+            <line
+              x1={x}
+              y1={PAD_T}
+              x2={x}
+              y2={PAD_T + tasks.length * ROW_H}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={x}
+              y={PAD_T + tasks.length * ROW_H + 13}
+              fill="#6E7079"
+              fontSize={9}
+              textAnchor="middle"
+              fontFamily="inherit"
+            >
+              {lbl}
+            </text>
+          </g>
+        ))}
+
+        {tasks.map((task, i) => {
+          const cy = PAD_T + i * ROW_H + ROW_H / 2
+          const x1 = tx(task.start)
+          const x2 = tx(task.end)
+          const barW = Math.max(x2 - x1, 4)
+          const color = task.color ?? '#006FFF'
+
+          return (
+            <g key={i}>
+              <text
+                x={LABEL_W - 6}
+                y={cy + 4}
+                fill="#A4A7B5"
+                fontSize={10}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {task.label}
+              </text>
+              <rect
+                x={x1}
+                y={cy - BAR_H / 2}
+                width={barW}
+                height={BAR_H}
+                rx={3}
+                fill={color}
+                opacity={0.85}
+              />
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}

package/src/components/Gauge.tsx

@@ -0,0 +1,71 @@
+export interface GaugeProps {
+  value: number
+  label: string
+  color?: string
+  size?: number
+  ariaLabel?: string
+}
+
+export function Gauge({ value, label, color = '#006FFF', size = 120, ariaLabel }: GaugeProps) {
+  const sw = 10
+  const cx = size / 2
+  const cy = size / 2
+  const r = cx - sw / 2 - 2
+  const svgH = Math.round(size * 0.7)
+  const pathLen = Math.PI * r
+  const fillLen = (Math.min(100, Math.max(0, value)) / 100) * pathLen
+  const d = `M ${cx - r},${cy} A ${r},${r} 0 1 1 ${cx + r},${cy}`
+  const valY = cy + Math.round(size * 0.06)
+  const lblY = valY + Math.round(size * 0.13) + 2
+  const a11yLabel = ariaLabel ?? `${label} ${value}%`
+
+  return (
+    <div
+      role="meter"
+      aria-valuenow={value}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={a11yLabel}
+      style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}
+    >
+      <svg width={size} height={svgH} aria-hidden="true" focusable="false">
+        <path
+          d={d}
+          fill="none"
+          stroke="rgba(255,255,255,0.08)"
+          strokeWidth={sw}
+          strokeLinecap="round"
+        />
+        <path
+          d={d}
+          fill="none"
+          stroke={color}
+          strokeWidth={sw}
+          strokeLinecap="round"
+          strokeDasharray={`${fillLen} ${pathLen}`}
+        />
+        <text
+          x={cx}
+          y={valY}
+          textAnchor="middle"
+          fill="#fff"
+          fontSize={Math.round(size * 0.2)}
+          fontWeight={600}
+          fontFamily="inherit"
+        >
+          {value}%
+        </text>
+        <text
+          x={cx}
+          y={lblY}
+          textAnchor="middle"
+          fill="#6E7079"
+          fontSize={Math.round(size * 0.1)}
+          fontFamily="inherit"
+        >
+          {label}
+        </text>
+      </svg>
+    </div>
+  )
+}

package/src/components/GroupedList.tsx

@@ -0,0 +1,125 @@
+import { useState, useId } from 'react'
+
+export type GroupedListItemStatus = 'danger' | 'warn' | 'success' | 'info' | 'neutral'
+
+export interface GroupedListItem {
+  label: string
+  sublabel?: string
+  meta?: string
+  status?: GroupedListItemStatus
+}
+
+export interface GroupedListGroup {
+  label: string
+  items: GroupedListItem[]
+  defaultOpen?: boolean
+  color?: string
+}
+
+export interface GroupedListProps {
+  groups: GroupedListGroup[]
+  collapsible?: boolean
+  ariaLabel?: string
+}
+
+const STATUS_COLORS: Record<GroupedListItemStatus, string> = {
+  danger: '#F03A3A',
+  warn: '#F5A623',
+  success: '#00B070',
+  info: '#006FFF',
+  neutral: '#6E7079',
+}
+
+export function GroupedList({
+  groups,
+  collapsible = true,
+  ariaLabel = 'Grouped list',
+}: GroupedListProps) {
+  const uid = useId()
+  const [open, setOpen] = useState<boolean[]>(() => groups.map((g) => g.defaultOpen !== false))
+
+  function toggle(i: number) {
+    setOpen((prev) => prev.map((v, j) => (j === i ? !v : v)))
+  }
+
+  return (
+    <div className="gl" aria-label={ariaLabel}>
+      {groups.map((group, gi) => {
+        const isOpen = open[gi]
+        const panelId = `${uid}-gl-${gi}`
+        return (
+          <div key={gi} className="gl-group">
+            {collapsible ? (
+              <button
+                type="button"
+                className="gl-header"
+                aria-expanded={isOpen}
+                aria-controls={panelId}
+                onClick={() => toggle(gi)}
+              >
+                {group.color && (
+                  <span
+                    className="gl-color-dot"
+                    style={{ background: group.color }}
+                    aria-hidden="true"
+                  />
+                )}
+                <span className="gl-title">{group.label}</span>
+                <span className="gl-count">{group.items.length}</span>
+                <svg
+                  className={`gl-chevron${isOpen ? ' gl-chevron--open' : ''}`}
+                  width="12"
+                  height="12"
+                  viewBox="0 0 12 12"
+                  aria-hidden="true"
+                  focusable={false}
+                >
+                  <path
+                    d="M2 4l4 4 4-4"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    fill="none"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </button>
+            ) : (
+              <div className="gl-header gl-header--static">
+                {group.color && (
+                  <span
+                    className="gl-color-dot"
+                    style={{ background: group.color }}
+                    aria-hidden="true"
+                  />
+                )}
+                <span className="gl-title">{group.label}</span>
+                <span className="gl-count">{group.items.length}</span>
+              </div>
+            )}
+            {(!collapsible || isOpen) && (
+              <ul id={panelId} className="gl-items">
+                {group.items.map((item, ii) => (
+                  <li key={ii} className="gl-item">
+                    {item.status && (
+                      <span
+                        className="gl-item-dot"
+                        style={{ background: STATUS_COLORS[item.status] }}
+                        aria-label={item.status}
+                      />
+                    )}
+                    <div className="gl-item-body">
+                      <div className="gl-item-label">{item.label}</div>
+                      {item.sublabel && <div className="gl-item-sublabel">{item.sublabel}</div>}
+                    </div>
+                    {item.meta && <span className="gl-item-meta">{item.meta}</span>}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/HealthBar.tsx

@@ -0,0 +1,25 @@
+import type { CSSProperties } from 'react'
+
+export interface HealthBarProps {
+  value: number
+  fillStyle?: CSSProperties
+  label?: string
+  valueText?: string
+}
+
+export function HealthBar({ value, fillStyle, label, valueText }: HealthBarProps) {
+  const clamped = Math.max(0, Math.min(100, value))
+  return (
+    <div
+      className="hb"
+      role="progressbar"
+      aria-valuenow={Math.round(clamped)}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label}
+      aria-valuetext={valueText}
+    >
+      <div className="hb-fill" style={{ width: `${clamped}%`, ...fillStyle }} />
+    </div>
+  )
+}

package/src/components/HeatMap.tsx

@@ -0,0 +1,106 @@
+import { useMemo } from 'react'
+
+export interface HeatMapProps {
+  data: number[][]
+  colors?: string[]
+  xLabels?: string[]
+  height?: number
+  cellGap?: number
+  ariaLabel?: string
+}
+
+const VW = 400
+const PAD_BASE = { t: 4, r: 4, l: 4 }
+const DEFAULT_COLORS = ['#1B2D5A', '#3F7BC4', '#7FB6FF', '#F5C26B', '#F5A623', '#FF7B7B']
+
+function hexToRgb(hex: string): [number, number, number] {
+  const n = parseInt(hex.slice(1), 16)
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
+}
+
+function interpolateColor(colors: string[], t: number): string {
+  if (colors.length === 1) return colors[0]
+  const scaled = Math.max(0, Math.min(1, t)) * (colors.length - 1)
+  const i = Math.min(Math.floor(scaled), colors.length - 2)
+  const f = scaled - i
+  const [r1, g1, b1] = hexToRgb(colors[i])
+  const [r2, g2, b2] = hexToRgb(colors[i + 1])
+  return `rgb(${Math.round(r1 + f * (r2 - r1))},${Math.round(g1 + f * (g2 - g1))},${Math.round(b1 + f * (b2 - b1))})`
+}
+
+export function HeatMap({
+  data,
+  colors = DEFAULT_COLORS,
+  xLabels = [],
+  height = 160,
+  cellGap = 1,
+  ariaLabel = 'Heat map',
+}: HeatMapProps) {
+  const { rects, labelNodes } = useMemo(() => {
+    const rows = data.length
+    const cols = data[0]?.length ?? 0
+    if (!rows || !cols) return { rects: [], labelNodes: [] }
+
+    const padB = xLabels.length ? 16 : 4
+    const chartW = VW - PAD_BASE.l - PAD_BASE.r
+    const chartH = height - PAD_BASE.t - padB
+    const cellW = (chartW - (cols - 1) * cellGap) / cols
+    const cellH = (chartH - (rows - 1) * cellGap) / rows
+
+    const rects: { key: string; x: number; y: number; w: number; h: number; fill: string }[] = []
+    for (let row = 0; row < rows; row++) {
+      for (let col = 0; col < cols; col++) {
+        rects.push({
+          key: `${row}-${col}`,
+          x: PAD_BASE.l + col * (cellW + cellGap),
+          y: PAD_BASE.t + row * (cellH + cellGap),
+          w: cellW,
+          h: cellH,
+          fill: interpolateColor(colors, data[row][col]),
+        })
+      }
+    }
+
+    const labelNodes = xLabels.map((lbl, i) => {
+      const x = PAD_BASE.l + (xLabels.length > 1 ? (i / (xLabels.length - 1)) * chartW : chartW / 2)
+      return { lbl, x, y: height - 2 }
+    })
+
+    return { rects, labelNodes }
+  }, [data, colors, xLabels, height, cellGap])
+
+  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"
+      >
+        {rects.map((r) => (
+          <rect
+            key={r.key}
+            x={r.x.toFixed(2)}
+            y={r.y.toFixed(2)}
+            width={r.w.toFixed(2)}
+            height={r.h.toFixed(2)}
+            fill={r.fill}
+          />
+        ))}
+        {labelNodes.map(({ lbl, x, y }, i) => (
+          <text
+            key={i}
+            x={x.toFixed(1)}
+            y={y}
+            textAnchor="middle"
+            fill="#6E7079"
+            fontSize={9}
+            fontFamily="inherit"
+          >
+            {lbl}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/HexbinChart.tsx

@@ -0,0 +1,152 @@
+export interface HexbinPoint {
+  x: number
+  y: number
+}
+
+export interface HexbinChartProps {
+  points: HexbinPoint[]
+  xRange?: [number, number]
+  yRange?: [number, number]
+  height?: number
+  hexRadius?: number
+  ariaLabel?: string
+}
+
+const ROOT3 = Math.sqrt(3)
+const VW = 340
+const PAD_L = 28
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 20
+
+function pixelToHex(px: number, py: number, R: number): [number, number] {
+  const q = ((ROOT3 / 3) * px - (1 / 3) * py) / R
+  const r = ((2 / 3) * py) / R
+  const s = -q - r
+  let rq = Math.round(q),
+    rr = Math.round(r),
+    rs = Math.round(s)
+  const dq = Math.abs(rq - q),
+    dr = Math.abs(rr - r),
+    ds = Math.abs(rs - s)
+  if (dq > dr && dq > ds) rq = -rr - rs
+  else if (dr > ds) rr = -rq - rs
+  else rs = -rq - rr
+  return [rq, rr]
+}
+
+function hexCenter(q: number, r: number, R: number, ox: number, oy: number): [number, number] {
+  return [ROOT3 * R * (q + r / 2) + ox, 1.5 * R * r + oy]
+}
+
+function hexPath(cx: number, cy: number, R: number): string {
+  const pts = Array.from({ length: 6 }, (_, k) => {
+    const a = Math.PI / 6 + (Math.PI / 3) * k
+    return `${(cx + R * Math.cos(a)).toFixed(2)},${(cy + R * Math.sin(a)).toFixed(2)}`
+  })
+  return `M${pts.join('L')}Z`
+}
+
+export function HexbinChart({
+  points,
+  xRange,
+  yRange,
+  height = 200,
+  hexRadius = 10,
+  ariaLabel = 'Hexbin chart',
+}: HexbinChartProps) {
+  if (!points.length) return null
+
+  const PLOT_W = VW - PAD_L - PAD_R
+  const PLOT_H = 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 bins = new Map<string, { q: number; r: number; count: number }>()
+  for (const pt of points) {
+    const px = ((pt.x - xMin) / xSpan) * PLOT_W
+    const py = (1 - (pt.y - yMin) / ySpan) * PLOT_H
+    const [q, r] = pixelToHex(px, py, hexRadius)
+    const key = `${q},${r}`
+    const bin = bins.get(key)
+    if (bin) bin.count++
+    else bins.set(key, { q, r, count: 1 })
+  }
+
+  const maxCount = Math.max(...[...bins.values()].map((b) => b.count))
+  const yTicks = [yMin, (yMin + yMax) / 2, yMax]
+  const xTicks = [xMin, (xMin + xMax) / 2, xMax]
+  const ty = (v: number) => PAD_T + (1 - (v - yMin) / ySpan) * PLOT_H
+  const tx = (v: number) => PAD_L + ((v - xMin) / xSpan) * PLOT_W
+
+  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={ty(v)}
+              x2={PAD_L + PLOT_W}
+              y2={ty(v)}
+              stroke="rgba(255,255,255,0.06)"
+              strokeWidth={1}
+            />
+            <text
+              x={PAD_L - 4}
+              y={ty(v) + 3}
+              fill="#6E7079"
+              fontSize={8}
+              textAnchor="end"
+              fontFamily="inherit"
+            >
+              {Math.round(v)}
+            </text>
+          </g>
+        ))}
+
+        {[...bins.values()].map(({ q, r, count }) => {
+          const [cx, cy] = hexCenter(q, r, hexRadius, PAD_L, PAD_T)
+          if (cx < PAD_L - hexRadius * 2 || cx > PAD_L + PLOT_W + hexRadius * 2) return null
+          if (cy < PAD_T - hexRadius * 2 || cy > PAD_T + PLOT_H + hexRadius * 2) return null
+          const alpha = (0.15 + 0.85 * (count / maxCount)).toFixed(3)
+          return (
+            <path
+              key={`${q},${r}`}
+              d={hexPath(cx, cy, hexRadius - 0.5)}
+              fill={`rgba(0,111,255,${alpha})`}
+              stroke="rgba(0,111,255,0.2)"
+              strokeWidth={0.5}
+            />
+          )
+        })}
+
+        {xTicks.map((v, i) => (
+          <text
+            key={i}
+            x={tx(v)}
+            y={height - 4}
+            fill="#6E7079"
+            fontSize={8}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {Math.round(v)}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}

package/src/components/Histogram.tsx

@@ -0,0 +1,121 @@
+export interface HistogramBin {
+  x0: number
+  x1: number
+  count: number
+}
+
+export interface HistogramProps {
+  bins: HistogramBin[]
+  height?: number
+  color?: string
+  xUnit?: string
+  ariaLabel?: string
+}
+
+const VW = 320
+const PAD_L = 36
+const PAD_R = 8
+const PAD_T = 8
+const PAD_B = 28
+
+export function Histogram({
+  bins,
+  height = 160,
+  color = '#006FFF',
+  xUnit = '',
+  ariaLabel = 'Histogram',
+}: HistogramProps) {
+  const PLOT_W = VW - PAD_L - PAD_R
+  const PLOT_H = height - PAD_T - PAD_B
+  const maxCount = Math.max(...bins.map((b) => b.count), 1)
+  const barW = PLOT_W / bins.length
+
+  const yTicks = [0, 1, 2, 3].map((i) => Math.round((maxCount * i) / 3))
+
+  const xStep = bins.length <= 6 ? 1 : Math.ceil(bins.length / 5)
+  const xLabels: { x: number; label: string }[] = []
+  bins.forEach((bin, i) => {
+    if (i % xStep === 0) {
+      xLabels.push({ x: PAD_L + i * barW, label: String(bin.x0) + xUnit })
+    }
+  })
+  xLabels.push({
+    x: PAD_L + PLOT_W,
+    label: String(bins[bins.length - 1].x1) + xUnit,
+  })
+
+  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((tick, i) => {
+          const ty = PAD_T + PLOT_H - (tick / maxCount) * PLOT_H
+          return (
+            <g key={i}>
+              <line
+                x1={PAD_L}
+                y1={ty}
+                x2={PAD_L + PLOT_W}
+                y2={ty}
+                stroke="rgba(255,255,255,0.06)"
+                strokeWidth={1}
+              />
+              <text
+                x={PAD_L - 4}
+                y={ty + 4}
+                fill="#6E7079"
+                fontSize={9}
+                textAnchor="end"
+                fontFamily="inherit"
+              >
+                {tick}
+              </text>
+            </g>
+          )
+        })}
+
+        {bins.map((bin, i) => {
+          const bh = (bin.count / maxCount) * PLOT_H
+          return (
+            <rect
+              key={i}
+              x={PAD_L + i * barW + 1}
+              y={PAD_T + PLOT_H - bh}
+              width={Math.max(barW - 2, 1)}
+              height={bh}
+              fill={color}
+              opacity={0.85}
+            />
+          )
+        })}
+
+        <line
+          x1={PAD_L}
+          y1={PAD_T + PLOT_H}
+          x2={PAD_L + PLOT_W}
+          y2={PAD_T + PLOT_H}
+          stroke="rgba(255,255,255,0.12)"
+          strokeWidth={1}
+        />
+
+        {xLabels.map((lbl, i) => (
+          <text
+            key={i}
+            x={lbl.x}
+            y={PAD_T + PLOT_H + 14}
+            fill="#6E7079"
+            fontSize={9}
+            textAnchor="middle"
+            fontFamily="inherit"
+          >
+            {lbl.label}
+          </text>
+        ))}
+      </svg>
+    </div>
+  )
+}