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

package/src/navigation-instruments/compass-sector/compass-sector.ts

@@ -2,6 +2,8 @@ import {LitElement, PropertyValues, html, svg, unsafeCSS, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
 import componentStyle from './compass-sector.css?inline';
 import '../watch/watch.js';
+import '../readout/readout.js';
+import {ReadoutDirection, ReadoutVariant} from '../readout/readout.js';
 import {Tickmark, TickmarkType, TickmarkStyle} from '../watch/tickmark.js';
 import {arrow, ArrowStyle} from '../compass/arrow.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
@@ -155,6 +157,12 @@ export class ObcCompassSector extends LitElement {
   ];
   @property({type: Boolean}) tickmarksInside: boolean = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * When `true`, shows a centered `<obc-readout>` under the arc displaying the
+   * heading (label `HDG`, unit `DEG`). The value color follows the HDG entry in
+   * `priorityElements`, matching the HDG arrow.
+   */
+  @property({type: Boolean}) hasReadout: boolean = false;
 
   private _headingSp = new SetpointBundle({
     angularWraparound: true,
@@ -396,6 +404,33 @@ export class ObcCompassSector extends LitElement {
     return selected.includes(element) ? this.priority : Priority.regular;
   }
 
+  /**
+   * Vertical placement of the readout as a percentage of the host height.
+   *
+   * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
+   * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
+   * cardinal axes its bounding box crosses), not just its bend. The arc itself
+   * is always rotated back to the top, so it stays put on screen — but a
+   * frame-derived offset would swing wildly as `heading` rotates the bbox around
+   * the circle. So in zoom we use a fixed offset, which keeps the readout steady
+   * under the (stationary) arc regardless of heading.
+   *
+   * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
+   * geometry is orientation-independent: place the readout halfway down the inner
+   * radius from the watch center toward the arc's inner edge.
+   */
+  private get _readoutTopPercent(): number {
+    if (this.zoomToFitArc) {
+      return 70;
+    }
+    const [, vy, , vh] = this._cachedViewBox.split(' ').map(Number);
+    if (!vh || Number.isNaN(vy)) {
+      return 50;
+    }
+    const anchorY = -INNER_RADIUS * 0.5;
+    return Math.round(((anchorY - vy) / vh) * 1000) / 10;
+  }
+
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
@@ -477,6 +512,23 @@ export class ObcCompassSector extends LitElement {
             rOff
           )}
         </svg>
+        ${this.hasReadout
+          ? html`<div class="readout" style="top: ${this._readoutTopPercent}%">
+              <obc-readout
+                .variant=${ReadoutVariant.enhanced}
+                .direction=${ReadoutDirection.vertical}
+                .hasSetpoint=${false}
+                .hasAdvice=${false}
+                .value=${this.heading}
+                .fractionDigits=${0}
+                .valuePriority=${this.priorityFor(
+                  CompassSectorPriorityElement.hdg
+                )}
+                label="HDG"
+                unit="DEG"
+              ></obc-readout>
+            </div>`
+          : nothing}
       </div>
     `;
   }

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/pitch/pitch.stories.ts

@@ -1,6 +1,7 @@
 import type {Meta, StoryObj} from '@storybook/web-components-vite';
-import {ObcPitch} from './pitch.js';
+import {ObcPitch, ObcPitchType} from './pitch.js';
 import './pitch.js';
+import {Priority} from '../types.js';
 import {widthDecorator} from '../../storybook-util.js';
 import {sideVessels} from '../watch/vessels/storybook-helper.js';
 
@@ -23,6 +24,8 @@ const meta: Meta<typeof ObcPitch> = {
       control: 'select',
       options: sideVessels,
     },
+    type: {control: 'select', options: Object.values(ObcPitchType)},
+    priority: {control: 'select', options: Object.values(Priority)},
   },
   decorators: [widthDecorator],
 } satisfies Meta<ObcPitch>;
@@ -50,3 +53,22 @@ export const ZoomedInNarrow: Story = {
     maxPitchAdvice: 10,
   },
 };
+
+export const WithReadout: Story = {
+  args: {
+    hasReadout: true,
+  },
+};
+
+export const DualScale: Story = {
+  args: {
+    type: ObcPitchType.dualScale,
+    hasReadout: true,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {
+    priority: Priority.enhanced,
+  },
+};