/* ============================================================
charts.jsx — recharts visualisations (light theme)
============================================================ */
const {
ComposedChart, Line, BarChart, Bar, Cell, XAxis, YAxis,
CartesianGrid, Tooltip, ResponsiveContainer, ReferenceArea, ReferenceLine, LabelList,
} = Recharts;
const CC = window.COLORS;
const { parseTs: pTs, fmtClock: clock, fmt: nfmt, fmtSigned: sfmt } = window;
/* ---------- legend swatch ---------- */
function LegendItem({ color, label, dash }) {
return (
{label}
);
}
/* ---------- timeseries tooltip ---------- */
function TSTooltip({ active, payload, label }) {
if (!active || !payload || !payload.length) return null;
const order = { actual: "실측", h1: "+10분", h2: "+20분", h3: "+30분" };
return (
{clock(label)}
{payload.filter((p) => p.value != null).map((p) => (
{order[p.dataKey] || p.dataKey}
{nfmt(p.value)}
))}
);
}
/* ============================================================
Main N₂O timeseries — ComposedChart
============================================================ */
function TimeSeriesChart({ chartData, predictions, height = 340 }) {
if (!chartData || !chartData.length) return null;
const hist = chartData.map((r) => ({ ts: pTs(r.time), actual: r.n2o, is_aerobic: r.is_aerobic, cusum_alert: r.cusum_alert }));
const lastTs = hist[hist.length - 1].ts;
const anchor = hist[hist.length - 1].actual;
hist[hist.length - 1].h1 = anchor;
hist[hist.length - 1].h2 = anchor;
hist[hist.length - 1].h3 = anchor;
const future = (predictions || []).map((p) => {
const o = { ts: lastTs + p.minutes_ahead * 60 * 1000 };
o[`h${p.horizon}`] = p.predicted_n2o;
return o;
});
const data = [...hist, ...future];
const STEP = 10 * 60 * 1000;
const spans = [];
let runStart = null;
for (let i = 0; i < hist.length; i++) {
const an = hist[i].is_aerobic === 0;
if (an && runStart === null) runStart = hist[i].ts;
if ((!an || i === hist.length - 1) && runStart !== null) {
const end = an ? hist[i].ts : hist[i - 1].ts;
spans.push([runStart, end + STEP]);
runStart = null;
}
}
const alerts = hist.filter((h) => h.cusum_alert).map((h) => h.ts);
const minTs = hist[0].ts;
const maxTs = lastTs + 35 * 60 * 1000;
const ticks = [];
for (let i = 0; i <= 6; i++) ticks.push(Math.round(minTs + ((maxTs - minTs) * i) / 6));
const maxY = Math.max(...hist.map((h) => h.actual), ...future.map((f) => f.h1 || f.h2 || f.h3 || 0));
return (
혐기 구간
CUSUM 경보
{spans.map((s, i) => (
))}
{alerts.map((a, i) => (
))}
} />
);
}
/* ============================================================
DO scenario bar chart
============================================================ */
function DOTooltip({ active, payload }) {
if (!active || !payload || !payload.length) return null;
const d = payload[0].payload;
return (
DO {sfmt(d.do_change, 1)} g O₂/m³
최적 DO {nfmt(d.optimized_do, 2)}
예측 N₂O {nfmt(d.pred_n2o)}
Δ 0 ? CC.red : CC.muted }}>{sfmt(d.delta, 3)}
);
}
function DOScenarioChart({ scenarios, bestChange, height = 230 }) {
if (!scenarios || !scenarios.length) return null;
const data = scenarios.map((s) => ({ ...s, label: sfmt(s.do_change, 1) }));
const colorFor = (s) => (s.do_change === bestChange ? CC.green : s.do_change === 0 ? "#aab4ae" : "#d3dad6");
return (
} />
{data.map((s, i) => | )}
nfmt(v)} style={{ fill: CC.body, fontSize: 10, fontWeight: 600 }} />
);
}
/* ============================================================
R² bar chart (model performance)
============================================================ */
function R2BarChart({ metrics, height = 200 }) {
const rows = (metrics || []).filter((m) => m.horizon !== "overall");
const data = rows.map((m) => ({ name: `+${m.minutes_ahead}분`, R2: m.R2 }));
const colors = [CC.h1, CC.h2, CC.h3];
return (
nfmt(v, 4)}
contentStyle={{ background: "#fff", border: "none", borderRadius: 14, fontSize: 12, boxShadow: "0 10px 30px -10px rgba(20,40,33,0.25)" }} />
{data.map((d, i) => | )}
nfmt(v, 3)} style={{ fill: CC.ink, fontSize: 11, fontWeight: 700 }} />
);
}
Object.assign(window, { TimeSeriesChart, DOScenarioChart, R2BarChart, LegendItem });