Skip to content

Commit 51a101e

Browse files
author
Marko Petzold
committed
simpler multiChart
1 parent e700fd0 commit 51a101e

4 files changed

Lines changed: 87 additions & 53 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
"release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
2929
},
3030
"dependencies": {
31-
"lit": "^3.3.0"
31+
"lit": "^3.3.1"
3232
},
3333
"devDependencies": {
3434
"@custom-elements-manifest/analyzer": "^0.10.4",

‎src/definition-schema.d.ts‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@ export type Unit = string;
1818
/**
1919
* Number of digits after the decimal point. (Default 0)
2020
*/
21-
export type Precision = number;
21+
export type Decimals = number;
2222
/**
23-
* Calculate the average over the given number of newest values. (If you use "Split data by", then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.
23+
* The value of the gauge
2424
*/
25-
export type AverageLatestValues = number;
25+
export type Value = number;
2626
/**
27-
* If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.
27+
* Draw multiple Charts based on the split column of a data table.
2828
*/
29-
export type MaximumLatency = number;
29+
export type MultiChart = boolean;
3030
/**
3131
* 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.
3232
*/
3333
export type Timestamp = string;
34-
export type Value = number;
34+
export type Value1 = number;
3535
/**
3636
* You can specify a column in the input data 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 value field for each city.
3737
*/
@@ -41,17 +41,27 @@ export type SplitDataBy = string;
4141
*/
4242
export type Data = {
4343
tsp?: Timestamp;
44-
value?: Value;
44+
value?: Value1;
4545
pivot?: SplitDataBy;
4646
[k: string]: unknown;
4747
}[];
48+
/**
49+
* Calculate the average over the given number of newest values. (If you use "Split data by", then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.
50+
*/
51+
export type AverageLatestValues = number;
52+
/**
53+
* If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.
54+
*/
55+
export type MaximumLatency = number;
4856
export type ValueDisplays = {
4957
label?: Label;
5058
unit?: Unit;
51-
precision?: Precision;
59+
precision?: Decimals;
60+
value?: Value;
61+
multiChart?: MultiChart;
62+
data?: Data;
5263
styling?: Styling;
5364
advanced?: AdvancedSettings;
54-
data?: Data;
5565
[k: string]: unknown;
5666
}[];
5767

‎src/definition-schema.json‎

Lines changed: 53 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,67 @@
3535
"order": 2
3636
},
3737
"precision": {
38-
"title": "Precision",
38+
"title": "Decimals",
3939
"description": "Number of digits after the decimal point. (Default 0)",
4040
"type": "number",
4141
"dataDrivenDisabled": true,
4242
"order": 3
4343
},
44+
"value": {
45+
"title": "Value",
46+
"description": "The value of the gauge",
47+
"type": "number",
48+
"condition": {
49+
"relativePath": "../multiChart",
50+
"showIfValueIn": [false]
51+
},
52+
"order": 5
53+
},
54+
"multiChart": {
55+
"title": "Multi Chart",
56+
"description": "Draw multiple Charts based on the split column of a data table.",
57+
"type": "boolean",
58+
"dataDrivenDisabled": true,
59+
"order": 6
60+
},
61+
"data": {
62+
"title": "Data",
63+
"description": "The data used to draw this data series.",
64+
"type": "array",
65+
"condition": {
66+
"relativePath": "../multiChart",
67+
"showIfValueIn": [true]
68+
},
69+
"order": 7,
70+
"items": {
71+
"type": "object",
72+
"properties": {
73+
"tsp": {
74+
"title": "Timestamp",
75+
"description": "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.",
76+
"type": "string",
77+
"order": 1
78+
},
79+
"value": {
80+
"title": "Value",
81+
"type": "number",
82+
"required": true,
83+
"order": 1
84+
},
85+
"pivot": {
86+
"title": "Split Data by",
87+
"description": "You can specify a column in the input data 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 value field for each city.",
88+
"type": "string",
89+
"order": 2
90+
}
91+
}
92+
}
93+
},
4494
"styling": {
4595
"title": "Styling",
4696
"description": "",
4797
"type": "object",
48-
"order": 6,
98+
"order": 8,
4999
"properties": {
50100
"labelColor": {
51101
"title": "Label Color",
@@ -65,7 +115,7 @@
65115
"title": "Advanced Settings",
66116
"description": "",
67117
"type": "object",
68-
"order": 7,
118+
"order": 9,
69119
"properties": {
70120
"averageLatest": {
71121
"title": "Average Latest Values",
@@ -82,35 +132,6 @@
82132
"order": 7
83133
}
84134
}
85-
},
86-
"data": {
87-
"title": "Data",
88-
"description": "The data used to draw this data series.",
89-
"type": "array",
90-
"order": 4,
91-
"items": {
92-
"type": "object",
93-
"properties": {
94-
"tsp": {
95-
"title": "Timestamp",
96-
"description": "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.",
97-
"type": "string",
98-
"order": 1
99-
},
100-
"value": {
101-
"title": "Value",
102-
"type": "number",
103-
"required": true,
104-
"order": 1
105-
},
106-
"pivot": {
107-
"title": "Split Data by",
108-
"description": "You can specify a column in the input data 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 value field for each city.",
109-
"type": "string",
110-
"order": 2
111-
}
112-
}
113-
}
114135
}
115136
}
116137
}

‎src/widget-value.ts‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -192,6 +192,8 @@ export class WidgetValue extends LitElement {
192192
precision: ds.precision,
193193
advanced: ds.advanced,
194194
styling: ds.styling,
195+
multiChart: ds.multiChart,
196+
value: ds.value,
195197
data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv),
196198
needleValue: undefined
197199
}
@@ -205,18 +207,19 @@ export class WidgetValue extends LitElement {
205207
if (typeof ds.advanced?.averageLatest !== 'number' || !isNaN(ds.advanced?.averageLatest))
206208
ds.advanced.averageLatest = 1
207209

208-
const data = ds?.data?.slice(-ds?.advanced?.averageLatest || -1) ?? []
209-
const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
210-
const average = values.reduce((p, c) => p + c, 0) / values.length
211-
212-
// Check age of data Latency
213-
const tsp = Date.parse(data?.[0]?.tsp ?? '')
214-
if (isNaN(tsp)) {
215-
const now = new Date().getTime()
216-
if (now - tsp > (ds.advanced?.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
210+
if (!ds.multiChart) {
211+
ds.needleValue = ds.value
212+
} else {
213+
const data = ds?.data?.slice(-ds?.advanced?.averageLatest || -1) ?? []
214+
const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
215+
ds.needleValue = values.reduce((p, c) => p + c, 0) / values.length
216+
// Check age of data Latency
217+
const tsp = Date.parse(data?.[0]?.tsp ?? '')
218+
if (isNaN(tsp)) {
219+
const now = new Date().getTime()
220+
if (now - tsp > (ds.advanced?.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
221+
}
217222
}
218-
219-
ds.needleValue = average
220223
})
221224

222225
this.requestUpdate()

0 commit comments

Comments
 (0)