@design.estate/dees-catalog 3.98.0 → 3.99.0

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

@@ -0,0 +1,110 @@
+export interface IRealtimeChartPoint {
+  time: number;
+  value: number;
+}
+
+export interface IRealtimeChartUpdate {
+  point: IRealtimeChartPoint;
+  historicalUpdate: boolean;
+}
+
+export interface IRealtimeChartUpdatePlan {
+  replacementRequired: boolean;
+  updates: IRealtimeChartUpdate[];
+  pruneRecommended: boolean;
+  pruneRequired: boolean;
+}
+
+/**
+ * Lightweight Charts can update the newest point or append newer points with
+ * update(). Historical update() calls may only target timestamps that already
+ * exist. Everything else needs an exact setData() replacement.
+ */
+export const planRealtimeChartUpdates = (
+  renderedData: readonly IRealtimeChartPoint[],
+  canonicalData: readonly IRealtimeChartPoint[],
+): IRealtimeChartUpdatePlan => {
+  if (canonicalData.length === 0) {
+    return {
+      replacementRequired: renderedData.length !== 0,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false,
+    };
+  }
+  if (renderedData.length === 0) {
+    return {
+      replacementRequired: false,
+      updates: canonicalData.map((point) => ({ point, historicalUpdate: false })),
+      pruneRecommended: false,
+      pruneRequired: false,
+    };
+  }
+
+  const renderedByTime = new Map(renderedData.map((point) => [point.time, point]));
+  const canonicalByTime = new Map(canonicalData.map((point) => [point.time, point]));
+  const canonicalStart = canonicalData[0].time;
+  const renderedLastTime = renderedData[renderedData.length - 1].time;
+
+  // Points before canonicalStart are an expired rolling-window prefix and may
+  // stay hidden temporarily. Missing points anywhere else are structural
+  // deletions (including suffix deletion) and require an exact replacement.
+  const hasStructuralDeletion = renderedData.some(
+    (point) => point.time >= canonicalStart && !canonicalByTime.has(point.time),
+  );
+  if (hasStructuralDeletion) {
+    return {
+      replacementRequired: true,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false,
+    };
+  }
+
+  const updates: IRealtimeChartUpdate[] = [];
+  for (const canonicalPoint of canonicalData) {
+    const renderedPoint = renderedByTime.get(canonicalPoint.time);
+    if (!renderedPoint) {
+      if (canonicalPoint.time < renderedLastTime) {
+        // Historical update() cannot insert a missing timestamp.
+        return {
+          replacementRequired: true,
+          updates: [],
+          pruneRecommended: false,
+          pruneRequired: false,
+        };
+      }
+      updates.push({ point: canonicalPoint, historicalUpdate: false });
+      continue;
+    }
+
+    if (renderedPoint.value !== canonicalPoint.value) {
+      updates.push({
+        point: canonicalPoint,
+        historicalUpdate: canonicalPoint.time < renderedLastTime,
+      });
+    }
+  }
+
+  const firstCanonicalPointIndex = renderedData.findIndex((point) => point.time >= canonicalStart);
+  const retainedPrefixLength = firstCanonicalPointIndex === -1
+    ? renderedData.length
+    : firstCanonicalPointIndex;
+  const projectedLength = renderedData.length
+    + updates.filter((update) => !renderedByTime.has(update.point.time)).length;
+  // Retain at most one additional hidden rolling window before compacting.
+  const retentionLimit = Math.max(canonicalData.length * 2, 2);
+  const pruneRecommended = retainedPrefixLength > 0 && projectedLength > retentionLimit;
+  // Hover may defer a recommended compaction to preserve the active crosshair,
+  // but never beyond two additional hidden windows.
+  const hardRetentionLimit = Math.max(canonicalData.length * 3, 3);
+  const pruneRequired = retainedPrefixLength > 0 && projectedLength > hardRetentionLimit;
+
+  return { replacementRequired: false, updates, pruneRecommended, pruneRequired };
+};
+
+export const haveSameSeriesLayout = (
+  renderedNames: readonly string[],
+  canonicalNames: readonly string[],
+): boolean => renderedNames.length === canonicalNames.length
+  && renderedNames.every((name, index) => name === canonicalNames[index]);

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

@@ -50,6 +50,16 @@ export const chartAreaStyles = [
         position: absolute;
         inset: 0 0 4px 0;
       }
+      .rangeSelectionOverlay {
+        position: absolute;
+        display: none;
+        top: 0;
+        bottom: 0;
+        z-index: 3;
+        pointer-events: none;
+        background: color-mix(in srgb, var(--dees-color-accent, #3b82f6) 18%, transparent);
+        border-inline: 1px solid color-mix(in srgb, var(--dees-color-accent, #3b82f6) 70%, transparent);
+      }
       .statsBar {
         min-height: 32px;
         padding: 4px 16px;

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

@@ -11,7 +11,9 @@ export const renderChartArea = (component: DeesChartArea): TemplateResult => {
               <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
             </button>
           </div>
-          <div class="chartContainer"></div>
+          <div class="chartContainer">
+            <div class="rangeSelectionOverlay" aria-hidden="true"></div>
+          </div>
           ${component.seriesStats.length > 0 && !component.hideLegend ? html`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map(s => html`