@design.estate/dees-catalog 12.5.0 → 13.0.0

package/dist_ts_web/elements/00group-chart/dees-chart-area/realtime-updates.d.ts

@@ -1,6 +1,7 @@
 export interface IRealtimeChartPoint {
     time: number;
-    value: number;
+    /** Omitted for a time point where this series has no reading. */
+    value?: number;
 }
 export interface IRealtimeChartUpdate {
     point: IRealtimeChartPoint;

package/dist_ts_web/elements/00group-chart/dees-chart-area/realtime-updates.js

@@ -52,7 +52,8 @@ export const planRealtimeChartUpdates = (renderedData, canonicalData) => {
             updates.push({ point: canonicalPoint, historicalUpdate: false });
             continue;
         }
-        if (renderedPoint.value !== canonicalPoint.value) {
+        if (renderedPoint.value !== canonicalPoint.value
+            || ('value' in renderedPoint) !== ('value' in canonicalPoint)) {
             updates.push({
                 point: canonicalPoint,
                 historicalUpdate: canonicalPoint.time < renderedLastTime,
@@ -76,4 +77,4 @@ export const planRealtimeChartUpdates = (renderedData, canonicalData) => {
 };
 export const haveSameSeriesLayout = (renderedNames, canonicalNames) => renderedNames.length === canonicalNames.length
     && renderedNames.every((name, index) => name === canonicalNames[index]);
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhbHRpbWUtdXBkYXRlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWNoYXJ0L2RlZXMtY2hhcnQtYXJlYS9yZWFsdGltZS11cGRhdGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCQTs7OztHQUlHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sd0JBQXdCLEdBQUcsQ0FDdEMsWUFBNEMsRUFDNUMsYUFBNkMsRUFDbkIsRUFBRTtJQUM1QixJQUFJLGFBQWEsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7UUFDL0IsT0FBTztZQUNMLG1CQUFtQixFQUFFLFlBQVksQ0FBQyxNQUFNLEtBQUssQ0FBQztZQUM5QyxPQUFPLEVBQUUsRUFBRTtZQUNYLGdCQUFnQixFQUFFLEtBQUs7WUFDdkIsYUFBYSxFQUFFLEtBQUs7U0FDckIsQ0FBQztJQUNKLENBQUM7SUFDRCxJQUFJLFlBQVksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7UUFDOUIsT0FBTztZQUNMLG1CQUFtQixFQUFFLEtBQUs7WUFDMUIsT0FBTyxFQUFFLGFBQWEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztZQUMzRSxnQkFBZ0IsRUFBRSxLQUFLO1lBQ3ZCLGFBQWEsRUFBRSxLQUFLO1NBQ3JCLENBQUM7SUFDSixDQUFDO0lBRUQsTUFBTSxjQUFjLEdBQUcsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNqRixNQUFNLGVBQWUsR0FBRyxJQUFJLEdBQUcsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUs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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVhbHRpbWUtdXBkYXRlcy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWNoYXJ0L2RlZXMtY2hhcnQtYXJlYS9yZWFsdGltZS11cGRhdGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtCQTs7OztHQUlHO0FBQ0gsTUFBTSxDQUFDLE1BQU0sd0JBQXdCLEdBQUcsQ0FDdEMsWUFBNEMsRUFDNUMsYUFBNkMsRUFDbkIsRUFBRTtJQUM1QixJQUFJLGFBQWEsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7UUFDL0IsT0FBTztZQUNMLG1CQUFtQixFQUFFLFlBQVksQ0FBQyxNQUFNLEtBQUssQ0FBQztZQUM5QyxPQUFPLEVBQUUsRUFBRTtZQUNYLGdCQUFnQixFQUFFLEtBQUs7WUFDdkIsYUFBYSxFQUFFLEtBQUs7U0FDckIsQ0FBQztJQUNKLENBQUM7SUFDRCxJQUFJLFlBQVksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFLENBQUM7UUFDOUIsT0FBTztZQUNMLG1CQUFtQixFQUFFLEtBQUs7WUFDMUIsT0FBTyxFQUFFLGFBQWEsQ0FBQyxHQUFHLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLENBQUMsRUFBRSxLQUFLLEVBQUUsZ0JBQWdCLEVBQUUsS0FBSyxFQUFFLENBQUMsQ0FBQztZQUMzRSxnQkFBZ0IsRUFBRSxLQUFLO1lBQ3ZCLGFBQWEsRUFBRSxLQUFLO1NBQ3JCLENBQUM7SUFDSixDQUFDO0lBRUQsTUFBTSxjQUFjLEdBQUcsSUFBSSxHQUFHLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUNqRixNQUFNLGVBQWUsR0FBRyxJQUFJLEdBQUcsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUUs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

package/dist_ts_web/elements/00group-chart/dees-chart-area/template.js

@@ -12,7 +12,8 @@ export const renderChartArea = (component) => {
           <div class="chartContainer">
             <div class="rangeSelectionOverlay" aria-hidden="true"></div>
           </div>
-          ${!component.chartSeries.some(series => series.data.length) ? html `<div class="chartState" role="status">No data for this period</div>` : ''}
+          ${!component.chartSeries.some(series => series.data.some(point => point.y !== null))
+        ? html `<div class="chartState" role="status">No data for this period</div>` : ''}
           ${component.seriesStats.length > 0 && !component.hideLegend ? html `
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html `
@@ -22,7 +23,7 @@ export const renderChartArea = (component) => {
                   ${component.legendStats
         .filter(key => key === 'latest' || key === 'min' || key === 'max' || key === 'avg')
         .map(key => html `
-                      <span class="statsItem">${key} <strong>${component.yAxisFormatter(s[key])}</strong></span>
+                      <span class="statsItem">${key} <strong>${s[key] === null ? '—' : component.yAxisFormatter(s[key])}</strong></span>
                     `)}
                 </div>
               `)}
@@ -31,4 +32,4 @@ export const renderChartArea = (component) => {
         </dees-tile>
       `;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1jaGFydC9kZWVzLWNoYXJ0LWFyZWEvdGVtcGxhdGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RSxPQUFPLDhDQUE4QyxDQUFDO0FBRXRELE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxDQUFDLFNBQXdCLEVBQWtCLEVBQUU7SUFDdEUsT0FBTyxJQUFJLENBQUE7OztxQ0FHb0IsU0FBUyxDQUFDLEtBQUs7K0NBQ0wsU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLGNBQWMsNkJBQTZCLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEVBQUUsV0FBVyxTQUFTLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsV0FBVztpQ0FDbk0sU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLGtCQUFrQixjQUFjLEVBQUU7Ozs7OztZQU1uRyxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBLHFFQUFxRSxDQUFDLENBQUMsQ0FBQyxFQUFFO1lBQzFJLFNBQVMsQ0FBQyxXQUFXLENBQUMsTUFBTSxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQTs7Z0JBRTVELFNBQVMsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFBOzsrREFFWSxDQUFDLENBQUMsS0FBSzs0Q0FDMUIsQ0FBQyxDQUFDLElBQUk7b0JBQzlCLFNBQVMsQ0FBQyxXQUFXO1NBQ3BCLE1BQU0sQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsS0FBSyxRQUFRLElBQUksR0FBRyxLQUFLLEtBQUssSUFBSSxHQUFHLEtBQUssS0FBSyxJQUFJLEdBQUcsS0FBSyxLQUFLLENBQUM7U0FDbEYsR0FBRyxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFBO2dEQUNZLEdBQUcsWUFBWSxTQUFTLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQztxQkFDMUUsQ0FBQzs7ZUFFUCxDQUFDOztXQUVMLENBQUMsQ0FBQyxDQUFDLEVBQUU7O09BRVQsQ0FBQztBQUNSLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1jaGFydC9kZWVzLWNoYXJ0LWFyZWEvdGVtcGxhdGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RSxPQUFPLDhDQUE4QyxDQUFDO0FBRXRELE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxDQUFDLFNBQXdCLEVBQWtCLEVBQUU7SUFDdEUsT0FBTyxJQUFJLENBQUE7OztxQ0FHb0IsU0FBUyxDQUFDLEtBQUs7K0NBQ0wsU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLGNBQWMsNkJBQTZCLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxjQUFjLEVBQUUsV0FBVyxTQUFTLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsV0FBVztpQ0FDbk0sU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsa0JBQWtCLENBQUMsQ0FBQyxDQUFDLGtCQUFrQixjQUFjLEVBQUU7Ozs7OztZQU1uRyxDQUFDLFNBQVMsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQUUsQ0FBQyxLQUFLLENBQUMsQ0FBQyxLQUFLLElBQUksQ0FBQyxDQUFDO1FBQ2xGLENBQUMsQ0FBQyxJQUFJLENBQUEscUVBQXFFLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDaEYsU0FBUyxDQUFDLFdBQVcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFBOztnQkFFNUQsU0FBUyxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUE7OytEQUVZLENBQUMsQ0FBQyxLQUFLOzRDQUMxQixDQUFDLENBQUMsSUFBSTtvQkFDOUIsU0FBUyxDQUFDLFdBQVc7U0FDcEIsTUFBTSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLFFBQVEsSUFBSSxHQUFHLEtBQUssS0FBSyxJQUFJLEdBQUcsS0FBSyxLQUFLLElBQUksR0FBRyxLQUFLLEtBQUssQ0FBQztTQUNsRixHQUFHLENBQUMsR0FBRyxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUE7Z0RBQ1ksR0FBRyxZQUFZLENBQUMsQ0FBQyxHQUFHLENBQUMsS0FBSyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLENBQUM7cUJBQ2xHLENBQUM7O2VBRVAsQ0FBQzs7V0FFTCxDQUFDLENBQUMsQ0FBQyxFQUFFOztPQUVULENBQUM7QUFDUixDQUFDLENBQUMifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "12.5.0",
+  "version": "13.0.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/readme.md

@@ -2152,6 +2152,16 @@ bubbling `range-change` event carries `{ from, to }` as Unix epoch
 milliseconds. Apply that range back through `selectedRange` to keep the
 selection visible; set it to `null` to clear the overlay.
 
+Use `y: null` for an unavailable reading. Its timestamp remains on the time
+axis, and the area line visibly stops until the next numeric reading. Supply
+one null point for each missing sampling interval when the width of an outage
+should reflect its duration. The chart keeps one legend entry per named input
+series. Legend statistics omit null readings; `latest` is unavailable when the
+newest reading is null, while `min`, `max`, and `avg` describe available
+readings in the selected window. An unavailable statistic is displayed as `—`.
+With `realtimeMode=true` and `rollingWindow=3_600_000`, the time axis follows
+the last hour even while the latest reading is unavailable.
+
 ```typescript
 <dees-chart-area
   label="System Usage"
@@ -2162,7 +2172,7 @@ selection visible; set it to `null` to clear the overlay.
       name: 'CPU',
       data: [
         { x: '2025-01-15T03:00:00', y: 25 },
-        { x: '2025-01-15T07:00:00', y: 30 },
+        { x: '2025-01-15T07:00:00', y: null }, // unavailable
         { x: '2025-01-15T11:00:00', y: 20 }
       ]
     }

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '12.5.0',
+  version: '13.0.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -19,7 +19,14 @@ import { getEchartsSeriesColors, hexToRgba, getThemeColors } from '../dees-chart
 
 import { systemFontFamily } from '../../00fonts.js';
 
-import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
+import type {
+  AreaData,
+  IChartApi,
+  ISeriesApi,
+  MouseEventParams,
+  UTCTimestamp,
+  WhitespaceData,
+} from 'lightweight-charts';
 import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
 import '../../00group-layout/dees-tile/dees-tile.js';
 
@@ -27,9 +34,28 @@ export type ChartSeriesConfig = {
   name?: string;
   /** Explicit series color (hex or hsl). Falls back to the shared catalog palette by index. */
   color?: string;
-  data: Array<{ x: any; y: number }>;
+  /** A null reading keeps its timestamp and breaks the drawn area line. */
+  data: Array<{ x: any; y: number | null }>;
 }[];
 
+export interface IChartSeriesStats {
+  name: string;
+  /** Null when the newest sample is unavailable, even if older samples exist. */
+  latest: number | null;
+  min: number | null;
+  max: number | null;
+  avg: number | null;
+  color: string;
+}
+
+type TChartAreaData = AreaData<UTCTimestamp> | WhitespaceData<UTCTimestamp>;
+
+interface IChartRenderedSegment {
+  key: string;
+  logicalIndex: number;
+  data: TChartAreaData[];
+}
+
 export type TChartLegendStat = 'latest' | 'min' | 'max' | 'avg';
 export type TChartPriceLine = 'avg' | 'max';
 
@@ -55,7 +81,7 @@ export class DeesChartArea extends DeesElement {
   accessor chart: IChartApi | null = null;
 
   @state()
-  accessor seriesStats: Array<{ name: string; latest: number; min: number; max: number; avg: number; color: string }> = [];
+  accessor seriesStats: IChartSeriesStats[] = [];
 
   @state()
   accessor isFullPage: boolean = false;
@@ -117,6 +143,9 @@ export class DeesChartArea extends DeesElement {
   private autoScrollTimer: number | null = null;
   private lcBundle: ILightweightChartsBundle | null = null;
   private seriesApis: Map<string, ISeriesApi<any>> = new Map();
+  /** LC's data() omits whitespace; this mirrors the exact points sent to each series API. */
+  private renderedSeriesData: Map<string, IRealtimeChartPoint[]> = new Map();
+  private renderedSegments: IChartRenderedSegment[] = [];
   private priceLines: Map<string, any[]> = new Map();
   private tooltipEl: HTMLDivElement | null = null;
   private crosshairActive = false;
@@ -219,6 +248,8 @@ export class DeesChartArea extends DeesElement {
         console.error('Error destroying chart:', error);
       } finally {
         this.seriesApis.clear();
+        this.renderedSeriesData.clear();
+        this.renderedSegments = [];
         this.priceLines.clear();
       }
     });
@@ -316,15 +347,17 @@ export class DeesChartArea extends DeesElement {
     this.paintRangeOverlay(fromCoordinate, toCoordinate);
   }
 
-  private convertDataToLC(data: Array<{ x: any; y: number }>): Array<{ time: UTCTimestamp; value: number }> {
-    const pointsByTime = new Map<number, { time: UTCTimestamp; value: number }>();
+  private convertDataToLC(data: ChartSeriesConfig[number]['data']): TChartAreaData[] {
+    const pointsByTime = new Map<number, TChartAreaData>();
     for (const point of data) {
       const ms = typeof point.x === 'number' ? point.x : new Date(point.x).getTime();
       const time = Math.floor(ms / 1000);
-      if (!Number.isFinite(time) || !Number.isFinite(point.y)) continue;
+      if (!Number.isFinite(time) || (point.y !== null && !Number.isFinite(point.y))) continue;
       // Lightweight Charts requires unique ordered timestamps. The latest
-      // sample wins when multiple updates land in the same second.
-      pointsByTime.set(time, { time: time as UTCTimestamp, value: point.y });
+      // sample, including an unavailable one, wins within the same second.
+      pointsByTime.set(time, point.y === null
+        ? { time: time as UTCTimestamp }
+        : { time: time as UTCTimestamp, value: point.y });
     }
     return [...pointsByTime.values()]
       .sort((a, b) => (a.time as number) - (b.time as number));
@@ -338,6 +371,45 @@ export class DeesChartArea extends DeesElement {
     return `${index}:${this.getSeriesName(series, index)}`;
   }
 
+  /**
+   * Lightweight Charts joins Area points across whitespace. Render each
+   * uninterrupted numeric run as its own Area series instead. All missing
+   * timestamps stay on the first real series so the time scale keeps them;
+   * there is no synthetic numeric value or extra public legend series.
+   */
+  private getRenderedSegments(chartSeries: ChartSeriesConfig): IChartRenderedSegment[] {
+    const renderedSegments: IChartRenderedSegment[] = [];
+    chartSeries.forEach((series, logicalIndex) => {
+      const points = this.convertDataToLC(series.data);
+      const missingPoints = points.filter((point) => !('value' in point));
+      const numericRuns: TChartAreaData[][] = [];
+      let currentRun: TChartAreaData[] = [];
+      for (const point of points) {
+        if ('value' in point) {
+          currentRun.push(point);
+        } else if (currentRun.length > 0) {
+          numericRuns.push(currentRun);
+          currentRun = [];
+        }
+      }
+      if (currentRun.length > 0) numericRuns.push(currentRun);
+      if (numericRuns.length === 0) numericRuns.push([]);
+
+      const baseKey = this.getSeriesKey(series, logicalIndex);
+      numericRuns.forEach((run, segmentIndex) => {
+        const data = segmentIndex === 0
+          ? [...run, ...missingPoints].sort((left, right) => left.time - right.time)
+          : run;
+        renderedSegments.push({
+          key: segmentIndex === 0 ? baseKey : `${baseKey}#${segmentIndex}`,
+          logicalIndex,
+          data,
+        });
+      });
+    });
+    return renderedSegments;
+  }
+
   private getCanonicalChartSeries(chartSeries: ChartSeriesConfig): ChartSeriesConfig {
     const cutoffTime = Date.now() - this.rollingWindow;
     return chartSeries.map((series) => ({
@@ -348,15 +420,34 @@ export class DeesChartArea extends DeesElement {
         return ms > cutoffTime;
       })).map((point) => ({
         x: (point.time as number) * 1000,
-        y: point.value,
+        y: 'value' in point ? point.value : null,
       })),
     }));
   }
 
-  private getRenderedSeriesData(api: ISeriesApi<any>): IRealtimeChartPoint[] {
-    return api.data()
-      .filter((point): point is { time: UTCTimestamp; value: number } => 'value' in point)
-      .map((point) => ({ time: point.time as number, value: point.value }));
+  private getRenderedSeriesData(segmentKey: string): IRealtimeChartPoint[] {
+    const renderedData = this.renderedSeriesData.get(segmentKey);
+    if (!renderedData) throw new Error(`Missing rendered chart data for ${segmentKey}`);
+    return renderedData;
+  }
+
+  private rememberRenderedSeriesData(segmentKey: string, data: readonly TChartAreaData[]): void {
+    this.renderedSeriesData.set(segmentKey, data
+      .map((point) => 'value' in point
+        ? { time: point.time as number, value: point.value }
+        : { time: point.time as number }));
+  }
+
+  private rememberIncrementalUpdate(segmentKey: string, point: IRealtimeChartPoint): void {
+    const renderedData = this.getRenderedSeriesData(segmentKey);
+    const existingIndex = renderedData.findIndex((entry) => entry.time === point.time);
+    if (existingIndex >= 0) renderedData[existingIndex] = point;
+    else renderedData.push(point);
+  }
+
+  private toLcPoint(point: IRealtimeChartPoint): TChartAreaData {
+    const time = point.time as UTCTimestamp;
+    return point.value === undefined ? { time } : { time, value: point.value };
   }
 
   private colorToRgba(color: string, alpha: number): string {
@@ -423,19 +514,21 @@ export class DeesChartArea extends DeesElement {
       },
     } as any);
 
-    let idx = 0;
-    for (const [, api] of this.seriesApis) {
-      const color = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+    for (const segment of this.renderedSegments) {
+      const api = this.seriesApis.get(segment.key);
+      if (!api) continue;
+      const color = this.resolveSeriesColor(
+        this.chartSeries[segment.logicalIndex], segment.logicalIndex, isDark,
+      );
       api.applyOptions({
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
       });
-      idx++;
     }
   }
 
-  private recreateSeries(chartSeries: ChartSeriesConfig) {
+  private recreateSeries(chartSeries: ChartSeriesConfig, renderedSegments = this.getRenderedSegments(chartSeries)) {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
 
@@ -443,10 +536,13 @@ export class DeesChartArea extends DeesElement {
       this.chart.removeSeries(api);
     }
     this.seriesApis.clear();
+    this.renderedSeriesData.clear();
     this.priceLines.clear();
+    this.renderedSegments = renderedSegments;
 
-    chartSeries.forEach((s, index) => {
-      const color = this.resolveSeriesColor(s, index, isDark);
+    renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       const api = this.chart!.addSeries(this.lcBundle!.AreaSeries, {
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
@@ -459,10 +555,12 @@ export class DeesChartArea extends DeesElement {
         crosshairMarkerRadius: 4,
       });
 
-      api.setData(this.convertDataToLC(s.data));
-      this.updatePriceLines(this.getSeriesKey(s, index), api, s.data, color);
-
-      this.seriesApis.set(this.getSeriesKey(s, index), api);
+      api.setData(segment.data);
+      this.seriesApis.set(segment.key, api);
+      this.rememberRenderedSeriesData(segment.key, segment.data);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color);
+      }
     });
     this.applyYAxisScale(chartSeries);
     this.computeStats(chartSeries);
@@ -477,17 +575,19 @@ export class DeesChartArea extends DeesElement {
 
   private updateSeriesPresentation(chartSeries: ChartSeriesConfig) {
     const isDark = !this.goBright;
-    chartSeries.forEach((series, index) => {
-      const seriesKey = this.getSeriesKey(series, index);
-      const api = this.seriesApis.get(seriesKey);
+    this.renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const api = this.seriesApis.get(segment.key);
       if (!api) return;
-      const color = this.resolveSeriesColor(series, index, isDark);
+      const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       api.applyOptions({
         topColor: this.colorToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color, 0),
         lineColor: color,
       });
-      this.updatePriceLines(seriesKey, api, series.data, color);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color);
+      }
     });
     this.computeStats(chartSeries);
 
@@ -500,7 +600,7 @@ export class DeesChartArea extends DeesElement {
     if (this.yAxisScaling === 'dynamic') {
       maxValue = 1;
       for (const entry of series) for (const point of entry.data) {
-        if (!Number.isFinite(point.y)) continue;
+        if (point.y === null || !Number.isFinite(point.y)) continue;
         minValue = Math.min(minValue, Math.floor(point.y * 1.1));
         maxValue = Math.max(maxValue, Math.ceil(point.y * 1.1));
       }
@@ -533,22 +633,39 @@ export class DeesChartArea extends DeesElement {
     ) return;
 
     const canonicalSeries = this.getCanonicalChartSeries(this.internalChartData);
-    canonicalSeries.forEach((series, index) => {
-      const api = this.seriesApis.get(this.getSeriesKey(series, index));
-      if (api) api.setData(this.convertDataToLC(series.data));
+    const canonicalSegments = this.getRenderedSegments(canonicalSeries);
+    if (!haveSameSeriesLayout(
+      [...this.seriesApis.keys()], canonicalSegments.map((segment) => segment.key),
+    )) {
+      this.clearCrosshairForDataReplacement();
+      this.internalChartData = canonicalSeries;
+      this.recreateSeries(canonicalSeries, canonicalSegments);
+      return;
+    }
+    canonicalSegments.forEach((segment) => {
+      const api = this.seriesApis.get(segment.key);
+      if (api) {
+        api.setData(segment.data);
+        this.rememberRenderedSeriesData(segment.key, segment.data);
+      }
     });
+    this.internalChartData = canonicalSeries;
+    this.renderedSegments = canonicalSegments;
     this.pendingRealtimePrune = false;
+    this.updateSeriesPresentation(canonicalSeries);
   }
 
   private computeStats(chartSeries: ChartSeriesConfig) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s, index) => {
       const color = this.resolveSeriesColor(s, index, isDark);
-      const values = s.data.map(d => d.y);
+      const values = s.data
+        .map((point) => point.y)
+        .filter((value): value is number => value !== null && Number.isFinite(value));
+      const latest = s.data.length > 0 ? s.data[s.data.length - 1].y : null;
       if (values.length === 0) {
-        return { name: s.name || `series-${index}`, latest: 0, min: 0, max: 0, avg: 0, color };
+        return { name: s.name || `series-${index}`, latest: null, min: null, max: null, avg: null, color };
       }
-      const latest = values[values.length - 1];
       const min = Math.min(...values);
       const max = Math.max(...values);
       const avg = Math.round((values.reduce((sum, v) => sum + v, 0) / values.length) * 100) / 100;
@@ -556,7 +673,7 @@ export class DeesChartArea extends DeesElement {
     });
   }
 
-  private updatePriceLines(name: string, api: ISeriesApi<any>, data: Array<{ x: any; y: number }>, color: string) {
+  private updatePriceLines(name: string, api: ISeriesApi<any>, data: ChartSeriesConfig[number]['data'], color: string) {
     // Remove existing price lines for this series
     const existing = this.priceLines.get(name);
     if (existing) {
@@ -565,12 +682,14 @@ export class DeesChartArea extends DeesElement {
       }
     }
 
-    if (data.length === 0) {
+    const values = data
+      .map((point) => point.y)
+      .filter((value): value is number => value !== null && Number.isFinite(value));
+    if (values.length === 0) {
       this.priceLines.set(name, []);
       return;
     }
 
-    const values = data.map(d => d.y);
     const avg = values.reduce((sum, v) => sum + v, 0) / values.length;
     const max = Math.max(...values);
 
@@ -627,23 +746,24 @@ export class DeesChartArea extends DeesElement {
       const borderColor = isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)';
 
       let html = '';
-      let idx = 0;
       let hasData = false;
-      for (const api of this.seriesApis.values()) {
+      for (const segment of this.renderedSegments) {
+        const api = this.seriesApis.get(segment.key);
+        if (!api) continue;
         const data = param.seriesData.get(api);
-        if (data && 'value' in data && (data as any).value !== undefined) {
+        if (data && 'value' in data && typeof data.value === 'number') {
+          const marginTop = hasData ? '6px' : '0';
           hasData = true;
-          const series = this.internalChartData[idx];
-          const name = series ? this.getSeriesName(series, idx) : `series-${idx}`;
-          const color = this.resolveSeriesColor(series, idx, isDark);
-          const formatted = this.yAxisFormatter((data as any).value);
-          html += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? '6px' : '0'} 0;">
+          const series = this.internalChartData[segment.logicalIndex];
+          const name = this.getSeriesName(series, segment.logicalIndex);
+          const color = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
+          const formatted = this.yAxisFormatter(data.value);
+          html += `<div style="display:flex;align-items:center;gap:8px;margin:${marginTop} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color};border-radius:2px;"></span>
             <span style="font-weight:500;">${name}:</span>
             <span style="margin-left:auto;font-weight:600;">${formatted}</span>
           </div>`;
         }
-        idx++;
       }
 
       if (!hasData) {
@@ -786,55 +906,55 @@ export class DeesChartArea extends DeesElement {
     try {
       void animate;
       const canonicalSeries = this.getCanonicalChartSeries(newSeries);
+      const renderedSegments = this.getRenderedSegments(canonicalSeries);
       this.internalChartData = canonicalSeries;
       const renderedKeys = [...this.seriesApis.keys()];
-      const canonicalKeys = canonicalSeries.map((series, index) => this.getSeriesKey(series, index));
+      const canonicalKeys = renderedSegments.map((segment) => segment.key);
 
       if (!haveSameSeriesLayout(renderedKeys, canonicalKeys)) {
         this.clearCrosshairForDataReplacement();
-        this.recreateSeries(canonicalSeries);
+        this.recreateSeries(canonicalSeries, renderedSegments);
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
+      this.renderedSegments = renderedSegments;
 
       if (!this.realtimeMode || this.rollingWindow <= 0) {
         this.clearCrosshairForDataReplacement();
-        canonicalSeries.forEach((series, index) => {
-          this.seriesApis.get(this.getSeriesKey(series, index))!
-            .setData(this.convertDataToLC(series.data));
+        renderedSegments.forEach((segment) => {
+          this.seriesApis.get(segment.key)!.setData(segment.data);
+          this.rememberRenderedSeriesData(segment.key, segment.data);
         });
         this.pendingRealtimePrune = false;
         this.updateSeriesPresentation(canonicalSeries);
         return;
       }
 
-      const plannedUpdates = canonicalSeries.map((series, index) => {
-        const api = this.seriesApis.get(this.getSeriesKey(series, index))!;
-        const canonicalData = this.convertDataToLC(series.data)
-          .map((point) => ({ time: point.time as number, value: point.value }));
+      const plannedUpdates = renderedSegments.map((segment) => {
+        const api = this.seriesApis.get(segment.key)!;
+        const canonicalData = segment.data.map((point) => 'value' in point
+          ? { time: point.time as number, value: point.value }
+          : { time: point.time as number });
         return {
+          key: segment.key,
           api,
           canonicalData,
-          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(api), canonicalData),
+          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(segment.key), canonicalData),
         };
       });
 
       if (plannedUpdates.some(({ plan }) => plan.replacementRequired)) {
         this.clearCrosshairForDataReplacement();
-        for (const { api, canonicalData } of plannedUpdates) {
-          api.setData(canonicalData.map((point) => ({
-            time: point.time as UTCTimestamp,
-            value: point.value,
-          })));
+        for (const { key, api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+          this.renderedSeriesData.set(key, [...canonicalData]);
         }
         this.pendingRealtimePrune = false;
       } else {
-        for (const { api, plan } of plannedUpdates) {
+        for (const { key, api, plan } of plannedUpdates) {
           for (const update of plan.updates) {
-            api.update({
-              time: update.point.time as UTCTimestamp,
-              value: update.point.value,
-            }, update.historicalUpdate);
+            api.update(this.toLcPoint(update.point), update.historicalUpdate);
+            this.rememberIncrementalUpdate(key, update.point);
           }
         }
 
@@ -842,20 +962,16 @@ export class DeesChartArea extends DeesElement {
         const pruneRecommended = plannedUpdates.some(({ plan }) => plan.pruneRecommended);
         if (pruneRequired) {
           this.clearCrosshairForDataReplacement();
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point) => ({
-              time: point.time as UTCTimestamp,
-              value: point.value,
-            })));
+          for (const { key, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+            this.renderedSeriesData.set(key, [...canonicalData]);
           }
         } else if (pruneRecommended && this.crosshairActive) {
           this.pendingRealtimePrune = true;
         } else if (pruneRecommended) {
-          for (const { api, canonicalData } of plannedUpdates) {
-            api.setData(canonicalData.map((point) => ({
-              time: point.time as UTCTimestamp,
-              value: point.value,
-            })));
+          for (const { key, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point) => this.toLcPoint(point)));
+            this.renderedSeriesData.set(key, [...canonicalData]);
           }
           this.pendingRealtimePrune = false;
         }
@@ -879,7 +995,7 @@ export class DeesChartArea extends DeesElement {
     } catch (e) { /* range may be invalid */ }
   }
 
-  public async appendData(newData: { name?: string; data: Array<{ x: any; y: number }> }[]) {
+  public async appendData(newData: ChartSeriesConfig) {
     if (!this.chart) return;
     const nextSeries = this.internalChartData.map((series) => ({
       ...series,

package/ts_web/elements/00group-chart/dees-chart-area/realtime-updates.ts

@@ -1,6 +1,7 @@
 export interface IRealtimeChartPoint {
   time: number;
-  value: number;
+  /** Omitted for a time point where this series has no reading. */
+  value?: number;
 }
 
 export interface IRealtimeChartUpdate {
@@ -78,7 +79,8 @@ export const planRealtimeChartUpdates = (
       continue;
     }
 
-    if (renderedPoint.value !== canonicalPoint.value) {
+    if (renderedPoint.value !== canonicalPoint.value
+      || ('value' in renderedPoint) !== ('value' in canonicalPoint)) {
       updates.push({
         point: canonicalPoint,
         historicalUpdate: canonicalPoint.time < renderedLastTime,

package/ts_web/elements/00group-chart/dees-chart-area/template.ts

@@ -14,7 +14,8 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
           <div class="chartContainer">
             <div class="rangeSelectionOverlay" aria-hidden="true"></div>
           </div>
-          ${!component.chartSeries.some(series => series.data.length) ? html`<div class="chartState" role="status">No data for this period</div>` : ''}
+          ${!component.chartSeries.some(series => series.data.some(point => point.y !== null))
+            ? html`<div class="chartState" role="status">No data for this period</div>` : ''}
           ${component.seriesStats.length > 0 && !component.hideLegend ? html`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`
@@ -24,7 +25,7 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
                   ${component.legendStats
                     .filter(key => key === 'latest' || key === 'min' || key === 'max' || key === 'avg')
                     .map(key => html`
-                      <span class="statsItem">${key} <strong>${component.yAxisFormatter(s[key])}</strong></span>
+                      <span class="statsItem">${key} <strong>${s[key] === null ? '—' : component.yAxisFormatter(s[key])}</strong></span>
                     `)}
                 </div>
               `)}