@record-evolution/widget-linechart 1.6.3 → 1.6.5

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-linechart following open-wc recommendations",
     "license": "MIT",
     "author": "widget-linechart",
-    "version": "1.6.3",
+    "version": "1.6.5",
     "type": "module",
     "main": "dist/widget-linechart.js",
     "types": "dist/src/widget-linechart.d.ts",
@@ -14,7 +14,7 @@
     "scripts": {
         "analyze": "cem analyze --litelement",
         "start": "concurrently -k -r \"npm run watch\" \"wds\"",
-        "link": "ENV='PROD' npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
+        "link": "npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
         "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-linechart && npm i @record-evolution/widget-linechart",
         "build": "rollup -c rollup.config.js",
         "watch": "rollup -w -c rollup.config.js",

package/src/default-data.json

@@ -74,7 +74,7 @@
             "styling": {
                 "fill": false,
                 "borderWidth": 2,
-                "borderDash": "dotted",
+                "borderDash": "dashed",
                 "pointStyle": "circle"
             },
 

package/src/definition-schema.d.ts

@@ -7,16 +7,16 @@
 
 export type Title = string;
 export type Subtitle = string;
+export type XAxisLabel = string;
+export type YAxisLabel = string;
 /**
  * This will apply a proper time series x-Axis. Check if your x-values are timestamps.
  */
 export type TimeseriesChart = boolean;
-export type XAxisLabel = string;
 /**
  * If checked, a zoom tool will be shown on the x-axis to zoom into the chart.
  */
 export type XAxisZoomTool = boolean;
-export type YAxisLabel = string;
 /**
  * If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.
  */
@@ -52,9 +52,9 @@ export type ChartName = string;
  * If timeseries is checked in the settings, then this should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. But this works with many other formats as well.
  */
 export type XValue = string;
-export type YValue = number;
+export type YValue = string;
 /**
- * Valid only for Scatter Chart type.
+ * Controls the symbol size for line and scatter charts.
  */
 export type BubbleSize = number;
 /**
@@ -90,10 +90,10 @@ export interface InputData {
     [k: string]: unknown;
 }
 export interface AxisSettings {
-    timeseries?: TimeseriesChart;
     xAxisLabel?: XAxisLabel;
-    xAxisZoom?: XAxisZoomTool;
     yAxisLabel?: YAxisLabel;
+    timeseries?: TimeseriesChart;
+    xAxisZoom?: XAxisZoomTool;
     yAxisScaling?: YAxisScaling;
     columnLayout?: VerticalLayout;
     [k: string]: unknown;

package/src/definition-schema.json

@@ -17,30 +17,30 @@
             "type": "object",
             "order": 3,
             "properties": {
-                "timeseries": {
-                    "title": "Timeseries Chart",
-                    "description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
-                    "type": "boolean",
-                    "dataDrivenDisabled": true,
-                    "order": 3
-                },
                 "xAxisLabel": {
                     "title": "X-Axis Label",
                     "type": "string",
                     "dataDrivenDisabled": false,
+                    "order": 3
+                },
+                "yAxisLabel": {
+                    "title": "Y-Axis Label",
+                    "type": "string",
+                    "dataDrivenDisabled": false,
                     "order": 4
                 },
+                "timeseries": {
+                    "title": "Timeseries Chart",
+                    "description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
+                    "type": "boolean",
+                    "dataDrivenDisabled": true,
+                    "order": 5
+                },
                 "xAxisZoom": {
                     "title": "X-Axis Zoom Tool",
                     "type": "boolean",
                     "description": "If checked, a zoom tool will be shown on the x-axis to zoom into the chart.",
                     "dataDrivenDisabled": true,
-                    "order": 5
-                },
-                "yAxisLabel": {
-                    "title": "Y-Axis Label",
-                    "type": "string",
-                    "dataDrivenDisabled": false,
                     "order": 6
                 },
                 "yAxisScaling": {
@@ -179,13 +179,13 @@
                                 },
                                 "y": {
                                     "title": "Y-Value",
-                                    "type": "number",
+                                    "type": "string",
                                     "order": 2,
                                     "required": true
                                 },
                                 "r": {
                                     "title": "Bubble Size",
-                                    "description": "Valid only for Scatter Chart type.",
+                                    "description": "Controls the symbol size for line and scatter charts.",
                                     "order": 3,
                                     "type": "number"
                                 },

package/src/widget-linechart.ts

@@ -71,7 +71,7 @@ export class WidgetLinechart extends LitElement {
         this.template = {
             title: {
                 text: 'Temperature Change in the Coming Week',
-                left: 'left',
+                left: 20,
                 textStyle: {
                     fontSize: 14
                 }
@@ -81,7 +81,15 @@ export class WidgetLinechart extends LitElement {
             },
             legend: {
                 right: '10%',
-                top: '3%'
+                top: 0
+            },
+            grid: {
+                backgroundColor: 'rgba(0, 255, 0, 0.1)',
+                top: 30,
+                bottom: 20,
+                left: 20,
+                right: 10,
+                containLabel: true // ensures labels are not cut off
             },
             toolbox: {
                 show: true,
@@ -106,7 +114,7 @@ export class WidgetLinechart extends LitElement {
             xAxis: {
                 type: 'value', // value, time, log, category
                 name: 'Time',
-                nameGap: 25,
+                nameGap: 27,
                 nameLocation: 'middle',
                 axisLine: {
                     lineStyle: {
@@ -121,7 +129,7 @@ export class WidgetLinechart extends LitElement {
                 type: 'value',
                 nameLocation: 'middle',
                 name: 'Temperature (°C)',
-                nameGap: 25,
+                nameGap: 30,
                 axisLabel: {
                     fontSize: 14
                 },
@@ -238,52 +246,47 @@ export class WidgetLinechart extends LitElement {
                     : undefined
                 const data = distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv)
                 const data2 = this.inputData?.axis?.timeseries
-                    ? data?.map((d) =>
-                          d?.r !== undefined ? [new Date(d.x ?? ''), d.y, d.r] : [new Date(d.x ?? ''), d.y]
-                      )
-                    : data?.map((d) => (d?.r !== undefined ? [d.x, d.y, d.r] : [d.x, d.y]))
+                    ? data?.map((d) => [new Date(d.x ?? ''), d.y, d.r])
+                    : data?.map((d) => [d.x, d.y, d.r])
 
+                // preparing the echarts series option for later application
                 const pds: SeriesOption = {
                     name: name,
                     type: ds.type ?? 'line',
                     lineStyle: {
                         color: lineColor,
                         width: ds.styling?.borderWidth ?? 2,
-                        // @ts-ignore
                         type: ds.styling?.borderDash ?? 'solid'
                     },
                     itemStyle: {
                         color: fillColor,
                         borderColor: lineColor,
-                        borderWidth: ds.styling?.borderWidth ?? 2,
-                        // @ts-ignore
-                        type: ds.styling?.borderDash ?? 'solid'
+                        borderWidth: ds.styling?.borderWidth ?? 2
                     },
-                    areaStyle: { color: ds.styling?.fill ? fillColor : 'transparent' },
+                    areaStyle: ds.styling?.fill ? { color: fillColor } : undefined,
                     symbol: ds.styling?.pointStyle ?? 'circle',
                     symbolSize: (data) => data[2] ?? 4,
                     showSymbol: ds.styling?.pointStyle === 'none' ? false : true,
                     data: data2 ?? []
                 }
-                // if (ds.type === 'scatter') (pds as ScatterSeriesOption).symbolSize = (data) => data[2]
-
                 let chartName = ds.advanced?.chartName ?? ''
-                if (chartName.includes('#split#')) {
-                    chartName = prefix + '-' + chartName
-                }
+                chartName = chartName.replace('#split#', prefix)
 
                 const chart = this.setupChart(chartName)
                 chart?.series.push(pds)
             })
         })
 
-        Array.from(this.canvasList.entries())
-            .filter(([l, c]) => c.doomed)
-            .forEach(([label, chart]) => {
-                chart.echart?.dispose()
-                chart.element?.remove()
-                this.canvasList.delete(label)
-            })
+        const doomedCharts: string[] = []
+        // remove all doomed charts
+        this.canvasList.forEach((chart, label) => {
+            if (!chart.doomed) return
+            chart.echart?.dispose()
+            chart.element?.remove()
+            doomedCharts.push(label)
+        })
+
+        doomedCharts.forEach((label) => this.canvasList.delete(label))
     }
 
     xAxisType(): 'value' | 'log' | 'category' | 'time' | undefined {
@@ -293,6 +296,12 @@ export class WidgetLinechart extends LitElement {
         return 'category'
     }
 
+    yAxisType(): 'value' | 'log' | 'category' | undefined {
+        const onePoint = this.inputData?.dataseries?.[0]?.data?.[0]
+        if (!isNaN(Number(onePoint?.y))) return 'value'
+        return 'category'
+    }
+
     applyData() {
         const modifier = 1
 
@@ -312,6 +321,7 @@ export class WidgetLinechart extends LitElement {
             // option.xAxis.axisLine.lineStyle.width = 2 * modifier
             // option.xAxis.axisLabel.fontSize = 20 * modifier
             option.xAxis.type = this.xAxisType()
+            option.yAxis.type = this.yAxisType()
 
             option.yAxis.name = this.inputData?.axis?.yAxisLabel ?? ''
             // option.yAxis.axisLine.lineStyle.width = 2 * modifier
@@ -319,10 +329,12 @@ export class WidgetLinechart extends LitElement {
             option.yAxis.scale = this.inputData?.axis?.yAxisScaling ?? false
 
             option.series = chart.series
-
+            // console.log('Applying data to chart', label, option)
             if (chart.series.length <= 1) option.legend.show = false
-
-            chart.echart?.setOption(option)
+            const oldOption: any = chart.echart?.getOption() ?? {}
+            const notMerge = oldOption.series?.length !== chart.series.length
+            chart.echart?.setOption(option, { notMerge })
+            chart.echart?.resize()
         })
     }