@record-evolution/widget-value 1.1.24 → 1.1.26

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 (5) hide show
  1. package/dist/widget-value.js +2 -2
  2. package/package.json +5 -4
  3. package/src/definition-schema.d.ts +37 -10
  4. package/src/definition-schema.json +19 -12
  5. package/thumbnail.webp +0 -0
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.24", this.origWidth = 0, this.origHeight = 0, this.resizeObserver = new ResizeObserver(this.applyData.bind(this)), this.resizeObserver.observe(this);
647
+ super(), this.dataSets = /* @__PURE__ */ new Map(), this.textActive = !0, this.version = "1.1.26", 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.24")
926
+ Kt("widget-value-1.1.26")
927
927
  ], v);
928
928
  export {
929
929
  v as WidgetValue
package/package.json CHANGED
@@ -3,9 +3,9 @@
3
3
  "description": "REWidget widget-value",
4
4
  "license": "MIT",
5
5
  "author": "widget-value",
6
- "version": "1.1.24",
6
+ "version": "1.1.26",
7
7
  "engines": {
8
- "node": ">=18.18.2",
8
+ "node": ">=24.9.0",
9
9
  "npm": ">=10.0.2"
10
10
  },
11
11
  "type": "module",
@@ -14,11 +14,12 @@
14
14
  "files": [
15
15
  "dist",
16
16
  "src",
17
- "thumbnail.png"
17
+ "thumbnail.png",
18
+ "thumbnail.webp"
18
19
  ],
19
20
  "scripts": {
20
21
  "analyze": "cem analyze --litelement",
21
- "start": "vite",
22
+ "start": "vite build --watch & vite",
22
23
  "build": "vite build",
23
24
  "watch": "vite build --watch",
24
25
  "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-value",
package/src/definition-schema.d.ts 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
- * The label for the value.
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 of the value. e.g. °C or km/h
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 digits after the decimal point. (Default 0)
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 of the gauge
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
- * Draw multiple Charts based on the split column of a data table.
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
- * 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.
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
- * 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.
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
- * The data used to draw this data series.
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 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.
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
- * 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.
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;
package/src/definition-schema.json CHANGED
@@ -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": "The label for the value.",
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 of the value. e.g. °C or km/h",
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 digits after the decimal point. (Default 0)",
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 of the gauge",
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": "Draw multiple Charts based on the split column of a data table.",
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": "The data used to draw this data series.",
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": "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.",
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": "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.",
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 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.",
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": "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.",
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
package/thumbnail.webp ADDED
Binary file