@record-evolution/widget-linechart 1.5.3 → 1.5.5
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.
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
|
+
"version": "1.5.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/widget-linechart.js",
|
|
9
9
|
"types": "dist/src/widget-linechart.d.ts",
|
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
"scripts": {
|
|
15
15
|
"analyze": "cem analyze --litelement",
|
|
16
16
|
"start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
17
|
+
"link": "npm link && cd ../RESWARM/frontend && npm link @record-evolution/widget-linechart",
|
|
18
|
+
"unlink": "npm unlink --global && cd ../RESWARM/frontend && npm unlink @record-evolution/widget-linechart && npm i @record-evolution/widget-linechart",
|
|
17
19
|
"build": "rollup -c rollup.config.js",
|
|
18
20
|
"watch": "rollup -w -c rollup.config.js",
|
|
19
21
|
"types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
|
|
@@ -21,22 +21,26 @@
|
|
|
21
21
|
"title": "Timeseries Chart",
|
|
22
22
|
"description": "This will apply a proper time series x-Axis. Check if your x-values are timestamps.",
|
|
23
23
|
"type": "boolean",
|
|
24
|
+
"dataDrivenDisabled": true,
|
|
24
25
|
"order": 3
|
|
25
26
|
},
|
|
26
27
|
"xAxisLabel": {
|
|
27
28
|
"title": "X-Axis Label",
|
|
28
29
|
"type": "string",
|
|
30
|
+
"dataDrivenDisabled": true,
|
|
29
31
|
"order": 4
|
|
30
32
|
},
|
|
31
33
|
"yAxisLabel": {
|
|
32
34
|
"title": "Y-Axis Label",
|
|
33
35
|
"type": "string",
|
|
36
|
+
"dataDrivenDisabled": true,
|
|
34
37
|
"order": 5
|
|
35
38
|
},
|
|
36
39
|
"columnLayout": {
|
|
37
40
|
"title": "Vertical Layout",
|
|
38
41
|
"description": "When multiple charts are drawn, then they will be layed out horizontically or vertically.",
|
|
39
42
|
"type": "boolean",
|
|
43
|
+
"dataDrivenDisabled": true,
|
|
40
44
|
"order": 6
|
|
41
45
|
}
|
|
42
46
|
}
|
|
@@ -44,6 +48,7 @@
|
|
|
44
48
|
"dataseries": {
|
|
45
49
|
"title": "Dataseries",
|
|
46
50
|
"type": "array",
|
|
51
|
+
"dataDrivenDisabled": true,
|
|
47
52
|
"order": 4,
|
|
48
53
|
"items": {
|
|
49
54
|
"type": "object",
|
|
@@ -60,6 +65,7 @@
|
|
|
60
65
|
"type": "string",
|
|
61
66
|
"enum": ["bar", "line", "bubble"],
|
|
62
67
|
"required": true,
|
|
68
|
+
"dataDrivenDisabled": true,
|
|
63
69
|
"order": 2
|
|
64
70
|
},
|
|
65
71
|
"backgroundColor": {
|
|
@@ -85,18 +91,21 @@
|
|
|
85
91
|
"title": "Line Area Fill",
|
|
86
92
|
"description": "Check this box to turn a line chart into an area chart.",
|
|
87
93
|
"type": "boolean",
|
|
94
|
+
"dataDrivenDisabled": true,
|
|
88
95
|
"order": 1
|
|
89
96
|
},
|
|
90
97
|
"borderWidth": {
|
|
91
98
|
"title": "Line Width",
|
|
92
99
|
"description": "In case of Drawing Type 'bar' this determines the bar's border line width.",
|
|
93
100
|
"type": "number",
|
|
101
|
+
"dataDrivenDisabled": true,
|
|
94
102
|
"order": 2
|
|
95
103
|
},
|
|
96
104
|
"borderDash": {
|
|
97
105
|
"title": "Line Dash Style",
|
|
98
106
|
"description": "Specify dash length and space-between-dashes length like this: [10, 5].",
|
|
99
107
|
"type": "string",
|
|
108
|
+
"dataDrivenDisabled": true,
|
|
100
109
|
"order": 3
|
|
101
110
|
},
|
|
102
111
|
"radius": {
|
|
@@ -135,12 +144,14 @@
|
|
|
135
144
|
"title": "Draw Order",
|
|
136
145
|
"description": "Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.",
|
|
137
146
|
"type": "number",
|
|
147
|
+
"dataDrivenDisabled": true,
|
|
138
148
|
"order": 2
|
|
139
149
|
},
|
|
140
150
|
"chartName": {
|
|
141
151
|
"title": "Chart Name",
|
|
142
152
|
"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
153
|
"type": "string",
|
|
154
|
+
"dataDrivenDisabled": true,
|
|
144
155
|
"order": 3
|
|
145
156
|
}
|
|
146
157
|
}
|
|
@@ -150,7 +161,6 @@
|
|
|
150
161
|
"description": "The data used to draw this data series.",
|
|
151
162
|
"type": "array",
|
|
152
163
|
"order": 5,
|
|
153
|
-
"buffersize": 1000,
|
|
154
164
|
"items": {
|
|
155
165
|
"type": "object",
|
|
156
166
|
"properties": {
|
package/src/widget-linechart.ts
CHANGED
|
@@ -11,13 +11,14 @@ import { InputData } from './definition-schema.js'
|
|
|
11
11
|
|
|
12
12
|
type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
|
|
13
13
|
type Data = Exclude<Dataseries['data'], undefined>[number]
|
|
14
|
+
type ChartCombination = { chartJsInstance?: Chart; dataSets: ChartDataset[] }
|
|
14
15
|
|
|
15
16
|
export class WidgetLinechart extends LitElement {
|
|
16
17
|
@property({ type: Object })
|
|
17
18
|
inputData?: InputData
|
|
18
19
|
|
|
19
20
|
@state()
|
|
20
|
-
private canvasList: Map<string,
|
|
21
|
+
private canvasList: Map<string, ChartCombination> = new Map()
|
|
21
22
|
|
|
22
23
|
version: string = 'versionplaceholder'
|
|
23
24
|
chartContainer?: HTMLElement | DocumentFragment
|
|
@@ -90,7 +91,11 @@ export class WidgetLinechart extends LitElement {
|
|
|
90
91
|
|
|
91
92
|
if (!this.canvasList.has(chartName)) {
|
|
92
93
|
// initialize new charts
|
|
93
|
-
this.canvasList.set(chartName, {
|
|
94
|
+
this.canvasList.set(chartName, {
|
|
95
|
+
chartJsInstance: undefined,
|
|
96
|
+
// @ts-ignore
|
|
97
|
+
dataSets: [] as Dataseries[]
|
|
98
|
+
})
|
|
94
99
|
}
|
|
95
100
|
this.canvasList.get(chartName)?.dataSets.push(pds)
|
|
96
101
|
})
|
|
@@ -100,19 +105,28 @@ export class WidgetLinechart extends LitElement {
|
|
|
100
105
|
// console.log('new linechart datasets', this.canvasList)
|
|
101
106
|
}
|
|
102
107
|
|
|
103
|
-
applyInputData() {
|
|
108
|
+
async applyInputData() {
|
|
104
109
|
this.setupCharts()
|
|
105
110
|
|
|
106
111
|
this.requestUpdate()
|
|
107
|
-
this.
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
112
|
+
await this.updateComplete
|
|
113
|
+
this.canvasList.forEach(({ chartJsInstance, dataSets }) => {
|
|
114
|
+
if (chartJsInstance) {
|
|
115
|
+
chartJsInstance.data.datasets = dataSets
|
|
116
|
+
chartJsInstance.options ??= {}
|
|
117
|
+
chartJsInstance.options.scales ??= {}
|
|
118
|
+
chartJsInstance.options.scales.x ??= {}
|
|
119
|
+
chartJsInstance.options.scales.y ??= {}
|
|
120
|
+
chartJsInstance.options.scales.x.type = this.xAxisType()
|
|
121
|
+
// @ts-ignore
|
|
122
|
+
chartJsInstance.options.scales.x.title.display = !!this.inputData?.axis?.xAxisLabel
|
|
123
|
+
// @ts-ignore
|
|
124
|
+
chartJsInstance.options.scales.x.title.text = this.inputData?.axis?.xAxisLabel
|
|
125
|
+
// @ts-ignore
|
|
126
|
+
chartJsInstance.options.scales.y.title.display = !!this.inputData?.axis?.yAxisLabel
|
|
127
|
+
// @ts-ignore
|
|
128
|
+
chartJsInstance.options.scales.y.title.text = this.inputData?.axis?.yAxisLabel
|
|
129
|
+
chartJsInstance?.update('resize')
|
|
116
130
|
}
|
|
117
131
|
})
|
|
118
132
|
}
|
|
@@ -131,7 +145,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
131
145
|
this.canvasList.delete(chartName)
|
|
132
146
|
return
|
|
133
147
|
}
|
|
134
|
-
if (chartM.
|
|
148
|
+
if (chartM.chartJsInstance) return
|
|
135
149
|
|
|
136
150
|
if (!this.chartContainer) throw new Error('chartContainer not found')
|
|
137
151
|
|
|
@@ -145,7 +159,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
145
159
|
|
|
146
160
|
if (!canvas) throw new Error('canvas not found')
|
|
147
161
|
// console.log('chartM', canvas, chartM.chart)
|
|
148
|
-
chartM.
|
|
162
|
+
chartM.chartJsInstance = new Chart(canvas, {
|
|
149
163
|
type: 'line',
|
|
150
164
|
data: {
|
|
151
165
|
// @ts-ignore
|
|
@@ -242,6 +256,17 @@ export class WidgetLinechart extends LitElement {
|
|
|
242
256
|
font-size: 14px;
|
|
243
257
|
line-height: 17px;
|
|
244
258
|
}
|
|
259
|
+
|
|
260
|
+
.no-data {
|
|
261
|
+
font-size: 20px;
|
|
262
|
+
color: var(--re-text-color, #000);
|
|
263
|
+
display: flex;
|
|
264
|
+
height: 100%;
|
|
265
|
+
width: 100%;
|
|
266
|
+
text-align: center;
|
|
267
|
+
align-items: center;
|
|
268
|
+
justify-content: center;
|
|
269
|
+
}
|
|
245
270
|
`
|
|
246
271
|
|
|
247
272
|
render() {
|
|
@@ -252,6 +277,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
252
277
|
<p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
|
|
253
278
|
</header>
|
|
254
279
|
|
|
280
|
+
<div class="paging no-data" ?active=${!this.canvasList.size}>No Data</div>
|
|
255
281
|
<div
|
|
256
282
|
class="chart-container ${this?.inputData?.axis?.columnLayout ? 'columnLayout' : ''}"
|
|
257
283
|
></div>
|