trackops 2.0.3 → 2.0.5

package/ui/js/charts.js

@@ -0,0 +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;
+}