// Hand-built SVG chart components for INDISA
// All charts respect a single primary color with semantic accents.
const { useState, useEffect, useMemo, useRef } = React;
// ----- Helpers -----
function nice(n, dec = 1) {
if (n == null || n === "") return "—";
// Accept numeric strings; if not coercible, return original
const num = typeof n === "number" ? n : Number(n);
if (isNaN(num)) return String(n);
if (Math.abs(num) >= 1_000_000) return (num / 1_000_000).toFixed(dec) + "M";
if (Math.abs(num) >= 1_000) return (num / 1_000).toFixed(dec) + "k";
return num.toFixed(dec).replace(/\.0$/, "");
}
window.nice = nice;
// ===== Sparkline =====
function Sparkline({ data, width = 80, height = 28, color = "var(--accent)", fill = true }) {
const path = useMemo(() => {
if (!data || data.length === 0) return { line: "", area: "" };
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const stepX = width / (data.length - 1);
const pts = data.map((v, i) => [i * stepX, height - ((v - min) / range) * (height - 4) - 2]);
const line = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
const area = line + ` L ${width},${height} L 0,${height} Z`;
return { line, area };
}, [data, width, height]);
return (
);
}
// ===== Line / Area chart =====
function LineChart({ series, height = 220, labels = [], colors = ["var(--accent)", "var(--info)", "var(--warning)"], showAxis = true, area = true }) {
const ref = useRef(null);
const [w, setW] = useState(640);
const [hover, setHover] = useState(null);
useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(entries => setW(entries[0].contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const pad = { t: 14, r: 14, b: 22, l: 36 };
const inW = w - pad.l - pad.r;
const inH = height - pad.t - pad.b;
const all = series.flatMap(s => s.data);
const max = Math.max(...all, 1);
const min = Math.min(...all, 0);
const range = max - min || 1;
const xs = labels.length ? labels : Array.from({length: series[0].data.length}, (_, i) => i + 1);
const stepX = inW / Math.max(1, xs.length - 1);
// Y grid
const ticks = 4;
const tickVals = Array.from({length: ticks + 1}, (_, i) => min + (range * i) / ticks);
return (
{hover && (
{xs[hover.i]}
{series.map((s, si) => (
{nice(s.data[hover.i], 1)}
{s.name}
))}
)}
);
}
// ===== Stacked Bar Chart =====
function StackedBarChart({ data, keys, colors, height = 200, labels }) {
const ref = useRef(null);
const [w, setW] = useState(400);
useEffect(() => {
if (!ref.current) return;
const ro = new ResizeObserver(e => setW(e[0].contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const pad = { t: 10, r: 10, b: 22, l: 30 };
const inW = w - pad.l - pad.r;
const inH = height - pad.t - pad.b;
const totals = data.map(d => keys.reduce((s, k) => s + (d[k] || 0), 0));
const max = Math.max(...totals, 1);
const barW = inW / data.length * 0.62;
const gap = inW / data.length;
return (
);
}
// ===== Donut chart =====
function DonutChart({ data, size = 180, thickness = 22, center }) {
const total = data.reduce((s, d) => s + d.value, 0);
const r = size/2 - thickness/2 - 4;
const cx = size/2, cy = size/2;
let acc = 0;
return (
);
}
// ===== Gauge =====
function GaugeChart({ value, target = 100, size = 180, label, unit = "%" }) {
const pct = Math.min(1, Math.max(0, value / target));
const r = size/2 - 14;
const cx = size/2, cy = size/2 + 16;
const start = Math.PI; // left
const end = 2 * Math.PI; // right (top arc)
const arc = (a) => `${cx + r * Math.cos(a)},${cy + r * Math.sin(a)}`;
const bgPath = `M ${arc(start)} A ${r} ${r} 0 0 1 ${arc(end)}`;
const fillAngle = start + (end - start) * pct;
const fillPath = `M ${arc(start)} A ${r} ${r} 0 0 1 ${arc(fillAngle)}`;
const color = pct >= 0.85 ? "var(--positive)" : pct >= 0.65 ? "var(--accent)" : pct >= 0.4 ? "var(--warning)" : "var(--danger)";
return (
{nice(value, 1)}{unit}
{label} · target {nice(target,0)}{unit}
);
}
// ===== Radar chart =====
function RadarChart({ axes, series, size = 260 }) {
const cx = size/2, cy = size/2;
const r = size/2 - 28;
const n = axes.length;
const angle = (i) => -Math.PI/2 + (i * 2 * Math.PI) / n;
const point = (i, v) => [cx + Math.cos(angle(i)) * r * v, cy + Math.sin(angle(i)) * r * v];
return (
);
}
// ===== Heatmap (12 months x N rows) =====
function Heatmap({ rows, months = ["J","F","M","A","M","J","J","A","S","O","N","D"], scale = "lime" }) {
const max = Math.max(...rows.flatMap(r => r.values), 1);
const min = Math.min(...rows.flatMap(r => r.values), 0);
const range = max - min || 1;
const color = (v) => {
const t = (v - min)/range;
if (scale === "lime") return `oklch(${0.18 + t * 0.55} ${0.10 + t * 0.18} 120 / ${0.25 + t * 0.75})`;
return `oklch(${0.20 + t * 0.5} ${0.05 + t * 0.12} 200 / ${0.25 + t * 0.75})`;
};
return (
{months.map((m, i) =>
{m}
)}
{rows.map((r, ri) => (
{r.label}
{r.values.map((v, i) => (
))}
))}
);
}
// ===== Bullet KPI bar (target marker) =====
function BulletBar({ value, target, max, color = "var(--accent)" }) {
const m = max || Math.max(value, target) * 1.2;
return (
);
}
// Controlled number input that buffers typing locally but syncs to props.value when it changes externally
function NumCell({ value, onCommit, className = "cell-edit mono", style = {}, step = "0.1", min, readOnly, ...rest }) {
const [local, setLocal] = useState(value == null ? "" : String(value));
const focused = useRef(false);
useEffect(() => {
if (!focused.current) setLocal(value == null ? "" : String(value));
}, [value]);
if (readOnly) {
return {value == null ? "—" : value};
}
return (
{ focused.current = true; }}
onChange={e => setLocal(e.target.value)}
onBlur={() => {
focused.current = false;
const n = parseFloat(local);
if (!isNaN(n)) onCommit(n);
else setLocal(value == null ? "" : String(value));
}}
onKeyDown={e => { if (e.key === "Enter") e.currentTarget.blur(); }}
{...rest}
/>
);
}
// Controlled text input with same buffering behavior
function TextCell({ value, onCommit, className = "cell-edit", style = {}, readOnly, ...rest }) {
const [local, setLocal] = useState(value || "");
const focused = useRef(false);
useEffect(() => {
if (!focused.current) setLocal(value || "");
}, [value]);
if (readOnly) {
return {value || "—"};
}
return (
{ focused.current = true; }}
onChange={e => setLocal(e.target.value)}
onBlur={() => { focused.current = false; if (local !== value) onCommit(local); }}
onKeyDown={e => { if (e.key === "Enter") e.currentTarget.blur(); }}
{...rest}
/>
);
}
Object.assign(window, { Sparkline, LineChart, StackedBarChart, DonutChart, GaugeChart, RadarChart, Heatmap, BulletBar, NumCell, TextCell });