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

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

@@ -103,6 +103,10 @@ const meta: Meta = {
     showGridX: {control: 'boolean'},
     showGridY: {control: 'boolean'},
     showTickMarks: {control: 'boolean'},
+    rangeLabels: {
+      control: {type: 'radio'},
+      options: ['none', 'y', 'x', 'xy'],
+    },
     xTicksLimit: {control: {type: 'number'}},
     xStepSize: {control: {type: 'number'}},
     yTicksLimit: {control: {type: 'number'}},
@@ -134,6 +138,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,
@@ -174,6 +179,7 @@ export const SingleSeries: Story = {
       .showGridX=${_args.showGridX}
       .showGridY=${_args.showGridY}
       .showTickMarks=${_args.showTickMarks}
+      .rangeLabels=${_args.rangeLabels}
       .xTicksLimit=${_args.xTicksLimit}
       .xStepSize=${_args.xStepSize}
       .yTicksLimit=${_args.yTicksLimit}
@@ -566,6 +572,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: {

package/src/building-blocks/bar-horizontal/bar-horizontal.ts

@@ -79,6 +79,10 @@ export {
  *   Above this width, the scale grows proportionally; below, it shrinks.
  * @availableWhen scaleReferenceSize fixedAspectRatio==true
  * @property hasScale - Show scale tickmarks
+ * @property showMainTickmarkLabels - Label the main tickmarks (min / 0 / max) instead of the
+ *   primary interval ladder, for a scale too short for a ladder. A chart sets it on its
+ *   slotted scales below its label threshold.
+ * @availableWhen showMainTickmarkLabels showLabels==true
  * @property hasBar - Show bar
  * @property scaleBackground - Show background behind the scale tickmarks.
  * @property barContainerStyle - Bar container background style.
@@ -187,6 +191,7 @@ export class ObcBarHorizontal extends SetpointMixin(LitElement, {
   // Bands (thickness)
   @property({type: Boolean, attribute: false}) hasScale = true;
   @property({type: Boolean, attribute: false}) showLabels = true;
+  @property({type: Boolean}) showMainTickmarkLabels = false;
   @property({type: Boolean}) hasBar = false;
   @property({type: Boolean})
   scaleBackground = false;
@@ -267,6 +272,7 @@ export class ObcBarHorizontal extends SetpointMixin(LitElement, {
       maxValue: this.maxValue,
       hasScale: this.hasScale,
       labels: this.showLabels,
+      mainTickmarkLabels: this.showMainTickmarkLabels,
       hasBar: this.hasBar,
       scaleBackground: this.scaleBackground,
       barContainerStyle: this.barContainerStyle,
@@ -366,6 +372,7 @@ export class ObcBarHorizontal extends SetpointMixin(LitElement, {
     const layoutChanged =
       changed.has('side') ||
       changed.has('showLabels') ||
+      changed.has('showMainTickmarkLabels') ||
       changed.has('hasScale') ||
       changed.has('hasBar') ||
       changed.has('barThickness') ||

package/src/building-blocks/bar-vertical/bar-vertical.ts

@@ -76,6 +76,10 @@ export {
  *   Above this height, the scale grows proportionally; below, it shrinks.
  * @availableWhen scaleReferenceSize fixedAspectRatio==true
  * @property hasScale - Show scale tickmarks
+ * @property showMainTickmarkLabels - Label the main tickmarks (min / 0 / max) instead of the
+ *   primary interval ladder, for a scale too short for a ladder. A chart sets it on its
+ *   slotted scales below its label threshold.
+ * @availableWhen showMainTickmarkLabels showLabels==true
  * @property hasBar - Show bar
  * @property scaleBackground - Show background behind the scale tickmarks.
  * @property barContainerStyle - Bar container background style.
@@ -176,6 +180,7 @@ export class ObcBarVertical extends SetpointMixin(LitElement, {
   // Bands (thickness)
   @property({type: Boolean, attribute: false}) hasScale = true;
   @property({type: Boolean, attribute: false}) showLabels = true;
+  @property({type: Boolean}) showMainTickmarkLabels = false;
   @property({type: Boolean}) hasBar = false;
   @property({type: Boolean})
   scaleBackground = false;
@@ -256,6 +261,7 @@ export class ObcBarVertical extends SetpointMixin(LitElement, {
       maxValue: this.maxValue,
       hasScale: this.hasScale,
       labels: this.showLabels,
+      mainTickmarkLabels: this.showMainTickmarkLabels,
       hasBar: this.hasBar,
       scaleBackground: this.scaleBackground,
       barContainerStyle: this.barContainerStyle,
@@ -355,6 +361,7 @@ export class ObcBarVertical extends SetpointMixin(LitElement, {
     const layoutChanged =
       changed.has('side') ||
       changed.has('showLabels') ||
+      changed.has('showMainTickmarkLabels') ||
       changed.has('hasScale') ||
       changed.has('hasBar') ||
       changed.has('barThickness') ||