@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.67 → 2.0.0-next.69

package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-graph.js","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './indicator-graph.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\nexport enum ObcIndicatorGraphSize {\n  small = 'small',\n  medium = 'medium',\n  large = 'large',\n}\n\nexport enum ObcIndicatorGraphPriority {\n  regular = 'regular',\n  enhanced = 'enhanced',\n}\n\nexport interface ObcIndicatorGraphLayout {\n  size?: ObcIndicatorGraphSize;\n  priority?: ObcIndicatorGraphPriority;\n  y?: {min?: number; max?: number};\n}\n\n/**\n * @element obc-indicator-graph\n * @description A mini graph component\n *\n * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values\n */\n@customElement('obc-indicator-graph')\nexport class ObcIndicatorGraph extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Object})\n  layout: ObcIndicatorGraphLayout = {};\n\n  @query('.chart-container')\n  private chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  @state()\n  private zeroLineY: number = 0;\n\n  private uplot: uPlot | null = null;\n  private resizeObserver: ResizeObserver | null = null;\n\n  private getCssColor(name: string) {\n    const color = getComputedStyle(this).getPropertyValue(name).trim();\n    return color;\n  }\n\n  override firstUpdated() {\n    const opts = {\n      width: this.chart.clientWidth,\n      height: this.chart.clientHeight,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: this._range.bind(this),\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this._getStrokeColor(),\n          width: this._getStrokeWidth(),\n          points: {show: false},\n        },\n      ],\n      axes: [\n        {show: false},\n        {ticks: {show: false}, show: false, grid: {show: false}},\n      ],\n      legend: {show: false},\n      cursor: {show: false},\n    };\n\n    this.uplot = new uPlot(opts, this.data, this.chart);\n    requestAnimationFrame(() => this.updateY());\n\n    this.resizeObserver = new ResizeObserver(() => this.updateSize());\n    this.resizeObserver.observe(this.chart);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n    this.resizeObserver = null;\n    this.uplot?.destroy();\n    this.uplot = null;\n  }\n\n  private updateSize() {\n    if (!this.uplot) {\n      return;\n    }\n    this.uplot.setSize({\n      width: this.chart.clientWidth,\n      height: this.chart.clientHeight,\n    });\n    this.updateY();\n  }\n\n  private _range(\n    _self: uPlot,\n    initMin: number,\n    initMax: number,\n    _scaleKey: string\n  ): [number, number] {\n    const {min: minY, max: maxY} = this.layout.y ?? {};\n    const range = maxY ?? initMax - (minY ?? initMin);\n    let min = minY ?? initMin - range * 0.1;\n    if (minY === undefined) {\n      min = Math.min(0, min);\n    }\n    return [min, maxY ?? initMax + range * 0.1] as [number, number];\n  }\n\n  private get _effectiveSize() {\n    return this.layout.size ?? ObcIndicatorGraphSize.medium;\n  }\n\n  private get _effectivePriority() {\n    return this.layout.priority ?? ObcIndicatorGraphPriority.regular;\n  }\n\n  private _getStrokeWidth() {\n    switch (this._effectiveSize) {\n      case ObcIndicatorGraphSize.small:\n        return 1;\n      case ObcIndicatorGraphSize.medium:\n        return 1.5;\n      case ObcIndicatorGraphSize.large:\n        return 2;\n    }\n  }\n\n  private _getStrokeColor() {\n    switch (this._effectivePriority) {\n      case ObcIndicatorGraphPriority.regular:\n        return this.getCssColor('--element-neutral-color');\n      case ObcIndicatorGraphPriority.enhanced:\n        return this.getCssColor('--element-neutral-enhanced-color');\n    }\n  }\n\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this._getStrokeColor();\n    this.uplot.setSeries(1, {\n      // @ts-expect-error - stroke is not a property of the Series interface\n      stroke: stroke,\n      width: this._getStrokeWidth(),\n      points: {show: false},\n    });\n  }\n\n  private updateY() {\n    if (!this.uplot) {\n      return;\n    }\n    const lastY = this.data[1][this.data[1].length - 1];\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(lastY);\n    this.y = yRatio * this.chart.clientHeight;\n    this.updateZeroLine();\n  }\n\n  private updateZeroLine() {\n    if (!this.uplot) {\n      return;\n    }\n    // @ts-expect-error - valToPct is not a property of the Scale interface\n    const yRatio = this.uplot.scales.y.valToPct(0);\n    this.zeroLineY = yRatio * this.chart.clientHeight;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data') || changedProperties.has('layout')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"chart-container ${this._effectivePriority} ${this\n          ._effectiveSize}\"\n      >\n        <div\n          id=\"zero-line\"\n          style=\"transform: translateY(${-this.zeroLineY}px);\n          display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};\n          \"\n        ></div>\n        <div\n          id=\"dot\"\n          style=\"transform: translateY(${-this.y}px);\n        display: ${this.y > -0.5 ? 'block' : 'none'};\n        \"\n        ></div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-indicator-graph': ObcIndicatorGraph;\n  }\n}\n"],"names":["ObcIndicatorGraphSize","ObcIndicatorGraphPriority"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.67",
+  "version": "2.0.0-next.69",
   "type": "module",
   "repository": {
     "type": "git",

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.css

@@ -42,10 +42,6 @@
   border-radius: 8px;
 }
 
-.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
-  display: contents;
-}
-
 .footer-container slot[name="buttons"]::slotted(*) {
   display: flex;
   flex: 1 1 0px;
@@ -53,6 +49,13 @@
   white-space: nowrap;
 }
 
+.footer-container slot[name="buttons"]::slotted(:not(obc-button)) {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(auto, 1fr);
+  gap: var(--app-components-integration-system-menu-action-spacing);
+}
+
 .buttons-slot {
   display: contents;
 }

package/src/integration-systems/integration-vessel-menu/integration-vessel-menu.stories.ts

@@ -195,6 +195,25 @@ const templateWithoutAlarms: IntegrationVesselMenuTemplate = (args) => html`
   </obc-integration-vessel-menu>
 `;
 
+const templateWrappedButtons: IntegrationVesselMenuTemplate = (args) => html`
+  <obc-integration-vessel-menu .hideAlarmList=${args.hideAlarmList}>
+    <div slot="buttons">
+      <div style="display: contents;">
+        <obc-button ?fullWidth=${true}>Open</obc-button>
+      </div>
+      <div style="display: contents;">
+        <obc-button ?fullWidth=${true}>Alerts</obc-button>
+      </div>
+    </div>
+    <div slot="content" style="padding: 24px;">
+      <div style="width: 320px;">
+        <p>Content area</p>
+      </div>
+    </div>
+    ${renderAlarms()}
+  </obc-integration-vessel-menu>
+`;
+
 export const Default: Story = {
   render: template,
 };
@@ -207,3 +226,7 @@ export const WithoutAlarmsHideEmptyAlarmList: Story = {
   render: templateWithoutAlarms,
   args: {hideAlarmList: true},
 };
+
+export const WithButtonsWrappedInDivWithoutStyling: Story = {
+  render: templateWrappedButtons,
+};

package/src/navigation-instruments/graph-mini/graph-mini.css

@@ -27,7 +27,8 @@
   position: absolute;
   width: 4px;
   height: 4px;
-  right: -3px;
+  right: -3.5px;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);

package/src/navigation-instruments/graph-mini/graph-mini.stories.ts

@@ -19,13 +19,22 @@ type Story = StoryObj<ObcGraphMini>;
 
 export const Primary: Story = {};
 
+export const WithRange: Story = {
+  args: {
+    minY: -10,
+    maxY: 10,
+  },
+};
+
 export const Realtime: Story = {
   tags: ['skip-test'],
   args: {
     data: [
       Array.from({length: 60}, (_, i) => i),
-      Array.from({length: 60}, (_, i) => Math.sin((i / 60) * 2 * Math.PI)),
+      Array.from({length: 60}, (_, i) => Math.sin((i / 60 / 5) * 2 * Math.PI)),
     ],
+    minY: -1.1,
+    maxY: 1.1,
   },
   play: async ({canvasElement}) => {
     const graph = canvasElement.querySelector('obc-graph-mini') as ObcGraphMini;
@@ -35,10 +44,9 @@ export const Realtime: Story = {
 
     let i = graph.data[0].length;
     setInterval(() => {
-      console.log('updating', i);
       const data = graph.data;
       const x = [...data[0], i];
-      const y = [...data[1], Math.sin((i / 60) * 2 * Math.PI)];
+      const y = [...data[1], Math.sin((i / 60 / 5) * 2 * Math.PI)];
       x.shift();
       y.shift();
       const newData: [number[], number[]] = [x, y];

package/src/navigation-instruments/graph-mini/graph-mini.ts

@@ -36,8 +36,8 @@ export class ObcGraphMini extends LitElement {
 
   override firstUpdated() {
     const opts = {
-      width: 48,
-      height: 48,
+      width: 32,
+      height: 32,
       scales: {
         x: {time: false, show: false},
         y: {
@@ -61,7 +61,7 @@ export class ObcGraphMini extends LitElement {
         {},
         {
           stroke: this.getCssColor('--element-neutral-color'),
-          width: 2,
+          width: 1,
           points: {show: false},
         },
       ],
@@ -83,7 +83,7 @@ export class ObcGraphMini extends LitElement {
     }
     const stroke = this.getCssColor('--element-neutral-color');
     // @ts-expect-error - stroke is not a property of the Series interface
-    this.uplot.setSeries(1, {stroke: stroke, width: 2, points: {show: false}});
+    this.uplot.setSeries(1, {stroke: stroke, width: 1, points: {show: false}});
   }
 
   private updateY() {
@@ -107,7 +107,9 @@ export class ObcGraphMini extends LitElement {
   override render() {
     return html`
       <div class="chart-container">
-        <div id="chart"><div id="dot" style="bottom: ${this.y}px; "></div></div>
+        <div id="chart">
+          <div id="dot" style="transform: translateY(${-this.y}px);"></div>
+        </div>
       </div>
     `;
   }

package/src/navigation-instruments/indicator-graph/indicator-graph.css

@@ -0,0 +1,55 @@
+.chart-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+canvas {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+#dot {
+  position: absolute;
+  width: 4px;
+  height: 4px;
+  right: -3px;
+  bottom: -3px;
+  border-radius: 50%;
+  background: var(--element-neutral-color);
+  border: 1px solid var(--border-silhouette-color);
+  z-index: 1;
+}
+
+.enhanced #dot {
+  background: var(--element-neutral-enhanced-color);
+}
+
+.medium #dot {
+  width: 6px;
+  height: 6px;
+  right: -4px;
+  bottom: -4px;
+}
+
+.large #dot {
+  width: 8px;
+  height: 8px;
+  right: -5px;
+  bottom: -5px;
+}
+
+#zero-line {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: -0.5px;
+  background: var(--element-disabled-color);
+  border-radius: 2px;
+}

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

@@ -0,0 +1,116 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {
+  ObcIndicatorGraph,
+  ObcIndicatorGraphPriority,
+  ObcIndicatorGraphSize,
+} from './indicator-graph.js';
+import './indicator-graph.js';
+import {widthDecorator} from '../../storybook-util.js';
+const meta: Meta<typeof ObcIndicatorGraph> = {
+  title: 'Bars and Graphs/Indicator Graph',
+  tags: ['6.0', 'autodocs'],
+  component: 'obc-indicator-graph',
+  decorators: [widthDecorator],
+  args: {
+    data: [
+      Array.from({length: 30}, (_, i) => i),
+      Array.from({length: 30}, (_, i) => 2 + Math.sin((i / 30) * 2 * Math.PI)),
+    ],
+    width: 400,
+    height: 400,
+  },
+  argTypes: {
+    width: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+    height: {control: {type: 'range', min: 100, max: 1000, step: 1}},
+  },
+} satisfies Meta<ObcIndicatorGraph>;
+
+export default meta;
+type Story = StoryObj<ObcIndicatorGraph>;
+
+export const Primary: Story = {};
+
+export const WithRange: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.regular,
+      y: {min: -10, max: 10},
+    },
+  },
+};
+
+export const Enhanced: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.enhanced,
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.small,
+    },
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    layout: {
+      size: ObcIndicatorGraphSize.large,
+    },
+  },
+};
+
+export const Realtime: Story = {
+  tags: ['skip-test'],
+  args: {
+    data: [
+      Array.from({length: 60}, (_, i) => i),
+      Array.from(
+        {length: 60},
+        (_, i) => 2 + Math.sin((i / 60 / 5) * 2 * Math.PI)
+      ),
+    ],
+    layout: {
+      size: ObcIndicatorGraphSize.medium,
+      priority: ObcIndicatorGraphPriority.regular,
+      y: {max: 4},
+    },
+  },
+  play: async ({canvasElement}) => {
+    const graph = canvasElement.querySelector(
+      'obc-indicator-graph'
+    ) as ObcIndicatorGraph;
+    if (!graph) {
+      throw new Error('Graph not found');
+    }
+
+    let i = graph.data[0].length;
+    const intervalId = setInterval(() => {
+      if (!graph.isConnected) {
+        clearInterval(intervalId);
+        return;
+      }
+      const data = graph.data;
+      const x = [...data[0], i];
+      const y = [...data[1], 2 + Math.sin((i / 60 / 5) * 2 * Math.PI)];
+      x.shift();
+      y.shift();
+      const newData: [number[], number[]] = [x, y];
+      graph.data = newData;
+      i++;
+    }, 1000 / 60);
+  },
+};

package/src/navigation-instruments/indicator-graph/indicator-graph.ts

@@ -0,0 +1,222 @@
+import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';
+import {property, query, state} from 'lit/decorators.js';
+import compentStyle from './indicator-graph.css?inline';
+import uPlot from 'uplot';
+import {customElement} from '../../decorator.js';
+
+export enum ObcIndicatorGraphSize {
+  small = 'small',
+  medium = 'medium',
+  large = 'large',
+}
+
+export enum ObcIndicatorGraphPriority {
+  regular = 'regular',
+  enhanced = 'enhanced',
+}
+
+export interface ObcIndicatorGraphLayout {
+  size?: ObcIndicatorGraphSize;
+  priority?: ObcIndicatorGraphPriority;
+  y?: {min?: number; max?: number};
+}
+
+/**
+ * @element obc-indicator-graph
+ * @description A mini graph component
+ *
+ * @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
+ */
+@customElement('obc-indicator-graph')
+export class ObcIndicatorGraph extends LitElement {
+  @property({type: Array})
+  data: [number[], number[]] = [[], []];
+
+  @property({type: Object})
+  layout: ObcIndicatorGraphLayout = {};
+
+  @query('.chart-container')
+  private chart!: HTMLDivElement;
+
+  @state()
+  private y: number = 24;
+
+  @state()
+  private zeroLineY: number = 0;
+
+  private uplot: uPlot | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
+  private getCssColor(name: string) {
+    const color = getComputedStyle(this).getPropertyValue(name).trim();
+    return color;
+  }
+
+  override firstUpdated() {
+    const opts = {
+      width: this.chart.clientWidth,
+      height: this.chart.clientHeight,
+      scales: {
+        x: {time: false, show: false},
+        y: {
+          auto: true,
+          show: false,
+          range: this._range.bind(this),
+        },
+      },
+      series: [
+        {},
+        {
+          stroke: this._getStrokeColor(),
+          width: this._getStrokeWidth(),
+          points: {show: false},
+        },
+      ],
+      axes: [
+        {show: false},
+        {ticks: {show: false}, show: false, grid: {show: false}},
+      ],
+      legend: {show: false},
+      cursor: {show: false},
+    };
+
+    this.uplot = new uPlot(opts, this.data, this.chart);
+    requestAnimationFrame(() => this.updateY());
+
+    this.resizeObserver = new ResizeObserver(() => this.updateSize());
+    this.resizeObserver.observe(this.chart);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.uplot?.destroy();
+    this.uplot = null;
+  }
+
+  private updateSize() {
+    if (!this.uplot) {
+      return;
+    }
+    this.uplot.setSize({
+      width: this.chart.clientWidth,
+      height: this.chart.clientHeight,
+    });
+    this.updateY();
+  }
+
+  private _range(
+    _self: uPlot,
+    initMin: number,
+    initMax: number,
+    _scaleKey: string
+  ): [number, number] {
+    const {min: minY, max: maxY} = this.layout.y ?? {};
+    const range = maxY ?? initMax - (minY ?? initMin);
+    let min = minY ?? initMin - range * 0.1;
+    if (minY === undefined) {
+      min = Math.min(0, min);
+    }
+    return [min, maxY ?? initMax + range * 0.1] as [number, number];
+  }
+
+  private get _effectiveSize() {
+    return this.layout.size ?? ObcIndicatorGraphSize.medium;
+  }
+
+  private get _effectivePriority() {
+    return this.layout.priority ?? ObcIndicatorGraphPriority.regular;
+  }
+
+  private _getStrokeWidth() {
+    switch (this._effectiveSize) {
+      case ObcIndicatorGraphSize.small:
+        return 1;
+      case ObcIndicatorGraphSize.medium:
+        return 1.5;
+      case ObcIndicatorGraphSize.large:
+        return 2;
+    }
+  }
+
+  private _getStrokeColor() {
+    switch (this._effectivePriority) {
+      case ObcIndicatorGraphPriority.regular:
+        return this.getCssColor('--element-neutral-color');
+      case ObcIndicatorGraphPriority.enhanced:
+        return this.getCssColor('--element-neutral-enhanced-color');
+    }
+  }
+
+  updatePalette() {
+    if (!this.uplot) {
+      return;
+    }
+    const stroke = this._getStrokeColor();
+    this.uplot.setSeries(1, {
+      // @ts-expect-error - stroke is not a property of the Series interface
+      stroke: stroke,
+      width: this._getStrokeWidth(),
+      points: {show: false},
+    });
+  }
+
+  private updateY() {
+    if (!this.uplot) {
+      return;
+    }
+    const lastY = this.data[1][this.data[1].length - 1];
+    // @ts-expect-error - valToPct is not a property of the Scale interface
+    const yRatio = this.uplot.scales.y.valToPct(lastY);
+    this.y = yRatio * this.chart.clientHeight;
+    this.updateZeroLine();
+  }
+
+  private updateZeroLine() {
+    if (!this.uplot) {
+      return;
+    }
+    // @ts-expect-error - valToPct is not a property of the Scale interface
+    const yRatio = this.uplot.scales.y.valToPct(0);
+    this.zeroLineY = yRatio * this.chart.clientHeight;
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('data') || changedProperties.has('layout')) {
+      this.updatePalette();
+      this.uplot?.setData(this.data);
+      requestAnimationFrame(() => this.updateY());
+    }
+  }
+
+  override render() {
+    return html`
+      <div
+        class="chart-container ${this._effectivePriority} ${this
+          ._effectiveSize}"
+      >
+        <div
+          id="zero-line"
+          style="transform: translateY(${-this.zeroLineY}px);
+          display: ${this.zeroLineY > -0.5 ? 'block' : 'none'};
+          "
+        ></div>
+        <div
+          id="dot"
+          style="transform: translateY(${-this.y}px);
+        display: ${this.y > -0.5 ? 'block' : 'none'};
+        "
+        ></div>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-graph': ObcIndicatorGraph;
+  }
+}