@record-evolution/widget-linechart 1.6.15 → 1.6.17

package/package.json

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

package/src/widget-linechart.ts

@@ -38,7 +38,7 @@ type Theme = {
     theme_object: any
 }
 
-type SeriesOptionX = SeriesOption & { minDate?: number; maxDate?: number }
+type SeriesOptionX = SeriesOption & { minDate?: number; maxDate?: number; drawOrder: number }
 @customElement('widget-linechart-versionplaceholder')
 export class WidgetLinechart extends LitElement {
     @property({ type: Object })
@@ -50,7 +50,13 @@ export class WidgetLinechart extends LitElement {
     @state()
     private canvasList: Map<
         string,
-        { echart?: echarts.ECharts; series: SeriesOptionX[]; doomed?: boolean; element?: HTMLDivElement }
+        {
+            echart?: echarts.ECharts
+            series: SeriesOptionX[]
+            doomed?: boolean
+            element?: HTMLDivElement
+            drawing: boolean
+        }
     > = new Map()
 
     @state() private themeBgColor?: string
@@ -65,6 +71,8 @@ export class WidgetLinechart extends LitElement {
     version: string = 'versionplaceholder'
     chartContainer: HTMLDivElement | null | undefined
     resizeObserver?: ResizeObserver
+    lastUpdateTime: number = 0
+    updateThresholdMs: number = 300
 
     constructor() {
         super()
@@ -169,8 +177,13 @@ export class WidgetLinechart extends LitElement {
 
     update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         if (changedProperties.has('inputData') && this.chartContainer) {
-            this.transformData()
-            this.applyData()
+            const drawingStates = Array.from(this.canvasList).map(([key, chart]) => chart.drawing)
+            if (drawingStates.every((d) => !d)) {
+                this.transformData()
+                this.applyData()
+            } else {
+                console.log('skipping linechart draw')
+            }
         }
 
         if (changedProperties.has('theme')) {
@@ -184,9 +197,9 @@ export class WidgetLinechart extends LitElement {
 
     protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {
         this.chartContainer = this.shadowRoot?.querySelector('.chart-container')
+        this.registerTheme(this.theme)
         this.transformData()
         this.applyData()
-        this.registerTheme(this.theme)
         // Add ResizeObserver for chart container
         if (this.chartContainer) {
             this.resizeObserver = new ResizeObserver(() => {
@@ -287,7 +300,8 @@ export class WidgetLinechart extends LitElement {
                     symbol: ds.styling?.pointStyle ?? 'circle',
                     symbolSize: (d: any[]) => d[2] ?? 4,
                     showSymbol: ds.styling?.pointStyle === 'none' ? false : true,
-                    data: data2 ?? []
+                    data: data2 ?? [],
+                    drawOrder: ds.advanced?.drawOrder ?? 0
                 }
                 let chartName = ds.advanced?.chartName ?? ''
                 chartName = chartName.replace('#split#', prefix)
@@ -307,6 +321,16 @@ export class WidgetLinechart extends LitElement {
         })
 
         doomedCharts.forEach((label) => this.canvasList.delete(label))
+        this.canvasList = new Map(
+            [...this.canvasList.entries()].sort(([labelA, va], [labelB, vb]) => {
+                const orderA = va.series?.[0].drawOrder ?? 0
+                const orderB = vb.series?.[0].drawOrder ?? 0
+                if (orderA !== orderB) {
+                    return orderA - orderB
+                }
+                return labelA.localeCompare(labelB)
+            })
+        )
     }
 
     xAxisType(): 'value' | 'log' | 'category' | 'time' | undefined {
@@ -324,7 +348,11 @@ export class WidgetLinechart extends LitElement {
 
     applyData() {
         const modifier = 1
-        this.requestUpdate()
+        // Sort chartContainer children by drawOrder and label
+        if (!this.chartContainer) return
+        for (const canvas of this.canvasList.values()) {
+            if (canvas.element) this.chartContainer.appendChild(canvas.element)
+        }
         this.canvasList.forEach((chart, label) => {
             chart.series.sort((a, b) => ((a.name as string) > (b.name as string) ? 1 : -1))
 
@@ -363,6 +391,15 @@ export class WidgetLinechart extends LitElement {
             option.series = chart.series
             // console.log('Applying data to chart', label, option)
             if (chart.series.length <= 1) option.legend.show = false
+            const now = Date.now()
+            const timeSinceLastUpdate = now - this.lastUpdateTime
+            this.lastUpdateTime = now
+
+            const tooFast = timeSinceLastUpdate < this.updateThresholdMs
+            option.animation = !tooFast
+            option.animationDuration = tooFast ? 0 : this.updateThresholdMs
+            chart.echart?.on('finished', () => (chart.drawing = false))
+            chart.drawing = true
             chart.echart?.setOption(option, { notMerge })
             // chart.echart?.resize()
         })
@@ -394,7 +431,12 @@ export class WidgetLinechart extends LitElement {
         this.chartContainer.appendChild(newContainer)
 
         const newChart = echarts.init(newContainer, this.theme?.theme_name)
-        const chart = { echart: newChart, series: [] as SeriesOption[], element: newContainer }
+        const chart = {
+            echart: newChart,
+            series: [] as SeriesOptionX[],
+            element: newContainer,
+            drawing: false
+        }
         this.canvasList.set(label, chart)
 
         return chart