decantr 0.9.0

package/src/chart/_animate.js

@@ -0,0 +1,266 @@
+/**
+ * Animation Engine — enter/exit/update morphing, spring physics, stagger.
+ * Interpolates between two scene graphs for smooth transitions.
+ * @module _animate
+ */
+
+import { getAnimations } from '../css/theme-registry.js';
+
+// --- Easing functions ---
+
+export const easings = {
+  linear: t => t,
+  standard: t => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2,
+  decelerate: t => 1 - Math.pow(1 - t, 3),
+  accelerate: t => t * t * t,
+  bounce: t => {
+    const n1 = 7.5625, d1 = 2.75;
+    if (t < 1 / d1) return n1 * t * t;
+    if (t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+    if (t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    return n1 * (t -= 2.625 / d1) * t + 0.984375;
+  },
+  overshoot: t => 1 + 2.70158 * Math.pow(t - 1, 3) + 1.70158 * Math.pow(t - 1, 2)
+};
+
+// --- Spring physics ---
+
+/**
+ * Critically damped spring model.
+ * @param {number} current
+ * @param {number} target
+ * @param {Object} state — { velocity }
+ * @param {number} dt — time delta in seconds
+ * @param {Object} [opts] — { stiffness, damping, mass }
+ * @returns {number}
+ */
+export function springStep(current, target, state, dt, opts = {}) {
+  const stiffness = opts.stiffness || 170;
+  const damping = opts.damping || 26;
+  const mass = opts.mass || 1;
+
+  const displacement = current - target;
+  const springForce = -stiffness * displacement;
+  const dampingForce = -damping * state.velocity;
+  const acceleration = (springForce + dampingForce) / mass;
+
+  state.velocity += acceleration * dt;
+  return current + state.velocity * dt;
+}
+
+// --- Scene interpolation ---
+
+/**
+ * Interpolate between two scene graphs.
+ * Matches nodes by key, interpolates numeric attrs.
+ * @param {Object} from — source scene
+ * @param {Object} to — target scene
+ * @param {number} t — progress 0..1
+ * @returns {Object} interpolated scene
+ */
+export function interpolateScene(from, to, t) {
+  if (!from) return to;
+  if (!to) return from;
+
+  return {
+    ...to,
+    children: interpolateChildren(from.children || [], to.children || [], t),
+    meta: to.meta
+  };
+}
+
+function interpolateChildren(fromChildren, toChildren, t) {
+  // Build key → node maps
+  const fromMap = buildKeyMap(fromChildren);
+  const toMap = buildKeyMap(toChildren);
+  const result = [];
+
+  // Process to-children (enter + update)
+  for (const toNode of toChildren) {
+    const key = nodeKey(toNode);
+    const fromNode = key ? fromMap.get(key) : null;
+
+    if (fromNode) {
+      // Update — interpolate
+      result.push(interpolateNode(fromNode, toNode, t));
+    } else {
+      // Enter — fade/scale in
+      result.push(applyEnter(toNode, t));
+    }
+  }
+
+  // Exit nodes (in from but not in to)
+  for (const fromNode of fromChildren) {
+    const key = nodeKey(fromNode);
+    if (key && !toMap.has(key)) {
+      result.push(applyExit(fromNode, t));
+    }
+  }
+
+  return result;
+}
+
+function interpolateNode(from, to, t) {
+  if (from.type !== to.type) return t < 0.5 ? from : to;
+
+  const result = { ...to };
+
+  // Interpolate numeric properties
+  const numericKeys = ['x', 'y', 'w', 'h', 'cx', 'cy', 'r', 'x1', 'y1', 'x2', 'y2',
+    'innerR', 'outerR', 'startAngle', 'endAngle', 'opacity', 'rx', 'ry', 'strokeWidth'];
+
+  for (const k of numericKeys) {
+    if (typeof from[k] === 'number' && typeof to[k] === 'number') {
+      result[k] = from[k] + (to[k] - from[k]) * t;
+    }
+  }
+
+  // Interpolate path data (if both are simple M/L paths)
+  if (from.d && to.d && from.type === 'path') {
+    result.d = interpolatePath(from.d, to.d, t);
+  }
+
+  // Recurse into children
+  if (from.children && to.children) {
+    result.children = interpolateChildren(from.children, to.children, t);
+  }
+
+  return result;
+}
+
+function applyEnter(node, t) {
+  const result = { ...node };
+  if (result.opacity == null) result.opacity = t;
+  else result.opacity = result.opacity * t;
+
+  // Scale from center for rects
+  if (node.type === 'rect' && node.h != null) {
+    const fullH = node.h;
+    result.h = fullH * t;
+    result.y = (node.y || 0) + fullH * (1 - t);
+  }
+
+  if (node.children) {
+    result.children = node.children.map(c => applyEnter(c, t));
+  }
+
+  return result;
+}
+
+function applyExit(node, t) {
+  const result = { ...node };
+  result.opacity = 1 - t;
+  return result;
+}
+
+// --- Path interpolation ---
+
+function interpolatePath(fromD, toD, t) {
+  const fromCmds = parsePath(fromD);
+  const toCmds = parsePath(toD);
+
+  if (fromCmds.length !== toCmds.length) return t < 0.5 ? fromD : toD;
+
+  let result = '';
+  for (let i = 0; i < toCmds.length; i++) {
+    const fc = fromCmds[i], tc = toCmds[i];
+    if (fc.cmd !== tc.cmd || fc.values.length !== tc.values.length) {
+      return t < 0.5 ? fromD : toD;
+    }
+    result += tc.cmd;
+    for (let j = 0; j < tc.values.length; j++) {
+      if (j > 0) result += ',';
+      result += (fc.values[j] + (tc.values[j] - fc.values[j]) * t).toFixed(2);
+    }
+  }
+  return result;
+}
+
+function parsePath(d) {
+  const cmds = [];
+  const re = /([MLHVCSQTAZ])([^MLHVCSQTAZ]*)/gi;
+  let match;
+  while ((match = re.exec(d))) {
+    const cmd = match[1];
+    const values = match[2].trim() ? match[2].trim().split(/[\s,]+/).map(Number) : [];
+    cmds.push({ cmd, values });
+  }
+  return cmds;
+}
+
+// --- Orchestrator ---
+
+/**
+ * Animate between two scenes.
+ * @param {HTMLElement} container — DOM container
+ * @param {Object} fromScene — previous scene graph
+ * @param {Object} toScene — new scene graph
+ * @param {Function} renderFn — renderer function (scene → DOM element)
+ * @param {Object} [opts]
+ * @param {number} [opts.duration=300] — ms
+ * @param {string} [opts.easing='decelerate']
+ * @param {boolean} [opts.spring=false]
+ * @param {number} [opts.stagger=0] — ms delay between elements
+ * @returns {Promise<void>}
+ */
+export function animate(container, fromScene, toScene, renderFn, opts = {}) {
+  // Check if animations are disabled
+  if (typeof getAnimations === 'function' && !getAnimations()) {
+    const el = renderFn(toScene);
+    container.textContent = '';
+    container.appendChild(el);
+    return Promise.resolve();
+  }
+
+  // Check prefers-reduced-motion
+  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
+    if (mq.matches) {
+      const el = renderFn(toScene);
+      container.textContent = '';
+      container.appendChild(el);
+      return Promise.resolve();
+    }
+  }
+
+  const duration = opts.duration || 300;
+  const easingFn = easings[opts.easing] || easings.decelerate;
+
+  return new Promise(resolve => {
+    const start = performance.now();
+
+    function frame(now) {
+      const elapsed = now - start;
+      const rawT = Math.min(1, elapsed / duration);
+      const t = easingFn(rawT);
+
+      const interpolated = interpolateScene(fromScene, toScene, t);
+      const el = renderFn(interpolated);
+      container.textContent = '';
+      container.appendChild(el);
+
+      if (rawT < 1) {
+        requestAnimationFrame(frame);
+      } else {
+        resolve();
+      }
+    }
+
+    requestAnimationFrame(frame);
+  });
+}
+
+// --- Helpers ---
+
+function nodeKey(node) {
+  return node?.key || null;
+}
+
+function buildKeyMap(children) {
+  const map = new Map();
+  for (const child of children) {
+    const key = nodeKey(child);
+    if (key) map.set(key, child);
+  }
+  return map;
+}

package/src/chart/_base.js

@@ -0,0 +1,109 @@
+/**
+ * Base structural CSS for chart components.
+ * Injected once on first chart render.
+ * Visual styling comes from the active theme (chart key in themes/*.js).
+ */
+
+let injected = false;
+
+const BASE_CSS = [
+  // Chart container
+  '.d-chart{position:relative;width:100%;min-width:0;overflow:visible}',
+  '.d-chart-inner{position:relative}',
+
+  // SVG container
+  '.d-chart-svg{display:block;width:100%;overflow:visible}',
+
+  // Title
+  '.d-chart-title{font-size:var(--d-text-lg);font-weight:var(--d-fw-title);line-height:var(--d-lh-snug);color:var(--d-fg);margin:0 0 var(--d-sp-3) 0}',
+
+  // Axes
+  '.d-chart-axis text,text.d-chart-axis{font-size:var(--d-text-xs);fill:var(--d-muted);font-family:var(--d-font)}',
+  '.d-chart-axis line,.d-chart-axis path,line.d-chart-axis,path.d-chart-axis{stroke:var(--d-border);fill:none;shape-rendering:crispEdges}',
+  '.d-chart-axis-label{font-size:var(--d-text-sm);fill:var(--d-muted);font-family:var(--d-font)}',
+
+  // Grid
+  'line.d-chart-grid{stroke:var(--d-chart-grid,var(--d-border));shape-rendering:crispEdges}',
+
+  // Data elements
+  '.d-chart-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}',
+  '.d-chart-area{}',
+  '.d-chart-bar{}',
+  '.d-chart-point{cursor:pointer;transition:r var(--d-duration-fast) ease}',
+  '.d-chart-point:hover{r:5}',
+  '.d-chart-point:focus{outline:2px solid var(--d-primary);outline-offset:2px}',
+  '.d-chart-slice{cursor:pointer;transition:opacity 0.15s}',
+  '.d-chart-slice:hover{opacity:0.85}',
+
+  // Legend
+  '.d-chart-legend{display:flex;flex-wrap:wrap;gap:var(--d-sp-3);padding:var(--d-sp-3) 0 0;font-size:var(--d-text-sm);color:var(--d-fg)}',
+  '.d-chart-legend-item{display:inline-flex;align-items:center;gap:var(--d-sp-1-5);cursor:pointer;user-select:none}',
+  '.d-chart-legend-swatch{width:var(--d-sp-3);height:var(--d-sp-3);border-radius:50%;flex-shrink:0}',
+  '.d-chart-legend-disabled{opacity:0.35}',
+
+  // Tooltip
+  '.d-chart-tooltip{position:absolute;z-index:1002;pointer-events:none;padding:var(--d-sp-2) var(--d-sp-3);font-size:var(--d-text-sm);line-height:var(--d-lh-normal);white-space:nowrap;border-radius:var(--d-radius);background:var(--d-chart-tooltip-bg,var(--d-surface-1));color:var(--d-fg);border:1px solid var(--d-border);box-shadow:0 2px 8px rgba(0,0,0,0.12);opacity:0;transition:opacity 0.12s}',
+  '.d-chart-tooltip-visible{opacity:1}',
+  '.d-chart-tooltip-label{font-weight:var(--d-fw-title);margin-bottom:var(--d-sp-1)}',
+  '.d-chart-tooltip-row{display:flex;align-items:center;gap:var(--d-sp-2)}',
+  '.d-chart-tooltip-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}',
+
+  // Data table fallback (accessibility)
+  '.d-chart-table{width:100%;border-collapse:collapse;font-size:var(--d-text-sm);margin-top:var(--d-sp-2)}',
+  '.d-chart-table th{text-align:left;font-weight:600;padding:var(--d-sp-2);border-bottom:2px solid var(--d-border)}',
+  '.d-chart-table td{padding:var(--d-sp-2);border-bottom:1px solid var(--d-border)}',
+
+  // Screen reader only
+  '.d-chart-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}',
+
+  // Sparkline
+  '.d-chart-spark{display:inline-block;vertical-align:middle}',
+  '.d-chart-spark svg{display:block}',
+
+  // Annotations
+  '.d-chart-annotation-line{stroke-dasharray:4,3}',
+  '.d-chart-annotation-label{font-size:var(--d-text-xs);fill:var(--d-muted);font-family:var(--d-font)}',
+  '.d-chart-annotation-band{opacity:0.08}',
+
+  // Crosshair
+  '.d-chart-crosshair{pointer-events:none}',
+
+  // Brush selection
+  '.d-chart-brush{fill:var(--d-chart-selection,var(--d-primary-subtle));stroke:var(--d-primary-border);pointer-events:none}',
+
+  // Grid — theme-aware (duplicate removed; consolidated above)
+
+  // Tick marks
+  '.d-chart-tick{stroke:var(--d-border);shape-rendering:crispEdges}',
+
+  // Scene graph text elements
+  '.d-chart text{font-family:var(--d-font)}',
+
+  // Live streaming — smooth CSS path morphing instead of full SVG rebuild
+  '.d-chart-live .d-chart-line{transition:d 0.8s ease-out}',
+  '.d-chart-live .d-chart-area{transition:d 0.8s ease-out}',
+
+  // Line draw entrance animation
+  '@keyframes d-chart-draw{from{stroke-dashoffset:var(--d-path-len)}to{stroke-dashoffset:0}}',
+  '.d-chart-line[data-animate]{stroke-dasharray:var(--d-path-len);animation:d-chart-draw 0.75s ease-out forwards}',
+
+  // Reduced motion
+  '@media(prefers-reduced-motion:reduce){.d-chart-line,.d-chart-area,.d-chart-bar,.d-chart-slice,.d-chart-point,.d-chart-tooltip{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}'
+].join('');
+
+export function injectChartBase() {
+  if (injected) return;
+  if (typeof document === 'undefined') return;
+  injected = true;
+  let el = document.querySelector('[data-decantr-chart]');
+  if (!el) {
+    el = document.createElement('style');
+    el.setAttribute('data-decantr-chart', '');
+    document.head.appendChild(el);
+  }
+  el.textContent = `@layer d.base{${BASE_CSS}}`;
+}
+
+export function resetChartBase() {
+  injected = false;
+}

package/src/chart/_data.js

@@ -0,0 +1,209 @@
+/**
+ * Data Pipeline — transforms, aggregations, streaming, virtual windowing.
+ * All functions are composable and return new arrays.
+ * @module _data
+ */
+
+// --- Transform functions ---
+
+/**
+ * Filter data rows by predicate.
+ * @param {Object[]} data
+ * @param {Function} predicate — (row) => boolean
+ * @returns {Object[]}
+ */
+export function filter(data, predicate) {
+  return data.filter(predicate);
+}
+
+/**
+ * Sort data by field.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {'asc'|'desc'} [order='asc']
+ * @returns {Object[]}
+ */
+export function sortBy(data, field, order = 'asc') {
+  const sorted = [...data];
+  const dir = order === 'desc' ? -1 : 1;
+  sorted.sort((a, b) => {
+    const av = a[field], bv = b[field];
+    if (av < bv) return -dir;
+    if (av > bv) return dir;
+    return 0;
+  });
+  return sorted;
+}
+
+/**
+ * Aggregate data by group field.
+ * @param {Object[]} data
+ * @param {string} groupField — field to group by
+ * @param {string} aggField — field to aggregate
+ * @param {'sum'|'avg'|'min'|'max'|'count'} fn
+ * @returns {Object[]} — [{ [groupField], [aggField] }]
+ */
+export function aggregate(data, groupField, aggField, fn) {
+  const groups = new Map();
+  for (const d of data) {
+    const key = d[groupField];
+    if (!groups.has(key)) groups.set(key, []);
+    groups.get(key).push(+d[aggField] || 0);
+  }
+
+  return [...groups.entries()].map(([key, values]) => {
+    let result;
+    switch (fn) {
+      case 'sum': result = values.reduce((s, v) => s + v, 0); break;
+      case 'avg': result = values.reduce((s, v) => s + v, 0) / values.length; break;
+      case 'min': result = Math.min(...values); break;
+      case 'max': result = Math.max(...values); break;
+      case 'count': result = values.length; break;
+      default: result = values.reduce((s, v) => s + v, 0);
+    }
+    return { [groupField]: key, [aggField]: result };
+  });
+}
+
+/**
+ * Pivot table transformation.
+ * @param {Object[]} data
+ * @param {string} rowField
+ * @param {string} colField
+ * @param {string} valueField
+ * @returns {Object[]}
+ */
+export function pivot(data, rowField, colField, valueField) {
+  const rows = new Map();
+  for (const d of data) {
+    const rowKey = d[rowField];
+    if (!rows.has(rowKey)) rows.set(rowKey, { [rowField]: rowKey });
+    rows.get(rowKey)[d[colField]] = +d[valueField] || 0;
+  }
+  return [...rows.values()];
+}
+
+/**
+ * Running cumulative sum.
+ * @param {Object[]} data
+ * @param {string} field
+ * @returns {Object[]}
+ */
+export function cumulative(data, field) {
+  let sum = 0;
+  return data.map(d => {
+    sum += +d[field] || 0;
+    return { ...d, [field]: sum };
+  });
+}
+
+/**
+ * Normalize values to 0-100% of total.
+ * @param {Object[]} data
+ * @param {string[]} fields
+ * @returns {Object[]}
+ */
+export function normalize(data, fields) {
+  return data.map(d => {
+    let total = 0;
+    for (const f of fields) total += Math.abs(+d[f] || 0);
+    if (total === 0) total = 1;
+    const result = { ...d };
+    for (const f of fields) result[f] = ((+d[f] || 0) / total) * 100;
+    return result;
+  });
+}
+
+// --- Statistical functions ---
+
+/**
+ * Histogram binning.
+ * @param {Object[]} data
+ * @param {string} field
+ * @param {number} [binCount] — auto if not provided
+ * @returns {{ lo: number, hi: number, count: number }[]}
+ */
+export function binData(data, field, binCount) {
+  const values = data.map(d => +d[field]).filter(v => !isNaN(v)).sort((a, b) => a - b);
+  if (!values.length) return [];
+
+  const n = binCount || Math.max(5, Math.ceil(Math.sqrt(values.length)));
+  const min = values[0], max = values[values.length - 1];
+  const width = (max - min) / n || 1;
+
+  const bins = [];
+  for (let i = 0; i < n; i++) {
+    const lo = min + i * width;
+    const hi = lo + width;
+    const count = values.filter(v => v >= lo && (i === n - 1 ? v <= hi : v < hi)).length;
+    bins.push({ lo, hi, count });
+  }
+  return bins;
+}
+
+/**
+ * Box plot statistics.
+ * @param {Object[]} data
+ * @param {string} field
+ * @returns {{ q1, median, q3, whiskerLow, whiskerHigh, outliers, min, max, mean }}
+ */
+export function boxStats(data, field) {
+  const values = data.map(d => +d[field]).filter(v => !isNaN(v)).sort((a, b) => a - b);
+  if (!values.length) return { q1: 0, median: 0, q3: 0, whiskerLow: 0, whiskerHigh: 0, outliers: [], min: 0, max: 0, mean: 0 };
+
+  const q = (p) => {
+    const idx = (values.length - 1) * p;
+    const lo = Math.floor(idx), hi = Math.ceil(idx);
+    return lo === hi ? values[lo] : values[lo] + (values[hi] - values[lo]) * (idx - lo);
+  };
+
+  const median = q(0.5), q1 = q(0.25), q3 = q(0.75);
+  const iqr = q3 - q1;
+  const lowerFence = q1 - 1.5 * iqr;
+  const upperFence = q3 + 1.5 * iqr;
+  const whiskerLow = values.find(v => v >= lowerFence) ?? values[0];
+  const whiskerHigh = [...values].reverse().find(v => v <= upperFence) ?? values[values.length - 1];
+  const outliers = values.filter(v => v < lowerFence || v > upperFence);
+  const mean = values.reduce((s, v) => s + v, 0) / values.length;
+
+  return { q1, median, q3, whiskerLow, whiskerHigh, outliers, min: values[0], max: values[values.length - 1], mean };
+}
+
+// --- Virtual windowing ---
+
+/**
+ * Extract visible data window using binary search.
+ * O(log n) for datasets with sorted x values.
+ * @param {Object[]} data — sorted by xField
+ * @param {string} xField
+ * @param {number[]} viewport — [minX, maxX]
+ * @returns {Object[]}
+ */
+export function virtualWindow(data, xField, viewport) {
+  if (!data.length) return [];
+  const [minX, maxX] = viewport;
+
+  // Binary search for start index
+  let lo = 0, hi = data.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi) >> 1;
+    if (+data[mid][xField] < minX) lo = mid + 1;
+    else hi = mid;
+  }
+  const startIdx = lo;
+
+  // Binary search for end index
+  lo = startIdx; hi = data.length - 1;
+  while (lo < hi) {
+    const mid = (lo + hi + 1) >> 1;
+    if (+data[mid][xField] > maxX) hi = mid - 1;
+    else lo = mid;
+  }
+  const endIdx = hi;
+
+  // Include one point before and after for line continuity
+  const start = Math.max(0, startIdx - 1);
+  const end = Math.min(data.length - 1, endIdx + 1);
+
+  return data.slice(start, end + 1);
+}

package/src/chart/_format.js

@@ -0,0 +1,106 @@
+/**
+ * Number/date/duration formatting — extracted + extended.
+ * @module _format
+ */
+
+/**
+ * Format a number for display.
+ * @param {number} v
+ * @returns {string}
+ */
+export function formatNumber(v) {
+  if (v == null || isNaN(v)) return '';
+  if (Math.abs(v) >= 1e12) return (v / 1e12).toFixed(1) + 'T';
+  if (Math.abs(v) >= 1e9) return (v / 1e9).toFixed(1) + 'B';
+  if (Math.abs(v) >= 1e6) return (v / 1e6).toFixed(1) + 'M';
+  if (Math.abs(v) >= 1e3) return (v / 1e3).toFixed(1) + 'K';
+  if (Number.isInteger(v)) return String(v);
+  return v.toFixed(1);
+}
+
+/**
+ * Format a date for display.
+ * @param {Date|number|string} d
+ * @returns {string}
+ */
+export function formatDate(d) {
+  if (!(d instanceof Date)) d = new Date(d);
+  if (isNaN(d.getTime())) return '';
+  return `${d.getMonth() + 1}/${d.getDate()}`;
+}
+
+/**
+ * Format a date with time.
+ * @param {Date|number|string} d
+ * @returns {string}
+ */
+export function formatDateTime(d) {
+  if (!(d instanceof Date)) d = new Date(d);
+  if (isNaN(d.getTime())) return '';
+  const h = d.getHours().toString().padStart(2, '0');
+  const m = d.getMinutes().toString().padStart(2, '0');
+  return `${d.getMonth() + 1}/${d.getDate()} ${h}:${m}`;
+}
+
+/**
+ * Format a duration in milliseconds.
+ * @param {number} ms
+ * @returns {string}
+ */
+export function formatDuration(ms) {
+  if (ms < 1000) return ms + 'ms';
+  if (ms < 60000) return (ms / 1000).toFixed(1) + 's';
+  if (ms < 3600000) return (ms / 60000).toFixed(1) + 'm';
+  if (ms < 86400000) return (ms / 3600000).toFixed(1) + 'h';
+  return (ms / 86400000).toFixed(1) + 'd';
+}
+
+/**
+ * Format a percentage.
+ * @param {number} v — 0-1 or 0-100
+ * @param {number} [decimals=1]
+ * @returns {string}
+ */
+export function formatPercent(v, decimals = 1) {
+  const pct = v > 1 ? v : v * 100;
+  return pct.toFixed(decimals) + '%';
+}
+
+/**
+ * Format bytes to human-readable.
+ * @param {number} bytes
+ * @returns {string}
+ */
+export function formatBytes(bytes) {
+  if (bytes < 1024) return bytes + ' B';
+  if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+  if (bytes < 1073741824) return (bytes / 1048576).toFixed(1) + ' MB';
+  return (bytes / 1073741824).toFixed(1) + ' GB';
+}
+
+/**
+ * Format currency.
+ * @param {number} v
+ * @param {string} [symbol='$']
+ * @returns {string}
+ */
+export function formatCurrency(v, symbol = '$') {
+  return symbol + formatNumber(v);
+}
+
+/**
+ * Create a custom number formatter.
+ * @param {Object} opts
+ * @param {string} [opts.prefix='']
+ * @param {string} [opts.suffix='']
+ * @param {number} [opts.decimals=1]
+ * @param {boolean} [opts.compact=true]
+ * @returns {(v: number) => string}
+ */
+export function createFormatter(opts = {}) {
+  const { prefix = '', suffix = '', decimals = 1, compact = true } = opts;
+  return function(v) {
+    const formatted = compact ? formatNumber(v) : v.toFixed(decimals);
+    return prefix + formatted + suffix;
+  };
+}