refactor: columnar typed-array chart store

[pedrolamas]

Replaces the chart store's row-object model — a ChartState with a wide-open [index: string]: any holding Readonly<ChartData>[], where every value was a number | Date union — with a closed, explicitly typed state backed by columnar Float64Array buffers.

src/util/chart-buffer.ts is the new core: a capacity-bounded buffer whose live window is [offset, offset + count) over a time array and one column per series. Appends are amortised O(1) with no steady-state allocation, expiry is a binary search that advances offset (was a linear findIndex plus an O(n) splice), and chartBufferSource() hands ECharts subarray() views directly via its keyed-columns dataset.source format — so there is no per-render materialisation. Vue 2 cannot observe typed array writes, so a revision counter is the single reactive change signal; the arrays themselves are markRaw'd so the strict-mode deep watcher does not enumerate every element.

For a typical 8-sensor printer at the default 1200-sample retention this cuts the thermal bucket from ~550–600 KB of row objects and Dates to ~165 KB, and removes essentially all allocation on the 1 Hz chart path.

Bugs fixed along the way

• Series added mid-session were never charted. ECharts derived its dimension names from chartData[0], and initSeries ran once behind an initialized flag, so any sensor or #target/#power/#speed column that first appeared after the initial sample stayed invisible for the rest of the session. Series are now built incrementally from the buffer's column list.
• Thermal history disagreed with live data. initTempStore selected sensors by printer[key] != null while the live path uses printer/getChartableSensors, so history created columns that no series ever rendered and no update ever filled. It also skipped the decimalRound(v, 2) the live path applies. Both now match.
• The Moonraker load chart doubled back after a reconnect. machine.proc_stats runs in the identify bootstrap, so every reconnect appended Moonraker's ~30 min backlog behind the samples already in the buffer, breaking the monotonic ordering dropExpired assumes. The array form is now treated as a history load and replaces the bucket in a single commit.

Thermal history lead-in

An intermediate commit on this branch (d749ae94) removed the lead-in padding from the history load, reasoning that because the x-axis window is pinned to the retention regardless, repeating the oldest sample bought no axis stability. That was wrong, and its commit message still asserts it — spanning the retention regardless is exactly why the padding matters. Against a freshly-started Moonraker, with only a few minutes of backlog, the chart drew a stub in the corner of a full-width window and appeared frozen until the retention filled. Bisected and confirmed against a live instance.

buildThermalHistoryBuffer again holds each sensor's oldest reading across the unfilled part of the window. The column-major load introduced by that commit is unaffected — one fill per column rather than the old per-field array spread.

Also

• src/store/charts/thermal-columns.ts centralises the <sensor>#<sub> column convention that was duplicated across six files.
• src/util/chart-tooltip.ts centralises the positional param.value lookup that keyed columns require, shared by all three formatters. Its param type is derived from echarts' own DefaultLabelFormatterCallbackParams rather than hand-declared.
• smoothChartData becomes smoothChartSource, operating on typed array views and taking a ChartDataSource — it only ever needed the source and a count — so the util no longer depends on the store types. Unsmoothed columns pass through as views.
• ChartBuffer.columns is a Map, not a plain object: column names are runtime sensor ids, and key in columns was true for constructor, toString and every other Object.prototype member, so a sensor with such a name silently lost its data.
• The live notify_proc_stat_update path and the backlog load share moonrakerChartSample, so the cpu_usage bound, the seconds-to-ms conversion and the rounding cannot drift between them.
• setInitCharts no longer Object.assigns an arbitrary Moonraker DB document onto store state — only selectedLegends is read.
• Retention for the system, MCU and sensor buckets is now Globals.CHART_SYSTEM_RETENTION rather than a literal repeated in eight places.
• A cleanup pass over the branch: resolveBuffer collapses five pass-through cases to default and merges the duplicated mcu/sensor blocks; setChartEntry drops a retention check resizeChartBuffer already makes; chartBufferRateOfChange hoists a loop-invariant; reallocate NaN-fills only the tail it isn't about to overwrite; ThermalChart probes the column Map directly instead of copying it into a Set each tick.

Testing

chart-buffer, chart-smoothing, thermal-history and moonraker-history have unit specs (460 tests total). Manual verification against a live printer is still worth doing for the reconnect and klippy-restart paths, which unit tests can't reach; the lead-in regression above was found that way, not by the suite.

🤖 Generated with Claude Code

[Copilot]

Pull request overview

Refactors Fluidd’s charting pipeline from row-object ChartData[] into a typed, columnar ChartBuffer backed by Float64Array columns, enabling allocation-free appends/expiry and keyed-column ECharts datasets. This also aligns history generation with the live chart path and fixes reconnect/backlog ordering issues (notably Moonraker proc_stats).

Changes:

• Introduces src/util/chart-buffer.ts and migrates chart state to fixed, explicitly-typed buffers (thermal, moonraker, klipper, memory, diagnostics, plus mcus/sensors maps).
• Switches chart rendering to ECharts “keyed columns” sources, adds shared tooltip helpers, and ports smoothing/history logic to typed-array views.
• Adds unit coverage for the new buffer, smoothing, and history builders.

Reviewed changes

Copilot reviewed 30 out of 31 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/util/chart-tooltip.ts	Adds shared helpers for positional tooltip value/dimension lookup with keyed-column datasets.
src/util/chart-smoothing.ts	Ports smoothing from row objects to typed-array column views sourced from ChartBuffer.
src/util/chart-buffer.ts	New core columnar buffer (append/expiry/source views/ROC helpers) for chart data.
src/util/tests/chart-smoothing.spec.ts	Updates smoothing tests to operate on buffers and column views.
src/util/tests/chart-buffer.spec.ts	Adds unit tests for buffer behavior (append/expiry/resize/source caching/ROC).
src/typings/moonraker.proc_stats.d.ts	Widens moonraker_stats type to support single stat or backlog array.
src/store/server/actions.ts	Treats proc_stats backlog as a replace/init (not append) and rounds load consistently.
src/store/printer/actions.ts	Uses chart retention getter and emits diagnostics samples as {time, values} (NaN gaps).
src/store/charts/types.ts	Replaces open-ended chart state with typed buffers and a ChartEntryPayload union.
src/store/charts/thermal-history.ts	New builder converting Moonraker temp store history into a ChartBuffer.
src/store/charts/thermal-columns.ts	Centralizes <sensor> / <sensor>#<sub> naming and parsing for thermal columns.
src/store/charts/state.ts	Initializes fixed buckets with typed buffers and standardized retentions.
src/store/charts/mutations.ts	Reworks mutations to append to/rescale buffers and to init only persisted legends.
src/store/charts/moonraker-history.ts	New builder converting proc_stats backlog into a ChartBuffer (rounded, ms timestamps).
src/store/charts/getters.ts	Updates base tooltip formatter to use positional tooltip lookups for keyed columns.
src/store/charts/actions.ts	Replaces legacy init logic with typed history-buffer builders (thermal + moonraker).
src/store/charts/tests/thermal-history.spec.ts	Adds unit tests validating thermal history buffer construction and behavior.
src/store/charts/tests/moonraker-history.spec.ts	Adds unit tests validating Moonraker backlog buffer behavior and monotonicity.
src/store/chart_helpers.ts	Migrates chart entry creation to {bucket,id,time,values} and thermal column conventions.
src/globals.ts	Adds Globals.CHART_SYSTEM_RETENTION to remove repeated literals across system charts.
src/components/widgets/thermals/ThermalChart.vue	Migrates thermal chart rendering to buffer-based keyed columns and incremental series creation.
src/components/widgets/thermals/TemperatureTargets.vue	Updates legend toggles to new column naming and uses buffer ROC helper.
src/components/widgets/system/SystemMemoryChart.vue	Updates inline memory chart to use chartBufferSource keyed-column dataset.
src/components/widgets/system/SystemLoadChart.vue	Updates inline system load chart to use chartBufferSource keyed-column dataset.
src/components/widgets/system/MoonrakerLoadChart.vue	Updates inline Moonraker load chart to use chartBufferSource keyed-column dataset.
src/components/widgets/system/McuLoadChart.vue	Updates MCU load inline chart to source from charts.mcus[id] buffer.
src/components/widgets/system/KlipperLoadChart.vue	Updates inline Klipper load chart to use chartBufferSource keyed-column dataset.
src/components/widgets/sensors/SensorChart.vue	Updates sensor inline chart to source from charts.sensors[id] buffer.
src/components/widgets/diagnostics/DiagnosticsCard.vue	Updates diagnostics chart/tooltips to keyed columns and rounds tooltip values consistently.
src/components/ui/AppInlineChart.vue	Changes inline chart data prop to a keyed-column source and updates last-value extraction.
src/components/ui/AppChart.vue	Changes chart data prop to a keyed-column source and simplifies dataset updates.

Suppressed comments (1)

src/util/chart-buffer.ts:191

• chartBufferSource builds source as a normal object and then assigns dynamic keys. If any column name is __proto__ (sensor names are runtime data), source[key] = ... can mutate the object prototype and break ECharts/tooltips. Build source with a null prototype before assigning dynamic keys.

  const source: ChartDataSource = {
    date: time.subarray(offset, offset + count)
  }

  for (const key in columns) {
    source[key] = columns[key].subarray(offset, offset + count)
  }

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated no new comments.

Suppressed comments (2)

src/util/chart-buffer.ts:193

• chartBufferSource assigns source[key] = … for runtime-derived column names. If a column name is __proto__, this mutates the returned object's prototype (e.g. to a Float64Array) and ECharts/key enumeration can start seeing numeric indices via the prototype chain. This is observable JS behavior and can corrupt/slow tooltip/series logic. Build source as a null-prototype dictionary (or define properties) so all column keys are treated as ordinary data keys.

  for (const [key, column] of columns) {
    source[key] = column.subarray(offset, offset + count)
  }

src/store/charts/mutations.ts:54

• setResetChartStore is invoked on reconnect/klippy reset (charts/resetChartStore), but it currently only resets thermal and ready. This leaves other chart buckets (klipper, memory, moonraker, diagnostics, mcus, sensors) carrying stale pre-drop samples into the new session, contradicting the action name/usage and risking mixed timelines after a reconnect. Reset the full charts state while preserving selectedLegends.

  setResetChartStore (state) {
    const { thermal, ready } = defaultState()

    Object.assign(state, {
      thermal,

[Copilot]

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated 1 comment.

Suppressed comments (1)

src/store/charts/thermal-history.ts:90

• PR description says short thermal history is no longer padded and “simply starts where the real data starts”, but buildThermalHistoryBuffer still fills the lead-in with the oldest reading (target.fill(...)), which draws a flat segment that didn’t occur. Either update the PR description to match this behavior, or change the history mapping to leave the lead-in as gaps (NaN) so the chart starts at the first real sample.

    // Hold the oldest reading across the lead-in so a short history still
    // fills the window - the chart's x-axis spans the retention regardless.
    target.fill(decimalRound(values[from], 2), 0, to)

[Copilot]

Pull request overview

Copilot reviewed 30 out of 31 changed files in this pull request and generated no new comments.