/* ─── SVG-based Chart Components ─────────────────────────────────── */
/* No Chart.js dependency — pure React SVG for a lightweight bundle. */
const CHART_COLORS = {
ELA: "#06b6d4",
Math: "#f59e0b",
Science: "#f43f5e",
"Spanish Language Arts": "#6366f1",
};
/* ─── Sparkline ──────────────────────────────────────────────────── */
function Sparkline({ values, width = 64, height = 20, color = "var(--teal)" }) {
const filtered = values.filter(v => v != null);
if (filtered.length < 2) return —;
const min = Math.min(...filtered);
const max = Math.max(...filtered);
const range = max - min || 1;
const pts = filtered.map((v, i) => {
const x = (i / (filtered.length - 1)) * (width - 4) + 2;
const y = height - 2 - ((v - min) / range) * (height - 4);
return `${x},${y}`;
});
return (
);
}
/* ─── Line Chart (statewide trends) ──────────────────────────────── */
function LineChart({ datasets, labels, width = 580, height = 260, yLabel = "%" }) {
const pad = { top: 20, right: 20, bottom: 30, left: 50 };
const w = width - pad.left - pad.right;
const h = height - pad.top - pad.bottom;
// Flatten all values to find min/max
const allVals = datasets.flatMap(ds => ds.values.filter(v => v != null));
if (allVals.length === 0) return No data available
;
let yMin = Math.floor(Math.min(...allVals) / 5) * 5;
let yMax = Math.ceil(Math.max(...allVals) / 5) * 5;
if (yMin === yMax) { yMin -= 5; yMax += 5; }
const yRange = yMax - yMin;
const yTicks = [];
for (let v = yMin; v <= yMax; v += Math.max(5, Math.round(yRange / 5 / 5) * 5)) yTicks.push(v);
function toX(i) { return pad.left + (i / Math.max(labels.length - 1, 1)) * w; }
function toY(v) { return pad.top + h - ((v - yMin) / yRange) * h; }
return (
);
}
/* ─── Grouped Bar Chart ──────────────────────────────────────────── */
function GroupedBarChart({ groups, series, width = 580, height = 260, refLine = null }) {
// groups: ["2022","2023","2024","2025"]
// series: [{ label: "ELA", color: "#06b6d4", values: [43.2, 43.7, 44.1, 44.8] }, ...]
// refLine: { value: 44.8, label: "State Avg" }
const pad = { top: 20, right: 20, bottom: 30, left: 50 };
const w = width - pad.left - pad.right;
const h = height - pad.top - pad.bottom;
const allVals = series.flatMap(s => s.values.filter(v => v != null));
if (refLine) allVals.push(refLine.value);
if (allVals.length === 0) return No data
;
let yMax = Math.ceil(Math.max(...allVals) / 10) * 10;
const yRange = yMax;
const yTicks = [];
const step = Math.max(10, Math.round(yMax / 5 / 10) * 10);
for (let v = 0; v <= yMax; v += step) yTicks.push(v);
const nGroups = groups.length;
const nSeries = series.length;
const groupW = w / nGroups;
const barW = Math.min(24, (groupW - 12) / nSeries);
const clusterW = barW * nSeries + (nSeries - 1) * 2;
function toY(v) { return pad.top + h - (v / yRange) * h; }
return (
);
}
/* ─── Horizontal Bar Chart (for district rankings) ────────────────── */
function HBarChart({ items, highlightIdx = null, width = 500, maxHeight = 600 }) {
// items: [{ label, value, subLabel }]
const barH = 28;
const gap = 3;
const pad = { top: 10, right: 60, bottom: 10, left: 180 };
const maxVal = Math.max(...items.map(i => i.value || 0), 1);
const chartH = pad.top + items.length * (barH + gap) + pad.bottom;
const w = width;
const barAreaW = w - pad.left - pad.right;
return (
);
}
/* ─── Histogram ──────────────────────────────────────────────────── */
function Histogram({ values, highlightValue = null, bins = 20, width = 580, height = 220, label = "" }) {
const valid = values.filter(v => v != null);
if (valid.length === 0) return No data
;
const min = 0;
const max = 100;
const binW = (max - min) / bins;
const counts = new Array(bins).fill(0);
valid.forEach(v => {
let b = Math.floor((v - min) / binW);
if (b >= bins) b = bins - 1;
if (b < 0) b = 0;
counts[b]++;
});
const maxCount = Math.max(...counts);
const pad = { top: 20, right: 20, bottom: 30, left: 40 };
const w = width - pad.left - pad.right;
const h = height - pad.top - pad.bottom;
return (
);
}
/* ─── Scatter Plot ───────────────────────────────────────────────── */
function ScatterPlot({ points, highlightKeys = [], width = 580, height = 400, xLabel = "Math %", yLabel = "ELA %" }) {
const pad = { top: 20, right: 20, bottom: 40, left: 50 };
const w = width - pad.left - pad.right;
const h = height - pad.top - pad.bottom;
function toX(v) { return pad.left + (v / 100) * w; }
function toY(v) { return pad.top + h - (v / 100) * h; }
return (
);
}
/* ─── Radar Chart ────────────────────────────────────────────────── */
function RadarChart({ datasets, labels, width = 300, height = 300 }) {
const cx = width / 2;
const cy = height / 2;
const r = Math.min(cx, cy) - 40;
const n = labels.length;
if (n < 3) return null;
function angle(i) { return (Math.PI * 2 * i) / n - Math.PI / 2; }
function toXY(i, v) {
const a = angle(i);
const d = (v / 100) * r;
return { x: cx + d * Math.cos(a), y: cy + d * Math.sin(a) };
}
const rings = [20, 40, 60, 80, 100];
return (
);
}
/* ─── Heatmap (grades × years) ───────────────────────────────────── */
function GradeHeatmap({ schoolData, subject }) {
const grades = ["03", "04", "05", "06", "07", "08", "11"];
const years = ["2022", "2023", "2024", "2025"];
const cellW = 64;
const cellH = 36;
const labelW = 50;
const headerH = 24;
function heatColor(v) {
if (v == null) return "var(--bg4)";
// Red → Yellow → Green
const t = Math.min(Math.max(v / 100, 0), 1);
if (t < 0.35) return `rgba(244,63,94,${0.3 + t * 0.5})`;
if (t < 0.55) return `rgba(245,158,11,${0.3 + (t - 0.35) * 2})`;
return `rgba(16,185,129,${0.3 + (t - 0.55) * 1.2})`;
}
return (
{years.map(y => (
{y}
))}
{grades.map(g => (
Grade {parseInt(g)}
{years.map(yr => {
const v = schoolData?.years?.[yr]?.[subject]?.grades?.[g]?.pct;
return (
{v != null ? v.toFixed(1) : "—"}
);
})}
))}
);
}
/* ─── Progress Bar Inline ────────────────────────────────────────── */
function ProgressBar({ value, max = 100, color = "var(--teal)", width = 80 }) {
const pct = value != null ? Math.min(value / max * 100, 100) : 0;
return (
);
}