simpler multiChart

Author: Marko Petzold

package.json

@@ -24,7 +24,7 @@
     },
     "dependencies": {
         "echarts": "5.6.0",
-        "lit": "^3.3.0"
+        "lit": "^3.3.1"
     },
     "devDependencies": {
         "@custom-elements-manifest/analyzer": "^0.10.4",

src/definition-schema.d.ts

@@ -15,12 +15,20 @@ export type Unit = string;
 /**
  * The number of decimal places to show in the value. If not specified, precision is 0.
  */
-export type Precision = number;
+export type Decimals = number;
+/**
+ * Draw multiple Charts based on the split column of a data table.
+ */
+export type MultiChart = boolean;
+/**
+ * The value of the gauge
+ */
+export type Value = 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;
+export type Value1 = number;
 /**
  * You can specify a table column 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 gauge for each city.
  */
@@ -30,7 +38,7 @@ export type SplitDataBy = string;
  */
 export type Data = {
     tsp?: Timestamp;
-    value?: Value;
+    value?: Value1;
     pivot?: SplitDataBy;
     [k: string]: unknown;
 }[];
@@ -56,7 +64,9 @@ export type Gauges = {
     label?: Label;
     valueColor?: ValueColor;
     unit?: Unit;
-    precision?: Precision;
+    precision?: Decimals;
+    multiChart?: MultiChart;
+    value?: Value;
     data?: Data;
     sections?: GaugeColorSections;
     advanced?: AdvancedConfiguration;

src/definition-schema.json

@@ -39,17 +39,38 @@
                         "order": 3
                     },
                     "precision": {
-                        "title": "Precision",
+                        "title": "Decimals",
                         "description": "The number of decimal places to show in the value. If not specified, precision is 0.",
                         "type": "number",
-                        "dataDrivenDisabled": false,
+                        "dataDrivenDisabled": true,
                         "order": 4
                     },
+                    "multiChart": {
+                        "title": "Multi Chart",
+                        "description": "Draw multiple Charts based on the split column of a data table.",
+                        "type": "boolean",
+                        "dataDrivenDisabled": true,
+                        "order": 6
+                    },
+                    "value": {
+                        "title": "Value",
+                        "description": "The value of the gauge",
+                        "type": "number",
+                        "condition": {
+                            "relativePath": "../multiChart",
+                            "showIfValueIn": [false]
+                        },
+                        "order": 5
+                    },
                     "data": {
                         "title": "Data",
                         "description": "Provide a list of values. Only the latest value is shown in the gauge unless you configure \"Advanced Settings\" below or use split data.",
                         "type": "array",
-                        "order": 4,
+                        "condition": {
+                            "relativePath": "../multiChart",
+                            "showIfValueIn": [true]
+                        },
+                        "order": 7,
                         "items": {
                             "type": "object",
                             "properties": {
@@ -78,7 +99,7 @@
                         "title": "Gauge Color Sections",
                         "description": "",
                         "type": "object",
-                        "order": 5,
+                        "order": 8,
                         "properties": {
                             "sectionLimits": {
                                 "title": "Section Limits",
@@ -108,7 +129,7 @@
                         "title": "Advanced Configuration",
                         "description": "",
                         "type": "object",
-                        "order": 6,
+                        "order": 9,
                         "properties": {
                             "averageLatest": {
                                 "title": "Average Latest Values",

src/widget-gauge.ts

@@ -292,6 +292,8 @@ export class WidgetGauge extends LitElement {
                         advanced: ds.advanced,
                         valueColor: ds.valueColor,
                         sections: ds.sections,
+                        multiChart: ds.multiChart,
+                        value: ds.value,
                         data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
                     }
                     this.dataSets.push(pds)
@@ -317,10 +319,16 @@ export class WidgetGauge extends LitElement {
             if (typeof ds.advanced?.averageLatest !== 'number' || isNaN(ds.advanced?.averageLatest))
                 ds.advanced.averageLatest = 1
             const data = ds?.data?.slice(-ds.advanced?.averageLatest || -1) ?? []
-            const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
-            const average = values.reduce((p, c) => p + c, 0) / values.length
-
-            ds.needleValue = isNaN(average) ? ds.sections?.sectionLimits?.[0] : average
+            console.log('multiChart', ds.multiChart)
+            if (!ds.multiChart) {
+                ds.needleValue = ds.value as number
+            } else {
+                const values = (data?.map((d) => d.value)?.filter((p) => p !== undefined) ?? []) as number[]
+                ds.needleValue = (values.reduce((p, c) => p + c, 0) / values.length) as number
+            }
+            ds.needleValue = isNaN(ds.needleValue as number)
+                ? ds.sections?.sectionLimits?.[0]
+                : ds.needleValue
 
             // The full range of the gauge
             ds.range =