@record-evolution/widget-gauge 1.7.1 → 1.7.3

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.7.1",
+    "version": "1.7.3",
     "type": "module",
     "main": "dist/widget-gauge.js",
     "types": "dist/src/widget-gauge.d.ts",
@@ -19,8 +19,6 @@
         "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-gauge",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-gauge && npm i @record-evolution/widget-gauge",
         "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > 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 run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
     },
     "dependencies": {

package/src/widget-gauge.ts

@@ -5,36 +5,37 @@ import { GaugeChartConfiguration } from './definition-schema.js'
 import * as echarts from 'echarts/core'
 import { TooltipComponent } from 'echarts/components'
 import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
-import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+import { CanvasRenderer } from 'echarts/renderers'
 import { EChartsOption, SeriesOption } from 'echarts'
 
 echarts.use([TooltipComponent, GaugeChart, CanvasRenderer])
 
 type Dataseries = Exclude<GaugeChartConfiguration['dataseries'], undefined>[number]
 type Data = Exclude<Dataseries['data'], undefined>[number]
-
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
 @customElement('widget-gauge-versionplaceholder')
 export class WidgetGauge extends LitElement {
     @property({ type: Object })
     inputData?: GaugeChartConfiguration
 
     @property({ type: Object })
-    themeObject?: any
-
-    @property({ type: String })
-    themeName?: string
+    theme?: Theme
 
     @state()
     private dataSets: Dataseries[] = []
 
     @state()
-    private canvasList: any = {}
-
-    @state()
-    private themeBgColor?: string
+    private canvasList: Map<
+        string,
+        { echart?: echarts.ECharts; title?: HTMLHeadingElement; wrapper?: HTMLDivElement }
+    > = new Map()
 
-    @state()
-    private themeColor?: string
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
 
     private resizeObserver: ResizeObserver
 
@@ -48,7 +49,10 @@ export class WidgetGauge extends LitElement {
 
     constructor() {
         super()
-        this.resizeObserver = new ResizeObserver(this.adjustSizes.bind(this))
+        this.resizeObserver = new ResizeObserver(() => {
+            this.adjustSizes()
+            this.applyData()
+        })
 
         this.template = {
             title: {
@@ -156,16 +160,20 @@ export class WidgetGauge extends LitElement {
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         if (changedProperties.has('inputData') && this.gaugeContainer) {
             this.transformData()
+            this.setupCharts()
+            this.sizingSetup()
+            this.adjustSizes()
+            this.applyData()
         }
 
-        if (changedProperties.has('themeObject')) {
-            this.registerTheme(this.themeName, this.themeObject)
-        }
-
-        if (changedProperties.has('themeName')) {
-            this.registerTheme(this.themeName, this.themeObject)
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
             this.deleteCharts()
+            this.transformData()
             this.setupCharts()
+            this.sizingSetup()
+            this.adjustSizes()
+            this.applyData()
         }
         super.update(changedProperties)
     }
@@ -174,12 +182,23 @@ export class WidgetGauge extends LitElement {
         this.resizeObserver.observe(this.shadowRoot?.querySelector('.wrapper') as HTMLDivElement)
         this.gaugeContainer = this.shadowRoot?.querySelector('.gauge-container')
         this.transformData()
+        this.setupCharts()
+        this.sizingSetup()
+        this.adjustSizes()
+        this.applyData()
     }
 
-    registerTheme(themeName?: string, themeObject?: any) {
-        if (!themeObject || !themeName) return
-
-        echarts.registerTheme(themeName, this.themeObject)
+    registerTheme(theme?: Theme) {
+        console.log('Registering theme', theme)
+        if (!theme || !theme.theme_object || !theme.theme_name) return
+
+        echarts.registerTheme(theme.theme_name, theme.theme_object)
+        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
+        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-background-color').trim()
+        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
+        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+        this.themeSubtitleColor =
+            cssTextColor || this.theme?.theme_object?.title?.subtextStyle?.color || this.themeTitleColor
     }
 
     sizingSetup() {
@@ -248,10 +267,9 @@ export class WidgetGauge extends LitElement {
 
         this.modifier = modifier
 
-        for (const canvas in this.canvasList) {
-            this.canvasList[canvas].echart.resize()
-        }
-        this.applyData()
+        this.canvasList.forEach((canvasObj) => {
+            canvasObj.echart?.resize()
+        })
     }
 
     async transformData() {
@@ -279,12 +297,10 @@ export class WidgetGauge extends LitElement {
                     this.dataSets.push(pds)
                 })
             })
-
-        this.setupCharts()
-        this.adjustSizes()
     }
 
     applyData() {
+        if (!this.gaugeContainer) return
         const modifier = this.modifier
         this.dataSets.forEach((d) => {
             d.label ??= ''
@@ -312,7 +328,7 @@ export class WidgetGauge extends LitElement {
             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 option = this.canvasList[ds.label].getOption()
+            // const option = this.canvasList.get(ds.label)?.echart.getOption()
             const option = window.structuredClone(this.template)
             const seriesArr = option.series as GaugeSeriesOption[]
             const ga: any = seriesArr?.[0],
@@ -329,8 +345,8 @@ export class WidgetGauge extends LitElement {
             ga.data[0].value = ds.needleValue
             ga.data[0].name = ds.unit
             ga.title.fontSize = 25 * modifier
-            ga.title.color = ds.valueColor ?? this.themeColor
-            ga.detail.color = ds.valueColor ?? this.themeColor
+            ga.title.color = ds.valueColor ?? this.themeTitleColor
+            ga.detail.color = ds.valueColor ?? this.themeTitleColor
             ga.detail.fontSize = 40 * modifier
             ga.detail.formatter = (val: number) =>
                 isNaN(val) ? '-' : val.toFixed(Math.floor(ds.precision ?? 0))
@@ -370,37 +386,39 @@ export class WidgetGauge extends LitElement {
             ga.progress.itemStyle.color = progressColor
             ga.progress.width = 60 * modifier
             // Apply
-            const titleElement = this.canvasList[ds.label]?.title
-            titleElement.style.fontSize = String(20 * modifier) + 'px'
-            titleElement.style.maxWidth = String(300 * modifier) + 'px'
-            titleElement.style.height = String(25 * modifier) + 'px'
-            titleElement.textContent = ds.label ?? ''
+            const titleElement = this.canvasList.get(ds.label)?.title
+            if (titleElement) {
+                titleElement.style.fontSize = String(20 * modifier) + 'px'
+                titleElement.style.maxWidth = String(300 * modifier) + 'px'
+                titleElement.style.height = String(25 * modifier) + 'px'
+                titleElement.textContent = ds.label ?? ''
+            }
 
-            this.canvasList[ds.label]?.echart.setOption(option)
+            this.canvasList.get(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]
-        }
+        this.canvasList.forEach((canvasObj, label) => {
+            canvasObj.echart?.dispose()
+            canvasObj.wrapper?.remove()
+        })
+        this.canvasList.clear()
     }
 
     setupCharts() {
+        if (!this.gaugeContainer) return
         // remove the gauge canvases of non provided data series
-        for (const label in this.canvasList) {
+        this.canvasList.forEach((canvasObj, label) => {
             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]
+                canvasObj.echart?.dispose()
+                canvasObj.wrapper?.remove()
+                this.canvasList.delete(label)
             }
-        }
+        })
 
         this.dataSets.forEach((ds) => {
-            if (this.canvasList[ds.label ?? '']) return
+            if (this.canvasList.has(ds.label ?? '')) return
             const newWrapper = document.createElement('div')
             newWrapper.setAttribute('class', 'chart-wrapper')
             const newTitle = document.createElement('h3')
@@ -417,21 +435,14 @@ export class WidgetGauge extends LitElement {
             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
-            //@ts-ignore
-            this.themeColor = newChart?._theme?.gauge?.title?.color
+            const newChart = echarts.init(newCanvas, this.theme?.theme_name)
+            this.canvasList.set(ds.label ?? '', { echart: newChart, title: newTitle, wrapper: newWrapper })
         })
-        this.sizingSetup()
     }
 
     static styles = css`
         :host {
             display: block;
-            color: var(--re-text-color, #000);
             font-family: sans-serif;
             box-sizing: border-box;
             position: relative;
@@ -449,7 +460,6 @@ export class WidgetGauge extends LitElement {
             width: 100%;
             padding: 16px;
             box-sizing: border-box;
-            color: var(--re-text-color, #000);
             gap: 12px;
         }
 
@@ -497,7 +507,6 @@ export class WidgetGauge extends LitElement {
 
         .no-data {
             font-size: 20px;
-            color: var(--re-text-color, #000);
             display: flex;
             height: 100%;
             width: 100%;
@@ -509,10 +518,19 @@ export class WidgetGauge extends LitElement {
 
     render() {
         return html`
-            <div class="wrapper" style="background-color: ${this.themeBgColor}; color: ${this.themeColor}">
+            <div
+                class="wrapper"
+                style="background-color: ${this.themeBgColor}; color: ${this.themeTitleColor}"
+            >
                 <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>
+                    <p
+                        class="paging"
+                        ?active=${this.inputData?.subTitle}
+                        style="color: ${this.themeSubtitleColor}"
+                    >
+                        ${this.inputData?.subTitle}
+                    </p>
                 </header>
                 <div class="paging no-data" ?active=${!this.dataSets.length}>No Data</div>
                 <div class="gauge-container"></div>