@record-evolution/widget-value 1.1.17 → 1.1.19

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.
Files changed (7) hide show
  1. package/dist/tsconfig.tsbuildinfo +1 -1
  2. package/dist/widget-value.js +44 -27
  3. package/dist/widget-value.js.map +1 -1
  4. package/package.json +2 -2
  5. package/src/definition-schema.d.ts +19 -9
  6. package/src/definition-schema.json +53 -32
  7. package/src/widget-value.ts +17 -16
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "REWidget widget-value",
4
4
  "license": "MIT",
5
5
  "author": "widget-value",
6
- "version": "1.1.17",
6
+ "version": "1.1.19",
7
7
  "engines": {
8
8
  "node": "18.18.2",
9
9
  "npm": ">=10.0.2"
@@ -28,7 +28,7 @@
28
28
  "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
29
29
  },
30
30
  "dependencies": {
31
- "lit": "^3.3.0"
31
+ "lit": "^3.3.1"
32
32
  },
33
33
  "devDependencies": {
34
34
  "@custom-elements-manifest/analyzer": "^0.10.4",
package/src/definition-schema.d.ts CHANGED
@@ -18,20 +18,20 @@ export type Unit = string;
18
18
  /**
19
19
  * Number of digits after the decimal point. (Default 0)
20
20
  */
21
- export type Precision = number;
21
+ export type Decimals = number;
22
22
  /**
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
24
24
  */
25
- export type AverageLatestValues = number;
25
+ export type Value = number;
26
26
  /**
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.
28
28
  */
29
- export type MaximumLatency = number;
29
+ export type MultiChart = boolean;
30
30
  /**
31
31
  * 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.
32
32
  */
33
33
  export type Timestamp = string;
34
- export type Value = number;
34
+ export type Value1 = number;
35
35
  /**
36
36
  * 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.
37
37
  */
@@ -41,17 +41,27 @@ export type SplitDataBy = string;
41
41
  */
42
42
  export type Data = {
43
43
  tsp?: Timestamp;
44
- value?: Value;
44
+ value?: Value1;
45
45
  pivot?: SplitDataBy;
46
46
  [k: string]: unknown;
47
47
  }[];
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;
48
56
  export type ValueDisplays = {
49
57
  label?: Label;
50
58
  unit?: Unit;
51
- precision?: Precision;
59
+ precision?: Decimals;
60
+ value?: Value;
61
+ multiChart?: MultiChart;
62
+ data?: Data;
52
63
  styling?: Styling;
53
64
  advanced?: AdvancedSettings;
54
- data?: Data;
55
65
  [k: string]: unknown;
56
66
  }[];
57
67
 
package/src/definition-schema.json CHANGED
@@ -35,17 +35,67 @@
35
35
  "order": 2
36
36
  },
37
37
  "precision": {
38
- "title": "Precision",
38
+ "title": "Decimals",
39
39
  "description": "Number of digits after the decimal point. (Default 0)",
40
40
  "type": "number",
41
41
  "dataDrivenDisabled": true,
42
42
  "order": 3
43
43
  },
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
+ },
44
94
  "styling": {
45
95
  "title": "Styling",
46
96
  "description": "",
47
97
  "type": "object",
48
- "order": 6,
98
+ "order": 8,
49
99
  "properties": {
50
100
  "labelColor": {
51
101
  "title": "Label Color",
@@ -65,7 +115,7 @@
65
115
  "title": "Advanced Settings",
66
116
  "description": "",
67
117
  "type": "object",
68
- "order": 7,
118
+ "order": 9,
69
119
  "properties": {
70
120
  "averageLatest": {
71
121
  "title": "Average Latest Values",
@@ -82,35 +132,6 @@
82
132
  "order": 7
83
133
  }
84
134
  }
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
- }
114
135
  }
115
136
  }
116
137
  }
package/src/widget-value.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { html, css, LitElement, PropertyValueMap } from 'lit'
2
2
  import { repeat } from 'lit/directives/repeat.js'
3
- import { property, state } from 'lit/decorators.js'
3
+ import { customElement, property, state } from 'lit/decorators.js'
4
4
  import { InputData } from './definition-schema.js'
5
5
 
6
6
  type Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }
@@ -9,6 +9,8 @@ type Theme = {
9
9
  theme_name: string
10
10
  theme_object: any
11
11
  }
12
+
13
+ @customElement('widget-value-versionplaceholder')
12
14
  export class WidgetValue extends LitElement {
13
15
  @property({ type: Object })
14
16
  inputData?: InputData
@@ -80,8 +82,6 @@ export class WidgetValue extends LitElement {
80
82
  }
81
83
 
82
84
  sizingSetup() {
83
- if (this.origWidth !== 0 && this.origHeight !== 0) return
84
-
85
85
  const boxes = Array.from(
86
86
  this?.shadowRoot?.querySelectorAll(
87
87
  '.sizing-container > .single-value'
@@ -192,6 +192,8 @@ export class WidgetValue extends LitElement {
192
192
  precision: ds.precision,
193
193
  advanced: ds.advanced,
194
194
  styling: ds.styling,
195
+ multiChart: ds.multiChart,
196
+ value: ds.value,
195
197
  data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv),
196
198
  needleValue: undefined
197
199
  }
@@ -205,18 +207,19 @@ export class WidgetValue extends LitElement {
205
207
  if (typeof ds.advanced?.averageLatest !== 'number' || !isNaN(ds.advanced?.averageLatest))
206
208
  ds.advanced.averageLatest = 1
207
209
 
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
+ }
217
222
  }
218
-
219
- ds.needleValue = average
220
223
  })
221
224
 
222
225
  this.requestUpdate()
@@ -388,5 +391,3 @@ export class WidgetValue extends LitElement {
388
391
  `
389
392
  }
390
393
  }
391
-
392
- window.customElements.define('widget-value-versionplaceholder', WidgetValue)