@design.estate/dees-catalog 3.98.0 → 3.98.1

package/dist_bundle/bundle.js

@@ -161072,6 +161072,72 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
       `;
 }, "renderChartArea");
 
+// ts_web/elements/00group-chart/dees-chart-area/realtime-updates.ts
+var planRealtimeChartUpdates = /* @__PURE__ */ __name((renderedData, canonicalData) => {
+  if (canonicalData.length === 0) {
+    return {
+      replacementRequired: renderedData.length !== 0,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  if (renderedData.length === 0) {
+    return {
+      replacementRequired: false,
+      updates: canonicalData.map((point4) => ({ point: point4, historicalUpdate: false })),
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  const renderedByTime = new Map(renderedData.map((point4) => [point4.time, point4]));
+  const canonicalByTime = new Map(canonicalData.map((point4) => [point4.time, point4]));
+  const canonicalStart = canonicalData[0].time;
+  const renderedLastTime = renderedData[renderedData.length - 1].time;
+  const hasStructuralDeletion = renderedData.some(
+    (point4) => point4.time >= canonicalStart && !canonicalByTime.has(point4.time)
+  );
+  if (hasStructuralDeletion) {
+    return {
+      replacementRequired: true,
+      updates: [],
+      pruneRecommended: false,
+      pruneRequired: false
+    };
+  }
+  const updates = [];
+  for (const canonicalPoint of canonicalData) {
+    const renderedPoint = renderedByTime.get(canonicalPoint.time);
+    if (!renderedPoint) {
+      if (canonicalPoint.time < renderedLastTime) {
+        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((point4) => point4.time >= canonicalStart);
+  const retainedPrefixLength = firstCanonicalPointIndex === -1 ? renderedData.length : firstCanonicalPointIndex;
+  const projectedLength = renderedData.length + updates.filter((update) => !renderedByTime.has(update.point.time)).length;
+  const retentionLimit = Math.max(canonicalData.length * 2, 2);
+  const pruneRecommended = retainedPrefixLength > 0 && projectedLength > retentionLimit;
+  const hardRetentionLimit = Math.max(canonicalData.length * 3, 3);
+  const pruneRequired = retainedPrefixLength > 0 && projectedLength > hardRetentionLimit;
+  return { replacementRequired: false, updates, pruneRecommended, pruneRequired };
+}, "planRealtimeChartUpdates");
+var haveSameSeriesLayout = /* @__PURE__ */ __name((renderedNames, canonicalNames) => renderedNames.length === canonicalNames.length && renderedNames.every((name, index3) => name === canonicalNames[index3]), "haveSameSeriesLayout");
+
 // ts_web/elements/00group-chart/dees-chart-echarts-theme.ts
 init_theme();
 init_fonts();
@@ -161183,19 +161249,41 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     __publicField(this, "seriesApis", /* @__PURE__ */ new Map());
     __publicField(this, "priceLines", /* @__PURE__ */ new Map());
     __publicField(this, "tooltipEl", null);
+    __publicField(this, "crosshairActive", false);
+    __publicField(this, "pendingRealtimePrune", false);
+    __publicField(this, "crosshairMoveHandler", null);
+    __publicField(this, "chartContainer", null);
+    __publicField(this, "chartMouseLeaveHandler", /* @__PURE__ */ __name(() => {
+      this.chart?.clearCrosshairPosition();
+      this.handleCrosshairCleared();
+    }, "chartMouseLeaveHandler"));
     domtools_elementbasic_exports.setup();
     this.registerGarbageFunction(async () => {
       this.stopAutoScroll();
-      if (this.chart) {
+      const chart = this.chart;
+      const crosshairMoveHandler = this.crosshairMoveHandler;
+      this.chart = null;
+      this.crosshairMoveHandler = null;
+      this.chartContainer?.removeEventListener("mouseleave", this.chartMouseLeaveHandler);
+      this.chartContainer = null;
+      this.tooltipEl = null;
+      this.crosshairActive = false;
+      this.pendingRealtimePrune = false;
+      if (crosshairMoveHandler && chart) {
         try {
-          this.chart.remove();
-          this.chart = null;
-          this.seriesApis.clear();
-          this.priceLines.clear();
-        } catch (e10) {
-          console.error("Error destroying chart:", e10);
+          chart.unsubscribeCrosshairMove(crosshairMoveHandler);
+        } catch (error) {
+          console.error("Error unsubscribing chart crosshair:", error);
         }
       }
+      try {
+        chart?.remove();
+      } catch (error) {
+        console.error("Error destroying chart:", error);
+      } finally {
+        this.seriesApis.clear();
+        this.priceLines.clear();
+      }
     });
   }
   get chartSeries() {
@@ -161206,10 +161294,37 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   }
   // --- Helpers ---
   convertDataToLC(data) {
-    return data.map((point4) => {
+    const pointsByTime = /* @__PURE__ */ new Map();
+    for (const point4 of data) {
       const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
-      return { time: Math.floor(ms / 1e3), value: point4.y };
-    }).sort((a4, b4) => a4.time - b4.time);
+      const time = Math.floor(ms / 1e3);
+      if (!Number.isFinite(time) || !Number.isFinite(point4.y)) continue;
+      pointsByTime.set(time, { time, value: point4.y });
+    }
+    return [...pointsByTime.values()].sort((a4, b4) => a4.time - b4.time);
+  }
+  getSeriesName(series, index3) {
+    return series.name || `series-${index3}`;
+  }
+  getSeriesKey(series, index3) {
+    return `${index3}:${this.getSeriesName(series, index3)}`;
+  }
+  getCanonicalChartSeries(chartSeries) {
+    const cutoffTime = Date.now() - this.rollingWindow;
+    return chartSeries.map((series) => ({
+      ...series,
+      data: this.convertDataToLC(series.data.filter((point4) => {
+        if (!this.realtimeMode || this.rollingWindow <= 0) return true;
+        const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
+        return ms > cutoffTime;
+      })).map((point4) => ({
+        x: point4.time * 1e3,
+        y: point4.value
+      }))
+    }));
+  }
+  getRenderedSeriesData(api) {
+    return api.data().filter((point4) => "value" in point4).map((point4) => ({ time: point4.time, value: point4.value }));
   }
   colorToRgba(color2, alpha2) {
     if (/^#[0-9a-fA-F]{6}$/.test(color2)) {
@@ -161301,7 +161416,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
         crosshairMarkerRadius: 4
       });
       api.setData(this.convertDataToLC(s9.data));
-      this.updatePriceLines(s9.name || `series-${index3}`, api, s9.data, color2);
+      this.updatePriceLines(this.getSeriesKey(s9, index3), api, s9.data, color2);
       if (this.yAxisScaling !== "dynamic") {
         api.applyOptions({
           autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({
@@ -161309,13 +161424,63 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
           }), "autoscaleInfoProvider")
         });
       }
-      this.seriesApis.set(s9.name || `series-${index3}`, api);
+      this.seriesApis.set(this.getSeriesKey(s9, index3), api);
     });
     this.computeStats(chartSeries);
-    if (this.rollingWindow <= 0) {
+    this.pendingRealtimePrune = false;
+    if (this.realtimeMode && this.rollingWindow > 0) {
+      void this.updateTimeWindow();
+    } else {
       this.chart.timeScale().fitContent();
     }
   }
+  updateSeriesPresentation(chartSeries) {
+    const isDark = !this.goBright;
+    chartSeries.forEach((series, index3) => {
+      const seriesKey = this.getSeriesKey(series, index3);
+      const api = this.seriesApis.get(seriesKey);
+      if (!api) return;
+      const color2 = this.resolveSeriesColor(series, index3, isDark);
+      api.applyOptions({
+        topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
+        bottomColor: this.colorToRgba(color2, 0),
+        lineColor: color2
+      });
+      this.updatePriceLines(seriesKey, api, series.data, color2);
+    });
+    this.computeStats(chartSeries);
+    if (this.yAxisScaling === "dynamic") {
+      const allValues = chartSeries.flatMap((series) => series.data.map((point4) => point4.y));
+      if (allValues.length > 0) {
+        const dynamicMax = Math.ceil(Math.max(...allValues) * 1.1);
+        for (const [, api] of this.seriesApis) {
+          api.applyOptions({
+            autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: dynamicMax } }), "autoscaleInfoProvider")
+          });
+        }
+      }
+    }
+  }
+  handleCrosshairCleared() {
+    this.crosshairActive = false;
+    if (this.tooltipEl) this.tooltipEl.style.display = "none";
+    this.flushPendingRealtimePrune();
+  }
+  clearCrosshairForDataReplacement() {
+    this.pendingRealtimePrune = false;
+    this.chart?.clearCrosshairPosition();
+    this.crosshairActive = false;
+    if (this.tooltipEl) this.tooltipEl.style.display = "none";
+  }
+  flushPendingRealtimePrune() {
+    if (!this.pendingRealtimePrune || this.crosshairActive || !this.chart || !this.realtimeMode || this.rollingWindow <= 0) return;
+    const canonicalSeries = this.getCanonicalChartSeries(this.internalChartData);
+    canonicalSeries.forEach((series, index3) => {
+      const api = this.seriesApis.get(this.getSeriesKey(series, index3));
+      if (api) api.setData(this.convertDataToLC(series.data));
+    });
+    this.pendingRealtimePrune = false;
+  }
   computeStats(chartSeries) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s9, index3) => {
@@ -161375,13 +161540,16 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     this.tooltipEl = document.createElement("div");
     this.tooltipEl.className = "lw-tooltip";
     this.tooltipEl.style.display = "none";
-    this.shadowRoot.querySelector(".chartContainer")?.appendChild(this.tooltipEl);
-    this.chart.subscribeCrosshairMove((param) => {
+    this.chartContainer = this.shadowRoot.querySelector(".chartContainer");
+    this.chartContainer?.appendChild(this.tooltipEl);
+    this.chartContainer?.addEventListener("mouseleave", this.chartMouseLeaveHandler);
+    this.crosshairMoveHandler = (param) => {
       if (!this.tooltipEl) return;
-      if (!param.point || !param.time || param.point.x < 0 || param.point.y < 0) {
-        this.tooltipEl.style.display = "none";
+      if (!param.point || param.time === void 0 || param.point.x < 0 || param.point.y < 0) {
+        this.handleCrosshairCleared();
         return;
       }
+      this.crosshairActive = true;
       const isDark = !this.goBright;
       const bgColor = isDark ? "hsl(0 0% 9%)" : "hsl(0 0% 100%)";
       const textColor = isDark ? "hsl(0 0% 95%)" : "hsl(0 0% 9%)";
@@ -161389,11 +161557,13 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       let html8 = "";
       let idx = 0;
       let hasData = false;
-      for (const [name, api] of this.seriesApis) {
+      for (const api of this.seriesApis.values()) {
         const data = param.seriesData.get(api);
         if (data && "value" in data && data.value !== void 0) {
           hasData = true;
-          const color2 = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+          const series = this.internalChartData[idx];
+          const name = series ? this.getSeriesName(series, idx) : `series-${idx}`;
+          const color2 = this.resolveSeriesColor(series, idx, isDark);
           const formatted = this.yAxisFormatter(data.value);
           html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? "6px" : "0"} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color2};border-radius:2px;"></span>
@@ -161419,13 +161589,17 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
       if (left + 200 > containerWidth) left = param.point.x - 216;
       this.tooltipEl.style.left = `${left}px`;
       this.tooltipEl.style.top = `${param.point.y - 16}px`;
-    });
+    };
+    this.chart.subscribeCrosshairMove(this.crosshairMoveHandler);
   }
   // --- Lifecycle ---
   async firstUpdated() {
     await this.domtoolsPromise;
+    if (!this.isConnected) return;
     this.lcBundle = await DeesServiceLibLoader.getInstance().loadLightweightCharts();
+    if (!this.isConnected) return;
     await new Promise((resolve2) => requestAnimationFrame(resolve2));
+    if (!this.isConnected) return;
     const chartContainer = this.shadowRoot.querySelector(".chartContainer");
     if (!chartContainer) return;
     const isDark = !this.goBright;
@@ -161480,9 +161654,11 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
           ]
         }
       ];
-      this.internalChartData = chartSeries;
-      this.recreateSeries(chartSeries);
+      const canonicalSeries = this.getCanonicalChartSeries(chartSeries);
+      this.internalChartData = canonicalSeries;
+      this.recreateSeries(canonicalSeries);
       this.setupTooltip();
+      this.syncAutoScroll();
     } catch (error) {
       console.error("Failed to initialize chart:", error);
     }
@@ -161492,23 +161668,26 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
     if (changedProperties.has("goBright") && this.chart) {
       this.applyTheme();
     }
-    if (changedProperties.has("series") && this.chart && this.series.length > 0) {
+    const seriesChanged = changedProperties.has("series") && this.series.length > 0;
+    if (seriesChanged && this.chart) {
       await this.updateSeries(this.series);
     }
     if (changedProperties.has("yAxisFormatter") && this.chart) {
     }
-    if (changedProperties.has("realtimeMode") && this.chart) {
-      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
-        this.startAutoScroll();
+    const realtimeConfigurationChanged = changedProperties.has("realtimeMode") || changedProperties.has("rollingWindow");
+    const autoScrollConfigurationChanged = realtimeConfigurationChanged || changedProperties.has("autoScrollInterval");
+    if (this.chart && realtimeConfigurationChanged) {
+      if (!seriesChanged && this.internalChartData.length > 0) {
+        await this.updateSeries(this.internalChartData);
+      }
+      if (this.realtimeMode && this.rollingWindow > 0) {
+        await this.updateTimeWindow();
       } else {
-        this.stopAutoScroll();
+        this.chart.timeScale().fitContent();
       }
     }
-    if (changedProperties.has("autoScrollInterval") && this.chart) {
-      this.stopAutoScroll();
-      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
-        this.startAutoScroll();
-      }
+    if (this.chart && autoScrollConfigurationChanged) {
+      this.syncAutoScroll();
     }
     if (changedProperties.has("chartLines") && this.chart) {
       this.refreshPriceLines();
@@ -161529,77 +161708,76 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   async updateSeries(newSeries, animate = true) {
     if (!this.chart) return;
     try {
-      this.internalChartData = newSeries;
-      if (this.rollingWindow > 0 && this.realtimeMode) {
-        const now3 = Date.now();
-        const cutoffTime = now3 - this.rollingWindow;
-        if (newSeries.length !== this.seriesApis.size) {
-          this.recreateSeries(newSeries);
-        } else {
-          const isDark = !this.goBright;
-          newSeries.forEach((s9, index3) => {
-            const name = s9.name || `series-${index3}`;
-            const api = this.seriesApis.get(name);
-            if (!api) return;
-            const filtered = s9.data.filter((point4) => {
-              const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
-              return ms > cutoffTime;
-            });
-            api.setData(this.convertDataToLC(filtered));
-            const color2 = this.resolveSeriesColor(s9, index3, isDark);
-            api.applyOptions({
-              topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
-              bottomColor: this.colorToRgba(color2, 0),
-              lineColor: color2
-            });
-            this.updatePriceLines(name, api, filtered, color2);
-          });
-          this.computeStats(newSeries);
-        }
-        try {
-          this.chart.timeScale().setVisibleRange({
-            from: Math.floor(cutoffTime / 1e3),
-            to: Math.floor(now3 / 1e3)
-          });
-        } catch (e10) {
-        }
-        if (this.yAxisScaling === "dynamic") {
-          const allValues = newSeries.flatMap(
-            (s9) => s9.data.filter((p6) => {
-              const ms = typeof p6.x === "number" ? p6.x : new Date(p6.x).getTime();
-              return ms > cutoffTime;
-            }).map((d5) => d5.y)
-          );
-          if (allValues.length > 0) {
-            const dynamicMax = Math.ceil(Math.max(...allValues) * 1.1);
-            for (const [, api] of this.seriesApis) {
-              api.applyOptions({
-                autoscaleInfoProvider: /* @__PURE__ */ __name(() => ({ priceRange: { minValue: 0, maxValue: dynamicMax } }), "autoscaleInfoProvider")
-              });
-            }
-          }
+      void animate;
+      const canonicalSeries = this.getCanonicalChartSeries(newSeries);
+      this.internalChartData = canonicalSeries;
+      const renderedKeys = [...this.seriesApis.keys()];
+      const canonicalKeys = canonicalSeries.map((series, index3) => this.getSeriesKey(series, index3));
+      if (!haveSameSeriesLayout(renderedKeys, canonicalKeys)) {
+        this.clearCrosshairForDataReplacement();
+        this.recreateSeries(canonicalSeries);
+        this.updateSeriesPresentation(canonicalSeries);
+        return;
+      }
+      if (!this.realtimeMode || this.rollingWindow <= 0) {
+        this.clearCrosshairForDataReplacement();
+        canonicalSeries.forEach((series, index3) => {
+          this.seriesApis.get(this.getSeriesKey(series, index3)).setData(this.convertDataToLC(series.data));
+        });
+        this.pendingRealtimePrune = false;
+        this.updateSeriesPresentation(canonicalSeries);
+        return;
+      }
+      const plannedUpdates = canonicalSeries.map((series, index3) => {
+        const api = this.seriesApis.get(this.getSeriesKey(series, index3));
+        const canonicalData = this.convertDataToLC(series.data).map((point4) => ({ time: point4.time, value: point4.value }));
+        return {
+          api,
+          canonicalData,
+          plan: planRealtimeChartUpdates(this.getRenderedSeriesData(api), canonicalData)
+        };
+      });
+      if (plannedUpdates.some(({ plan }) => plan.replacementRequired)) {
+        this.clearCrosshairForDataReplacement();
+        for (const { api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point4) => ({
+            time: point4.time,
+            value: point4.value
+          })));
         }
+        this.pendingRealtimePrune = false;
       } else {
-        if (newSeries.length !== this.seriesApis.size) {
-          this.recreateSeries(newSeries);
-        } else {
-          const isDark = !this.goBright;
-          newSeries.forEach((s9, index3) => {
-            const name = s9.name || `series-${index3}`;
-            const api = this.seriesApis.get(name);
-            if (!api) return;
-            api.setData(this.convertDataToLC(s9.data));
-            const color2 = this.resolveSeriesColor(s9, index3, isDark);
-            api.applyOptions({
-              topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
-              bottomColor: this.colorToRgba(color2, 0),
-              lineColor: color2
-            });
-            this.updatePriceLines(name, api, s9.data, color2);
-          });
-          this.computeStats(newSeries);
-        }
-      }
+        for (const { api, plan } of plannedUpdates) {
+          for (const update of plan.updates) {
+            api.update({
+              time: update.point.time,
+              value: update.point.value
+            }, update.historicalUpdate);
+          }
+        }
+        const pruneRequired = plannedUpdates.some(({ plan }) => plan.pruneRequired);
+        const pruneRecommended = plannedUpdates.some(({ plan }) => plan.pruneRecommended);
+        if (pruneRequired) {
+          this.clearCrosshairForDataReplacement();
+          for (const { api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => ({
+              time: point4.time,
+              value: point4.value
+            })));
+          }
+        } else if (pruneRecommended && this.crosshairActive) {
+          this.pendingRealtimePrune = true;
+        } else if (pruneRecommended) {
+          for (const { api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => ({
+              time: point4.time,
+              value: point4.value
+            })));
+          }
+          this.pendingRealtimePrune = false;
+        }
+      }
+      this.updateSeriesPresentation(canonicalSeries);
     } catch (error) {
       console.error("Failed to update chart series:", error);
     }
@@ -161618,15 +161796,26 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   }
   async appendData(newData) {
     if (!this.chart) return;
+    const nextSeries = this.internalChartData.map((series) => ({
+      ...series,
+      data: [...series.data]
+    }));
+    const namedOccurrences = /* @__PURE__ */ new Map();
     newData.forEach((s9, index3) => {
-      const name = s9.name || `series-${index3}`;
-      const api = this.seriesApis.get(name);
-      if (!api || s9.data.length === 0) return;
-      for (const point4 of s9.data) {
-        const lcPoints = this.convertDataToLC([point4]);
-        if (lcPoints.length > 0) api.update(lcPoints[0]);
-      }
+      let targetIndex = index3;
+      if (s9.name) {
+        const occurrence = namedOccurrences.get(s9.name) ?? 0;
+        namedOccurrences.set(s9.name, occurrence + 1);
+        const matchingIndices = this.internalChartData.map((series, seriesIndex) => series.name === s9.name ? seriesIndex : -1).filter((seriesIndex) => seriesIndex >= 0);
+        const matchingIndex = matchingIndices[occurrence];
+        if (matchingIndex === void 0) return;
+        targetIndex = matchingIndex;
+      }
+      const targetSeries = nextSeries[targetIndex];
+      if (!targetSeries || s9.data.length === 0) return;
+      targetSeries.data.push(...s9.data);
     });
+    await this.updateSeries(nextSeries);
   }
   async updateOptions(options2) {
     if (!this.chart) return;
@@ -161663,25 +161852,31 @@ var _DeesChartArea = class _DeesChartArea extends (_a56 = DeesElement, _chart_de
   }
   refreshPriceLines() {
     const isDark = !this.goBright;
-    this.chartSeries.forEach((s9, index3) => {
-      const name = s9.name || `series-${index3}`;
-      const api = this.seriesApis.get(name);
+    this.getCanonicalChartSeries(this.internalChartData).forEach((s9, index3) => {
+      const seriesKey = this.getSeriesKey(s9, index3);
+      const api = this.seriesApis.get(seriesKey);
       if (!api) return;
-      this.updatePriceLines(name, api, s9.data, this.resolveSeriesColor(s9, index3, isDark));
+      this.updatePriceLines(seriesKey, api, s9.data, this.resolveSeriesColor(s9, index3, isDark));
     });
   }
   startAutoScroll() {
-    if (this.autoScrollTimer) return;
+    if (this.autoScrollTimer !== null) return;
     this.autoScrollTimer = window.setInterval(() => {
       this.updateTimeWindow();
     }, this.autoScrollInterval);
   }
   stopAutoScroll() {
-    if (this.autoScrollTimer) {
+    if (this.autoScrollTimer !== null) {
       window.clearInterval(this.autoScrollTimer);
       this.autoScrollTimer = null;
     }
   }
+  syncAutoScroll() {
+    this.stopAutoScroll();
+    if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+      this.startAutoScroll();
+    }
+  }
 };
 _init57 = __decoratorStart(_a56);
 _chart = new WeakMap();
@@ -198026,7 +198221,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var commitinfo = {
   name: "@design.estate/dees-catalog",
-  version: "3.98.0",
+  version: "3.98.1",
   description: "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript."
 };
 

package/dist_ts_web/00_commitinfo_data.js

@@ -3,7 +3,7 @@
  */
 export const commitinfo = {
     name: '@design.estate/dees-catalog',
-    version: '3.98.0',
+    version: '3.98.1',
     description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 };
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMDBfY29tbWl0aW5mb19kYXRhLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vdHNfd2ViLzAwX2NvbW1pdGluZm9fZGF0YS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUNILE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRztJQUN4QixJQUFJLEVBQUUsNkJBQTZCO0lBQ25DLE9BQU8sRUFBRSxRQUFRO0lBQ2pCLFdBQVcsRUFBRSxzSkFBc0o7Q0FDcEssQ0FBQSJ9

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

@@ -59,15 +59,28 @@ export declare class DeesChartArea extends DeesElement {
     private seriesApis;
     private priceLines;
     private tooltipEl;
+    private crosshairActive;
+    private pendingRealtimePrune;
+    private crosshairMoveHandler;
+    private chartContainer;
+    private readonly chartMouseLeaveHandler;
     constructor();
     static styles: import("@design.estate/dees-element").CSSResult[];
     render(): TemplateResult;
     private convertDataToLC;
+    private getSeriesName;
+    private getSeriesKey;
+    private getCanonicalChartSeries;
+    private getRenderedSeriesData;
     private colorToRgba;
     private getSeriesColors;
     private resolveSeriesColor;
     private applyTheme;
     private recreateSeries;
+    private updateSeriesPresentation;
+    private handleCrosshairCleared;
+    private clearCrosshairForDataReplacement;
+    private flushPendingRealtimePrune;
     private computeStats;
     private updatePriceLines;
     private setupTooltip;
@@ -89,4 +102,5 @@ export declare class DeesChartArea extends DeesElement {
     private refreshPriceLines;
     private startAutoScroll;
     private stopAutoScroll;
+    private syncAutoScroll;
 }