@record-evolution/widget-gauge 1.6.11 → 1.7.2

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.6.11",
+    "version": "1.7.2",
     "type": "module",
     "main": "dist/widget-gauge.js",
     "types": "dist/src/widget-gauge.d.ts",
@@ -16,9 +16,9 @@
         "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",
+        "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 > src/definition-schema.d.ts",
+        "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"

package/src/definition-schema.d.ts

@@ -29,10 +29,10 @@ export type SplitDataBy = string;
  * 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;
-  value?: Value;
-  pivot?: SplitDataBy;
-  [k: string]: unknown;
+    tsp?: Timestamp;
+    value?: Value;
+    pivot?: SplitDataBy;
+    [k: string]: unknown;
 }[];
 /**
  * The limits of the gauge sections. Starting from the min value, ending with the max value.
@@ -42,7 +42,7 @@ export type SectionLimits = number[];
  * Background color for each section. This Array is one shorter than the number of sections.
  */
 export type SectionBackgroundColors = {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }[];
 /**
  * Calculate the average over the given number of newest values. (If you use 'split by', then per each of the split dataseries.) If not specified then the latest value is shown without modification.
@@ -53,32 +53,32 @@ export type AverageLatestValues = number;
  */
 export type MaximumLatencyInSeconds = number;
 export type Gauges = {
-  label?: Label;
-  valueColor?: ValueColor;
-  unit?: Unit;
-  precision?: Precision;
-  data?: Data;
-  sections?: GaugeColorSections;
-  advanced?: AdvancedConfiguration;
-  [k: string]: unknown;
+    label?: Label;
+    valueColor?: ValueColor;
+    unit?: Unit;
+    precision?: Precision;
+    data?: Data;
+    sections?: GaugeColorSections;
+    advanced?: AdvancedConfiguration;
+    [k: string]: unknown;
 }[];
 
 export interface GaugeChartConfiguration {
-  title?: Title;
-  subTitle?: Subtitle;
-  dataseries?: Gauges;
-  [k: string]: unknown;
+    title?: Title;
+    subTitle?: Subtitle;
+    dataseries?: Gauges;
+    [k: string]: unknown;
 }
 export interface ValueColor {
-  [k: string]: unknown;
+    [k: string]: unknown;
 }
 export interface GaugeColorSections {
-  sectionLimits?: SectionLimits;
-  backgroundColors?: SectionBackgroundColors;
-  [k: string]: unknown;
+    sectionLimits?: SectionLimits;
+    backgroundColors?: SectionBackgroundColors;
+    [k: string]: unknown;
 }
 export interface AdvancedConfiguration {
-  averageLatest?: AverageLatestValues;
-  maxLatency?: MaximumLatencyInSeconds;
-  [k: string]: unknown;
+    averageLatest?: AverageLatestValues;
+    maxLatency?: MaximumLatencyInSeconds;
+    [k: string]: unknown;
 }

package/src/widget-gauge.ts

@@ -6,41 +6,45 @@ import * as echarts from 'echarts/core'
 import { TooltipComponent } from 'echarts/components'
 import { GaugeChart, GaugeSeriesOption } from 'echarts/charts'
 import { CanvasRenderer, SVGRenderer } 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 = 'light'
+    theme?: Theme
 
     @state()
     private dataSets: Dataseries[] = []
 
     @state()
-    private canvasList: any = {}
+    private canvasList: Map<
+        string,
+        { echart?: echarts.ECharts; title?: HTMLHeadingElement; wrapper?: HTMLDivElement }
+    > = new Map()
 
     @state()
-    private themeBgColor: string = '#fff'
+    private themeBgColor?: string
 
     @state()
-    private themeColor: string = '#000'
+    private themeColor?: string
 
     private resizeObserver: ResizeObserver
 
     boxes?: HTMLDivElement[]
     origWidth: number = 0
     origHeight: number = 0
-    template: any
+    template: EChartsOption
     modifier: number = 1
     version: string = 'versionplaceholder'
     gaugeContainer: HTMLDivElement | null | undefined
@@ -96,12 +100,13 @@ export class WidgetGauge extends LitElement {
                     data: [
                         {
                             value: 70,
-                            name: 'nASDf'
+                            name: 'Value Name'
                         }
                     ]
-                } as GaugeSeriesOption,
+                } as SeriesOption,
                 {
                     type: 'gauge',
+                    name: 'Gauge B',
                     startAngle: 180,
                     endAngle: 0,
                     min: 33,
@@ -131,7 +136,7 @@ export class WidgetGauge extends LitElement {
                         text: 'Gauge B',
                         offsetCenter: [0, '-35%'],
                         fontSize: 20,
-                        show: false
+                        show: true
                     },
                     axisLabel: {
                         distance: -20,
@@ -139,7 +144,7 @@ export class WidgetGauge extends LitElement {
                         rotate: 'tangential',
                         fontSize: 12
                     }
-                } as GaugeSeriesOption
+                } as SeriesOption
             ]
         }
     }
@@ -156,13 +161,11 @@ export class WidgetGauge extends LitElement {
             this.transformData()
         }
 
-        if (changedProperties.has('themeObject')) {
-            this.registerTheme(this.themeObject)
-        }
-
-        if (changedProperties.has('themeName')) {
+        if (changedProperties.has('theme')) {
+            this.registerTheme(this.theme)
             this.deleteCharts()
-            this.setupCharts()
+            this.transformData()
+            this.applyData()
         }
         super.update(changedProperties)
     }
@@ -173,12 +176,11 @@ export class WidgetGauge extends LitElement {
         this.transformData()
     }
 
-    registerTheme(themeObject: any) {
-        if (!themeObject) return
-        if (typeof themeObject === 'string') {
-            return
-        }
-        echarts.registerTheme(this.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)
     }
 
     sizingSetup() {
@@ -247,9 +249,9 @@ export class WidgetGauge extends LitElement {
 
         this.modifier = modifier
 
-        for (const canvas in this.canvasList) {
-            this.canvasList[canvas].echart.resize()
-        }
+        this.canvasList.forEach((canvasObj) => {
+            canvasObj.echart?.resize()
+        })
         this.applyData()
     }
 
@@ -284,6 +286,7 @@ export class WidgetGauge extends LitElement {
     }
 
     applyData() {
+        if (!this.gaugeContainer) return
         const modifier = this.modifier
         this.dataSets.forEach((d) => {
             d.label ??= ''
@@ -295,6 +298,7 @@ export class WidgetGauge extends LitElement {
         for (const ds of this.dataSets) {
             // compute derivative values
             // filter latest values and calculate average
+            ds.label ??= ''
             ds.advanced ??= {}
             if (typeof ds.advanced?.averageLatest !== 'number' || isNaN(ds.advanced?.averageLatest))
                 ds.advanced.averageLatest = 1
@@ -310,14 +314,11 @@ 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 ga = option.series[0],
-                ga2 = option.series[1]
-
-            // Title
-            option.title.text = ds.label
-            option.title.textStyle.fontSize = 25 * modifier
+            const seriesArr = option.series as GaugeSeriesOption[]
+            const ga: any = seriesArr?.[0],
+                ga2: any = seriesArr?.[1]
 
             // Needle
             // Check age of data Latency
@@ -371,38 +372,42 @@ export class WidgetGauge extends LitElement {
             ga.progress.itemStyle.color = progressColor
             ga.progress.width = 60 * modifier
             // Apply
-            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)
+            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.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')
-            newTitle.textContent = ds.label ?? ''
             newTitle.style.fontSize = '20px'
             const newCanvas = document.createElement('div')
             newCanvas.setAttribute('name', ds.label ?? '')
@@ -416,13 +421,12 @@ 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))
+            const newChart = echarts.init(newCanvas, this.theme?.theme_name)
+            this.canvasList.set(ds.label ?? '', { echart: newChart, title: newTitle, wrapper: newWrapper })
             //@ts-ignore
-            this.themeBgColor = newChart._theme.backgroundColor ?? '#fff'
+            this.themeBgColor = newChart?._theme?.backgroundColor
             //@ts-ignore
-            this.themeColor = newChart._theme.gauge?.title?.color ?? '#000'
+            this.themeColor = newChart._theme?.title?.textStyle?.color
         })
         this.sizingSetup()
     }