@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.48

package/src/navigation-instruments/velocity-projection-plot/velocity-projection-plot.ts

@@ -24,18 +24,22 @@ export class ObcVelocityProjectionPlot extends LitElement {
   @property({type: Array, attribute: false})
   dataPoints: VelocityProjectionDatapoint[] = [];
   @property({type: Number})
-  instantWindDirectionDeg: number | null = null;
+  currentWindFromDirection: number | null = null;
   @property({type: Number})
-  instantWindSpeedNumber: number | null = null;
+  currentWindSpeedKnots: number | null = null;
   @property({type: Number})
-  instantCurrentDirectionDeg: number | null = null;
+  currentFromDirection: number | null = null;
   @property({type: Number})
-  instantCurrentSpeedNumber: number | null = null;
+  currentSpeedKnots: number | null = null;
   @property({type: String})
   vesselImage: VesselImage = VesselImage.cargoWindTop;
   override render() {
     const width = 320;
     const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const currentLevel =
+      this.currentSpeedKnots == null
+        ? null
+        : Math.max(0, Math.min(4, Math.round(this.currentSpeedKnots)));
 
     return html`
       <div class="container">
@@ -49,10 +53,10 @@ export class ObcVelocityProjectionPlot extends LitElement {
               transform: '',
             },
           ]}
-          .windFromDirectionDeg=${this.instantWindDirectionDeg}
-          .wind=${this.instantWindSpeedNumber}
-          .currentFromDirectionDeg=${this.instantCurrentDirectionDeg}
-          .current=${this.instantCurrentSpeedNumber}
+          .windFromDirectionDeg=${this.currentWindFromDirection}
+          .windKnots=${this.currentWindSpeedKnots}
+          .currentFromDirectionDeg=${this.currentFromDirection}
+          .current=${currentLevel}
           .padding=${70}
         >
         </obc-watch>
@@ -62,10 +66,10 @@ export class ObcVelocityProjectionPlot extends LitElement {
   }
 
   private isSelected(dp: VelocityProjectionDatapoint): boolean {
-    if (this.instantWindDirectionDeg != null) {
+    if (this.currentWindFromDirection != null) {
       return (
-        dp.startAngleDeg <= this.instantWindDirectionDeg &&
-        dp.endAngleDeg >= this.instantWindDirectionDeg
+        dp.startAngleDeg <= this.currentWindFromDirection &&
+        dp.endAngleDeg >= this.currentWindFromDirection
       );
     }
     return true;

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

@@ -1,18 +1,131 @@
 import {svg, SVGTemplateResult} from 'lit';
 import {styleMap} from 'lit/directives/style-map.js';
+import '../../icons/icon-wind-true-1.js';
+import '../../icons/icon-wind-true-2.js';
+import '../../icons/icon-wind-true-3.js';
+import '../../icons/icon-wind-true-4.js';
+import '../../icons/icon-wind-true-5.js';
+import '../../icons/icon-wind-true-6.js';
+import '../../icons/icon-wind-true-7.js';
+import '../../icons/icon-wind-true-8.js';
+import '../../icons/icon-wind-true-9.js';
+import '../../icons/icon-wind-true-10.js';
+import '../../icons/icon-wind-true-11.js';
+import '../../icons/icon-wind-true-12.js';
+import '../../icons/icon-wind-true-13.js';
+import '../../icons/icon-wind-true-14.js';
+
+/**
+ * Number of wind barb icons available (`<obi-wind-true-1>` …
+ * `<obi-wind-true-14>`).
+ *
+ * The set follows the standard meteorological wind-barb convention:
+ * icon 1 is calm, icon 2 is shaft-only (1 kn bucket), icons 3–11 add
+ * one half-barb per 5 kn (5, 10, 15, …, 45 kn), icon 12 is one pennant
+ * (50 kn), icons 13–14 add full barbs above the pennant (60 / 70 kn).
+ */
+const WIND_ICON_COUNT = 14;
+
+/** Render scale applied to the 24×24 icon so it matches the historic 48×48 visual footprint on the watch dial. */
+const WIND_ICON_SCALE = 2;
+
+/**
+ * Tip coordinates of the `obi-wind-true-*` icons in their native 24×24 child
+ * space. The arrowhead tip is at approximately (12, 22.4453) — this is the
+ * anchor point that lands on the watch's periphery radius so the barb tail
+ * extends outward only (matching the legacy inline-glyph behavior).
+ */
+const WIND_ICON_TIP_X = 12;
+const WIND_ICON_TIP_Y = 22.4453;
+
+const windIconCache = new Map<string, SVGTemplateResult>();
+
+function getWindIconSvg(index: number): SVGTemplateResult | null {
+  const tagName = `obi-wind-true-${index}`;
+  const cached = windIconCache.get(tagName);
+  if (cached) {
+    return cached;
+  }
+  const ctor = customElements.get(tagName) as
+    | (new () => {icon?: SVGTemplateResult; iconCss?: SVGTemplateResult})
+    | undefined;
+  if (!ctor) {
+    return null;
+  }
+  const instance = new ctor();
+  const tpl: SVGTemplateResult | undefined = instance.icon ?? instance.iconCss;
+  if (!tpl) {
+    return null;
+  }
+  windIconCache.set(tagName, tpl);
+  return tpl;
+}
+
+/**
+ * Maps a wind speed in **knots** to a wind-barb icon index in `[1, 14]`.
+ *
+ * Implements the designer-confirmed "Option C" mapping: speeds round to
+ * the nearest 5-knot bucket (with two sub-pennant buckets for calm and
+ * near-calm conditions):
+ *
+ * | Knots range | Icon | Glyph                |
+ * | ----------- | ---- | -------------------- |
+ * | `[0, 0.5)`  | 1    | calm                 |
+ * | `[0.5, 2.5)`| 2    | shaft only           |
+ * | `[2.5, 7.5)`| 3    | shaft + ½ barb       |
+ * | `[7.5, 12.5)`| 4   | shaft + 1 full barb  |
+ * | …5-kn steps…| …    | …                    |
+ * | `[42.5, 47.5)`| 11 | shaft + 4 full + ½   |
+ * | `[47.5, 55)`| 12   | pennant (50 kn)      |
+ * | `[55, 65)`  | 13   | pennant + 1 full barb |
+ * | `[65, ∞)`   | 14   | pennant + 2 full barbs |
+ *
+ * The 55 / 65 / 100-knot buckets currently collapse to the nearest
+ * available icon; dedicated glyphs are tracked for a follow-up icon
+ * refresh. Non-finite / null / undefined inputs fall back to icon 1.
+ */
+export function windKnotsToIconIndex(knots: number | null | undefined): number {
+  if (knots == null || !Number.isFinite(knots) || knots < 0.5) {
+    return 1;
+  }
+  if (knots < 2.5) {
+    return 2;
+  }
+  if (knots < 47.5) {
+    return Math.round(knots / 5) + 2;
+  }
+  if (knots < 55) {
+    return 12;
+  }
+  if (knots < 65) {
+    return 13;
+  }
+  return WIND_ICON_COUNT;
+}
 
 export function renderWind(options: {
-  wind: number;
+  windKnots: number;
   fromDirectionDeg: number;
   radius: number;
   color?: string;
 }): SVGTemplateResult {
-  return renderEnvironment({
-    filename: `wind-${options.wind + 1}.svg`,
-    fromDirectionDeg: options.fromDirectionDeg,
-    radius: options.radius,
-    color: options.color,
-  });
+  const {windKnots, fromDirectionDeg, radius, color} = options;
+  const index = windKnotsToIconIndex(windKnots);
+  const icon = getWindIconSvg(index);
+  if (!icon) {
+    return svg``;
+  }
+  const dirRad = (fromDirectionDeg * Math.PI) / 180;
+  const x = Math.sin(dirRad) * radius;
+  const y = -Math.cos(dirRad) * radius;
+  const tipX = WIND_ICON_TIP_X * WIND_ICON_SCALE;
+  const tipY = WIND_ICON_TIP_Y * WIND_ICON_SCALE;
+  const styles = {
+    color: color ?? 'var(--instrument-regular-secondary-color)',
+  };
+  return svg`<g style=${styleMap(styles)} transform="translate(${x} ${y}) rotate(${fromDirectionDeg}) translate(${-tipX} ${-tipY}) scale(${WIND_ICON_SCALE})">
+    ${icon}
+  </g>`;
 }
 
 export function renderCurrent(options: {
@@ -73,84 +186,4 @@ export const environmentSvgs: Record<string, SVGTemplateResult> = {
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 10.5858L12.2071 5.37866L17.4142 10.5858L16 12L12.2071 8.20709L8.41421 12L7 10.5858Z" fill="var(--instrument-regular-secondary-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 16.5858L12.2071 11.3787L17.4142 16.5858L16 18L12.2071 14.2071L8.41421 18L7 16.5858Z" fill="var(--instrument-regular-secondary-color)"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M7 22.5858L12.2071 17.3787L17.4142 22.5858L16 24L12.2071 20.2071L8.41421 24L7 22.5858Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-1.svg': svg`<path d="M12 2C6.47715 2 2 6.47715 2 12H3.90476C3.90476 7.52912 7.52912 3.90476 12 3.90476V2Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M22 12C22 6.47715 17.5228 2 12 2V3.90476C16.4709 3.90476 20.0952 7.52912 20.0952 12H22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M12 22C17.5228 22 22 17.5228 22 12H20.0952C20.0952 16.4709 16.4709 20.0952 12 20.0952V22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M2 12C2 17.5228 6.47715 22 12 22V20.0952C7.52912 20.0952 3.90476 16.4709 3.90476 12H2Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M12 2C6.47715 2 2 6.47715 2 12H3.90476C3.90476 7.52912 7.52912 3.90476 12 3.90476V2Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M22 12C22 6.47715 17.5228 2 12 2V3.90476C16.4709 3.90476 20.0952 7.52912 20.0952 12H22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M12 22C17.5228 22 22 17.5228 22 12H20.0952C20.0952 16.4709 16.4709 20.0952 12 20.0952V22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M2 12C2 17.5228 6.47715 22 12 22V20.0952C7.52912 20.0952 3.90476 16.4709 3.90476 12H2Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-2.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-3.svg': svg`<path d="M11 24L13 24L13 7L15 7L12 -1.74846e-07L9 7L11 7L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 21L8 19L11 19L11 21L8 21Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24L13 24L13 7L15 7L12 -1.74846e-07L9 7L11 7L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 21L8 19L11 19L11 21L8 21Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-4.svg': svg`<path d="M11 24L13 24L13 7L15 7L12 -2.62268e-07L9 7L11 7L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M6 24L6 22L11 22L11 24L6 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24L13 24L13 7L15 7L12 -2.62268e-07L9 7L11 7L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M6 24L6 22L11 22L11 24L6 24Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-5.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 21L8 19H12V21H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 21L8 19H12V21H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-6.svg': svg`<path d="M11 24H13L13 7L15 7L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7L15 7L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-7.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 18L8 16H12V18H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 18L8 16H12V18H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-8.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-9.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 15L8 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 15L8 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-10.svg': svg`<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 24L5 22H12V24H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 21L5 19H12V21H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 15L5 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M8 12L8 10H12V12H8Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M11 24H13L13 7H15L12 0L9 7H11L11 24Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 24L5 22H12V24H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 21L5 19H12V21H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 15L5 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M8 12L8 10H12V12H8Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-11.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 20L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 20L5 22Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-12.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
-  'wind-13.svg': svg`<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 18L5 16H12V18H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 15L5 13H12V15H5Z" stroke="var(--border-silhouette-color)" stroke-width="2"/>
-<path d="M5 22L13 24L13 7H15L12 0L9 7H11L11 19L5 22Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 18L5 16H12V18H5Z" fill="var(--instrument-regular-secondary-color)"/>
-<path d="M5 15L5 13H12V15H5Z" fill="var(--instrument-regular-secondary-color)"/>`,
 };

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

@@ -71,7 +71,7 @@ Source of truth: \`packages/openbridge-webcomponents/src/navigation-instruments/
     areas: {control: {type: 'object'}},
     padding: {control: {type: 'range', min: 0, max: 100, step: 1}},
     vessels: {control: {type: 'object'}},
-    wind: {control: {type: 'range', min: 0, max: 12, step: 1}},
+    windKnots: {control: {type: 'range', min: 0, max: 70, step: 1}},
     windFromDirectionDeg: {control: {type: 'range', min: 0, max: 360, step: 1}},
     windSymbolRadius: {control: {type: 'range', min: 0, max: 360, step: 1}},
     current: {control: {type: 'range', min: 0, max: 4, step: 1}},
@@ -194,7 +194,7 @@ export const WithStarboardPortIndicator: Story = {
 
 export const WithWind: Story = {
   args: {
-    wind: 10,
+    windKnots: 50,
     windFromDirectionDeg: 116,
     padding: 70,
     windSymbolRadius: 190,

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

@@ -222,7 +222,7 @@ export class ObcWatch extends LitElement {
   @property({type: Boolean}) crosshairEnabled: boolean = false;
   @property({type: Boolean}) showLabels: boolean = false;
   @property({type: Array, attribute: false}) vessels: WatchVessel[] = [];
-  @property({type: Number}) wind: number | null = null;
+  @property({type: Number}) windKnots: number | null = null;
   @property({type: Number}) windFromDirectionDeg: number | null = null;
   @property({type: Number}) windSymbolRadius: number | null = null;
   @property({type: String}) windColor: string | undefined;
@@ -766,9 +766,9 @@ export class ObcWatch extends LitElement {
         })
       : nothing;
     const wind =
-      this.wind != null && this.windFromDirectionDeg != null
+      this.windKnots != null && this.windFromDirectionDeg != null
         ? svg`<g transform="scale(${this.scaleWindIcon})">${renderWind({
-            wind: this.wind,
+            windKnots: this.windKnots,
             fromDirectionDeg: this.windFromDirectionDeg,
             radius: this.windSymbolRadius ?? 192,
             color: this.windColor,

package/src/navigation-instruments/wind/wind.stories.ts

@@ -76,7 +76,7 @@ const meta: Meta<typeof ObcWind> = {
     width: 400,
     vesselHeadingDeg: 60,
     currentWindFromDirection: 100,
-    currentWindSpeedBeaufort: 5,
+    currentWindSpeedKnots: 25,
     windHistogramData: windHistogramData,
   },
   argTypes: {
@@ -85,8 +85,9 @@ const meta: Meta<typeof ObcWind> = {
     currentWindFromDirection: {
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
-    currentWindSpeedBeaufort: {
-      control: {type: 'range', min: 0, max: 12, step: 1},
+    currentWindSpeedKnots: {
+      control: {type: 'range', min: 0, max: 75, step: 1},
+      description: 'Wind speed in knots.',
     },
     windHistogramData: {control: 'object'},
     vesselImage: {

package/src/navigation-instruments/wind/wind.ts

@@ -33,7 +33,7 @@ const WIND_HISTOGRAM_MIN_RADIUS = 50;
 @customElement('obc-wind')
 export class ObcWind extends LitElement {
   @property({type: Number}) currentWindFromDirection: number = 0;
-  @property({type: Number}) currentWindSpeedBeaufort: number = 1;
+  @property({type: Number}) currentWindSpeedKnots: number = 25;
   @property({type: Array, attribute: false})
   windHistogramData: WindHistogramData[] = [];
   @property({type: String}) vesselImage: VesselImage = VesselImage.genericTop;
@@ -146,7 +146,7 @@ export class ObcWind extends LitElement {
         ${this.renderWindHistogram(variant)}
         <obc-watch
           .watchCircleType=${watchCircleType}
-          .wind=${this.currentWindSpeedBeaufort}
+          .windKnots=${this.currentWindSpeedKnots}
           .windFromDirectionDeg=${this.currentWindFromDirection}
           .windSymbolRadius=${windSymbolRadius}
           .scaleWindIcon=${scaleWindIcon}

package/src/navigation-instruments/wind-indicator/wind-indicator.stories.ts

@@ -11,15 +11,18 @@ type WindIndicatorArgs = {
   type: WindIndicatorType;
   direction: WindIndicatorDirection;
   priority: WindIndicatorPriority;
-  level: number;
+  currentWindSpeedKnots: number;
   rotationAngle: number;
-  windFromAngle: number;
+  currentWindFromDirection: number;
   angle?: number;
   'wind-from-angle'?: number;
+  'current-wind-from-direction'?: number;
   'rotation-angle'?: number;
-  clampedLevel?: number;
+  'current-wind-speed-knots'?: number;
+  iconIndex?: number;
   accentColor?: string;
   windIconCache?: unknown;
+  windFromAngle?: number;
 };
 
 const meta: Meta<WindIndicatorArgs> = {
@@ -37,14 +40,14 @@ const meta: Meta<WindIndicatorArgs> = {
       .type=${args.type}
       .direction=${args.direction}
       .priority=${args.priority}
-      .level=${args.level}
+      .currentWindSpeedKnots=${args.currentWindSpeedKnots}
       .rotationAngle=${args.rotationAngle}
-      .windFromAngle=${args.windFromAngle}
+      .currentWindFromDirection=${args.currentWindFromDirection}
     ></obc-wind-indicator>
   `,
   args: {
-    windFromAngle: 0,
-    level: 7,
+    currentWindFromDirection: 0,
+    currentWindSpeedKnots: 35,
     type: WindIndicatorType.arrow,
     direction: WindIndicatorDirection.true,
     priority: WindIndicatorPriority.regular,
@@ -59,8 +62,8 @@ const meta: Meta<WindIndicatorArgs> = {
       control: {type: 'select'},
       options: Object.values(WindIndicatorDirection),
     },
-    windFromAngle: {
-      name: 'Wind From Angle',
+    currentWindFromDirection: {
+      name: 'Current Wind From Direction',
       description: 'Wind-from angle in degrees. 0/360 = wind from north.',
       control: {type: 'range', min: 0, max: 360, step: 1},
     },
@@ -74,12 +77,19 @@ const meta: Meta<WindIndicatorArgs> = {
       control: {type: 'select'},
       options: Object.values(WindIndicatorPriority),
     },
-    level: {control: {type: 'range', min: 0, max: 12, step: 1}},
+    currentWindSpeedKnots: {
+      description:
+        'Wind speed in knots. Mapped to barb icons in 5-kn steps (standard meteorological wind-barb convention).',
+      control: {type: 'range', min: 0, max: 75, step: 1},
+    },
 
     angle: {table: {disable: true}, control: false},
+    windFromAngle: {table: {disable: true}, control: false},
     'wind-from-angle': {table: {disable: true}, control: false},
+    'current-wind-from-direction': {table: {disable: true}, control: false},
     'rotation-angle': {table: {disable: true}, control: false},
-    clampedLevel: {table: {disable: true}, control: false},
+    'current-wind-speed-knots': {table: {disable: true}, control: false},
+    iconIndex: {table: {disable: true}, control: false},
     accentColor: {table: {disable: true}, control: false},
     windIconCache: {table: {disable: true}, control: false},
   },
@@ -121,6 +131,6 @@ export const Labeled: Story = {
     type: WindIndicatorType.labeled,
     direction: WindIndicatorDirection.true,
     priority: WindIndicatorPriority.regular,
-    level: 12,
+    currentWindSpeedKnots: 60,
   },
 };