astro-component-kit 0.3.0 → 0.4.0

package/src/components/lib/charts/ActivityRings.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * ActivityRings — Concentric closed rings tracking daily goals (move, exercise,
+ * stand style). Values over 100% wrap with a stronger overlap stroke.
+ *
+ * @param {Array<{label: string, value: number, goal: number, unit?: string}>} rings - Up to 4 goals.
+ * @param {string[]} colors - Optional per-ring colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { arcStroke, colorAt } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  rings?: Array<{ label: string; value: number; goal: number; unit?: string }>;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Today',
+  subtitle = 'Daily goals',
+  rings = [
+    { label: 'Focus time', value: 5.2, goal: 6, unit: 'h' },
+    { label: 'Tasks done', value: 11, goal: 8 },
+    { label: 'Reviews', value: 3, goal: 5 },
+  ],
+  colors = ['var(--chart-5, #d55181)', 'var(--chart-3, #199e70)', 'var(--chart-1, #3987e5)'],
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const S = 220;
+const c = S / 2;
+const stroke = 20;
+const items = rings.slice(0, 4).map((r, i) => {
+  const radius = c - stroke / 2 - 4 - i * (stroke + 4);
+  const pct = r.value / (r.goal || 1);
+  return { ...r, radius, pct, color: colorAt(i, colors) };
+});
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Goal', 'Value', 'Target', 'Progress'], rows: items.map((r) => [r.label, `${r.value}${r.unit ?? ''}`, `${r.goal}${r.unit ?? ''}`, `${Math.round(r.pct * 100)}%`]) }}
+>
+  <div class="ar">
+    <svg viewBox={`0 0 ${S} ${S}`} role="img" aria-label={`${title}: ${items.map((r) => `${r.label} ${Math.round(r.pct * 100)}%`).join(', ')}`}>
+      {items.map((r) => {
+        const main = Math.min(r.pct, 0.9999);
+        const extra = r.pct > 1 ? Math.min(r.pct - 1, 0.9999) : 0;
+        return (
+          <g>
+            <circle cx={c} cy={c} r={r.radius} fill="none" stroke={r.color} stroke-opacity="0.16" stroke-width={stroke} />
+            {main > 0 && <path class="ar__arc" d={arcStroke(c, c, r.radius, 0, Math.PI * 2 * main)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" />}
+            {extra > 0 && <path d={arcStroke(c, c, r.radius, 0, Math.PI * 2 * extra)} fill="none" stroke={r.color} stroke-width={stroke} stroke-linecap="round" style="filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)) brightness(1.15)" />}
+          </g>
+        );
+      })}
+    </svg>
+    <ul class="ar__list">
+      {items.map((r) => (
+        <li>
+          <span class="ar__label"><i style={`background:${r.color}`} aria-hidden="true"></i>{r.label}</span>
+          <span class="ar__value">{r.value}{r.unit ?? ''}<small>/{r.goal}{r.unit ?? ''}</small></span>
+          <span class="ar__pct">{Math.round(r.pct * 100)}%{r.pct >= 1 && <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-label="goal met"><path d="M20 6 9 17l-5-5" /></svg>}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+</ChartFrame>
+
+<style>
+  .ar {
+    display: grid;
+    grid-template-columns: minmax(0, 220px) 1fr;
+    gap: 2rem;
+    align-items: center;
+  }
+  .ar__arc {
+    stroke-dasharray: 800;
+    stroke-dashoffset: 800;
+    animation: ar-draw 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  @keyframes ar-draw { to { stroke-dashoffset: 0; } }
+  .ar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
+  .ar__list li { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; }
+  .ar__label { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); grid-column: 1 / -1; }
+  .ar__label i { width: 10px; height: 10px; border-radius: 50%; }
+  .ar__value { font-size: 1.25rem; font-weight: 700; color: var(--c-text-1, #fff); font-variant-numeric: tabular-nums; }
+  .ar__value small { font-size: 0.8rem; color: var(--c-text-3, #8a8a8a); font-weight: 500; }
+  .ar__pct { display: inline-flex; align-items: center; gap: 0.3rem; align-self: end; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); font-variant-numeric: tabular-nums; }
+  .ar__pct svg { color: var(--chart-pos, #34c38f); }
+  @media (max-width: 520px) { .ar { grid-template-columns: 1fr; justify-items: center; } .ar__list { width: 100%; } .ar svg { max-width: 200px; } }
+  @media (prefers-reduced-motion: reduce) { .ar__arc { animation: none; stroke-dashoffset: 0; } }
+</style>

package/src/components/lib/charts/BoxPlotChart.astro

@@ -0,0 +1,109 @@
+---
+/**
+ * BoxPlotChart — Distribution summary per group: median, interquartile box,
+ * 1.5×IQR whiskers and outlier dots. Computes stats from raw values.
+ *
+ * @param {Array<{label: string, values: number[]}>} groups - Raw observations per group.
+ * @param {string} suffix - Value suffix.
+ * @param {string} color - Box color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, quantile } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  groups?: Array<{ label: string; values: number[] }>;
+  suffix?: string;
+  height?: number;
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const rand = (seed: number, n: number, mean: number, spread: number) =>
+  Array.from({ length: n }, (_, i) => {
+    const a = Math.sin((i + 1) * seed) * 9999;
+    const b = Math.sin((i + 3) * seed * 1.7) * 9999;
+    return Math.round(mean + ((a - Math.floor(a)) + (b - Math.floor(b)) - 1) * spread);
+  });
+
+const {
+  title = 'Response time by region',
+  subtitle = 'Distribution of p50 latency, ms',
+  groups = [
+    { label: 'us-east', values: [...rand(1.3, 40, 82, 40), 190] },
+    { label: 'us-west', values: rand(2.7, 40, 95, 45) },
+    { label: 'eu-central', values: [...rand(4.1, 40, 70, 30), 160, 172] },
+    { label: 'ap-south', values: rand(5.9, 40, 140, 70) },
+    { label: 'sa-east', values: rand(8.3, 40, 160, 55) },
+  ],
+  suffix = 'ms',
+  height = 290,
+  color = 'var(--chart-1, #3987e5)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const stats = groups.map((g) => {
+  const s = [...g.values].sort((a, b) => a - b);
+  const q1 = quantile(s, 0.25);
+  const med = quantile(s, 0.5);
+  const q3 = quantile(s, 0.75);
+  const iqr = q3 - q1;
+  const lo = s.find((v) => v >= q1 - 1.5 * iqr) ?? s[0];
+  const hi = [...s].reverse().find((v) => v <= q3 + 1.5 * iqr) ?? s[s.length - 1];
+  const outliers = s.filter((v) => v < lo || v > hi);
+  return { label: g.label, q1, med, q3, lo, hi, outliers, n: s.length };
+});
+
+const W = 640;
+const H = height;
+const m = { t: 14, r: 12, b: 30, l: 48 };
+const allV = groups.flatMap((g) => g.values);
+const ticks = niceTicks(Math.min(...allV), Math.max(...allV), 4);
+const y = scaleLinear(ticks[0], ticks[ticks.length - 1], H - m.b, m.t);
+const band = (W - m.l - m.r) / groups.length;
+const bw = Math.min(56, band * 0.45);
+const f = (v: number) => `${Math.round(v)}${suffix}`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Group', 'Min', 'Q1', 'Median', 'Q3', 'Max', 'Outliers'], rows: stats.map((s) => [s.label, f(s.lo), f(s.q1), f(s.med), f(s.q3), f(s.hi), s.outliers.length]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: box plot of ${groups.length} groups`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{f(t)}</text>
+      </g>
+    ))}
+    {stats.map((s, i) => {
+      const cx = m.l + i * band + band / 2;
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img"
+          aria-label={`${s.label}: median ${f(s.med)}, IQR ${f(s.q1)}–${f(s.q3)}, range ${f(s.lo)}–${f(s.hi)}, ${s.outliers.length} outliers`}
+          data-tip-title={s.label} data-tip={`Max: ${f(s.hi)}|Q3: ${f(s.q3)}|${color}::Median: ${f(s.med)}|Q1: ${f(s.q1)}|Min: ${f(s.lo)}${s.outliers.length ? `|Outliers: ${s.outliers.length}` : ''}`}>
+          <rect x={cx - band / 2} y={m.t} width={band} height={H - m.t - m.b} fill="transparent" />
+          <line x1={cx} x2={cx} y1={y(s.hi)} y2={y(s.q3)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx} x2={cx} y1={y(s.q1)} y2={y(s.lo)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx - bw / 4} x2={cx + bw / 4} y1={y(s.hi)} y2={y(s.hi)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <line x1={cx - bw / 4} x2={cx + bw / 4} y1={y(s.lo)} y2={y(s.lo)} stroke="var(--c-text-2, #a3a3a3)" stroke-width="1.5" />
+          <rect x={cx - bw / 2} y={y(s.q3)} width={bw} height={Math.max(1, y(s.q1) - y(s.q3))} rx="4" fill={color} fill-opacity="0.3" stroke={color} stroke-width="1.5" />
+          <line x1={cx - bw / 2} x2={cx + bw / 2} y1={y(s.med)} y2={y(s.med)} stroke="var(--c-text-1, #fff)" stroke-width="2.5" />
+          {s.outliers.map((o) => <circle cx={cx} cy={y(o)} r="3.5" fill="none" stroke={color} stroke-width="1.5" />)}
+          <text class="cf-label" x={cx} y={H - 10} text-anchor="middle">{s.label}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/BubbleChart.astro

@@ -0,0 +1,101 @@
+---
+/**
+ * BubbleChart — Three-variable scatter: x, y and bubble area (z). Larger
+ * bubbles are drawn first so small ones stay visible on top.
+ *
+ * @param {Array<{label: string, x: number, y: number, z: number, group?: number}>} items - Bubbles.
+ * @param {string[]} groups - Group names (max 3) mapped to color slots.
+ * @param {string} xLabel - X-axis title.
+ * @param {string} yLabel - Y-axis title.
+ * @param {string} zLabel - Bubble size meaning.
+ * @param {string[]} colors - Optional per-group colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, colorAt, formatCompact } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  items?: Array<{ label: string; x: number; y: number; z: number; group?: number }>;
+  groups?: string[];
+  xLabel?: string;
+  yLabel?: string;
+  zLabel?: string;
+  height?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Market opportunity',
+  subtitle = 'Growth vs margin, bubble = revenue',
+  items = [
+    { label: 'Analytics', x: 34, y: 62, z: 120, group: 0 },
+    { label: 'Payments', x: 18, y: 41, z: 260, group: 0 },
+    { label: 'CRM', x: 9, y: 55, z: 180, group: 1 },
+    { label: 'Hosting', x: 22, y: 28, z: 90, group: 1 },
+    { label: 'AI tools', x: 71, y: 48, z: 70, group: 2 },
+    { label: 'Security', x: 27, y: 72, z: 140, group: 2 },
+    { label: 'Email', x: 6, y: 66, z: 60, group: 1 },
+    { label: 'Design', x: 41, y: 58, z: 85, group: 0 },
+  ],
+  groups = ['Core', 'Mature', 'Emerging'],
+  xLabel = 'YoY growth (%)',
+  yLabel = 'Gross margin (%)',
+  zLabel = 'Revenue ($M)',
+  height = 320,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 20, r: 24, b: 40, l: 48 };
+const xt = niceTicks(0, Math.max(...items.map((i) => i.x)), 5);
+const yt = niceTicks(0, Math.max(...items.map((i) => i.y)), 4);
+const x = scaleLinear(xt[0], xt[xt.length - 1], m.l, W - m.r);
+const y = scaleLinear(yt[0], yt[yt.length - 1], H - m.b, m.t);
+const zMax = Math.max(...items.map((i) => i.z)) || 1;
+const r = (z: number) => 6 + Math.sqrt(z / zMax) * 30; // area-proportional radius
+const sorted = [...items].sort((a, b) => b.z - a.z);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={groups.slice(0, 3).map((g, i) => ({ label: g, color: colorAt(i, colors) }))}
+  table={{ headers: ['Item', 'Group', xLabel, yLabel, zLabel], rows: items.map((i) => [i.label, groups[i.group ?? 0] ?? '—', i.x, i.y, i.z]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: bubble chart of ${items.length} items`}>
+    {yt.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={m.l - 8} y={y(t) + 4} text-anchor="end">{formatCompact(t)}</text>
+      </g>
+    ))}
+    {xt.map((t) => <text class="cf-label" x={x(t)} y={H - m.b + 16} text-anchor="middle">{formatCompact(t)}</text>)}
+    <text class="cf-label" x={(m.l + W - m.r) / 2} y={H - 4} text-anchor="middle">{xLabel}</text>
+    <text class="cf-label" transform={`translate(12 ${(m.t + H - m.b) / 2}) rotate(-90)`} text-anchor="middle">{yLabel}</text>
+
+    {sorted.map((it) => {
+      const col = colorAt(it.group ?? 0, colors);
+      const rad = r(it.z);
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img" aria-label={`${it.label}: ${xLabel} ${it.x}, ${yLabel} ${it.y}, ${zLabel} ${it.z}`}
+          data-tip-title={it.label} data-tip={`${col}::${groups[it.group ?? 0] ?? ''}|${xLabel}: ${it.x}|${yLabel}: ${it.y}|${zLabel}: ${it.z}`}>
+          <circle cx={x(it.x)} cy={y(it.y)} r={rad} fill={col} fill-opacity="0.55" stroke={col} stroke-width="1.5" />
+          {rad > 18 && <text x={x(it.x)} y={y(it.y) + 4} text-anchor="middle" fill="#fff" font-size="11" font-weight="600">{it.label}</text>}
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/BulletChart.astro

@@ -0,0 +1,160 @@
+---
+/**
+ * BulletChart — Compact KPI-vs-target bars with qualitative bands
+ * (poor / ok / good), a measure bar and a target tick. Stack several for a grid.
+ *
+ * @param {Array<{label: string, value: number, target: number, ranges: [number, number, number], unit?: string}>} metrics
+ *   - Each metric with its qualitative band thresholds (ascending).
+ * @param {string} color - Measure bar color.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+
+interface Metric {
+  label: string;
+  value: number;
+  target: number;
+  ranges: [number, number, number];
+  unit?: string;
+}
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  metrics?: Metric[];
+  color?: string;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Quarterly targets',
+  subtitle = 'Measure vs target with performance bands',
+  metrics = [
+    { label: 'Revenue ($k)', value: 270, target: 250, ranges: [150, 225, 300] },
+    { label: 'Profit', value: 23, target: 26, ranges: [20, 25, 30], unit: '%' },
+    { label: 'New customers', value: 1650, target: 2100, ranges: [1400, 2000, 2500] },
+    { label: 'NPS', value: 54, target: 50, ranges: [30, 50, 70] },
+  ],
+  color = 'var(--c-text-1, #fff)',
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const pct = (v: number, max: number) => `${Math.min(100, (v / max) * 100)}%`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Metric', 'Value', 'Target', 'Status'], rows: metrics.map((mt) => [mt.label, `${mt.value}${mt.unit ?? ''}`, `${mt.target}${mt.unit ?? ''}`, mt.value >= mt.target ? 'On target' : 'Below target']) }}
+>
+  <div class="bc">
+    {metrics.map((mt) => {
+      const max = mt.ranges[2];
+      const met = mt.value >= mt.target;
+      return (
+        <div
+          class="bc__row cf-mark"
+          tabindex="0"
+          role="meter"
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-valuenow={mt.value}
+          aria-label={`${mt.label}: ${mt.value}${mt.unit ?? ''} of target ${mt.target}${mt.unit ?? ''}`}
+          data-tip-title={mt.label}
+          data-tip={`Value: ${mt.value}${mt.unit ?? ''}|Target: ${mt.target}${mt.unit ?? ''}|${met ? 'var(--chart-pos)::On target' : 'var(--chart-neg)::Below target'}`}
+        >
+          <div class="bc__meta">
+            <span class="bc__label">{mt.label}</span>
+            <span class="bc__value">
+              {mt.value}{mt.unit ?? ''}
+              <span class={`bc__status ${met ? 'bc__status--ok' : 'bc__status--bad'}`}>
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true">
+                  {met ? <path d="M20 6 9 17l-5-5" /> : <><circle cx="12" cy="12" r="9" /><path d="M12 8v4M12 16h.01" /></>}
+                </svg>
+                {met ? 'On target' : 'Below'}
+              </span>
+            </span>
+          </div>
+          <div class="bc__track" aria-hidden="true">
+            <span class="bc__band" style={`width:${pct(mt.ranges[2], max)}; opacity:0.07`}></span>
+            <span class="bc__band" style={`width:${pct(mt.ranges[1], max)}; opacity:0.11`}></span>
+            <span class="bc__band" style={`width:${pct(mt.ranges[0], max)}; opacity:0.16`}></span>
+            <span class="bc__measure" style={`width:${pct(mt.value, max)}; background:${color}`}></span>
+            <span class="bc__target" style={`left:${pct(mt.target, max)}`}></span>
+          </div>
+        </div>
+      );
+    })}
+  </div>
+</ChartFrame>
+
+<style>
+  .bc { display: grid; gap: 1rem; }
+  .bc__row {
+    display: grid;
+    gap: 0.45rem;
+    padding: 0.35rem;
+    border-radius: 8px;
+  }
+  .bc__row:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); }
+  .bc__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
+  .bc__label { font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .bc__value {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-weight: 650;
+    color: var(--c-text-1, #fff);
+    font-variant-numeric: tabular-nums;
+  }
+  .bc__status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: var(--c-text-2, #a3a3a3);
+    white-space: nowrap;
+  }
+  .bc__status--ok svg { color: var(--chart-pos, #34c38f); }
+  .bc__status--bad svg { color: var(--chart-neg, #f06a6a); }
+  .bc__track {
+    position: relative;
+    height: 22px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+  .bc__band {
+    position: absolute;
+    inset: 0 auto 0 0;
+    background: #fff;
+  }
+  .bc__measure {
+    position: absolute;
+    left: 0;
+    top: 7px;
+    height: 8px;
+    border-radius: 0 3px 3px 0;
+    transform-origin: left;
+    animation: bc-grow 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
+  }
+  .bc__target {
+    position: absolute;
+    top: 3px;
+    bottom: 3px;
+    width: 3px;
+    margin-left: -1.5px;
+    border-radius: 2px;
+    background: var(--chart-4, #c98500);
+  }
+  @keyframes bc-grow { from { transform: scaleX(0); } }
+  @media (prefers-reduced-motion: reduce) { .bc__measure { animation: none; } }
+</style>

package/src/components/lib/charts/BumpChart.astro

@@ -0,0 +1,92 @@
+---
+/**
+ * BumpChart — Rank-over-time chart. Each line tracks one entity's position
+ * (1 = top) across periods, with labels at both ends.
+ *
+ * @param {string[]} periods - X-axis labels.
+ * @param {Array<{name: string, ranks: number[]}>} series - Rank per period (1-based), max 8.
+ * @param {string[]} colors - Optional per-series colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, smoothPath, type Point } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  periods?: string[];
+  series?: Array<{ name: string; ranks: number[] }>;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Framework popularity rank',
+  subtitle = 'Developer survey position by year',
+  periods = ['2021', '2022', '2023', '2024', '2025', '2026'],
+  series = [
+    { name: 'Astro', ranks: [5, 4, 3, 2, 1, 1] },
+    { name: 'Next', ranks: [1, 1, 1, 1, 2, 2] },
+    { name: 'Svelte', ranks: [3, 2, 2, 3, 3, 4] },
+    { name: 'Nuxt', ranks: [2, 3, 4, 4, 5, 3] },
+    { name: 'Remix', ranks: [4, 5, 5, 5, 4, 5] },
+  ],
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const maxRank = Math.max(...series.flatMap((s) => s.ranks));
+const rowH = 44;
+const H = maxRank * rowH + 36;
+const m = { t: 30, l: 80, r: 80 };
+const n = periods.length;
+const x = (i: number) => m.l + (i / Math.max(1, n - 1)) * (W - m.l - m.r);
+const y = (r: number) => m.t + (r - 1) * rowH + 8;
+const lines = series.slice(0, 8).map((s, si) => ({
+  ...s,
+  color: colorAt(si, colors),
+  pts: s.ranks.map((r, i): Point => [x(i), y(r)]),
+}));
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={lines.map((l) => ({ label: l.name, color: l.color }))}
+  table={{ headers: ['Name', ...periods], rows: series.map((s) => [s.name, ...s.ranks.map((r) => `#${r}`)]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: bump chart of ranks over ${n} periods`}>
+    {periods.map((p, i) => (
+      <g>
+        <line class="cf-grid" x1={x(i)} x2={x(i)} y1={m.t - 6} y2={H - 10} />
+        <text class="cf-label" x={x(i)} y={14} text-anchor="middle">{p}</text>
+      </g>
+    ))}
+    {lines.map((l) => (
+      <g class="cf-mark cf-dim" tabindex="0" role="img"
+        aria-label={`${l.name}: ${l.ranks.map((r, i) => `${periods[i]} #${r}`).join(', ')}`}
+        data-tip-title={l.name}
+        data-tip={l.ranks.map((r, i) => `${periods[i]}: #${r}`).join('|')}>
+        <path d={smoothPath(l.pts)} fill="none" stroke={l.color} stroke-width="3" stroke-linecap="round" />
+        <path d={smoothPath(l.pts)} fill="none" stroke="transparent" stroke-width="16" />
+        {l.pts.map(([px, py], i) => (
+          <g>
+            <circle cx={px} cy={py} r="11" fill={l.color} stroke="var(--chart-surface, #0d0d0f)" stroke-width="2" />
+            <text x={px} y={py + 4} text-anchor="middle" font-size="10" font-weight="700" fill="#fff">{l.ranks[i]}</text>
+          </g>
+        ))}
+        <text class="cf-label cf-label--strong" x={m.l - 18} y={l.pts[0][1] + 4} text-anchor="end">{l.name}</text>
+        <text class="cf-label cf-label--strong" x={W - m.r + 18} y={l.pts[n - 1][1] + 4}>{l.name}</text>
+      </g>
+    ))}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/CandlestickChart.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * CandlestickChart — OHLC price chart. Bodies span open→close, wicks span
+ * low→high. Up candles are hollow, down candles filled, so direction is
+ * readable without color.
+ *
+ * @param {Array<{label: string, open: number, high: number, low: number, close: number}>} candles - OHLC data.
+ * @param {string} prefix - Price prefix.
+ * @param {number} height - SVG height in viewBox units (width is 640).
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, POSITIVE, NEGATIVE } from './chart-utils';
+
+interface Candle { label: string; open: number; high: number; low: number; close: number }
+interface Props {
+  title?: string;
+  subtitle?: string;
+  candles?: Candle[];
+  prefix?: string;
+  height?: number;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const demo: Candle[] = (() => {
+  let p = 182;
+  return Array.from({ length: 22 }, (_, i) => {
+    const r1 = Math.sin(i * 4.7) * 0.5 + Math.sin(i * 1.3) * 0.5;
+    const r2 = Math.abs(Math.sin(i * 9.1));
+    const open = p;
+    const close = Math.round((p + r1 * 6 + 0.6) * 100) / 100;
+    const high = Math.round((Math.max(open, close) + r2 * 3 + 0.4) * 100) / 100;
+    const low = Math.round((Math.min(open, close) - (1 - r2) * 3 - 0.4) * 100) / 100;
+    p = close;
+    return { label: `Oct ${i + 6}`, open, high, low, close };
+  });
+})();
+
+const {
+  title = 'ACME / USD',
+  subtitle = 'Daily candles',
+  candles = demo,
+  prefix = '$',
+  height = 300,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 12, r: 52, b: 28, l: 12 };
+const ticks = niceTicks(Math.min(...candles.map((c) => c.low)), Math.max(...candles.map((c) => c.high)), 5);
+const y = scaleLinear(ticks[0], ticks[ticks.length - 1], H - m.b, m.t);
+const band = (W - m.l - m.r) / candles.length;
+const bw = Math.max(3, band * 0.6);
+const f = (v: number) => `${prefix}${v.toFixed(2)}`;
+const last = candles[candles.length - 1];
+const first = candles[0];
+const change = ((last.close - first.open) / first.open) * 100;
+const labelEvery = Math.ceil(candles.length / 6);
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  value={f(last.close)}
+  delta={`${change >= 0 ? '+' : ''}${change.toFixed(2)}%`}
+  deltaPositive={change >= 0}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[{ label: 'Up (hollow)', color: POSITIVE }, { label: 'Down (filled)', color: NEGATIVE }]}
+  table={{ headers: ['Date', 'Open', 'High', 'Low', 'Close'], rows: candles.map((c) => [c.label, f(c.open), f(c.high), f(c.low), f(c.close)]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: candlestick chart, ${candles.length} periods, ${change.toFixed(1)}% change`}>
+    {ticks.map((t) => (
+      <g>
+        <line class="cf-grid" x1={m.l} x2={W - m.r} y1={y(t)} y2={y(t)} />
+        <text class="cf-label" x={W - m.r + 8} y={y(t) + 4}>{f(t)}</text>
+      </g>
+    ))}
+    {candles.map((c, i) => {
+      const cx = m.l + i * band + band / 2;
+      const up = c.close >= c.open;
+      const col = up ? POSITIVE : NEGATIVE;
+      const top = y(Math.max(c.open, c.close));
+      const h = Math.max(1.5, Math.abs(y(c.open) - y(c.close)));
+      return (
+        <g class="cf-mark cf-dim" tabindex="0" role="img"
+          aria-label={`${c.label}: open ${f(c.open)}, high ${f(c.high)}, low ${f(c.low)}, close ${f(c.close)}`}
+          data-tip-title={c.label} data-tip={`${col}::${up ? 'Up' : 'Down'} ${(((c.close - c.open) / c.open) * 100).toFixed(2)}%|O ${f(c.open)} · H ${f(c.high)}|L ${f(c.low)} · C ${f(c.close)}`}>
+          <rect x={cx - band / 2} y={m.t} width={band} height={H - m.t - m.b} fill="transparent" />
+          <line x1={cx} x2={cx} y1={y(c.high)} y2={y(c.low)} stroke={col} stroke-width="1.5" />
+          <rect x={cx - bw / 2} y={top} width={bw} height={h} rx="1.5" fill={up ? 'var(--chart-surface, #0d0d0f)' : col} stroke={col} stroke-width="1.5" />
+          {i % labelEvery === 0 && <text class="cf-label" x={cx} y={H - 8} text-anchor="middle">{c.label}</text>}
+        </g>
+      );
+    })}
+    <line x1={m.l} x2={W - m.r} y1={y(last.close)} y2={y(last.close)} stroke="var(--c-text-1, #fff)" stroke-opacity="0.3" stroke-dasharray="3 4" aria-hidden="true" />
+  </svg>
+</ChartFrame>