astro-component-kit 0.3.1 → 0.4.1

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>