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

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

@@ -107,6 +107,7 @@ const meta: Meta = {
       .showGridX=${_args.showGridX}
       .showGridY=${_args.showGridY}
       .showTickMarks=${_args.showTickMarks}
+      .rangeLabels=${_args.rangeLabels}
       .xTicksLimit=${_args.xTicksLimit}
       .xStepSize=${_args.xStepSize}
       .yTicksLimit=${_args.yTicksLimit}
@@ -155,6 +156,10 @@ const meta: Meta = {
       description: 'Show horizontal grid lines (y-axis). Default: true',
     },
     showTickMarks: {control: 'boolean'},
+    rangeLabels: {
+      control: {type: 'radio'},
+      options: ['none', 'y', 'x', 'xy'],
+    },
     xTicksLimit: {
       control: {type: 'number'},
       description: 'Max number of x-axis ticks/grid lines (optional)',
@@ -231,6 +236,7 @@ const meta: Meta = {
     showGridX: true, // Component defaults to false, but stories show grid by default
     showGridY: true, // Component defaults to false, but stories show grid by default
     showTickMarks: true, // Component defaults to false, but stories show tick marks by default
+    rangeLabels: 'none',
     xTicksLimit: undefined,
     xStepSize: undefined,
     yTicksLimit: undefined,
@@ -338,6 +344,24 @@ export const MinHeight: Story = {
   },
 };
 
+export const MinHeightRangeLabels: Story = {
+  name: 'Minimal Height With Range Labels (48px)',
+  args: {
+    width: 120,
+    height: 48,
+    rangeLabels: 'xy',
+  },
+};
+
+export const BelowThresholdRangeLabels: Story = {
+  name: 'Below Threshold With Range Labels (191px, Y Only)',
+  args: {
+    width: 288,
+    height: 191,
+    rangeLabels: 'y',
+  },
+};
+
 export const ThresholdHeight: Story = {
   name: 'Threshold Height Line Graph (192px, where labels appear)',
   args: {
@@ -916,6 +940,106 @@ export const ExternalScalesMinimal: Story = {
   `,
 };
 
+export const ExternalScalesRangeLabels: Story = {
+  name: 'External Scales With Range Labels (160×160, Bottom + Right)',
+  play: async () => {
+    await new Promise((resolve) => setTimeout(resolve, 300));
+  },
+  argTypes: {
+    priority: {
+      control: 'select',
+      options: Object.values(Priority),
+    },
+  },
+  args: {
+    width: 160,
+    height: 160,
+    rangeLabels: 'xy',
+    priority: Priority.enhanced,
+  },
+  render: (_args) => html`
+    <obc-area-graph
+      .data=${SAMPLE_DATA}
+      .showGrid=${true}
+      .showGridX=${true}
+      .showGridY=${true}
+      .width=${_args.width}
+      .height=${_args.height}
+      .rangeLabels=${_args.rangeLabels}
+      .priority=${_args.priority}
+    >
+      <obc-bar-vertical
+        slot="right-scale"
+        .minValue=${0}
+        .maxValue=${10}
+        .height=${_args.height}
+        .side=${'right'}
+        .hasBar=${false}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .priority=${_args.priority}
+      ></obc-bar-vertical>
+      <obc-bar-horizontal
+        slot="bottom-scale"
+        .minValue=${0}
+        .maxValue=${12}
+        .width=${_args.width}
+        .side=${'bottom'}
+        .hasBar=${false}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .priority=${_args.priority}
+      ></obc-bar-horizontal>
+    </obc-area-graph>
+  `,
+};
+
+/**
+ * Below the label threshold the canvas is inset by each slotted scale's
+ * reported thickness; `chart-line-base.spec.ts` pins that. No snapshot: canvas
+ * anti-aliasing at the capture scale differs between CI runners.
+ */
+export const ExternalScalesBelowThreshold: Story = {
+  name: 'External Scales Below The Threshold (160×160, No Range Labels)',
+  tags: ['!snapshot'],
+  args: {
+    width: 160,
+    height: 160,
+    priority: Priority.enhanced,
+  },
+  render: (_args) => html`
+    <obc-area-graph
+      .data=${SAMPLE_DATA}
+      .width=${_args.width}
+      .height=${_args.height}
+      .priority=${_args.priority}
+    >
+      <obc-bar-vertical
+        slot="right-scale"
+        .minValue=${0}
+        .maxValue=${10}
+        .height=${_args.height}
+        .side=${'right'}
+        .hasBar=${false}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .priority=${_args.priority}
+      ></obc-bar-vertical>
+      <obc-bar-horizontal
+        slot="bottom-scale"
+        .minValue=${0}
+        .maxValue=${12}
+        .width=${_args.width}
+        .side=${'bottom'}
+        .hasBar=${false}
+        .primaryTickmarkInterval=${2}
+        .secondaryTickmarkInterval=${1}
+        .priority=${_args.priority}
+      ></obc-bar-horizontal>
+    </obc-area-graph>
+  `,
+};
+
 export const FixedAspectRatioScaling: StoryObj = {
   name: 'Fixed Aspect Ratio Scaling (responsive)',
   tags: ['skip-test'],