@record-evolution/widget-gauge 1.5.28 → 1.5.30

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.5.28",
+    "version": "1.5.30",
     "type": "module",
     "main": "dist/widget-gauge.js",
     "types": "dist/src/widget-gauge.d.ts",

package/src/definition-schema.d.ts

@@ -26,6 +26,14 @@ export type SectionBackgroundColors = {
  * 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.
  */
 export type AverageLatestValues = number;
+/**
+ * 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.
+ */
+export type MaximumLatency = number;
+/**
+ * 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.
+ */
+export type Timestamp = string;
 export type Value = number;
 /**
  * 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.
@@ -35,17 +43,19 @@ export type PivotColumn = string;
  * The data used to draw this data series.
  */
 export type Data = {
-  value: Value;
+  tsp?: Timestamp;
+  value?: Value;
   pivot?: PivotColumn;
   [k: string]: unknown;
 }[];
 export type Gauges = {
-  label: Label;
+  label?: Label;
   valueColor?: ValueColor;
   unit?: Unit;
   sections?: Sections;
   backgroundColors?: SectionBackgroundColors;
   averageLatest?: AverageLatestValues;
+  maxLatency?: MaximumLatency;
   data?: Data;
   [k: string]: unknown;
 }[];

package/src/definition-schema.json

@@ -67,25 +67,37 @@
                         "type": "number",
                         "order": 6
                     },
+                    "maxLatency": {
+                        "title": "Maximum Latency",
+                        "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.",
+                        "type": "number",
+                        "order": 7
+                    },
                     "data": {
                         "title": "Data",
                         "description": "The data used to draw this data series.",
                         "type": "array",
-                        "order": 7,
+                        "order": 8,
                         "buffersize": 1000,
                         "items": {
                             "type": "object",
                             "properties": {
+                                "tsp": {
+                                    "title": "Timestamp",
+                                    "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.",
+                                    "type": "string",
+                                    "order": 1
+                                },
                                 "value": {
                                     "title": "Value",
                                     "type": "number",
-                                    "order": 1,
+                                    "order": 2,
                                     "required": true
                                 },
                                 "pivot": {
                                     "title": "Pivot Column",
                                     "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.",
-                                    "order": 2,
+                                    "order": 3,
                                     "type": "string"
                                 }
                             }

package/src/widget-gauge.ts

@@ -216,22 +216,20 @@ export class WidgetGauge extends LitElement {
         this.inputData.dataseries?.forEach((ds) => {
             // pivot data
             const distincts = [...new Set(ds?.data?.map((d: Data) => d.pivot))]
-            if (distincts.length > 1) {
-                distincts.forEach((piv) => {
-                    const pds: any = {
-                        label: `${piv}-${ds.label ?? ''}`,
-                        unit: ds.unit,
-                        averageLatest: ds.averageLatest,
-                        valueColor: ds.valueColor,
-                        sections: ds.sections,
-                        backgroundColors: ds.backgroundColors,
-                        data: ds?.data?.filter((d) => d.pivot === piv)
-                    }
-                    this.dataSets.push(pds)
-                })
-            } else {
-                this.dataSets.push(ds)
-            }
+
+            distincts.forEach((piv) => {
+                const prefix = piv ? `${piv} - ` : ''
+                const pds: any = {
+                    label: prefix + `${ds.label ?? ''}`,
+                    unit: ds.unit,
+                    averageLatest: ds.averageLatest,
+                    valueColor: ds.valueColor,
+                    sections: ds.sections,
+                    backgroundColors: ds.backgroundColors,
+                    data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
+                }
+                this.dataSets.push(pds)
+            })
         })
 
         // console.log('Gauge Datasets', this.dataSets)
@@ -240,7 +238,11 @@ export class WidgetGauge extends LitElement {
     applyData() {
         const modifier = this.modifier
         this.setupCharts()
-        this.dataSets.sort((a, b) => (a.label < b.label ? 1 : -1))
+        this.dataSets.forEach((d) => {
+            d.label ??= ''
+        })
+
+        this.dataSets.sort((a, b) => ((a.label as string) > (b.label as string) ? 1 : -1))
         this.requestUpdate()
 
         for (const ds of this.dataSets) {
@@ -267,6 +269,13 @@ export class WidgetGauge extends LitElement {
             option.title.textStyle.fontSize = 22 * modifier
 
             // Needle
+            // Check age of data Latency
+            const tsp = Date.parse(ds.data?.[0].tsp ?? '')
+            if (isNaN(tsp)) {
+                const now = new Date().getTime()
+                if (now - tsp > (ds.maxLatency ?? Infinity) * 1000) ds.needleValue = undefined
+            }
+
             ga.data[0].value = ds.needleValue
             ga.data[0].name = ds.unit
             ga.title.fontSize = 20 * modifier
@@ -306,7 +315,7 @@ export class WidgetGauge extends LitElement {
             ga.progress.itemStyle.color = progressColor
             ga.progress.width = 80 * modifier
             // Apply
-            this.canvasList[ds.label]?.setOption(option)
+            this.canvasList[ds.label ?? '']?.setOption(option)
         }
     }
 
@@ -318,12 +327,12 @@ export class WidgetGauge extends LitElement {
         }
 
         this.dataSets.forEach((ds) => {
-            if (this.canvasList[ds.label]) return
+            if (this.canvasList[ds.label ?? '']) return
             const canvas = this.shadowRoot?.querySelector(`[name="${ds.label}"]`) as HTMLCanvasElement
             if (!canvas) return
             // @ts-ignore
-            this.canvasList[ds.label] = echarts.init(canvas)
-            this.canvasList[ds.label].setOption(JSON.parse(JSON.stringify(this.template)))
+            this.canvasList[ds.label ?? ''] = echarts.init(canvas)
+            this.canvasList[ds.label ?? ''].setOption(JSON.parse(JSON.stringify(this.template)))
         })
     }
 
@@ -410,7 +419,7 @@ export class WidgetGauge extends LitElement {
                         (ds) => ds.label,
                         (ds) => html`
                             <div
-                                name="${ds.label}"
+                                name="${ds.label ?? ''}"
                                 class="chart"
                                 style="min-width: 600px; min-height: 400px; width: 600px; height: 400px;"
                             ></div>