@record-evolution/widget-gauge 1.7.17 → 1.7.19

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.7.17",
+    "version": "1.7.19",
     "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

@@ -4,11 +4,7 @@
             "label": "Temperature",
             "unit": "°C",
             "precision": 1,
-            "data": [
-                {
-                    "value": 83
-                }
-            ],
+            "value": 83,
             "sections": {
                 "sectionLimits": [],
                 "backgroundColors": []

package/src/widget-gauge.ts

@@ -1,5 +1,5 @@
-import { html, css, LitElement, PropertyValueMap } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
+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 * as echarts from 'echarts/core'
@@ -37,15 +37,17 @@ export class WidgetGauge extends LitElement {
     @state() private themeTitleColor?: string
     @state() private themeSubtitleColor?: string
 
+    @query('.gauge-container') private gaugeContainer?: HTMLDivElement
+    @query('.wrapper') private wrapper?: HTMLDivElement
+
     private resizeObserver: ResizeObserver
 
     boxes?: HTMLDivElement[]
-    origWidth: number = 0
-    origHeight: number = 0
+    origWidth: number = 600
+    origHeight: number = 350
     template: EChartsOption
     modifier: number = 1
     version: string = 'versionplaceholder'
-    gaugeContainer: HTMLDivElement | null | undefined
 
     constructor() {
         super()
@@ -160,9 +162,6 @@ export class WidgetGauge extends LitElement {
         if (changedProperties.has('inputData') && this.gaugeContainer) {
             this.transformData()
             this.setupCharts()
-            this.sizingSetup()
-            this.adjustSizes()
-            this.applyData()
         }
 
         if (changedProperties.has('theme')) {
@@ -170,20 +169,24 @@ export class WidgetGauge extends LitElement {
             this.deleteCharts()
             this.transformData()
             this.setupCharts()
-            this.sizingSetup()
             this.adjustSizes()
             this.applyData()
         }
         super.update(changedProperties)
     }
 
+    protected updated(changedProperties: PropertyValues): void {
+        if (changedProperties.has('inputData') && this.gaugeContainer) {
+            this.adjustSizes()
+            this.applyData()
+        }
+    }
+
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
-        this.resizeObserver.observe(this.shadowRoot?.querySelector('.wrapper') as HTMLDivElement)
-        this.gaugeContainer = this.shadowRoot?.querySelector('.gauge-container')
+        if (this.wrapper) this.resizeObserver.observe(this.wrapper)
         this.registerTheme(this.theme)
         this.transformData()
         this.setupCharts()
-        this.sizingSetup()
         this.adjustSizes()
         this.applyData()
     }
@@ -197,23 +200,9 @@ export class WidgetGauge extends LitElement {
             cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
 
         if (!theme || !theme.theme_object || !theme.theme_name) return
-
         echarts.registerTheme(theme.theme_name, theme.theme_object)
     }
 
-    sizingSetup() {
-        if (this.origWidth !== 0 && this.origHeight !== 0) return
-
-        this.boxes =
-            Array.from(this?.shadowRoot?.querySelectorAll('.chart-wrapper') as NodeListOf<HTMLDivElement>) ??
-            []
-        if (!this.boxes.length) return
-        this.origWidth = 600
-        // this.boxes?.map((b) => b.getBoundingClientRect().width).reduce((p, c) => (c > p ? c : p), 0) ?? 0
-        this.origHeight = 230
-        // this.boxes?.map((b) => b.getBoundingClientRect().height).reduce((p, c) => (c > p ? c : p), 0) ?? 0
-    }
-
     adjustSizes() {
         // if (!this.origHeight) return
         if (!this.gaugeContainer) return
@@ -245,7 +234,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',
@@ -259,7 +249,9 @@ export class WidgetGauge extends LitElement {
         //     (userWidth * userHeight).toFixed(0),
         //     this.boxes
         // )
-        this.boxes = Array.from(this?.shadowRoot?.querySelectorAll('.chart') as NodeListOf<HTMLDivElement>)
+        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`)
@@ -278,15 +270,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 = [...new Set(ds?.data?.map((d: Data) => d.pivot))]
-
+                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,
@@ -309,7 +304,6 @@ export class WidgetGauge extends LitElement {
         })
 
         this.dataSets.sort((a, b) => ((a.label as string) > (b.label as string) ? 1 : -1))
-        this.requestUpdate()
 
         for (const ds of this.dataSets) {
             // compute derivative values
@@ -354,10 +348,10 @@ export class WidgetGauge extends LitElement {
             ga.data[0].name = ds.unit
             // unit style
             ga.title.fontSize = 20 * modifier
-            ga.title.color = ds.valueColor ?? this.themeTitleColor
+            ga.title.color = ds.valueColor || this.themeTitleColor
             ga.title.opacity = 1
             // value style
-            ga.detail.color = ds.valueColor ?? this.themeTitleColor
+            ga.detail.color = ds.valueColor || this.themeTitleColor
             ga.detail.opacity = 1
             ga.detail.fontSize = 40 * modifier
 
@@ -454,7 +448,7 @@ export class WidgetGauge extends LitElement {
             newCanvas.setAttribute('class', 'chart')
             newCanvas.setAttribute(
                 'style',
-                `min-width: 600px; min-height: 250px; width: 600px; height: 250px;`
+                `min-width: ${this.origWidth}; min-height: ${this.origHeight}; width: ${this.origWidth}; height: ${this.origHeight};`
             )
 
             newWrapper!.appendChild(newTitle)
@@ -495,7 +489,7 @@ export class WidgetGauge extends LitElement {
             align-items: center;
         }
         .gauge-container {
-            display: flex;
+            display: grid;
             flex: 1;
             justify-content: center;
             align-items: center;
@@ -526,11 +520,6 @@ export class WidgetGauge extends LitElement {
             white-space: nowrap;
         }
 
-        .chart {
-            width: 600px; /* will be overriden by adjustSizes */
-            height: 230px;
-        }
-
         .no-data {
             font-size: 20px;
             display: flex;