@oicl/openbridge-webcomponents 2.0.0-next.77 → 2.0.0-next.78

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

@@ -7,10 +7,36 @@ const compentStyle = css`
 .chart-container {
   width: 100%;
   height: 100%;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
+
+  padding-bottom: 0.5px;
+
+  --dot-width: 6px;
+  --dot-radius: calc(var(--dot-width) / 2);
+}
+
+.chart-container.medium {
+    --dot-width: 8px;
+  }
+
+.chart-container.large {
+    --dot-width: 10px;
+  }
+
+.u-over {
+  position: absolute;
+}
+
+#chart {
+  position: absolute;
+  width: calc(100% - var(--dot-radius));
+  left: 0;
+  top: var(--dot-radius);
+  bottom: var(--dot-radius);
 }
 
 canvas {
@@ -22,11 +48,12 @@ canvas {
 }
 
 #dot {
+  box-sizing: border-box;
   position: absolute;
-  width: 4px;
-  height: 4px;
-  right: -3px;
-  bottom: -3px;
+  width: var(--dot-width);
+  height: var(--dot-width);
+  right: 0;
+  bottom: 0;
   border-radius: 50%;
   background: var(--element-neutral-color);
   border: 1px solid var(--border-silhouette-color);
@@ -37,25 +64,12 @@ canvas {
   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%;
+  left: 0;
+  right: var(--dot-radius);
   height: 1px;
-  bottom: -0.5px;
+  bottom: calc(var(--dot-radius) - 0.5px);
   background: var(--element-disabled-color);
   border-radius: 2px;
 }

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

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

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

@@ -1 +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;AAGD,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,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;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,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,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;IAUb,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,cAAc;IAab,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"}
+{"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;AAGD,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,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAC,CAAC;CAC1D;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,CAAiC;IAG1C,OAAO,CAAC,SAAS,CAAiC;IAElD,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;IAUb,OAAO,CAAC,OAAO;IAef,OAAO,CAAC,cAAc;IAab,OAAO,CAAC,iBAAiB,EAAE,cAAc;IAQzC,MAAM;IAuBf,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

@@ -165,6 +165,7 @@ let ObcIndicatorGraph = class extends LitElement {
       <div
         class="chart-container ${this._effectivePriority} ${this._effectiveSize}"
       >
+        <div id="chart"></div>
         <div
           id="zero-line"
           style="transform: translateY(${-(this.zeroLineY ?? 0)}px);
@@ -189,7 +190,7 @@ __decorateClass([
   property({ type: Object })
 ], ObcIndicatorGraph.prototype, "layout", 2);
 __decorateClass([
-  query(".chart-container")
+  query("#chart")
 ], ObcIndicatorGraph.prototype, "chart", 2);
 __decorateClass([
   state()

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

@@ -1 +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\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n  size?: ObcIndicatorGraphSize;\n  priority?: ObcIndicatorGraphPriority;\n  y?: {min?: number; max?: number; showZeroLine?: boolean};\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 | undefined = undefined;\n\n  @state()\n  private zeroLineY: number | undefined = undefined;\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 && this.layout.y?.showZeroLine !== false) {\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 series = this.uplot.series[1];\n    series.stroke = () => this._getStrokeColor();\n    series.width = this._getStrokeWidth();\n    this.uplot.redraw();\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    if (yRatio < 0 || yRatio > 1) {\n      this.y = undefined;\n    } else {\n      this.y = yRatio * this.chart.clientHeight;\n    }\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    if (yRatio < 0 || yRatio > 1) {\n      this.zeroLineY = undefined;\n      return;\n    }\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 ?? 0)}px);\n          display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n          \"\n        ></div>\n        <div\n          id=\"dot\"\n          style=\"transform: translateY(${-(this.y ?? 0)}px);\n          display: ${this.y !== undefined ? '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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"}
+{"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\n// showZeroLine is defaulted to true\nexport interface ObcIndicatorGraphLayout {\n  size?: ObcIndicatorGraphSize;\n  priority?: ObcIndicatorGraphPriority;\n  y?: {min?: number; max?: number; showZeroLine?: boolean};\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')\n  private chart!: HTMLDivElement;\n\n  @state()\n  private y: number | undefined = undefined;\n\n  @state()\n  private zeroLineY: number | undefined = undefined;\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 && this.layout.y?.showZeroLine !== false) {\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 series = this.uplot.series[1];\n    series.stroke = () => this._getStrokeColor();\n    series.width = this._getStrokeWidth();\n    this.uplot.redraw();\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    if (yRatio < 0 || yRatio > 1) {\n      this.y = undefined;\n    } else {\n      this.y = yRatio * this.chart.clientHeight;\n    }\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    if (yRatio < 0 || yRatio > 1) {\n      this.zeroLineY = undefined;\n      return;\n    }\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 id=\"chart\"></div>\n        <div\n          id=\"zero-line\"\n          style=\"transform: translateY(${-(this.zeroLineY ?? 0)}px);\n          display: ${this.zeroLineY !== undefined ? 'block' : 'none'};\n          \"\n        ></div>\n        <div\n          id=\"dot\"\n          style=\"transform: translateY(${-(this.y ?? 0)}px);\n          display: ${this.y !== undefined ? '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/dist/navigation-instruments/watch/watch.css.js

@@ -8,6 +8,10 @@ const compentStyle = css`
   box-sizing: border-box;
 }
 
+:host {
+  overflow: hidden;
+}
+
 .label {
   font-family: var(--global-typography-font-family);
   font-weight: var(--global-typography-ui-body-font-weight);

package/dist/navigation-instruments/watch/watch.css.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents",
-  "version": "2.0.0-next.77",
+  "version": "2.0.0-next.78",
   "type": "module",
   "repository": {
     "type": "git",