@record-evolution/widget-gauge 1.7.22 → 1.7.23

package/package.json

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

package/src/default-data.json

@@ -6,8 +6,7 @@
             "precision": 1,
             "value": 83,
             "sections": {
-                "sectionLimits": [],
-                "backgroundColors": []
+                "gaugeMinValue": 0
             },
             "advanced": {
                 "averageLatest": 1

package/src/definition-schema.d.ts

@@ -43,13 +43,16 @@ export type Data = {
     [k: string]: unknown;
 }[];
 /**
- * The limits of the gauge sections. Starting from the min value, ending with the max value.
+ * The minimum value of the gauge. If not specified 0 is used.
  */
-export type SectionLimits = number[];
+export type GaugeMinimumValue = number;
+export type UpperLimit = number;
 /**
- * Background color for each section. This Array is one shorter than the number of sections.
+ * The upper limits of the gauge sections and the color for each section.
  */
-export type SectionBackgroundColors = {
+export type SectionUpperLimits = {
+    limit?: UpperLimit;
+    sectionColor?: SectionColor;
     [k: string]: unknown;
 }[];
 /**
@@ -83,8 +86,11 @@ export interface ValueColor {
     [k: string]: unknown;
 }
 export interface GaugeColorSections {
-    sectionLimits?: SectionLimits;
-    backgroundColors?: SectionBackgroundColors;
+    gaugeMinValue?: GaugeMinimumValue;
+    sectionLimits?: SectionUpperLimits;
+    [k: string]: unknown;
+}
+export interface SectionColor {
     [k: string]: unknown;
 }
 export interface AdvancedConfiguration {

package/src/definition-schema.json

@@ -101,27 +101,36 @@
                         "type": "object",
                         "order": 8,
                         "properties": {
-                            "sectionLimits": {
-                                "title": "Section Limits",
-                                "description": "The limits of the gauge sections. Starting from the min value, ending with the max value.",
-                                "type": "array",
+                            "gaugeMinValue": {
+                                "title": "Gauge Minimum Value",
+                                "description": "The minimum value of the gauge. If not specified 0 is used.",
+                                "type": "number",
                                 "dataDrivenDisabled": true,
-                                "order": 4,
-                                "items": {
-                                    "type": "number",
-                                    "dataDrivenDisabled": true
-                                }
+                                "order": 1
                             },
-                            "backgroundColors": {
-                                "title": "Section background colors",
-                                "description": "Background color for each section. This Array is one shorter than the number of sections.",
+                            "sectionLimits": {
+                                "title": "Section Upper Limits",
+                                "description": "The upper limits of the gauge sections and the color for each section.",
                                 "type": "array",
                                 "dataDrivenDisabled": true,
+                                "order": 2,
                                 "items": {
-                                    "type": "color",
-                                    "dataDrivenDisabled": true
-                                },
-                                "order": 5
+                                    "type": "object",
+                                    "properties": {
+                                        "limit": {
+                                            "title": "Upper Limit",
+                                            "type": "number",
+                                            "dataDrivenDisabled": true,
+                                            "order": 1
+                                        },
+                                        "sectionColor": {
+                                            "title": "Section Color",
+                                            "type": "color",
+                                            "dataDrivenDisabled": true,
+                                            "order": 2
+                                        }
+                                    }
+                                }
                             }
                         }
                     },

package/src/widget-gauge.ts

@@ -1,6 +1,6 @@
 import { html, css, LitElement, PropertyValueMap, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
-import { GaugeChartConfiguration, SectionBackgroundColors } from './definition-schema.js'
+import { GaugeChartConfiguration, SectionColor } from './definition-schema.js'
 
 import * as echarts from 'echarts/core'
 import { TooltipComponent } from 'echarts/components'
@@ -324,13 +324,13 @@ export class WidgetGauge extends LitElement {
                 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.sections?.gaugeMinValue ?? 0)
                 : ds.needleValue
 
             // The full range of the gauge
             ds.range =
-                (ds.sections?.sectionLimits?.[ds.sections?.sectionLimits?.length - 1] ?? 100) -
-                (ds.sections?.sectionLimits?.[0] ?? 0)
+                (ds.sections?.sectionLimits?.[ds.sections?.sectionLimits?.length - 1].limit || 100) -
+                (ds.sections?.gaugeMinValue ?? 0)
             if (isNaN(ds.range as number)) ds.range = 100
             // ds.ranges = ds.sections?.sectionLimits?.map((v, i, a) => v - (a?.[i - 1] ?? 0)).slice(1) ?? []
 
@@ -367,26 +367,23 @@ export class WidgetGauge extends LitElement {
 
             // Axis
             const sectionLimits = !ds.sections?.sectionLimits?.length
-                ? [0, 40, 80, 100]
-                : ds.sections?.sectionLimits
-            ga2.min = sectionLimits?.length ? Math.min(...sectionLimits) : 0
+                ? [40, 80, 100]
+                : ds.sections?.sectionLimits.map((l) => l.limit).filter((l) => l !== undefined)
             ga2.max = sectionLimits?.length ? Math.max(...sectionLimits) : 100
-            ga.min = ga2.min
+            ga.min = ga2.min = ds.sections?.gaugeMinValue ?? 0
             ga.max = ga2.max
 
-            const tcolors: SectionBackgroundColors = this.theme?.theme_object?.color
-            const bcolors: SectionBackgroundColors = !ds.sections?.backgroundColors?.length
+            const tcolors = this.theme?.theme_object?.color
+            const bcolors: SectionColor[] = !ds.sections?.sectionLimits?.length
                 ? (tcolors?.slice(0, 3) ?? ['#bf444c', '#d88273', '#f6efa6'])
-                : ds.sections?.backgroundColors
+                : ds.sections?.sectionLimits.map((l) => l.sectionColor).filter((c) => c !== undefined)
 
-            const colors: SectionBackgroundColors = bcolors?.map(
-                (b, i) => b || tcolors[i % (tcolors?.length ?? 0)]
-            ) ??
+            const colors = bcolors?.map((b, i) => b || tcolors[i % (tcolors?.length ?? 0)]) ??
                 tcolors?.slice(0, 3) ?? ['#bf444c', '#d88273', '#f6efa6']
 
             // percentages of the sections paired with the colors
             const colorSections = colors
-                ?.map((b, i) => [((sectionLimits?.[i + 1] ?? ga.min) - ga.min) / (ds.range as number), b])
+                ?.map((b, i) => [(sectionLimits?.[i] - ga.min) / (ds.range as number), b])
                 .filter(([s]) => !isNaN(s as number)) ?? [1 / 3, 1 / 3, 1 / 3]
 
             ga2.axisLine.lineStyle.width = 8 * modifier
@@ -403,7 +400,7 @@ export class WidgetGauge extends LitElement {
             let progressColor = colors?.[colors.length - 1]
             for (const [i, s] of sectionLimits?.entries() ?? []) {
                 if (s > (ds.needleValue as number)) {
-                    progressColor = colors?.[i - 1] ?? colors?.[0]
+                    progressColor = colors?.[i] ?? colors?.[0]
                     break
                 }
             }