@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.57 → 2.0.0-next.58

package/src/navigation-instruments/gauge-radial/gauge-radial.css

@@ -0,0 +1,85 @@
+:host {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Host takes each sector's crop aspect (see `sectorClips`): 270/90 square, 180
+   wide — so the dial is the same size at any width. */
+:host([sector="270"]),
+:host([sector="90-left"]),
+:host([sector="90-right"]) {
+  height: auto;
+  aspect-ratio: 1;
+}
+
+/* 448 / 251 = the 180° crop's aspect (448 wide × 448·(1 − 44%) tall); keep in
+   sync with `sectorClips` bottom=44 in gauge-radial.ts. */
+:host([sector="180"]) {
+  height: auto;
+  aspect-ratio: 448 / 251;
+}
+
+.gauge-radial-root {
+  /* Readout vertical placement per layout (% of the cropped host), tuned to the
+     watch geometry — re-check if the ring radii or the 448 box change. Which
+     layout uses which is in renderReadouts(). */
+  --readout-meta-top: 72%;
+  --readout-meta-top-needle: 63%;
+  --readout-meta-top-180: 60%;
+
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .gauge-readout-value {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+  }
+
+  .gauge-readout-meta {
+    position: absolute;
+    left: 50%;
+    top: var(--readout-meta-top);
+    transform: translateX(-50%);
+    z-index: 1;
+  }
+
+  &.type-needle .gauge-readout-meta {
+    top: var(--readout-meta-top-needle);
+  }
+
+  &.sector-180 .gauge-readout-meta {
+    top: var(--readout-meta-top-180);
+  }
+
+  /* Nudge the corner readout inward (up + toward center) so it sits inside the
+     open quadrant rather than hugging the box corner. Symmetric for both
+     orientations — only the horizontal edge differs. */
+  &.sector-90-left .gauge-readout-meta,
+  &.sector-90-right .gauge-readout-meta {
+    --readout-90-inset: 6%;
+    bottom: var(--readout-90-inset);
+    top: auto;
+    transform: none;
+  }
+
+  &.sector-90-left .gauge-readout-meta {
+    left: auto;
+    right: var(--readout-90-inset);
+  }
+
+  &.sector-90-right .gauge-readout-meta {
+    left: var(--readout-90-inset);
+    right: auto;
+  }
+
+  /* 90-right readout sits in the bottom-left corner, so left-align the value
+     under the label (enhanced readouts right-align the value by default). */
+  &.sector-90-right .gauge-readout-meta::part(value-wrapper) {
+    justify-self: start;
+  }
+}

package/src/navigation-instruments/gauge-radial/gauge-radial.stories.ts

@@ -1,33 +1,57 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcGaugeRadial, ObcGaugeRadialType} from './gauge-radial.js';
+import {
+  GaugeRadialSector,
+  ObcGaugeRadial,
+  ObcGaugeRadialType,
+} from './gauge-radial.js';
 import './gauge-radial.js';
 import {widthDecorator} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {InstrumentState, Priority} from '../types.js';
 
-const meta: Meta<typeof ObcGaugeRadial> = {
+type GaugeRadialStoryArgs = Partial<ObcGaugeRadial> & {
+  width?: number;
+  height?: number;
+};
+
+const meta = {
   title: 'Instruments/Gauge Radial',
-  tags: ['6.0'],
+  tags: ['autodocs', '6.0'],
   component: 'obc-gauge-radial',
   decorators: [widthDecorator],
   args: {
     width: 400,
   },
   argTypes: {
-    state: {control: 'select', options: Object.values(InstrumentState)},
+    width: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    height: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    type: {control: 'select', options: Object.values(ObcGaugeRadialType)},
+    sector: {control: 'select', options: Object.values(GaugeRadialSector)},
     priority: {control: 'select', options: Object.values(Priority)},
-    tickmarksInside: {control: 'boolean'},
+    state: {control: 'select', options: Object.values(InstrumentState)},
     tickmarkStyle: {
       control: 'select',
       options: Object.values(TickmarkStyle),
     },
     showLabels: {control: 'boolean'},
+    tickmarksInside: {control: 'boolean'},
+    showReadout: {control: 'boolean'},
+    value: {control: 'number'},
+    minValue: {control: 'number'},
+    maxValue: {control: 'number'},
+    primaryTickmarkInterval: {control: 'number'},
+    secondaryTickmarkInterval: {control: 'number'},
+    tertiaryTickmarkInterval: {control: 'number'},
+    fractionDigits: {control: 'number'},
+    label: {control: 'text'},
+    unit: {control: 'text'},
+    advices: {control: 'object'},
   },
-} satisfies Meta<ObcGaugeRadial>;
+} satisfies Meta<GaugeRadialStoryArgs>;
 
 export default meta;
-type Story = StoryObj<ObcGaugeRadial>;
+type Story = StoryObj<GaugeRadialStoryArgs>;
 
 export const Positive: Story = {
   args: {
@@ -128,6 +152,124 @@ export const IrregularRange: Story = {
   },
 };
 
+const sectorStoryArgs = {
+  value: 50,
+  minValue: 0,
+  maxValue: 100,
+  type: ObcGaugeRadialType.filled,
+  showLabels: true,
+} as const;
+
+export const Sector270: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg270,
+  },
+};
+
+export const Sector180: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+  },
+};
+
+export const Sector180WithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+  },
+};
+
+// Regression for the width-derived "Max-min" end-label inset: wide labels on
+// both ends (-250 / 1000). The old per-side literals (11/6) broke for these;
+// min/max are interval multiples so the end labels sit on the primary grid.
+export const Sector180WideEndLabels: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg180,
+    tickmarksInside: true,
+    minValue: -250,
+    maxValue: 1000,
+    value: 500,
+    primaryTickmarkInterval: 250,
+    secondaryTickmarkInterval: 50,
+  },
+};
+
+export const Sector90Left: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Left,
+    width: 200,
+  },
+};
+
+export const Sector90Right: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Right,
+    width: 200,
+  },
+};
+
+export const Sector90LeftWithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Left,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+    width: 200,
+  },
+};
+
+export const Sector90RightWithReadout: Story = {
+  args: {
+    ...sectorStoryArgs,
+    sector: GaugeRadialSector.deg90Right,
+    showReadout: true,
+    label: 'Label',
+    unit: 'unit',
+    value: 123,
+    width: 200,
+  },
+};
+
+const readoutStoryArgs = {
+  value: 123,
+  minValue: 0,
+  maxValue: 100,
+  type: ObcGaugeRadialType.filled,
+  sector: GaugeRadialSector.deg270,
+  showReadout: true,
+  label: 'Label',
+  unit: 'unit',
+} as const;
+
+export const WithReadout: Story = {
+  args: readoutStoryArgs,
+};
+
+export const WithReadoutEnhanced: Story = {
+  args: {
+    ...readoutStoryArgs,
+    priority: Priority.enhanced,
+  },
+};
+
+export const WithReadoutNeedle: Story = {
+  args: {
+    ...readoutStoryArgs,
+    type: ObcGaugeRadialType.needle,
+  },
+};
+
 export const WideAdviceSpan: Story = {
   args: {
     value: 320,

package/src/navigation-instruments/gauge-radial/gauge-radial.ts

@@ -1,4 +1,6 @@
-import {LitElement, html} from 'lit';
+import {LitElement, html, nothing, unsafeCSS, type TemplateResult} from 'lit';
+import {classMap} from 'lit/directives/class-map.js';
+import componentStyle from './gauge-radial.css?inline';
 import {customElement} from '../../decorator.js';
 import {property} from 'lit/decorators.js';
 import {AdviceType} from '../watch/advice.js';
@@ -6,6 +8,11 @@ import {InstrumentState, Priority} from '../types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
 import '../../building-blocks/instrument-radial/instrument-radial.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
+import '../readout/readout.js';
+import {
+  ReadoutStackVerticalAlignment,
+  ReadoutVariant,
+} from '../readout/readout.js';
 
 export enum ObcGaugeRadialType {
   filled = 'filled',
@@ -13,6 +20,13 @@ export enum ObcGaugeRadialType {
   needle = 'needle',
 }
 
+export enum GaugeRadialSector {
+  deg270 = '270',
+  deg180 = '180',
+  deg90Left = '90-left',
+  deg90Right = '90-right',
+}
+
 export interface GaugeRadialAdvice {
   minValue: number;
   maxValue: number;
@@ -34,14 +48,17 @@ export interface GaugeRadialAdvice {
  *
  * - **Three display types**: `filled` (solid arc), `bar` (thinner arc), and
  *   `needle` (pointer indicator) via the `type` property.
- * - **Full-range mapping**: The configured `minValue..maxValue` always spans
- *   the full 270° sweep. Symmetric ranges still place `0` at 12 o'clock.
+ * - **Sector sweep**: `sector` selects the arc span (`270`, `180`, `90-left`, or `90-right`).
+ *   The configured `minValue..maxValue` always spans the full sector. For the
+ *   centered sectors (`270`, `180`) a symmetric range places `0` at 12 o'clock;
+ *   for `90-left`/`90-right` the range midpoint sits at the middle of the quadrant.
  * - **Setpoint via mixin**: `setpoint`, `newSetpoint`, `touching`,
  *   `autoAtSetpointDeadband`, `setpointOverride`, and all other setpoint
  *   properties are provided by `SetpointMixin` and forwarded to the inner
  *   `<obc-instrument-radial>`.
  * - **Advice zones**: Pass an array of {@link GaugeRadialAdvice} objects to
- *   render caution/alert arcs on the gauge.
+ *   render caution/alert arcs on the gauge. Not shown on the `90-left` /
+ *   `90-right` sectors.
  *
  * ## Usage Guidelines
  *
@@ -50,6 +67,12 @@ export interface GaugeRadialAdvice {
  * - Provide `primaryTickmarkInterval` and `secondaryTickmarkInterval` to
  *   control tickmark density.
  * - Enable `showLabels` to show numeric labels at primary tickmarks.
+ * - Enable `showReadout` with optional `label` and `unit`. Layout depends on `sector`
+ *   and `type`: **270** filled/bar — value at center + a label-only `meta` row in
+ *   the bottom gap (two separate readouts); **180** filled/bar — a single centered
+ *   stack (value + label/unit) at the bottom; **270** needle — bottom stack;
+ *   **180** needle — no readout; **90-left** / **90-right** filled/bar — corner
+ *   readout in a square host; **90** needle — no readout.
  *
  * ## Best Practices
  *
@@ -66,7 +89,7 @@ export interface GaugeRadialAdvice {
  *   minValue="0"
  *   maxValue="100"
  *   type="filled"
- *   enhanced
+ *   priority="enhanced"
  *   showLabels
  *   primaryTickmarkInterval="25"
  *   secondaryTickmarkInterval="5"
@@ -98,47 +121,203 @@ export class ObcGaugeRadial extends SetpointMixin(LitElement) {
   @property({type: Boolean}) tickmarksInside: boolean = false;
   @property({type: String}) tickmarkStyle: TickmarkStyle =
     TickmarkStyle.regular;
+  /** Caution/alert arcs. Ignored on `sector: 90-left` / `90-right`. */
   @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];
+  @property({type: String, reflect: true}) sector: GaugeRadialSector =
+    GaugeRadialSector.deg270;
+  @property({type: Boolean}) showReadout = false;
+  @property({type: String}) label = '';
+  @property({type: String}) unit = '';
+  @property({type: Number}) fractionDigits = 0;
+
+  private get sectorAngles(): {sweep: number; start: number} {
+    switch (this.sector) {
+      case GaugeRadialSector.deg180:
+        return {sweep: 180, start: -90};
+      case GaugeRadialSector.deg90Left:
+        return {sweep: 90, start: -90};
+      case GaugeRadialSector.deg90Right:
+        return {sweep: 90, start: 0};
+      case GaugeRadialSector.deg270:
+      default:
+        return {sweep: 270, start: -135};
+    }
+  }
 
-  getAngle(v: number): number {
+  /**
+   * Per-edge crop (%) of the shared, origin-centered 448 SVG box each sector
+   * shows. All sectors render at the same natural scale, so the dial stays the
+   * same size; the sector only windows a different part (270 whole, 180 wide,
+   * 90 a quadrant).
+   */
+  private get sectorClips(): {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  } {
+    switch (this.sector) {
+      case GaugeRadialSector.deg180:
+        return {top: 0, bottom: 44, left: 0, right: 0};
+      case GaugeRadialSector.deg90Left:
+        return {top: 0, bottom: 45, left: 0, right: 45};
+      case GaugeRadialSector.deg90Right:
+        return {top: 0, bottom: 45, left: 45, right: 0};
+      case GaugeRadialSector.deg270:
+      default:
+        return {top: 0, bottom: 0, left: 0, right: 0};
+    }
+  }
+
+  private get isSector90(): boolean {
+    return (
+      this.sector === GaugeRadialSector.deg90Left ||
+      this.sector === GaugeRadialSector.deg90Right
+    );
+  }
+
+  // Arrow form so `this` binds when passed as `.getAngle=${this.getAngle}`
+  // to <obc-instrument-radial>. Do not convert to a method.
+  getAngle = (v: number): number => {
+    const {sweep, start} = this.sectorAngles;
     const span = this.maxValue - this.minValue;
     if (!Number.isFinite(span) || span <= 0) {
-      return -135;
+      return start;
     }
 
-    return ((v - this.minValue) / span) * 270 - 135;
+    return ((v - this.minValue) / span) * sweep + start;
+  };
+
+  /** Renders one gauge readout; `withMeta`/`labelOnly` pick parts. */
+  private renderReadout({
+    className,
+    variant,
+    alignment = ReadoutStackVerticalAlignment.vertical,
+    withMeta = true,
+    labelOnly = false,
+  }: {
+    className: string;
+    variant: ReadoutVariant;
+    alignment?: ReadoutStackVerticalAlignment;
+    withMeta?: boolean;
+    labelOnly?: boolean;
+  }): TemplateResult {
+    // `labelOnly` already means "no value", so derive it instead of passing both.
+    const withValue = !labelOnly;
+    return html`
+      <obc-readout
+        class=${className}
+        direction="vertical"
+        ?labelOnly=${labelOnly}
+        .variant=${variant}
+        .alignment=${alignment}
+        .valuePriority=${withValue ? this.priority : undefined}
+        .value=${withValue ? this.value : undefined}
+        .fractionDigits=${this.fractionDigits}
+        .label=${withMeta ? this.label : ''}
+        .unit=${withMeta ? this.unit : ''}
+      ></obc-readout>
+    `;
+  }
+
+  private renderReadouts() {
+    if (!this.showReadout) {
+      return nothing;
+    }
+
+    const isNeedle = this.type === ObcGaugeRadialType.needle;
+    const is90 = this.isSector90;
+    const is180 = this.sector === GaugeRadialSector.deg180;
+
+    if (isNeedle && (is180 || is90)) {
+      return nothing;
+    }
+
+    // 90 filled/bar: enhanced corner readout (bold value + label/unit).
+    if (is90) {
+      return this.renderReadout({
+        className: 'gauge-readout-meta',
+        variant: ReadoutVariant.enhanced,
+      });
+    }
+
+    // 270 needle and 180 filled/bar: centered stack (value weight follows `priority`).
+    if (isNeedle || is180) {
+      return this.renderReadout({
+        className: 'gauge-readout-meta',
+        variant: ReadoutVariant.stack,
+        alignment: ReadoutStackVerticalAlignment.center,
+      });
+    }
+
+    // 270 filled/bar: the value sits at the circle center and the label/unit row
+    // lower in the bottom gap, so they are two separately-positioned readouts.
+    return html`
+      ${this.renderReadout({
+        className: 'gauge-readout-value',
+        variant: ReadoutVariant.enhanced,
+        withMeta: false,
+      })}
+      ${this.label || this.unit
+        ? this.renderReadout({
+            className: 'gauge-readout-meta',
+            variant: ReadoutVariant.stack,
+            alignment: ReadoutStackVerticalAlignment.center,
+            labelOnly: true,
+          })
+        : nothing}
+    `;
   }
 
   override render() {
+    const clips = this.sectorClips;
     return html`
-      <obc-instrument-radial
-        .value=${this.value}
-        .state=${this.state}
-        .priority=${this.priority}
-        .setpoint=${this.setpoint}
-        .newSetpoint=${this.newSetpoint}
-        .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
-        .setpointOverride=${this.setpointOverride}
-        .touching=${this.touching}
-        .autoAtSetpoint=${this.autoAtSetpoint}
-        .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
-        .animateSetpoint=${this.animateSetpoint}
-        .maxValue=${this.maxValue}
-        .minValue=${this.minValue}
-        .getAngle=${this.getAngle}
-        .showLabels=${this.showLabels}
-        .primaryTickmarkInterval=${this.primaryTickmarkInterval}
-        .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
-        .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
-        .type=${this.type}
-        .needleType=${this.type}
-        .tickmarksInside=${this.tickmarksInside}
-        .tickmarkStyle=${this.tickmarkStyle}
-        .advices=${this.advices}
+      <div
+        class=${classMap({
+          'gauge-radial-root': true,
+          'type-needle': this.type === ObcGaugeRadialType.needle,
+          'sector-180': this.sector === GaugeRadialSector.deg180,
+          'sector-90-left': this.sector === GaugeRadialSector.deg90Left,
+          'sector-90-right': this.sector === GaugeRadialSector.deg90Right,
+        })}
       >
-      </obc-instrument-radial>
+        <obc-instrument-radial
+          .value=${this.value}
+          .state=${this.state}
+          .priority=${this.priority}
+          .setpoint=${this.setpoint}
+          .newSetpoint=${this.newSetpoint}
+          .setpointAtZeroDeadband=${this.setpointAtZeroDeadband}
+          .setpointOverride=${this.setpointOverride}
+          .touching=${this.touching}
+          .autoAtSetpoint=${this.autoAtSetpoint}
+          .autoAtSetpointDeadband=${this.autoAtSetpointDeadband}
+          .animateSetpoint=${this.animateSetpoint}
+          .maxValue=${this.maxValue}
+          .minValue=${this.minValue}
+          .getAngle=${this.getAngle}
+          .showLabels=${this.showLabels}
+          .primaryTickmarkInterval=${this.primaryTickmarkInterval}
+          .secondaryTickmarkInterval=${this.secondaryTickmarkInterval}
+          .tertiaryTickmarkInterval=${this.tertiaryTickmarkInterval}
+          .type=${this.type}
+          .needleType=${this.type}
+          .tickmarksInside=${this.tickmarksInside}
+          .tickmarkStyle=${this.tickmarkStyle}
+          .advices=${this.isSector90 ? [] : this.advices}
+          .clipTop=${clips.top}
+          .clipBottom=${clips.bottom}
+          .clipLeft=${clips.left}
+          .clipRight=${clips.right}
+          .endLabelsMaxMin=${this.sector === GaugeRadialSector.deg180}
+        >
+        </obc-instrument-radial>
+        ${this.renderReadouts()}
+      </div>
     `;
   }
+
+  static override styles = unsafeCSS(componentStyle);
 }
 
 declare global {

package/src/navigation-instruments/readout/readout.css

@@ -423,6 +423,10 @@
   text-align: center;
 }
 
+.readout.stack.vertical.alignment-center .instrument-label-unit-container {
+  align-items: center;
+}
+
 .readout.stack.vertical.alignment-vertical {
   justify-items: end;
 }

package/src/navigation-instruments/watch/tickmark.ts

@@ -49,6 +49,7 @@ export function tickmark(
     maxDigits,
     color,
     radiusOffset = 0,
+    endLabelsMaxMin = false,
   }: {
     size: TickmarkType;
     style: TickmarkStyle;
@@ -60,6 +61,7 @@ export function tickmark(
     maxDigits: number;
     color?: string;
     radiusOffset?: number;
+    endLabelsMaxMin?: boolean;
   }
 ): SVGTemplateResult | SVGTemplateResult[] {
   // check if scale is not infinite
@@ -87,7 +89,9 @@ export function tickmark(
     innerRadius = 328 / 2 + rOff;
     outerRadius = 336 / 2 + rOff;
   } else {
-    return [textSvg(text ?? '', angle, inside, scale, textRadius)];
+    return [
+      textSvg(text ?? '', {angle, inside, scale, textRadius, endLabelsMaxMin}),
+    ];
   }
 
   // When inside, anchor ticks at the outer ring edge and grow inward,
@@ -115,7 +119,10 @@ export function tickmark(
   const tick = svg`<line x1=${x1} y1=${y1} x2=${x2} y2=${y2} stroke=${colorName} stroke-width=${strokeWidth} vector-effect="non-scaling-stroke"/>`;
   if (text) {
     if (rotation === undefined) {
-      return [tick, textSvg(text, angle, inside, scale, textRadius)];
+      return [
+        tick,
+        textSvg(text, {angle, inside, scale, textRadius, endLabelsMaxMin}),
+      ];
     } else {
       const newRadius =
         textRadius + ((4 / scale + 5) * (inside ? -1 : 1) * maxDigits) / 2;
@@ -132,11 +139,31 @@ export function tickmark(
 
 function textSvg(
   text: string,
-  angle: number,
-  inside: boolean,
-  scale: number,
-  textRadius: number
+  {
+    angle,
+    inside,
+    scale,
+    textRadius,
+    endLabelsMaxMin = false,
+  }: {
+    angle: number;
+    inside: boolean;
+    scale: number;
+    textRadius: number;
+    endLabelsMaxMin?: boolean;
+  }
 ) {
+  const radHoriz = (angle * Math.PI) / 180;
+  // "Max-min" placement: horizontal end labels (±90°) sit off the dead-center
+  // tick (below outside / lifted inside), inset inward by label width.
+  if (endLabelsMaxMin && Math.abs(Math.cos(radHoriz)) < 1e-6) {
+    const sin = Math.sin(radHoriz);
+    const inward = inside ? (6 + (text.length - 1) * 2.5) / scale : 14 / scale;
+    const x = sin * (textRadius - inward);
+    const y = inside ? -(6 / scale) : 12 / scale;
+    return svg`<text x=${x} y=${y} class="label bottom ${inside ? 'inside' : ''}">${text}</text>`;
+  }
+
   let positionClass;
   if (angle === 0) {
     positionClass = 'top';