@record-evolution/widget-gauge 1.7.18 → 1.7.20

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.7.18",
+    "version": "1.7.20",
     "type": "module",
     "main": "dist/widget-gauge.js",
     "types": "dist/src/widget-gauge.d.ts",
@@ -23,7 +23,7 @@
         "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
     },
     "dependencies": {
-        "echarts": "5.6.0",
+        "echarts": "6.0.0",
         "lit": "^3.3.1"
     },
     "devDependencies": {
@@ -40,8 +40,8 @@
         "eslint": "^9.29.0",
         "eslint-config-prettier": "^10.1.5",
         "json-schema-to-typescript": "^15.0.4",
-        "prettier": "^3.5.3",
-        "rollup": "^4.43.0",
+        "prettier": "^3.6.2",
+        "rollup": "^4.52.4",
         "typescript": "5.8.3"
     },
     "repository": {

package/src/default-data.json

@@ -1,5 +1,18 @@
 {
     "dataseries": [
+        {
+            "label": "Temperature",
+            "unit": "°C",
+            "precision": 1,
+            "value": 83,
+            "sections": {
+                "sectionLimits": [],
+                "backgroundColors": []
+            },
+            "advanced": {
+                "averageLatest": 1
+            }
+        },
         {
             "label": "Temperature",
             "unit": "°C",

package/src/widget-gauge.ts

@@ -45,6 +45,7 @@ export class WidgetGauge extends LitElement {
     boxes?: HTMLDivElement[]
     origWidth: number = 600
     origHeight: number = 350
+    textContainerHeight: number = 36
     template: EChartsOption
     modifier: number = 1
     version: string = 'versionplaceholder'
@@ -234,7 +235,8 @@ export class WidgetGauge extends LitElement {
 
         const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0)
         const fit = fits.find((f) => f.size === maxSize)
-        const modifier = fit?.m ?? 0
+        if (!fit) return
+        const modifier = fit.m ?? 0
 
         // console.log(
         //     'FITS count',
@@ -250,8 +252,13 @@ export class WidgetGauge extends LitElement {
         // )
         this.boxes = Array.from(this.gaugeContainer?.querySelectorAll('.chart') as NodeListOf<HTMLDivElement>)
 
+        this.gaugeContainer.style.gridTemplateColumns = `repeat(${fit.c}, 1fr)`
+
         this.boxes?.forEach((box) =>
-            box.setAttribute('style', `width:${modifier * chartW}px; height:${modifier * (chartH - 27)}px`)
+            box.setAttribute(
+                'style',
+                `width:${modifier * chartW}px; height:${modifier * (chartH - this.textContainerHeight)}px`
+            )
         )
 
         this.modifier = modifier
@@ -267,16 +274,18 @@ export class WidgetGauge extends LitElement {
         if (!this?.inputData) return
         this.inputData.dataseries
             ?.sort((a, b) => ((a.label ?? '') > (b.label ?? '') ? 1 : -1))
-            .forEach((ds) => {
+            .forEach((ds, idx) => {
                 // pivot data
                 const distincts = ds.multiChart
                     ? ([...new Set(ds.data?.map((d: Data) => d.pivot))].sort() as string[])
                     : ['']
                 distincts.forEach((piv) => {
                     const prefix = piv ?? ''
-                    const label = ds.label ?? ''
+                    let label = ds.label?.trim() ?? ''
+                    label = prefix + (!!prefix && !!label ? ' - ' : '') + label
+                    if (this.dataSets.some((ds) => ds.label === label)) label += ' ' + idx
                     const pds: any = {
-                        label: prefix + (!!prefix && !!label ? ' - ' : '') + label,
+                        label: label,
                         unit: ds.unit,
                         precision: ds.precision,
                         advanced: ds.advanced,
@@ -342,13 +351,14 @@ export class WidgetGauge extends LitElement {
             ga.data[0].value = ds.needleValue
             ga.data[0].name = ds.unit
             // unit style
-            ga.title.fontSize = 20 * modifier
+
+            ga.title.fontSize = 32 * modifier
             ga.title.color = ds.valueColor || this.themeTitleColor
             ga.title.opacity = 1
             // value style
             ga.detail.color = ds.valueColor || this.themeTitleColor
             ga.detail.opacity = 1
-            ga.detail.fontSize = 40 * modifier
+            ga.detail.fontSize = 60 * modifier
 
             ga.detail.formatter = (val: number) =>
                 isNaN(val) ? '-' : val.toFixed(Math.floor(ds.precision ?? 0))
@@ -383,7 +393,7 @@ export class WidgetGauge extends LitElement {
             ga2.axisLine.lineStyle.color = colorSections?.length
                 ? colorSections
                 : ga2.axisLine.lineStyle.color
-            ga2.axisLabel.fontSize = 20 * modifier
+            ga2.axisLabel.fontSize = 24 * modifier
             // ga2.axisLabel.color = ds.valueColor
             ga2.axisLabel.distance = -24 * modifier
             ga2.splitLine.length = 16 * modifier
@@ -402,9 +412,9 @@ export class WidgetGauge extends LitElement {
 
             const titleElement = this.canvasList.get(ds.label)?.title
             if (titleElement) {
-                titleElement.style.fontSize = String(20 * modifier) + 'px'
+                titleElement.style.fontSize = String(36 * modifier) + 'px'
                 titleElement.style.maxWidth = String(300 * modifier) + 'px'
-                titleElement.style.height = String(27 * modifier) + 'px'
+                titleElement.style.height = String(this.textContainerHeight * modifier) + 'px'
                 titleElement.textContent = ds.label ?? ''
             }
 
@@ -484,7 +494,7 @@ export class WidgetGauge extends LitElement {
             align-items: center;
         }
         .gauge-container {
-            display: flex;
+            display: grid;
             flex: 1;
             justify-content: center;
             align-items: center;
@@ -504,6 +514,7 @@ export class WidgetGauge extends LitElement {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
+            line-height: 1;
         }
         p {
             margin: 10px 0 0 0;