@record-evolution/widget-linechart 1.6.2 → 1.6.4

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-linechart following open-wc recommendations",
     "license": "MIT",
     "author": "widget-linechart",
-    "version": "1.6.2",
+    "version": "1.6.4",
     "type": "module",
     "main": "dist/widget-linechart.js",
     "types": "dist/src/widget-linechart.d.ts",
@@ -14,12 +14,14 @@
     "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",
         "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
-        "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
+        "patch": "npm version patch --tag-version-prefix=''",
+        "minor": "npm version minor --tag-version-prefix=''",
+        "release": "npm run build && npm run types && git push && git push --tag"
     },
     "dependencies": {
         "echarts": "5.6.0",

package/src/default-data.json

@@ -13,14 +13,12 @@
         {
             "label": "Demo Bubble",
             "type": "scatter",
-
             "styling": {
                 "borderWidth": 2,
                 "fill": false
             },
             "advanced": {
-                "drawOrder": 1,
-                "chartName": "Demo Bubble Chart"
+                "drawOrder": 1
             },
             "data": [
                 {
@@ -43,7 +41,6 @@
         {
             "label": "Demo Bar",
             "type": "bar",
-
             "styling": {
                 "borderWidth": 2,
                 "pointStyle": "circle",
@@ -77,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.
  */
@@ -54,7 +54,7 @@ export type ChartName = string;
 export type XValue = string;
 export type YValue = number;
 /**
- * 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": {
@@ -185,7 +185,7 @@
                                 },
                                 "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,
@@ -101,17 +109,12 @@ export class WidgetLinechart extends LitElement {
                     // start: 30,
                     // end: 70,
                     xAxisIndex: [0, 1]
-                },
-                {
-                    show: false,
-                    realtime: true,
-                    // start: 30,
-                    // end: 70,
-                    yAxisIndex: [0, 1]
                 }
             ],
             xAxis: {
                 type: 'value', // value, time, log, category
+                name: 'Time',
+                nameGap: 27,
                 nameLocation: 'middle',
                 axisLine: {
                     lineStyle: {
@@ -125,6 +128,8 @@ export class WidgetLinechart extends LitElement {
             yAxis: {
                 type: 'value',
                 nameLocation: 'middle',
+                name: 'Temperature (°C)',
+                nameGap: 30,
                 axisLabel: {
                     fontSize: 14
                 },
@@ -142,7 +147,8 @@ export class WidgetLinechart extends LitElement {
                     symbolSize: 8,
                     lineStyle: {
                         width: 2,
-                        type: 'solid'
+                        type: 'solid',
+                        color: 'green'
                     },
                     data: [10, 11, 13, 11, 12, 12, 9]
                 } as SeriesOption,
@@ -228,36 +234,41 @@ export class WidgetLinechart extends LitElement {
                 const prefix = piv ?? ''
                 const label = ds.label ?? ''
                 const name = prefix + (!!prefix && !!label ? ' - ' : '') + label
-                const lineColor = ds.advanced?.chartName?.includes('#split#')
-                    ? ds.borderColor
-                    : derivedBdColors[i]
-                const fillColor = ds.advanced?.chartName?.includes('#split#')
-                    ? ds.backgroundColor
-                    : derivedBgColors[i]
+                const lineColor = ds.borderColor
+                    ? ds.advanced?.chartName?.includes('#split#')
+                        ? ds.borderColor
+                        : derivedBdColors[i]
+                    : undefined
+                const fillColor = ds.backgroundColor
+                    ? ds.advanced?.chartName?.includes('#split#')
+                        ? ds.backgroundColor
+                        : derivedBgColors[i]
+                    : 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'
                     },
-                    areaStyle: { color: ds.styling?.fill ? fillColor : 'transparent' },
+                    itemStyle: {
+                        color: fillColor,
+                        borderColor: lineColor,
+                        borderWidth: ds.styling?.borderWidth ?? 2
+                    },
+                    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
@@ -268,13 +279,16 @@ export class WidgetLinechart extends LitElement {
             })
         })
 
-        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 {
@@ -298,7 +312,6 @@ export class WidgetLinechart extends LitElement {
 
             // Axis
             option.xAxis.name = this.inputData?.axis?.xAxisLabel ?? ''
-            option.xAxis.nameGap = 30 * modifier
             option.dataZoom[0].show = this.inputData?.axis?.xAxisZoom ?? false
             option.toolbox.show = this.inputData?.axis?.xAxisZoom ?? false
             // option.xAxis.axisLine.lineStyle.width = 2 * modifier
@@ -306,16 +319,17 @@ export class WidgetLinechart extends LitElement {
             option.xAxis.type = this.xAxisType()
 
             option.yAxis.name = this.inputData?.axis?.yAxisLabel ?? ''
-            option.yAxis.nameGap = 30 * modifier
             // option.yAxis.axisLine.lineStyle.width = 2 * modifier
             // option.yAxis.axisLabel.fontSize = 20 * modifier
             option.yAxis.scale = this.inputData?.axis?.yAxisScaling ?? false
 
-            option.series = []
-            for (const ds of chart.series) {
-                option.series.push(ds)
-            }
-            chart.echart?.setOption(option)
+            option.series = chart.series
+
+            if (chart.series.length <= 1) option.legend.show = false
+            const oldOption: any = chart.echart?.getOption() ?? {}
+            const notMerge = oldOption.series?.length !== chart.series.length
+            chart.echart?.setOption(option, { notMerge })
+            chart.echart?.resize()
         })
     }