@record-evolution/widget-linechart 1.4.14 → 1.5.1

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 (10) hide show
  1. package/README.md +6 -98
  2. package/dist/src/widget-linechart.d.ts +2 -2
  3. package/dist/tsconfig.tsbuildinfo +1 -1
  4. package/dist/widget-linechart.js +4345 -4661
  5. package/dist/widget-linechart.js.map +1 -1
  6. package/package.json +16 -16
  7. package/src/default-data.json +91 -67
  8. package/src/definition-schema.d.ts +53 -39
  9. package/src/definition-schema.json +92 -74
  10. package/src/widget-linechart.ts +52 -53
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.4.14",
6
+ "version": "1.5.1",
7
7
  "type": "module",
8
8
  "main": "dist/widget-linechart.js",
9
9
  "types": "dist/src/widget-linechart.d.ts",
@@ -20,29 +20,29 @@
20
20
  "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
21
21
  },
22
22
  "dependencies": {
23
- "chart.js": "^4.4.0",
23
+ "chart.js": "^4.4.4",
24
24
  "chartjs-adapter-date-fns": "^3.0.0",
25
25
  "chartjs-adapter-dayjs-4": "^1.0.4",
26
26
  "chartjs-adapter-moment": "^1.0.1",
27
- "date-fns": "^2.30.0",
28
- "dayjs": "^1.11.10",
29
- "lit": "^3.0.2",
30
- "moment": "^2.29.4",
27
+ "date-fns": "^4.1.0",
28
+ "dayjs": "^1.11.13",
29
+ "lit": "^3.2.0",
30
+ "moment": "^2.30.1",
31
31
  "tinycolor2": "^1.6.0"
32
32
  },
33
33
  "devDependencies": {
34
- "@custom-elements-manifest/analyzer": "^0.9.0",
34
+ "@custom-elements-manifest/analyzer": "^0.10.3",
35
35
  "@rollup/plugin-babel": "^6.0.4",
36
- "@rollup/plugin-commonjs": "^25.0.7",
37
- "@rollup/plugin-node-resolve": "^15.2.3",
38
- "@rollup/plugin-replace": "^5.0.5",
39
- "@rollup/plugin-typescript": "^11.1.5",
36
+ "@rollup/plugin-commonjs": "^28.0.0",
37
+ "@rollup/plugin-node-resolve": "^15.3.0",
38
+ "@rollup/plugin-replace": "^6.0.1",
39
+ "@rollup/plugin-typescript": "^12.1.0",
40
40
  "@types/tinycolor2": "^1.4.6",
41
- "@web/dev-server": "^0.4.0",
42
- "concurrently": "^8.2.2",
43
- "json-schema-to-typescript": "^13.1.1",
44
- "tslib": "^2.6.2",
45
- "typescript": "^5.2.2"
41
+ "@web/dev-server": "^0.4.6",
42
+ "concurrently": "^9.0.1",
43
+ "json-schema-to-typescript": "^15.0.2",
44
+ "tslib": "^2.7.0",
45
+ "typescript": "^5.6.2"
46
46
  },
47
47
  "repository": {
48
48
  "type": "git",
package/src/default-data.json CHANGED
@@ -1,79 +1,103 @@
1
1
  {
2
- "settings": {
2
+ "axis": {
3
3
  "timeseries": true,
4
4
  "xAxisLabel": "Time",
5
5
  "yAxisLabel": "Temperature",
6
6
  "columnLayout": false
7
7
  },
8
- "dataseries": [{
9
- "label": "Demo Bubble",
10
- "type": "bubble",
11
- "radius": 4,
12
- "backgroundColor": "#f47272",
13
- "borderColor": "#147272",
14
- "borderWidth": 2,
15
- "fill": false,
16
- "data": [
17
- {
18
- "x": "2023-11-05T12:47:52.351152+00:00",
19
- "y": 20,
20
- "r": 10
8
+ "dataseries": [
9
+ {
10
+ "label": "Demo Bubble",
11
+ "type": "bubble",
12
+ "backgroundColor": "#f47272",
13
+ "borderColor": "#147272",
14
+ "styling": {
15
+ "radius": 4,
16
+ "borderWidth": 2,
17
+ "fill": false
21
18
  },
22
- {
23
- "x": "2023-11-11T22:47:52.351152+00:00",
24
- "y": 22,
25
- "r": 27
26
- }]
27
- },{
28
- "label": "Demo Bar",
29
- "type": "bar",
30
- "radius": 4,
31
- "pointStyle": "rectRounded",
32
- "backgroundColor": "#D7BBF5",
33
- "borderColor": "#A076F9",
34
- "borderWidth": 2,
35
- "fill": false,
36
- "data": [{
37
- "x": "2023-11-04T22:47:52.351152+00:00",
38
- "y": 28
19
+ "advanced": {
20
+ "drawOrder": 1
39
21
  },
40
- {
41
- "x": "2023-11-05T22:47:52.351152+00:00",
42
- "y": 10
22
+ "data": [
23
+ {
24
+ "x": "2023-11-05T12:47:52.351152+00:00",
25
+ "y": 20,
26
+ "r": 10
27
+ },
28
+ {
29
+ "x": "2023-11-11T22:47:52.351152+00:00",
30
+ "y": 32,
31
+ "r": 27
32
+ }
33
+ ]
34
+ },
35
+ {
36
+ "label": "Demo Bar",
37
+ "type": "bar",
38
+ "backgroundColor": "#F5D7BB",
39
+ "borderColor": "#F9A076",
40
+ "styling": {
41
+ "borderWidth": 2,
42
+ "radius": 4,
43
+ "pointStyle": "rectRounded",
44
+ "fill": false
43
45
  },
44
- {
45
- "x": "2023-11-07T22:47:52.351152+00:00",
46
- "y": 59
46
+ "advanced": {
47
+ "drawOrder": 2
47
48
  },
48
- {
49
- "x": "2023-11-10T22:47:52.351152+00:00",
50
- "y": 42
51
- }]
52
- },
53
- {
54
- "label": "Demo Line",
55
- "type": "line",
56
- "radius": 7,
57
- "pointStyle": "rectRounded",
58
- "backgroundColor": "#AFF6F9",
59
- "borderColor": "#47BBF5bb",
60
- "borderWidth": 2,
61
- "fill": false,
62
- "data": [{
63
- "x": "2023-11-03T22:47:52.351152+00:00",
64
- "y": 20
65
- },
66
- {
67
- "x": "2023-11-06T09:47:52.351152+00:00",
68
- "y": 40
49
+ "data": [
50
+ {
51
+ "x": "2023-11-04T22:47:52.351152+00:00",
52
+ "y": 28
53
+ },
54
+ {
55
+ "x": "2023-11-05T22:47:52.351152+00:00",
56
+ "y": 10
57
+ },
58
+ {
59
+ "x": "2023-11-07T22:47:52.351152+00:00",
60
+ "y": 59
61
+ },
62
+ {
63
+ "x": "2023-11-10T22:47:52.351152+00:00",
64
+ "y": 42
65
+ }
66
+ ]
67
+ },
68
+ {
69
+ "label": "Demo Line",
70
+ "type": "line",
71
+ "styling": {
72
+ "fill": false,
73
+ "borderWidth": 2,
74
+ "borderDash": "5, 5",
75
+ "radius": 7,
76
+ "pointStyle": "rectRounded"
69
77
  },
70
- {
71
- "x": "2023-11-08T09:47:52.351152+00:00",
72
- "y": 55
78
+ "backgroundColor": "#AFF6F9",
79
+ "borderColor": "#47BBF5bb",
80
+ "advanced": {
81
+ "drawOrder": 3
73
82
  },
74
- {
75
- "x": "2023-11-11T22:47:52.351152+00:00",
76
- "y": 20
77
- }]
78
- }]
79
- }
83
+ "data": [
84
+ {
85
+ "x": "2023-11-03T22:47:52.351152+00:00",
86
+ "y": 20
87
+ },
88
+ {
89
+ "x": "2023-11-06T09:47:52.351152+00:00",
90
+ "y": 40
91
+ },
92
+ {
93
+ "x": "2023-11-08T09:47:52.351152+00:00",
94
+ "y": 45
95
+ },
96
+ {
97
+ "x": "2023-11-11T22:47:52.351152+00:00",
98
+ "y": 20
99
+ }
100
+ ]
101
+ }
102
+ ]
103
+ }
package/src/definition-schema.d.ts CHANGED
@@ -21,15 +21,19 @@ export type VerticalLayout = boolean;
21
21
  * The name for this data series
22
22
  */
23
23
  export type Label = string;
24
+ export type DrawingStyle = "bar" | "line" | "bubble";
24
25
  /**
25
- * Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.
26
+ * Check this box to turn a line chart into an area chart.
26
27
  */
27
- export type DrawOrder = number;
28
+ export type LineAreaFill = boolean;
29
+ /**
30
+ * In case of Drawing Type 'bar' this determines the bar's border line width.
31
+ */
32
+ export type LineWidth = number;
28
33
  /**
29
- * If two dataseries have the same 'Chart' name, they will be drawn in the same chart. Otherwise they will get their own chart. If the name ends with #pivot# then a separat chart will be drawn for each pivoted dataseries.
34
+ * Specify dash length and space-between-dashes length like this: [10, 5].
30
35
  */
31
- export type Chart = string;
32
- export type DrawingStyle = "bar" | "line" | "bubble";
36
+ export type LineDashStyle = string;
33
37
  /**
34
38
  * To disable points, set this to 0.
35
39
  */
@@ -46,70 +50,80 @@ export type PointStyle =
46
50
  | "star"
47
51
  | "triangle";
48
52
  /**
49
- * 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'.
50
- */
51
- export type PointOrBarColor = string;
52
- export type LineColor = string;
53
- /**
54
- * In case of Drawing Type 'bar' this determines the bar's border line width.
53
+ * Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.
55
54
  */
56
- export type LineWidth = number;
55
+ export type DrawOrder = number;
57
56
  /**
58
- * Specify dash length and space-between-dashes length like this: [10, 5].
57
+ * If two dataseries have the same 'Chart Name', they will be drawn in the same chart. Otherwise they will get their own chart. If the name contains #split# as substring then a separat chart will be drawn for each split dataseries.
59
58
  */
60
- export type LineDashStyle = string;
59
+ export type ChartName = string;
61
60
  /**
62
- * Check this box to turn a line chart into an area chart.
61
+ * 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.
63
62
  */
64
- export type LineAreaFill = boolean;
63
+ export type XValue = string;
64
+ export type YValue = number;
65
65
  /**
66
66
  * Valid only for Bubble Chart type.
67
67
  */
68
68
  export type PointRadius1 = number;
69
69
  /**
70
- * 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 pivot column, then you will get a line for each city.
70
+ * 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
71
  */
72
- export type PivotColumn = string;
72
+ export type SplitDataBy = string;
73
73
  /**
74
74
  * The data used to draw this data series.
75
75
  */
76
76
  export type Data = {
77
- /**
78
- * 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.
79
- */
80
- x: string;
81
- y: number;
77
+ x?: XValue;
78
+ y?: YValue;
82
79
  r?: PointRadius1;
83
- pivot?: PivotColumn;
80
+ pivot?: SplitDataBy;
84
81
  [k: string]: unknown;
85
82
  }[];
86
83
  export type Dataseries = {
87
- label: Label;
88
- order?: DrawOrder;
89
- chartName?: Chart;
90
- type: DrawingStyle;
91
- radius?: PointRadius;
92
- pointStyle?: PointStyle;
93
- backgroundColor?: PointOrBarColor;
84
+ label?: Label;
85
+ type?: DrawingStyle;
86
+ backgroundColor?: FillColor;
94
87
  borderColor?: LineColor;
95
- borderWidth?: LineWidth;
96
- borderDash?: LineDashStyle;
97
- fill?: LineAreaFill;
88
+ styling?: Styling;
89
+ advanced?: AdvancedSettings;
98
90
  data?: Data;
99
91
  [k: string]: unknown;
100
92
  }[];
101
93
 
102
- export interface ConfigureTheChart {
103
- settings?: GlobalSettings;
94
+ export interface InputData {
95
+ title?: Title;
96
+ subTitle?: Subtitle;
97
+ axis?: AxisSettings;
104
98
  dataseries?: Dataseries;
105
99
  [k: string]: unknown;
106
100
  }
107
- export interface GlobalSettings {
108
- title?: Title;
109
- subTitle?: Subtitle;
101
+ export interface AxisSettings {
110
102
  timeseries?: TimeseriesChart;
111
103
  xAxisLabel?: XAxisLabel;
112
104
  yAxisLabel?: YAxisLabel;
113
105
  columnLayout?: VerticalLayout;
114
106
  [k: string]: unknown;
115
107
  }
108
+ /**
109
+ * 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
+ */
111
+ export interface FillColor {
112
+ [k: string]: unknown;
113
+ }
114
+ export interface LineColor {
115
+ [k: string]: unknown;
116
+ }
117
+ export interface Styling {
118
+ fill?: LineAreaFill;
119
+ borderWidth?: LineWidth;
120
+ borderDash?: LineDashStyle;
121
+ radius?: PointRadius;
122
+ pointStyle?: PointStyle;
123
+ [k: string]: unknown;
124
+ }
125
+ export interface AdvancedSettings {
126
+ drawOrder?: DrawOrder;
127
+ chartName?: ChartName;
128
+ [k: string]: unknown;
129
+ }
package/src/definition-schema.json CHANGED
@@ -1,22 +1,22 @@
1
1
  {
2
- "title": "Configure the Chart",
2
+ "title": "inputData",
3
3
  "type": "object",
4
4
  "properties": {
5
- "settings": {
6
- "title": "Global Settings",
5
+ "title": {
6
+ "title": "Title",
7
+ "type": "string",
8
+ "order": 1
9
+ },
10
+ "subTitle": {
11
+ "title": "Subtitle",
12
+ "type": "string",
13
+ "order": 2
14
+ },
15
+ "axis": {
16
+ "title": "Axis Settings",
7
17
  "type": "object",
8
- "order": 1,
18
+ "order": 3,
9
19
  "properties": {
10
- "title": {
11
- "title": "Title",
12
- "type": "string",
13
- "order": 1
14
- },
15
- "subTitle": {
16
- "title": "Subtitle",
17
- "type": "string",
18
- "order": 2
19
- },
20
20
  "timeseries": {
21
21
  "title": "Timeseries Chart",
22
22
  "description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
@@ -44,7 +44,7 @@
44
44
  "dataseries": {
45
45
  "title": "Dataseries",
46
46
  "type": "array",
47
- "order": 2,
47
+ "order": 4,
48
48
  "items": {
49
49
  "type": "object",
50
50
  "properties": {
@@ -55,96 +55,114 @@
55
55
  "required": true,
56
56
  "order": 1
57
57
  },
58
- "order": {
59
- "title": "Draw Order",
60
- "description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.",
61
- "type": "number",
62
- "order": 2
63
- },
64
- "chartName": {
65
- "title": "Chart",
66
- "description": "If two dataseries have the same 'Chart' name, they will be drawn in the same chart. Otherwise they will get their own chart. If the name contains #pivot# as substring then a separat chart will be drawn for each pivoted dataseries.",
67
- "type": "string",
68
- "order": 3
69
- },
70
58
  "type": {
71
59
  "title": "Drawing Style",
72
60
  "type": "string",
73
61
  "enum": ["bar", "line", "bubble"],
74
62
  "required": true,
75
- "order": 4
76
- },
77
- "radius": {
78
- "title": "Point Radius",
79
- "description": "To disable points, set this to 0.",
80
- "type": "number",
81
- "minimum": 0,
82
- "order": 6
83
- },
84
- "pointStyle": {
85
- "title": "Point Style",
86
- "type": "string",
87
- "enum": [
88
- "circle",
89
- "cross",
90
- "crossRot",
91
- "dash",
92
- "line",
93
- "rect",
94
- "rectRounded",
95
- "rectRot",
96
- "star",
97
- "triangle"
98
- ],
99
- "order": 7
63
+ "order": 2
100
64
  },
101
65
  "backgroundColor": {
102
- "title": "Point or Bar Color",
66
+ "title": "Fill Color",
103
67
  "description": "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'.",
104
68
  "type": "color",
105
69
  "color": true,
106
- "order": 8
70
+ "order": 3
107
71
  },
108
72
  "borderColor": {
109
73
  "title": "Line Color",
110
74
  "type": "color",
111
75
  "color": true,
112
- "order": 9
113
- },
114
- "borderWidth": {
115
- "title": "Line Width",
116
- "description": "In case of Drawing Type 'bar' this determines the bar's border line width.",
117
- "type": "number",
118
- "order": 10
76
+ "order": 4
119
77
  },
120
- "borderDash": {
121
- "title": "Line Dash Style",
122
- "description": "Specify dash length and space-between-dashes length like this: [10, 5].",
123
- "type": "string",
124
- "order": 11
78
+ "styling": {
79
+ "title": "Styling",
80
+ "description": "",
81
+ "type": "object",
82
+ "order": 6,
83
+ "properties": {
84
+ "fill": {
85
+ "title": "Line Area Fill",
86
+ "description": "Check this box to turn a line chart into an area chart.",
87
+ "type": "boolean",
88
+ "order": 1
89
+ },
90
+ "borderWidth": {
91
+ "title": "Line Width",
92
+ "description": "In case of Drawing Type 'bar' this determines the bar's border line width.",
93
+ "type": "number",
94
+ "order": 2
95
+ },
96
+ "borderDash": {
97
+ "title": "Line Dash Style",
98
+ "description": "Specify dash length and space-between-dashes length like this: [10, 5].",
99
+ "type": "string",
100
+ "order": 3
101
+ },
102
+ "radius": {
103
+ "title": "Point Radius",
104
+ "description": "To disable points, set this to 0.",
105
+ "type": "number",
106
+ "minimum": 0,
107
+ "order": 4
108
+ },
109
+ "pointStyle": {
110
+ "title": "Point Style",
111
+ "type": "string",
112
+ "enum": [
113
+ "circle",
114
+ "cross",
115
+ "crossRot",
116
+ "dash",
117
+ "line",
118
+ "rect",
119
+ "rectRounded",
120
+ "rectRot",
121
+ "star",
122
+ "triangle"
123
+ ],
124
+ "order": 5
125
+ }
126
+ }
125
127
  },
126
- "fill": {
127
- "title": "Line Area Fill",
128
- "description": "Check this box to turn a line chart into an area chart.",
129
- "type": "boolean",
130
- "order": 12
128
+ "advanced": {
129
+ "title": "Advanced Settings",
130
+ "description": "",
131
+ "type": "object",
132
+ "order": 7,
133
+ "properties": {
134
+ "drawOrder": {
135
+ "title": "Draw Order",
136
+ "description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.",
137
+ "type": "number",
138
+ "order": 2
139
+ },
140
+ "chartName": {
141
+ "title": "Chart Name",
142
+ "description": "If two dataseries have the same 'Chart Name', they will be drawn in the same chart. Otherwise they will get their own chart. If the name contains #split# as substring then a separat chart will be drawn for each split dataseries.",
143
+ "type": "string",
144
+ "order": 3
145
+ }
146
+ }
131
147
  },
132
148
  "data": {
133
149
  "title": "Data",
134
150
  "description": "The data used to draw this data series.",
135
151
  "type": "array",
136
- "order": 13,
152
+ "order": 5,
137
153
  "buffersize": 1000,
138
154
  "items": {
139
155
  "type": "object",
140
156
  "properties": {
141
157
  "x": {
158
+ "title": "X-Value",
142
159
  "description": "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.",
143
160
  "type": "string",
144
161
  "order": 1,
145
162
  "required": true
146
163
  },
147
164
  "y": {
165
+ "title": "Y-Value",
148
166
  "type": "number",
149
167
  "order": 2,
150
168
  "required": true
@@ -156,8 +174,8 @@
156
174
  "type": "number"
157
175
  },
158
176
  "pivot": {
159
- "title": "Pivot Column",
160
- "description": "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 pivot column, then you will get a line for each city.",
177
+ "title": "Split Data by",
178
+ "description": "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.",
161
179
  "order": 4,
162
180
  "type": "string"
163
181
  }