@design.estate/dees-catalog 12.5.0 → 13.0.0

package/dist_bundle/bundle.js

@@ -140107,7 +140107,7 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
           <div class="chartContainer">
             <div class="rangeSelectionOverlay" aria-hidden="true"></div>
           </div>
-          ${!component.chartSeries.some((series) => series.data.length) ? b2`<div class="chartState" role="status">No data for this period</div>` : ""}
+          ${!component.chartSeries.some((series) => series.data.some((point4) => point4.y !== null)) ? b2`<div class="chartState" role="status">No data for this period</div>` : ""}
           ${component.seriesStats.length > 0 && !component.hideLegend ? b2`
             <div slot="footer" class="statsBar">
               ${component.seriesStats.map((s9) => b2`
@@ -140115,7 +140115,7 @@ var renderChartArea = /* @__PURE__ */ __name((component) => {
                   <span class="statsColor" style="background:${s9.color}"></span>
                   <span class="statsName">${s9.name}</span>
                   ${component.legendStats.filter((key2) => key2 === "latest" || key2 === "min" || key2 === "max" || key2 === "avg").map((key2) => b2`
-                      <span class="statsItem">${key2} <strong>${component.yAxisFormatter(s9[key2])}</strong></span>
+                      <span class="statsItem">${key2} <strong>${s9[key2] === null ? "\u2014" : component.yAxisFormatter(s9[key2])}</strong></span>
                     `)}
                 </div>
               `)}
@@ -140173,7 +140173,7 @@ var planRealtimeChartUpdates = /* @__PURE__ */ __name((renderedData, canonicalDa
       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
@@ -140302,6 +140302,9 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     __publicField(this, "autoScrollTimer", null);
     __publicField(this, "lcBundle", null);
     __publicField(this, "seriesApis", /* @__PURE__ */ new Map());
+    /** LC's data() omits whitespace; this mirrors the exact points sent to each series API. */
+    __publicField(this, "renderedSeriesData", /* @__PURE__ */ new Map());
+    __publicField(this, "renderedSegments", []);
     __publicField(this, "priceLines", /* @__PURE__ */ new Map());
     __publicField(this, "tooltipEl", null);
     __publicField(this, "crosshairActive", false);
@@ -140404,6 +140407,8 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         console.error("Error destroying chart:", error);
       } finally {
         this.seriesApis.clear();
+        this.renderedSeriesData.clear();
+        this.renderedSegments = [];
         this.priceLines.clear();
       }
     });
@@ -140498,8 +140503,8 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     for (const point4 of data) {
       const ms = typeof point4.x === "number" ? point4.x : new Date(point4.x).getTime();
       const time = Math.floor(ms / 1e3);
-      if (!Number.isFinite(time) || !Number.isFinite(point4.y)) continue;
-      pointsByTime.set(time, { time, value: point4.y });
+      if (!Number.isFinite(time) || point4.y !== null && !Number.isFinite(point4.y)) continue;
+      pointsByTime.set(time, point4.y === null ? { time } : { time, value: point4.y });
     }
     return [...pointsByTime.values()].sort((a4, b4) => a4.time - b4.time);
   }
@@ -140509,6 +140514,41 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   getSeriesKey(series, index3) {
     return `${index3}:${this.getSeriesName(series, index3)}`;
   }
+  /**
+   * 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.
+   */
+  getRenderedSegments(chartSeries) {
+    const renderedSegments = [];
+    chartSeries.forEach((series, logicalIndex) => {
+      const points = this.convertDataToLC(series.data);
+      const missingPoints = points.filter((point4) => !("value" in point4));
+      const numericRuns = [];
+      let currentRun = [];
+      for (const point4 of points) {
+        if ("value" in point4) {
+          currentRun.push(point4);
+        } 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((run3, segmentIndex) => {
+        const data = segmentIndex === 0 ? [...run3, ...missingPoints].sort((left, right) => left.time - right.time) : run3;
+        renderedSegments.push({
+          key: segmentIndex === 0 ? baseKey : `${baseKey}#${segmentIndex}`,
+          logicalIndex,
+          data
+        });
+      });
+    });
+    return renderedSegments;
+  }
   getCanonicalChartSeries(chartSeries) {
     const cutoffTime = Date.now() - this.rollingWindow;
     return chartSeries.map((series) => ({
@@ -140519,12 +140559,27 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         return ms > cutoffTime;
       })).map((point4) => ({
         x: point4.time * 1e3,
-        y: point4.value
+        y: "value" in point4 ? point4.value : null
       }))
     }));
   }
-  getRenderedSeriesData(api) {
-    return api.data().filter((point4) => "value" in point4).map((point4) => ({ time: point4.time, value: point4.value }));
+  getRenderedSeriesData(segmentKey) {
+    const renderedData = this.renderedSeriesData.get(segmentKey);
+    if (!renderedData) throw new Error(`Missing rendered chart data for ${segmentKey}`);
+    return renderedData;
+  }
+  rememberRenderedSeriesData(segmentKey, data) {
+    this.renderedSeriesData.set(segmentKey, data.map((point4) => "value" in point4 ? { time: point4.time, value: point4.value } : { time: point4.time }));
+  }
+  rememberIncrementalUpdate(segmentKey, point4) {
+    const renderedData = this.getRenderedSeriesData(segmentKey);
+    const existingIndex = renderedData.findIndex((entry) => entry.time === point4.time);
+    if (existingIndex >= 0) renderedData[existingIndex] = point4;
+    else renderedData.push(point4);
+  }
+  toLcPoint(point4) {
+    const time = point4.time;
+    return point4.value === void 0 ? { time } : { time, value: point4.value };
   }
   colorToRgba(color2, alpha2) {
     if (/^#[0-9a-fA-F]{6}$/.test(color2)) {
@@ -140583,27 +140638,34 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         horzLines: { color: getThemeColors(this.goBright).borderSubtle }
       }
     });
-    let idx = 0;
-    for (const [, api] of this.seriesApis) {
-      const color2 = this.resolveSeriesColor(this.chartSeries[idx], idx, isDark);
+    for (const segment of this.renderedSegments) {
+      const api = this.seriesApis.get(segment.key);
+      if (!api) continue;
+      const color2 = this.resolveSeriesColor(
+        this.chartSeries[segment.logicalIndex],
+        segment.logicalIndex,
+        isDark
+      );
       api.applyOptions({
         topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color2, 0),
         lineColor: color2
       });
-      idx++;
     }
   }
-  recreateSeries(chartSeries) {
+  recreateSeries(chartSeries, renderedSegments = this.getRenderedSegments(chartSeries)) {
     if (!this.chart || !this.lcBundle) return;
     const isDark = !this.goBright;
     for (const [, api] of this.seriesApis) {
       this.chart.removeSeries(api);
     }
     this.seriesApis.clear();
+    this.renderedSeriesData.clear();
     this.priceLines.clear();
-    chartSeries.forEach((s9, index3) => {
-      const color2 = this.resolveSeriesColor(s9, index3, isDark);
+    this.renderedSegments = renderedSegments;
+    renderedSegments.forEach((segment) => {
+      const series = chartSeries[segment.logicalIndex];
+      const color2 = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
       const api = this.chart.addSeries(this.lcBundle.AreaSeries, {
         topColor: this.colorToRgba(color2, isDark ? 0.4 : 0.5),
         bottomColor: this.colorToRgba(color2, 0),
@@ -140615,9 +140677,12 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         crosshairMarkerVisible: true,
         crosshairMarkerRadius: 4
       });
-      api.setData(this.convertDataToLC(s9.data));
-      this.updatePriceLines(this.getSeriesKey(s9, index3), api, s9.data, color2);
-      this.seriesApis.set(this.getSeriesKey(s9, index3), 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, color2);
+      }
     });
     this.applyYAxisScale(chartSeries);
     this.computeStats(chartSeries);
@@ -140630,17 +140695,19 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   }
   updateSeriesPresentation(chartSeries) {
     const isDark = !this.goBright;
-    chartSeries.forEach((series, index3) => {
-      const seriesKey = this.getSeriesKey(series, index3);
-      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 color2 = this.resolveSeriesColor(series, index3, isDark);
+      const color2 = this.resolveSeriesColor(series, segment.logicalIndex, 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);
+      if (segment.key === this.getSeriesKey(series, segment.logicalIndex)) {
+        this.updatePriceLines(segment.key, api, series.data, color2);
+      }
     });
     this.computeStats(chartSeries);
     this.applyYAxisScale(chartSeries);
@@ -140651,7 +140718,7 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     if (this.yAxisScaling === "dynamic") {
       maxValue = 1;
       for (const entry of series) for (const point4 of entry.data) {
-        if (!Number.isFinite(point4.y)) continue;
+        if (point4.y === null || !Number.isFinite(point4.y)) continue;
         minValue = Math.min(minValue, Math.floor(point4.y * 1.1));
         maxValue = Math.max(maxValue, Math.ceil(point4.y * 1.1));
       }
@@ -140674,21 +140741,37 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
   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));
+    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);
   }
   computeStats(chartSeries) {
     const isDark = !this.goBright;
     this.seriesStats = chartSeries.map((s9, index3) => {
       const color2 = this.resolveSeriesColor(s9, index3, isDark);
-      const values = s9.data.map((d5) => d5.y);
+      const values = s9.data.map((point4) => point4.y).filter((value2) => value2 !== null && Number.isFinite(value2));
+      const latest = s9.data.length > 0 ? s9.data[s9.data.length - 1].y : null;
       if (values.length === 0) {
-        return { name: s9.name || `series-${index3}`, latest: 0, min: 0, max: 0, avg: 0, color: color2 };
+        return { name: s9.name || `series-${index3}`, latest: null, min: null, max: null, avg: null, color: color2 };
       }
-      const latest = values[values.length - 1];
       const min3 = Math.min(...values);
       const max3 = Math.max(...values);
       const avg = Math.round(values.reduce((sum, v4) => sum + v4, 0) / values.length * 100) / 100;
@@ -140702,11 +140785,11 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
         api.removePriceLine(line);
       }
     }
-    if (data.length === 0) {
+    const values = data.map((point4) => point4.y).filter((value2) => value2 !== null && Number.isFinite(value2));
+    if (values.length === 0) {
       this.priceLines.set(name, []);
       return;
     }
-    const values = data.map((d5) => d5.y);
     const avg = values.reduce((sum, v4) => sum + v4, 0) / values.length;
     const max3 = Math.max(...values);
     const lines = [];
@@ -140754,23 +140837,24 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
       const textColor = isDark ? "hsl(0 0% 95%)" : "hsl(0 0% 9%)";
       const borderColor = isDark ? "hsl(0 0% 14.9%)" : "hsl(0 0% 89.8%)";
       let html8 = "";
-      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.value !== void 0) {
+        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 color2 = this.resolveSeriesColor(series, idx, isDark);
+          const series = this.internalChartData[segment.logicalIndex];
+          const name = this.getSeriesName(series, segment.logicalIndex);
+          const color2 = this.resolveSeriesColor(series, segment.logicalIndex, isDark);
           const formatted = this.yAxisFormatter(data.value);
-          html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${idx > 0 ? "6px" : "0"} 0;">
+          html8 += `<div style="display:flex;align-items:center;gap:8px;margin:${marginTop} 0;">
             <span style="display:inline-block;width:10px;height:10px;background:${color2};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) {
         this.tooltipEl.style.display = "none";
@@ -140887,69 +140971,65 @@ var _DeesChartArea = class _DeesChartArea extends (_a35 = DeesElement, _chart_de
     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, index3) => this.getSeriesKey(series, index3));
+      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, index3) => {
-          this.seriesApis.get(this.getSeriesKey(series, index3)).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, index3) => {
-        const api = this.seriesApis.get(this.getSeriesKey(series, index3));
-        const canonicalData = this.convertDataToLC(series.data).map((point4) => ({ time: point4.time, value: point4.value }));
+      const plannedUpdates = renderedSegments.map((segment) => {
+        const api = this.seriesApis.get(segment.key);
+        const canonicalData = segment.data.map((point4) => "value" in point4 ? { time: point4.time, value: point4.value } : { time: point4.time });
         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((point4) => ({
-            time: point4.time,
-            value: point4.value
-          })));
+        for (const { key: key2, api, canonicalData } of plannedUpdates) {
+          api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+          this.renderedSeriesData.set(key2, [...canonicalData]);
         }
         this.pendingRealtimePrune = false;
       } else {
-        for (const { api, plan } of plannedUpdates) {
+        for (const { key: key2, api, plan } of plannedUpdates) {
           for (const update of plan.updates) {
-            api.update({
-              time: update.point.time,
-              value: update.point.value
-            }, update.historicalUpdate);
+            api.update(this.toLcPoint(update.point), update.historicalUpdate);
+            this.rememberIncrementalUpdate(key2, update.point);
           }
         }
         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
-            })));
+          for (const { key: key2, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+            this.renderedSeriesData.set(key2, [...canonicalData]);
           }
         } 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
-            })));
+          for (const { key: key2, api, canonicalData } of plannedUpdates) {
+            api.setData(canonicalData.map((point4) => this.toLcPoint(point4)));
+            this.renderedSeriesData.set(key2, [...canonicalData]);
           }
           this.pendingRealtimePrune = false;
         }
@@ -226370,7 +226450,7 @@ init_group_runtime();
 // ts_web/00_commitinfo_data.ts
 var 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."
 };