astro-component-kit 0.3.0 → 0.4.0

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

@@ -0,0 +1,121 @@
+---
+/**
+ * WaffleChart — 10×10 grid of squares where each square is 1% of the whole.
+ * An intuitive part-to-whole view for percentages.
+ *
+ * @param {Array<{label: string, value: number}>} parts - Parts of the whole (rounded to 100 cells).
+ * @param {number} columns - Cells per row (default 10).
+ * @param {string[]} colors - Optional per-part colors.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { colorAt, sum } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  parts?: Array<{ label: string; value: number }>;
+  columns?: number;
+  colors?: string[];
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'Device share',
+  subtitle = 'Each square = 1% of sessions',
+  parts = [
+    { label: 'Desktop', value: 54 },
+    { label: 'Mobile', value: 38 },
+    { label: 'Tablet', value: 8 },
+  ],
+  columns = 10,
+  colors,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const total = sum(parts.map((p) => p.value)) || 1;
+// Largest-remainder rounding so cells always add up to exactly 100.
+const raw = parts.map((p) => (p.value / total) * 100);
+const counts = raw.map(Math.floor);
+let remaining = 100 - sum(counts);
+raw
+  .map((v, i) => ({ i, r: v - Math.floor(v) }))
+  .sort((a, b) => b.r - a.r)
+  .forEach(({ i }) => {
+    if (remaining > 0) {
+      counts[i] += 1;
+      remaining -= 1;
+    }
+  });
+const cells: number[] = counts.flatMap((c, i) => Array.from({ length: c }, () => i));
+const items = parts.slice(0, 8).map((p, i) => ({ ...p, pct: counts[i], color: colorAt(i, colors) }));
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  table={{ headers: ['Part', 'Share'], rows: items.map((p) => [p.label, `${p.pct}%`]) }}
+>
+  <div class="wf">
+    <div class="wf__grid" style={`--wf-cols:${columns}`} role="img" aria-label={`${title}: ${items.map((p) => `${p.label} ${p.pct}%`).join(', ')}`}>
+      {cells.map((pi, idx) => (
+        <span class="wf__cell" style={`background:${items[pi]?.color}; --wf-i:${idx}`} data-tip-title={items[pi]?.label} data-tip={`${items[pi]?.color}::${items[pi]?.pct}%`}></span>
+      ))}
+    </div>
+    <ul class="wf__legend">
+      {items.map((p) => (
+        <li>
+          <span class="wf__big">{p.pct}<small>%</small></span>
+          <span class="wf__name"><i style={`background:${p.color}`} aria-hidden="true"></i>{p.label}</span>
+        </li>
+      ))}
+    </ul>
+  </div>
+</ChartFrame>
+
+<style>
+  .wf {
+    display: grid;
+    grid-template-columns: minmax(0, 260px) 1fr;
+    gap: 2rem;
+    align-items: center;
+  }
+  .wf__grid {
+    display: grid;
+    grid-template-columns: repeat(var(--wf-cols), 1fr);
+    gap: 3px;
+  }
+  .wf__cell {
+    aspect-ratio: 1;
+    border-radius: 3px;
+    animation: wf-in 0.4s ease both;
+    animation-delay: calc(var(--wf-i) * 6ms);
+  }
+  .wf__cell:hover { filter: brightness(1.25); }
+  @keyframes wf-in { from { opacity: 0; transform: scale(0.4); } }
+  .wf__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
+  .wf__legend li { display: flex; flex-direction: column; }
+  .wf__big {
+    font-size: 1.75rem;
+    font-weight: 750;
+    color: var(--c-text-1, #fff);
+    line-height: 1.1;
+    font-variant-numeric: tabular-nums;
+  }
+  .wf__big small { font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); margin-left: 2px; }
+  .wf__name { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8125rem; color: var(--c-text-2, #a3a3a3); }
+  .wf__name i { width: 10px; height: 10px; border-radius: 3px; }
+  @media (max-width: 560px) {
+    .wf { grid-template-columns: 1fr; }
+    .wf__legend { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
+  }
+  @media (prefers-reduced-motion: reduce) { .wf__cell { animation: none; } }
+</style>

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

@@ -0,0 +1,118 @@
+---
+/**
+ * WaterfallChart — Shows how a starting value is built up or eroded by a
+ * sequence of positive and negative steps, ending in a total.
+ *
+ * @param {string} startLabel - Label for the opening bar.
+ * @param {number} start - Opening value.
+ * @param {Array<{label: string, value: number}>} steps - Signed changes.
+ * @param {string} endLabel - Label for the closing total bar.
+ * @param {string} prefix - Value prefix.
+ * @param {string} suffix - Value suffix.
+ * @param {string} variant - Card style (glass|solid|ghost).
+ * @param {string} size - Density (sm|md|lg).
+ */
+import ChartFrame from './ChartFrame.astro';
+import { scaleLinear, niceTicks, formatValue, POSITIVE, NEGATIVE } from './chart-utils';
+
+interface Props {
+  title?: string;
+  subtitle?: string;
+  startLabel?: string;
+  start?: number;
+  steps?: Array<{ label: string; value: number }>;
+  endLabel?: string;
+  prefix?: string;
+  suffix?: string;
+  height?: number;
+  variant?: 'glass' | 'solid' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  title = 'ARR bridge',
+  subtitle = 'From January to June',
+  startLabel = 'Jan ARR',
+  start = 1200000,
+  steps = [
+    { label: 'New', value: 380000 },
+    { label: 'Expansion', value: 210000 },
+    { label: 'Contraction', value: -90000 },
+    { label: 'Churn', value: -160000 },
+    { label: 'Reactivation', value: 45000 },
+  ],
+  endLabel = 'Jun ARR',
+  prefix = '$',
+  suffix = '',
+  height = 290,
+  variant = 'glass',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const W = 640;
+const H = height;
+const m = { t: 22, r: 12, b: 30, l: 52 };
+let run = start;
+const bars = [
+  { label: startLabel, from: 0, to: start, kind: 'total' as const, value: start },
+  ...steps.map((s) => {
+    const from = run;
+    run += s.value;
+    return { label: s.label, from, to: run, kind: s.value >= 0 ? ('up' as const) : ('down' as const), value: s.value };
+  }),
+  { label: endLabel, from: 0, to: run, kind: 'total' as const, value: run },
+];
+const ticks = niceTicks(0, Math.max(...bars.map((b) => Math.max(b.from, b.to))), 4);
+const y = scaleLinear(0, ticks[ticks.length - 1], H - m.b, m.t);
+const band = (W - m.l - m.r) / bars.length;
+const bw = band * 0.62;
+const colorOf = (k: string) => (k === 'up' ? POSITIVE : k === 'down' ? NEGATIVE : 'var(--chart-1, #3987e5)');
+const fmt = (v: number) => formatValue(v, prefix, suffix);
+const fmtSigned = (v: number) => `${v >= 0 ? '+' : '−'}${formatValue(Math.abs(v), prefix, suffix)}`;
+---
+
+<ChartFrame
+  title={title}
+  subtitle={subtitle}
+  variant={variant}
+  size={size}
+  className={className}
+  legend={[
+    { label: 'Total', color: 'var(--chart-1, #3987e5)' },
+    { label: 'Increase', color: POSITIVE },
+    { label: 'Decrease', color: NEGATIVE },
+  ]}
+  table={{ headers: ['Step', 'Change', 'Running total'], rows: bars.map((b) => [b.label, b.kind === 'total' ? '—' : fmtSigned(b.value), fmt(b.to)]) }}
+>
+  <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label={`${title}: waterfall chart from ${fmt(start)} to ${fmt(run)}`}>
+    {ticks.map((t) => (
+      <g>
+        <line class={t === 0 ? 'cf-axis' : '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">{fmt(t)}</text>
+      </g>
+    ))}
+    {bars.map((b, i) => {
+      const bx = m.l + i * band + (band - bw) / 2;
+      const top = y(Math.max(b.from, b.to));
+      const h = Math.max(1, Math.abs(y(b.from) - y(b.to)));
+      const c = colorOf(b.kind);
+      const next = bars[i + 1];
+      return (
+        <g>
+          {next && <line class="cf-axis" x1={bx + bw} x2={bx + band} y1={y(b.to)} y2={y(b.to)} opacity="0.7" />}
+          <rect class="cf-mark cf-dim" x={bx} y={top} width={bw} height={h} rx="3" fill={c}
+            tabindex="0" role="img"
+            aria-label={`${b.label}: ${b.kind === 'total' ? fmt(b.value) : fmtSigned(b.value)}, total ${fmt(b.to)}`}
+            data-tip-title={b.label}
+            data-tip={b.kind === 'total' ? `${c}::Total: ${fmt(b.value)}` : `${c}::Change: ${fmtSigned(b.value)}|Running: ${fmt(b.to)}`} />
+          <text class="cf-label cf-label--strong" x={bx + bw / 2} y={top - 6} text-anchor="middle">
+            {b.kind === 'total' ? fmt(b.value) : fmtSigned(b.value)}
+          </text>
+          <text class="cf-label" x={bx + bw / 2} y={H - 10} text-anchor="middle">{b.label}</text>
+        </g>
+      );
+    })}
+  </svg>
+</ChartFrame>

package/src/components/lib/charts/chart-tooltip.ts

@@ -0,0 +1,75 @@
+// src/components/lib/charts/chart-tooltip.ts
+// Tiny, dependency-free tooltip controller shared by every SVG chart.
+// Any element inside a `[data-chart]` root that carries `data-tip` becomes a
+// hover/focus target. Lines in `data-tip` are separated by "|"; an optional
+// `data-tip-title` renders as the bold heading.
+
+function show(root: HTMLElement, tip: HTMLElement, target: Element, clientX?: number, clientY?: number) {
+  const title = target.getAttribute('data-tip-title') || '';
+  const body = (target.getAttribute('data-tip') || '').split('|').filter(Boolean);
+  tip.replaceChildren();
+  if (title) {
+    const h = document.createElement('strong');
+    h.textContent = title;
+    tip.appendChild(h);
+  }
+  body.forEach((line) => {
+    const row = document.createElement('span');
+    const [swatch, text] = line.includes('::') ? line.split('::') : ['', line];
+    if (swatch) {
+      const dot = document.createElement('i');
+      dot.style.background = swatch;
+      row.appendChild(dot);
+    }
+    row.appendChild(document.createTextNode(text));
+    tip.appendChild(row);
+  });
+
+  const box = root.getBoundingClientRect();
+  let x: number;
+  let y: number;
+  if (clientX !== undefined && clientY !== undefined) {
+    x = clientX - box.left;
+    y = clientY - box.top;
+  } else {
+    const r = target.getBoundingClientRect();
+    x = r.left + r.width / 2 - box.left;
+    y = r.top - box.top;
+  }
+  tip.style.opacity = '1';
+  const tw = tip.offsetWidth;
+  const th = tip.offsetHeight;
+  const left = Math.min(Math.max(8, x + 14), box.width - tw - 8);
+  const top = y - th - 12 < 4 ? y + 18 : y - th - 12;
+  tip.style.transform = `translate(${left}px, ${top}px)`;
+}
+
+function hide(tip: HTMLElement) {
+  tip.style.opacity = '0';
+}
+
+export function initChartTooltips() {
+  document.querySelectorAll<HTMLElement>('[data-chart]:not([data-chart-ready])').forEach((root) => {
+    root.setAttribute('data-chart-ready', '');
+    const tip = root.querySelector<HTMLElement>('[data-chart-tip]');
+    if (!tip) return;
+
+    root.addEventListener('pointermove', (e) => {
+      const target = (e.target as Element).closest('[data-tip]');
+      if (target && root.contains(target)) show(root, tip, target, e.clientX, e.clientY);
+      else hide(tip);
+    });
+    root.addEventListener('pointerleave', () => hide(tip));
+    root.addEventListener('focusin', (e) => {
+      const target = (e.target as Element).closest('[data-tip]');
+      if (target) show(root, tip, target);
+    });
+    root.addEventListener('focusout', () => hide(tip));
+    root.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') hide(tip);
+    });
+  });
+}
+
+initChartTooltips();
+document.addEventListener('astro:page-load', initChartTooltips);

package/src/components/lib/charts/chart-utils.ts

@@ -0,0 +1,271 @@
+// src/components/lib/charts/chart-utils.ts
+// Shared, dependency-free math helpers for the SVG chart components.
+// Everything here runs at build time (server-side) — no client JS needed.
+
+/** Fixed-order categorical palette (CSS tokens with hex fallbacks). Never cycled past 8. */
+export const CHART_COLORS = [
+  'var(--chart-1, #3987e5)',
+  'var(--chart-2, #d95926)',
+  'var(--chart-3, #199e70)',
+  'var(--chart-4, #c98500)',
+  'var(--chart-5, #d55181)',
+  'var(--chart-6, #2f9e2f)',
+  'var(--chart-7, #9085e9)',
+  'var(--chart-8, #e66767)',
+];
+
+export const POSITIVE = 'var(--chart-pos, #34c38f)';
+export const NEGATIVE = 'var(--chart-neg, #f06a6a)';
+
+/** Returns the color for a series index, honouring user overrides. */
+export function colorAt(i: number, overrides?: string[]): string {
+  if (overrides && overrides[i]) return overrides[i];
+  return CHART_COLORS[Math.min(i, CHART_COLORS.length - 1)];
+}
+
+/** Linear scale factory: maps a domain [d0, d1] onto a range [r0, r1]. */
+export function scaleLinear(d0: number, d1: number, r0: number, r1: number) {
+  const span = d1 - d0 || 1;
+  return (v: number) => r0 + ((v - d0) / span) * (r1 - r0);
+}
+
+/** Rounds a raw step to a "nice" 1/2/2.5/5/10 × 10^n value. */
+function niceStep(raw: number): number {
+  const exp = Math.floor(Math.log10(Math.abs(raw) || 1));
+  const f = raw / 10 ** exp;
+  const nf = f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10;
+  return nf * 10 ** exp;
+}
+
+/** Produces nice, evenly spaced axis ticks covering [min, max]. */
+export function niceTicks(min: number, max: number, count = 5): number[] {
+  if (min === max) {
+    max = min + 1;
+  }
+  const step = niceStep((max - min) / Math.max(1, count));
+  const start = Math.floor(min / step) * step;
+  const end = Math.ceil(max / step) * step;
+  const ticks: number[] = [];
+  for (let v = start; v <= end + step / 2; v += step) {
+    ticks.push(Number(v.toFixed(10)));
+  }
+  return ticks;
+}
+
+/** Compact number formatter: 1200 → 1.2k, 3400000 → 3.4M. */
+export function formatCompact(v: number, decimals = 1): string {
+  const abs = Math.abs(v);
+  if (abs >= 1e9) return `${(v / 1e9).toFixed(decimals).replace(/\.0+$/, '')}B`;
+  if (abs >= 1e6) return `${(v / 1e6).toFixed(decimals).replace(/\.0+$/, '')}M`;
+  if (abs >= 1e3) return `${(v / 1e3).toFixed(decimals).replace(/\.0+$/, '')}k`;
+  return `${Number(v.toFixed(2))}`;
+}
+
+/** Formats a value with an optional prefix/suffix (e.g. '$', '%'). */
+export function formatValue(v: number, prefix = '', suffix = '', compact = true): string {
+  const body = compact ? formatCompact(v) : v.toLocaleString('en-US');
+  return `${prefix}${body}${suffix}`;
+}
+
+export type Point = [number, number];
+
+/** Straight polyline path. */
+export function linePath(points: Point[]): string {
+  return points.map(([x, y], i) => `${i ? 'L' : 'M'}${x.toFixed(2)},${y.toFixed(2)}`).join(' ');
+}
+
+/** Step path (horizontal then vertical). */
+export function stepPath(points: Point[]): string {
+  if (!points.length) return '';
+  let d = `M${points[0][0].toFixed(2)},${points[0][1].toFixed(2)}`;
+  for (let i = 1; i < points.length; i++) {
+    const [x, y] = points[i];
+    d += ` H${x.toFixed(2)} V${y.toFixed(2)}`;
+  }
+  return d;
+}
+
+/** Monotone cubic interpolation — smooth curve that never overshoots the data. */
+export function smoothPath(points: Point[]): string {
+  const n = points.length;
+  if (n < 3) return linePath(points);
+  const dx: number[] = [];
+  const slope: number[] = [];
+  for (let i = 0; i < n - 1; i++) {
+    dx[i] = points[i + 1][0] - points[i][0];
+    slope[i] = (points[i + 1][1] - points[i][1]) / (dx[i] || 1);
+  }
+  const m: number[] = [slope[0]];
+  for (let i = 1; i < n - 1; i++) {
+    m[i] = slope[i - 1] * slope[i] <= 0 ? 0 : (slope[i - 1] + slope[i]) / 2;
+  }
+  m[n - 1] = slope[n - 2];
+  for (let i = 0; i < n - 1; i++) {
+    if (slope[i] === 0) {
+      m[i] = 0;
+      m[i + 1] = 0;
+      continue;
+    }
+    const a = m[i] / slope[i];
+    const b = m[i + 1] / slope[i];
+    const h = a * a + b * b;
+    if (h > 9) {
+      const t = 3 / Math.sqrt(h);
+      m[i] = t * a * slope[i];
+      m[i + 1] = t * b * slope[i];
+    }
+  }
+  let d = `M${points[0][0].toFixed(2)},${points[0][1].toFixed(2)}`;
+  for (let i = 0; i < n - 1; i++) {
+    const [x0, y0] = points[i];
+    const [x1, y1] = points[i + 1];
+    const h = dx[i] / 3;
+    d += ` C${(x0 + h).toFixed(2)},${(y0 + m[i] * h).toFixed(2)} ${(x1 - h).toFixed(2)},${(y1 - m[i + 1] * h).toFixed(2)} ${x1.toFixed(2)},${y1.toFixed(2)}`;
+  }
+  return d;
+}
+
+/** Picks the path builder for a curve type. */
+export function curvePath(points: Point[], curve: 'linear' | 'smooth' | 'step' = 'smooth'): string {
+  if (curve === 'step') return stepPath(points);
+  if (curve === 'linear') return linePath(points);
+  return smoothPath(points);
+}
+
+/** Closes a line path down to a baseline to form an area. */
+export function areaPath(points: Point[], baseline: number, curve: 'linear' | 'smooth' | 'step' = 'smooth'): string {
+  if (!points.length) return '';
+  const top = curvePath(points, curve);
+  const last = points[points.length - 1];
+  const first = points[0];
+  return `${top} L${last[0].toFixed(2)},${baseline.toFixed(2)} L${first[0].toFixed(2)},${baseline.toFixed(2)} Z`;
+}
+
+/** Area between an upper and lower line (for bands / stacked areas). */
+export function bandPath(upper: Point[], lower: Point[], curve: 'linear' | 'smooth' | 'step' = 'smooth'): string {
+  if (!upper.length) return '';
+  const top = curvePath(upper, curve);
+  const reversed = [...lower].reverse();
+  const bottom = curvePath(reversed, curve).replace(/^M/, 'L');
+  return `${top} ${bottom} Z`;
+}
+
+/** Polar → cartesian, with 0 rad at 12 o'clock and clockwise rotation. */
+export function polar(cx: number, cy: number, r: number, angle: number): Point {
+  return [cx + r * Math.sin(angle), cy - r * Math.cos(angle)];
+}
+
+/** Annular sector path (donut slice). Angles in radians, 0 at 12 o'clock. */
+export function arcPath(cx: number, cy: number, rOuter: number, rInner: number, a0: number, a1: number): string {
+  const sweep = a1 - a0;
+  if (sweep >= Math.PI * 2 - 1e-6) {
+    // Full ring: draw two halves to avoid a degenerate arc.
+    const mid = a0 + Math.PI;
+    return `${arcPath(cx, cy, rOuter, rInner, a0, mid)} ${arcPath(cx, cy, rOuter, rInner, mid, a0 + Math.PI * 2)}`;
+  }
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, rOuter, a0);
+  const [x1, y1] = polar(cx, cy, rOuter, a1);
+  if (rInner <= 0) {
+    return `M${cx},${cy} L${x0.toFixed(2)},${y0.toFixed(2)} A${rOuter},${rOuter} 0 ${large} 1 ${x1.toFixed(2)},${y1.toFixed(2)} Z`;
+  }
+  const [x2, y2] = polar(cx, cy, rInner, a1);
+  const [x3, y3] = polar(cx, cy, rInner, a0);
+  return [
+    `M${x0.toFixed(2)},${y0.toFixed(2)}`,
+    `A${rOuter},${rOuter} 0 ${large} 1 ${x1.toFixed(2)},${y1.toFixed(2)}`,
+    `L${x2.toFixed(2)},${y2.toFixed(2)}`,
+    `A${rInner},${rInner} 0 ${large} 0 ${x3.toFixed(2)},${y3.toFixed(2)}`,
+    'Z',
+  ].join(' ');
+}
+
+/** Open arc stroke path (for gauges / rings). */
+export function arcStroke(cx: number, cy: number, r: number, a0: number, a1: number): string {
+  const sweep = Math.min(a1 - a0, Math.PI * 2 - 1e-4);
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, r, a0);
+  const [x1, y1] = polar(cx, cy, r, a0 + sweep);
+  return `M${x0.toFixed(2)},${y0.toFixed(2)} A${r},${r} 0 ${large} 1 ${x1.toFixed(2)},${y1.toFixed(2)}`;
+}
+
+/** Sum helper. */
+export function sum(values: number[]): number {
+  return values.reduce((a, b) => a + (Number.isFinite(b) ? b : 0), 0);
+}
+
+/** Quantile on a sorted array (linear interpolation). */
+export function quantile(sorted: number[], q: number): number {
+  if (!sorted.length) return 0;
+  const pos = (sorted.length - 1) * q;
+  const lo = Math.floor(pos);
+  const hi = Math.ceil(pos);
+  return sorted[lo] + (sorted[hi] - sorted[lo]) * (pos - lo);
+}
+
+/** Unique, stable id for SVG gradients/clip paths so multiple charts can coexist. */
+let uid = 0;
+export function chartId(prefix = 'chart'): string {
+  uid += 1;
+  return `${prefix}-${uid}-${Math.random().toString(36).slice(2, 7)}`;
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+/** Squarified treemap layout (Bruls et al.) for a list of positive values. */
+export function squarify(values: number[], box: Rect): Rect[] {
+  const total = sum(values);
+  if (!total) return values.map(() => ({ x: box.x, y: box.y, w: 0, h: 0 }));
+  const area = box.w * box.h;
+  const items = values.map((v, i) => ({ i, a: (v / total) * area })).sort((a, b) => b.a - a.a);
+  const out: Rect[] = new Array(values.length);
+  let rect = { ...box };
+  let row: typeof items = [];
+
+  const worst = (r: typeof items, side: number) => {
+    const s = r.reduce((acc, it) => acc + it.a, 0);
+    const max = Math.max(...r.map((it) => it.a));
+    const min = Math.min(...r.map((it) => it.a));
+    return Math.max((side * side * max) / (s * s), (s * s) / (side * side * min));
+  };
+
+  const layoutRow = (r: typeof items) => {
+    const s = r.reduce((acc, it) => acc + it.a, 0);
+    if (rect.w >= rect.h) {
+      const w = s / rect.h;
+      let y = rect.y;
+      r.forEach((it) => {
+        const h = it.a / w;
+        out[it.i] = { x: rect.x, y, w, h };
+        y += h;
+      });
+      rect = { x: rect.x + w, y: rect.y, w: rect.w - w, h: rect.h };
+    } else {
+      const h = s / rect.w;
+      let x = rect.x;
+      r.forEach((it) => {
+        const w = it.a / h;
+        out[it.i] = { x, y: rect.y, w, h };
+        x += w;
+      });
+      rect = { x: rect.x, y: rect.y + h, w: rect.w, h: rect.h - h };
+    }
+  };
+
+  for (const it of items) {
+    const side = Math.min(rect.w, rect.h);
+    if (!row.length || worst([...row, it], side) <= worst(row, side)) {
+      row.push(it);
+    } else {
+      layoutRow(row);
+      row = [it];
+    }
+  }
+  if (row.length) layoutRow(row);
+  return out;
+}

package/src/components/lib/charts/index.ts

@@ -4,3 +4,49 @@
 export { default as AreaChart } from './AreaChart.astro';
 export { default as BarChart } from './BarChart.astro';
 export { default as DonutChart } from './DonutChart.astro';
+export { default as RadarMetricChart } from './RadarMetricChart.astro';
+export { default as LinearProgressGauge } from './LinearProgressGauge.astro';
+
+// Zero-dependency SVG charts & statistics
+export { default as ActivityRings } from './ActivityRings.astro';
+export { default as BoxPlotChart } from './BoxPlotChart.astro';
+export { default as BubbleChart } from './BubbleChart.astro';
+export { default as BulletChart } from './BulletChart.astro';
+export { default as BumpChart } from './BumpChart.astro';
+export { default as CandlestickChart } from './CandlestickChart.astro';
+export { default as ChartFrame } from './ChartFrame.astro';
+export { default as DivergingBarChart } from './DivergingBarChart.astro';
+export { default as DumbbellChart } from './DumbbellChart.astro';
+export { default as ForecastLineChart } from './ForecastLineChart.astro';
+export { default as FunnelChart } from './FunnelChart.astro';
+export { default as GaugeChart } from './GaugeChart.astro';
+export { default as GoalProgressChart } from './GoalProgressChart.astro';
+export { default as GroupedBarChart } from './GroupedBarChart.astro';
+export { default as HeatmapChart } from './HeatmapChart.astro';
+export { default as HistogramChart } from './HistogramChart.astro';
+export { default as HorizontalBarChart } from './HorizontalBarChart.astro';
+export { default as KpiStatTile } from './KpiStatTile.astro';
+export { default as KpiTrendGrid } from './KpiTrendGrid.astro';
+export { default as LineChart } from './LineChart.astro';
+export { default as LollipopChart } from './LollipopChart.astro';
+export { default as MeterGauge } from './MeterGauge.astro';
+export { default as MetricDeltaTable } from './MetricDeltaTable.astro';
+export { default as PieChart } from './PieChart.astro';
+export { default as PolarAreaChart } from './PolarAreaChart.astro';
+export { default as PopulationPyramid } from './PopulationPyramid.astro';
+export { default as PunchCardChart } from './PunchCardChart.astro';
+export { default as RadarChart } from './RadarChart.astro';
+export { default as RadialBarChart } from './RadialBarChart.astro';
+export { default as RangeAreaChart } from './RangeAreaChart.astro';
+export { default as RetentionCohortTable } from './RetentionCohortTable.astro';
+export { default as SankeyChart } from './SankeyChart.astro';
+export { default as ScatterPlot } from './ScatterPlot.astro';
+export { default as SegmentedBarChart } from './SegmentedBarChart.astro';
+export { default as SlopeChart } from './SlopeChart.astro';
+export { default as SparklineChart } from './SparklineChart.astro';
+export { default as StackedAreaChart } from './StackedAreaChart.astro';
+export { default as StackedBarChart } from './StackedBarChart.astro';
+export { default as SunburstChart } from './SunburstChart.astro';
+export { default as TreemapChart } from './TreemapChart.astro';
+export { default as WaffleChart } from './WaffleChart.astro';
+export { default as WaterfallChart } from './WaterfallChart.astro';