@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.151 → 2.0.0-next.152

package/dist/building-blocks/chart-line/chart-line-base.js

@@ -6,14 +6,15 @@ import chartDebugStyle from "../../charthelpers/chart-debug.css.js";
 import chartLegendStyle from "../../charthelpers/chart-legend.css.js";
 import { Chart, LineController, LineElement, PointElement, ArcElement, CategoryScale, LinearScale, TimeScale, Filler, Tooltip } from "chart.js";
 import { InstrumentState, Priority, FrameStyle, BorderRadiusPosition } from "../../navigation-instruments/types.js";
-import { CHART_DIMENSIONS, RECTANGULAR_CHART_DIMENSIONS, CHART_SECTOR_ENHANCED_COLORS, CHART_SECTOR_DEFAULT_COLORS, CHART_AREA_BACKGROUND_COLOR_VAR, LINE_GRAPH_GRID_CONFIG, LINE_GRAPH_LABEL_CONFIG } from "../../charthelpers/constants.js";
+import { RECTANGULAR_CHART_DIMENSIONS, CHART_DIMENSIONS, CHART_SECTOR_ENHANCED_COLORS, CHART_SECTOR_DEFAULT_COLORS, LINE_GRAPH_LABEL_CONFIG, CHART_AREA_BACKGROUND_COLOR_VAR, LINE_GRAPH_GRID_CONFIG } from "../../charthelpers/constants.js";
 import { getCssVariableValue, applyAlphaToColor, getChartColorsOrDefault } from "../../charthelpers/colors.js";
 import { observeThemeChanges } from "../../charthelpers/theme.js";
 import { formatChartNumber } from "../../charthelpers/canvas-layout.js";
 import { getChartTooltipOptions } from "../../charthelpers/tooltip.js";
 import { generateLegendHTML } from "../../charthelpers/legend.js";
-import { XValueMode, normalizeXValue, formatXValue } from "../../charthelpers/x-value.js";
+import { XValueMode, formatXValue, normalizeXValue } from "../../charthelpers/x-value.js";
 import { observeLabelThreshold } from "../../charthelpers/label-threshold.js";
+import { yRangeLabelValues, measureRangeLabelGutters, formatRangeValue, rangeLabelLineHeight, rangeLabelFontString } from "../../charthelpers/range-labels.js";
 import { readExternalScaleBorderRadiusPx, ScaleType, startExternalScaleBorderRadiusObserver, EXTERNAL_SCALE_BORDER_RADIUS_CSS_VAR } from "../external-scale/external-scale.js";
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -57,6 +58,13 @@ var TimeDisplay = /* @__PURE__ */ ((TimeDisplay2) => {
   TimeDisplay2["date"] = "date";
   return TimeDisplay2;
 })(TimeDisplay || {});
+var RangeLabels = /* @__PURE__ */ ((RangeLabels2) => {
+  RangeLabels2["none"] = "none";
+  RangeLabels2["y"] = "y";
+  RangeLabels2["x"] = "x";
+  RangeLabels2["xy"] = "xy";
+  return RangeLabels2;
+})(RangeLabels || {});
 const LINE_GRAPH_WATCHED_PROP_NAMES = [
   "data",
   "datasets",
@@ -65,6 +73,7 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   "xAxisType",
   "yAxisPosition",
   "yAxes",
+  "xAxis",
   "showGrid",
   "showGridX",
   "showGridY",
@@ -89,14 +98,17 @@ const LINE_GRAPH_WATCHED_PROP_NAMES = [
   "height",
   "fixedAspectRatioScaling",
   // Triggers responsive mode change
-  "hasLabelPadding"
+  "hasLabelPadding",
   // Toggles edge-to-edge rendering and label visibility
+  "rangeLabels"
 ];
 const LINE_GRAPH_RECREATE_PROP_NAMES = [
   "showDebugOverlay",
   "width",
   "height",
-  "fixedAspectRatioScaling"
+  "fixedAspectRatioScaling",
+  "rangeLabels"
+  // Adds or removes the range-labels plugin
 ];
 const LINE_GRAPH_DIMENSION_PROP_NAMES = [
   "width",
@@ -119,11 +131,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     this.xAxisType = "category";
     this.yAxisPosition = "left";
     this.yAxes = void 0;
+    this.xAxis = void 0;
     this.showGrid = false;
     this.showGridX = false;
     this.showGridY = false;
     this.showTickMarks = false;
     this.hasLabelPadding = true;
+    this.rangeLabels = "none";
+    this.warnedDateDisplayScale = false;
     this.DEFAULT_TENSION = 0.4;
     this.POINT_RADIUS = 3;
     this.showPoints = false;
@@ -146,6 +161,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     this.currentBorderRadiusPx = 8;
     this.computedWidth = 480;
     this.computedHeight = 320;
+    this.savedLabelThickness = /* @__PURE__ */ new WeakMap();
+    this.savedMainTickmarkLabels = /* @__PURE__ */ new WeakMap();
+    this.lastRangeLabels = [];
+    this.rangeLabelCache = { y: [], x: [] };
     this.updateBorderRadius = () => {
       if (!this.canvasEl) return;
       let next;
@@ -185,10 +204,25 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       }, 16);
     };
   }
+  /** @internal - The y side wants range labels; an edge-to-edge chart never does. */
+  get rangeLabelsY() {
+    return this.hasLabelPadding && (this.rangeLabels === "y" || this.rangeLabels === "xy");
+  }
+  /** @internal - The x side wants range labels; an edge-to-edge chart never does. */
+  get rangeLabelsX() {
+    return this.hasLabelPadding && (this.rangeLabels === "x" || this.rangeLabels === "xy");
+  }
   /** @internal - True when the x-axis positions points by numeric value. */
   get isNumericXAxis() {
     return this.xAxisType === "time" || this.xAxisType === "number";
   }
+  /**
+   * Id of the y scale a dataset lands on when it names none. Chart.js would
+   * otherwise add a default `y` scale next to the configured ones and draw it.
+   */
+  get primaryYAxisId() {
+    return this.yAxes?.length ? this.yAxes[0].id ?? "y0" : "y";
+  }
   /** @internal - Normalization mode for the current x-axis type. */
   get xValueMode() {
     return this.xAxisType === "number" ? XValueMode.number : XValueMode.time;
@@ -227,37 +261,221 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     throw new Error("shouldStack() must be implemented in subclass");
   }
   /**
-   * Compute which corners should be rounded based on borderRadiusPosition and
-   * which external scales are present.
-   *
-   * Logic:
-   * - Opposite scales (left+right OR top+bottom) → no rounding (middleChild behavior)
-   * - Perpendicular scales (e.g., right+bottom):
-   *   - innerFirstChild → round corner adjacent to both scales
-   *   - outerLastChild → round free corner opposite to scales
-   * - Single-side scales:
-   *   - When external scale is on RIGHT, chart is on LEFT
-   *     - innerFirstChild → round LEFT corners (top-left + bottom-left)
-   *     - outerLastChild → round RIGHT corners (top-right + bottom-right)
-   *   - When external scale is on LEFT, chart is on RIGHT (opposite)
-   *   - When external scale is on TOP, chart is on BOTTOM
-   *     - innerFirstChild → round BOTTOM corners (bottom-left + bottom-right)
-   *     - outerLastChild → round TOP corners (top-left + top-right)
-   *   - When external scale is on BOTTOM, chart is on TOP (opposite)
-   * - middleChild → no rounding
-   */
-  /**
-   * Check if a slotted scale element is actually visible (renders content).
-   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   * Label band a slotted scale needs for its compact labels, in the scale's
+   * own viewBox units. The scale prints the raw values, so those are what is
+   * measured; the x band is one text line.
    */
-  hasVisibleScale(side) {
-    const slotMap = {
+  compactLabelThickness(axis) {
+    const context = this.canvasEl?.getContext("2d");
+    if (!context) return void 0;
+    const font = this.rangeLabelFont();
+    let visual;
+    if (axis === "y") {
+      const bounds = this.rangeLabelCache.bounds;
+      if (!bounds) return void 0;
+      const texts = yRangeLabelValues(bounds.min, bounds.max).map(String);
+      visual = measureRangeLabelGutters(context, font, texts, []).side + 4;
+    } else {
+      visual = measureRangeLabelGutters(context, font, [], ["x"]).bottom + 8;
+    }
+    if (!this.fixedAspectRatioScaling) return Math.ceil(visual);
+    const effectiveLength = axis === "y" ? this.getEffectiveHeight() : this.getEffectiveWidth();
+    return Math.ceil(visual * this.scaleReferenceSize / effectiveLength);
+  }
+  slotFor(side) {
+    return {
       left: this.leftScaleSlot,
       right: this.rightScaleSlot,
       top: this.topScaleSlot,
       bottom: this.bottomScaleSlot
+    }[side];
+  }
+  hasSlottedScale(side) {
+    return (this.slotFor(side)?.assignedElements().length ?? 0) > 0;
+  }
+  /** @internal - Below the label threshold on either dimension. */
+  isBelowThreshold() {
+    return this.getEffectiveWidth() < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS || this.getEffectiveHeight() < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+  }
+  get ySide() {
+    const first = this.yAxes?.[0]?.position;
+    return (first ?? this.yAxisPosition) === "right" ? "right" : "left";
+  }
+  rangeLabelFont() {
+    const sizePx = Number.parseFloat(
+      getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontSizeVar)
+    );
+    return {
+      family: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontFamily),
+      sizePx: Number.isFinite(sizePx) ? sizePx : 12,
+      weight: getCssVariableValue(this, LINE_GRAPH_LABEL_CONFIG.fontWeightVar)
     };
-    const slot = slotMap[side];
+  }
+  /**
+   * Extent of the prepared data: one for x, one per y scale id. Each y axis
+   * ranges from its own datasets, so a merged extent would label one axis
+   * with another's values.
+   */
+  dataExtents(prepared) {
+    const x = { min: Infinity, max: -Infinity };
+    const y = /* @__PURE__ */ new Map();
+    const take = (extent, v) => {
+      if (!Number.isFinite(v)) return;
+      extent.min = Math.min(extent.min, v);
+      extent.max = Math.max(extent.max, v);
+    };
+    prepared.datasets.forEach((dataset) => {
+      const id = dataset.yAxisID ?? this.primaryYAxisId;
+      const extent = y.get(id) ?? { min: Infinity, max: -Infinity };
+      y.set(id, extent);
+      dataset.data.forEach((point) => {
+        if (typeof point === "number") {
+          take(extent, point);
+        } else if (point) {
+          take(x, point.x);
+          take(extent, point.y);
+        }
+      });
+    });
+    y.forEach((extent, id) => {
+      if (!(extent.min <= extent.max)) y.delete(id);
+    });
+    return { x: x.min <= x.max ? x : void 0, y };
+  }
+  /**
+   * Range the y labels describe. Below the threshold the axis runs on data
+   * bounds, so its datasets' extent is exact and needs no chart to read from.
+   */
+  yRangeBounds(extents) {
+    let axis;
+    let id = "y";
+    if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (a) => (a.position ?? "left") === this.ySide
+      );
+      const index = match === -1 ? 0 : match;
+      axis = this.yAxes[index];
+      id = axis.id ?? `y${index}`;
+    }
+    const extent = extents.get(id);
+    const stackedScale = this.shouldStack() ? this.chart?.scales[id] : void 0;
+    const min = axis?.min ?? stackedScale?.min ?? extent?.min;
+    const max = axis?.max ?? stackedScale?.max ?? extent?.max;
+    return min !== void 0 && max !== void 0 ? { min, max } : void 0;
+  }
+  /** First and last x label, or nothing when there is no span to label. */
+  xEdgeLabelTexts(prepared, extent) {
+    if (!this.isNumericXAxis) {
+      const labels = prepared.labels.map(String);
+      const first = labels[0];
+      const last = labels[labels.length - 1];
+      return labels.length > 1 && first !== last ? [first, last] : [];
+    }
+    const min = this.xAxis?.min ?? extent?.min;
+    const max = this.xAxis?.max ?? extent?.max;
+    if (min === void 0 || max === void 0 || min === max) return [];
+    const reference = this.timeDisplay === "minutes" ? this.computeTimeReference() : void 0;
+    return [
+      formatXValue(min, this.xValueMode, reference),
+      formatXValue(max, this.xValueMode, reference)
+    ];
+  }
+  /**
+   * Recompute the range labels. A side with a slotted scale is labelled by
+   * the scale, so it gets no text here; the y bounds are kept regardless,
+   * since the scale's compact band is measured from them.
+   */
+  refreshRangeLabels() {
+    const cache = { y: [], x: [] };
+    if (this.isBelowThreshold() && (this.rangeLabelsY || this.rangeLabelsX)) {
+      const prepared = this.prepareChartDataAndLabels();
+      const extents = this.dataExtents(prepared);
+      if (this.rangeLabelsY) {
+        cache.bounds = this.yRangeBounds(extents.y);
+        if (cache.bounds && !this.hasSlottedScale("left") && !this.hasSlottedScale("right")) {
+          const { min, max } = cache.bounds;
+          cache.y = yRangeLabelValues(min, max).map(
+            (v) => formatRangeValue(v, min, max)
+          );
+        }
+      }
+      if (this.rangeLabelsX && !this.hasSlottedScale("top") && !this.hasSlottedScale("bottom")) {
+        cache.x = this.xEdgeLabelTexts(prepared, extents.x);
+      }
+    }
+    this.rangeLabelCache = cache;
+    return cache;
+  }
+  /**
+   * Paints min / 0 / max and first / last once Chart.js has drawn, inside the
+   * gutters `getChartOptions()` reserved. The end labels sit flush with the
+   * plot edges so no vertical padding is needed for them.
+   */
+  createRangeLabelsPlugin() {
+    return {
+      id: "rangeLabels",
+      afterDraw: (chart) => {
+        this.lastRangeLabels = [];
+        const { y: yTexts, x: xTexts, bounds } = this.rangeLabelCache;
+        if (!yTexts.length && !xTexts.length) return;
+        const area = chart.chartArea;
+        const ctx = chart.ctx;
+        const font = this.rangeLabelFont();
+        const lineHeight = rangeLabelLineHeight(font);
+        ctx.save();
+        ctx.font = rangeLabelFontString(font);
+        ctx.fillStyle = getCssVariableValue(
+          this,
+          LINE_GRAPH_LABEL_CONFIG.fontColorVar
+        );
+        const scale = chart.scales[this.primaryYAxisId];
+        if (yTexts.length && bounds && scale) {
+          const onRight = this.ySide === "right";
+          const x = onRight ? area.right + 8 : area.left - 8;
+          ctx.textAlign = onRight ? "left" : "right";
+          const values = yRangeLabelValues(bounds.min, bounds.max);
+          for (let i = values.length - 1; i >= 0; i--) {
+            const isMax = i === values.length - 1;
+            const isMin = i === 0;
+            const y = isMax ? area.top : isMin ? area.bottom : scale.getPixelForValue(values[i]);
+            if (!isMax && !isMin && (y - area.top < lineHeight || area.bottom - y < lineHeight)) {
+              continue;
+            }
+            ctx.textBaseline = isMax ? "top" : isMin ? "bottom" : "middle";
+            ctx.fillText(yTexts[i], x, y);
+            this.lastRangeLabels.push({ axis: "y", text: yTexts[i], x, y });
+          }
+        }
+        if (xTexts.length === 2) {
+          const y = area.bottom + 4;
+          ctx.textBaseline = "top";
+          ctx.textAlign = "left";
+          ctx.fillText(xTexts[0], area.left, y);
+          this.lastRangeLabels.push({
+            axis: "x",
+            text: xTexts[0],
+            x: area.left,
+            y
+          });
+          ctx.textAlign = "right";
+          ctx.fillText(xTexts[1], area.right, y);
+          this.lastRangeLabels.push({
+            axis: "x",
+            text: xTexts[1],
+            x: area.right,
+            y
+          });
+        }
+        ctx.restore();
+      }
+    };
+  }
+  /**
+   * Check if a slotted scale element is actually visible (renders content).
+   * For bar-vertical/bar-horizontal elements, checks hasBar and hasScale properties.
+   */
+  hasVisibleScale(side) {
+    const slot = this.slotFor(side);
     const elements = slot?.assignedElements() ?? [];
     return elements.some((el) => {
       const barEl = el;
@@ -637,13 +855,13 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     if (this.isUpdatingScales) return false;
     this.isUpdatingScales = true;
     try {
-      const padding = this.calculatePaddingFromScales();
-      const effectiveWidth = this.width - padding.left - padding.right;
-      const effectiveHeight = this.height - padding.top - padding.bottom;
+      const padding = this.computeChartPadding();
+      const effectiveWidth = this.getEffectiveWidth() - padding.left - padding.right;
+      const effectiveHeight = this.getEffectiveHeight() - padding.top - padding.bottom;
       if (effectiveWidth <= 0 || effectiveHeight <= 0) {
         console.warn("[chart-line-base] Invalid effective dimensions", {
-          width: this.width,
-          height: this.height,
+          width: this.getEffectiveWidth(),
+          height: this.getEffectiveHeight(),
           padding,
           effectiveWidth,
           effectiveHeight
@@ -680,47 +898,139 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     };
     return padding;
   }
+  /**
+   * Range a slotted scale on the given side has to cover.
+   *
+   * A range pinned in the axis configuration is used as is: it is the source
+   * of truth, and on the first sync there is no chart to read yet. Otherwise
+   * the live Chart.js scale is read under the id `buildScalesConfig()` gives
+   * it. A side with no axis of its own follows the first configured one.
+   */
+  resolveAxisRange(side) {
+    let id = side === "x" ? "x" : "y";
+    let configured;
+    if (side === "x") {
+      configured = this.isNumericXAxis ? this.xAxis : void 0;
+    } else if (this.yAxes?.length) {
+      const match = this.yAxes.findIndex(
+        (axis2) => (axis2.position ?? "left") === side
+      );
+      const index = match === -1 ? 0 : match;
+      const axis = this.yAxes[index];
+      id = axis.id ?? `y${index}`;
+      configured = axis;
+    }
+    if (configured?.min !== void 0 && configured.max !== void 0) {
+      return { min: configured.min, max: configured.max };
+    }
+    const scale = this.chart?.scales[id];
+    return {
+      min: scale?.min ?? configured?.min ?? 0,
+      max: scale?.max ?? configured?.max ?? 100
+    };
+  }
+  /**
+   * Range pushed to the top and bottom scales, or `undefined` to leave them
+   * alone. A scale prints its values verbatim, and on a `time` axis the raw
+   * range is epoch milliseconds. In `minutes` display the range is converted
+   * to the minutes the chart's own labels show; `date` display has no numeric
+   * equivalent, so the scale keeps its own range.
+   */
+  resolveSlottedXRange() {
+    const range = this.resolveAxisRange("x");
+    if (this.xAxisType !== "time") return range;
+    if (this.timeDisplay !== "minutes") {
+      if (!this.warnedDateDisplayScale) {
+        this.warnedDateDisplayScale = true;
+        console.warn(
+          "[obc-chart] a slotted horizontal scale cannot label a time axis in 'date' display and keeps its own range; use timeDisplay='minutes' or a number axis."
+        );
+      }
+      return void 0;
+    }
+    const pinned = this.xAxis?.min !== void 0 && this.xAxis?.max !== void 0;
+    const reference = this.computeTimeReference();
+    if (reference === void 0 || !this.chart && !pinned) return void 0;
+    const minute = 6e4;
+    return {
+      min: (range.min - reference) / minute,
+      max: (range.max - reference) / minute
+    };
+  }
   /**
    * Update properties on slotted scale elements
    */
   updateScaleProperties(padding) {
-    const yMin = this.chart?.scales["y"]?.min ?? 0;
-    const yMax = this.chart?.scales["y"]?.max ?? 100;
-    const xMin = this.chart?.scales["x"]?.min ?? 0;
-    const xMax = this.chart?.scales["x"]?.max ?? 100;
+    const leftRange = this.resolveAxisRange("left");
+    const rightRange = this.resolveAxisRange("right");
+    const xRange = this.resolveSlottedXRange();
     const effectiveWidth = this.getEffectiveWidth();
     const effectiveHeight = this.getEffectiveHeight();
-    const showLabels = this.hasLabelPadding && effectiveWidth >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && effectiveHeight >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+    const aboveThreshold = effectiveWidth >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && effectiveHeight >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
+    const showLabels = this.hasLabelPadding && aboveThreshold;
+    const compactY = !aboveThreshold && this.rangeLabelsY;
+    const compactX = !aboveThreshold && this.rangeLabelsX;
+    const compactYThickness = compactY ? this.compactLabelThickness("y") : void 0;
+    const compactXThickness = compactX ? this.compactLabelThickness("x") : void 0;
+    const mainLabelsFor = (scale, compact) => {
+      if (compact) {
+        if (!this.savedMainTickmarkLabels.has(scale)) {
+          this.savedMainTickmarkLabels.set(
+            scale,
+            scale.showMainTickmarkLabels ?? false
+          );
+        }
+        return true;
+      }
+      if (!this.savedMainTickmarkLabels.has(scale)) return void 0;
+      const saved = this.savedMainTickmarkLabels.get(scale);
+      this.savedMainTickmarkLabels.delete(scale);
+      return saved;
+    };
+    const bandFor = (scale, compact, thickness) => {
+      if (compact) {
+        if (thickness === void 0 || typeof scale.labelThickness !== "number") {
+          return void 0;
+        }
+        if (!this.savedLabelThickness.has(scale)) {
+          this.savedLabelThickness.set(scale, scale.labelThickness);
+        }
+        return thickness;
+      }
+      const saved = this.savedLabelThickness.get(scale);
+      this.savedLabelThickness.delete(scale);
+      return saved;
+    };
     const verticalViewBoxPadding = this.fixedAspectRatioScaling ? {
       top: Math.round(
-        padding.top * this.scaleReferenceSize / this.height
+        padding.top * this.scaleReferenceSize / effectiveHeight
       ),
       bottom: Math.round(
-        padding.bottom * this.scaleReferenceSize / this.height
+        padding.bottom * this.scaleReferenceSize / effectiveHeight
       )
     } : { top: padding.top, bottom: padding.bottom };
     const horizontalViewBoxPadding = this.fixedAspectRatioScaling ? {
       left: Math.round(
-        padding.left * this.scaleReferenceSize / this.width
+        padding.left * this.scaleReferenceSize / effectiveWidth
       ),
       right: Math.round(
-        padding.right * this.scaleReferenceSize / this.width
+        padding.right * this.scaleReferenceSize / effectiveWidth
       )
     } : { left: padding.left, right: padding.right };
     const updates = [];
+    const rangeProps = (side, range) => this.ownsSlottedScaleRange(side) ? { minValue: range.min, maxValue: range.max } : {};
     if (this.leftScaleSlot) {
       const scales = this.leftScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps("left", leftRange),
           height: effectiveHeight,
           // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -732,6 +1042,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
         if (this.yStepSize !== void 0) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.leftScaleSlot, scale, props]);
       });
     }
@@ -739,15 +1053,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       const scales = this.rightScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: yMin,
-          maxValue: yMax,
+          ...rangeProps("right", rightRange),
           height: effectiveHeight,
           // Use effective height for proper sizing
           paddingTop: verticalViewBoxPadding.top,
           paddingBottom: verticalViewBoxPadding.bottom,
           paddingStart: verticalViewBoxPadding.top,
           paddingEnd: verticalViewBoxPadding.bottom,
-          showLabels,
+          showLabels: showLabels || compactY,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -759,6 +1072,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
         if (this.yStepSize !== void 0) {
           props.primaryTickmarkInterval = this.yStepSize;
         }
+        const band = bandFor(scale, compactY, compactYThickness);
+        const mainLabels = mainLabelsFor(scale, compactY);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.rightScaleSlot, scale, props]);
       });
     }
@@ -766,15 +1083,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       const scales = this.topScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth,
           // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -786,6 +1102,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
         if (this.xStepSize !== void 0) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.topScaleSlot, scale, props]);
       });
     }
@@ -793,15 +1113,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       const scales = this.bottomScaleSlot.assignedElements();
       scales.forEach((scale) => {
         const props = {
-          minValue: xMin,
-          maxValue: xMax,
+          ...xRange,
           width: effectiveWidth,
           // Use effective width for proper sizing
           paddingLeft: horizontalViewBoxPadding.left,
           paddingRight: horizontalViewBoxPadding.right,
           paddingStart: horizontalViewBoxPadding.left,
           paddingEnd: horizontalViewBoxPadding.right,
-          showLabels,
+          showLabels: showLabels || compactX,
           fixedAspectRatio: this.fixedAspectRatioScaling,
           // Use chart's scaleReferenceSize property for proportional scaling
           scaleReferenceSize: this.scaleReferenceSize,
@@ -813,6 +1132,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
         if (this.xStepSize !== void 0) {
           props.primaryTickmarkInterval = this.xStepSize;
         }
+        const band = bandFor(scale, compactX, compactXThickness);
+        const mainLabels = mainLabelsFor(scale, compactX);
+        if (mainLabels !== void 0) props.showMainTickmarkLabels = mainLabels;
+        if (band !== void 0) props.labelThickness = band;
         updates.push([this.bottomScaleSlot, scale, props]);
       });
     }
@@ -820,6 +1143,34 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       Object.assign(scale, props);
     });
   }
+  /**
+   * Whether the chart's axis range is what a slotted scale on this side should
+   * describe. A subclass that slots a scale of its own and gives it a separate
+   * range returns false for that side, otherwise the sync below overwrites it.
+   */
+  ownsSlottedScaleRange(_side) {
+    return true;
+  }
+  /**
+   * Push the current axis ranges to the slotted scales. The full
+   * `updateScaleProperties()` cascade runs before the chart is (re)built and
+   * so reads the previous chart's ranges; this closes that gap once the new
+   * chart exists, and keeps auto-ranged scales in step with the data.
+   */
+  syncSlottedScaleRanges() {
+    const apply = (side, slot, range) => {
+      if (!slot || !range || !this.ownsSlottedScaleRange(side)) return;
+      slot.assignedElements().forEach((scale) => {
+        scale.minValue = range.min;
+        scale.maxValue = range.max;
+      });
+    };
+    apply("left", this.leftScaleSlot, this.resolveAxisRange("left"));
+    apply("right", this.rightScaleSlot, this.resolveAxisRange("right"));
+    const xRange = this.resolveSlottedXRange();
+    apply("top", this.topScaleSlot, xRange);
+    apply("bottom", this.bottomScaleSlot, xRange);
+  }
   hasAnyChanged(changed, props) {
     return props.some((prop) => changed.has(prop));
   }
@@ -893,7 +1244,10 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     if (this.hasAnyChanged(changed, LINE_GRAPH_DIMENSION_PROP_NAMES)) {
       if (this.updateComputedDimensions()) return;
     }
-    if (changed.has("hasLabelPadding") && this.hasExternalScales()) {
+    const belowThreshold = this.isBelowThreshold();
+    const crossedThreshold = this.wasBelowThreshold !== void 0 && this.wasBelowThreshold !== belowThreshold;
+    this.wasBelowThreshold = belowThreshold;
+    if ((changed.has("hasLabelPadding") || changed.has("rangeLabels") || crossedThreshold) && this.hasExternalScales()) {
       this.syncScalesAndChart();
       return;
     }
@@ -948,7 +1302,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     if (!this.canvasEl) return;
     this.resizeObserver = observeLabelThreshold(
       this.canvasEl,
-      () => (this.canvasEl?.clientHeight ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
+      () => (this.canvasEl?.clientHeight ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS && (this.canvasEl?.clientWidth ?? 0) >= RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS,
       {
         rebuild: () => {
           this.chart?.destroy();
@@ -1069,6 +1423,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     const result = {
       ...existingDataset || {},
       data: existingDataset?.data ?? values,
+      yAxisID: existingDataset?.yAxisID ?? this.primaryYAxisId,
       borderColor,
       backgroundColor,
       borderWidth: existingDataset?.borderWidth ?? 2,
@@ -1115,6 +1470,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     const baselineDataset = {
       label: "threshold-baseline",
       data: baselineData,
+      yAxisID: this.primaryYAxisId,
       borderColor: "transparent",
       backgroundColor: "transparent",
       borderWidth: 0,
@@ -1200,6 +1556,36 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     const datasets = fill && fillMode === "threshold" ? this.createThresholdDatasets(values, chartColors) : [this.buildDataset(values, 0, chartColors)];
     return { datasets, labels };
   }
+  /**
+   * One padding source for the Chart.js layout and the slotted scales: two
+   * sources painted the canvas over a scale and inset a scale inside a chart.
+   */
+  computeChartPadding() {
+    const isTooSmall = this.isBelowThreshold();
+    const scaleFactor = this.getScaleFactor();
+    const defaultPaddingScaled = !this.hasLabelPadding ? 0 : this.fixedAspectRatioScaling ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor) : CHART_DIMENSIONS.CANVAS_PADDING;
+    const { y: yTexts, x: xTexts } = this.refreshRangeLabels();
+    const context = this.canvasEl?.getContext("2d");
+    const gutters = (yTexts.length || xTexts.length) && context ? measureRangeLabelGutters(
+      context,
+      this.rangeLabelFont(),
+      yTexts,
+      xTexts
+    ) : { side: 0, bottom: 0 };
+    const scalePadding = this.calculatePaddingFromScales();
+    const freeSide = (side) => {
+      if (!isTooSmall) return defaultPaddingScaled;
+      if (side === "bottom") return gutters.bottom;
+      return side === this.ySide ? gutters.side : 0;
+    };
+    const padding = {
+      top: this.externalScaleDimensions.has("top") ? scalePadding.top : freeSide("top"),
+      right: this.externalScaleDimensions.has("right") ? scalePadding.right : freeSide("right"),
+      bottom: this.externalScaleDimensions.has("bottom") ? scalePadding.bottom : freeSide("bottom"),
+      left: this.externalScaleDimensions.has("left") ? scalePadding.left : freeSide("left")
+    };
+    return padding;
+  }
   /**
    * Get Chart.js options with dynamic sizing and padding
    */
@@ -1207,27 +1593,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     const effectiveWidth = this.getEffectiveWidth();
     const effectiveHeight = this.getEffectiveHeight();
     const isTooSmall = effectiveWidth < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS || effectiveHeight < RECTANGULAR_CHART_DIMENSIONS.MIN_HEIGHT_WITH_LABELS;
-    const scaleFactor = this.getScaleFactor();
-    let padding;
-    const defaultPaddingScaled = !this.hasLabelPadding ? 0 : this.fixedAspectRatioScaling ? Math.round(CHART_DIMENSIONS.CANVAS_PADDING * scaleFactor) : CHART_DIMENSIONS.CANVAS_PADDING;
-    if (isTooSmall && this.hasLabelPadding) {
-      padding = { top: 0, right: 0, bottom: 0, left: 0 };
-    } else if (this.hasExternalScales()) {
-      const scalePadding = this.calculatePaddingFromScales();
-      padding = {
-        top: this.externalScaleDimensions.has("top") ? scalePadding.top : defaultPaddingScaled,
-        right: this.externalScaleDimensions.has("right") ? scalePadding.right : defaultPaddingScaled,
-        bottom: this.externalScaleDimensions.has("bottom") ? scalePadding.bottom : defaultPaddingScaled,
-        left: this.externalScaleDimensions.has("left") ? scalePadding.left : defaultPaddingScaled
-      };
-    } else {
-      padding = {
-        top: defaultPaddingScaled,
-        right: defaultPaddingScaled,
-        bottom: defaultPaddingScaled,
-        left: defaultPaddingScaled
-      };
-    }
+    const padding = this.computeChartPadding();
     if (this.fixedAspectRatioScaling) {
       this.style.setProperty("--chart-width", "100%");
       this.style.setProperty("--chart-height", `${effectiveHeight}px`);
@@ -1282,9 +1648,13 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
   /**
    * Compute reference timestamp for time axis formatting.
    * Returns earliest timestamp for 'date' mode, latest for 'minutes' mode.
+   * A pinned x range supplies the reference instead, so the axis edge stays
+   * the reference while the data has not reached it yet.
    */
   computeTimeReference() {
     if (this.xAxisType !== "time") return void 0;
+    const pinned = this.timeDisplay === "minutes" ? this.xAxis?.max : this.xAxis?.min;
+    if (pinned !== void 0 && Number.isFinite(pinned)) return pinned;
     const timestamps = [];
     if (this.datasets?.length) {
       this.datasets.forEach((ds) => {
@@ -1357,6 +1727,9 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       // No extra margin
       bounds: "data",
       // Use data bounds for edge-to-edge rendering
+      // A category axis has no numeric range to pin.
+      min: this.isNumericXAxis ? this.xAxis?.min : void 0,
+      max: this.isNumericXAxis ? this.xAxis?.max : void 0,
       grid: {
         display: this.showGrid && this.showGridX,
         color: gridColor,
@@ -1457,10 +1830,14 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
       type: "line",
       data: { labels, datasets },
       options: this.getChartOptions(),
-      plugins: this.borderRadiusPosition ? [this.createBorderPlugin()] : []
+      plugins: [
+        ...this.borderRadiusPosition ? [this.createBorderPlugin()] : [],
+        ...this.rangeLabels !== "none" ? [this.createRangeLabelsPlugin()] : []
+      ]
     });
     requestAnimationFrame(() => this.updateLegend());
     this.applyFillModes();
+    this.syncSlottedScaleRanges();
   }
   updateChart() {
     if (!this.chart || !this.canvasEl || !this.canvasEl.isConnected) return;
@@ -1470,6 +1847,7 @@ const _ObcChartLineBase = class _ObcChartLineBase extends LitElement {
     Object.assign(this.chart.options, this.getChartOptions());
     this.applyFillModes();
     this.chart.update();
+    this.syncSlottedScaleRanges();
     requestAnimationFrame(() => this.updateLegend());
   }
   /**
@@ -1595,6 +1973,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Array, attribute: false })
 ], ObcChartLineBase.prototype, "yAxes");
+__decorateClass([
+  property({ type: Object, attribute: false })
+], ObcChartLineBase.prototype, "xAxis");
 __decorateClass([
   property({ type: Boolean })
 ], ObcChartLineBase.prototype, "showGrid");
@@ -1610,6 +1991,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], ObcChartLineBase.prototype, "hasLabelPadding");
+__decorateClass([
+  property({ type: String })
+], ObcChartLineBase.prototype, "rangeLabels");
 __decorateClass([
   property({ type: Boolean })
 ], ObcChartLineBase.prototype, "showPoints");
@@ -1676,6 +2060,7 @@ __decorateClass([
 export {
   LineMode,
   ObcChartLineBase,
+  RangeLabels,
   TimeDisplay,
   XAxisType,
   YAxisPosition