@record-evolution/widget-gauge 1.7.8 → 1.7.10

package/package.json

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

package/src/default-data.json

@@ -1,5 +1,22 @@
 {
     "dataseries": [
+        {
+            "label": "Demo Gauge Temperature",
+            "unit": "°C",
+            "precision": 1,
+            "data": [
+                {
+                    "value": 83
+                }
+            ],
+            "sections": {
+                "sectionLimits": [],
+                "backgroundColors": []
+            },
+            "advanced": {
+                "averageLatest": 1
+            }
+        },
         {
             "label": "Demo Gauge Pascal",
             "unit": "Pa",

package/src/widget-gauge.ts

@@ -1,6 +1,6 @@
 import { html, css, LitElement, PropertyValueMap } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { GaugeChartConfiguration } from './definition-schema.js'
+import { GaugeChartConfiguration, SectionBackgroundColors } from './definition-schema.js'
 
 import * as echarts from 'echarts/core'
 import { TooltipComponent } from 'echarts/components'
@@ -263,7 +263,7 @@ export class WidgetGauge extends LitElement {
         this.boxes = Array.from(this?.shadowRoot?.querySelectorAll('.chart') as NodeListOf<HTMLDivElement>)
 
         this.boxes?.forEach((box) =>
-            box.setAttribute('style', `width:${modifier * chartW}px; height:${modifier * (chartH - 25)}px`)
+            box.setAttribute('style', `width:${modifier * chartW}px; height:${modifier * (chartH - 27)}px`)
         )
 
         this.modifier = modifier
@@ -346,7 +346,7 @@ export class WidgetGauge extends LitElement {
 
             ga.data[0].value = ds.needleValue
             ga.data[0].name = ds.unit
-            ga.title.fontSize = 25 * modifier
+            ga.title.fontSize = 20 * modifier
             ga.title.color = ds.valueColor ?? this.themeTitleColor
             ga.detail.color = ds.valueColor ?? this.themeTitleColor
             ga.detail.fontSize = 40 * modifier
@@ -356,14 +356,20 @@ export class WidgetGauge extends LitElement {
             // ga.pointer.itemStyle.color = ds.valueColor
 
             // Axis
-            const sectionLimits = ds.sections?.sectionLimits ?? [0, 40, 80, 100]
+            const sectionLimits = !ds.sections?.sectionLimits?.length
+                ? [0, 40, 80, 100]
+                : ds.sections?.sectionLimits
             ga2.min = sectionLimits?.length ? Math.min(...sectionLimits) : 0
             ga2.max = sectionLimits?.length ? Math.max(...sectionLimits) : 100
             ga.min = ga2.min
             ga.max = ga2.max
 
-            const tcolors = this.theme?.theme_object?.color
-            const colors: string[] = ds.sections?.backgroundColors?.map(
+            const tcolors: SectionBackgroundColors = this.theme?.theme_object?.color
+            const bcolors: SectionBackgroundColors = !ds.sections?.backgroundColors?.length
+                ? (tcolors?.slice(0, 3) ?? ['#bf444c', '#d88273', '#f6efa6'])
+                : ds.sections?.backgroundColors
+
+            const colors: SectionBackgroundColors = bcolors?.map(
                 (b, i) => b || tcolors[i % (tcolors?.length ?? 0)]
             ) ??
                 tcolors?.slice(0, 3) ?? ['#bf444c', '#d88273', '#f6efa6']
@@ -399,7 +405,7 @@ export class WidgetGauge extends LitElement {
             if (titleElement) {
                 titleElement.style.fontSize = String(20 * modifier) + 'px'
                 titleElement.style.maxWidth = String(300 * modifier) + 'px'
-                titleElement.style.height = String(25 * modifier) + 'px'
+                titleElement.style.height = String(27 * modifier) + 'px'
                 titleElement.textContent = ds.label ?? ''
             }