trackops 2.0.4 → 2.0.5

package/ui/js/charts.js

@@ -1,526 +1,526 @@
-/**
- * charts.js — Motor de gráficos SVG para TrackOps Dashboard
- * Vanilla JS, zero dependencies. Usa CSS custom properties de tokens.css.
- */
-
-// ─── Helpers ────────────────────────────────────────────────────
-
-function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
-
-function scale(value, inMin, inMax, outMin, outMax) {
-  if (inMax === inMin) return (outMin + outMax) / 2;
-  return outMin + ((value - inMin) / (inMax - inMin)) * (outMax - outMin);
-}
-
-function esc(str) {
-  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
-}
-
-function niceTicksCount(range) {
-  if (range <= 0) return [0, 1, 2, 3, 4];
-  const rough = range / 4;
-  const mag = Math.pow(10, Math.floor(Math.log10(rough)));
-  const res = rough / mag;
-  let step;
-  if (res <= 1.5) step = mag;
-  else if (res <= 3) step = 2 * mag;
-  else if (res <= 7) step = 5 * mag;
-  else step = 10 * mag;
-  return step;
-}
-
-function niceTicks(min, max, count = 5) {
-  if (min === max) {
-    const v = min;
-    return [v - 2, v - 1, v, v + 1, v + 2];
-  }
-  const step = niceTicksCount(max - min);
-  const lo = Math.floor(min / step) * step;
-  const hi = Math.ceil(max / step) * step;
-  const ticks = [];
-  for (let v = lo; v <= hi + step * 0.001; v += step) {
-    ticks.push(Math.round(v * 1e6) / 1e6);
-  }
-  // trim to reasonable count
-  while (ticks.length > count + 2) {
-    const newTicks = [];
-    for (let i = 0; i < ticks.length; i += 2) newTicks.push(ticks[i]);
-    ticks.length = 0;
-    ticks.push(...newTicks);
-  }
-  return ticks;
-}
-
-function fmtNum(n) {
-  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1) + 'M';
-  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + 'k';
-  return Number.isInteger(n) ? String(n) : n.toFixed(1);
-}
-
-function uid() {
-  return 'to_' + Math.random().toString(36).slice(2, 9);
-}
-
-// ─── Topological sort ───────────────────────────────────────────
-
-function topoSort(tasks) {
-  const map = new Map();
-  tasks.forEach(t => map.set(t.id, t));
-
-  const levels = new Map();
-  const visited = new Set();
-
-  function depth(id) {
-    if (levels.has(id)) return levels.get(id);
-    if (visited.has(id)) return 0; // cycle guard
-    visited.add(id);
-    const t = map.get(id);
-    if (!t || !t.dependsOn || t.dependsOn.length === 0) {
-      levels.set(id, 0);
-      return 0;
-    }
-    let d = 0;
-    for (const dep of t.dependsOn) {
-      if (map.has(dep)) d = Math.max(d, depth(dep) + 1);
-    }
-    levels.set(id, d);
-    return d;
-  }
-
-  tasks.forEach(t => depth(t.id));
-  return levels;
-}
-
-// ─── 1. sparkline ───────────────────────────────────────────────
-
-export function sparkline(values, options = {}) {
-  if (!Array.isArray(values) || values.length < 2) return '';
-
-  const {
-    width = 80,
-    height = 24,
-    color: userColor,
-    strokeWidth = 2,
-  } = options;
-
-  const first = values[0];
-  const last = values[values.length - 1];
-  let color = userColor;
-  if (!color) {
-    if (last > first) color = 'var(--success)';
-    else if (last < first) color = 'var(--danger)';
-    else color = 'var(--accent)';
-  }
-
-  const min = Math.min(...values);
-  const max = Math.max(...values);
-  const padY = strokeWidth;
-
-  const points = values.map((v, i) => {
-    const x = scale(i, 0, values.length - 1, strokeWidth, width - strokeWidth);
-    const y = scale(v, min, max, height - padY, padY);
-    return `${x.toFixed(1)},${y.toFixed(1)}`;
-  }).join(' ');
-
-  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Sparkline: ${first} to ${last}"><polyline fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" points="${points}"/></svg>`;
-}
-
-// ─── 2. lineChart ───────────────────────────────────────────────
-
-export function lineChart(data, options = {}) {
-  if (!Array.isArray(data) || data.length === 0) return '';
-
-  const {
-    width = 480,
-    height = 200,
-    color = 'var(--accent)',
-    fill = true,
-    showDots = true,
-    showGrid = true,
-    animate = true,
-    yLabel = '',
-  } = options;
-
-  const values = data.map(d => d.value);
-  const labels = data.map(d => d.label);
-  const rawMin = Math.min(...values);
-  const rawMax = Math.max(...values);
-  const ticks = niceTicks(rawMin, rawMax, 5);
-  const yMin = ticks[0];
-  const yMax = ticks[ticks.length - 1];
-
-  // Layout constants
-  const padLeft = 48;
-  const padRight = 12;
-  const padTop = 12;
-  const padBottom = 36;
-  const plotW = width - padLeft - padRight;
-  const plotH = height - padTop - padBottom;
-
-  const gradId = uid();
-  const animId = uid();
-
-  // Map data to plot coords
-  const pts = data.map((d, i) => {
-    const x = padLeft + scale(i, 0, Math.max(data.length - 1, 1), 0, plotW);
-    const y = padTop + scale(d.value, yMin, yMax, plotH, 0);
-    return { x, y, v: d.value, l: d.label };
-  });
-
-  const polyPoints = pts.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
-  const areaPath = pts.length
-    ? `M${pts[0].x.toFixed(1)},${(padTop + plotH).toFixed(1)} ` +
-      pts.map(p => `L${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ') +
-      ` L${pts[pts.length - 1].x.toFixed(1)},${(padTop + plotH).toFixed(1)} Z`
-    : '';
-
-  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-label="Line chart${yLabel ? ': ' + esc(yLabel) : ''} — ${data.length} points, min ${fmtNum(rawMin)}, max ${fmtNum(rawMax)}">`;
-
-  // Defs: gradient for area fill + optional clip animation
-  svg += `<defs>`;
-  if (fill) {
-    svg += `<linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">` +
-      `<stop offset="0%" stop-color="${color}" stop-opacity="0.35"/>` +
-      `<stop offset="100%" stop-color="${color}" stop-opacity="0"/>` +
-      `</linearGradient>`;
-  }
-  if (animate) {
-    svg += `<clipPath id="${animId}"><rect x="${padLeft}" y="0" width="0" height="${height}">` +
-      `<animate attributeName="width" from="0" to="${plotW + padRight}" dur="0.8s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1"/></rect></clipPath>`;
-  }
-  svg += `</defs>`;
-
-  const clipAttr = animate ? ` clip-path="url(#${animId})"` : '';
-
-  // Grid lines
-  if (showGrid) {
-    for (const t of ticks) {
-      const gy = padTop + scale(t, yMin, yMax, plotH, 0);
-      svg += `<line class="chart-grid-line" x1="${padLeft}" y1="${gy.toFixed(1)}" x2="${width - padRight}" y2="${gy.toFixed(1)}" stroke="var(--border)" stroke-dasharray="4 3" stroke-width="1"/>`;
-    }
-  }
-
-  // Y-axis labels
-  for (const t of ticks) {
-    const gy = padTop + scale(t, yMin, yMax, plotH, 0);
-    svg += `<text class="chart-axis-label" x="${padLeft - 6}" y="${(gy + 3).toFixed(1)}" text-anchor="end" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${fmtNum(t)}</text>`;
-  }
-
-  // X-axis labels
-  const maxLabels = Math.floor(plotW / 40);
-  const step = Math.max(1, Math.ceil(data.length / maxLabels));
-  const rotateLabels = data.length > 10;
-  for (let i = 0; i < data.length; i += step) {
-    const lx = pts[i].x;
-    const ly = height - padBottom + 16;
-    if (rotateLabels) {
-      svg += `<text class="chart-axis-label" x="${lx.toFixed(1)}" y="${ly.toFixed(1)}" text-anchor="end" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)" transform="rotate(-45 ${lx.toFixed(1)} ${ly.toFixed(1)})">${esc(labels[i])}</text>`;
-    } else {
-      svg += `<text class="chart-axis-label" x="${lx.toFixed(1)}" y="${ly.toFixed(1)}" text-anchor="middle" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${esc(labels[i])}</text>`;
-    }
-  }
-
-  // Area fill
-  if (fill && areaPath) {
-    svg += `<path class="chart-area" d="${areaPath}" fill="url(#${gradId})"${clipAttr}/>`;
-  }
-
-  // Line
-  svg += `<polyline class="chart-line" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="${polyPoints}"${clipAttr}/>`;
-
-  // Dots
-  if (showDots) {
-    for (const p of pts) {
-      svg += `<circle class="chart-dot" cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="3" fill="${color}" stroke="var(--surface-2)" stroke-width="1.5"${clipAttr}><title>${esc(p.l)}: ${fmtNum(p.v)}</title></circle>`;
-    }
-  }
-
-  // Y-label
-  if (yLabel) {
-    svg += `<text class="chart-axis-label" x="4" y="${(padTop + plotH / 2).toFixed(1)}" transform="rotate(-90 4 ${(padTop + plotH / 2).toFixed(1)})" text-anchor="middle" fill="var(--text-secondary)" font-size="10" font-family="var(--font-ui)">${esc(yLabel)}</text>`;
-  }
-
-  svg += `</svg>`;
-  return svg;
-}
-
-// ─── 3. barChart ────────────────────────────────────────────────
-
-export function barChart(data, options = {}) {
-  if (!Array.isArray(data) || data.length === 0) return '';
-
-  const {
-    maxWidth = 480,
-    barHeight = 28,
-    gap = 8,
-    showValues = true,
-    animate = true,
-  } = options;
-
-  const maxVal = Math.max(...data.map(d => d.value), 1);
-
-  const rows = data.map((d, i) => {
-    const pct = clamp((d.value / maxVal) * 100, 0, 100);
-    const barColor = d.color || 'var(--accent)';
-    const transition = animate ? `transition: width 0.6s var(--ease-out) ${i * 0.06}s;` : '';
-
-    return `<div class="bar-row" style="display:flex;align-items:center;gap:8px;height:${barHeight}px;margin-bottom:${gap}px;">` +
-      `<span class="bar-label" style="min-width:80px;font-size:var(--text-sm);color:var(--text-secondary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);" title="${esc(d.label)}">${esc(d.label)}</span>` +
-      `<div class="bar-track" role="progressbar" aria-valuenow="${d.value}" aria-valuemin="0" aria-valuemax="${maxVal}" aria-label="${esc(d.label)}: ${d.value}" style="flex:1;height:100%;background:var(--surface-4);border-radius:var(--radius-xs);overflow:hidden;position:relative;">` +
-        `<div class="bar-fill" style="width:${pct.toFixed(1)}%;height:100%;background:${barColor};border-radius:var(--radius-xs);${transition}"></div>` +
-      `</div>` +
-      (showValues
-        ? `<span class="bar-value" style="min-width:40px;font-size:var(--text-sm);color:var(--text-primary);font-variant-numeric:tabular-nums;font-family:var(--font-mono);text-align:right;">${fmtNum(d.value)}</span>`
-        : '') +
-    `</div>`;
-  }).join('');
-
-  return `<div class="bar-chart" style="max-width:${maxWidth}px;width:100%;" role="img" aria-label="Bar chart — ${data.length} items">${rows}</div>`;
-}
-
-// ─── 4. donutChart ──────────────────────────────────────────────
-
-export function donutChart(segments, options = {}) {
-  if (!Array.isArray(segments) || segments.length === 0) return '';
-
-  const {
-    size = 160,
-    strokeWidth = 14,
-    centerLabel = '',
-    centerSub = '',
-    animate = true,
-  } = options;
-
-  const total = segments.reduce((s, d) => s + d.value, 0);
-  if (total <= 0) return '';
-
-  const r = (size - strokeWidth) / 2;
-  const cx = size / 2;
-  const cy = size / 2;
-  const circumference = 2 * Math.PI * r;
-
-  // Build arcs
-  let offsetSoFar = 0;
-  const arcs = segments.map((seg, i) => {
-    const frac = seg.value / total;
-    const dash = frac * circumference;
-    const gap = circumference - dash;
-    const offset = -offsetSoFar + circumference * 0.25; // start at top
-
-    const animAttr = animate
-      ? `<animate attributeName="stroke-dashoffset" from="${circumference + circumference * 0.25}" to="${offset.toFixed(2)}" dur="0.7s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" begin="${(i * 0.08).toFixed(2)}s"/>`
-      : '';
-
-    const arc = `<circle class="donut-arc" cx="${cx}" cy="${cy}" r="${r.toFixed(1)}" fill="none" stroke="${seg.color || 'var(--accent)'}" stroke-width="${strokeWidth}" stroke-dasharray="${dash.toFixed(2)} ${gap.toFixed(2)}" stroke-dashoffset="${offset.toFixed(2)}" stroke-linecap="round"><title>${esc(seg.label)}: ${seg.value} (${(frac * 100).toFixed(1)}%)</title>${animAttr}</circle>`;
-
-    offsetSoFar += dash;
-    return arc;
-  });
-
-  let svg = `<svg class="donut-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" role="img" aria-label="Donut chart — ${segments.map(s => esc(s.label) + ': ' + s.value).join(', ')}">`;
-
-  // Track background
-  svg += `<circle class="donut-track" cx="${cx}" cy="${cy}" r="${r.toFixed(1)}" fill="none" stroke="var(--surface-4)" stroke-width="${strokeWidth}"/>`;
-
-  // Arcs
-  svg += arcs.join('');
-
-  // Center label
-  if (centerLabel) {
-    svg += `<text class="donut-label" x="${cx}" y="${centerSub ? cy - 2 : cy}" text-anchor="middle" dominant-baseline="central" fill="var(--text-primary)" font-size="22" font-weight="700" font-family="var(--font-heading)">${esc(centerLabel)}</text>`;
-  }
-  if (centerSub) {
-    svg += `<text class="donut-label" x="${cx}" y="${cy + 16}" text-anchor="middle" dominant-baseline="central" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${esc(centerSub)}</text>`;
-  }
-
-  svg += `</svg>`;
-
-  // Legend
-  const legend = segments.map(seg => {
-    const pct = ((seg.value / total) * 100).toFixed(0);
-    return `<span style="display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-ui);">` +
-      `<span style="width:8px;height:8px;border-radius:50%;background:${seg.color || 'var(--accent)'};flex-shrink:0;"></span>` +
-      `${esc(seg.label)} ${pct}%</span>`;
-  }).join('');
-
-  return `<div style="display:inline-flex;flex-direction:column;align-items:center;gap:8px;">${svg}<div style="display:flex;flex-wrap:wrap;justify-content:center;">${legend}</div></div>`;
-}
-
-// ─── 5. heatmap ─────────────────────────────────────────────────
-
-export function heatmap(data, options = {}) {
-  if (!Array.isArray(data)) return '';
-
-  const {
-    weeks = 12,
-    cellSize = 14,
-    gap = 3,
-    colors = null,
-  } = options;
-
-  const intensityColors = colors || [
-    'transparent',
-    'rgba(99,102,241,0.15)',
-    'rgba(99,102,241,0.30)',
-    'rgba(99,102,241,0.55)',
-    'rgba(99,102,241,0.85)',
-  ];
-
-  // Build lookup
-  const lookup = new Map();
-  let maxCount = 0;
-  data.forEach(d => {
-    lookup.set(d.date, d.count);
-    if (d.count > maxCount) maxCount = d.count;
-  });
-
-  function intensity(count) {
-    if (!count || count <= 0) return 0;
-    if (maxCount === 0) return 0;
-    const ratio = count / maxCount;
-    if (ratio <= 0.25) return 1;
-    if (ratio <= 0.50) return 2;
-    if (ratio <= 0.75) return 3;
-    return 4;
-  }
-
-  // Build grid: work backwards from today
-  const today = new Date();
-  // Find the most recent Sunday (start-of-week for grid alignment)
-  const endDate = new Date(today);
-  endDate.setDate(endDate.getDate() + (6 - endDate.getDay())); // end on Saturday
-
-  const startDate = new Date(endDate);
-  startDate.setDate(startDate.getDate() - (weeks * 7 - 1));
-  // Align to Monday
-  startDate.setDate(startDate.getDate() - ((startDate.getDay() + 6) % 7));
-
-  const dayLabels = ['L', '', 'X', '', 'V', '', 'D'];
-  const labelW = 18;
-  const svgW = labelW + weeks * (cellSize + gap);
-  const svgH = 7 * (cellSize + gap);
-
-  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" width="${svgW}" height="${svgH}" role="img" aria-label="Activity heatmap — ${weeks} weeks">`;
-
-  // Day labels
-  for (let row = 0; row < 7; row++) {
-    if (dayLabels[row]) {
-      svg += `<text x="0" y="${row * (cellSize + gap) + cellSize - 2}" fill="var(--text-muted)" font-size="9" font-family="var(--font-ui)">${dayLabels[row]}</text>`;
-    }
-  }
-
-  // Cells
-  const cursor = new Date(startDate);
-  for (let w = 0; w < weeks; w++) {
-    for (let d = 0; d < 7; d++) {
-      const dateStr = cursor.toISOString().slice(0, 10);
-      const count = lookup.get(dateStr) || 0;
-      const level = intensity(count);
-      const x = labelW + w * (cellSize + gap);
-      const y = d * (cellSize + gap);
-      const fillColor = intensityColors[level];
-      const border = level === 0 ? ' stroke="var(--border)" stroke-width="1"' : '';
-      svg += `<rect class="heatmap-cell" x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" rx="2" fill="${fillColor}"${border}><title>${dateStr}: ${count}</title></rect>`;
-      cursor.setDate(cursor.getDate() + 1);
-    }
-  }
-
-  svg += `</svg>`;
-  return svg;
-}
-
-// ─── 6. dependencyGraph ─────────────────────────────────────────
-
-export function dependencyGraph(tasks, options = {}) {
-  if (!Array.isArray(tasks) || tasks.length === 0) return '';
-
-  // Only render if at least one task has dependencies
-  const hasDeps = tasks.some(t => t.dependsOn && t.dependsOn.length > 0);
-  if (!hasDeps) return '';
-
-  const {
-    nodeWidth = 140,
-    nodeHeight = 36,
-    levelGap = 60,
-    rowGap = 16,
-  } = options;
-
-  const statusColors = {
-    completed: 'var(--success)',
-    in_progress: 'var(--accent)',
-    blocked: 'var(--danger)',
-    pending: 'var(--text-muted)',
-  };
-
-  // Topological levels
-  const levels = topoSort(tasks);
-  const taskMap = new Map();
-  tasks.forEach(t => taskMap.set(t.id, t));
-
-  // Group tasks by level
-  const byLevel = new Map();
-  tasks.forEach(t => {
-    const lv = levels.get(t.id) || 0;
-    if (!byLevel.has(lv)) byLevel.set(lv, []);
-    byLevel.get(lv).push(t);
-  });
-
-  const maxLevel = Math.max(...byLevel.keys(), 0);
-  const maxRowCount = Math.max(...[...byLevel.values()].map(a => a.length), 1);
-
-  const colWidth = nodeWidth + levelGap;
-  const rowHeight = nodeHeight + rowGap;
-  const svgW = (maxLevel + 1) * colWidth + levelGap;
-  const svgH = maxRowCount * rowHeight + rowGap;
-
-  // Compute positions
-  const positions = new Map();
-  for (let lv = 0; lv <= maxLevel; lv++) {
-    const group = byLevel.get(lv) || [];
-    const totalH = group.length * rowHeight;
-    const startY = (svgH - totalH) / 2;
-    group.forEach((t, idx) => {
-      positions.set(t.id, {
-        x: levelGap / 2 + lv * colWidth,
-        y: startY + idx * rowHeight,
-      });
-    });
-  }
-
-  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" width="${svgW}" height="${svgH}" role="img" aria-label="Dependency graph — ${tasks.length} tasks">`;
-
-  // Draw edges first (behind nodes)
-  tasks.forEach(t => {
-    if (!t.dependsOn) return;
-    const target = positions.get(t.id);
-    if (!target) return;
-    t.dependsOn.forEach(depId => {
-      const source = positions.get(depId);
-      if (!source) return;
-      const x1 = source.x + nodeWidth;
-      const y1 = source.y + nodeHeight / 2;
-      const x2 = target.x;
-      const y2 = target.y + nodeHeight / 2;
-      const cpx = (x1 + x2) / 2;
-      svg += `<path d="M${x1},${y1} Q${cpx},${y1} ${cpx},${(y1 + y2) / 2} Q${cpx},${y2} ${x2},${y2}" fill="none" stroke="var(--border-strong)" stroke-width="1.5" stroke-linecap="round"/>`;
-      // Arrow
-      svg += `<polygon points="${x2},${y2} ${x2 - 5},${y2 - 3} ${x2 - 5},${y2 + 3}" fill="var(--border-strong)"/>`;
-    });
-  });
-
-  // Draw nodes
-  tasks.forEach(t => {
-    const pos = positions.get(t.id);
-    if (!pos) return;
-    const col = statusColors[t.status] || 'var(--text-muted)';
-    const truncTitle = t.title.length > 16 ? t.title.slice(0, 15) + '\u2026' : t.title;
-
-    svg += `<rect x="${pos.x}" y="${pos.y}" width="${nodeWidth}" height="${nodeHeight}" rx="6" fill="var(--surface-2)" stroke="${col}" stroke-width="1.5"/>`;
-    svg += `<text x="${pos.x + nodeWidth / 2}" y="${pos.y + nodeHeight / 2 + 1}" text-anchor="middle" dominant-baseline="central" fill="var(--text-primary)" font-size="11" font-family="var(--font-ui)"><title>${esc(t.title)}</title>${esc(truncTitle)}</text>`;
-    // Status dot
-    svg += `<circle cx="${pos.x + 10}" cy="${pos.y + nodeHeight / 2}" r="3" fill="${col}"/>`;
-  });
-
-  svg += `</svg>`;
-  return svg;
-}
+/**
+ * charts.js — Motor de gráficos SVG para TrackOps Dashboard
+ * Vanilla JS, zero dependencies. Usa CSS custom properties de tokens.css.
+ */
+
+// ─── Helpers ────────────────────────────────────────────────────
+
+function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+
+function scale(value, inMin, inMax, outMin, outMax) {
+  if (inMax === inMin) return (outMin + outMax) / 2;
+  return outMin + ((value - inMin) / (inMax - inMin)) * (outMax - outMin);
+}
+
+function esc(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function niceTicksCount(range) {
+  if (range <= 0) return [0, 1, 2, 3, 4];
+  const rough = range / 4;
+  const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+  const res = rough / mag;
+  let step;
+  if (res <= 1.5) step = mag;
+  else if (res <= 3) step = 2 * mag;
+  else if (res <= 7) step = 5 * mag;
+  else step = 10 * mag;
+  return step;
+}
+
+function niceTicks(min, max, count = 5) {
+  if (min === max) {
+    const v = min;
+    return [v - 2, v - 1, v, v + 1, v + 2];
+  }
+  const step = niceTicksCount(max - min);
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const ticks = [];
+  for (let v = lo; v <= hi + step * 0.001; v += step) {
+    ticks.push(Math.round(v * 1e6) / 1e6);
+  }
+  // trim to reasonable count
+  while (ticks.length > count + 2) {
+    const newTicks = [];
+    for (let i = 0; i < ticks.length; i += 2) newTicks.push(ticks[i]);
+    ticks.length = 0;
+    ticks.push(...newTicks);
+  }
+  return ticks;
+}
+
+function fmtNum(n) {
+  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1) + 'M';
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + 'k';
+  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+}
+
+function uid() {
+  return 'to_' + Math.random().toString(36).slice(2, 9);
+}
+
+// ─── Topological sort ───────────────────────────────────────────
+
+function topoSort(tasks) {
+  const map = new Map();
+  tasks.forEach(t => map.set(t.id, t));
+
+  const levels = new Map();
+  const visited = new Set();
+
+  function depth(id) {
+    if (levels.has(id)) return levels.get(id);
+    if (visited.has(id)) return 0; // cycle guard
+    visited.add(id);
+    const t = map.get(id);
+    if (!t || !t.dependsOn || t.dependsOn.length === 0) {
+      levels.set(id, 0);
+      return 0;
+    }
+    let d = 0;
+    for (const dep of t.dependsOn) {
+      if (map.has(dep)) d = Math.max(d, depth(dep) + 1);
+    }
+    levels.set(id, d);
+    return d;
+  }
+
+  tasks.forEach(t => depth(t.id));
+  return levels;
+}
+
+// ─── 1. sparkline ───────────────────────────────────────────────
+
+export function sparkline(values, options = {}) {
+  if (!Array.isArray(values) || values.length < 2) return '';
+
+  const {
+    width = 80,
+    height = 24,
+    color: userColor,
+    strokeWidth = 2,
+  } = options;
+
+  const first = values[0];
+  const last = values[values.length - 1];
+  let color = userColor;
+  if (!color) {
+    if (last > first) color = 'var(--success)';
+    else if (last < first) color = 'var(--danger)';
+    else color = 'var(--accent)';
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  const padY = strokeWidth;
+
+  const points = values.map((v, i) => {
+    const x = scale(i, 0, values.length - 1, strokeWidth, width - strokeWidth);
+    const y = scale(v, min, max, height - padY, padY);
+    return `${x.toFixed(1)},${y.toFixed(1)}`;
+  }).join(' ');
+
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" role="img" aria-label="Sparkline: ${first} to ${last}"><polyline fill="none" stroke="${color}" stroke-width="${strokeWidth}" stroke-linecap="round" stroke-linejoin="round" points="${points}"/></svg>`;
+}
+
+// ─── 2. lineChart ───────────────────────────────────────────────
+
+export function lineChart(data, options = {}) {
+  if (!Array.isArray(data) || data.length === 0) return '';
+
+  const {
+    width = 480,
+    height = 200,
+    color = 'var(--accent)',
+    fill = true,
+    showDots = true,
+    showGrid = true,
+    animate = true,
+    yLabel = '',
+  } = options;
+
+  const values = data.map(d => d.value);
+  const labels = data.map(d => d.label);
+  const rawMin = Math.min(...values);
+  const rawMax = Math.max(...values);
+  const ticks = niceTicks(rawMin, rawMax, 5);
+  const yMin = ticks[0];
+  const yMax = ticks[ticks.length - 1];
+
+  // Layout constants
+  const padLeft = 48;
+  const padRight = 12;
+  const padTop = 12;
+  const padBottom = 36;
+  const plotW = width - padLeft - padRight;
+  const plotH = height - padTop - padBottom;
+
+  const gradId = uid();
+  const animId = uid();
+
+  // Map data to plot coords
+  const pts = data.map((d, i) => {
+    const x = padLeft + scale(i, 0, Math.max(data.length - 1, 1), 0, plotW);
+    const y = padTop + scale(d.value, yMin, yMax, plotH, 0);
+    return { x, y, v: d.value, l: d.label };
+  });
+
+  const polyPoints = pts.map(p => `${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ');
+  const areaPath = pts.length
+    ? `M${pts[0].x.toFixed(1)},${(padTop + plotH).toFixed(1)} ` +
+      pts.map(p => `L${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ') +
+      ` L${pts[pts.length - 1].x.toFixed(1)},${(padTop + plotH).toFixed(1)} Z`
+    : '';
+
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-label="Line chart${yLabel ? ': ' + esc(yLabel) : ''} — ${data.length} points, min ${fmtNum(rawMin)}, max ${fmtNum(rawMax)}">`;
+
+  // Defs: gradient for area fill + optional clip animation
+  svg += `<defs>`;
+  if (fill) {
+    svg += `<linearGradient id="${gradId}" x1="0" y1="0" x2="0" y2="1">` +
+      `<stop offset="0%" stop-color="${color}" stop-opacity="0.35"/>` +
+      `<stop offset="100%" stop-color="${color}" stop-opacity="0"/>` +
+      `</linearGradient>`;
+  }
+  if (animate) {
+    svg += `<clipPath id="${animId}"><rect x="${padLeft}" y="0" width="0" height="${height}">` +
+      `<animate attributeName="width" from="0" to="${plotW + padRight}" dur="0.8s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1"/></rect></clipPath>`;
+  }
+  svg += `</defs>`;
+
+  const clipAttr = animate ? ` clip-path="url(#${animId})"` : '';
+
+  // Grid lines
+  if (showGrid) {
+    for (const t of ticks) {
+      const gy = padTop + scale(t, yMin, yMax, plotH, 0);
+      svg += `<line class="chart-grid-line" x1="${padLeft}" y1="${gy.toFixed(1)}" x2="${width - padRight}" y2="${gy.toFixed(1)}" stroke="var(--border)" stroke-dasharray="4 3" stroke-width="1"/>`;
+    }
+  }
+
+  // Y-axis labels
+  for (const t of ticks) {
+    const gy = padTop + scale(t, yMin, yMax, plotH, 0);
+    svg += `<text class="chart-axis-label" x="${padLeft - 6}" y="${(gy + 3).toFixed(1)}" text-anchor="end" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${fmtNum(t)}</text>`;
+  }
+
+  // X-axis labels
+  const maxLabels = Math.floor(plotW / 40);
+  const step = Math.max(1, Math.ceil(data.length / maxLabels));
+  const rotateLabels = data.length > 10;
+  for (let i = 0; i < data.length; i += step) {
+    const lx = pts[i].x;
+    const ly = height - padBottom + 16;
+    if (rotateLabels) {
+      svg += `<text class="chart-axis-label" x="${lx.toFixed(1)}" y="${ly.toFixed(1)}" text-anchor="end" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)" transform="rotate(-45 ${lx.toFixed(1)} ${ly.toFixed(1)})">${esc(labels[i])}</text>`;
+    } else {
+      svg += `<text class="chart-axis-label" x="${lx.toFixed(1)}" y="${ly.toFixed(1)}" text-anchor="middle" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${esc(labels[i])}</text>`;
+    }
+  }
+
+  // Area fill
+  if (fill && areaPath) {
+    svg += `<path class="chart-area" d="${areaPath}" fill="url(#${gradId})"${clipAttr}/>`;
+  }
+
+  // Line
+  svg += `<polyline class="chart-line" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" points="${polyPoints}"${clipAttr}/>`;
+
+  // Dots
+  if (showDots) {
+    for (const p of pts) {
+      svg += `<circle class="chart-dot" cx="${p.x.toFixed(1)}" cy="${p.y.toFixed(1)}" r="3" fill="${color}" stroke="var(--surface-2)" stroke-width="1.5"${clipAttr}><title>${esc(p.l)}: ${fmtNum(p.v)}</title></circle>`;
+    }
+  }
+
+  // Y-label
+  if (yLabel) {
+    svg += `<text class="chart-axis-label" x="4" y="${(padTop + plotH / 2).toFixed(1)}" transform="rotate(-90 4 ${(padTop + plotH / 2).toFixed(1)})" text-anchor="middle" fill="var(--text-secondary)" font-size="10" font-family="var(--font-ui)">${esc(yLabel)}</text>`;
+  }
+
+  svg += `</svg>`;
+  return svg;
+}
+
+// ─── 3. barChart ────────────────────────────────────────────────
+
+export function barChart(data, options = {}) {
+  if (!Array.isArray(data) || data.length === 0) return '';
+
+  const {
+    maxWidth = 480,
+    barHeight = 28,
+    gap = 8,
+    showValues = true,
+    animate = true,
+  } = options;
+
+  const maxVal = Math.max(...data.map(d => d.value), 1);
+
+  const rows = data.map((d, i) => {
+    const pct = clamp((d.value / maxVal) * 100, 0, 100);
+    const barColor = d.color || 'var(--accent)';
+    const transition = animate ? `transition: width 0.6s var(--ease-out) ${i * 0.06}s;` : '';
+
+    return `<div class="bar-row" style="display:flex;align-items:center;gap:8px;height:${barHeight}px;margin-bottom:${gap}px;">` +
+      `<span class="bar-label" style="min-width:80px;font-size:var(--text-sm);color:var(--text-secondary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-ui);" title="${esc(d.label)}">${esc(d.label)}</span>` +
+      `<div class="bar-track" role="progressbar" aria-valuenow="${d.value}" aria-valuemin="0" aria-valuemax="${maxVal}" aria-label="${esc(d.label)}: ${d.value}" style="flex:1;height:100%;background:var(--surface-4);border-radius:var(--radius-xs);overflow:hidden;position:relative;">` +
+        `<div class="bar-fill" style="width:${pct.toFixed(1)}%;height:100%;background:${barColor};border-radius:var(--radius-xs);${transition}"></div>` +
+      `</div>` +
+      (showValues
+        ? `<span class="bar-value" style="min-width:40px;font-size:var(--text-sm);color:var(--text-primary);font-variant-numeric:tabular-nums;font-family:var(--font-mono);text-align:right;">${fmtNum(d.value)}</span>`
+        : '') +
+    `</div>`;
+  }).join('');
+
+  return `<div class="bar-chart" style="max-width:${maxWidth}px;width:100%;" role="img" aria-label="Bar chart — ${data.length} items">${rows}</div>`;
+}
+
+// ─── 4. donutChart ──────────────────────────────────────────────
+
+export function donutChart(segments, options = {}) {
+  if (!Array.isArray(segments) || segments.length === 0) return '';
+
+  const {
+    size = 160,
+    strokeWidth = 14,
+    centerLabel = '',
+    centerSub = '',
+    animate = true,
+  } = options;
+
+  const total = segments.reduce((s, d) => s + d.value, 0);
+  if (total <= 0) return '';
+
+  const r = (size - strokeWidth) / 2;
+  const cx = size / 2;
+  const cy = size / 2;
+  const circumference = 2 * Math.PI * r;
+
+  // Build arcs
+  let offsetSoFar = 0;
+  const arcs = segments.map((seg, i) => {
+    const frac = seg.value / total;
+    const dash = frac * circumference;
+    const gap = circumference - dash;
+    const offset = -offsetSoFar + circumference * 0.25; // start at top
+
+    const animAttr = animate
+      ? `<animate attributeName="stroke-dashoffset" from="${circumference + circumference * 0.25}" to="${offset.toFixed(2)}" dur="0.7s" fill="freeze" calcMode="spline" keySplines="0.16 1 0.3 1" begin="${(i * 0.08).toFixed(2)}s"/>`
+      : '';
+
+    const arc = `<circle class="donut-arc" cx="${cx}" cy="${cy}" r="${r.toFixed(1)}" fill="none" stroke="${seg.color || 'var(--accent)'}" stroke-width="${strokeWidth}" stroke-dasharray="${dash.toFixed(2)} ${gap.toFixed(2)}" stroke-dashoffset="${offset.toFixed(2)}" stroke-linecap="round"><title>${esc(seg.label)}: ${seg.value} (${(frac * 100).toFixed(1)}%)</title>${animAttr}</circle>`;
+
+    offsetSoFar += dash;
+    return arc;
+  });
+
+  let svg = `<svg class="donut-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" width="${size}" height="${size}" role="img" aria-label="Donut chart — ${segments.map(s => esc(s.label) + ': ' + s.value).join(', ')}">`;
+
+  // Track background
+  svg += `<circle class="donut-track" cx="${cx}" cy="${cy}" r="${r.toFixed(1)}" fill="none" stroke="var(--surface-4)" stroke-width="${strokeWidth}"/>`;
+
+  // Arcs
+  svg += arcs.join('');
+
+  // Center label
+  if (centerLabel) {
+    svg += `<text class="donut-label" x="${cx}" y="${centerSub ? cy - 2 : cy}" text-anchor="middle" dominant-baseline="central" fill="var(--text-primary)" font-size="22" font-weight="700" font-family="var(--font-heading)">${esc(centerLabel)}</text>`;
+  }
+  if (centerSub) {
+    svg += `<text class="donut-label" x="${cx}" y="${cy + 16}" text-anchor="middle" dominant-baseline="central" fill="var(--text-muted)" font-size="10" font-family="var(--font-ui)">${esc(centerSub)}</text>`;
+  }
+
+  svg += `</svg>`;
+
+  // Legend
+  const legend = segments.map(seg => {
+    const pct = ((seg.value / total) * 100).toFixed(0);
+    return `<span style="display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-ui);">` +
+      `<span style="width:8px;height:8px;border-radius:50%;background:${seg.color || 'var(--accent)'};flex-shrink:0;"></span>` +
+      `${esc(seg.label)} ${pct}%</span>`;
+  }).join('');
+
+  return `<div style="display:inline-flex;flex-direction:column;align-items:center;gap:8px;">${svg}<div style="display:flex;flex-wrap:wrap;justify-content:center;">${legend}</div></div>`;
+}
+
+// ─── 5. heatmap ─────────────────────────────────────────────────
+
+export function heatmap(data, options = {}) {
+  if (!Array.isArray(data)) return '';
+
+  const {
+    weeks = 12,
+    cellSize = 14,
+    gap = 3,
+    colors = null,
+  } = options;
+
+  const intensityColors = colors || [
+    'transparent',
+    'rgba(99,102,241,0.15)',
+    'rgba(99,102,241,0.30)',
+    'rgba(99,102,241,0.55)',
+    'rgba(99,102,241,0.85)',
+  ];
+
+  // Build lookup
+  const lookup = new Map();
+  let maxCount = 0;
+  data.forEach(d => {
+    lookup.set(d.date, d.count);
+    if (d.count > maxCount) maxCount = d.count;
+  });
+
+  function intensity(count) {
+    if (!count || count <= 0) return 0;
+    if (maxCount === 0) return 0;
+    const ratio = count / maxCount;
+    if (ratio <= 0.25) return 1;
+    if (ratio <= 0.50) return 2;
+    if (ratio <= 0.75) return 3;
+    return 4;
+  }
+
+  // Build grid: work backwards from today
+  const today = new Date();
+  // Find the most recent Sunday (start-of-week for grid alignment)
+  const endDate = new Date(today);
+  endDate.setDate(endDate.getDate() + (6 - endDate.getDay())); // end on Saturday
+
+  const startDate = new Date(endDate);
+  startDate.setDate(startDate.getDate() - (weeks * 7 - 1));
+  // Align to Monday
+  startDate.setDate(startDate.getDate() - ((startDate.getDay() + 6) % 7));
+
+  const dayLabels = ['L', '', 'X', '', 'V', '', 'D'];
+  const labelW = 18;
+  const svgW = labelW + weeks * (cellSize + gap);
+  const svgH = 7 * (cellSize + gap);
+
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" width="${svgW}" height="${svgH}" role="img" aria-label="Activity heatmap — ${weeks} weeks">`;
+
+  // Day labels
+  for (let row = 0; row < 7; row++) {
+    if (dayLabels[row]) {
+      svg += `<text x="0" y="${row * (cellSize + gap) + cellSize - 2}" fill="var(--text-muted)" font-size="9" font-family="var(--font-ui)">${dayLabels[row]}</text>`;
+    }
+  }
+
+  // Cells
+  const cursor = new Date(startDate);
+  for (let w = 0; w < weeks; w++) {
+    for (let d = 0; d < 7; d++) {
+      const dateStr = cursor.toISOString().slice(0, 10);
+      const count = lookup.get(dateStr) || 0;
+      const level = intensity(count);
+      const x = labelW + w * (cellSize + gap);
+      const y = d * (cellSize + gap);
+      const fillColor = intensityColors[level];
+      const border = level === 0 ? ' stroke="var(--border)" stroke-width="1"' : '';
+      svg += `<rect class="heatmap-cell" x="${x}" y="${y}" width="${cellSize}" height="${cellSize}" rx="2" fill="${fillColor}"${border}><title>${dateStr}: ${count}</title></rect>`;
+      cursor.setDate(cursor.getDate() + 1);
+    }
+  }
+
+  svg += `</svg>`;
+  return svg;
+}
+
+// ─── 6. dependencyGraph ─────────────────────────────────────────
+
+export function dependencyGraph(tasks, options = {}) {
+  if (!Array.isArray(tasks) || tasks.length === 0) return '';
+
+  // Only render if at least one task has dependencies
+  const hasDeps = tasks.some(t => t.dependsOn && t.dependsOn.length > 0);
+  if (!hasDeps) return '';
+
+  const {
+    nodeWidth = 140,
+    nodeHeight = 36,
+    levelGap = 60,
+    rowGap = 16,
+  } = options;
+
+  const statusColors = {
+    completed: 'var(--success)',
+    in_progress: 'var(--accent)',
+    blocked: 'var(--danger)',
+    pending: 'var(--text-muted)',
+  };
+
+  // Topological levels
+  const levels = topoSort(tasks);
+  const taskMap = new Map();
+  tasks.forEach(t => taskMap.set(t.id, t));
+
+  // Group tasks by level
+  const byLevel = new Map();
+  tasks.forEach(t => {
+    const lv = levels.get(t.id) || 0;
+    if (!byLevel.has(lv)) byLevel.set(lv, []);
+    byLevel.get(lv).push(t);
+  });
+
+  const maxLevel = Math.max(...byLevel.keys(), 0);
+  const maxRowCount = Math.max(...[...byLevel.values()].map(a => a.length), 1);
+
+  const colWidth = nodeWidth + levelGap;
+  const rowHeight = nodeHeight + rowGap;
+  const svgW = (maxLevel + 1) * colWidth + levelGap;
+  const svgH = maxRowCount * rowHeight + rowGap;
+
+  // Compute positions
+  const positions = new Map();
+  for (let lv = 0; lv <= maxLevel; lv++) {
+    const group = byLevel.get(lv) || [];
+    const totalH = group.length * rowHeight;
+    const startY = (svgH - totalH) / 2;
+    group.forEach((t, idx) => {
+      positions.set(t.id, {
+        x: levelGap / 2 + lv * colWidth,
+        y: startY + idx * rowHeight,
+      });
+    });
+  }
+
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svgW} ${svgH}" width="${svgW}" height="${svgH}" role="img" aria-label="Dependency graph — ${tasks.length} tasks">`;
+
+  // Draw edges first (behind nodes)
+  tasks.forEach(t => {
+    if (!t.dependsOn) return;
+    const target = positions.get(t.id);
+    if (!target) return;
+    t.dependsOn.forEach(depId => {
+      const source = positions.get(depId);
+      if (!source) return;
+      const x1 = source.x + nodeWidth;
+      const y1 = source.y + nodeHeight / 2;
+      const x2 = target.x;
+      const y2 = target.y + nodeHeight / 2;
+      const cpx = (x1 + x2) / 2;
+      svg += `<path d="M${x1},${y1} Q${cpx},${y1} ${cpx},${(y1 + y2) / 2} Q${cpx},${y2} ${x2},${y2}" fill="none" stroke="var(--border-strong)" stroke-width="1.5" stroke-linecap="round"/>`;
+      // Arrow
+      svg += `<polygon points="${x2},${y2} ${x2 - 5},${y2 - 3} ${x2 - 5},${y2 + 3}" fill="var(--border-strong)"/>`;
+    });
+  });
+
+  // Draw nodes
+  tasks.forEach(t => {
+    const pos = positions.get(t.id);
+    if (!pos) return;
+    const col = statusColors[t.status] || 'var(--text-muted)';
+    const truncTitle = t.title.length > 16 ? t.title.slice(0, 15) + '\u2026' : t.title;
+
+    svg += `<rect x="${pos.x}" y="${pos.y}" width="${nodeWidth}" height="${nodeHeight}" rx="6" fill="var(--surface-2)" stroke="${col}" stroke-width="1.5"/>`;
+    svg += `<text x="${pos.x + nodeWidth / 2}" y="${pos.y + nodeHeight / 2 + 1}" text-anchor="middle" dominant-baseline="central" fill="var(--text-primary)" font-size="11" font-family="var(--font-ui)"><title>${esc(t.title)}</title>${esc(truncTitle)}</text>`;
+    // Status dot
+    svg += `<circle cx="${pos.x + 10}" cy="${pos.y + nodeHeight / 2}" r="3" fill="${col}"/>`;
+  });
+
+  svg += `</svg>`;
+  return svg;
+}