@record-evolution/widget-linechart 1.4.14 → 1.5.1

package/src/widget-linechart.ts

@@ -2,19 +2,19 @@ import { html, css, LitElement } from 'lit'
 import { repeat } from 'lit/directives/repeat.js'
 import { property, state } from 'lit/decorators.js'
 import Chart, { ChartDataset } from 'chart.js/auto'
-import tinycolor from 'tinycolor2'
+import tinycolor, { ColorInput } from 'tinycolor2'
 // This does not work. See comments at the end of the file.
 // import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 // import 'chartjs-adapter-moment';
 // import 'chartjs-adapter-date-fns';
-import { ConfigureTheChart } from './definition-schema.js'
+import { InputData } from './definition-schema.js'
 
-type Dataseries = Exclude<ConfigureTheChart['dataseries'], undefined>[number]
+type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
 type Data = Exclude<Dataseries['data'], undefined>[number]
 
 export class WidgetLinechart extends LitElement {
     @property({ type: Object })
-    inputData?: ConfigureTheChart
+    inputData?: InputData
 
     @state()
     private canvasList: Map<string, { chart?: any; dataSets: Dataseries[] }> = new Map()
@@ -38,8 +38,10 @@ export class WidgetLinechart extends LitElement {
 
         // reset all existing chart dataseries
         this.canvasList.forEach((chartM) => (chartM.dataSets = []))
+        this.inputData.dataseries.sort((a, b) => (a.advanced?.drawOrder ?? 0) - (b.advanced?.drawOrder ?? 0))
         this.inputData.dataseries.forEach((ds) => {
-            ds.chartName = ds.chartName ?? ''
+            ds.advanced ??= {}
+            ds.advanced.chartName ??= ''
             if (ds.borderDash && typeof ds.borderDash === 'string') {
                 ds.borderDash = JSON.parse(ds.borderDash)
             } else {
@@ -48,45 +50,46 @@ export class WidgetLinechart extends LitElement {
 
             // pivot data
             const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))].sort()
-            const derivedBgColors = tinycolor(ds.backgroundColor)
+            const derivedBgColors = tinycolor(ds.backgroundColor as ColorInput | undefined)
                 .monochromatic(distincts.length)
                 .map((c: any) => c.toHexString())
-            const derivedBdColors = tinycolor(ds.borderColor)
+            const derivedBdColors = tinycolor(ds.borderColor as ColorInput | undefined)
                 .monochromatic(distincts.length)
                 .map((c: any) => c.toHexString())
+            //sd
+            distincts.forEach((piv, i) => {
+                const prefix = piv ? `${piv} - ` : ''
+                const pds: any = {
+                    label: prefix + ds.label,
+                    type: ds.type,
+                    showLine: true,
+                    borderColor: ds.advanced?.chartName?.includes('#split#')
+                        ? ds.borderColor
+                        : derivedBdColors[i],
+                    backgroundColor: ds.advanced?.chartName?.includes('#split#')
+                        ? ds.backgroundColor
+                        : derivedBdColors[i],
+                    styling: ds.styling,
+                    pointStyle: ds.styling?.pointStyle,
+                    radius: ds.styling?.radius,
+                    fill: ds.styling?.fill,
+                    borderWidth: ds.styling?.borderWidth,
+                    borderDash: ds.borderDash,
+                    advanced: ds.advanced,
+                    data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv)
+                }
+                let chartName = ds.advanced?.chartName ?? ''
+                if (chartName.includes('#split#')) {
+                    chartName = chartName + '-' + piv
+                }
+                // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
 
-            if (distincts.length > 1) {
-                distincts.forEach((piv, i) => {
-                    const pds: any = {
-                        label: ds.label + ' ' + piv,
-                        type: ds.type,
-                        showLine: true,
-                        radius: ds.radius,
-                        pointStyle: ds.pointStyle,
-                        backgroundColor: derivedBgColors[i],
-                        borderColor: derivedBdColors[i],
-                        borderWidth: ds.borderWidth,
-                        borderDash: ds.borderDash,
-                        fill: ds.fill,
-                        data: ds.data?.filter((d) => d.pivot === piv)
-                    }
-                    // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
-                    const chartName = ds.chartName?.includes('#pivot#')
-                        ? ds.chartName + piv
-                        : ds.chartName ?? ''
-                    if (!this.canvasList.has(chartName)) {
-                        // initialize new charts
-                        this.canvasList.set(chartName, { chart: undefined, dataSets: [] as Dataseries[] })
-                    }
-                    this.canvasList.get(chartName)?.dataSets.push(pds)
-                })
-            } else {
-                if (!this.canvasList.has(ds.chartName)) {
+                if (!this.canvasList.has(chartName)) {
                     // initialize new charts
-                    this.canvasList.set(ds.chartName, { chart: undefined, dataSets: [] as Dataseries[] })
+                    this.canvasList.set(chartName, { chart: undefined, dataSets: [] as Dataseries[] })
                 }
-                this.canvasList.get(ds.chartName)?.dataSets.push(ds)
-            }
+                this.canvasList.get(chartName)?.dataSets.push(pds)
+            })
         })
         // prevent duplicate transformation
         this.inputData.dataseries = []
@@ -101,17 +104,17 @@ export class WidgetLinechart extends LitElement {
             if (chart) {
                 chart.data.datasets = dataSets
                 chart.options.scales.x.type = this.xAxisType()
-                chart.options.scales.x.title.display = !!this.inputData?.settings?.xAxisLabel
-                chart.options.scales.x.title.text = this.inputData?.settings?.xAxisLabel
-                chart.options.scales.y.title.display = !!this.inputData?.settings?.yAxisLabel
-                chart.options.scales.y.title.text = this.inputData?.settings?.yAxisLabel
+                chart.options.scales.x.title.display = !!this.inputData?.axis?.xAxisLabel
+                chart.options.scales.x.title.text = this.inputData?.axis?.xAxisLabel
+                chart.options.scales.y.title.display = !!this.inputData?.axis?.yAxisLabel
+                chart.options.scales.y.title.text = this.inputData?.axis?.yAxisLabel
                 chart?.update('resize')
             }
         })
     }
 
     xAxisType(): 'linear' | 'logarithmic' | 'category' | 'time' | 'timeseries' | undefined {
-        if (this.inputData?.settings?.timeseries) return 'time'
+        if (this.inputData?.axis?.timeseries) return 'time'
         const onePoint = this.inputData?.dataseries?.[0].data?.[0]
         if (!isNaN(Number(onePoint?.x))) return 'linear'
         return 'category'
@@ -148,14 +151,14 @@ export class WidgetLinechart extends LitElement {
                         x: {
                             type: this.xAxisType(),
                             title: {
-                                display: !!this.inputData?.settings?.xAxisLabel,
-                                text: this.inputData?.settings?.xAxisLabel
+                                display: !!this.inputData?.axis?.xAxisLabel,
+                                text: this.inputData?.axis?.xAxisLabel
                             }
                         },
                         y: {
                             title: {
-                                display: !!this.inputData?.settings?.yAxisLabel,
-                                text: this.inputData?.settings?.yAxisLabel
+                                display: !!this.inputData?.axis?.yAxisLabel,
+                                text: this.inputData?.axis?.yAxisLabel
                             }
                         }
                     }
@@ -227,15 +230,11 @@ export class WidgetLinechart extends LitElement {
         return html`
             <div class="wrapper">
                 <header>
-                    <h3 class="paging" ?active=${this.inputData?.settings?.title}>
-                        ${this.inputData?.settings?.title}
-                    </h3>
-                    <p class="paging" ?active=${this.inputData?.settings?.subTitle}>
-                        ${this.inputData?.settings?.subTitle}
-                    </p>
+                    <h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
+                    <p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
                 </header>
 
-                <div class="chart-container ${this?.inputData?.settings?.columnLayout ? 'columnLayout' : ''}">
+                <div class="chart-container ${this?.inputData?.axis?.columnLayout ? 'columnLayout' : ''}">
                     ${repeat(
                         [...this.canvasList.entries()].sort(),
                         ([chartName, chartM]) => chartName,