@record-evolution/widget-gauge 1.6.9 → 1.6.11

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.6.9",
+    "version": "1.6.11",
     "type": "module",
     "main": "dist/widget-gauge.js",
     "types": "dist/src/widget-gauge.d.ts",
@@ -13,7 +13,7 @@
     ],
     "scripts": {
         "analyze": "cem analyze --litelement",
-        "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+        "start": "concurrently -k -r \"npm run watch\" \"wds\"",
         "build": "rollup -c rollup.config.js",
         "watch": "rollup -w -c rollup.config.js",
         "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-gauge",
@@ -21,35 +21,29 @@
         "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
         "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",
         "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore && prettier \"**/*.ts\" --write --ignore-path .gitignore",
-        "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
+        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
     },
     "dependencies": {
-        "echarts": "^5.5.1",
-        "lit": "^3.2.0"
+        "echarts": "5.6.0",
+        "lit": "^3.3.0"
     },
     "devDependencies": {
-        "@custom-elements-manifest/analyzer": "^0.10.3",
+        "@custom-elements-manifest/analyzer": "^0.10.4",
         "@rollup/plugin-babel": "^6.0.4",
-        "@rollup/plugin-commonjs": "^28.0.0",
-        "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-replace": "^6.0.1",
-        "@rollup/plugin-typescript": "^12.1.0",
-        "@typescript-eslint/eslint-plugin": "^8.8.0",
-        "@typescript-eslint/parser": "^8.8.0",
+        "@rollup/plugin-commonjs": "^28.0.3",
+        "@rollup/plugin-node-resolve": "^16.0.1",
+        "@rollup/plugin-replace": "^6.0.2",
+        "@rollup/plugin-typescript": "^12.1.2",
+        "@typescript-eslint/eslint-plugin": "^8.34.0",
+        "@typescript-eslint/parser": "^8.34.0",
         "@web/dev-server": "^0.4.6",
-        "concurrently": "^9.0.1",
-        "deepmerge": "^4.3.1",
-        "es-dev-server": "^2.1.0",
-        "eslint": "^9.11.1",
-        "eslint-config-prettier": "^9.1.0",
-        "husky": "^9.1.6",
-        "json-schema-to-typescript": "^15.0.2",
-        "lint-staged": "^15.2.10",
-        "prettier": "^3.3.3",
-        "rimraf": "^6.0.1",
-        "rollup": "^4.24.0",
-        "tslib": "^2.7.0",
-        "typescript": "5.3.2"
+        "concurrently": "^9.1.2",
+        "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",
+        "typescript": "5.8.3"
     },
     "repository": {
         "type": "git",

package/src/default-data.json

@@ -1,10 +1,11 @@
 {
-    "settings": {},
+    "title": "Demo Gauge",
+    "subTitle": "A simple gauge demo",
     "dataseries": [
         {
             "label": "Demo Gauge Temperature",
             "unit": "°C",
-            "valueColor": "black",
+            "precision": 1,
             "data": [
                 {
                     "value": 90
@@ -21,7 +22,6 @@
         {
             "label": "Demo Gauge Pascal",
             "unit": "Pa",
-            "valueColor": "green",
             "data": [
                 {
                     "value": 79

package/src/definition-schema.d.ts

@@ -12,6 +12,10 @@ export type Label = string;
  * The unit of the values. e.g. °C or km/h
  */
 export type Unit = string;
+/**
+ * The number of decimal places to show in the value. If not specified, precision is 0.
+ */
+export type Precision = number;
 /**
  * This should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. Will only be used to detect data age of data.
  */
@@ -22,7 +26,7 @@ export type Value = number;
  */
 export type SplitDataBy = string;
 /**
- * The data used to draw this gauge.
+ * Provide a list of values. Only the latest value is shown in the gauge unless you configure "Advanced Settings" below or use split data.
  */
 export type Data = {
   tsp?: Timestamp;
@@ -47,11 +51,12 @@ export type AverageLatestValues = number;
 /**
  * If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.
  */
-export type MaximumLatency = number;
+export type MaximumLatencyInSeconds = number;
 export type Gauges = {
   label?: Label;
   valueColor?: ValueColor;
   unit?: Unit;
+  precision?: Precision;
   data?: Data;
   sections?: GaugeColorSections;
   advanced?: AdvancedConfiguration;
@@ -74,6 +79,6 @@ export interface GaugeColorSections {
 }
 export interface AdvancedConfiguration {
   averageLatest?: AverageLatestValues;
-  maxLatency?: MaximumLatency;
+  maxLatency?: MaximumLatencyInSeconds;
   [k: string]: unknown;
 }

package/src/definition-schema.json

@@ -35,9 +35,16 @@
                         "title": "Unit",
                         "description": "The unit of the values. e.g. °C or km/h",
                         "type": "string",
-                        "dataDrivenDisabled": true,
+                        "dataDrivenDisabled": false,
                         "order": 3
                     },
+                    "precision": {
+                        "title": "Precision",
+                        "description": "The number of decimal places to show in the value. If not specified, precision is 0.",
+                        "type": "number",
+                        "dataDrivenDisabled": false,
+                        "order": 4
+                    },
                     "data": {
                         "title": "Data",
                         "description": "Provide a list of values. Only the latest value is shown in the gauge unless you configure \"Advanced Settings\" below or use split data.",
@@ -111,7 +118,7 @@
                                 "order": 6
                             },
                             "maxLatency": {
-                                "title": "Maximum Latency",
+                                "title": "Maximum Latency in seconds",
                                 "description": "If you provide timestamp data, the delivered value is only shown in the gauge when the age of the data is not older than the given maximum Latency in seconds.",
                                 "type": "number",
                                 "dataDrivenDisabled": true,

package/src/widget-gauge.ts

@@ -1,25 +1,42 @@
 import { html, css, LitElement, PropertyValueMap } from 'lit'
-import { property, state } from 'lit/decorators.js'
-// import * as echarts from 'echarts'
-import type { EChartsOption, GaugeSeriesOption } from 'echarts'
+import { customElement, property, state } from 'lit/decorators.js'
 import { GaugeChartConfiguration } from './definition-schema.js'
 
-// echarts.use([GaugeChart, CanvasRenderer]);
+import * as echarts from 'echarts/core'
+import { TooltipComponent } from 'echarts/components'
+import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+echarts.use([TooltipComponent, GaugeChart, CanvasRenderer])
 
 type Dataseries = Exclude<GaugeChartConfiguration['dataseries'], undefined>[number]
 type Data = Exclude<Dataseries['data'], undefined>[number]
 
+@customElement('widget-gauge-versionplaceholder')
 export class WidgetGauge extends LitElement {
     @property({ type: Object })
     inputData?: GaugeChartConfiguration
 
+    @property({ type: Object })
+    themeObject?: any
+
+    @property({ type: String })
+    themeName: string = 'light'
+
     @state()
     private dataSets: Dataseries[] = []
 
     @state()
     private canvasList: any = {}
 
+    @state()
+    private themeBgColor: string = '#fff'
+
+    @state()
+    private themeColor: string = '#000'
+
     private resizeObserver: ResizeObserver
+
     boxes?: HTMLDivElement[]
     origWidth: number = 0
     origHeight: number = 0
@@ -27,6 +44,7 @@ export class WidgetGauge extends LitElement {
     modifier: number = 1
     version: string = 'versionplaceholder'
     gaugeContainer: HTMLDivElement | null | undefined
+
     constructor() {
         super()
         this.resizeObserver = new ResizeObserver(this.adjustSizes.bind(this))
@@ -46,7 +64,7 @@ export class WidgetGauge extends LitElement {
                     endAngle: 0,
                     min: 33,
                     max: 99,
-                    radius: '121%',
+                    radius: '140%',
                     center: ['50%', '90%'],
                     progress: {
                         show: true,
@@ -70,12 +88,15 @@ export class WidgetGauge extends LitElement {
                         color: 'inherit'
                     },
                     title: {
+                        text: 'Gauge A',
                         offsetCenter: [0, '-35%'],
-                        fontSize: 20
+                        fontSize: 20,
+                        show: true
                     },
                     data: [
                         {
-                            value: 70
+                            value: 70,
+                            name: 'nASDf'
                         }
                     ]
                 } as GaugeSeriesOption,
@@ -85,7 +106,7 @@ export class WidgetGauge extends LitElement {
                     endAngle: 0,
                     min: 33,
                     max: 99,
-                    radius: '125%',
+                    radius: '145%',
                     center: ['50%', '90%'],
                     axisLine: {
                         lineStyle: {
@@ -106,6 +127,12 @@ export class WidgetGauge extends LitElement {
                             color: 'auto'
                         }
                     },
+                    title: {
+                        text: 'Gauge B',
+                        offsetCenter: [0, '-35%'],
+                        fontSize: 20,
+                        show: false
+                    },
                     axisLabel: {
                         distance: -20,
                         color: '#666',
@@ -124,29 +151,42 @@ export class WidgetGauge extends LitElement {
         }
     }
 
-    update(changedProperties: Map<string, any>) {
-        changedProperties.forEach((oldValue, propName) => {
-            if (propName === 'inputData' && this.gaugeContainer) {
-                this.transformData()
-                this.adjustSizes()
-            }
-        })
+    update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
+        if (changedProperties.has('inputData') && this.gaugeContainer) {
+            this.transformData()
+        }
 
+        if (changedProperties.has('themeObject')) {
+            this.registerTheme(this.themeObject)
+        }
+
+        if (changedProperties.has('themeName')) {
+            this.deleteCharts()
+            this.setupCharts()
+        }
         super.update(changedProperties)
     }
 
     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')
-        this.sizingSetup()
         this.transformData()
-        this.adjustSizes()
+    }
+
+    registerTheme(themeObject: any) {
+        if (!themeObject) return
+        if (typeof themeObject === 'string') {
+            return
+        }
+        echarts.registerTheme(this.themeName, this.themeObject)
     }
 
     sizingSetup() {
         if (this.origWidth !== 0 && this.origHeight !== 0) return
 
-        this.boxes = Array.from(this?.shadowRoot?.querySelectorAll('.chart') as NodeListOf<HTMLDivElement>)
+        this.boxes =
+            Array.from(this?.shadowRoot?.querySelectorAll('.chart-wrapper') as NodeListOf<HTMLDivElement>) ??
+            []
         if (!this.boxes.length) return
         this.origWidth =
             this.boxes?.map((b) => b.getBoundingClientRect().width).reduce((p, c) => (c > p ? c : p), 0) ?? 0
@@ -161,26 +201,26 @@ export class WidgetGauge extends LitElement {
         const userHeight = this.gaugeContainer.getBoundingClientRect().height
         const count = this.dataSets.length
 
-        const width = this.origWidth
-        const height = this.origHeight
-        if (!userHeight || !userWidth || !width || !height) return
+        const chartW = this.origWidth
+        const chartH = this.origHeight
+        if (!userHeight || !userWidth || !chartW || !chartH) return
         const fits = []
         for (let c = 1; c <= count; c++) {
             const r = Math.ceil(count / c)
-            const uwgap = userWidth - 12 * (c - 1)
-            const uhgap = userHeight - 12 * (r - 1)
-            const m = uwgap / width / c
-            const size = m * m * width * height * count
-            if (r * m * height <= uhgap) fits.push({ c, r, m, size, uwgap, uhgap })
+            const netWidth = userWidth - 24 * (c - 1) // subtract the gaps between the charts
+            const netHeight = userHeight - 24 * (r - 1)
+            const m = netWidth / chartW / c // modifying factor to make it fit
+            const size = m * m * chartW * chartH * count // screen space used by charts overall
+            if (r * m * chartH <= netHeight) fits.push({ c, r, m, size, uwgap: netWidth, uhgap: netHeight })
         }
 
         for (let r = 1; r <= count; r++) {
             const c = Math.ceil(count / r)
-            const uwgap = userWidth - 12 * (c - 1)
-            const uhgap = userHeight - 12 * (r - 1)
-            const m = uhgap / height / r
-            const size = m * m * width * height * count
-            if (c * m * width <= uwgap) fits.push({ c, r, m, size, uwgap, uhgap })
+            const netWidth = userWidth - 24 * (c - 1)
+            const netHeight = userHeight - 24 * (r - 1)
+            const m = netHeight / chartH / r
+            const size = m * m * chartW * chartH * count
+            if (c * m * chartW <= netWidth) fits.push({ c, r, m, size, uwgap: netWidth, uhgap: netHeight })
         }
 
         const maxSize = fits.reduce((p, c) => (c.size < p ? p : c.size), 0)
@@ -202,39 +242,45 @@ 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 * width}px; height:${modifier * height}px`)
+            box.setAttribute('style', `width:${modifier * chartW}px; height:${modifier * (chartH - 25)}px`)
         )
 
         this.modifier = modifier
 
         for (const canvas in this.canvasList) {
-            this.canvasList[canvas].resize()
+            this.canvasList[canvas].echart.resize()
         }
         this.applyData()
     }
 
     async transformData() {
-        if (!this?.inputData) return
+        // console.log('Transforming data', this.inputData?.dataseries)
         this.dataSets = []
-        this.inputData.dataseries?.forEach((ds) => {
-            // pivot data
-            const distincts = [...new Set(ds?.data?.map((d: Data) => d.pivot))]
-
-            distincts.forEach((piv) => {
-                const prefix = piv ? `${piv} - ` : ''
-                const pds: any = {
-                    label: prefix + `${ds.label ?? ''}`,
-                    unit: ds.unit,
-                    advanced: ds.advanced,
-                    valueColor: ds.valueColor,
-                    sections: ds.sections,
-                    data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
-                }
-                this.dataSets.push(pds)
+        if (!this?.inputData) return
+        this.inputData.dataseries
+            ?.sort((a, b) => ((a.label ?? '') > (b.label ?? '') ? 1 : -1))
+            .forEach((ds) => {
+                // pivot data
+                const distincts = [...new Set(ds?.data?.map((d: Data) => d.pivot))]
+
+                distincts.forEach((piv) => {
+                    const prefix = piv ?? ''
+                    const label = ds.label ?? ''
+                    const pds: any = {
+                        label: prefix + (!!prefix && !!label ? ' - ' : '') + label,
+                        unit: ds.unit,
+                        precision: ds.precision,
+                        advanced: ds.advanced,
+                        valueColor: ds.valueColor,
+                        sections: ds.sections,
+                        data: distincts.length === 1 ? ds.data : ds?.data?.filter((d) => d.pivot === piv)
+                    }
+                    this.dataSets.push(pds)
+                })
             })
-        })
 
         this.setupCharts()
+        this.adjustSizes()
     }
 
     applyData() {
@@ -265,13 +311,13 @@ export class WidgetGauge extends LitElement {
             ds.ranges = ds.sections?.sectionLimits?.map((v, i, a) => v - (a?.[i - 1] ?? 0)).slice(1) ?? []
 
             // const option = this.canvasList[ds.label].getOption()
-            const option = structuredClone(this.template)
+            const option = window.structuredClone(this.template)
             const ga = option.series[0],
                 ga2 = option.series[1]
 
             // Title
             option.title.text = ds.label
-            option.title.textStyle.fontSize = 32 * modifier
+            option.title.textStyle.fontSize = 25 * modifier
 
             // Needle
             // Check age of data Latency
@@ -283,11 +329,12 @@ export class WidgetGauge extends LitElement {
 
             ga.data[0].value = ds.needleValue
             ga.data[0].name = ds.unit
-            ga.title.fontSize = 32 * modifier
-            ga.title.color = ds.valueColor ?? 'black'
-            ga.detail.color = ds.valueColor ?? 'black'
-            ga.detail.fontSize = 60 * modifier
-            ga.detail.formatter = (val: number) => (isNaN(val) ? '-' : val.toFixed(0))
+            ga.title.fontSize = 25 * modifier
+            ga.title.color = ds.valueColor ?? this.themeColor
+            ga.detail.color = ds.valueColor ?? this.themeColor
+            ga.detail.fontSize = 40 * modifier
+            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
 
@@ -313,21 +360,29 @@ export class WidgetGauge extends LitElement {
             ga2.splitLine.distance = -16 * modifier
 
             // Progress
-            let progressColor =
-                ds.sections?.backgroundColors?.[ds.sections?.backgroundColors.length - 1] ?? 'green'
+            let progressColor = ds.sections?.backgroundColors?.[ds.sections?.backgroundColors.length - 1]
             for (const [i, s] of ds.sections?.sectionLimits?.entries() ?? []) {
                 if (s > (ds.needleValue as number)) {
                     progressColor =
-                        ds.sections?.backgroundColors?.[i - 1] ??
-                        ds.sections?.backgroundColors?.[0] ??
-                        'green'
+                        ds.sections?.backgroundColors?.[i - 1] ?? ds.sections?.backgroundColors?.[0]
                     break
                 }
             }
             ga.progress.itemStyle.color = progressColor
-            ga.progress.width = 80 * modifier
+            ga.progress.width = 60 * modifier
             // Apply
-            this.canvasList[ds.label ?? '']?.setOption(option)
+            this.canvasList[ds.label ?? ''].title.style.fontSize = String(20 * modifier) + 'px'
+            this.canvasList[ds.label ?? ''].title.style.maxWidth = String(300 * modifier) + 'px'
+            this.canvasList[ds.label ?? ''].title.style.height = String(25 * modifier) + 'px'
+            this.canvasList[ds.label ?? '']?.echart.setOption(option)
+        }
+    }
+
+    deleteCharts() {
+        for (const label in this.canvasList) {
+            this.canvasList[label].echart.dispose()
+            this.canvasList[label].wrapper?.remove()
+            delete this.canvasList[label]
         }
     }
 
@@ -336,26 +391,38 @@ export class WidgetGauge extends LitElement {
         for (const label in this.canvasList) {
             const ex = this.dataSets.find((ds) => ds.label === label)
             if (!ex) {
+                this.canvasList[label].echart.dispose()
+                this.canvasList[label].wrapper?.remove()
                 delete this.canvasList[label]
-                const containerDiv = this.gaugeContainer?.querySelector(`[name="${label}"]`)
-                containerDiv?.remove()
             }
         }
 
         this.dataSets.forEach((ds) => {
             if (this.canvasList[ds.label ?? '']) return
+            const newWrapper = document.createElement('div')
+            newWrapper.setAttribute('class', 'chart-wrapper')
+            const newTitle = document.createElement('h3')
+            newTitle.textContent = ds.label ?? ''
+            newTitle.style.fontSize = '20px'
             const newCanvas = document.createElement('div')
             newCanvas.setAttribute('name', ds.label ?? '')
             newCanvas.setAttribute('class', 'chart')
             newCanvas.setAttribute(
                 'style',
-                `min-width: 600px; min-height: 400px; width: 600px; height: 400px;`
+                `min-width: 600px; min-height: 250px; width: 600px; height: 250px;`
             )
 
-            this.gaugeContainer!.appendChild(newCanvas)
-            // @ts-ignore
-            this.canvasList[ds.label ?? ''] = echarts.init(newCanvas)
-            this.canvasList[ds.label ?? ''].setOption(structuredClone(this.template))
+            newWrapper!.appendChild(newTitle)
+            newWrapper!.appendChild(newCanvas)
+            this.gaugeContainer!.appendChild(newWrapper)
+
+            const newChart = echarts.init(newCanvas, this.themeName)
+            this.canvasList[ds.label ?? ''] = { echart: newChart, title: newTitle, wrapper: newWrapper }
+            // this.canvasList[ds.label ?? ''].setOption(structuredClone(this.template))
+            //@ts-ignore
+            this.themeBgColor = newChart._theme.backgroundColor ?? '#fff'
+            //@ts-ignore
+            this.themeColor = newChart._theme.gauge?.title?.color ?? '#000'
         })
         this.sizingSetup()
     }
@@ -381,6 +448,14 @@ export class WidgetGauge extends LitElement {
             width: 100%;
             padding: 16px;
             box-sizing: border-box;
+            color: var(--re-text-color, #000);
+            gap: 12px;
+        }
+
+        .chart-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
         .gauge-container {
             display: flex;
@@ -390,13 +465,12 @@ export class WidgetGauge extends LitElement {
             flex-wrap: wrap;
             overflow: hidden;
             position: relative;
-            gap: 12px;
+            gap: 24px;
         }
 
         header {
             display: flex;
             flex-direction: column;
-            margin: 0 0 16px 0;
         }
         h3 {
             margin: 0;
@@ -404,7 +478,6 @@ export class WidgetGauge extends LitElement {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--re-text-color, #000) !important;
         }
         p {
             margin: 10px 0 0 0;
@@ -414,12 +487,11 @@ export class WidgetGauge extends LitElement {
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-            color: var(--re-text-color, #000) !important;
         }
 
         .chart {
             width: 600px; /* will be overriden by adjustSizes */
-            height: 400px;
+            height: 230px;
         }
 
         .no-data {
@@ -436,7 +508,7 @@ export class WidgetGauge extends LitElement {
 
     render() {
         return html`
-            <div class="wrapper">
+            <div class="wrapper" style="background-color: ${this.themeBgColor}; color: ${this.themeColor}">
                 <header class="paging" ?active=${this.inputData?.title || this.inputData?.subTitle}>
                     <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
                     <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
@@ -447,5 +519,3 @@ export class WidgetGauge extends LitElement {
         `
     }
 }
-
-window.customElements.define('widget-gauge-versionplaceholder', WidgetGauge)