feat: Update widget-linechart to version 1.6.5; refactor theme handling and improve chart rendering

Author: Marko Petzold

demo/index.html

@@ -28,13 +28,14 @@
             import '../dist/widget-linechart.js'
             const data = await fetch('../src/default-data.json').then((res) => res.json())
             const themeObject = await fetch('themes/vintage.json').then((res) => res.json())
+            const theme = { theme_name: 'vintage', theme_object: themeObject }
 
             render(
                 html`
-                    <widget-linechart-1.6.4 .themeObject="${themeObject}" .inputData=${data}>
+                    <widget-linechart-1.6.5 .theme="${theme}" .inputData=${data}>
                         web component is not registered. Make sure to use the tag with the correct version
                         string from the package.json
-                    </widget-linechart-1.6.4>
+                    </widget-linechart-1.6.5>
                 `,
                 document.querySelector('#demo')
             )

src/widget-linechart.ts

@@ -33,16 +33,17 @@ import { InputData } from './definition-schema'
 import { EChartsOption, ScatterSeriesOption, SeriesOption } from 'echarts'
 import { TitleOption } from 'echarts/types/dist/shared'
 
+type Theme = {
+    theme_name: string
+    theme_object: any
+}
 @customElement('widget-linechart-versionplaceholder')
 export class WidgetLinechart extends LitElement {
     @property({ type: Object })
     inputData?: InputData
 
     @property({ type: Object })
-    themeObject?: any
-
-    @property({ type: String })
-    themeName?: string
+    theme?: Theme
 
     @state()
     private canvasList: Map<
@@ -172,12 +173,8 @@ export class WidgetLinechart extends LitElement {
             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.applyData()
@@ -200,10 +197,11 @@ export class WidgetLinechart extends LitElement {
         }
     }
 
-    registerTheme(themeName?: string, themeObject?: any) {
-        if (!themeObject || !themeName) return
+    registerTheme(theme?: Theme) {
+        if (!theme || !theme.theme_object || !theme.theme_name) return
 
-        echarts.registerTheme(themeName, this.themeObject)
+        console.log('Registering theme', theme)
+        echarts.registerTheme(theme.theme_name, theme.theme_object)
     }
 
     transformData() {
@@ -363,7 +361,7 @@ export class WidgetLinechart extends LitElement {
         newContainer.setAttribute('class', 'sizer')
         this.chartContainer.appendChild(newContainer)
 
-        const newChart = echarts.init(newContainer, this.themeName)
+        const newChart = echarts.init(newContainer, this.theme?.theme_name)
         const chart = { echart: newChart, series: [] as SeriesOption[], element: newContainer }
         this.canvasList.set(label, chart)
         //@ts-ignore