/* Panel Power Tools — feature mosaic covering the rest of the chart capabilities */ const tools = [ { id: "downsample", name: "Downsampling", badge: "Per-target", body: "Reduce dense data to fixed intervals (1m / 5m / 15m / 1h / 6h / 1d) with a chosen aggregate — mean, min, max, sum, median, or last. Charts stay fast even on raw recorder data spanning months.", visual: , }, { id: "stepped", name: "Stepped or smooth series", badge: "Per-target", body: "Render every target as a stepped (state-like) or continuous line. Stepped is the right choice for binary sensors, presence, and discrete enums; smooth fits temperature, humidity, and energy.", visual: , }, { id: "mmm", name: "Min / max / mean shading", badge: "Per-target", body: "Show the rolling minimum, maximum, and mean as a shaded envelope around the central line. Immediately reveals variance and outliers without having to scrutinize raw points.", visual: , }, { id: "gaps", name: "Data gap visibility", badge: "Display", body: "Render visible breaks where the recorder didn't report data — with a configurable gap threshold (2h / 6h / 24h). No more straight lines pretending a missing day was a steady state.", visual: , }, { id: "yaxis", name: "Y-axis modes", badge: "Display", body: "Combine series sharing units, give each series its own axis, or split into stacked rows. Switch instantly — the chart re-lays out and anomaly overlays follow.", visual: , }, { id: "correlated", name: "Anomaly correlation", badge: "Investigation", body: "When multiple targets are visible, the panel highlights anomalies that occur on more than one series at the same time — exposing causal patterns the eye would miss.", visual: , }, { id: "windows", name: "Date windows", badge: "Saved baselines", body: 'Name and save any historical period — "Heating baseline", "Before insulation", "Last cold snap" — and bring it back from a tab above the chart. The library that powers comparison-window anomaly detection.', visual: , }, { id: "delta", name: "Delta vs date window", badge: "Comparison", body: "Overlay the difference between the current range and any saved date window — point-by-point. Positive deviations shade above the axis, negative below. The fastest way to see drift.", visual: , }, { id: "export", name: "Spreadsheet download", badge: "Export", body: "Pull everything visible — raw history, downsampled aggregates, anomaly markers, and recorded datapoints — into a spreadsheet for offline analysis or sharing with collaborators.", visual: , }, ]; function PanelPowerTools() { return (
Panel power tools

Everything else the chart can do.

Anomaly detection sits on top of an opinionated, investigation-first chart engine. Downsampling, gap-aware rendering, multi-axis layouts, correlated anomaly highlights, date windows for baseline comparison, and a one-click export. Configured per target, persisted per view.

{tools.map((t) => (
{t.visual}
{t.badge}

{t.name}

{t.body}

))}
); } /* ---------- mini visuals ---------- */ function DownsampleViz() { // top row: raw points (many) bottom row: 5 aggregated bars return ( raw {Array.from({ length: 40 }).map((_, i) => ( ))} 15m · mean {[0, 1, 2, 3, 4, 5, 6].map((i) => { const x = 24 + i * 26; const h = 22 + Math.sin(i * 1.3) * 6; return ( ); })} ); } function SteppedViz() { return ( stepped smooth ); } function MmmViz() { // shaded envelope with center line return ( ); } function GapsViz() { return ( {/* gap */} gap · 4h {/* axis */} ); } function YAxisViz() { // three mini icons showing different layouts return ( {/* combined */} combined {/* unique per series */} unique {/* split rows */} split rows ); } function CorrelatedViz() { // two parallel lines with linked vertical highlight band return ( correlated ); } function WindowsViz() { // tabs at top + chart with ghost baseline return ( Selected Baseline Cold snap {/* chart */} ); } function DeltaViz() { // mirrored bar showing positive deviations above + negative below return ( +Δ −Δ {Array.from({ length: 14 }).map((_, i) => { const x = 26 + i * 13; const d = (Math.sin(i * 0.8) + Math.sin(i * 0.3)) * 14; const h = Math.abs(d); const above = d > 0; return ( ); })} ); } function ExportViz() { return ( {/* spreadsheet grid */} {[0, 1, 2, 3, 4].map((i) => ( ))} {[0, 1, 2].map((i) => ( ))} CSV {/* download arrow */} ); } window.PanelPowerTools = PanelPowerTools;