@oicl/openbridge-webcomponents 2.0.0-next.67 → 2.0.0-next.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundle/openbridge-webcomponents.bundle.js +18332 -18087
- package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
- package/custom-elements.json +209 -0
- package/dist/navigation-instruments/graph-mini/graph-mini.css.js +2 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.css.js.map +1 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.d.ts.map +1 -1
- package/dist/navigation-instruments/graph-mini/graph-mini.js +7 -5
- package/dist/navigation-instruments/graph-mini/graph-mini.js.map +1 -1
- package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js +66 -0
- package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js.map +1 -0
- package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts +54 -0
- package/dist/navigation-instruments/indicator-graph/indicator-graph.d.ts.map +1 -0
- package/dist/navigation-instruments/indicator-graph/indicator-graph.js +203 -0
- package/dist/navigation-instruments/indicator-graph/indicator-graph.js.map +1 -0
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -80259,6 +80259,215 @@
|
|
|
80259
80259
|
}
|
|
80260
80260
|
]
|
|
80261
80261
|
},
|
|
80262
|
+
{
|
|
80263
|
+
"kind": "javascript-module",
|
|
80264
|
+
"path": "src/navigation-instruments/indicator-graph/indicator-graph.ts",
|
|
80265
|
+
"declarations": [
|
|
80266
|
+
{
|
|
80267
|
+
"kind": "class",
|
|
80268
|
+
"description": "",
|
|
80269
|
+
"name": "ObcIndicatorGraph",
|
|
80270
|
+
"members": [
|
|
80271
|
+
{
|
|
80272
|
+
"kind": "field",
|
|
80273
|
+
"name": "data",
|
|
80274
|
+
"type": {
|
|
80275
|
+
"text": "Array"
|
|
80276
|
+
},
|
|
80277
|
+
"default": "[[], []]",
|
|
80278
|
+
"description": "The data to display in the graph, first array is the x values, second array is the y values",
|
|
80279
|
+
"attribute": "data"
|
|
80280
|
+
},
|
|
80281
|
+
{
|
|
80282
|
+
"kind": "field",
|
|
80283
|
+
"name": "layout",
|
|
80284
|
+
"type": {
|
|
80285
|
+
"text": "ObcIndicatorGraphLayout"
|
|
80286
|
+
},
|
|
80287
|
+
"default": "{}",
|
|
80288
|
+
"attribute": "layout"
|
|
80289
|
+
},
|
|
80290
|
+
{
|
|
80291
|
+
"kind": "field",
|
|
80292
|
+
"name": "chart",
|
|
80293
|
+
"type": {
|
|
80294
|
+
"text": "HTMLDivElement"
|
|
80295
|
+
},
|
|
80296
|
+
"privacy": "private"
|
|
80297
|
+
},
|
|
80298
|
+
{
|
|
80299
|
+
"kind": "field",
|
|
80300
|
+
"name": "y",
|
|
80301
|
+
"type": {
|
|
80302
|
+
"text": "number"
|
|
80303
|
+
},
|
|
80304
|
+
"privacy": "private",
|
|
80305
|
+
"default": "24"
|
|
80306
|
+
},
|
|
80307
|
+
{
|
|
80308
|
+
"kind": "field",
|
|
80309
|
+
"name": "zeroLineY",
|
|
80310
|
+
"type": {
|
|
80311
|
+
"text": "number"
|
|
80312
|
+
},
|
|
80313
|
+
"privacy": "private",
|
|
80314
|
+
"default": "0"
|
|
80315
|
+
},
|
|
80316
|
+
{
|
|
80317
|
+
"kind": "field",
|
|
80318
|
+
"name": "uplot",
|
|
80319
|
+
"type": {
|
|
80320
|
+
"text": "uPlot | null"
|
|
80321
|
+
},
|
|
80322
|
+
"privacy": "private",
|
|
80323
|
+
"default": "null"
|
|
80324
|
+
},
|
|
80325
|
+
{
|
|
80326
|
+
"kind": "field",
|
|
80327
|
+
"name": "resizeObserver",
|
|
80328
|
+
"type": {
|
|
80329
|
+
"text": "ResizeObserver | null"
|
|
80330
|
+
},
|
|
80331
|
+
"privacy": "private",
|
|
80332
|
+
"default": "null"
|
|
80333
|
+
},
|
|
80334
|
+
{
|
|
80335
|
+
"kind": "method",
|
|
80336
|
+
"name": "getCssColor",
|
|
80337
|
+
"privacy": "private",
|
|
80338
|
+
"parameters": [
|
|
80339
|
+
{
|
|
80340
|
+
"name": "name",
|
|
80341
|
+
"type": {
|
|
80342
|
+
"text": "string"
|
|
80343
|
+
}
|
|
80344
|
+
}
|
|
80345
|
+
]
|
|
80346
|
+
},
|
|
80347
|
+
{
|
|
80348
|
+
"kind": "method",
|
|
80349
|
+
"name": "updateSize",
|
|
80350
|
+
"privacy": "private"
|
|
80351
|
+
},
|
|
80352
|
+
{
|
|
80353
|
+
"kind": "method",
|
|
80354
|
+
"name": "_range",
|
|
80355
|
+
"privacy": "private",
|
|
80356
|
+
"return": {
|
|
80357
|
+
"type": {
|
|
80358
|
+
"text": "[number, number]"
|
|
80359
|
+
}
|
|
80360
|
+
},
|
|
80361
|
+
"parameters": [
|
|
80362
|
+
{
|
|
80363
|
+
"name": "_self",
|
|
80364
|
+
"type": {
|
|
80365
|
+
"text": "uPlot"
|
|
80366
|
+
}
|
|
80367
|
+
},
|
|
80368
|
+
{
|
|
80369
|
+
"name": "initMin",
|
|
80370
|
+
"type": {
|
|
80371
|
+
"text": "number"
|
|
80372
|
+
}
|
|
80373
|
+
},
|
|
80374
|
+
{
|
|
80375
|
+
"name": "initMax",
|
|
80376
|
+
"type": {
|
|
80377
|
+
"text": "number"
|
|
80378
|
+
}
|
|
80379
|
+
},
|
|
80380
|
+
{
|
|
80381
|
+
"name": "_scaleKey",
|
|
80382
|
+
"type": {
|
|
80383
|
+
"text": "string"
|
|
80384
|
+
}
|
|
80385
|
+
}
|
|
80386
|
+
]
|
|
80387
|
+
},
|
|
80388
|
+
{
|
|
80389
|
+
"kind": "field",
|
|
80390
|
+
"name": "_effectiveSize",
|
|
80391
|
+
"privacy": "private",
|
|
80392
|
+
"readonly": true
|
|
80393
|
+
},
|
|
80394
|
+
{
|
|
80395
|
+
"kind": "field",
|
|
80396
|
+
"name": "_effectivePriority",
|
|
80397
|
+
"privacy": "private",
|
|
80398
|
+
"readonly": true
|
|
80399
|
+
},
|
|
80400
|
+
{
|
|
80401
|
+
"kind": "method",
|
|
80402
|
+
"name": "_getStrokeWidth",
|
|
80403
|
+
"privacy": "private"
|
|
80404
|
+
},
|
|
80405
|
+
{
|
|
80406
|
+
"kind": "method",
|
|
80407
|
+
"name": "_getStrokeColor",
|
|
80408
|
+
"privacy": "private"
|
|
80409
|
+
},
|
|
80410
|
+
{
|
|
80411
|
+
"kind": "method",
|
|
80412
|
+
"name": "updatePalette"
|
|
80413
|
+
},
|
|
80414
|
+
{
|
|
80415
|
+
"kind": "method",
|
|
80416
|
+
"name": "updateY",
|
|
80417
|
+
"privacy": "private"
|
|
80418
|
+
},
|
|
80419
|
+
{
|
|
80420
|
+
"kind": "method",
|
|
80421
|
+
"name": "updateZeroLine",
|
|
80422
|
+
"privacy": "private"
|
|
80423
|
+
}
|
|
80424
|
+
],
|
|
80425
|
+
"attributes": [
|
|
80426
|
+
{
|
|
80427
|
+
"name": "data",
|
|
80428
|
+
"type": {
|
|
80429
|
+
"text": "Array"
|
|
80430
|
+
},
|
|
80431
|
+
"default": "[[], []]",
|
|
80432
|
+
"description": "The data to display in the graph, first array is the x values, second array is the y values",
|
|
80433
|
+
"fieldName": "data"
|
|
80434
|
+
},
|
|
80435
|
+
{
|
|
80436
|
+
"name": "layout",
|
|
80437
|
+
"type": {
|
|
80438
|
+
"text": "ObcIndicatorGraphLayout"
|
|
80439
|
+
},
|
|
80440
|
+
"default": "{}",
|
|
80441
|
+
"fieldName": "layout"
|
|
80442
|
+
}
|
|
80443
|
+
],
|
|
80444
|
+
"superclass": {
|
|
80445
|
+
"name": "LitElement",
|
|
80446
|
+
"package": "lit"
|
|
80447
|
+
},
|
|
80448
|
+
"tagName": "obc-indicator-graph",
|
|
80449
|
+
"customElement": true
|
|
80450
|
+
}
|
|
80451
|
+
],
|
|
80452
|
+
"exports": [
|
|
80453
|
+
{
|
|
80454
|
+
"kind": "js",
|
|
80455
|
+
"name": "ObcIndicatorGraph",
|
|
80456
|
+
"declaration": {
|
|
80457
|
+
"name": "ObcIndicatorGraph",
|
|
80458
|
+
"module": "src/navigation-instruments/indicator-graph/indicator-graph.ts"
|
|
80459
|
+
}
|
|
80460
|
+
},
|
|
80461
|
+
{
|
|
80462
|
+
"kind": "custom-element-definition",
|
|
80463
|
+
"name": "obc-indicator-graph",
|
|
80464
|
+
"declaration": {
|
|
80465
|
+
"name": "ObcIndicatorGraph",
|
|
80466
|
+
"module": "src/navigation-instruments/indicator-graph/indicator-graph.ts"
|
|
80467
|
+
}
|
|
80468
|
+
}
|
|
80469
|
+
]
|
|
80470
|
+
},
|
|
80262
80471
|
{
|
|
80263
80472
|
"kind": "javascript-module",
|
|
80264
80473
|
"path": "src/navigation-instruments/instrument-field/instrument-field.ts",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph-mini.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"graph-mini.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +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;
|
|
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;IAUf,OAAgB,MAAM,0BAA2B;CAClD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
|
@@ -26,8 +26,8 @@ let ObcGraphMini = class extends LitElement {
|
|
|
26
26
|
}
|
|
27
27
|
firstUpdated() {
|
|
28
28
|
const opts = {
|
|
29
|
-
width:
|
|
30
|
-
height:
|
|
29
|
+
width: 32,
|
|
30
|
+
height: 32,
|
|
31
31
|
scales: {
|
|
32
32
|
x: { time: false, show: false },
|
|
33
33
|
y: {
|
|
@@ -46,7 +46,7 @@ let ObcGraphMini = class extends LitElement {
|
|
|
46
46
|
{},
|
|
47
47
|
{
|
|
48
48
|
stroke: this.getCssColor("--element-neutral-color"),
|
|
49
|
-
width:
|
|
49
|
+
width: 1,
|
|
50
50
|
points: { show: false }
|
|
51
51
|
}
|
|
52
52
|
],
|
|
@@ -65,7 +65,7 @@ let ObcGraphMini = class extends LitElement {
|
|
|
65
65
|
return;
|
|
66
66
|
}
|
|
67
67
|
const stroke = this.getCssColor("--element-neutral-color");
|
|
68
|
-
this.uplot.setSeries(1, { stroke, width:
|
|
68
|
+
this.uplot.setSeries(1, { stroke, width: 1, points: { show: false } });
|
|
69
69
|
}
|
|
70
70
|
updateY() {
|
|
71
71
|
if (!this.uplot) {
|
|
@@ -85,7 +85,9 @@ let ObcGraphMini = class extends LitElement {
|
|
|
85
85
|
render() {
|
|
86
86
|
return html`
|
|
87
87
|
<div class="chart-container">
|
|
88
|
-
<div id="chart"
|
|
88
|
+
<div id="chart">
|
|
89
|
+
<div id="dot" style="transform: translateY(${-this.y}px);"></div>
|
|
90
|
+
</div>
|
|
89
91
|
</div>
|
|
90
92
|
`;
|
|
91
93
|
}
|
|
@@ -1 +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:
|
|
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: 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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"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { css } from "lit";
|
|
2
|
+
const compentStyle = css`
|
|
3
|
+
* {
|
|
4
|
+
-webkit-tap-highlight-color: transparent;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.chart-container {
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
display: flex;
|
|
11
|
+
align-items: center;
|
|
12
|
+
justify-content: center;
|
|
13
|
+
position: relative;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
canvas {
|
|
17
|
+
position: absolute;
|
|
18
|
+
width: 100%;
|
|
19
|
+
height: 100%;
|
|
20
|
+
top: 0;
|
|
21
|
+
left: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
#dot {
|
|
25
|
+
position: absolute;
|
|
26
|
+
width: 4px;
|
|
27
|
+
height: 4px;
|
|
28
|
+
right: -3px;
|
|
29
|
+
bottom: -3px;
|
|
30
|
+
border-radius: 50%;
|
|
31
|
+
background: var(--element-neutral-color);
|
|
32
|
+
border: 1px solid var(--border-silhouette-color);
|
|
33
|
+
z-index: 1;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.enhanced #dot {
|
|
37
|
+
background: var(--element-neutral-enhanced-color);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.medium #dot {
|
|
41
|
+
width: 6px;
|
|
42
|
+
height: 6px;
|
|
43
|
+
right: -4px;
|
|
44
|
+
bottom: -4px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.large #dot {
|
|
48
|
+
width: 8px;
|
|
49
|
+
height: 8px;
|
|
50
|
+
right: -5px;
|
|
51
|
+
bottom: -5px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
#zero-line {
|
|
55
|
+
position: absolute;
|
|
56
|
+
width: 100%;
|
|
57
|
+
height: 1px;
|
|
58
|
+
bottom: -0.5px;
|
|
59
|
+
background: var(--element-disabled-color);
|
|
60
|
+
border-radius: 2px;
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
export {
|
|
64
|
+
compentStyle as default
|
|
65
|
+
};
|
|
66
|
+
//# sourceMappingURL=indicator-graph.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"indicator-graph.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { LitElement, PropertyValues } from 'lit';
|
|
2
|
+
export declare enum ObcIndicatorGraphSize {
|
|
3
|
+
small = "small",
|
|
4
|
+
medium = "medium",
|
|
5
|
+
large = "large"
|
|
6
|
+
}
|
|
7
|
+
export declare enum ObcIndicatorGraphPriority {
|
|
8
|
+
regular = "regular",
|
|
9
|
+
enhanced = "enhanced"
|
|
10
|
+
}
|
|
11
|
+
export interface ObcIndicatorGraphLayout {
|
|
12
|
+
size?: ObcIndicatorGraphSize;
|
|
13
|
+
priority?: ObcIndicatorGraphPriority;
|
|
14
|
+
y?: {
|
|
15
|
+
min?: number;
|
|
16
|
+
max?: number;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* @element obc-indicator-graph
|
|
21
|
+
* @description A mini graph component
|
|
22
|
+
*
|
|
23
|
+
* @property {Array} data - The data to display in the graph, first array is the x values, second array is the y values
|
|
24
|
+
*/
|
|
25
|
+
export declare class ObcIndicatorGraph extends LitElement {
|
|
26
|
+
data: [number[], number[]];
|
|
27
|
+
layout: ObcIndicatorGraphLayout;
|
|
28
|
+
private chart;
|
|
29
|
+
private y;
|
|
30
|
+
private zeroLineY;
|
|
31
|
+
private uplot;
|
|
32
|
+
private resizeObserver;
|
|
33
|
+
private getCssColor;
|
|
34
|
+
firstUpdated(): void;
|
|
35
|
+
disconnectedCallback(): void;
|
|
36
|
+
private updateSize;
|
|
37
|
+
private _range;
|
|
38
|
+
private get _effectiveSize();
|
|
39
|
+
private get _effectivePriority();
|
|
40
|
+
private _getStrokeWidth;
|
|
41
|
+
private _getStrokeColor;
|
|
42
|
+
updatePalette(): void;
|
|
43
|
+
private updateY;
|
|
44
|
+
private updateZeroLine;
|
|
45
|
+
updated(changedProperties: PropertyValues): void;
|
|
46
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
47
|
+
static styles: import('lit').CSSResult;
|
|
48
|
+
}
|
|
49
|
+
declare global {
|
|
50
|
+
interface HTMLElementTagNameMap {
|
|
51
|
+
'obc-indicator-graph': ObcIndicatorGraph;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
//# sourceMappingURL=indicator-graph.d.ts.map
|
|
@@ -0,0 +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;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"}
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
import { unsafeCSS, LitElement, html } from "lit";
|
|
2
|
+
import { property, query, state } from "lit/decorators.js";
|
|
3
|
+
import compentStyle from "./indicator-graph.css.js";
|
|
4
|
+
import uPlot from "uplot";
|
|
5
|
+
import { customElement } from "../../decorator.js";
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
8
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
9
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
10
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
11
|
+
if (decorator = decorators[i])
|
|
12
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
13
|
+
if (kind && result) __defProp(target, key, result);
|
|
14
|
+
return result;
|
|
15
|
+
};
|
|
16
|
+
var ObcIndicatorGraphSize = /* @__PURE__ */ ((ObcIndicatorGraphSize2) => {
|
|
17
|
+
ObcIndicatorGraphSize2["small"] = "small";
|
|
18
|
+
ObcIndicatorGraphSize2["medium"] = "medium";
|
|
19
|
+
ObcIndicatorGraphSize2["large"] = "large";
|
|
20
|
+
return ObcIndicatorGraphSize2;
|
|
21
|
+
})(ObcIndicatorGraphSize || {});
|
|
22
|
+
var ObcIndicatorGraphPriority = /* @__PURE__ */ ((ObcIndicatorGraphPriority2) => {
|
|
23
|
+
ObcIndicatorGraphPriority2["regular"] = "regular";
|
|
24
|
+
ObcIndicatorGraphPriority2["enhanced"] = "enhanced";
|
|
25
|
+
return ObcIndicatorGraphPriority2;
|
|
26
|
+
})(ObcIndicatorGraphPriority || {});
|
|
27
|
+
let ObcIndicatorGraph = class extends LitElement {
|
|
28
|
+
constructor() {
|
|
29
|
+
super(...arguments);
|
|
30
|
+
this.data = [[], []];
|
|
31
|
+
this.layout = {};
|
|
32
|
+
this.y = 24;
|
|
33
|
+
this.zeroLineY = 0;
|
|
34
|
+
this.uplot = null;
|
|
35
|
+
this.resizeObserver = null;
|
|
36
|
+
}
|
|
37
|
+
getCssColor(name) {
|
|
38
|
+
const color = getComputedStyle(this).getPropertyValue(name).trim();
|
|
39
|
+
return color;
|
|
40
|
+
}
|
|
41
|
+
firstUpdated() {
|
|
42
|
+
const opts = {
|
|
43
|
+
width: this.chart.clientWidth,
|
|
44
|
+
height: this.chart.clientHeight,
|
|
45
|
+
scales: {
|
|
46
|
+
x: { time: false, show: false },
|
|
47
|
+
y: {
|
|
48
|
+
auto: true,
|
|
49
|
+
show: false,
|
|
50
|
+
range: this._range.bind(this)
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
series: [
|
|
54
|
+
{},
|
|
55
|
+
{
|
|
56
|
+
stroke: this._getStrokeColor(),
|
|
57
|
+
width: this._getStrokeWidth(),
|
|
58
|
+
points: { show: false }
|
|
59
|
+
}
|
|
60
|
+
],
|
|
61
|
+
axes: [
|
|
62
|
+
{ show: false },
|
|
63
|
+
{ ticks: { show: false }, show: false, grid: { show: false } }
|
|
64
|
+
],
|
|
65
|
+
legend: { show: false },
|
|
66
|
+
cursor: { show: false }
|
|
67
|
+
};
|
|
68
|
+
this.uplot = new uPlot(opts, this.data, this.chart);
|
|
69
|
+
requestAnimationFrame(() => this.updateY());
|
|
70
|
+
this.resizeObserver = new ResizeObserver(() => this.updateSize());
|
|
71
|
+
this.resizeObserver.observe(this.chart);
|
|
72
|
+
}
|
|
73
|
+
disconnectedCallback() {
|
|
74
|
+
super.disconnectedCallback();
|
|
75
|
+
this.resizeObserver?.disconnect();
|
|
76
|
+
this.resizeObserver = null;
|
|
77
|
+
this.uplot?.destroy();
|
|
78
|
+
this.uplot = null;
|
|
79
|
+
}
|
|
80
|
+
updateSize() {
|
|
81
|
+
if (!this.uplot) {
|
|
82
|
+
return;
|
|
83
|
+
}
|
|
84
|
+
this.uplot.setSize({
|
|
85
|
+
width: this.chart.clientWidth,
|
|
86
|
+
height: this.chart.clientHeight
|
|
87
|
+
});
|
|
88
|
+
this.updateY();
|
|
89
|
+
}
|
|
90
|
+
_range(_self, initMin, initMax, _scaleKey) {
|
|
91
|
+
const { min: minY, max: maxY } = this.layout.y ?? {};
|
|
92
|
+
const range = maxY ?? initMax - (minY ?? initMin);
|
|
93
|
+
let min = minY ?? initMin - range * 0.1;
|
|
94
|
+
if (minY === void 0) {
|
|
95
|
+
min = Math.min(0, min);
|
|
96
|
+
}
|
|
97
|
+
return [min, maxY ?? initMax + range * 0.1];
|
|
98
|
+
}
|
|
99
|
+
get _effectiveSize() {
|
|
100
|
+
return this.layout.size ?? "medium";
|
|
101
|
+
}
|
|
102
|
+
get _effectivePriority() {
|
|
103
|
+
return this.layout.priority ?? "regular";
|
|
104
|
+
}
|
|
105
|
+
_getStrokeWidth() {
|
|
106
|
+
switch (this._effectiveSize) {
|
|
107
|
+
case "small":
|
|
108
|
+
return 1;
|
|
109
|
+
case "medium":
|
|
110
|
+
return 1.5;
|
|
111
|
+
case "large":
|
|
112
|
+
return 2;
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
_getStrokeColor() {
|
|
116
|
+
switch (this._effectivePriority) {
|
|
117
|
+
case "regular":
|
|
118
|
+
return this.getCssColor("--element-neutral-color");
|
|
119
|
+
case "enhanced":
|
|
120
|
+
return this.getCssColor("--element-neutral-enhanced-color");
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
updatePalette() {
|
|
124
|
+
if (!this.uplot) {
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
const stroke = this._getStrokeColor();
|
|
128
|
+
this.uplot.setSeries(1, {
|
|
129
|
+
// @ts-expect-error - stroke is not a property of the Series interface
|
|
130
|
+
stroke,
|
|
131
|
+
width: this._getStrokeWidth(),
|
|
132
|
+
points: { show: false }
|
|
133
|
+
});
|
|
134
|
+
}
|
|
135
|
+
updateY() {
|
|
136
|
+
if (!this.uplot) {
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
const lastY = this.data[1][this.data[1].length - 1];
|
|
140
|
+
const yRatio = this.uplot.scales.y.valToPct(lastY);
|
|
141
|
+
this.y = yRatio * this.chart.clientHeight;
|
|
142
|
+
this.updateZeroLine();
|
|
143
|
+
}
|
|
144
|
+
updateZeroLine() {
|
|
145
|
+
if (!this.uplot) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
const yRatio = this.uplot.scales.y.valToPct(0);
|
|
149
|
+
this.zeroLineY = yRatio * this.chart.clientHeight;
|
|
150
|
+
}
|
|
151
|
+
updated(changedProperties) {
|
|
152
|
+
if (changedProperties.has("data") || changedProperties.has("layout")) {
|
|
153
|
+
this.updatePalette();
|
|
154
|
+
this.uplot?.setData(this.data);
|
|
155
|
+
requestAnimationFrame(() => this.updateY());
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
render() {
|
|
159
|
+
return html`
|
|
160
|
+
<div
|
|
161
|
+
class="chart-container ${this._effectivePriority} ${this._effectiveSize}"
|
|
162
|
+
>
|
|
163
|
+
<div
|
|
164
|
+
id="zero-line"
|
|
165
|
+
style="transform: translateY(${-this.zeroLineY}px);
|
|
166
|
+
display: ${this.zeroLineY > -0.5 ? "block" : "none"};
|
|
167
|
+
"
|
|
168
|
+
></div>
|
|
169
|
+
<div
|
|
170
|
+
id="dot"
|
|
171
|
+
style="transform: translateY(${-this.y}px);
|
|
172
|
+
display: ${this.y > -0.5 ? "block" : "none"};
|
|
173
|
+
"
|
|
174
|
+
></div>
|
|
175
|
+
</div>
|
|
176
|
+
`;
|
|
177
|
+
}
|
|
178
|
+
};
|
|
179
|
+
ObcIndicatorGraph.styles = unsafeCSS(compentStyle);
|
|
180
|
+
__decorateClass([
|
|
181
|
+
property({ type: Array })
|
|
182
|
+
], ObcIndicatorGraph.prototype, "data", 2);
|
|
183
|
+
__decorateClass([
|
|
184
|
+
property({ type: Object })
|
|
185
|
+
], ObcIndicatorGraph.prototype, "layout", 2);
|
|
186
|
+
__decorateClass([
|
|
187
|
+
query(".chart-container")
|
|
188
|
+
], ObcIndicatorGraph.prototype, "chart", 2);
|
|
189
|
+
__decorateClass([
|
|
190
|
+
state()
|
|
191
|
+
], ObcIndicatorGraph.prototype, "y", 2);
|
|
192
|
+
__decorateClass([
|
|
193
|
+
state()
|
|
194
|
+
], ObcIndicatorGraph.prototype, "zeroLineY", 2);
|
|
195
|
+
ObcIndicatorGraph = __decorateClass([
|
|
196
|
+
customElement("obc-indicator-graph")
|
|
197
|
+
], ObcIndicatorGraph);
|
|
198
|
+
export {
|
|
199
|
+
ObcIndicatorGraph,
|
|
200
|
+
ObcIndicatorGraphPriority,
|
|
201
|
+
ObcIndicatorGraphSize
|
|
202
|
+
};
|
|
203
|
+
//# sourceMappingURL=indicator-graph.js.map
|
|
@@ -0,0 +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\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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"}
|