@record-evolution/widget-linechart 1.5.6 → 1.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +2 -2
  2. package/dist/src/widget-linechart.d.ts +34 -9
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/dist/widget-linechart.js +53076 -22003
  5. package/dist/widget-linechart.js.map +1 -1
  6. package/package.json +16 -22
  7. package/src/default-data.json +20 -16
  8. package/src/definition-schema.d.ts +50 -58
  9. package/src/definition-schema.json +30 -24
  10. package/src/widget-linechart.ts +333 -360
  11. package/src/widget-linechart_old.old_ts +486 -0
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "Webcomponent widget-linechart following open-wc recommendations",
4
4
  "license": "MIT",
5
5
  "author": "widget-linechart",
6
- "version": "1.5.6",
6
+ "version": "1.6.2",
7
7
  "type": "module",
8
8
  "main": "dist/widget-linechart.js",
9
9
  "types": "dist/src/widget-linechart.d.ts",
@@ -13,38 +13,32 @@
13
13
  ],
14
14
  "scripts": {
15
15
  "analyze": "cem analyze --litelement",
16
- "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
17
- "link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
16
+ "start": "concurrently -k -r \"npm run watch\" \"wds\"",
17
+ "link": "ENV='PROD' npm run build && npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
18
18
  "unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-linechart && npm i @record-evolution/widget-linechart",
19
19
  "build": "rollup -c rollup.config.js",
20
20
  "watch": "rollup -w -c rollup.config.js",
21
- "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
22
- "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
21
+ "types": "cat src/definition-schema.json | json2ts --style.tabWidth=4 > src/definition-schema.d.ts",
22
+ "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag"
23
23
  },
24
24
  "dependencies": {
25
- "chart.js": "^4.4.4",
26
- "chartjs-adapter-date-fns": "^3.0.0",
27
- "chartjs-adapter-dayjs-4": "^1.0.4",
28
- "chartjs-adapter-moment": "^1.0.1",
29
- "date-fns": "^4.1.0",
30
- "dayjs": "^1.11.13",
31
- "lit": "^3.2.0",
32
- "moment": "^2.30.1",
25
+ "echarts": "5.6.0",
26
+ "lit": "^3.3.0",
33
27
  "tinycolor2": "^1.6.0"
34
28
  },
35
29
  "devDependencies": {
36
- "@custom-elements-manifest/analyzer": "^0.10.3",
30
+ "@custom-elements-manifest/analyzer": "^0.10.4",
37
31
  "@rollup/plugin-babel": "^6.0.4",
38
- "@rollup/plugin-commonjs": "^28.0.0",
39
- "@rollup/plugin-node-resolve": "^15.3.0",
40
- "@rollup/plugin-replace": "^6.0.1",
41
- "@rollup/plugin-typescript": "^12.1.0",
32
+ "@rollup/plugin-commonjs": "^28.0.5",
33
+ "@rollup/plugin-node-resolve": "^16.0.1",
34
+ "@rollup/plugin-replace": "^6.0.2",
35
+ "@rollup/plugin-typescript": "^12.1.2",
42
36
  "@types/tinycolor2": "^1.4.6",
43
37
  "@web/dev-server": "^0.4.6",
44
- "concurrently": "^9.0.1",
45
- "json-schema-to-typescript": "^15.0.2",
46
- "tslib": "^2.7.0",
47
- "typescript": "^5.6.2"
38
+ "concurrently": "^9.1.2",
39
+ "json-schema-to-typescript": "^15.0.4",
40
+ "tslib": "^2.8.1",
41
+ "typescript": "^5.8.3"
48
42
  },
49
43
  "repository": {
50
44
  "type": "git",
package/src/default-data.json CHANGED
@@ -1,30 +1,38 @@
1
1
  {
2
+ "title": "Demo Chart",
3
+ "subTitle": "This is a demo chart with multiple data series.",
2
4
  "axis": {
3
5
  "timeseries": true,
4
6
  "xAxisLabel": "Time",
7
+ "xAxisZoom": false,
5
8
  "yAxisLabel": "Temperature",
6
- "columnLayout": false
9
+ "yAxisScaling": false,
10
+ "columnLayout": true
7
11
  },
8
12
  "dataseries": [
9
13
  {
10
14
  "label": "Demo Bubble",
11
- "type": "bubble",
12
- "backgroundColor": "#f47272",
13
- "borderColor": "#147272",
15
+ "type": "scatter",
16
+
14
17
  "styling": {
15
- "radius": 4,
16
18
  "borderWidth": 2,
17
19
  "fill": false
18
20
  },
19
21
  "advanced": {
20
- "drawOrder": 1
22
+ "drawOrder": 1,
23
+ "chartName": "Demo Bubble Chart"
21
24
  },
22
25
  "data": [
23
26
  {
24
27
  "x": "2023-11-05T12:47:52.351152+00:00",
25
- "y": 20,
28
+ "y": 40,
26
29
  "r": 10
27
30
  },
31
+ {
32
+ "x": "2023-11-07T12:47:52.351152+00:00",
33
+ "y": 40,
34
+ "r": 70
35
+ },
28
36
  {
29
37
  "x": "2023-11-11T22:47:52.351152+00:00",
30
38
  "y": 32,
@@ -35,12 +43,10 @@
35
43
  {
36
44
  "label": "Demo Bar",
37
45
  "type": "bar",
38
- "backgroundColor": "#F5D7BB",
39
- "borderColor": "#F9A076",
46
+
40
47
  "styling": {
41
48
  "borderWidth": 2,
42
- "radius": 4,
43
- "pointStyle": "rectRounded",
49
+ "pointStyle": "circle",
44
50
  "fill": false
45
51
  },
46
52
  "advanced": {
@@ -71,12 +77,10 @@
71
77
  "styling": {
72
78
  "fill": false,
73
79
  "borderWidth": 2,
74
- "borderDash": "5, 5",
75
- "radius": 7,
76
- "pointStyle": "rectRounded"
80
+ "borderDash": "dotted",
81
+ "pointStyle": "circle"
77
82
  },
78
- "backgroundColor": "#AFF6F9",
79
- "borderColor": "#47BBF5bb",
83
+
80
84
  "advanced": {
81
85
  "drawOrder": 3
82
86
  },
package/src/definition-schema.d.ts CHANGED
@@ -12,7 +12,15 @@ export type Subtitle = string;
12
12
  */
13
13
  export type TimeseriesChart = boolean;
14
14
  export type XAxisLabel = string;
15
+ /**
16
+ * If checked, a zoom tool will be shown on the x-axis to zoom into the chart.
17
+ */
18
+ export type XAxisZoomTool = boolean;
15
19
  export type YAxisLabel = string;
20
+ /**
21
+ * If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.
22
+ */
23
+ export type YAxisScaling = boolean;
16
24
  /**
17
25
  * When multiple charts are drawn, then they will be layed out horizontically or vertically.
18
26
  */
@@ -21,36 +29,19 @@ export type VerticalLayout = boolean;
21
29
  * The name for this data series
22
30
  */
23
31
  export type Label = string;
24
- export type DrawingStyle = "bar" | "line" | "bubble";
32
+ export type DrawingStyle = "bar" | "line" | "scatter";
25
33
  /**
26
34
  * Check this box to turn a line chart into an area chart.
27
35
  */
28
36
  export type LineAreaFill = boolean;
29
37
  /**
30
- * In case of Drawing Type 'bar' this determines the bar's border line width.
38
+ * Width of the lines in the chart.
31
39
  */
32
40
  export type LineWidth = number;
41
+ export type LineDashStyle = "solid" | "dashed" | "dotted";
42
+ export type SymbolStyle = "circle" | "rect" | "roundRect" | "triangle" | "diamond" | "pin" | "arrow" | "none";
33
43
  /**
34
- * Specify dash length and space-between-dashes length like this: [10, 5].
35
- */
36
- export type LineDashStyle = string;
37
- /**
38
- * To disable points, set this to 0.
39
- */
40
- export type PointRadius = number;
41
- export type PointStyle =
42
- | "circle"
43
- | "cross"
44
- | "crossRot"
45
- | "dash"
46
- | "line"
47
- | "rect"
48
- | "rectRounded"
49
- | "rectRot"
50
- | "star"
51
- | "triangle";
52
- /**
53
- * Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.
44
+ * Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers within one chart.
54
45
  */
55
46
  export type DrawOrder = number;
56
47
  /**
@@ -63,9 +54,9 @@ export type ChartName = string;
63
54
  export type XValue = string;
64
55
  export type YValue = number;
65
56
  /**
66
- * Valid only for Bubble Chart type.
57
+ * Valid only for Scatter Chart type.
67
58
  */
68
- export type PointRadius1 = number;
59
+ export type BubbleSize = number;
69
60
  /**
70
61
  * You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify 'city' as split column, then you will get a line for each city.
71
62
  */
@@ -74,56 +65,57 @@ export type SplitDataBy = string;
74
65
  * The data used to draw this data series.
75
66
  */
76
67
  export type Data = {
77
- x?: XValue;
78
- y?: YValue;
79
- r?: PointRadius1;
80
- pivot?: SplitDataBy;
81
- [k: string]: unknown;
68
+ x?: XValue;
69
+ y?: YValue;
70
+ r?: BubbleSize;
71
+ pivot?: SplitDataBy;
72
+ [k: string]: unknown;
82
73
  }[];
83
74
  export type Dataseries = {
84
- label?: Label;
85
- type?: DrawingStyle;
86
- backgroundColor?: FillColor;
87
- borderColor?: LineColor;
88
- styling?: Styling;
89
- advanced?: AdvancedSettings;
90
- data?: Data;
91
- [k: string]: unknown;
75
+ label?: Label;
76
+ type?: DrawingStyle;
77
+ backgroundColor?: FillColor;
78
+ borderColor?: LineColor;
79
+ styling?: Styling;
80
+ advanced?: AdvancedSettings;
81
+ data?: Data;
82
+ [k: string]: unknown;
92
83
  }[];
93
84
 
94
85
  export interface InputData {
95
- title?: Title;
96
- subTitle?: Subtitle;
97
- axis?: AxisSettings;
98
- dataseries?: Dataseries;
99
- [k: string]: unknown;
86
+ title?: Title;
87
+ subTitle?: Subtitle;
88
+ axis?: AxisSettings;
89
+ dataseries?: Dataseries;
90
+ [k: string]: unknown;
100
91
  }
101
92
  export interface AxisSettings {
102
- timeseries?: TimeseriesChart;
103
- xAxisLabel?: XAxisLabel;
104
- yAxisLabel?: YAxisLabel;
105
- columnLayout?: VerticalLayout;
106
- [k: string]: unknown;
93
+ timeseries?: TimeseriesChart;
94
+ xAxisLabel?: XAxisLabel;
95
+ xAxisZoom?: XAxisZoomTool;
96
+ yAxisLabel?: YAxisLabel;
97
+ yAxisScaling?: YAxisScaling;
98
+ columnLayout?: VerticalLayout;
99
+ [k: string]: unknown;
107
100
  }
108
101
  /**
109
102
  * The inner color of the bars if you chose Drawing Type 'bar' or the inner colors of the points if you chose Drawing Type 'line'.
110
103
  */
111
104
  export interface FillColor {
112
- [k: string]: unknown;
105
+ [k: string]: unknown;
113
106
  }
114
107
  export interface LineColor {
115
- [k: string]: unknown;
108
+ [k: string]: unknown;
116
109
  }
117
110
  export interface Styling {
118
- fill?: LineAreaFill;
119
- borderWidth?: LineWidth;
120
- borderDash?: LineDashStyle;
121
- radius?: PointRadius;
122
- pointStyle?: PointStyle;
123
- [k: string]: unknown;
111
+ fill?: LineAreaFill;
112
+ borderWidth?: LineWidth;
113
+ borderDash?: LineDashStyle;
114
+ pointStyle?: SymbolStyle;
115
+ [k: string]: unknown;
124
116
  }
125
117
  export interface AdvancedSettings {
126
- drawOrder?: DrawOrder;
127
- chartName?: ChartName;
128
- [k: string]: unknown;
118
+ drawOrder?: DrawOrder;
119
+ chartName?: ChartName;
120
+ [k: string]: unknown;
129
121
  }
package/src/definition-schema.json CHANGED
@@ -30,18 +30,32 @@
30
30
  "dataDrivenDisabled": false,
31
31
  "order": 4
32
32
  },
33
+ "xAxisZoom": {
34
+ "title": "X-Axis Zoom Tool",
35
+ "type": "boolean",
36
+ "description": "If checked, a zoom tool will be shown on the x-axis to zoom into the chart.",
37
+ "dataDrivenDisabled": true,
38
+ "order": 5
39
+ },
33
40
  "yAxisLabel": {
34
41
  "title": "Y-Axis Label",
35
42
  "type": "string",
36
43
  "dataDrivenDisabled": false,
37
- "order": 5
44
+ "order": 6
45
+ },
46
+ "yAxisScaling": {
47
+ "title": "Y-Axis Scaling",
48
+ "description": "If checked, the Y-Axis will be scaled to the data range. If not checked, the Y-Axis will always start at 0.",
49
+ "type": "boolean",
50
+ "dataDrivenDisabled": true,
51
+ "order": 7
38
52
  },
39
53
  "columnLayout": {
40
54
  "title": "Vertical Layout",
41
55
  "description": "When multiple charts are drawn, then they will be layed out horizontically or vertically.",
42
56
  "type": "boolean",
43
57
  "dataDrivenDisabled": true,
44
- "order": 6
58
+ "order": 8
45
59
  }
46
60
  }
47
61
  },
@@ -63,7 +77,7 @@
63
77
  "type": {
64
78
  "title": "Drawing Style",
65
79
  "type": "string",
66
- "enum": ["bar", "line", "bubble"],
80
+ "enum": ["bar", "line", "scatter"],
67
81
  "required": true,
68
82
  "dataDrivenDisabled": true,
69
83
  "order": 2
@@ -96,39 +110,31 @@
96
110
  },
97
111
  "borderWidth": {
98
112
  "title": "Line Width",
99
- "description": "In case of Drawing Type 'bar' this determines the bar's border line width.",
113
+ "description": "Width of the lines in the chart.",
100
114
  "type": "number",
101
115
  "dataDrivenDisabled": true,
102
116
  "order": 2
103
117
  },
104
118
  "borderDash": {
105
119
  "title": "Line Dash Style",
106
- "description": "Specify dash length and space-between-dashes length like this: [10, 5].",
120
+ "description": "",
107
121
  "type": "string",
122
+ "enum": ["solid", "dashed", "dotted"],
108
123
  "dataDrivenDisabled": true,
109
124
  "order": 3
110
125
  },
111
- "radius": {
112
- "title": "Point Radius",
113
- "description": "To disable points, set this to 0.",
114
- "type": "number",
115
- "minimum": 0,
116
- "order": 4
117
- },
118
126
  "pointStyle": {
119
- "title": "Point Style",
127
+ "title": "Symbol Style",
120
128
  "type": "string",
121
129
  "enum": [
122
130
  "circle",
123
- "cross",
124
- "crossRot",
125
- "dash",
126
- "line",
127
131
  "rect",
128
- "rectRounded",
129
- "rectRot",
130
- "star",
131
- "triangle"
132
+ "roundRect",
133
+ "triangle",
134
+ "diamond",
135
+ "pin",
136
+ "arrow",
137
+ "none"
132
138
  ],
133
139
  "order": 5
134
140
  }
@@ -142,7 +148,7 @@
142
148
  "properties": {
143
149
  "drawOrder": {
144
150
  "title": "Draw Order",
145
- "description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.",
151
+ "description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers within one chart.",
146
152
  "type": "number",
147
153
  "dataDrivenDisabled": true,
148
154
  "order": 2
@@ -178,8 +184,8 @@
178
184
  "required": true
179
185
  },
180
186
  "r": {
181
- "title": "Point Radius",
182
- "description": "Valid only for Bubble Chart type.",
187
+ "title": "Bubble Size",
188
+ "description": "Valid only for Scatter Chart type.",
183
189
  "order": 3,
184
190
  "type": "number"
185
191
  },