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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,4 +6,5 @@ export * from './canvas-layout.js';
6
6
  export * from './rectangular-chart-layout.js';
7
7
  export * from './tooltip.js';
8
8
  export * from './legend.js';
9
+ export * from './x-value.js';
9
10
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charthelpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charthelpers/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
@@ -6,6 +6,7 @@ import { calculateChartPaddingAndLabels, calculateFixedHeightChartLayout, format
6
6
  import { calculateRectangularChartLayout } from "./rectangular-chart-layout.js";
7
7
  import { getChartTooltipOptions } from "./tooltip.js";
8
8
  import { generateLegendHTML } from "./legend.js";
9
+ import { XValueMode, formatXValue, normalizeXValue } from "./x-value.js";
9
10
  export {
10
11
  CENTER_READOUT_CONFIG,
11
12
  CHART_AREA_BACKGROUND_COLOR_VAR,
@@ -17,6 +18,7 @@ export {
17
18
  OUTER_LABEL_CONFIG,
18
19
  RECTANGULAR_CHART_DIMENSIONS,
19
20
  TOOLTIP_CONFIG,
21
+ XValueMode,
20
22
  applyAlphaToColor,
21
23
  calculateChartPaddingAndLabels,
22
24
  calculateFixedHeightChartLayout,
@@ -25,10 +27,12 @@ export {
25
27
  createArcOuterLabelPlugin,
26
28
  formatNumericValue,
27
29
  formatSingleLabel,
30
+ formatXValue,
28
31
  generateLegendHTML,
29
32
  getChartColorsOrDefault,
30
33
  getChartTooltipOptions,
31
34
  getCssVariableValue,
35
+ normalizeXValue,
32
36
  observeThemeChanges
33
37
  };
34
38
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
@@ -0,0 +1,72 @@
1
+ /**
2
+ * X-value normalization and formatting for line/area charts.
3
+ *
4
+ * Charts accept x-values as epoch milliseconds, ISO-8601 strings, `Date`
5
+ * instances, or Temporal objects (`Instant`, `ZonedDateTime`,
6
+ * `PlainDateTime`, `PlainDate`). All are normalized to a single number
7
+ * (epoch milliseconds in `'time'` mode, the plain value in `'number'` mode)
8
+ * so the Chart.js linear scale positions points proportionally.
9
+ *
10
+ * Temporal support is structural (duck-typed): there is no dependency on the
11
+ * Temporal API or a polyfill, and cross-realm/polyfilled objects work.
12
+ * Plain* types (which carry no time zone) are interpreted in the system
13
+ * time zone.
14
+ *
15
+ * @example
16
+ * ```ts
17
+ * normalizeXValue('2026-07-06T10:00:00Z', XValueMode.time); // epoch ms
18
+ * normalizeXValue(new Date(0), XValueMode.time); // 0
19
+ * normalizeXValue({epochMilliseconds: 42}, XValueMode.time); // 42 (Temporal)
20
+ * normalizeXValue('2.5', XValueMode.number); // 2.5
21
+ *
22
+ * formatXValue(ms, XValueMode.time, referenceMs); // '5min' (relative)
23
+ * formatXValue(ms, XValueMode.time); // locale date string
24
+ * formatXValue(2.5, XValueMode.number); // '2.5'
25
+ * ```
26
+ */
27
+ type TemporalEpochLike = {
28
+ epochMilliseconds: number;
29
+ };
30
+ type TemporalPlainLike = {
31
+ year: number;
32
+ month: number;
33
+ day: number;
34
+ hour?: number;
35
+ minute?: number;
36
+ second?: number;
37
+ millisecond?: number;
38
+ };
39
+ /** Structural type covering the supported Temporal object shapes. */
40
+ export type TemporalLike = TemporalEpochLike | TemporalPlainLike;
41
+ /** Every value accepted as a chart x-coordinate. */
42
+ export type ChartXValue = number | string | Date | TemporalLike;
43
+ /** X-axis interpretation used for normalization and formatting. */
44
+ export declare enum XValueMode {
45
+ time = "time",
46
+ number = "number"
47
+ }
48
+ /**
49
+ * Normalize an x-value to a finite number, or NaN when unusable.
50
+ *
51
+ * Rules, in order:
52
+ * 1. `number` → as-is (epoch ms in time mode, plain value in number mode)
53
+ * 2. `Date` → `getTime()`
54
+ * 3. `{epochMilliseconds}` (Temporal Instant / ZonedDateTime) → epoch ms
55
+ * 4. `{year, month, day, …}` (Temporal PlainDateTime / PlainDate) →
56
+ * epoch ms in the system time zone
57
+ * 5. `string` → time mode: `Date.parse()` first, `Number()` fallback;
58
+ * number mode: `Number()` only
59
+ */
60
+ export declare function normalizeXValue(v: ChartXValue, mode: XValueMode): number;
61
+ /**
62
+ * Format a normalized x-value for axis tick labels and tooltips.
63
+ *
64
+ * Mirrors the historical chart-line tick formatting exactly: with a finite
65
+ * `relativeToMs` (time mode) renders `<n>min` relative to it; without one
66
+ * renders `toLocaleDateString()`. Number mode renders the plain value.
67
+ * Callers express the `TimeDisplay` choice by passing or omitting
68
+ * `relativeToMs`.
69
+ */
70
+ export declare function formatXValue(value: number, mode: XValueMode, relativeToMs?: number): string;
71
+ export {};
72
+ //# sourceMappingURL=x-value.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"x-value.d.ts","sourceRoot":"","sources":["../../src/charthelpers/x-value.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,KAAK,iBAAiB,GAAG;IACvB,iBAAiB,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,qEAAqE;AACrE,MAAM,MAAM,YAAY,GAAG,iBAAiB,GAAG,iBAAiB,CAAC;AAEjE,oDAAoD;AACpD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,YAAY,CAAC;AAEhE,mEAAmE;AACnE,oBAAY,UAAU;IACpB,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAeD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,GAAG,MAAM,CAgCxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,UAAU,EAChB,YAAY,CAAC,EAAE,MAAM,GACpB,MAAM,CAQR"}
@@ -0,0 +1,60 @@
1
+ var XValueMode = /* @__PURE__ */ ((XValueMode2) => {
2
+ XValueMode2["time"] = "time";
3
+ XValueMode2["number"] = "number";
4
+ return XValueMode2;
5
+ })(XValueMode || {});
6
+ function isTemporalEpochLike(v) {
7
+ return typeof v.epochMilliseconds === "number";
8
+ }
9
+ function isTemporalPlainLike(v) {
10
+ const t = v;
11
+ return typeof t.year === "number" && typeof t.month === "number" && typeof t.day === "number";
12
+ }
13
+ function normalizeXValue(v, mode) {
14
+ if (typeof v === "number") {
15
+ return Number.isFinite(v) ? v : NaN;
16
+ }
17
+ if (v instanceof Date) {
18
+ return v.getTime();
19
+ }
20
+ if (typeof v === "object" && v !== null) {
21
+ if (isTemporalEpochLike(v)) return v.epochMilliseconds;
22
+ if (isTemporalPlainLike(v)) {
23
+ return new Date(
24
+ v.year,
25
+ v.month - 1,
26
+ v.day,
27
+ v.hour ?? 0,
28
+ v.minute ?? 0,
29
+ v.second ?? 0,
30
+ v.millisecond ?? 0
31
+ ).getTime();
32
+ }
33
+ return NaN;
34
+ }
35
+ if (typeof v === "string") {
36
+ if (v.trim() === "") return NaN;
37
+ if (mode === "time") {
38
+ const parsed = Date.parse(v);
39
+ if (Number.isFinite(parsed)) return parsed;
40
+ }
41
+ const numeric = Number(v);
42
+ return Number.isFinite(numeric) ? numeric : NaN;
43
+ }
44
+ return NaN;
45
+ }
46
+ function formatXValue(value, mode, relativeToMs) {
47
+ if (!Number.isFinite(value)) return "";
48
+ if (mode === "number") return String(value);
49
+ if (relativeToMs !== void 0 && Number.isFinite(relativeToMs)) {
50
+ const minutes = Math.round((value - relativeToMs) / 6e4);
51
+ return `${minutes}min`;
52
+ }
53
+ return new Date(value).toLocaleDateString();
54
+ }
55
+ export {
56
+ XValueMode,
57
+ formatXValue,
58
+ normalizeXValue
59
+ };
60
+ //# sourceMappingURL=x-value.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"x-value.js","sources":["../../src/charthelpers/x-value.ts"],"sourcesContent":["/**\n * X-value normalization and formatting for line/area charts.\n *\n * Charts accept x-values as epoch milliseconds, ISO-8601 strings, `Date`\n * instances, or Temporal objects (`Instant`, `ZonedDateTime`,\n * `PlainDateTime`, `PlainDate`). All are normalized to a single number\n * (epoch milliseconds in `'time'` mode, the plain value in `'number'` mode)\n * so the Chart.js linear scale positions points proportionally.\n *\n * Temporal support is structural (duck-typed): there is no dependency on the\n * Temporal API or a polyfill, and cross-realm/polyfilled objects work.\n * Plain* types (which carry no time zone) are interpreted in the system\n * time zone.\n *\n * @example\n * ```ts\n * normalizeXValue('2026-07-06T10:00:00Z', XValueMode.time); // epoch ms\n * normalizeXValue(new Date(0), XValueMode.time); // 0\n * normalizeXValue({epochMilliseconds: 42}, XValueMode.time); // 42 (Temporal)\n * normalizeXValue('2.5', XValueMode.number); // 2.5\n *\n * formatXValue(ms, XValueMode.time, referenceMs); // '5min' (relative)\n * formatXValue(ms, XValueMode.time); // locale date string\n * formatXValue(2.5, XValueMode.number); // '2.5'\n * ```\n */\n\ntype TemporalEpochLike = {\n epochMilliseconds: number;\n};\n\ntype TemporalPlainLike = {\n year: number;\n month: number;\n day: number;\n hour?: number;\n minute?: number;\n second?: number;\n millisecond?: number;\n};\n\n/** Structural type covering the supported Temporal object shapes. */\nexport type TemporalLike = TemporalEpochLike | TemporalPlainLike;\n\n/** Every value accepted as a chart x-coordinate. */\nexport type ChartXValue = number | string | Date | TemporalLike;\n\n/** X-axis interpretation used for normalization and formatting. */\nexport enum XValueMode {\n time = 'time',\n number = 'number',\n}\n\nfunction isTemporalEpochLike(v: object): v is TemporalEpochLike {\n return typeof (v as TemporalEpochLike).epochMilliseconds === 'number';\n}\n\nfunction isTemporalPlainLike(v: object): v is TemporalPlainLike {\n const t = v as TemporalPlainLike;\n return (\n typeof t.year === 'number' &&\n typeof t.month === 'number' &&\n typeof t.day === 'number'\n );\n}\n\n/**\n * Normalize an x-value to a finite number, or NaN when unusable.\n *\n * Rules, in order:\n * 1. `number` → as-is (epoch ms in time mode, plain value in number mode)\n * 2. `Date` → `getTime()`\n * 3. `{epochMilliseconds}` (Temporal Instant / ZonedDateTime) → epoch ms\n * 4. `{year, month, day, …}` (Temporal PlainDateTime / PlainDate) →\n * epoch ms in the system time zone\n * 5. `string` → time mode: `Date.parse()` first, `Number()` fallback;\n * number mode: `Number()` only\n */\nexport function normalizeXValue(v: ChartXValue, mode: XValueMode): number {\n if (typeof v === 'number') {\n return Number.isFinite(v) ? v : NaN;\n }\n if (v instanceof Date) {\n return v.getTime();\n }\n if (typeof v === 'object' && v !== null) {\n if (isTemporalEpochLike(v)) return v.epochMilliseconds;\n if (isTemporalPlainLike(v)) {\n return new Date(\n v.year,\n v.month - 1,\n v.day,\n v.hour ?? 0,\n v.minute ?? 0,\n v.second ?? 0,\n v.millisecond ?? 0\n ).getTime();\n }\n return NaN;\n }\n if (typeof v === 'string') {\n if (v.trim() === '') return NaN;\n if (mode === XValueMode.time) {\n const parsed = Date.parse(v);\n if (Number.isFinite(parsed)) return parsed;\n }\n const numeric = Number(v);\n return Number.isFinite(numeric) ? numeric : NaN;\n }\n return NaN;\n}\n\n/**\n * Format a normalized x-value for axis tick labels and tooltips.\n *\n * Mirrors the historical chart-line tick formatting exactly: with a finite\n * `relativeToMs` (time mode) renders `<n>min` relative to it; without one\n * renders `toLocaleDateString()`. Number mode renders the plain value.\n * Callers express the `TimeDisplay` choice by passing or omitting\n * `relativeToMs`.\n */\nexport function formatXValue(\n value: number,\n mode: XValueMode,\n relativeToMs?: number\n): string {\n if (!Number.isFinite(value)) return '';\n if (mode === XValueMode.number) return String(value);\n if (relativeToMs !== undefined && Number.isFinite(relativeToMs)) {\n const minutes = Math.round((value - relativeToMs) / 60000);\n return `${minutes}min`;\n }\n return new Date(value).toLocaleDateString();\n}\n"],"names":["XValueMode"],"mappings":"AAgDO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,MAAA,IAAO;AACPA,cAAA,QAAA,IAAS;AAFC,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKZ,SAAS,oBAAoB,GAAmC;AAC9D,SAAO,OAAQ,EAAwB,sBAAsB;AAC/D;AAEA,SAAS,oBAAoB,GAAmC;AAC9D,QAAM,IAAI;AACV,SACE,OAAO,EAAE,SAAS,YAClB,OAAO,EAAE,UAAU,YACnB,OAAO,EAAE,QAAQ;AAErB;AAcO,SAAS,gBAAgB,GAAgB,MAA0B;AACxE,MAAI,OAAO,MAAM,UAAU;AACzB,WAAO,OAAO,SAAS,CAAC,IAAI,IAAI;AAAA,EAClC;AACA,MAAI,aAAa,MAAM;AACrB,WAAO,EAAE,QAAA;AAAA,EACX;AACA,MAAI,OAAO,MAAM,YAAY,MAAM,MAAM;AACvC,QAAI,oBAAoB,CAAC,EAAG,QAAO,EAAE;AACrC,QAAI,oBAAoB,CAAC,GAAG;AAC1B,aAAO,IAAI;AAAA,QACT,EAAE;AAAA,QACF,EAAE,QAAQ;AAAA,QACV,EAAE;AAAA,QACF,EAAE,QAAQ;AAAA,QACV,EAAE,UAAU;AAAA,QACZ,EAAE,UAAU;AAAA,QACZ,EAAE,eAAe;AAAA,MAAA,EACjB,QAAA;AAAA,IACJ;AACA,WAAO;AAAA,EACT;AACA,MAAI,OAAO,MAAM,UAAU;AACzB,QAAI,EAAE,WAAW,GAAI,QAAO;AAC5B,QAAI,SAAS,QAAiB;AAC5B,YAAM,SAAS,KAAK,MAAM,CAAC;AAC3B,UAAI,OAAO,SAAS,MAAM,EAAG,QAAO;AAAA,IACtC;AACA,UAAM,UAAU,OAAO,CAAC;AACxB,WAAO,OAAO,SAAS,OAAO,IAAI,UAAU;AAAA,EAC9C;AACA,SAAO;AACT;AAWO,SAAS,aACd,OACA,MACA,cACQ;AACR,MAAI,CAAC,OAAO,SAAS,KAAK,EAAG,QAAO;AACpC,MAAI,SAAS,SAAmB,QAAO,OAAO,KAAK;AACnD,MAAI,iBAAiB,UAAa,OAAO,SAAS,YAAY,GAAG;AAC/D,UAAM,UAAU,KAAK,OAAO,QAAQ,gBAAgB,GAAK;AACzD,WAAO,GAAG,OAAO;AAAA,EACnB;AACA,SAAO,IAAI,KAAK,KAAK,EAAE,mBAAA;AACzB;"}
@@ -23,7 +23,9 @@ declare const ObcGaugeTrend_base: (new (...args: any[]) => import('../../svghelp
23
23
  * ## Locked Configuration (not user-configurable)
24
24
  * - Fixed aspect ratio scaling: always enabled
25
25
  * - Instrument mode: always enabled (8px border radius)
26
- * - X-axis type: always 'category'
26
+ * - X-axis type: auto-detected 'category' for `{label, value}` data,
27
+ * 'time' for `{x, value}` data (uneven intervals position proportionally).
28
+ * Assigning `xAxisType` explicitly disables auto-detection.
27
29
  * - Line mode: always 'smooth'
28
30
  * - Grid, tick marks, points, legend: always hidden
29
31
  * - Scale advice position: always 'inner'
@@ -85,6 +87,17 @@ declare const ObcGaugeTrend_base: (new (...args: any[]) => import('../../svghelp
85
87
  * ></obc-gauge-trend>
86
88
  * ```
87
89
  *
90
+ * ### Time-based data with uneven intervals
91
+ * ```html
92
+ * <obc-gauge-trend
93
+ * .data=${[
94
+ * {x: '2026-07-06T10:00:00Z', value: 3.5},
95
+ * {x: '2026-07-06T10:03:00Z', value: 4.2},
96
+ * {x: '2026-07-06T10:15:00Z', value: 5.0}
97
+ * ]}
98
+ * ></obc-gauge-trend>
99
+ * ```
100
+ *
88
101
  * @property {number} width - Chart width in pixels (defines aspect ratio)
89
102
  * @property {number} height - Chart height in pixels (defines aspect ratio)
90
103
  * @property {boolean} enhanced - Use enhanced color palette for chart and scales
@@ -101,6 +114,8 @@ declare const ObcGaugeTrend_base: (new (...args: any[]) => import('../../svghelp
101
114
  export declare class ObcGaugeTrend extends ObcGaugeTrend_base {
102
115
  private _barVerticalElement?;
103
116
  private _isFirstUpdate;
117
+ private _explicitXAxisType;
118
+ private _autoAppliedXAxisType?;
104
119
  constructor();
105
120
  firstUpdated(): Promise<void>;
106
121
  disconnectedCallback(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6FG;AACH,qBACa,aAAc,SAAQ,kBAA+B;IAChE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,cAAc,CAAS;;IA6ChB,YAAY;IAWlB,oBAAoB;IAQ7B,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,4BAA4B;IAkFpC;;;;;;;OAOG;IAEH,SAAS,EAAE,SAAS,CAAqB;IAEzC;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,QAAQ,SAAO;IAEf;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAa;IAE3B;;;;;OAKG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;;;;OASG;IAEH,QAAQ,EAAE,QAAQ,CAAiB;IAEnC;;;;;OAKG;IAEH,OAAO,SAAK;IAEZ;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAa;IAE7B;;;OAGG;IAEH,MAAM,EAAE,YAAY,EAAE,CAAM;IAE5B;;OAEG;IAEH,uBAAuB,CAAC,EAAE,MAAM,CAAa;IAO7C;;;OAGG;IAEH,yBAAyB,SAAO;IAEhC;;;OAGG;IAEH,wBAAwB,CAAC,EAAE,MAAM,CAAa;IAE9C;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;OAEG;cACgB,eAAe,IAAI,OAAO;IAI7C;;;OAGG;cACgB,WAAW,IAAI,MAAM,GAAG,SAAS;IAIpD;;OAEG;cACgB,WAAW,IAAI,OAAO;IAIhC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAiC7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAkDpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
1
+ {"version":3,"file":"gauge-trend.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,gBAAgB,EAKjB,MAAM,qDAAqD,CAAC;AAE7D,OAAO,EACL,QAAQ,EAGR,SAAS,EACV,MAAM,oDAAoD,CAAC;AAC5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mDAAmD,CAAC;AAEpF,OAAO,oDAAoD,CAAC;AAG5D,OAAO,EAAC,QAAQ,EAAE,SAAS,EAAC,CAAC;;AAE7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0GG;AACH,qBACa,aAAc,SAAQ,kBAA+B;IAChE,OAAO,CAAC,mBAAmB,CAAC,CAAc;IAC1C,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,qBAAqB,CAAC,CAAY;;IA6C3B,YAAY;IAWlB,oBAAoB;IAQ7B,OAAO,CAAC,yBAAyB;IAWjC,OAAO,CAAC,2BAA2B;IAUnC,OAAO,CAAC,4BAA4B;IAkFpC;;;;;;;OAOG;IAEH,SAAS,EAAE,SAAS,CAAqB;IAEzC;;;OAGG;IAEH,QAAQ,SAAK;IAEb;;;OAGG;IAEH,QAAQ,SAAO;IAEf;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;OAGG;IAEH,aAAa,CAAC,EAAE,MAAM,CAAa;IAEnC;;;;;;;;;;OAUG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAa;IAE3B;;;;;OAKG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;;;;;;;;OASG;IAEH,QAAQ,EAAE,QAAQ,CAAiB;IAEnC;;;;;OAKG;IAEH,OAAO,SAAK;IAEZ;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAa;IAE7B;;;OAGG;IAEH,MAAM,EAAE,YAAY,EAAE,CAAM;IAE5B;;OAEG;IAEH,uBAAuB,CAAC,EAAE,MAAM,CAAa;IAO7C;;;OAGG;IAEH,yBAAyB,SAAO;IAEhC;;;OAGG;IAEH,wBAAwB,CAAC,EAAE,MAAM,CAAa;IAE9C;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;OAEG;cACgB,eAAe,IAAI,OAAO;IAI7C;;;OAGG;cACgB,WAAW,IAAI,MAAM,GAAG,SAAS;IAIpD;;OAEG;cACgB,WAAW,IAAI,OAAO;IAIhC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAuD7C,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAkDpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
@@ -19,6 +19,7 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
19
19
  constructor() {
20
20
  super();
21
21
  this._isFirstUpdate = false;
22
+ this._explicitXAxisType = false;
22
23
  this.scaleType = ScaleType.regular;
23
24
  this.minValue = 0;
24
25
  this.maxValue = 100;
@@ -150,6 +151,17 @@ let ObcGaugeTrend = class extends SetpointMixin(ObcChartLineBase) {
150
151
  return false;
151
152
  }
152
153
  willUpdate(changed) {
154
+ if (changed.has("xAxisType") && this.xAxisType !== this._autoAppliedXAxisType && (this.hasUpdated || this.xAxisType !== XAxisType.category)) {
155
+ this._explicitXAxisType = true;
156
+ }
157
+ if (!this._explicitXAxisType && changed.has("data")) {
158
+ const allHaveX = (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null);
159
+ const target = allHaveX ? XAxisType.time : XAxisType.category;
160
+ if (this.xAxisType !== target) {
161
+ this._autoAppliedXAxisType = target;
162
+ this.xAxisType = target;
163
+ }
164
+ }
153
165
  super.willUpdate(changed);
154
166
  if (changed.has("chartMinValue") || changed.has("chartMaxValue") || changed.has("minValue") || changed.has("maxValue")) {
155
167
  const chartMin = this.chartMinValue ?? this.minValue;
@@ -1 +1 @@
1
- {"version":3,"file":"gauge-trend.js","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcChartLineBase,\n XAxisType,\n YAxisPosition,\n LineMode,\n TimeDisplay,\n} from '../../building-blocks/chart-line/chart-line-base.js';\nimport {BorderRadiusPosition} from '../types.js';\nimport {\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ScaleType,\n} from '../../building-blocks/bar-vertical/bar-vertical.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\n\n// Re-export FillMode and ScaleType for user convenience\nexport {FillMode, ScaleType};\n\n/**\n * Gauge Trend - A navigation instrument combining a line/area chart with an integrated vertical scale.\n *\n * This is a high-level, self-contained component that combines:\n * - A line/area chart (based on `ObcChartLineBase`) with configurable fill mode\n * - An integrated vertical scale (`obc-bar-vertical`) on the right side\n *\n * The component is designed for displaying time-series or categorical trend data alongside a calibrated\n * vertical measurement scale, commonly used in maritime navigation instruments.\n *\n * ## Architecture\n *\n * Internally composed of:\n * - **Base**: `ObcChartLineBase` (line/area graph functionality)\n * - **Right scale**: `obc-bar-vertical` (external scale component)\n *\n * ## Locked Configuration (not user-configurable)\n * - Fixed aspect ratio scaling: always enabled\n * - Instrument mode: always enabled (8px border radius)\n * - X-axis type: always 'category'\n * - Line mode: always 'smooth'\n * - Grid, tick marks, points, legend: always hidden\n * - Scale advice position: always 'inner'\n * - Scale state: automatically inherits from `state` property\n *\n * ## Usage Examples\n *\n * ### Basic gauge trend with default area fill\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {label: 'Jan', value: 3.5},\n * {label: 'Feb', value: 4.2},\n * {label: 'Mar', value: 5.0}\n * ]}\n * .minValue=${3}\n * .maxValue=${7}\n * .value=${5}\n * .width=${480}\n * .height=${480}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Line-only (no fill) - default\n * ```html\n * <obc-gauge-trend\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With area fill\n * ```html\n * <obc-gauge-trend\n * .chartFill=${true}\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With enhanced colors and setpoint\n * ```html\n * <obc-gauge-trend\n * .enhanced=${true}\n * .state=${'in-command'}\n * .setpoint=${5.5}\n * .value=${5.2}\n * .hasBar=${true}\n * .hasScale=${true}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With advice overlays\n * ```html\n * <obc-gauge-trend\n * .hasAdvice=${true}\n * .advice=${[\n * {min: 3, max: 5, type: 'caution', hinted: true},\n * {min: 6, max: 7, type: 'advice', hinted: false}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * @property {number} width - Chart width in pixels (defines aspect ratio)\n * @property {number} height - Chart height in pixels (defines aspect ratio)\n * @property {boolean} enhanced - Use enhanced color palette for chart and scales\n * @property {InstrumentState} state - Instrument state (automatically applied to scale)\n * @property {boolean} chartFill - Enable chart area fill (default: false for line-only)\n *\n * Setpoint properties are inherited from {@link SetpointMixin}.\n * These are forwarded to the internal `obc-bar-vertical` scale:\n * `setpoint`, `newSetpoint`, `touching`, `atSetpoint`, `autoAtSetpoint`,\n * `autoAtSetpointDeadband`, `setpointAtZeroDeadband`, `setpointOverride`.\n * See {@link SetpointMixinInterface} for full documentation.\n * @stable\n */\n@customElement('obc-gauge-trend')\nexport class ObcGaugeTrend extends SetpointMixin(ObcChartLineBase) {\n private _barVerticalElement?: HTMLElement;\n private _isFirstUpdate = false;\n\n constructor() {\n super();\n\n // Chart display options - locked for gauge-trend\n this.legend = false;\n this.showDebugOverlay = false;\n this.showGrid = false;\n this.showTickMarks = false;\n this.showPoints = false;\n\n // Axis configuration - locked for gauge-trend\n this.xAxisType = XAxisType.category;\n this.yAxisPosition = YAxisPosition.left;\n\n // Line rendering - locked for gauge-trend\n this.lineMode = LineMode.smooth;\n\n // Tooltip/unit - locked for gauge-trend (scale shows values)\n this.unit = '';\n this.timeDisplay = TimeDisplay.date;\n\n // Scaling and sizing - locked for gauge-trend\n this.fixedAspectRatioScaling = true;\n this.instrumentMode = true;\n this.borderRadius = 8;\n\n // Border radius positions for chart + scale composition\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild;\n\n // Y-axis configuration (managed internally, single axis only)\n // Note: yAxes will be properly set in willUpdate once properties are initialized\n // Using minValue/maxValue as defaults when chartMinValue/chartMaxValue are undefined\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: this.chartMinValue ?? this.minValue,\n max: this.chartMaxValue ?? this.maxValue,\n },\n ];\n }\n\n override async firstUpdated() {\n // IMPORTANT: create the external scale *before* base firstUpdated runs.\n // The base waits for external scale dimensions to integrate chart padding.\n this._createBarVerticalElement();\n this._updateBorderRadiusPosition();\n\n await super.firstUpdated();\n\n this._isFirstUpdate = false;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Note: We intentionally don't remove _barVerticalElement here.\n // It's a light DOM child that naturally travels with the parent when\n // the component is moved in the DOM. Removing it would cause the scale\n // to be lost on reconnect since firstUpdated() only runs once.\n }\n\n private _createBarVerticalElement() {\n // Create bar-vertical element in light DOM so it can be slotted\n if (!this._barVerticalElement) {\n const barVertical = document.createElement('obc-bar-vertical');\n barVertical.setAttribute('slot', 'right-scale');\n this._barVerticalElement = barVertical;\n this.appendChild(barVertical);\n this._updateBarVerticalProperties();\n }\n }\n\n private _updateBorderRadiusPosition() {\n // When there's no bar and no scale (labels only), round all corners\n if (!this.hasBar && !this.hasScale) {\n this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild;\n } else {\n // Otherwise, use innerFirstChild (rounds left side when scale is on right)\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n }\n }\n\n private _updateBarVerticalProperties() {\n if (!this._barVerticalElement) {\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const barVertical = this._barVerticalElement as any;\n\n // Use getEffectiveHeight() which returns computed height in fixedAspectRatioScaling mode\n // This ensures the bar-vertical gets the correct height that matches the chart's actual size\n const effectiveHeight = this.getEffectiveHeight();\n\n barVertical.minValue = this.minValue;\n barVertical.maxValue = this.maxValue;\n barVertical.height = effectiveHeight;\n barVertical.side = 'right';\n barVertical.hasScale = this.hasScale;\n barVertical.hasBar = this.hasBar;\n // Bar thickness: 48 for scale mode, 24 for bar-only mode (internal, not user-configurable)\n barVertical.barThickness = this.hasScale ? 48 : 24;\n barVertical.scaleType = this.scaleType;\n barVertical.fillMode = this.fillMode;\n barVertical.fillMin = this.fillMin;\n // In 'fill' mode: fillMax always tracks value (bar shows current value)\n // In 'tint' mode: fillMax uses explicit value or defaults to value\n barVertical.fillMax =\n this.fillMode === FillMode.fill\n ? this.value\n : (this.fillMax ?? this.value);\n barVertical.value = this.value;\n barVertical.setpoint = this.setpoint;\n barVertical.newSetpoint = this.newSetpoint;\n barVertical.touching = this.touching;\n barVertical.atSetpoint = this.atSetpoint;\n barVertical.autoAtSetpoint = this.autoAtSetpoint;\n barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband;\n barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband;\n barVertical.animateSetpoint = this.animateSetpoint;\n barVertical.setpointOverride = this.setpointOverride;\n // Advice position is always 'inner' for gauge-trend\n barVertical.advicePosition = AdvicePosition.inner;\n // obc-bar-vertical uses 'advices' (plural), not 'advice' or 'hasAdvice'\n barVertical.advices = this.hasAdvice ? this.advice : [];\n barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval;\n barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval;\n barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval;\n barVertical.scaleBackground = this.hasScale;\n // When hasScale=false, use gray (secondary) background for the bar container\n barVertical.barContainerStyle = this.hasScale\n ? undefined\n : BarContainerStyle.secondary;\n // Pass fixedAspectRatio to match parent's fixedAspectRatioScaling\n barVertical.fixedAspectRatio = this.fixedAspectRatioScaling;\n // Pass scaleReferenceSize from parent (inherited from ObcChartLineBase)\n barVertical.scaleReferenceSize = this.scaleReferenceSize;\n // Derive tickmark visibility from whether intervals are defined\n barVertical.hasPrimaryTickmarks =\n this.primaryTickmarkInterval !== undefined;\n barVertical.hasTertiaryTickmarks =\n this.tertiaryTickmarkInterval !== undefined;\n barVertical.priority = this.priority;\n // Scale state inherits from parent 'state' property automatically\n barVertical.state = this.state;\n\n // Enable instrument mode: only label font size responds to .obc-component-size-* CSS classes\n // Border radius and bar thickness are controlled by explicit values, not CSS variables\n barVertical.instrumentMode = true;\n // Use fixed border radius of 8px (same as medium component size) for consistent instrument appearance\n // This matches the chart's border radius for visual consistency\n barVertical.borderRadius = 8;\n\n // Automatically adjust border radius position based on hasScale\n // When hasScale=false, the bar-vertical should have outerLastChild border radius\n // When hasScale=true, it should be middleChild (has scale background as neighbor)\n barVertical.borderRadiusPosition = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n\n // Auto-derive: show dot indicator when no bar is shown\n barVertical.highlightCurrentValue = !this.hasBar;\n }\n\n /**\n * Scale type for the vertical scale.\n * - `'regular'`: Standard tick lengths (default)\n * - `'condensed'`: Shorter tick lengths for compact display\n *\n * Hidden from Storybook controls via argTypes configuration.\n * @availableWhen hasScale==true\n */\n @property({type: String})\n scaleType: ScaleType = ScaleType.regular;\n\n /**\n * Minimum value for the scale range.\n * Also used as chart y-axis minimum when `chartMinValue` is undefined.\n */\n @property({type: Number})\n minValue = 0;\n\n /**\n * Maximum value for the scale range.\n * Also used as chart y-axis maximum when `chartMaxValue` is undefined.\n */\n @property({type: Number})\n maxValue = 100;\n\n /**\n * Minimum value for the chart y-axis.\n * When undefined, defaults to `minValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMinValue?: number = undefined;\n\n /**\n * Maximum value for the chart y-axis.\n * When undefined, defaults to `maxValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMaxValue?: number = undefined;\n\n /**\n * Current value displayed on the vertical scale.\n *\n * This is the primary value property that drives:\n * - The bar fill level (when `hasBar=true`)\n * - The dot indicator position (when `hasBar=false`)\n * - The `fillMax` value (when `fillMax` is not explicitly set)\n *\n * In typical usage, you only need to set this property to update the gauge.\n * @availableWhen hasBar==true || hasScale==true\n */\n @property({type: Number})\n value?: number = undefined;\n\n /**\n * Show bar on the vertical scale.\n *\n * When `true`, displays a filled bar indicating the current value.\n * When `false`, a dot indicator is automatically shown at the value position instead.\n */\n @property({type: Boolean})\n hasBar = false;\n\n /**\n * Show scale tick marks and labels.\n */\n @property({type: Boolean})\n hasScale = false;\n\n /**\n * Show advice overlays on the vertical scale.\n */\n @property({type: Boolean})\n hasAdvice = false;\n\n /**\n * Fill mode for the bar.\n * - `'fill'`: Bar fills from `fillMin` to `value` — the bar visually tracks the current value.\n * The `fillMax` property is **ignored** in this mode.\n * - `'tint'`: Bar fills from `fillMin` to `fillMax` — an explicit highlighted range.\n * Use this when you want to show a fixed range independent of the current value.\n *\n * In both modes, `fillMin` is the origin point (e.g., 0 in a -100..100 scale).\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String})\n fillMode: FillMode = FillMode.fill;\n\n /**\n * Fill origin value - the starting point for the bar fill.\n * In both fill modes, the bar fills from this value toward the current value.\n * For scales like -100..100, set this to 0 to have the bar fill up or down from zero.\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number})\n fillMin = 0;\n\n /**\n * Maximum fill value for the bar (only used in `'tint'` mode).\n *\n * In `'fill'` mode, this property is **ignored** — the bar always fills to `value`.\n *\n * In `'tint'` mode, this defines the upper bound of the highlighted range.\n * When `undefined`, defaults to `value`.\n * @availableWhen hasBar==true && value!=undefined && fillMode==tint\n */\n @property({type: Number})\n fillMax?: number = undefined;\n\n /**\n * Advice/alert overlays for the vertical scale.\n * @availableWhen hasAdvice==true\n */\n @property({type: Array, attribute: false})\n advice: LinearAdvice[] = [];\n\n /**\n * Primary tick interval for the vertical scale (longest ticks with labels).\n */\n @property({type: Number})\n primaryTickmarkInterval?: number = undefined;\n\n // Setpoint properties (setpoint, newSetpoint, touching, atSetpoint,\n // autoAtSetpoint, autoAtSetpointDeadband, setpointAtZeroDeadband,\n // setpointOverride, computeAtSetpoint()) are provided by SetpointMixin.\n // See setpoint-mixin.ts for full docs.\n\n /**\n * Secondary tick interval for the vertical scale (medium ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n secondaryTickmarkInterval = 0.5;\n\n /**\n * Tertiary tick interval for the vertical scale (shortest ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n tertiaryTickmarkInterval?: number = undefined;\n\n /**\n * Enable chart area fill.\n * When true, fills the area under the line with semitransparent color.\n * When false (default), renders as line-only chart.\n */\n @property({type: Boolean})\n chartFill = false;\n\n /**\n * Apply fill when chartFill is true.\n */\n protected override shouldApplyFill(): boolean {\n return this.chartFill;\n }\n\n /**\n * Return the fill mode for area rendering.\n * Maps chartFill boolean to base class fillMode.\n */\n protected override getFillMode(): string | undefined {\n return this.chartFill ? 'semitransparent' : undefined;\n }\n\n /**\n * Stacking is not used in gauge-trend (always false).\n */\n protected override shouldStack(): boolean {\n return false;\n }\n\n override willUpdate(changed: Map<PropertyKey, unknown>) {\n super.willUpdate(changed);\n\n // Update y-axis range when chart or scale min/max changes\n // Note: yAxes is managed internally - users cannot set multiple axes\n // When chartMinValue/chartMaxValue are undefined, fall back to minValue/maxValue\n if (\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue') ||\n changed.has('minValue') ||\n changed.has('maxValue')\n ) {\n const chartMin = this.chartMinValue ?? this.minValue;\n const chartMax = this.chartMaxValue ?? this.maxValue;\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: chartMin,\n max: chartMax,\n },\n ];\n }\n\n // Adjust chart's border radius position for external scales based on hasScale\n // This needs to be set before render, so we do it in willUpdate\n if (changed.has('hasScale')) {\n this.borderRadiusPositionExternalScales = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n }\n }\n\n override updated(changed: Map<PropertyKey, unknown>) {\n // Handle chartFill changes by forcing a data refresh\n // This triggers the base class to update the chart with new fill settings\n if (changed.has('chartFill') && this.data) {\n // Create a shallow copy to trigger the base class's watched property detection\n this.data = [...this.data];\n }\n\n super.updated(changed);\n // Update border radius position when bar/scale visibility changes\n if (changed.has('hasBar') || changed.has('hasScale')) {\n this._updateBorderRadiusPosition();\n }\n // Keep the internal right-scale in sync with public API changes.\n // (Mirrors the storybook “chart integration” examples, but encapsulated.)\n if (!this._barVerticalElement || this._isFirstUpdate) return;\n\n const shouldUpdateScale =\n changed.has('minValue') ||\n changed.has('maxValue') ||\n changed.has('value') ||\n changed.has('setpoint') ||\n changed.has('newSetpoint') ||\n changed.has('touching') ||\n changed.has('atSetpoint') ||\n changed.has('autoAtSetpoint') ||\n changed.has('autoAtSetpointDeadband') ||\n changed.has('setpointAtZeroDeadband') ||\n changed.has('setpointOverride') ||\n changed.has('hasBar') ||\n changed.has('hasScale') ||\n changed.has('hasAdvice') ||\n changed.has('fillMode') ||\n changed.has('fillMin') ||\n changed.has('fillMax') ||\n changed.has('advice') ||\n changed.has('primaryTickmarkInterval') ||\n changed.has('secondaryTickmarkInterval') ||\n changed.has('tertiaryTickmarkInterval') ||\n changed.has('scaleType') ||\n changed.has('state') || // Scale state inherits from parent 'state'\n changed.has('priority') ||\n changed.has('height') ||\n changed.has('width') ||\n changed.has('scaleReferenceSize') ||\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue');\n\n if (shouldUpdateScale) this._updateBarVerticalProperties();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-gauge-trend': ObcGaugeTrend;\n }\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"gauge-trend.js","sources":["../../../src/navigation-instruments/gauge-trend/gauge-trend.ts"],"sourcesContent":["import {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n ObcChartLineBase,\n XAxisType,\n YAxisPosition,\n LineMode,\n TimeDisplay,\n} from '../../building-blocks/chart-line/chart-line-base.js';\nimport {BorderRadiusPosition} from '../types.js';\nimport {\n FillMode,\n AdvicePosition,\n BarContainerStyle,\n ScaleType,\n} from '../../building-blocks/bar-vertical/bar-vertical.js';\nimport type {LinearAdvice} from '../../building-blocks/instrument-linear/advice.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport '../../building-blocks/bar-vertical/bar-vertical.js';\n\n// Re-export FillMode and ScaleType for user convenience\nexport {FillMode, ScaleType};\n\n/**\n * Gauge Trend - A navigation instrument combining a line/area chart with an integrated vertical scale.\n *\n * This is a high-level, self-contained component that combines:\n * - A line/area chart (based on `ObcChartLineBase`) with configurable fill mode\n * - An integrated vertical scale (`obc-bar-vertical`) on the right side\n *\n * The component is designed for displaying time-series or categorical trend data alongside a calibrated\n * vertical measurement scale, commonly used in maritime navigation instruments.\n *\n * ## Architecture\n *\n * Internally composed of:\n * - **Base**: `ObcChartLineBase` (line/area graph functionality)\n * - **Right scale**: `obc-bar-vertical` (external scale component)\n *\n * ## Locked Configuration (not user-configurable)\n * - Fixed aspect ratio scaling: always enabled\n * - Instrument mode: always enabled (8px border radius)\n * - X-axis type: auto-detected — 'category' for `{label, value}` data,\n * 'time' for `{x, value}` data (uneven intervals position proportionally).\n * Assigning `xAxisType` explicitly disables auto-detection.\n * - Line mode: always 'smooth'\n * - Grid, tick marks, points, legend: always hidden\n * - Scale advice position: always 'inner'\n * - Scale state: automatically inherits from `state` property\n *\n * ## Usage Examples\n *\n * ### Basic gauge trend with default area fill\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {label: 'Jan', value: 3.5},\n * {label: 'Feb', value: 4.2},\n * {label: 'Mar', value: 5.0}\n * ]}\n * .minValue=${3}\n * .maxValue=${7}\n * .value=${5}\n * .width=${480}\n * .height=${480}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Line-only (no fill) - default\n * ```html\n * <obc-gauge-trend\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With area fill\n * ```html\n * <obc-gauge-trend\n * .chartFill=${true}\n * .data=${chartData}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With enhanced colors and setpoint\n * ```html\n * <obc-gauge-trend\n * .enhanced=${true}\n * .state=${'in-command'}\n * .setpoint=${5.5}\n * .value=${5.2}\n * .hasBar=${true}\n * .hasScale=${true}\n * ></obc-gauge-trend>\n * ```\n *\n * ### With advice overlays\n * ```html\n * <obc-gauge-trend\n * .hasAdvice=${true}\n * .advice=${[\n * {min: 3, max: 5, type: 'caution', hinted: true},\n * {min: 6, max: 7, type: 'advice', hinted: false}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * ### Time-based data with uneven intervals\n * ```html\n * <obc-gauge-trend\n * .data=${[\n * {x: '2026-07-06T10:00:00Z', value: 3.5},\n * {x: '2026-07-06T10:03:00Z', value: 4.2},\n * {x: '2026-07-06T10:15:00Z', value: 5.0}\n * ]}\n * ></obc-gauge-trend>\n * ```\n *\n * @property {number} width - Chart width in pixels (defines aspect ratio)\n * @property {number} height - Chart height in pixels (defines aspect ratio)\n * @property {boolean} enhanced - Use enhanced color palette for chart and scales\n * @property {InstrumentState} state - Instrument state (automatically applied to scale)\n * @property {boolean} chartFill - Enable chart area fill (default: false for line-only)\n *\n * Setpoint properties are inherited from {@link SetpointMixin}.\n * These are forwarded to the internal `obc-bar-vertical` scale:\n * `setpoint`, `newSetpoint`, `touching`, `atSetpoint`, `autoAtSetpoint`,\n * `autoAtSetpointDeadband`, `setpointAtZeroDeadband`, `setpointOverride`.\n * See {@link SetpointMixinInterface} for full documentation.\n * @stable\n */\n@customElement('obc-gauge-trend')\nexport class ObcGaugeTrend extends SetpointMixin(ObcChartLineBase) {\n private _barVerticalElement?: HTMLElement;\n private _isFirstUpdate = false;\n private _explicitXAxisType = false;\n private _autoAppliedXAxisType?: XAxisType;\n\n constructor() {\n super();\n\n // Chart display options - locked for gauge-trend\n this.legend = false;\n this.showDebugOverlay = false;\n this.showGrid = false;\n this.showTickMarks = false;\n this.showPoints = false;\n\n // Axis configuration - locked for gauge-trend\n this.xAxisType = XAxisType.category;\n this.yAxisPosition = YAxisPosition.left;\n\n // Line rendering - locked for gauge-trend\n this.lineMode = LineMode.smooth;\n\n // Tooltip/unit - locked for gauge-trend (scale shows values)\n this.unit = '';\n this.timeDisplay = TimeDisplay.date;\n\n // Scaling and sizing - locked for gauge-trend\n this.fixedAspectRatioScaling = true;\n this.instrumentMode = true;\n this.borderRadius = 8;\n\n // Border radius positions for chart + scale composition\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n this.borderRadiusPositionExternalScales = BorderRadiusPosition.middleChild;\n\n // Y-axis configuration (managed internally, single axis only)\n // Note: yAxes will be properly set in willUpdate once properties are initialized\n // Using minValue/maxValue as defaults when chartMinValue/chartMaxValue are undefined\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: this.chartMinValue ?? this.minValue,\n max: this.chartMaxValue ?? this.maxValue,\n },\n ];\n }\n\n override async firstUpdated() {\n // IMPORTANT: create the external scale *before* base firstUpdated runs.\n // The base waits for external scale dimensions to integrate chart padding.\n this._createBarVerticalElement();\n this._updateBorderRadiusPosition();\n\n await super.firstUpdated();\n\n this._isFirstUpdate = false;\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n // Note: We intentionally don't remove _barVerticalElement here.\n // It's a light DOM child that naturally travels with the parent when\n // the component is moved in the DOM. Removing it would cause the scale\n // to be lost on reconnect since firstUpdated() only runs once.\n }\n\n private _createBarVerticalElement() {\n // Create bar-vertical element in light DOM so it can be slotted\n if (!this._barVerticalElement) {\n const barVertical = document.createElement('obc-bar-vertical');\n barVertical.setAttribute('slot', 'right-scale');\n this._barVerticalElement = barVertical;\n this.appendChild(barVertical);\n this._updateBarVerticalProperties();\n }\n }\n\n private _updateBorderRadiusPosition() {\n // When there's no bar and no scale (labels only), round all corners\n if (!this.hasBar && !this.hasScale) {\n this.borderRadiusPosition = BorderRadiusPosition.middleRoundedChild;\n } else {\n // Otherwise, use innerFirstChild (rounds left side when scale is on right)\n this.borderRadiusPosition = BorderRadiusPosition.innerFirstChild;\n }\n }\n\n private _updateBarVerticalProperties() {\n if (!this._barVerticalElement) {\n return;\n }\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const barVertical = this._barVerticalElement as any;\n\n // Use getEffectiveHeight() which returns computed height in fixedAspectRatioScaling mode\n // This ensures the bar-vertical gets the correct height that matches the chart's actual size\n const effectiveHeight = this.getEffectiveHeight();\n\n barVertical.minValue = this.minValue;\n barVertical.maxValue = this.maxValue;\n barVertical.height = effectiveHeight;\n barVertical.side = 'right';\n barVertical.hasScale = this.hasScale;\n barVertical.hasBar = this.hasBar;\n // Bar thickness: 48 for scale mode, 24 for bar-only mode (internal, not user-configurable)\n barVertical.barThickness = this.hasScale ? 48 : 24;\n barVertical.scaleType = this.scaleType;\n barVertical.fillMode = this.fillMode;\n barVertical.fillMin = this.fillMin;\n // In 'fill' mode: fillMax always tracks value (bar shows current value)\n // In 'tint' mode: fillMax uses explicit value or defaults to value\n barVertical.fillMax =\n this.fillMode === FillMode.fill\n ? this.value\n : (this.fillMax ?? this.value);\n barVertical.value = this.value;\n barVertical.setpoint = this.setpoint;\n barVertical.newSetpoint = this.newSetpoint;\n barVertical.touching = this.touching;\n barVertical.atSetpoint = this.atSetpoint;\n barVertical.autoAtSetpoint = this.autoAtSetpoint;\n barVertical.autoAtSetpointDeadband = this.autoAtSetpointDeadband;\n barVertical.setpointAtZeroDeadband = this.setpointAtZeroDeadband;\n barVertical.animateSetpoint = this.animateSetpoint;\n barVertical.setpointOverride = this.setpointOverride;\n // Advice position is always 'inner' for gauge-trend\n barVertical.advicePosition = AdvicePosition.inner;\n // obc-bar-vertical uses 'advices' (plural), not 'advice' or 'hasAdvice'\n barVertical.advices = this.hasAdvice ? this.advice : [];\n barVertical.primaryTickmarkInterval = this.primaryTickmarkInterval;\n barVertical.secondaryTickmarkInterval = this.secondaryTickmarkInterval;\n barVertical.tertiaryTickmarkInterval = this.tertiaryTickmarkInterval;\n barVertical.scaleBackground = this.hasScale;\n // When hasScale=false, use gray (secondary) background for the bar container\n barVertical.barContainerStyle = this.hasScale\n ? undefined\n : BarContainerStyle.secondary;\n // Pass fixedAspectRatio to match parent's fixedAspectRatioScaling\n barVertical.fixedAspectRatio = this.fixedAspectRatioScaling;\n // Pass scaleReferenceSize from parent (inherited from ObcChartLineBase)\n barVertical.scaleReferenceSize = this.scaleReferenceSize;\n // Derive tickmark visibility from whether intervals are defined\n barVertical.hasPrimaryTickmarks =\n this.primaryTickmarkInterval !== undefined;\n barVertical.hasTertiaryTickmarks =\n this.tertiaryTickmarkInterval !== undefined;\n barVertical.priority = this.priority;\n // Scale state inherits from parent 'state' property automatically\n barVertical.state = this.state;\n\n // Enable instrument mode: only label font size responds to .obc-component-size-* CSS classes\n // Border radius and bar thickness are controlled by explicit values, not CSS variables\n barVertical.instrumentMode = true;\n // Use fixed border radius of 8px (same as medium component size) for consistent instrument appearance\n // This matches the chart's border radius for visual consistency\n barVertical.borderRadius = 8;\n\n // Automatically adjust border radius position based on hasScale\n // When hasScale=false, the bar-vertical should have outerLastChild border radius\n // When hasScale=true, it should be middleChild (has scale background as neighbor)\n barVertical.borderRadiusPosition = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n\n // Auto-derive: show dot indicator when no bar is shown\n barVertical.highlightCurrentValue = !this.hasBar;\n }\n\n /**\n * Scale type for the vertical scale.\n * - `'regular'`: Standard tick lengths (default)\n * - `'condensed'`: Shorter tick lengths for compact display\n *\n * Hidden from Storybook controls via argTypes configuration.\n * @availableWhen hasScale==true\n */\n @property({type: String})\n scaleType: ScaleType = ScaleType.regular;\n\n /**\n * Minimum value for the scale range.\n * Also used as chart y-axis minimum when `chartMinValue` is undefined.\n */\n @property({type: Number})\n minValue = 0;\n\n /**\n * Maximum value for the scale range.\n * Also used as chart y-axis maximum when `chartMaxValue` is undefined.\n */\n @property({type: Number})\n maxValue = 100;\n\n /**\n * Minimum value for the chart y-axis.\n * When undefined, defaults to `minValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMinValue?: number = undefined;\n\n /**\n * Maximum value for the chart y-axis.\n * When undefined, defaults to `maxValue` to keep chart and scale aligned.\n */\n @property({type: Number})\n chartMaxValue?: number = undefined;\n\n /**\n * Current value displayed on the vertical scale.\n *\n * This is the primary value property that drives:\n * - The bar fill level (when `hasBar=true`)\n * - The dot indicator position (when `hasBar=false`)\n * - The `fillMax` value (when `fillMax` is not explicitly set)\n *\n * In typical usage, you only need to set this property to update the gauge.\n * @availableWhen hasBar==true || hasScale==true\n */\n @property({type: Number})\n value?: number = undefined;\n\n /**\n * Show bar on the vertical scale.\n *\n * When `true`, displays a filled bar indicating the current value.\n * When `false`, a dot indicator is automatically shown at the value position instead.\n */\n @property({type: Boolean})\n hasBar = false;\n\n /**\n * Show scale tick marks and labels.\n */\n @property({type: Boolean})\n hasScale = false;\n\n /**\n * Show advice overlays on the vertical scale.\n */\n @property({type: Boolean})\n hasAdvice = false;\n\n /**\n * Fill mode for the bar.\n * - `'fill'`: Bar fills from `fillMin` to `value` — the bar visually tracks the current value.\n * The `fillMax` property is **ignored** in this mode.\n * - `'tint'`: Bar fills from `fillMin` to `fillMax` — an explicit highlighted range.\n * Use this when you want to show a fixed range independent of the current value.\n *\n * In both modes, `fillMin` is the origin point (e.g., 0 in a -100..100 scale).\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: String})\n fillMode: FillMode = FillMode.fill;\n\n /**\n * Fill origin value - the starting point for the bar fill.\n * In both fill modes, the bar fills from this value toward the current value.\n * For scales like -100..100, set this to 0 to have the bar fill up or down from zero.\n * @availableWhen hasBar==true && value!=undefined\n */\n @property({type: Number})\n fillMin = 0;\n\n /**\n * Maximum fill value for the bar (only used in `'tint'` mode).\n *\n * In `'fill'` mode, this property is **ignored** — the bar always fills to `value`.\n *\n * In `'tint'` mode, this defines the upper bound of the highlighted range.\n * When `undefined`, defaults to `value`.\n * @availableWhen hasBar==true && value!=undefined && fillMode==tint\n */\n @property({type: Number})\n fillMax?: number = undefined;\n\n /**\n * Advice/alert overlays for the vertical scale.\n * @availableWhen hasAdvice==true\n */\n @property({type: Array, attribute: false})\n advice: LinearAdvice[] = [];\n\n /**\n * Primary tick interval for the vertical scale (longest ticks with labels).\n */\n @property({type: Number})\n primaryTickmarkInterval?: number = undefined;\n\n // Setpoint properties (setpoint, newSetpoint, touching, atSetpoint,\n // autoAtSetpoint, autoAtSetpointDeadband, setpointAtZeroDeadband,\n // setpointOverride, computeAtSetpoint()) are provided by SetpointMixin.\n // See setpoint-mixin.ts for full docs.\n\n /**\n * Secondary tick interval for the vertical scale (medium ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n secondaryTickmarkInterval = 0.5;\n\n /**\n * Tertiary tick interval for the vertical scale (shortest ticks).\n * @availableWhen hasScale==true\n */\n @property({type: Number})\n tertiaryTickmarkInterval?: number = undefined;\n\n /**\n * Enable chart area fill.\n * When true, fills the area under the line with semitransparent color.\n * When false (default), renders as line-only chart.\n */\n @property({type: Boolean})\n chartFill = false;\n\n /**\n * Apply fill when chartFill is true.\n */\n protected override shouldApplyFill(): boolean {\n return this.chartFill;\n }\n\n /**\n * Return the fill mode for area rendering.\n * Maps chartFill boolean to base class fillMode.\n */\n protected override getFillMode(): string | undefined {\n return this.chartFill ? 'semitransparent' : undefined;\n }\n\n /**\n * Stacking is not used in gauge-trend (always false).\n */\n protected override shouldStack(): boolean {\n return false;\n }\n\n override willUpdate(changed: Map<PropertyKey, unknown>) {\n // Auto axis detection: {x, value} data switches to time spacing, {label,\n // value} stays category. An explicit xAxisType assignment (anything we\n // did not auto-apply) permanently disables auto-detection. The\n // constructor's 'category' default lands in the first changed-map but is\n // not treated as explicit (hasUpdated is false and it equals the default).\n if (\n changed.has('xAxisType') &&\n this.xAxisType !== this._autoAppliedXAxisType &&\n (this.hasUpdated || this.xAxisType !== XAxisType.category)\n ) {\n this._explicitXAxisType = true;\n }\n if (!this._explicitXAxisType && changed.has('data')) {\n const allHaveX =\n (this.data?.length ?? 0) > 0 && this.data.every((d) => d.x != null);\n const target = allHaveX ? XAxisType.time : XAxisType.category;\n if (this.xAxisType !== target) {\n this._autoAppliedXAxisType = target;\n this.xAxisType = target;\n }\n }\n\n super.willUpdate(changed);\n\n // Update y-axis range when chart or scale min/max changes\n // Note: yAxes is managed internally - users cannot set multiple axes\n // When chartMinValue/chartMaxValue are undefined, fall back to minValue/maxValue\n if (\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue') ||\n changed.has('minValue') ||\n changed.has('maxValue')\n ) {\n const chartMin = this.chartMinValue ?? this.minValue;\n const chartMax = this.chartMaxValue ?? this.maxValue;\n this.yAxes = [\n {\n id: 'y',\n position: 'left',\n min: chartMin,\n max: chartMax,\n },\n ];\n }\n\n // Adjust chart's border radius position for external scales based on hasScale\n // This needs to be set before render, so we do it in willUpdate\n if (changed.has('hasScale')) {\n this.borderRadiusPositionExternalScales = this.hasScale\n ? BorderRadiusPosition.middleChild\n : BorderRadiusPosition.outerLastChild;\n }\n }\n\n override updated(changed: Map<PropertyKey, unknown>) {\n // Handle chartFill changes by forcing a data refresh\n // This triggers the base class to update the chart with new fill settings\n if (changed.has('chartFill') && this.data) {\n // Create a shallow copy to trigger the base class's watched property detection\n this.data = [...this.data];\n }\n\n super.updated(changed);\n // Update border radius position when bar/scale visibility changes\n if (changed.has('hasBar') || changed.has('hasScale')) {\n this._updateBorderRadiusPosition();\n }\n // Keep the internal right-scale in sync with public API changes.\n // (Mirrors the storybook “chart integration” examples, but encapsulated.)\n if (!this._barVerticalElement || this._isFirstUpdate) return;\n\n const shouldUpdateScale =\n changed.has('minValue') ||\n changed.has('maxValue') ||\n changed.has('value') ||\n changed.has('setpoint') ||\n changed.has('newSetpoint') ||\n changed.has('touching') ||\n changed.has('atSetpoint') ||\n changed.has('autoAtSetpoint') ||\n changed.has('autoAtSetpointDeadband') ||\n changed.has('setpointAtZeroDeadband') ||\n changed.has('setpointOverride') ||\n changed.has('hasBar') ||\n changed.has('hasScale') ||\n changed.has('hasAdvice') ||\n changed.has('fillMode') ||\n changed.has('fillMin') ||\n changed.has('fillMax') ||\n changed.has('advice') ||\n changed.has('primaryTickmarkInterval') ||\n changed.has('secondaryTickmarkInterval') ||\n changed.has('tertiaryTickmarkInterval') ||\n changed.has('scaleType') ||\n changed.has('state') || // Scale state inherits from parent 'state'\n changed.has('priority') ||\n changed.has('height') ||\n changed.has('width') ||\n changed.has('scaleReferenceSize') ||\n changed.has('chartMinValue') ||\n changed.has('chartMaxValue');\n\n if (shouldUpdateScale) this._updateBarVerticalProperties();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'obc-gauge-trend': ObcGaugeTrend;\n }\n}\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oicl/openbridge-webcomponents",
3
- "version": "2.0.0-next.94",
3
+ "version": "2.0.0-next.95",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",