@record-evolution/widget-value 1.0.26 → 1.1.4

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 (9) hide show
  1. package/dist/src/widget-value.d.ts +4 -3
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/dist/widget-value.js +337 -329
  4. package/dist/widget-value.js.map +1 -1
  5. package/package.json +27 -25
  6. package/src/default-data.json +14 -6
  7. package/src/definition-schema.d.ts +23 -15
  8. package/src/definition-schema.json +51 -42
  9. package/src/widget-value.ts +26 -20
package/package.json CHANGED
@@ -3,7 +3,11 @@
3
3
  "description": "REWidget widget-value",
4
4
  "license": "MIT",
5
5
  "author": "widget-value",
6
- "version": "1.0.26",
6
+ "version": "1.1.4",
7
+ "engines": {
8
+ "node": "18.18.2",
9
+ "npm": ">=10.0.2"
10
+ },
7
11
  "type": "module",
8
12
  "main": "dist/widget-value.js",
9
13
  "types": "dist/src/widget-value.d.ts",
@@ -23,34 +27,32 @@
23
27
  "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
24
28
  },
25
29
  "dependencies": {
26
- "@material/web": "^1.0.1",
27
- "lit": "^3.1.0"
30
+ "@material/web": "^2.2.0",
31
+ "lit": "^3.2.0"
28
32
  },
29
33
  "devDependencies": {
30
- "@custom-elements-manifest/analyzer": "^0.9.0",
31
- "@open-wc/building-rollup": "^3.0.2",
32
- "@open-wc/eslint-config": "^12.0.2",
34
+ "@custom-elements-manifest/analyzer": "^0.10.3",
33
35
  "@rollup/plugin-babel": "^6.0.4",
34
- "@rollup/plugin-commonjs": "^25.0.7",
35
- "@rollup/plugin-node-resolve": "^15.2.3",
36
- "@rollup/plugin-replace": "^5.0.5",
37
- "@rollup/plugin-typescript": "^11.1.5",
38
- "@typescript-eslint/eslint-plugin": "^6.9.1",
39
- "@typescript-eslint/parser": "^6.9.1",
40
- "@web/dev-server": "^0.4.0",
41
- "concurrently": "^8.2.2",
36
+ "@rollup/plugin-commonjs": "^28.0.0",
37
+ "@rollup/plugin-node-resolve": "^15.3.0",
38
+ "@rollup/plugin-replace": "^6.0.1",
39
+ "@rollup/plugin-typescript": "^12.1.0",
40
+ "@typescript-eslint/eslint-plugin": "^8.8.0",
41
+ "@typescript-eslint/parser": "^8.8.0",
42
+ "@web/dev-server": "^0.4.6",
43
+ "concurrently": "^9.0.1",
42
44
  "deepmerge": "^4.3.1",
43
45
  "es-dev-server": "^2.1.0",
44
- "eslint": "^8.53.0",
45
- "eslint-config-prettier": "^9.0.0",
46
- "husky": "^8.0.3",
47
- "json-schema-to-typescript": "^13.1.1",
48
- "lint-staged": "^15.0.2",
49
- "prettier": "^3.0.3",
50
- "rimraf": "^5.0.5",
51
- "rollup": "^3.21.0",
52
- "tslib": "^2.6.2",
53
- "typescript": "^5.2.2"
46
+ "eslint": "^9.11.1",
47
+ "eslint-config-prettier": "^9.1.0",
48
+ "husky": "^9.1.6",
49
+ "json-schema-to-typescript": "^15.0.2",
50
+ "lint-staged": "^15.2.10",
51
+ "prettier": "^3.3.3",
52
+ "rimraf": "^6.0.1",
53
+ "rollup": "^4.24.0",
54
+ "tslib": "^2.7.0",
55
+ "typescript": "^5.6.2"
54
56
  },
55
57
  "repository": {
56
58
  "type": "git",
@@ -58,7 +60,7 @@
58
60
  },
59
61
  "keywords": [
60
62
  "widget",
61
- "table"
63
+ "value"
62
64
  ],
63
65
  "bugs": {
64
66
  "url": "https://github.com/RecordEvolution/widget-value/issues"
package/src/default-data.json CHANGED
@@ -5,9 +5,13 @@
5
5
  "label": "Temperature",
6
6
  "unit": "°C",
7
7
  "precision": 2,
8
- "valueColor": "#e15656",
9
- "labelColor": "#ff9b9b",
10
- "averageLatest": 1,
8
+ "styling": {
9
+ "labelColor": "#ff9b9b",
10
+ "valueColor": "#e15656"
11
+ },
12
+ "advanced": {
13
+ "averageLatest": 1
14
+ },
11
15
  "data": [
12
16
  {
13
17
  "value": 90
@@ -17,9 +21,13 @@
17
21
  {
18
22
  "label": "Pressure",
19
23
  "unit": "Pa",
20
- "valueColor": "#5898d0",
21
- "labelColor": "#96caf8",
22
- "averageLatest": 1,
24
+ "styling": {
25
+ "labelColor": "#96caf8",
26
+ "valueColor": "#5898d0"
27
+ },
28
+ "advanced": {
29
+ "averageLatest": 1
30
+ },
23
31
  "data": [
24
32
  {
25
33
  "value": 80
package/src/definition-schema.d.ts CHANGED
@@ -19,10 +19,8 @@ export type Unit = string;
19
19
  * Number of digits after the decimal point. (Default 0)
20
20
  */
21
21
  export type Precision = number;
22
- export type LabelColor = string;
23
- export type ValueColor = string;
24
22
  /**
25
- * Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.
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.
26
24
  */
27
25
  export type AverageLatestValues = number;
28
26
  /**
@@ -35,37 +33,47 @@ export type MaximumLatency = number;
35
33
  export type Timestamp = string;
36
34
  export type Value = number;
37
35
  /**
38
- * 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 pivot column, then you will get a gauge for each city.
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.
39
37
  */
40
- export type PivotColumn = string;
38
+ export type SplitDataBy = string;
41
39
  /**
42
40
  * The data used to draw this data series.
43
41
  */
44
42
  export type Data = {
45
43
  tsp?: Timestamp;
46
44
  value?: Value;
47
- pivot?: PivotColumn;
45
+ pivot?: SplitDataBy;
48
46
  [k: string]: unknown;
49
47
  }[];
50
48
  export type ValueDisplays = {
51
49
  label?: Label;
52
50
  unit?: Unit;
53
51
  precision?: Precision;
54
- labelColor?: LabelColor;
55
- valueColor?: ValueColor;
56
- averageLatest?: AverageLatestValues;
57
- maxLatency?: MaximumLatency;
52
+ styling?: Styling;
53
+ advanced?: AdvancedSettings;
58
54
  data?: Data;
59
55
  [k: string]: unknown;
60
56
  }[];
61
57
 
62
- export interface ValueChartConfiguration {
63
- settings?: GlobalSettings;
58
+ export interface InputData {
59
+ title?: Title;
60
+ subTitle?: Subtitle;
64
61
  dataseries?: ValueDisplays;
65
62
  [k: string]: unknown;
66
63
  }
67
- export interface GlobalSettings {
68
- title?: Title;
69
- subTitle?: Subtitle;
64
+ export interface Styling {
65
+ labelColor?: LabelColor;
66
+ valueColor?: ValueColor;
67
+ [k: string]: unknown;
68
+ }
69
+ export interface LabelColor {
70
+ [k: string]: unknown;
71
+ }
72
+ export interface ValueColor {
73
+ [k: string]: unknown;
74
+ }
75
+ export interface AdvancedSettings {
76
+ averageLatest?: AverageLatestValues;
77
+ maxLatency?: MaximumLatency;
70
78
  [k: string]: unknown;
71
79
  }
package/src/definition-schema.json CHANGED
@@ -1,23 +1,16 @@
1
1
  {
2
- "title": "Value-chart Configuration",
2
+ "title": "InputData",
3
3
  "type": "object",
4
4
  "properties": {
5
- "settings": {
6
- "title": "Global Settings",
7
- "type": "object",
8
- "order": 1,
9
- "properties": {
10
- "title": {
11
- "title": "Title",
12
- "type": "string",
13
- "order": 1
14
- },
15
- "subTitle": {
16
- "title": "Subtitle",
17
- "type": "string",
18
- "order": 2
19
- }
20
- }
5
+ "title": {
6
+ "title": "Title",
7
+ "type": "string",
8
+ "order": 1
9
+ },
10
+ "subTitle": {
11
+ "title": "Subtitle",
12
+ "type": "string",
13
+ "order": 2
21
14
  },
22
15
  "dataseries": {
23
16
  "title": "Value Displays",
@@ -45,35 +38,51 @@
45
38
  "type": "number",
46
39
  "order": 3
47
40
  },
48
- "labelColor": {
49
- "title": "Label Color",
50
- "type": "color",
51
- "color": true,
52
- "order": 4
53
- },
54
- "valueColor": {
55
- "title": "Value Color",
56
- "type": "color",
57
- "color": true,
58
- "order": 5
59
- },
60
- "averageLatest": {
61
- "title": "Average Latest Values",
62
- "description": "Calculate the average over the given number of newest values. (If pivoted, then per each of the pivot dataseries.) If not specified then the latest value is shown without modification.",
63
- "type": "number",
64
- "order": 6
41
+ "styling": {
42
+ "title": "Styling",
43
+ "description": "",
44
+ "type": "object",
45
+ "order": 6,
46
+ "properties": {
47
+ "labelColor": {
48
+ "title": "Label Color",
49
+ "type": "color",
50
+ "color": true,
51
+ "order": 4
52
+ },
53
+ "valueColor": {
54
+ "title": "Value Color",
55
+ "type": "color",
56
+ "color": true,
57
+ "order": 5
58
+ }
59
+ }
65
60
  },
66
- "maxLatency": {
67
- "title": "Maximum Latency",
68
- "description": "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.",
69
- "type": "number",
70
- "order": 7
61
+ "advanced": {
62
+ "title": "Advanced Settings",
63
+ "description": "",
64
+ "type": "object",
65
+ "order": 7,
66
+ "properties": {
67
+ "averageLatest": {
68
+ "title": "Average Latest Values",
69
+ "description": "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.",
70
+ "type": "number",
71
+ "order": 6
72
+ },
73
+ "maxLatency": {
74
+ "title": "Maximum Latency",
75
+ "description": "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.",
76
+ "type": "number",
77
+ "order": 7
78
+ }
79
+ }
71
80
  },
72
81
  "data": {
73
82
  "title": "Data",
74
83
  "description": "The data used to draw this data series.",
75
84
  "type": "array",
76
- "order": 8,
85
+ "order": 4,
77
86
  "buffersize": 100,
78
87
  "items": {
79
88
  "type": "object",
@@ -91,8 +100,8 @@
91
100
  "order": 1
92
101
  },
93
102
  "pivot": {
94
- "title": "Pivot Column",
95
- "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 pivot column, then you will get a gauge for each city.",
103
+ "title": "Split Data by",
104
+ "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.",
96
105
  "type": "string",
97
106
  "order": 2
98
107
  }
package/src/widget-value.ts CHANGED
@@ -1,14 +1,14 @@
1
1
  import { html, css, LitElement, PropertyValueMap } from 'lit'
2
2
  import { repeat } from 'lit/directives/repeat.js'
3
3
  import { property, state } from 'lit/decorators.js'
4
- import { ValueChartConfiguration } from './definition-schema.js'
4
+ import { InputData } from './definition-schema.js'
5
5
 
6
- type Dataseries = Exclude<ValueChartConfiguration['dataseries'], undefined>[number] & { needleValue?: number }
6
+ type Dataseries = Exclude<InputData['dataseries'], undefined>[number] & { needleValue?: number }
7
7
  type Data = Exclude<Dataseries['data'], undefined>[number]
8
8
 
9
9
  export class WidgetValue extends LitElement {
10
10
  @property({ type: Object })
11
- inputData?: ValueChartConfiguration
11
+ inputData?: InputData
12
12
 
13
13
  @state()
14
14
  private dataSets: Map<string, Dataseries> = new Map()
@@ -24,7 +24,7 @@ export class WidgetValue extends LitElement {
24
24
 
25
25
  version: string = 'versionplaceholder'
26
26
 
27
- resizeObserver: ResizeObserver
27
+ private resizeObserver: ResizeObserver
28
28
 
29
29
  valueContainer?: HTMLDivElement
30
30
  boxes?: HTMLDivElement[]
@@ -32,11 +32,17 @@ export class WidgetValue extends LitElement {
32
32
  origHeight: number = 0
33
33
  constructor() {
34
34
  super()
35
-
36
- this.resizeObserver = new ResizeObserver((ev) => this.adjustSizes())
35
+ this.resizeObserver = new ResizeObserver(this.adjustSizes.bind(this))
37
36
  this.resizeObserver.observe(this)
38
37
  }
39
38
 
39
+ disconnectedCallback() {
40
+ super.disconnectedCallback()
41
+ if(this.resizeObserver) {
42
+ this.resizeObserver.disconnect()
43
+ }
44
+ }
45
+
40
46
  protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
41
47
  this.valueContainer = this?.shadowRoot?.querySelector('.value-container') as HTMLDivElement
42
48
 
@@ -121,7 +127,7 @@ export class WidgetValue extends LitElement {
121
127
  const numberText = n.querySelector('.current-value') as HTMLDivElement
122
128
  numberText.setAttribute(
123
129
  'style',
124
- `font-size: ${32 * modifier}px; ${ds?.valueColor ? 'color: ' + ds?.valueColor : ''}`
130
+ `font-size: ${32 * modifier}px; ${ds?.styling?.valueColor ? 'color: ' + ds?.styling?.valueColor : ''}`
125
131
  )
126
132
  })
127
133
 
@@ -131,12 +137,12 @@ export class WidgetValue extends LitElement {
131
137
  const labelText = n.querySelector('.label') as HTMLDivElement
132
138
  labelText.setAttribute(
133
139
  'style',
134
- `font-size: ${26 * modifier}px; ${ds?.labelColor ? 'color: ' + ds?.labelColor : ''}`
140
+ `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
135
141
  )
136
142
  const unitText = n.querySelector('.unit') as HTMLDivElement
137
143
  unitText.setAttribute(
138
144
  'style',
139
- `font-size: ${26 * modifier}px; ${ds?.labelColor ? 'color: ' + ds?.labelColor : ''}`
145
+ `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
140
146
  )
141
147
  })
142
148
 
@@ -158,13 +164,12 @@ export class WidgetValue extends LitElement {
158
164
  distincts.forEach((piv) => {
159
165
  const prefix = piv ? `${piv} - ` : ''
160
166
  const pds: Dataseries = {
161
- label: prefix + ds.label ?? '',
167
+ label: prefix + ds.label,
162
168
  order: ds.order,
163
169
  unit: ds.unit,
164
170
  precision: ds.precision,
165
- averageLatest: ds.averageLatest,
166
- labelColor: ds.labelColor,
167
- valueColor: ds.valueColor,
171
+ advanced: ds.advanced,
172
+ styling: ds.styling,
168
173
  data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv),
169
174
  needleValue: undefined
170
175
  }
@@ -174,9 +179,10 @@ export class WidgetValue extends LitElement {
174
179
 
175
180
  // filter latest values and calculate average
176
181
  this.dataSets.forEach((ds, label) => {
177
- if (typeof ds.averageLatest !== 'number' || !isNaN(ds.averageLatest)) ds.averageLatest = 1
182
+ ds.advanced ??= {}
183
+ if (typeof ds.advanced?.averageLatest !== 'number' || !isNaN(ds.advanced?.averageLatest)) ds.advanced.averageLatest = 1
178
184
 
179
- const data = ds?.data?.slice(0, ds?.averageLatest ?? 1) ?? []
185
+ const data = ds?.data?.slice(0, ds?.advanced?.averageLatest ?? 1) ?? []
180
186
  const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
181
187
  const average = values.reduce((p, c) => p + c, 0) / values.length
182
188
 
@@ -184,7 +190,7 @@ export class WidgetValue extends LitElement {
184
190
  const tsp = Date.parse(data?.[0]?.tsp ?? '')
185
191
  if (isNaN(tsp)) {
186
192
  const now = new Date().getTime()
187
- if (now - tsp > (ds.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
193
+ if (now - tsp > (ds.advanced?.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
188
194
  }
189
195
 
190
196
  ds.needleValue = average
@@ -291,11 +297,11 @@ export class WidgetValue extends LitElement {
291
297
  return html`
292
298
  <div class="wrapper">
293
299
  <header>
294
- <h3 class="paging" ?active=${this.inputData?.settings?.title}>
295
- ${this.inputData?.settings?.title}
300
+ <h3 class="paging" ?active=${this.inputData?.title}>
301
+ ${this.inputData?.title}
296
302
  </h3>
297
- <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
298
- ${this.inputData?.settings?.subTitle}
303
+ <p class="paging" ?active=${this.inputData?.subTitle}>
304
+ ${this.inputData?.subTitle}
299
305
  </p>
300
306
  </header>
301
307
  <div class="sizing-container">