@record-evolution/widget-value 1.1.24 → 1.1.25
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.
- package/dist/widget-value.js +2 -2
- package/package.json +2 -2
- package/src/definition-schema.d.ts +37 -10
- package/src/definition-schema.json +19 -12
package/dist/widget-value.js
CHANGED
|
@@ -644,7 +644,7 @@ var Yt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, _ = (i, t,
|
|
|
644
644
|
};
|
|
645
645
|
let v = class extends M {
|
|
646
646
|
constructor() {
|
|
647
|
-
super(), this.dataSets = /* @__PURE__ */ new Map(), this.textActive = !0, this.version = "1.1.
|
|
647
|
+
super(), this.dataSets = /* @__PURE__ */ new Map(), this.textActive = !0, this.version = "1.1.25", this.origWidth = 0, this.origHeight = 0, this.resizeObserver = new ResizeObserver(this.applyData.bind(this)), this.resizeObserver.observe(this);
|
|
648
648
|
}
|
|
649
649
|
disconnectedCallback() {
|
|
650
650
|
super.disconnectedCallback(), this.resizeObserver && this.resizeObserver.disconnect();
|
|
@@ -923,7 +923,7 @@ _([
|
|
|
923
923
|
vt(".sizing-container")
|
|
924
924
|
], v.prototype, "sizingContainer", 2);
|
|
925
925
|
v = _([
|
|
926
|
-
Kt("widget-value-1.1.
|
|
926
|
+
Kt("widget-value-1.1.25")
|
|
927
927
|
], v);
|
|
928
928
|
export {
|
|
929
929
|
v as WidgetValue
|
package/package.json
CHANGED
|
@@ -5,39 +5,48 @@
|
|
|
5
5
|
* and run json-schema-to-typescript to regenerate this file.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* The main heading displayed above the value displays. Use to identify the metric group (e.g., 'Temperature Readings', 'Production Counts').
|
|
10
|
+
*/
|
|
8
11
|
export type Title = string;
|
|
12
|
+
/**
|
|
13
|
+
* Secondary text displayed below the title. Use for additional context like location, time period, or data source.
|
|
14
|
+
*/
|
|
9
15
|
export type Subtitle = string;
|
|
10
16
|
/**
|
|
11
|
-
*
|
|
17
|
+
* Display text identifying this value. Should clearly describe what the number represents (e.g., 'Current Temperature', 'Total Orders', 'CPU Usage').
|
|
12
18
|
*/
|
|
13
19
|
export type Label = string;
|
|
14
20
|
/**
|
|
15
|
-
* The unit
|
|
21
|
+
* The measurement unit displayed after the value. Examples: '°C', 'km/h', '%', 'kWh', 'pcs'. Can be bound to data for dynamic units.
|
|
16
22
|
*/
|
|
17
23
|
export type Unit = string;
|
|
18
24
|
/**
|
|
19
|
-
* Number of
|
|
25
|
+
* Number of decimal places to display. Default is 0 (whole numbers). Set to 1-3 for measurements requiring decimal precision (e.g., temperature: 2, percentages: 1).
|
|
20
26
|
*/
|
|
21
27
|
export type Decimals = number;
|
|
22
28
|
/**
|
|
23
|
-
* The value
|
|
29
|
+
* The numeric value to display. Bind to a data source column containing the metric. Only shown when Multi Chart mode is disabled.
|
|
24
30
|
*/
|
|
25
31
|
export type Value = number;
|
|
26
32
|
/**
|
|
27
|
-
*
|
|
33
|
+
* Enable to automatically create one value display per distinct pivot value in the data. When enabled, use the data array with pivot column instead of a single value.
|
|
28
34
|
*/
|
|
29
35
|
export type MultiChart = boolean;
|
|
30
36
|
/**
|
|
31
|
-
*
|
|
37
|
+
* ISO 8601 timestamp string (e.g., '2023-11-04T22:47:52.351152+00:00'). Used with Maximum Latency setting to validate data freshness - stale data can be hidden or marked.
|
|
32
38
|
*/
|
|
33
39
|
export type Timestamp = string;
|
|
40
|
+
/**
|
|
41
|
+
* The numeric value from this data row. In Multi Chart mode, the latest value per pivot group is displayed.
|
|
42
|
+
*/
|
|
34
43
|
export type Value1 = number;
|
|
35
44
|
/**
|
|
36
|
-
*
|
|
45
|
+
* Column used to group data into separate value displays. Each unique value creates its own display. Example: with columns [city, timestamp, temperature], setting pivot to 'city' shows one temperature value per city.
|
|
37
46
|
*/
|
|
38
47
|
export type SplitDataBy = string;
|
|
39
48
|
/**
|
|
40
|
-
*
|
|
49
|
+
* Data array for Multi Chart mode. Each row should contain a value and optionally a timestamp and pivot column for splitting into multiple displays.
|
|
41
50
|
*/
|
|
42
51
|
export type Data = {
|
|
43
52
|
tsp?: Timestamp;
|
|
@@ -46,13 +55,16 @@ export type Data = {
|
|
|
46
55
|
[k: string]: unknown;
|
|
47
56
|
}[];
|
|
48
57
|
/**
|
|
49
|
-
* Calculate the average
|
|
58
|
+
* Calculate and display the average of the N most recent values instead of just the latest. Useful for smoothing noisy sensor data. Leave empty to show the raw latest value. When using pivot/split, averaging is applied per group.
|
|
50
59
|
*/
|
|
51
60
|
export type AverageLatestValues = number;
|
|
52
61
|
/**
|
|
53
|
-
*
|
|
62
|
+
* Maximum acceptable age of data in seconds. If the timestamp indicates data older than this threshold, the value may be hidden or marked as stale. Requires timestamp data to be provided. Useful for real-time monitoring where outdated values are misleading.
|
|
54
63
|
*/
|
|
55
64
|
export type MaximumLatency = number;
|
|
65
|
+
/**
|
|
66
|
+
* Array of value display configurations. Each entry creates a labeled numeric display with optional unit and styling. Add multiple entries to show several related metrics together.
|
|
67
|
+
*/
|
|
56
68
|
export type ValueDisplays = {
|
|
57
69
|
label?: Label;
|
|
58
70
|
unit?: Unit;
|
|
@@ -65,23 +77,38 @@ export type ValueDisplays = {
|
|
|
65
77
|
[k: string]: unknown;
|
|
66
78
|
}[];
|
|
67
79
|
|
|
80
|
+
/**
|
|
81
|
+
* A simple numeric value display widget for showing key metrics with labels and units. Use this widget to prominently display important numbers like sensor readings, KPIs, counts, or any scalar values. Supports multiple value displays in one widget, each with its own label, unit, and formatting. Features include decimal precision control, data freshness validation via timestamps, averaging over recent values, and automatic pivot/split functionality for showing one value per distinct category. Ideal for dashboard KPI tiles, sensor readouts, counters, or any scenario requiring clean numeric value presentation.
|
|
82
|
+
*/
|
|
68
83
|
export interface InputData {
|
|
69
84
|
title?: Title;
|
|
70
85
|
subTitle?: Subtitle;
|
|
71
86
|
dataseries?: ValueDisplays;
|
|
72
87
|
[k: string]: unknown;
|
|
73
88
|
}
|
|
89
|
+
/**
|
|
90
|
+
* Visual styling options for the label and value text colors.
|
|
91
|
+
*/
|
|
74
92
|
export interface Styling {
|
|
75
93
|
labelColor?: LabelColor;
|
|
76
94
|
valueColor?: ValueColor;
|
|
77
95
|
[k: string]: unknown;
|
|
78
96
|
}
|
|
97
|
+
/**
|
|
98
|
+
* Color of the label text above or beside the value.
|
|
99
|
+
*/
|
|
79
100
|
export interface LabelColor {
|
|
80
101
|
[k: string]: unknown;
|
|
81
102
|
}
|
|
103
|
+
/**
|
|
104
|
+
* Color of the numeric value and unit text.
|
|
105
|
+
*/
|
|
82
106
|
export interface ValueColor {
|
|
83
107
|
[k: string]: unknown;
|
|
84
108
|
}
|
|
109
|
+
/**
|
|
110
|
+
* Advanced data processing options for averaging and freshness validation.
|
|
111
|
+
*/
|
|
85
112
|
export interface AdvancedSettings {
|
|
86
113
|
averageLatest?: AverageLatestValues;
|
|
87
114
|
maxLatency?: MaximumLatency;
|
|
@@ -1,19 +1,23 @@
|
|
|
1
1
|
{
|
|
2
2
|
"title": "InputData",
|
|
3
|
+
"description": "A simple numeric value display widget for showing key metrics with labels and units. Use this widget to prominently display important numbers like sensor readings, KPIs, counts, or any scalar values. Supports multiple value displays in one widget, each with its own label, unit, and formatting. Features include decimal precision control, data freshness validation via timestamps, averaging over recent values, and automatic pivot/split functionality for showing one value per distinct category. Ideal for dashboard KPI tiles, sensor readouts, counters, or any scenario requiring clean numeric value presentation.",
|
|
3
4
|
"type": "object",
|
|
4
5
|
"properties": {
|
|
5
6
|
"title": {
|
|
6
7
|
"title": "Title",
|
|
8
|
+
"description": "The main heading displayed above the value displays. Use to identify the metric group (e.g., 'Temperature Readings', 'Production Counts').",
|
|
7
9
|
"type": "string",
|
|
8
10
|
"order": 1
|
|
9
11
|
},
|
|
10
12
|
"subTitle": {
|
|
11
13
|
"title": "Subtitle",
|
|
14
|
+
"description": "Secondary text displayed below the title. Use for additional context like location, time period, or data source.",
|
|
12
15
|
"type": "string",
|
|
13
16
|
"order": 2
|
|
14
17
|
},
|
|
15
18
|
"dataseries": {
|
|
16
19
|
"title": "Value Displays",
|
|
20
|
+
"description": "Array of value display configurations. Each entry creates a labeled numeric display with optional unit and styling. Add multiple entries to show several related metrics together.",
|
|
17
21
|
"type": "array",
|
|
18
22
|
"dataDrivenDisabled": true,
|
|
19
23
|
"order": 2,
|
|
@@ -22,28 +26,28 @@
|
|
|
22
26
|
"properties": {
|
|
23
27
|
"label": {
|
|
24
28
|
"title": "Label",
|
|
25
|
-
"description": "
|
|
29
|
+
"description": "Display text identifying this value. Should clearly describe what the number represents (e.g., 'Current Temperature', 'Total Orders', 'CPU Usage').",
|
|
26
30
|
"type": "string",
|
|
27
31
|
"required": true,
|
|
28
32
|
"order": 1
|
|
29
33
|
},
|
|
30
34
|
"unit": {
|
|
31
35
|
"title": "Unit",
|
|
32
|
-
"description": "The unit
|
|
36
|
+
"description": "The measurement unit displayed after the value. Examples: '°C', 'km/h', '%', 'kWh', 'pcs'. Can be bound to data for dynamic units.",
|
|
33
37
|
"type": "string",
|
|
34
38
|
"dataDrivenDisabled": false,
|
|
35
39
|
"order": 2
|
|
36
40
|
},
|
|
37
41
|
"precision": {
|
|
38
42
|
"title": "Decimals",
|
|
39
|
-
"description": "Number of
|
|
43
|
+
"description": "Number of decimal places to display. Default is 0 (whole numbers). Set to 1-3 for measurements requiring decimal precision (e.g., temperature: 2, percentages: 1).",
|
|
40
44
|
"type": "number",
|
|
41
45
|
"dataDrivenDisabled": true,
|
|
42
46
|
"order": 3
|
|
43
47
|
},
|
|
44
48
|
"value": {
|
|
45
49
|
"title": "Value",
|
|
46
|
-
"description": "The value
|
|
50
|
+
"description": "The numeric value to display. Bind to a data source column containing the metric. Only shown when Multi Chart mode is disabled.",
|
|
47
51
|
"type": "number",
|
|
48
52
|
"condition": {
|
|
49
53
|
"relativePath": "../multiChart",
|
|
@@ -53,14 +57,14 @@
|
|
|
53
57
|
},
|
|
54
58
|
"multiChart": {
|
|
55
59
|
"title": "Multi Chart",
|
|
56
|
-
"description": "
|
|
60
|
+
"description": "Enable to automatically create one value display per distinct pivot value in the data. When enabled, use the data array with pivot column instead of a single value.",
|
|
57
61
|
"type": "boolean",
|
|
58
62
|
"dataDrivenDisabled": true,
|
|
59
63
|
"order": 6
|
|
60
64
|
},
|
|
61
65
|
"data": {
|
|
62
66
|
"title": "Data",
|
|
63
|
-
"description": "
|
|
67
|
+
"description": "Data array for Multi Chart mode. Each row should contain a value and optionally a timestamp and pivot column for splitting into multiple displays.",
|
|
64
68
|
"type": "array",
|
|
65
69
|
"condition": {
|
|
66
70
|
"relativePath": "../multiChart",
|
|
@@ -72,19 +76,20 @@
|
|
|
72
76
|
"properties": {
|
|
73
77
|
"tsp": {
|
|
74
78
|
"title": "Timestamp",
|
|
75
|
-
"description": "
|
|
79
|
+
"description": "ISO 8601 timestamp string (e.g., '2023-11-04T22:47:52.351152+00:00'). Used with Maximum Latency setting to validate data freshness - stale data can be hidden or marked.",
|
|
76
80
|
"type": "string",
|
|
77
81
|
"order": 1
|
|
78
82
|
},
|
|
79
83
|
"value": {
|
|
80
84
|
"title": "Value",
|
|
85
|
+
"description": "The numeric value from this data row. In Multi Chart mode, the latest value per pivot group is displayed.",
|
|
81
86
|
"type": "number",
|
|
82
87
|
"required": true,
|
|
83
88
|
"order": 1
|
|
84
89
|
},
|
|
85
90
|
"pivot": {
|
|
86
91
|
"title": "Split Data by",
|
|
87
|
-
"description": "
|
|
92
|
+
"description": "Column used to group data into separate value displays. Each unique value creates its own display. Example: with columns [city, timestamp, temperature], setting pivot to 'city' shows one temperature value per city.",
|
|
88
93
|
"type": "string",
|
|
89
94
|
"order": 2
|
|
90
95
|
}
|
|
@@ -93,18 +98,20 @@
|
|
|
93
98
|
},
|
|
94
99
|
"styling": {
|
|
95
100
|
"title": "Styling",
|
|
96
|
-
"description": "",
|
|
101
|
+
"description": "Visual styling options for the label and value text colors.",
|
|
97
102
|
"type": "object",
|
|
98
103
|
"order": 8,
|
|
99
104
|
"properties": {
|
|
100
105
|
"labelColor": {
|
|
101
106
|
"title": "Label Color",
|
|
107
|
+
"description": "Color of the label text above or beside the value.",
|
|
102
108
|
"type": "color",
|
|
103
109
|
"color": true,
|
|
104
110
|
"order": 4
|
|
105
111
|
},
|
|
106
112
|
"valueColor": {
|
|
107
113
|
"title": "Value Color",
|
|
114
|
+
"description": "Color of the numeric value and unit text.",
|
|
108
115
|
"type": "color",
|
|
109
116
|
"color": true,
|
|
110
117
|
"order": 5
|
|
@@ -113,20 +120,20 @@
|
|
|
113
120
|
},
|
|
114
121
|
"advanced": {
|
|
115
122
|
"title": "Advanced Settings",
|
|
116
|
-
"description": "",
|
|
123
|
+
"description": "Advanced data processing options for averaging and freshness validation.",
|
|
117
124
|
"type": "object",
|
|
118
125
|
"order": 9,
|
|
119
126
|
"properties": {
|
|
120
127
|
"averageLatest": {
|
|
121
128
|
"title": "Average Latest Values",
|
|
122
|
-
"description": "Calculate the average
|
|
129
|
+
"description": "Calculate and display the average of the N most recent values instead of just the latest. Useful for smoothing noisy sensor data. Leave empty to show the raw latest value. When using pivot/split, averaging is applied per group.",
|
|
123
130
|
"type": "number",
|
|
124
131
|
"dataDrivenDisabled": true,
|
|
125
132
|
"order": 6
|
|
126
133
|
},
|
|
127
134
|
"maxLatency": {
|
|
128
135
|
"title": "Maximum Latency",
|
|
129
|
-
"description": "
|
|
136
|
+
"description": "Maximum acceptable age of data in seconds. If the timestamp indicates data older than this threshold, the value may be hidden or marked as stale. Requires timestamp data to be provided. Useful for real-time monitoring where outdated values are misleading.",
|
|
130
137
|
"type": "number",
|
|
131
138
|
"dataDrivenDisabled": true,
|
|
132
139
|
"order": 7
|