@record-evolution/widget-value 1.0.12 → 1.0.17

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 (8) hide show
  1. package/dist/tsconfig.tsbuildinfo +1 -1
  2. package/dist/widget-value.js +29 -26
  3. package/dist/widget-value.js.map +1 -1
  4. package/package.json +5 -4
  5. package/src/default-data.json +29 -22
  6. package/src/definition-schema.d.ts +7 -2
  7. package/src/definition-schema.json +8 -4
  8. package/src/widget-value.ts +25 -22
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.0.12",
6
+ "version": "1.0.17",
7
7
  "type": "module",
8
8
  "main": "dist/widget-value.js",
9
9
  "types": "dist/src/widget-value.d.ts",
@@ -14,8 +14,8 @@
14
14
  "scripts": {
15
15
  "analyze": "cem analyze --litelement",
16
16
  "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
17
- "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
18
- "watch": "rollup -w -c rollup.config.js --bundleConfigAsCjs",
17
+ "build": "rollup -c rollup.config.js",
18
+ "watch": "rollup -w -c rollup.config.js",
19
19
  "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
20
20
  "start:build": "npm run build && es-dev-server --root-dir dist --app-index index.html --compatibility none --open",
21
21
  "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
@@ -23,6 +23,7 @@
23
23
  "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
24
24
  },
25
25
  "dependencies": {
26
+ "@material/web": "^1.0.1",
26
27
  "lit": "^3.1.0"
27
28
  },
28
29
  "devDependencies": {
@@ -57,7 +58,7 @@
57
58
  },
58
59
  "keywords": [
59
60
  "widget",
60
- "value"
61
+ "table"
61
62
  ],
62
63
  "bugs": {
63
64
  "url": "https://github.com/RecordEvolution/widget-value/issues"
package/src/default-data.json CHANGED
@@ -1,23 +1,30 @@
1
1
  {
2
- "settings": {
3
- },
4
- "dataseries": [{
5
- "label": "Temperature",
6
- "unit": "°C",
7
- "valueColor": "#e15656",
8
- "labelColor": "#ff9b9b",
9
- "averageLatest": 1,
10
- "data": [{
11
- "value": 90
12
- }]
13
- },{
14
- "label": "Humidity",
15
- "unit": "Pa",
16
- "valueColor": "#5898d0",
17
- "labelColor": "#96caf8",
18
- "averageLatest": 1,
19
- "data": [{
20
- "value": 80
21
- }]
22
- }]
23
- }
2
+ "settings": {},
3
+ "dataseries": [
4
+ {
5
+ "label": "Temperature",
6
+ "unit": "°C",
7
+ "precision": 2,
8
+ "valueColor": "#e15656",
9
+ "labelColor": "#ff9b9b",
10
+ "averageLatest": 1,
11
+ "data": [
12
+ {
13
+ "value": 90
14
+ }
15
+ ]
16
+ },
17
+ {
18
+ "label": "Humidity",
19
+ "unit": "Pa",
20
+ "valueColor": "#5898d0",
21
+ "labelColor": "#96caf8",
22
+ "averageLatest": 1,
23
+ "data": [
24
+ {
25
+ "value": 80
26
+ }
27
+ ]
28
+ }
29
+ ]
30
+ }
package/src/definition-schema.d.ts CHANGED
@@ -15,6 +15,10 @@ export type Label = string;
15
15
  * The unit of the value. e.g. °C or km/h
16
16
  */
17
17
  export type Unit = string;
18
+ /**
19
+ * Number of digits after the decimal point
20
+ */
21
+ export type Precision = number;
18
22
  export type LabelColor = string;
19
23
  export type ValueColor = string;
20
24
  /**
@@ -30,13 +34,14 @@ export type PivotColumn = string;
30
34
  * The data used to draw this data series.
31
35
  */
32
36
  export type Data = {
33
- value: Value;
37
+ value?: Value;
34
38
  pivot?: PivotColumn;
35
39
  [k: string]: unknown;
36
40
  }[];
37
41
  export type ValueDisplays = {
38
- label: Label;
42
+ label?: Label;
39
43
  unit?: Unit;
44
+ precision?: Precision;
40
45
  labelColor?: LabelColor;
41
46
  valueColor?: ValueColor;
42
47
  averageLatest?: AverageLatestValues;
package/src/definition-schema.json CHANGED
@@ -25,7 +25,6 @@
25
25
  "order": 2,
26
26
  "items": {
27
27
  "type": "object",
28
- "required": ["label"],
29
28
  "properties": {
30
29
  "label": {
31
30
  "title": "Label",
@@ -40,17 +39,23 @@
40
39
  "type": "string",
41
40
  "order": 2
42
41
  },
42
+ "precision": {
43
+ "title": "Precision",
44
+ "description": "Number of digits after the decimal point. (Default 0)",
45
+ "type": "number",
46
+ "order": 3
47
+ },
43
48
  "labelColor": {
44
49
  "title": "Label Color",
45
50
  "type": "string",
46
51
  "color": true,
47
- "order": 3
52
+ "order": 4
48
53
  },
49
54
  "valueColor": {
50
55
  "title": "Value Color",
51
56
  "type": "string",
52
57
  "color": true,
53
- "order": 4
58
+ "order": 5
54
59
  },
55
60
  "averageLatest": {
56
61
  "title": "Average Latest Values",
@@ -66,7 +71,6 @@
66
71
  "buffersize": 100,
67
72
  "items": {
68
73
  "type": "object",
69
- "required": ["value"],
70
74
  "properties": {
71
75
  "value": {
72
76
  "title": "Value",
package/src/widget-value.ts CHANGED
@@ -3,7 +3,7 @@ import { repeat } from 'lit/directives/repeat.js'
3
3
  import { property, state } from 'lit/decorators.js'
4
4
  import { ValueChartConfiguration } from './definition-schema.js'
5
5
 
6
- type Dataseries = Exclude<ValueChartConfiguration['dataseries'], undefined>[number]
6
+ type Dataseries = Exclude<ValueChartConfiguration['dataseries'], undefined>[number] & { needleValue?: number }
7
7
  type Data = Exclude<Dataseries['data'], undefined>[number]
8
8
 
9
9
  export class WidgetValue extends LitElement {
@@ -71,8 +71,8 @@ export class WidgetValue extends LitElement {
71
71
  }
72
72
 
73
73
  adjustSizes() {
74
- const userWidth = (this.valueContainer?.getBoundingClientRect().width ?? 32) - 32
75
- const userHeight = (this.valueContainer?.getBoundingClientRect().height ?? 32) - 32
74
+ const userWidth = this.valueContainer?.getBoundingClientRect().width
75
+ const userHeight = this.valueContainer?.getBoundingClientRect().height
76
76
  const count = this.dataSets.size
77
77
 
78
78
  const width = this.origWidth
@@ -86,7 +86,7 @@ export class WidgetValue extends LitElement {
86
86
  const uhgap = userHeight - 12 * (r - 1)
87
87
  const m = uwgap / width / c
88
88
  const size = m * m * width * height * count
89
- if (r * m * height < uhgap) fits.push({ c, m, size, width, height, userWidth, userHeight })
89
+ if (r * m * height <= uhgap) fits.push({ c, m, size, width, height, userWidth, userHeight })
90
90
  }
91
91
 
92
92
  for (let r = 1; r <= count; r++) {
@@ -95,7 +95,7 @@ export class WidgetValue extends LitElement {
95
95
  const uhgap = userHeight - 12 * (r - 1)
96
96
  const m = uhgap / height / r
97
97
  const size = m * m * width * height * count
98
- if (c * m * width < uwgap) fits.push({ r, m, size, width, height, userWidth, userHeight })
98
+ if (c * m * width <= uwgap) fits.push({ r, m, size, width, height, userWidth, userHeight })
99
99
  }
100
100
  const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0)
101
101
  const fit = fits.find((f) => f.size === maxSize)
@@ -151,22 +151,27 @@ export class WidgetValue extends LitElement {
151
151
  // ?.sort((a, b) => a.order - b.order)
152
152
  ?.forEach((ds) => {
153
153
  // pivot data
154
- const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))]
154
+ const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))].filter(
155
+ (d) => d
156
+ ) as string[]
157
+ ds.needleValue = undefined
155
158
  if (distincts.length > 1 || distincts[0] !== undefined) {
156
159
  distincts.forEach((piv) => {
157
- const pds: any = {
158
- label: `${ds.label} ${piv}`,
160
+ const pds: Dataseries = {
161
+ label: `${ds.label ?? ''}-${piv}`,
159
162
  order: ds.order,
160
163
  unit: ds.unit,
164
+ precision: ds.precision,
161
165
  averageLatest: ds.averageLatest,
162
166
  labelColor: ds.labelColor,
163
167
  valueColor: ds.valueColor,
164
- data: ds.data?.filter((d) => d.pivot === piv)
168
+ data: ds.data?.filter((d) => d.pivot === piv),
169
+ needleValue: undefined
165
170
  }
166
- this.dataSets.set(pds.label, pds)
171
+ this.dataSets.set(pds.label ?? '', pds)
167
172
  })
168
173
  } else {
169
- this.dataSets.set(ds.label, ds)
174
+ this.dataSets.set(ds.label ?? '', ds)
170
175
  }
171
176
  })
172
177
 
@@ -296,14 +301,12 @@ export class WidgetValue extends LitElement {
296
301
  return html`
297
302
  <div class="single-value" label="${label}">
298
303
  <div class="label paging" ?active=${this.textActive}>${label}</div>
299
- <div class="horizontal">
300
- <div class="current-value paging" ?active=${this.textActive}>
301
- ${isNaN(ds.needleValue as number)
302
- ? ''
303
- : (ds.needleValue as number).toFixed(0)}
304
- </div>
305
- <div class="unit paging" ?active=${this.textActive}>${ds.unit}</div>
306
- </div>
304
+ <span class="current-value paging" ?active=${this.textActive}>
305
+ ${isNaN(ds.needleValue ?? 0) || ds.needleValue === undefined
306
+ ? ''
307
+ : ds.needleValue.toFixed(Math.max(0, ds.precision ?? 0))}
308
+ </span>
309
+ <span class="unit paging" ?active=${this.textActive}>${ds.unit}</span>
307
310
  </div>
308
311
  `
309
312
  }
@@ -311,16 +314,16 @@ export class WidgetValue extends LitElement {
311
314
  </div>
312
315
  <div class="value-container">
313
316
  ${repeat(
314
- this.dataSets,
317
+ [...this.dataSets.entries()].sort(),
315
318
  ([label]) => label,
316
319
  ([label, ds]) => {
317
320
  return html`
318
321
  <div class="single-value" label="${label}">
319
322
  <div class="label paging" ?active=${this.textActive}>${label}</div>
320
323
  <span class="current-value paging" ?active=${this.textActive}>
321
- ${isNaN(ds.needleValue as number)
324
+ ${isNaN(ds.needleValue ?? 0) || ds.needleValue === undefined
322
325
  ? ''
323
- : (ds.needleValue as number).toFixed(0)}
326
+ : ds.needleValue.toFixed(Math.max(0, ds.precision ?? 0))}
324
327
  </span>
325
328
  <span class="unit paging" ?active=${this.textActive}>${ds.unit}</span>
326
329
  </div>