// charts.jsx — custom SVG visualizations for Atlas const { useMemo: _useMemo, useState: _useState } = React; // Sparkline / area chart function Sparkline({ data, w = 320, h = 64, accent = false, fill = true }) { const max = Math.max(...data), min = Math.min(...data); const pad = 2; const dx = (w - pad * 2) / (data.length - 1); const sy = v => h - pad - ((v - min) / (max - min || 1)) * (h - pad * 2); const pts = data.map((v, i) => `${pad + i * dx},${sy(v)}`).join(' '); const fillPts = `${pad},${h-pad} ${pts} ${w-pad},${h-pad}`; const stroke = accent ? 'var(--accent)' : 'var(--ink-2)'; const fillC = accent ? 'var(--accent-soft)' : 'var(--bg-inset)'; return ( {fill && } ); } // Bar chart, horizontal function HBar({ rows, w = 480, rowH = 28, max, accent = (i) => false, label = (r) => r.label, value = (r) => r.value, fmt = (v) => v }) { const M = max || Math.max(...rows.map(value)); const labelW = 160; const barW = w - labelW - 70; return ( {rows.map((r, i) => { const v = value(r); const len = (v / M) * barW; const y = i * rowH + 4; return ( {label(r)} {fmt(v)} ); })} ); } // Adoption ribbon: large area chart over time with annotations function AdoptionRibbon({ data, w = 880, h = 220, total = 98 }) { const pad = { l: 40, r: 24, t: 28, b: 36 }; const ww = w - pad.l - pad.r, hh = h - pad.t - pad.b; const max = total; const dx = ww / (data.length - 1); const sy = v => pad.t + hh - (v / max) * hh; const sx = i => pad.l + i * dx; const pts = data.map((v, i) => `${sx(i)},${sy(v)}`).join(' '); const fillPts = `${pad.l},${pad.t + hh} ${pts} ${pad.l + ww},${pad.t + hh}`; const last = data[data.length - 1]; const first = data[0]; return ( {/* gridlines */} {[0, .25, .5, .75, 1].map((g, i) => ( {Math.round(max * g)} ))} {/* fill */} {/* dots */} {/* x labels */} {data.map((v, i) => { if (i % 3 !== 0 && i !== data.length - 1) return null; return W{i + 1}; })} {/* baseline marker */} baseline {first} ); } // Workflow Strands — novel viz // Stages laid out vertically as columns; each workflow is a strand passing through its stages. // Strand thickness ~ sessions; color ~ rank (best/good/waste). function WorkflowStrands({ flows, w = 880, h = 360, onHover }) { const stages = ['Architecture', 'Code gen', 'Refactor', 'Debug', 'Test gen', 'PR review', 'SQL', 'Verify', 'Merge', 'Done', 'Abandon']; // Use only stages actually appearing const used = Array.from(new Set(flows.flatMap(f => f.stages))); // Order them in a sensible flow const order = ['Architecture', 'Code gen', 'Refactor', 'Debug', 'SQL', 'Test gen', 'PR review', 'Verify', 'Merge', 'Done', 'Abandon'] .filter(s => used.includes(s)); const pad = { l: 24, r: 24, t: 36, b: 60 }; const ww = w - pad.l - pad.r, hh = h - pad.t - pad.b; const colW = ww / (order.length - 1 || 1); const stageX = order.reduce((m, s, i) => (m[s] = pad.l + i * colW, m), {}); // Map each flow to a vertical track const ranked = flows.slice().sort((a,b) => b.sessions - a.sessions); const trackH = hh / ranked.length; const colorFor = (rank) => rank === 'best' ? 'var(--accent)' : rank === 'good' ? 'var(--cat-2)' : 'var(--ink-3)'; const strokeFor = (rank) => rank === 'waste' ? '#a23a2a' : (rank === 'best' ? 'var(--accent)' : 'var(--cat-2)'); return ( {/* stage columns */} {order.map((s, i) => ( {s} ))} {/* strands */} {ranked.map((f, i) => { const cy = pad.t + (i + 0.5) * trackH; const thick = 4 + Math.sqrt(f.sessions) / 6; // Build a smooth path through stage X positions, with a slight wave const xs = f.stages.map(s => stageX[s]); // For repeated stages, offset Y a bit const seen = {}; const pts = f.stages.map((s, k) => { seen[s] = (seen[s] || 0); const off = seen[s] * 12; seen[s]++; return [stageX[s], cy + (k % 2 === 0 ? -off : off)]; }); // Build a smooth path using cubic bezier between consecutive points let d = `M ${pts[0][0]} ${pts[0][1]}`; for (let k = 1; k < pts.length; k++) { const [x0, y0] = pts[k-1], [x1, y1] = pts[k]; const cx = (x0 + x1) / 2; d += ` C ${cx} ${y0}, ${cx} ${y1}, ${x1} ${y1}`; } const col = strokeFor(f.rank); return ( onHover?.(f, e)} onMouseMove={(e) => onHover?.(f, e)} onMouseLeave={() => onHover?.(null)}> {pts.map(([x, y], k) => ( ))} {/* label at start */} {f.label} {/* sessions at end */} {f.sessions.toLocaleString()}× ); })} ); } // Tool overlap — symmetric matrix function OverlapMatrix({ tools, overlap, w = 360, cell = 44 }) { const N = tools.length; const get = (a, b) => { if (a === b) return 1; const k1 = `${a}-${b}`, k2 = `${b}-${a}`; return overlap[k1] ?? overlap[k2] ?? 0; }; const labelW = 110; const W = labelW + N * cell + 30; const H = labelW + N * cell + 30; return ( {/* column labels */} {tools.map((t, i) => ( {t.name} ))} {/* row labels & cells */} {tools.map((row, ri) => ( {row.name} {tools.map((col, ci) => { const v = get(row.id, col.id); const isDiag = ri === ci; const intensity = Math.max(0.04, Math.min(1, v)); return ( {!isDiag && ( 0.5 ? 'var(--paper)' : 'var(--ink-2)', fontFamily:'var(--mono)'}}> {Math.round(v * 100)} )} ); })} ))} ); } // Layered Efficiency Score ribbon // Show 5 component scores stacked horizontally for a team. function ScoreRibbon({ row, w = 520, h = 86 }) { const components = [ { k: 'delivery', label: 'Delivery' }, { k: 'quality', label: 'Quality' }, { k: 'retention',label: 'Retention' }, { k: 'cost', label: 'Cost eff.' }, { k: 'rework', label: 'Anti-rework' }, ]; const pad = { l: 0, r: 0, t: 16, b: 24 }; const ww = w, hh = h - pad.t - pad.b; const segW = ww / components.length; return ( {components.map((c, i) => { const v = row[c.k]; const fillH = (v / 100) * hh; const x = i * segW; const isWeak = v < 60; return ( {c.label} {v} ); })} ); } // Scatter: tool effectiveness — cost vs merge rate function ToolScatter({ tools, metrics, w = 600, h = 360, accentTool }) { const pad = { l: 50, r: 32, t: 32, b: 44 }; const ww = w - pad.l - pad.r, hh = h - pad.t - pad.b; const xMax = 5, yMin = 0.6, yMax = 0.95; const sx = v => pad.l + (v / xMax) * ww; const sy = v => pad.t + (1 - (v - yMin) / (yMax - yMin)) * hh; const rOf = m => 6 + Math.sqrt(m.users) * 2; return ( {/* gridlines */} {[0.6,0.7,0.8,0.9].map(v => ( {Math.round(v*100)}% ))} {[0,1,2,3,4,5].map(v => ( ${v} ))} {/* axis labels */} Cost per merged PR Merge acceptance {/* "ideal" zone */} High-value zone {/* points */} {metrics.map(m => { const t = tools.find(x => x.id === m.tool); const isAcc = accentTool === m.tool; return ( {t.name} ); })} ); } // Donut for use cases function UseCaseDonut({ rows, w = 280, hole = 0.62 }) { const total = rows.reduce((s, r) => s + r.share, 0); const r = w/2 - 6; const cx = w/2, cy = w/2; let a = -Math.PI/2; const colors = ['var(--cat-1)','var(--cat-2)','var(--cat-3)','var(--cat-4)','var(--cat-5)','var(--cat-6)','var(--ink-3)','var(--ink-4)']; return ( {rows.map((row, i) => { const ang = (row.share / total) * Math.PI * 2; const a0 = a, a1 = a + ang; a = a1; const x0 = cx + r * Math.cos(a0), y0 = cy + r * Math.sin(a0); const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1); const xi0 = cx + r * hole * Math.cos(a0), yi0 = cy + r * hole * Math.sin(a0); const xi1 = cx + r * hole * Math.cos(a1), yi1 = cy + r * hole * Math.sin(a1); const large = ang > Math.PI ? 1 : 0; const d = `M ${x0} ${y0} A ${r} ${r} 0 ${large} 1 ${x1} ${y1} L ${xi1} ${yi1} A ${r*hole} ${r*hole} 0 ${large} 0 ${xi0} ${yi0} Z`; return ; })} {rows[0].share}% {rows[0].name} ); } Object.assign(window, { Sparkline, HBar, AdoptionRibbon, WorkflowStrands, OverlapMatrix, ScoreRibbon, ToolScatter, UseCaseDonut, });