@oicl/openbridge-webcomponents 2.0.0-next.94 → 2.0.0-next.95

package/bundle/openbridge-webcomponents.bundle.js

@@ -33087,6 +33087,60 @@ function generateLegendHTML(legendItems) {
       `
   ).join("");
 }
+var XValueMode = /* @__PURE__ */ ((XValueMode2) => {
+  XValueMode2["time"] = "time";
+  XValueMode2["number"] = "number";
+  return XValueMode2;
+})(XValueMode || {});
+function isTemporalEpochLike(v2) {
+  return typeof v2.epochMilliseconds === "number";
+}
+function isTemporalPlainLike(v2) {
+  const t2 = v2;
+  return typeof t2.year === "number" && typeof t2.month === "number" && typeof t2.day === "number";
+}
+function normalizeXValue(v2, mode) {
+  if (typeof v2 === "number") {
+    return Number.isFinite(v2) ? v2 : NaN;
+  }
+  if (v2 instanceof Date) {
+    return v2.getTime();
+  }
+  if (typeof v2 === "object" && v2 !== null) {
+    if (isTemporalEpochLike(v2)) return v2.epochMilliseconds;
+    if (isTemporalPlainLike(v2)) {
+      return new Date(
+        v2.year,
+        v2.month - 1,
+        v2.day,
+        v2.hour ?? 0,
+        v2.minute ?? 0,
+        v2.second ?? 0,
+        v2.millisecond ?? 0
+      ).getTime();
+    }
+    return NaN;
+  }
+  if (typeof v2 === "string") {
+    if (v2.trim() === "") return NaN;
+    if (mode === "time") {
+      const parsed = Date.parse(v2);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+    const numeric = Number(v2);
+    return Number.isFinite(numeric) ? numeric : NaN;
+  }
+  return NaN;
+}
+function formatXValue(value, mode, relativeToMs) {
+  if (!Number.isFinite(value)) return "";
+  if (mode === "number") return String(value);
+  if (relativeToMs !== void 0 && Number.isFinite(relativeToMs)) {
+    const minutes = Math.round((value - relativeToMs) / 6e4);
+    return `${minutes}min`;
+  }
+  return new Date(value).toLocaleDateString();
+}
 var TickmarkType$1 = /* @__PURE__ */ ((TickmarkType2) => {
   TickmarkType2["zeroLineThick"] = "zeroLineThick";
   TickmarkType2["zeroLine"] = "zeroLine";
@@ -35037,6 +35091,7 @@ Chart.register(
 var XAxisType = /* @__PURE__ */ ((XAxisType2) => {
   XAxisType2["category"] = "category";
   XAxisType2["time"] = "time";
+  XAxisType2["number"] = "number";
   return XAxisType2;
 })(XAxisType || {});
 var YAxisPosition = /* @__PURE__ */ ((YAxisPosition2) => {
@@ -35179,6 +35234,23 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       }, 16);
     };
   }
+  /** @internal - True when the x-axis positions points by numeric value. */
+  get isNumericXAxis() {
+    return this.xAxisType === "time" || this.xAxisType === "number";
+  }
+  /** @internal - Normalization mode for the current x-axis type. */
+  get xValueMode() {
+    return this.xAxisType === "number" ? XValueMode.number : XValueMode.time;
+  }
+  /** @internal - Warn once per data assignment about unparseable x-values. */
+  warnOnInvalidX(xValues, sourceRef) {
+    const invalid = xValues.filter((x2) => !Number.isFinite(x2)).length;
+    if (invalid === 0 || this.lastWarnedXSource === sourceRef) return;
+    this.lastWarnedXSource = sourceRef;
+    console.warn(
+      `[obc-chart] ${invalid} x value(s) could not be parsed for xAxisType='${this.xAxisType}'; the points render as gaps.`
+    );
+  }
   /**
    * Should fill be applied to this chart?
    * Line graph returns false, area graph returns true.
@@ -36015,8 +36087,8 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
    */
   buildDataset(data, index2, chartColors, totalCount = 1) {
     const currentColor = chartColors[index2 % chartColors.length];
-    const existingDataset = "data" in data ? data : null;
-    const values = existingDataset ? null : data;
+    const existingDataset = Array.isArray(data) ? null : data;
+    const values = Array.isArray(data) ? data : null;
     const borderColor = existingDataset?.borderColor ?? currentColor;
     const fillFlag = existingDataset?.fill ?? this.shouldApplyFill();
     const tension = this.lineMode === "smooth" ? this.DEFAULT_TENSION : 0;
@@ -36064,14 +36136,18 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     return result;
   }
   /**
-   * Create threshold mode datasets: invisible baseline + main dataset with above/below fills
+   * Create threshold mode datasets: invisible baseline + main dataset with
+   * above/below fills. Accepts plain values (category mode) or {x, y} points
+   * (time/number mode); the baseline mirrors the input x-positions.
    */
   createThresholdDatasets(values, chartColors) {
-    const numericValues = values.map((v2) => Number(v2)).filter((n3) => Number.isFinite(n3));
-    const minV = numericValues.length ? Math.min(...numericValues) : 0;
-    const maxV = numericValues.length ? Math.max(...numericValues) : 100;
+    const yValues = values.map((v2) => typeof v2 === "number" ? v2 : v2.y).filter((n3) => Number.isFinite(n3));
+    const minV = yValues.length ? Math.min(...yValues) : 0;
+    const maxV = yValues.length ? Math.max(...yValues) : 100;
     const threshold = (minV + maxV) / 2;
-    const baselineData = numericValues.map(() => threshold);
+    const baselineData = values.map(
+      (v2) => typeof v2 === "number" ? threshold : { x: v2.x, y: threshold }
+    );
     const lowRaw = LINE_GRAPH_GRID_CONFIG.thresholdLowColorVar;
     const highRaw = LINE_GRAPH_GRID_CONFIG.thresholdHighColorVar;
     const highFill = applyAlphaToColor(this, highRaw, 0.35);
@@ -36097,7 +36173,9 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     return [baselineDataset, main];
   }
   /**
-   * Prepare normalized datasets for multi-series charts
+   * Prepare normalized datasets for multi-series charts.
+   * In time/number mode every point's x is normalized (epoch ms / number)
+   * so strings, Dates and Temporal objects position correctly.
    */
   prepareMultiSeriesDatasets() {
     const defaultPalette = this.priority === Priority.enhanced ? CHART_SECTOR_ENHANCED_COLORS : CHART_SECTOR_DEFAULT_COLORS;
@@ -36106,18 +36184,37 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
       this.colors,
       defaultPalette
     );
+    const normalized = this.datasets.map((ds) => this.normalizeDatasetX(ds));
+    if (this.isNumericXAxis) {
+      this.warnOnInvalidX(
+        normalized.flatMap(
+          (ds) => (ds.data ?? []).map(
+            (pt) => pt && typeof pt === "object" ? pt.x : 0
+          )
+        ),
+        this.datasets
+      );
+    }
     const totalCount = this.datasets.length;
-    return this.datasets.map(
+    return normalized.map(
       (ds, i4) => this.buildDataset(ds, i4, chartColors, totalCount)
     );
   }
+  /** @internal - Return a copy of the dataset with normalized point x-values. */
+  normalizeDatasetX(ds) {
+    if (!this.isNumericXAxis || !ds.data) return ds;
+    const data = ds.data.map(
+      (pt) => pt && typeof pt === "object" && "x" in pt ? { ...pt, x: normalizeXValue(pt.x, this.xValueMode) } : pt
+    );
+    return { ...ds, data };
+  }
   /**
-   * Prepare datasets for single-series charts
-   * Handles both regular and threshold fill modes
+   * Prepare datasets for single-series charts.
+   * Category mode: labels + numeric values (unchanged legacy path).
+   * Time/number mode: normalized {x, y} points on a linear scale.
+   * Handles both regular and threshold fill modes.
    */
   prepareSingleSeriesDatasets() {
-    const values = this.data.map((d2) => d2.value);
-    const labels = this.data.map((d2) => d2.label);
     const defaultPalette = this.priority === Priority.enhanced ? CHART_SECTOR_ENHANCED_COLORS : CHART_SECTOR_DEFAULT_COLORS;
     const chartColors = getChartColorsOrDefault(
       this,
@@ -36126,6 +36223,20 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     );
     const fill2 = this.shouldApplyFill();
     const fillMode = this.getFillMode();
+    if (this.isNumericXAxis) {
+      const points2 = this.data.map((d2) => ({
+        x: normalizeXValue(d2.x ?? d2.label ?? NaN, this.xValueMode),
+        y: d2.value
+      }));
+      this.warnOnInvalidX(
+        points2.map((p2) => p2.x),
+        this.data
+      );
+      const datasets2 = fill2 && fillMode === "threshold" ? this.createThresholdDatasets(points2, chartColors) : [this.buildDataset(points2, 0, chartColors)];
+      return { datasets: datasets2, labels: [] };
+    }
+    const values = this.data.map((d2) => d2.value);
+    const labels = this.data.map((d2) => d2.label ?? String(d2.x ?? ""));
     const datasets = fill2 && fillMode === "threshold" ? this.createThresholdDatasets(values, chartColors) : [this.buildDataset(values, 0, chartColors)];
     return { datasets, labels };
   }
@@ -36190,10 +36301,15 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
           callbacks: {
             title: () => "",
             label: (context) => {
-              const label = context.label ?? "";
               const value = typeof context.parsed === "object" && context.parsed !== null ? context.parsed.y : context.parsed;
               const numericValue = formatNumericValue$1(value, 1, false, 0);
               const unit = this.unit ? `${this.unit}` : "";
+              let label = context.label ?? "";
+              if (this.isNumericXAxis) {
+                const x2 = typeof context.parsed === "object" && context.parsed !== null ? context.parsed.x : NaN;
+                const relativeTo = this.timeDisplay === "minutes" ? refTs : void 0;
+                label = formatXValue(x2, this.xValueMode, relativeTo);
+              }
               return `${label} ${numericValue}${unit}`;
             }
           }
@@ -36208,18 +36324,23 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
    * Returns earliest timestamp for 'date' mode, latest for 'minutes' mode.
    */
   computeTimeReference() {
+    if (this.xAxisType !== "time") return void 0;
     const timestamps = [];
     if (this.datasets?.length) {
       this.datasets.forEach((ds) => {
         if (!ds.data) return;
         ds.data.forEach((pt) => {
           if (pt && typeof pt === "object" && "x" in pt) {
-            const xVal = pt.x;
-            const ts = typeof xVal === "string" ? new Date(String(xVal)).getTime() : Number(xVal);
+            const ts = normalizeXValue(pt.x, XValueMode.time);
             if (Number.isFinite(ts)) timestamps.push(ts);
           }
         });
       });
+    } else if (this.data?.length) {
+      this.data.forEach((d2) => {
+        const ts = normalizeXValue(d2.x ?? d2.label ?? NaN, XValueMode.time);
+        if (Number.isFinite(ts)) timestamps.push(ts);
+      });
     }
     if (!timestamps.length && this.labels?.length) {
       this.labels.forEach((l2) => {
@@ -36269,7 +36390,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
     const showTicks = showTickMarks && !isTooSmall && this.hasLabelPadding;
     const fontConfig = { family: fontFamily, size: fontSize, weight: fontWeight };
     const x2 = {
-      type: this.xAxisType === "time" ? "linear" : "category",
+      type: this.xAxisType === "category" ? "category" : "linear",
       offset: false,
       // Always edge-to-edge (no padding on x-axis)
       grace: 0,
@@ -36293,14 +36414,11 @@ const _ObcChartLineBase = class _ObcChartLineBase extends i$4 {
         maxTicksLimit: this.xTicksLimit,
         stepSize: this.xStepSize,
         callback: (value) => {
-          if (this.xAxisType !== "time") return String(value);
+          if (!this.isNumericXAxis) return String(value);
           const n3 = Number(value);
           if (!Number.isFinite(n3)) return String(value);
-          if (this.timeDisplay === "minutes" && minX !== void 0 && Number.isFinite(minX)) {
-            const minutes = Math.round((n3 - minX) / 6e4);
-            return `${minutes}min`;
-          }
-          return new Date(n3).toLocaleDateString();
+          const relativeTo = this.timeDisplay === "minutes" ? minX : void 0;
+          return formatXValue(n3, this.xValueMode, relativeTo);
         }
       },
       border: {
@@ -37258,6 +37376,7 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
   constructor() {
     super();
     this._isFirstUpdate = false;
+    this._explicitXAxisType = false;
     this.scaleType = ScaleType.regular;
     this.minValue = 0;
     this.maxValue = 100;
@@ -37389,6 +37508,17 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
     return false;
   }
   willUpdate(changed) {
+    if (changed.has("xAxisType") && this.xAxisType !== this._autoAppliedXAxisType && (this.hasUpdated || this.xAxisType !== XAxisType.category)) {
+      this._explicitXAxisType = true;
+    }
+    if (!this._explicitXAxisType && changed.has("data")) {
+      const allHaveX = (this.data?.length ?? 0) > 0 && this.data.every((d2) => d2.x != null);
+      const target = allHaveX ? XAxisType.time : XAxisType.category;
+      if (this.xAxisType !== target) {
+        this._autoAppliedXAxisType = target;
+        this.xAxisType = target;
+      }
+    }
     super.willUpdate(changed);
     if (changed.has("chartMinValue") || changed.has("chartMaxValue") || changed.has("minValue") || changed.has("maxValue")) {
       const chartMin = this.chartMinValue ?? this.minValue;