Skip to content

Commit a117c23

Browse files
author
Marko Petzold
committed
simpler multiChart
1 parent 3a36d09 commit a117c23

File tree

4 files changed

+53
-14
lines changed

4 files changed

+53
-14
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"dependencies": {
2626
"echarts": "5.6.0",
27-
"lit": "^3.3.0"
27+
"lit": "^3.3.1"
2828
},
2929
"devDependencies": {
3030
"@custom-elements-manifest/analyzer": "^0.10.4",

src/definition-schema.d.ts

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,20 @@ export type Unit = string;
1515
/**
1616
* The number of decimal places to show in the value. If not specified, precision is 0.
1717
*/
18-
export type Precision = number;
18+
export type Decimals = number;
19+
/**
20+
* Draw multiple Charts based on the split column of a data table.
21+
*/
22+
export type MultiChart = boolean;
23+
/**
24+
* The value of the gauge
25+
*/
26+
export type Value = number;
1927
/**
2028
* This should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. Will only be used to detect data age of data.
2129
*/
2230
export type Timestamp = string;
23-
export type Value = number;
31+
export type Value1 = number;
2432
/**
2533
* You can specify a table column to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify ''city'' as split column, then you will get a gauge for each city.
2634
*/
@@ -30,7 +38,7 @@ export type SplitDataBy = string;
3038
*/
3139
export type Data = {
3240
tsp?: Timestamp;
33-
value?: Value;
41+
value?: Value1;
3442
pivot?: SplitDataBy;
3543
[k: string]: unknown;
3644
}[];
@@ -56,7 +64,9 @@ export type Gauges = {
5664
label?: Label;
5765
valueColor?: ValueColor;
5866
unit?: Unit;
59-
precision?: Precision;
67+
precision?: Decimals;
68+
multiChart?: MultiChart;
69+
value?: Value;
6070
data?: Data;
6171
sections?: GaugeColorSections;
6272
advanced?: AdvancedConfiguration;

src/definition-schema.json

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,38 @@
3939
"order": 3
4040
},
4141
"precision": {
42-
"title": "Precision",
42+
"title": "Decimals",
4343
"description": "The number of decimal places to show in the value. If not specified, precision is 0.",
4444
"type": "number",
45-
"dataDrivenDisabled": false,
45+
"dataDrivenDisabled": true,
4646
"order": 4
4747
},
48+
"multiChart": {
49+
"title": "Multi Chart",
50+
"description": "Draw multiple Charts based on the split column of a data table.",
51+
"type": "boolean",
52+
"dataDrivenDisabled": true,
53+
"order": 6
54+
},
55+
"value": {
56+
"title": "Value",
57+
"description": "The value of the gauge",
58+
"type": "number",
59+
"condition": {
60+
"relativePath": "../multiChart",
61+
"showIfValueIn": [false]
62+
},
63+
"order": 5
64+
},
4865
"data": {
4966
"title": "Data",
5067
"description": "Provide a list of values. Only the latest value is shown in the gauge unless you configure \"Advanced Settings\" below or use split data.",
5168
"type": "array",
52-
"order": 4,
69+
"condition": {
70+
"relativePath": "../multiChart",
71+
"showIfValueIn": [true]
72+
},
73+
"order": 7,
5374
"items": {
5475
"type": "object",
5576
"properties": {
@@ -78,7 +99,7 @@
7899
"title": "Gauge Color Sections",
79100
"description": "",
80101
"type": "object",
81-
"order": 5,
102+
"order": 8,
82103
"properties": {
83104
"sectionLimits": {
84105
"title": "Section Limits",
@@ -108,7 +129,7 @@
108129
"title": "Advanced Configuration",
109130
"description": "",
110131
"type": "object",
111-
"order": 6,
132+
"order": 9,
112133
"properties": {
113134
"averageLatest": {
114135
"title": "Average Latest Values",

src/widget-gauge.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -292,6 +292,8 @@ export class WidgetGauge extends LitElement {
292292
advanced: ds.advanced,
293293
valueColor: ds.valueColor,
294294
sections: ds.sections,
295+
multiChart: ds.multiChart,
296+
value: ds.value,
295297
data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
296298
}
297299
this.dataSets.push(pds)
@@ -317,10 +319,16 @@ export class WidgetGauge extends LitElement {
317319
if (typeof ds.advanced?.averageLatest !== 'number' || isNaN(ds.advanced?.averageLatest))
318320
ds.advanced.averageLatest = 1
319321
const data = ds?.data?.slice(-ds.advanced?.averageLatest || -1) ?? []
320-
const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
321-
const average = values.reduce((p, c) => p + c, 0) / values.length
322-
323-
ds.needleValue = isNaN(average) ? ds.sections?.sectionLimits?.[0] : average
322+
console.log('multiChart', ds.multiChart)
323+
if (!ds.multiChart) {
324+
ds.needleValue = ds.value as number
325+
} else {
326+
const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
327+
ds.needleValue = (values.reduce((p, c) => p + c, 0) / values.length) as number
328+
}
329+
ds.needleValue = isNaN(ds.needleValue as number)
330+
? ds.sections?.sectionLimits?.[0]
331+
: ds.needleValue
324332

325333
// The full range of the gauge
326334
ds.range =

0 commit comments

Comments
 (0)