@record-evolution/widget-value 1.0.27 → 1.1.5

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 +2 -2
  2. package/dist/tsconfig.tsbuildinfo +1 -1
  3. package/dist/widget-value.js +330 -328
  4. package/dist/widget-value.js.map +1 -1
  5. package/package.json +29 -25
  6. package/src/default-data.json +14 -6
  7. package/src/definition-schema.d.ts +23 -15
  8. package/src/definition-schema.json +56 -42
  9. package/src/widget-value.ts +17 -17
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.27",
6
+ "version": "1.1.5",
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",
@@ -16,6 +20,8 @@
16
20
  "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
17
21
  "build": "rollup -c rollup.config.js",
18
22
  "watch": "rollup -w -c rollup.config.js",
23
+ "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-value",
24
+ "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-value && npm i @record-evolution/widget-value",
19
25
  "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
20
26
  "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open",
21
27
  "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
@@ -23,34 +29,32 @@
23
29
  "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
24
30
  },
25
31
  "dependencies": {
26
- "@material/web": "^1.0.1",
27
- "lit": "^3.1.0"
32
+ "@material/web": "^2.2.0",
33
+ "lit": "^3.2.0"
28
34
  },
29
35
  "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",
36
+ "@custom-elements-manifest/analyzer": "^0.10.3",
33
37
  "@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",
38
+ "@rollup/plugin-commonjs": "^28.0.0",
39
+ "@rollup/plugin-node-resolve": "^15.3.0",
40
+ "@rollup/plugin-replace": "^6.0.1",
41
+ "@rollup/plugin-typescript": "^12.1.0",
42
+ "@typescript-eslint/eslint-plugin": "^8.8.0",
43
+ "@typescript-eslint/parser": "^8.8.0",
44
+ "@web/dev-server": "^0.4.6",
45
+ "concurrently": "^9.0.1",
42
46
  "deepmerge": "^4.3.1",
43
47
  "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"
48
+ "eslint": "^9.11.1",
49
+ "eslint-config-prettier": "^9.1.0",
50
+ "husky": "^9.1.6",
51
+ "json-schema-to-typescript": "^15.0.2",
52
+ "lint-staged": "^15.2.10",
53
+ "prettier": "^3.3.3",
54
+ "rimraf": "^6.0.1",
55
+ "rollup": "^4.24.0",
56
+ "tslib": "^2.7.0",
57
+ "typescript": "^5.6.2"
54
58
  },
55
59
  "repository": {
56
60
  "type": "git",
@@ -58,7 +62,7 @@
58
62
  },
59
63
  "keywords": [
60
64
  "widget",
61
- "table"
65
+ "value"
62
66
  ],
63
67
  "bugs": {
64
68
  "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,27 +1,21 @@
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",
24
17
  "type": "array",
18
+ "dataDrivenDisabled": true,
25
19
  "order": 2,
26
20
  "items": {
27
21
  "type": "object",
@@ -37,43 +31,63 @@
37
31
  "title": "Unit",
38
32
  "description": "The unit of the value. e.g. °C or km/h",
39
33
  "type": "string",
34
+ "dataDrivenDisabled": true,
40
35
  "order": 2
41
36
  },
42
37
  "precision": {
43
38
  "title": "Precision",
44
39
  "description": "Number of digits after the decimal point. (Default 0)",
45
40
  "type": "number",
41
+ "dataDrivenDisabled": true,
46
42
  "order": 3
47
43
  },
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
44
+ "styling": {
45
+ "title": "Styling",
46
+ "description": "",
47
+ "type": "object",
48
+ "order": 6,
49
+ "properties": {
50
+ "labelColor": {
51
+ "title": "Label Color",
52
+ "type": "color",
53
+ "color": true,
54
+ "order": 4
55
+ },
56
+ "valueColor": {
57
+ "title": "Value Color",
58
+ "type": "color",
59
+ "color": true,
60
+ "order": 5
61
+ }
62
+ }
65
63
  },
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
64
+ "advanced": {
65
+ "title": "Advanced Settings",
66
+ "description": "",
67
+ "type": "object",
68
+ "order": 7,
69
+ "properties": {
70
+ "averageLatest": {
71
+ "title": "Average Latest Values",
72
+ "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.",
73
+ "type": "number",
74
+ "dataDrivenDisabled": true,
75
+ "order": 6
76
+ },
77
+ "maxLatency": {
78
+ "title": "Maximum Latency",
79
+ "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.",
80
+ "type": "number",
81
+ "dataDrivenDisabled": true,
82
+ "order": 7
83
+ }
84
+ }
71
85
  },
72
86
  "data": {
73
87
  "title": "Data",
74
88
  "description": "The data used to draw this data series.",
75
89
  "type": "array",
76
- "order": 8,
90
+ "order": 4,
77
91
  "buffersize": 100,
78
92
  "items": {
79
93
  "type": "object",
@@ -91,8 +105,8 @@
91
105
  "order": 1
92
106
  },
93
107
  "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.",
108
+ "title": "Split Data by",
109
+ "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
110
  "type": "string",
97
111
  "order": 2
98
112
  }
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()
@@ -127,7 +127,7 @@ export class WidgetValue extends LitElement {
127
127
  const numberText = n.querySelector('.current-value') as HTMLDivElement
128
128
  numberText.setAttribute(
129
129
  'style',
130
- `font-size: ${32 * modifier}px; ${ds?.valueColor ? 'color: ' + ds?.valueColor : ''}`
130
+ `font-size: ${32 * modifier}px; ${ds?.styling?.valueColor ? 'color: ' + ds?.styling?.valueColor : ''}`
131
131
  )
132
132
  })
133
133
 
@@ -137,12 +137,12 @@ export class WidgetValue extends LitElement {
137
137
  const labelText = n.querySelector('.label') as HTMLDivElement
138
138
  labelText.setAttribute(
139
139
  'style',
140
- `font-size: ${26 * modifier}px; ${ds?.labelColor ? 'color: ' + ds?.labelColor : ''}`
140
+ `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
141
141
  )
142
142
  const unitText = n.querySelector('.unit') as HTMLDivElement
143
143
  unitText.setAttribute(
144
144
  'style',
145
- `font-size: ${26 * modifier}px; ${ds?.labelColor ? 'color: ' + ds?.labelColor : ''}`
145
+ `font-size: ${26 * modifier}px; ${ds?.styling?.labelColor ? 'color: ' + ds?.styling?.labelColor : ''}`
146
146
  )
147
147
  })
148
148
 
@@ -164,13 +164,12 @@ export class WidgetValue extends LitElement {
164
164
  distincts.forEach((piv) => {
165
165
  const prefix = piv ? `${piv} - ` : ''
166
166
  const pds: Dataseries = {
167
- label: prefix + ds.label ?? '',
167
+ label: prefix + ds.label,
168
168
  order: ds.order,
169
169
  unit: ds.unit,
170
170
  precision: ds.precision,
171
- averageLatest: ds.averageLatest,
172
- labelColor: ds.labelColor,
173
- valueColor: ds.valueColor,
171
+ advanced: ds.advanced,
172
+ styling: ds.styling,
174
173
  data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv),
175
174
  needleValue: undefined
176
175
  }
@@ -180,9 +179,10 @@ export class WidgetValue extends LitElement {
180
179
 
181
180
  // filter latest values and calculate average
182
181
  this.dataSets.forEach((ds, label) => {
183
- 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
184
184
 
185
- const data = ds?.data?.slice(0, ds?.averageLatest ?? 1) ?? []
185
+ const data = ds?.data?.slice(0, ds?.advanced?.averageLatest ?? 1) ?? []
186
186
  const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
187
187
  const average = values.reduce((p, c) => p + c, 0) / values.length
188
188
 
@@ -190,7 +190,7 @@ export class WidgetValue extends LitElement {
190
190
  const tsp = Date.parse(data?.[0]?.tsp ?? '')
191
191
  if (isNaN(tsp)) {
192
192
  const now = new Date().getTime()
193
- if (now - tsp > (ds.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
193
+ if (now - tsp > (ds.advanced?.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
194
194
  }
195
195
 
196
196
  ds.needleValue = average
@@ -297,11 +297,11 @@ export class WidgetValue extends LitElement {
297
297
  return html`
298
298
  <div class="wrapper">
299
299
  <header>
300
- <h3 class="paging" ?active=${this.inputData?.settings?.title}>
301
- ${this.inputData?.settings?.title}
300
+ <h3 class="paging" ?active=${this.inputData?.title}>
301
+ ${this.inputData?.title}
302
302
  </h3>
303
- <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
304
- ${this.inputData?.settings?.subTitle}
303
+ <p class="paging" ?active=${this.inputData?.subTitle}>
304
+ ${this.inputData?.subTitle}
305
305
  </p>
306
306
  </header>
307
307
  <div class="sizing-container">