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

package/custom-elements.json

@@ -80259,6 +80259,215 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-instruments/indicator-graph/indicator-graph.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ObcIndicatorGraph",
+          "members": [
+            {
+              "kind": "field",
+              "name": "data",
+              "type": {
+                "text": "Array"
+              },
+              "default": "[[], []]",
+              "description": "The data to display in the graph, first array is the x values, second array is the y values",
+              "attribute": "data"
+            },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "ObcIndicatorGraphLayout"
+              },
+              "default": "{}",
+              "attribute": "layout"
+            },
+            {
+              "kind": "field",
+              "name": "chart",
+              "type": {
+                "text": "HTMLDivElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "y",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "24"
+            },
+            {
+              "kind": "field",
+              "name": "zeroLineY",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "uplot",
+              "type": {
+                "text": "uPlot | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "resizeObserver",
+              "type": {
+                "text": "ResizeObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "getCssColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_range",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "[number, number]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "_self",
+                  "type": {
+                    "text": "uPlot"
+                  }
+                },
+                {
+                  "name": "initMin",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "initMax",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "_scaleKey",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_effectiveSize",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_effectivePriority",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_getStrokeWidth",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_getStrokeColor",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updatePalette"
+            },
+            {
+              "kind": "method",
+              "name": "updateY",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateZeroLine",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "data",
+              "type": {
+                "text": "Array"
+              },
+              "default": "[[], []]",
+              "description": "The data to display in the graph, first array is the x values, second array is the y values",
+              "fieldName": "data"
+            },
+            {
+              "name": "layout",
+              "type": {
+                "text": "ObcIndicatorGraphLayout"
+              },
+              "default": "{}",
+              "fieldName": "layout"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "obc-indicator-graph",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ObcIndicatorGraph",
+          "declaration": {
+            "name": "ObcIndicatorGraph",
+            "module": "src/navigation-instruments/indicator-graph/indicator-graph.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "obc-indicator-graph",
+          "declaration": {
+            "name": "ObcIndicatorGraph",
+            "module": "src/navigation-instruments/indicator-graph/indicator-graph.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/navigation-instruments/instrument-field/instrument-field.ts",

package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js

@@ -53,10 +53,6 @@ const componentStyle = css`
   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;
@@ -64,6 +60,13 @@ const componentStyle = css`
   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/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"integration-vessel-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"integration-vessel-menu.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/graph-mini/graph-mini.css.js

@@ -33,7 +33,8 @@ const compentStyle = css`
   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/dist/navigation-instruments/graph-mini/graph-mini.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-mini.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"graph-mini.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/graph-mini/graph-mini.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,KAAK,EAAG,cAAc,CAAC;IAGvB,OAAO,CAAC,CAAC,CAAc;IAEvB,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,WAAW;IAKV,YAAY;IA2CrB,aAAa;IASb,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAQf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
+{"version":3,"file":"graph-mini.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE;;;;;GAKG;AACH,qBACa,YAAa,SAAQ,UAAU;IAE1C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;IAGzB,KAAK,EAAG,cAAc,CAAC;IAGvB,OAAO,CAAC,CAAC,CAAc;IAEvB,OAAO,CAAC,KAAK,CAAsB;IAEnC,OAAO,CAAC,WAAW;IAKV,YAAY;IA2CrB,aAAa;IASb,OAAO,CAAC,OAAO;IAUN,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAUf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/navigation-instruments/graph-mini/graph-mini.js

@@ -26,8 +26,8 @@ let ObcGraphMini = class extends LitElement {
   }
   firstUpdated() {
     const opts = {
-      width: 48,
-      height: 48,
+      width: 32,
+      height: 32,
       scales: {
         x: { time: false, show: false },
         y: {
@@ -46,7 +46,7 @@ let ObcGraphMini = class extends LitElement {
         {},
         {
           stroke: this.getCssColor("--element-neutral-color"),
-          width: 2,
+          width: 1,
           points: { show: false }
         }
       ],
@@ -65,7 +65,7 @@ let ObcGraphMini = class extends LitElement {
       return;
     }
     const stroke = this.getCssColor("--element-neutral-color");
-    this.uplot.setSeries(1, { stroke, width: 2, points: { show: false } });
+    this.uplot.setSeries(1, { stroke, width: 1, points: { show: false } });
   }
   updateY() {
     if (!this.uplot) {
@@ -85,7 +85,9 @@ let ObcGraphMini = class extends LitElement {
   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/dist/navigation-instruments/graph-mini/graph-mini.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\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-graph-mini')\nexport class ObcGraphMini extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Number})\n  minY: number | undefined;\n\n  @property({type: Number})\n  maxY: number | undefined;\n\n  @query('#chart')\n  chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  private uplot: uPlot | 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: 48,\n      height: 48,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: (\n            _self: uPlot,\n            initMin: number,\n            initMax: number,\n            _scaleKey: string\n          ) => {\n            const range = this.maxY ?? initMax - (this.minY ?? initMin);\n            return [\n              this.minY ?? initMin - range * 0.1,\n              this.maxY ?? initMax + range * 0.1,\n            ] as [number, number];\n          },\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this.getCssColor('--element-neutral-color'),\n          width: 2,\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\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this.getCssColor('--element-neutral-color');\n    // @ts-expect-error - stroke is not a property of the Series interface\n    this.uplot.setSeries(1, {stroke: stroke, width: 2, points: {show: false}});\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 * 32 - 3;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"chart-container\">\n        <div id=\"chart\"><div id=\"dot\" style=\"bottom: ${this.y}px; \"></div></div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-graph-mini': ObcGraphMini;\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"graph-mini.js","sources":["../../../src/navigation-instruments/graph-mini/graph-mini.ts"],"sourcesContent":["import {LitElement, PropertyValues, html, unsafeCSS} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport compentStyle from './graph-mini.css?inline';\nimport uPlot from 'uplot';\nimport {customElement} from '../../decorator.js';\n\n/**\n * @element obc-graph-mini\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-graph-mini')\nexport class ObcGraphMini extends LitElement {\n  @property({type: Array})\n  data: [number[], number[]] = [[], []];\n\n  @property({type: Number})\n  minY: number | undefined;\n\n  @property({type: Number})\n  maxY: number | undefined;\n\n  @query('#chart')\n  chart!: HTMLDivElement;\n\n  @state()\n  private y: number = 24;\n\n  private uplot: uPlot | 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: 32,\n      height: 32,\n      scales: {\n        x: {time: false, show: false},\n        y: {\n          auto: true,\n          show: false,\n          range: (\n            _self: uPlot,\n            initMin: number,\n            initMax: number,\n            _scaleKey: string\n          ) => {\n            const range = this.maxY ?? initMax - (this.minY ?? initMin);\n            return [\n              this.minY ?? initMin - range * 0.1,\n              this.maxY ?? initMax + range * 0.1,\n            ] as [number, number];\n          },\n        },\n      },\n      series: [\n        {},\n        {\n          stroke: this.getCssColor('--element-neutral-color'),\n          width: 1,\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\n  updatePalette() {\n    if (!this.uplot) {\n      return;\n    }\n    const stroke = this.getCssColor('--element-neutral-color');\n    // @ts-expect-error - stroke is not a property of the Series interface\n    this.uplot.setSeries(1, {stroke: stroke, width: 1, points: {show: false}});\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 * 32 - 3;\n  }\n\n  override updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('data')) {\n      this.updatePalette();\n      this.uplot?.setData(this.data);\n      requestAnimationFrame(() => this.updateY());\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"chart-container\">\n        <div id=\"chart\">\n          <div id=\"dot\" style=\"transform: translateY(${-this.y}px);\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  static override styles = unsafeCSS(compentStyle);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-graph-mini': ObcGraphMini;\n  }\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+import { css } from "lit";
+const compentStyle = css`
+          * {
+            -webkit-tap-highlight-color: transparent;
+          }
+
+.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;
+}
+`;
+export {
+  compentStyle as default
+};
+//# sourceMappingURL=indicator-graph.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-graph.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts

@@ -0,0 +1,54 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare enum ObcIndicatorGraphSize {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export declare 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
+ */
+export declare class ObcIndicatorGraph extends LitElement {
+    data: [number[], number[]];
+    layout: ObcIndicatorGraphLayout;
+    private chart;
+    private y;
+    private zeroLineY;
+    private uplot;
+    private resizeObserver;
+    private getCssColor;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    private updateSize;
+    private _range;
+    private get _effectiveSize();
+    private get _effectivePriority();
+    private _getStrokeWidth;
+    private _getStrokeColor;
+    updatePalette(): void;
+    private updateY;
+    private updateZeroLine;
+    updated(changedProperties: PropertyValues): void;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'obc-indicator-graph': ObcIndicatorGraph;
+    }
+}
+//# sourceMappingURL=indicator-graph.d.ts.map

package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"indicator-graph.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/indicator-graph/indicator-graph.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAkB,MAAM,KAAK,CAAC;AAMhE,oBAAY,qBAAqB;IAC/B,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,yBAAyB;IACnC,OAAO,YAAY;IACnB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IACrC,CAAC,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CAClC;AAED;;;;;GAKG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAE/C,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CAAY;IAGtC,MAAM,EAAE,uBAAuB,CAAM;IAGrC,OAAO,CAAC,KAAK,CAAkB;IAG/B,OAAO,CAAC,CAAC,CAAc;IAGvB,OAAO,CAAC,SAAS,CAAa;IAE9B,OAAO,CAAC,KAAK,CAAsB;IACnC,OAAO,CAAC,cAAc,CAA+B;IAErD,OAAO,CAAC,WAAW;IAKV,YAAY;IAmCZ,oBAAoB;IAQ7B,OAAO,CAAC,UAAU;IAWlB,OAAO,CAAC,MAAM;IAed,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,KAAK,kBAAkB,GAE7B;IAED,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IASvB,aAAa;IAab,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,cAAc;IASb,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAsBf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

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

@@ -0,0 +1,203 @@
+import { unsafeCSS, LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import compentStyle from "./indicator-graph.css.js";
+import uPlot from "uplot";
+import { customElement } from "../../decorator.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+var ObcIndicatorGraphSize = /* @__PURE__ */ ((ObcIndicatorGraphSize2) => {
+  ObcIndicatorGraphSize2["small"] = "small";
+  ObcIndicatorGraphSize2["medium"] = "medium";
+  ObcIndicatorGraphSize2["large"] = "large";
+  return ObcIndicatorGraphSize2;
+})(ObcIndicatorGraphSize || {});
+var ObcIndicatorGraphPriority = /* @__PURE__ */ ((ObcIndicatorGraphPriority2) => {
+  ObcIndicatorGraphPriority2["regular"] = "regular";
+  ObcIndicatorGraphPriority2["enhanced"] = "enhanced";
+  return ObcIndicatorGraphPriority2;
+})(ObcIndicatorGraphPriority || {});
+let ObcIndicatorGraph = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.data = [[], []];
+    this.layout = {};
+    this.y = 24;
+    this.zeroLineY = 0;
+    this.uplot = null;
+    this.resizeObserver = null;
+  }
+  getCssColor(name) {
+    const color = getComputedStyle(this).getPropertyValue(name).trim();
+    return color;
+  }
+  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);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.uplot?.destroy();
+    this.uplot = null;
+  }
+  updateSize() {
+    if (!this.uplot) {
+      return;
+    }
+    this.uplot.setSize({
+      width: this.chart.clientWidth,
+      height: this.chart.clientHeight
+    });
+    this.updateY();
+  }
+  _range(_self, initMin, initMax, _scaleKey) {
+    const { min: minY, max: maxY } = this.layout.y ?? {};
+    const range = maxY ?? initMax - (minY ?? initMin);
+    let min = minY ?? initMin - range * 0.1;
+    if (minY === void 0) {
+      min = Math.min(0, min);
+    }
+    return [min, maxY ?? initMax + range * 0.1];
+  }
+  get _effectiveSize() {
+    return this.layout.size ?? "medium";
+  }
+  get _effectivePriority() {
+    return this.layout.priority ?? "regular";
+  }
+  _getStrokeWidth() {
+    switch (this._effectiveSize) {
+      case "small":
+        return 1;
+      case "medium":
+        return 1.5;
+      case "large":
+        return 2;
+    }
+  }
+  _getStrokeColor() {
+    switch (this._effectivePriority) {
+      case "regular":
+        return this.getCssColor("--element-neutral-color");
+      case "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,
+      width: this._getStrokeWidth(),
+      points: { show: false }
+    });
+  }
+  updateY() {
+    if (!this.uplot) {
+      return;
+    }
+    const lastY = this.data[1][this.data[1].length - 1];
+    const yRatio = this.uplot.scales.y.valToPct(lastY);
+    this.y = yRatio * this.chart.clientHeight;
+    this.updateZeroLine();
+  }
+  updateZeroLine() {
+    if (!this.uplot) {
+      return;
+    }
+    const yRatio = this.uplot.scales.y.valToPct(0);
+    this.zeroLineY = yRatio * this.chart.clientHeight;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("data") || changedProperties.has("layout")) {
+      this.updatePalette();
+      this.uplot?.setData(this.data);
+      requestAnimationFrame(() => this.updateY());
+    }
+  }
+  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>
+    `;
+  }
+};
+ObcIndicatorGraph.styles = unsafeCSS(compentStyle);
+__decorateClass([
+  property({ type: Array })
+], ObcIndicatorGraph.prototype, "data", 2);
+__decorateClass([
+  property({ type: Object })
+], ObcIndicatorGraph.prototype, "layout", 2);
+__decorateClass([
+  query(".chart-container")
+], ObcIndicatorGraph.prototype, "chart", 2);
+__decorateClass([
+  state()
+], ObcIndicatorGraph.prototype, "y", 2);
+__decorateClass([
+  state()
+], ObcIndicatorGraph.prototype, "zeroLineY", 2);
+ObcIndicatorGraph = __decorateClass([
+  customElement("obc-indicator-graph")
+], ObcIndicatorGraph);
+export {
+  ObcIndicatorGraph,
+  ObcIndicatorGraphPriority,
+  ObcIndicatorGraphSize
+};
+//# sourceMappingURL=indicator-graph.js.map