@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.94 → 2.0.0-next.96

package/src/bars-graphs/area-graph/area-graph.stories.ts

@@ -112,7 +112,10 @@ const meta: Meta = {
     labels: {control: 'object'},
 
     // Axis and layout
-    xAxisType: {control: {type: 'radio'}, options: ['category', 'time']},
+    xAxisType: {
+      control: {type: 'radio'},
+      options: ['category', 'time', 'number'],
+    },
     yAxisPosition: {control: {type: 'radio'}, options: ['left', 'right']},
     showGrid: {control: 'boolean'},
     showGridX: {control: 'boolean'},
@@ -177,6 +180,85 @@ export const Semitransparent: Story = {
   name: 'Semitransparent Area Graph (default)',
 };
 
+const UNEVEN_TIME_DATA = [
+  {x: '2026-07-06T10:00:00Z', value: 10},
+  {x: '2026-07-06T10:02:00Z', value: 14},
+  {x: '2026-07-06T10:03:00Z', value: 12},
+  {x: '2026-07-06T10:10:00Z', value: 18},
+  {x: '2026-07-06T10:30:00Z', value: 8},
+  {x: '2026-07-06T11:00:00Z', value: 15},
+];
+
+export const UnevenTimeIntervals: Story = {
+  name: 'Uneven Time Intervals (Time Axis)',
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-area-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  args: {
+    xAxisType: 'time',
+    timeDisplay: 'minutes',
+  },
+  render: (_args) => html`
+    <obc-area-graph
+      .data=${UNEVEN_TIME_DATA}
+      .lineMode=${_args.lineMode}
+      .xAxisType=${_args.xAxisType}
+      .timeDisplay=${_args.timeDisplay}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .showTickMarks=${_args.showTickMarks}
+      .showPoints=${_args.showPoints}
+      .fillMode=${_args.fillMode}
+      .priority=${_args.priority}
+      .width=${_args.width}
+      .height=${_args.height}
+    ></obc-area-graph>
+  `,
+};
+
+const NUMBER_AXIS_DATA = [
+  {x: 0, value: 2},
+  {x: 1, value: 5},
+  {x: 2.5, value: 3},
+  {x: 7, value: 9},
+  {x: 10, value: 6},
+];
+
+export const NumberAxis: Story = {
+  name: 'Number X-Axis',
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-area-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  args: {
+    xAxisType: 'number',
+  },
+  render: (_args) => html`
+    <obc-area-graph
+      .data=${NUMBER_AXIS_DATA}
+      .lineMode=${_args.lineMode}
+      .xAxisType=${_args.xAxisType}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .showTickMarks=${_args.showTickMarks}
+      .showPoints=${_args.showPoints}
+      .fillMode=${_args.fillMode}
+      .priority=${_args.priority}
+      .width=${_args.width}
+      .height=${_args.height}
+    ></obc-area-graph>
+  `,
+};
+
 export const SemitransparentExternalScales: Story = {
   name: 'Semitransparent Area Graph (with external scales)',
   tags: ['skip-test'],

package/src/bars-graphs/line-graph/line-graph.stories.ts

@@ -93,7 +93,7 @@ const meta: Meta = {
     // Axis and layout
     xAxisType: {
       control: {type: 'radio'},
-      options: [XAxisType.category, XAxisType.time],
+      options: [XAxisType.category, XAxisType.time, XAxisType.number],
     },
     yAxisPosition: {
       control: {type: 'radio'},
@@ -188,6 +188,153 @@ export const SingleSeries: Story = {
   `,
 };
 
+const UNEVEN_TIME_DATA = [
+  {x: '2026-07-06T10:00:00Z', value: 10},
+  {x: '2026-07-06T10:02:00Z', value: 14},
+  {x: '2026-07-06T10:03:00Z', value: 12},
+  {x: '2026-07-06T10:10:00Z', value: 18},
+  {x: '2026-07-06T10:30:00Z', value: 8},
+  {x: '2026-07-06T11:00:00Z', value: 15},
+];
+
+export const UnevenTimeIntervals: Story = {
+  name: 'Uneven Time Intervals (Time Axis)',
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-line-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  args: {
+    xAxisType: XAxisType.time,
+    timeDisplay: TimeDisplay.minutes,
+  },
+  render: (_args) => html`
+    <obc-line-graph
+      .data=${UNEVEN_TIME_DATA}
+      .lineMode=${_args.lineMode}
+      .xAxisType=${_args.xAxisType}
+      .timeDisplay=${_args.timeDisplay}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .showTickMarks=${_args.showTickMarks}
+      .showPoints=${_args.showPoints}
+      .priority=${_args.priority}
+      .width=${_args.width}
+      .height=${_args.height}
+    ></obc-line-graph>
+  `,
+};
+
+const DATE_OBJECT_TIME_DATA = [
+  {x: new Date('2026-07-06T10:00:00Z'), value: 10},
+  {x: new Date('2026-07-06T10:04:00Z'), value: 14},
+  {x: '2026-07-06T10:12:00Z', value: 12},
+  {x: Date.parse('2026-07-06T10:30:00Z'), value: 18},
+];
+
+export const DateObjectsTimeAxis: Story = {
+  name: 'Date Objects (Time Axis)',
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-line-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  args: {
+    xAxisType: XAxisType.time,
+    timeDisplay: TimeDisplay.minutes,
+  },
+  render: (_args) => html`
+    <obc-line-graph
+      .data=${DATE_OBJECT_TIME_DATA}
+      .lineMode=${_args.lineMode}
+      .xAxisType=${_args.xAxisType}
+      .timeDisplay=${_args.timeDisplay}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .showTickMarks=${_args.showTickMarks}
+      .showPoints=${_args.showPoints}
+      .priority=${_args.priority}
+      .width=${_args.width}
+      .height=${_args.height}
+    ></obc-line-graph>
+  `,
+};
+
+const NUMBER_AXIS_DATA = [
+  {x: 0, value: 2},
+  {x: 1, value: 5},
+  {x: 2.5, value: 3},
+  {x: 7, value: 9},
+  {x: 10, value: 6},
+];
+
+export const NumberAxis: Story = {
+  name: 'Number X-Axis',
+  play: async ({canvasElement}) => {
+    await document.fonts.ready;
+    const chart = canvasElement.querySelector('obc-line-graph') as
+      | (HTMLElement & {chart?: {update(): void}})
+      | null;
+    chart?.chart?.update();
+  },
+  args: {
+    xAxisType: XAxisType.number,
+  },
+  render: (_args) => html`
+    <obc-line-graph
+      .data=${NUMBER_AXIS_DATA}
+      .lineMode=${_args.lineMode}
+      .xAxisType=${_args.xAxisType}
+      .showGrid=${_args.showGrid}
+      .showGridX=${_args.showGridX}
+      .showGridY=${_args.showGridY}
+      .showTickMarks=${_args.showTickMarks}
+      .showPoints=${_args.showPoints}
+      .priority=${_args.priority}
+      .width=${_args.width}
+      .height=${_args.height}
+    ></obc-line-graph>
+  `,
+};
+
+export const TemporalInput: Story = {
+  name: 'Temporal API Input',
+  tags: ['skip-test'],
+  render: () => {
+    const T = (
+      globalThis as {
+        Temporal?: {Instant: {from(s: string): {epochMilliseconds: number}}};
+      }
+    ).Temporal;
+    if (!T) {
+      return html`<p>
+        Temporal API is not available in this browser — pass ISO strings, Date
+        objects or epoch milliseconds instead.
+      </p>`;
+    }
+    const chart = document.createElement('obc-line-graph');
+    chart.xAxisType = XAxisType.time;
+    chart.timeDisplay = TimeDisplay.minutes;
+    chart.showGrid = true;
+    chart.showGridX = true;
+    chart.showGridY = true;
+    chart.showTickMarks = true;
+    chart.data = [
+      {x: T.Instant.from('2026-07-06T10:00:00Z'), value: 10},
+      {x: T.Instant.from('2026-07-06T10:04:00Z'), value: 14},
+      {x: T.Instant.from('2026-07-06T10:05:00Z'), value: 12},
+      {x: T.Instant.from('2026-07-06T10:20:00Z'), value: 18},
+    ];
+    return chart;
+  },
+};
+
 export const SingleSeriesExternalScales: Story = {
   name: 'Single-Series Line Graph (with external scales)',
   tags: ['skip-test'],

package/src/building-blocks/chart-line/chart-line-base.stories.ts

@@ -210,7 +210,7 @@ Abstract base class for line and area chart components built on Chart.js.
     // Axis and layout
     xAxisType: {
       control: {type: 'radio'},
-      options: [XAxisType.category, XAxisType.time],
+      options: [XAxisType.category, XAxisType.time, XAxisType.number],
     },
     yAxisPosition: {
       control: {type: 'radio'},