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

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;
+  }
+}