@record-evolution/widget-linechart 1.4.9

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 (12) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +155 -0
  3. package/dist/src/types.d.ts +32 -0
  4. package/dist/src/widget-linechart.d.ts +15 -0
  5. package/dist/tsconfig.tsbuildinfo +1 -0
  6. package/dist/widget-linechart.js +24313 -0
  7. package/dist/widget-linechart.js.map +1 -0
  8. package/package.json +57 -0
  9. package/src/default-data.json +79 -0
  10. package/src/definition-schema.json +160 -0
  11. package/src/types.ts +34 -0
  12. package/src/widget-linechart.ts +371 -0
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "@record-evolution/widget-linechart",
3
+ "description": "Webcomponent widget-linechart following open-wc recommendations",
4
+ "license": "MIT",
5
+ "author": "widget-linechart",
6
+ "version": "1.4.9",
7
+ "type": "module",
8
+ "main": "dist/widget-linechart.js",
9
+ "types": "dist/src/widget-linechart.d.ts",
10
+ "files": [
11
+ "dist",
12
+ "src"
13
+ ],
14
+ "scripts": {
15
+ "analyze": "cem analyze --litelement",
16
+ "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
17
+ "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
18
+ "watch": "rollup -w -c rollup.config.js --bundleConfigAsCjs",
19
+ "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
20
+ },
21
+ "dependencies": {
22
+ "chart.js": "^4.4.0",
23
+ "chartjs-adapter-date-fns": "^3.0.0",
24
+ "chartjs-adapter-dayjs-4": "^1.0.4",
25
+ "chartjs-adapter-moment": "^1.0.1",
26
+ "date-fns": "^2.30.0",
27
+ "dayjs": "^1.11.10",
28
+ "lit": "^3.0.2",
29
+ "moment": "^2.29.4",
30
+ "tinycolor2": "^1.6.0"
31
+ },
32
+ "devDependencies": {
33
+ "@custom-elements-manifest/analyzer": "^0.9.0",
34
+ "@rollup/plugin-babel": "^6.0.4",
35
+ "@rollup/plugin-commonjs": "^25.0.7",
36
+ "@rollup/plugin-node-resolve": "^15.2.3",
37
+ "@rollup/plugin-replace": "^5.0.5",
38
+ "@rollup/plugin-typescript": "^11.1.5",
39
+ "@types/tinycolor2": "^1.4.6",
40
+ "@web/dev-server": "^0.4.0",
41
+ "concurrently": "^8.2.2",
42
+ "tslib": "^2.6.2",
43
+ "typescript": "^5.2.2"
44
+ },
45
+ "repository": {
46
+ "type": "git",
47
+ "url": "git+https://github.com/RecordEvolution/widget-linechart.git"
48
+ },
49
+ "keywords": [
50
+ "widget",
51
+ "linechart"
52
+ ],
53
+ "bugs": {
54
+ "url": "https://github.com/RecordEvolution/widget-linechart/issues"
55
+ },
56
+ "homepage": "https://github.com/RecordEvolution/widget-linechart#readme"
57
+ }
package/src/default-data.json ADDED
@@ -0,0 +1,79 @@
1
+ {
2
+ "settings": {
3
+ "timeseries": true,
4
+ "xAxisLabel": "Time",
5
+ "yAxisLabel": "Temperature",
6
+ "columnLayout": false
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
21
+ },
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
39
+ },
40
+ {
41
+ "x": "2023-11-05T22:47:52.351152+00:00",
42
+ "y": 10
43
+ },
44
+ {
45
+ "x": "2023-11-07T22:47:52.351152+00:00",
46
+ "y": 59
47
+ },
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
69
+ },
70
+ {
71
+ "x": "2023-11-08T09:47:52.351152+00:00",
72
+ "y": 55
73
+ },
74
+ {
75
+ "x": "2023-11-11T22:47:52.351152+00:00",
76
+ "y": 20
77
+ }]
78
+ }]
79
+ }
package/src/definition-schema.json ADDED
@@ -0,0 +1,160 @@
1
+
2
+ {
3
+ "title": "Configure the Chart",
4
+ "type": "object",
5
+ "properties": {
6
+ "settings": {
7
+ "title": "Global Settings",
8
+ "type": "object",
9
+ "order": 1,
10
+ "properties": {
11
+ "title": {
12
+ "title": "Title",
13
+ "type": "string",
14
+ "order": 1
15
+ },
16
+ "subTitle": {
17
+ "title": "Subtitle",
18
+ "type": "string",
19
+ "order": 2
20
+ },
21
+ "timeseries": {
22
+ "title": "Timeseries Chart",
23
+ "description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
24
+ "type": "boolean",
25
+ "order": 3
26
+ },
27
+ "xAxisLabel": {
28
+ "title": "X-Axis Label",
29
+ "type": "string",
30
+ "order": 4
31
+ },
32
+ "yAxisLabel": {
33
+ "title": "Y-Axis Label",
34
+ "type": "string",
35
+ "order": 5
36
+ },
37
+ "columnLayout": {
38
+ "title": "Vertical Layout",
39
+ "description": "When multiple charts are drawn, then they will be layed out horizontically or vertically.",
40
+ "type": "boolean",
41
+ "order": 6
42
+ }
43
+ }
44
+ },
45
+ "dataseries": {
46
+ "title": "Dataseries",
47
+ "type": "array",
48
+ "order": 2,
49
+ "items": {
50
+ "type": "object",
51
+ "properties": {
52
+ "label": {
53
+ "title": "Label",
54
+ "description": "The name for this data series",
55
+ "type": "string",
56
+ "required": true,
57
+ "order": 1
58
+ },
59
+ "order": {
60
+ "title": "Draw Order",
61
+ "description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.",
62
+ "type": "number",
63
+ "order": 2
64
+ },
65
+ "chartName": {
66
+ "title": "Chart",
67
+ "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 ends with #pivot# then a separat chart will be drawn for each pivoted dataseries.",
68
+ "type": "string",
69
+ "order": 3
70
+ },
71
+ "type": {
72
+ "title": "Drawing Style",
73
+ "type": "string",
74
+ "enum": ["bar", "line", "bubble"],
75
+ "required": true,
76
+ "order": 4
77
+ },
78
+ "radius": {
79
+ "title": "Point Radius",
80
+ "description": "To disable points, set this to 0.",
81
+ "type": "number",
82
+ "minimum": 1,
83
+ "maximum": 100,
84
+ "order": 6
85
+ },
86
+ "pointStyle": {
87
+ "title": "Point Style",
88
+ "type": "string",
89
+ "enum": ["circle", "cross", "crossRot", "dash", "line", "rect", "rectRounded", "rectRot", "star", "triangle"],
90
+ "order": 7
91
+ },
92
+ "backgroundColor": {
93
+ "title": "Point or Bar Color",
94
+ "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'.",
95
+ "type": "color",
96
+ "order": 8
97
+ },
98
+ "borderColor": {
99
+ "title": "Line Color",
100
+ "type": "color",
101
+ "order": 9
102
+ },
103
+ "borderWidth": {
104
+ "title": "Line Width",
105
+ "description": "In case of Drawing Type 'bar' this determines the bar's border line width.",
106
+ "type": "number",
107
+ "order": 10
108
+ },
109
+ "borderDash": {
110
+ "title": "Line Dash Style",
111
+ "description": "Specify dash length and space-between-dashes length like this: [10, 5].",
112
+ "type": "string",
113
+ "order": 11
114
+ },
115
+ "fill": {
116
+ "title": "Line Area Fill",
117
+ "description": "Check this box to turn a line chart into an area chart.",
118
+ "type": "boolean",
119
+ "order": 12
120
+ },
121
+ "data": {
122
+ "title": "Data",
123
+ "description": "The data used to draw this data series.",
124
+ "type": "array",
125
+ "order": 13,
126
+ "buffersize": 1000,
127
+ "items": {
128
+ "type": "object",
129
+ "properties": {
130
+ "x": {
131
+ "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.",
132
+ "type": "string",
133
+ "order": 1,
134
+ "required": true
135
+ },
136
+ "y": {
137
+ "type": "number",
138
+ "order": 2,
139
+ "required": true
140
+ },
141
+ "r": {
142
+ "title": "Point Radius",
143
+ "description": "Valid only for Bubble Chart type.",
144
+ "order": 3,
145
+ "type": "number"
146
+ },
147
+ "pivot": {
148
+ "title": "Pivot Column",
149
+ "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.",
150
+ "order": 4,
151
+ "type": "string"
152
+ }
153
+ }
154
+ }
155
+ }
156
+ }
157
+ }
158
+ }
159
+ }
160
+ }
package/src/types.ts ADDED
@@ -0,0 +1,34 @@
1
+ export interface InputData {
2
+ settings: Settings,
3
+ dataseries: Dataseries[]
4
+ }
5
+ export interface Settings {
6
+ title: string
7
+ subTitle: string
8
+ timeseries: boolean
9
+ xAxisLabel: string
10
+ yAxisLabel: string
11
+ columnLayout: boolean
12
+ }
13
+
14
+ export interface Dataseries {
15
+ label: string
16
+ type: string
17
+ chartName: string
18
+ showLine: boolean
19
+ radius: number
20
+ pointStyle: string
21
+ backgroundColor: string
22
+ borderColor: string
23
+ borderWidth: number
24
+ borderDash?: string
25
+ fill: boolean
26
+ data: Data[]
27
+ }
28
+
29
+ export interface Data {
30
+ x: string
31
+ y: number
32
+ r: number
33
+ pivot: string
34
+ }