@record-evolution/widget-gauge 1.7.23 → 1.7.25

package/package.json

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

package/src/definition-schema.d.ts

@@ -43,15 +43,15 @@ export type Data = {
     [k: string]: unknown;
 }[];
 /**
- * The minimum value of the gauge. If not specified 0 is used.
+ * The start value of the gauge. If not specified 0 is used.
  */
-export type GaugeMinimumValue = number;
-export type UpperLimit = number;
+export type GaugeStartValue = number;
+export type RightLimit = number;
 /**
- * The upper limits of the gauge sections and the color for each section.
+ * The right limits of the gauge sections and the color for that section.
  */
-export type SectionUpperLimits = {
-    limit?: UpperLimit;
+export type SectionRightLimits = {
+    limit?: RightLimit;
     sectionColor?: SectionColor;
     [k: string]: unknown;
 }[];
@@ -86,8 +86,8 @@ export interface ValueColor {
     [k: string]: unknown;
 }
 export interface GaugeColorSections {
-    gaugeMinValue?: GaugeMinimumValue;
-    sectionLimits?: SectionUpperLimits;
+    gaugeMinValue?: GaugeStartValue;
+    sectionLimits?: SectionRightLimits;
     [k: string]: unknown;
 }
 export interface SectionColor {

package/src/definition-schema.json

@@ -102,15 +102,15 @@
                         "order": 8,
                         "properties": {
                             "gaugeMinValue": {
-                                "title": "Gauge Minimum Value",
-                                "description": "The minimum value of the gauge. If not specified 0 is used.",
+                                "title": "Gauge Start Value",
+                                "description": "The start value of the gauge. If not specified 0 is used.",
                                 "type": "number",
                                 "dataDrivenDisabled": true,
                                 "order": 1
                             },
                             "sectionLimits": {
-                                "title": "Section Upper Limits",
-                                "description": "The upper limits of the gauge sections and the color for each section.",
+                                "title": "Section Right Limits",
+                                "description": "The right limits of the gauge sections and the color for that section.",
                                 "type": "array",
                                 "dataDrivenDisabled": true,
                                 "order": 2,
@@ -118,7 +118,7 @@
                                     "type": "object",
                                     "properties": {
                                         "limit": {
-                                            "title": "Upper Limit",
+                                            "title": "Right Limit",
                                             "type": "number",
                                             "dataDrivenDisabled": true,
                                             "order": 1

package/src/widget-gauge.ts

@@ -327,13 +327,6 @@ export class WidgetGauge extends LitElement {
                 ? (ds.sections?.gaugeMinValue ?? 0)
                 : ds.needleValue
 
-            // The full range of the gauge
-            ds.range =
-                (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) ?? []
-
             const echart = this.canvasList.get(ds.label)?.echart
             const option = echart?.getOption() ?? window.structuredClone(this.template)
             const seriesArr = option.series as GaugeSeriesOption[]
@@ -362,34 +355,64 @@ export class WidgetGauge extends LitElement {
 
             ga.detail.formatter = (val: number) =>
                 isNaN(val) ? '-' : val.toFixed(Math.floor(ds.precision ?? 0))
-            // ga.anchor.itemStyle.color = ds.valueColor
-            // ga.pointer.itemStyle.color = ds.valueColor
-
             // Axis
-            const sectionLimits = !ds.sections?.sectionLimits?.length
-                ? [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 = ds.sections?.gaugeMinValue ?? 0
-            ga.max = ga2.max
-
-            const tcolors = this.theme?.theme_object?.color
-            const bcolors: SectionColor[] = !ds.sections?.sectionLimits?.length
-                ? (tcolors?.slice(0, 3) ?? ['#bf444c', '#d88273', '#f6efa6'])
-                : ds.sections?.sectionLimits.map((l) => l.sectionColor).filter((c) => c !== undefined)
-
-            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] - ga.min) / (ds.range as number), b])
-                .filter(([s]) => !isNaN(s as number)) ?? [1 / 3, 1 / 3, 1 / 3]
+            const defaultColors = ['#bf444c', '#d88273', '#f6efa6']
+            const themeColors = this.theme?.theme_object?.color ?? defaultColors
+            const gaugeMin = ds.sections?.gaugeMinValue ?? 0
+
+            // Filter out entries with null/undefined/empty limits, keeping limits and colors in sync
+            const validSections = (ds.sections?.sectionLimits ?? [])
+                .map((l, i) => {
+                    const limit = l?.limit as string | number | null | undefined
+                    return {
+                        limit: limit === '' || limit == null ? undefined : Number(limit),
+                        color: l?.sectionColor || themeColors[i % themeColors.length]
+                    }
+                })
+                .filter(
+                    (s): s is { limit: number; color: SectionColor } => s.limit != null && !isNaN(s.limit)
+                )
+
+            // Determine ascending/descending based on gaugeMin vs first limit
+            const isAscending = !validSections.length || gaugeMin <= validSections[0].limit
+
+            // Filter to keep only sections that maintain monotonic order
+            const sections = validSections.filter((s, i, arr) => {
+                if (i === 0) return true
+                return isAscending ? s.limit > arr[i - 1].limit : s.limit < arr[i - 1].limit
+            })
+
+            const sectionLimits = sections.length ? sections.map((s) => s.limit) : [40, 80, 100]
+            const colors: SectionColor[] = sections.length
+                ? sections.map((s) => s.color)
+                : themeColors.slice(0, 3)
+
+            const gaugeMax = sectionLimits?.[sectionLimits.length - 1] ?? 100
+            ds.range = Math.abs(gaugeMax - gaugeMin)
 
+            ga.min = ga2.min = gaugeMin
+            ga.max = ga2.max = gaugeMax
+
+            // percentages of the sections paired with the colors (must be strictly ascending for ECharts)
+            const colorSections = sectionLimits
+                .map((limit, i) => {
+                    const pct = Math.abs(limit - gaugeMin) / (ds.range as number)
+                    const color = colors[i]
+                    return [pct, color] as [number, SectionColor]
+                })
+                .filter(([s]) => !isNaN(s) && s >= 0)
+
+            console.log(
+                'Gauge sections',
+                ds.label,
+                gaugeMin,
+                gaugeMax,
+                sections,
+                sectionLimits,
+                colorSections
+            )
             ga2.axisLine.lineStyle.width = 8 * modifier
-            ga2.axisLine.lineStyle.color = colorSections?.length
-                ? colorSections
-                : ga2.axisLine.lineStyle.color
+            if (colorSections.length) ga2.axisLine.lineStyle.color = colorSections
             ga2.axisLabel.fontSize = 24 * modifier
             // ga2.axisLabel.color = ds.valueColor
             ga2.axisLabel.distance = -24 * modifier
@@ -399,7 +422,10 @@ export class WidgetGauge extends LitElement {
             // Progress
             let progressColor = colors?.[colors.length - 1]
             for (const [i, s] of sectionLimits?.entries() ?? []) {
-                if (s > (ds.needleValue as number)) {
+                const inSection = isAscending
+                    ? s > (ds.needleValue as number)
+                    : s < (ds.needleValue as number)
+                if (inSection) {
                     progressColor = colors?.[i] ?? colors?.[0]
                     break
                 }