@record-evolution/widget-linechart 1.6.5 → 1.6.7

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-linechart following open-wc recommendations",
     "license": "MIT",
     "author": "widget-linechart",
-    "version": "1.6.5",
+    "version": "1.6.7",
     "type": "module",
     "main": "dist/widget-linechart.js",
     "types": "dist/src/widget-linechart.d.ts",

package/src/widget-linechart.ts

@@ -30,19 +30,20 @@ echarts.use([
 ])
 
 import { InputData } from './definition-schema'
-import { EChartsOption, ScatterSeriesOption, SeriesOption } from 'echarts'
+import { EChartsOption, 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<
@@ -50,11 +51,9 @@ export class WidgetLinechart extends LitElement {
         { echart?: echarts.ECharts; series: SeriesOption[]; doomed?: boolean; element?: HTMLDivElement }
     > = new Map()
 
-    @state()
-    private themeBgColor?: string
-
-    @state()
-    private themeColor?: string
+    @state() private themeBgColor?: string
+    @state() private themeTitleColor?: string
+    @state() private themeSubtitleColor?: string
 
     boxes?: HTMLDivElement[]
     origWidth: number = 0
@@ -172,12 +171,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 +195,17 @@ export class WidgetLinechart extends LitElement {
         }
     }
 
-    registerTheme(themeName?: string, themeObject?: any) {
-        if (!themeObject || !themeName) return
-
-        echarts.registerTheme(themeName, this.themeObject)
+    registerTheme(theme?: Theme) {
+        if (!theme || !theme.theme_object || !theme.theme_name) return
+
+        console.log('Registering theme', theme)
+        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
     }
 
     transformData() {
@@ -334,7 +336,7 @@ export class WidgetLinechart extends LitElement {
             const oldOption: any = chart.echart?.getOption() ?? {}
             const notMerge = oldOption.series?.length !== chart.series.length
             chart.echart?.setOption(option, { notMerge })
-            chart.echart?.resize()
+            // chart.echart?.resize()
         })
     }
 
@@ -363,13 +365,10 @@ 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
-        this.themeBgColor = newChart._theme?.backgroundColor
-        //@ts-ignore
-        this.themeColor = newChart._theme?.title?.textStyle?.color
+
         return chart
     }
 
@@ -384,7 +383,6 @@ export class WidgetLinechart extends LitElement {
     static styles = css`
         :host {
             display: block;
-            color: var(--re-text-color, #000);
             font-family: sans-serif;
             box-sizing: border-box;
             position: relative;
@@ -402,7 +400,6 @@ export class WidgetLinechart extends LitElement {
             width: 100%;
             padding: 16px;
             box-sizing: border-box;
-            color: var(--re-text-color, #000);
             gap: 12px;
         }
 
@@ -451,7 +448,6 @@ export class WidgetLinechart extends LitElement {
 
         .no-data {
             font-size: 20px;
-            color: var(--re-text-color, #000);
             display: flex;
             height: 100%;
             width: 100%;
@@ -463,10 +459,19 @@ export class WidgetLinechart 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.canvasList.size === 0}>No Data</div>
                 <div