@record-evolution/widget-gauge 1.6.11 → 1.7.1

package/package.json

@@ -3,7 +3,7 @@
     "description": "REWidget widget-gauge",
     "license": "MIT",
     "author": "widget-gauge",
-    "version": "1.6.11",
+    "version": "1.7.1",
     "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,6 +6,7 @@ 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])
 
@@ -21,7 +22,7 @@ export class WidgetGauge extends LitElement {
     themeObject?: any
 
     @property({ type: String })
-    themeName: string = 'light'
+    themeName?: string
 
     @state()
     private dataSets: Dataseries[] = []
@@ -30,17 +31,17 @@ export class WidgetGauge extends LitElement {
     private canvasList: any = {}
 
     @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 +97,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 +133,7 @@ export class WidgetGauge extends LitElement {
                         text: 'Gauge B',
                         offsetCenter: [0, '-35%'],
                         fontSize: 20,
-                        show: false
+                        show: true
                     },
                     axisLabel: {
                         distance: -20,
@@ -139,7 +141,7 @@ export class WidgetGauge extends LitElement {
                         rotate: 'tangential',
                         fontSize: 12
                     }
-                } as GaugeSeriesOption
+                } as SeriesOption
             ]
         }
     }
@@ -157,10 +159,11 @@ export class WidgetGauge extends LitElement {
         }
 
         if (changedProperties.has('themeObject')) {
-            this.registerTheme(this.themeObject)
+            this.registerTheme(this.themeName, this.themeObject)
         }
 
         if (changedProperties.has('themeName')) {
+            this.registerTheme(this.themeName, this.themeObject)
             this.deleteCharts()
             this.setupCharts()
         }
@@ -173,12 +176,10 @@ 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(themeName?: string, themeObject?: any) {
+        if (!themeObject || !themeName) return
+
+        echarts.registerTheme(themeName, this.themeObject)
     }
 
     sizingSetup() {
@@ -295,6 +296,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
@@ -312,12 +314,9 @@ export class WidgetGauge extends LitElement {
 
             // const option = this.canvasList[ds.label].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,10 +370,13 @@ 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[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 ?? ''
+
+            this.canvasList[ds.label]?.echart.setOption(option)
         }
     }
 
@@ -402,7 +404,6 @@ export class WidgetGauge extends LitElement {
             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 ?? '')
@@ -420,9 +421,9 @@ export class WidgetGauge extends LitElement {
             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'
+            this.themeBgColor = newChart?._theme?.backgroundColor
             //@ts-ignore
-            this.themeColor = newChart._theme.gauge?.title?.color ?? '#000'
+            this.themeColor = newChart?._theme?.gauge?.title?.color
         })
         this.sizingSetup()
     }