@record-evolution/widget-linechart 1.5.2 → 1.5.4
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.4",
|
|
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
|
}
|
package/src/widget-linechart.ts
CHANGED
|
@@ -20,9 +20,10 @@ export class WidgetLinechart extends LitElement {
|
|
|
20
20
|
private canvasList: Map<string, { chart?: any; dataSets: Dataseries[] }> = new Map()
|
|
21
21
|
|
|
22
22
|
version: string = 'versionplaceholder'
|
|
23
|
+
chartContainer?: HTMLElement | DocumentFragment
|
|
23
24
|
|
|
24
25
|
update(changedProperties: Map<string, any>) {
|
|
25
|
-
if (changedProperties.has('inputData')) {
|
|
26
|
+
if (changedProperties.has('inputData') && this.chartContainer) {
|
|
26
27
|
this.transformInputData()
|
|
27
28
|
this.applyInputData()
|
|
28
29
|
}
|
|
@@ -30,6 +31,8 @@ export class WidgetLinechart extends LitElement {
|
|
|
30
31
|
}
|
|
31
32
|
|
|
32
33
|
protected firstUpdated(): void {
|
|
34
|
+
this.chartContainer = this.shadowRoot?.querySelector('.chart-container') as HTMLElement
|
|
35
|
+
this.transformInputData()
|
|
33
36
|
this.applyInputData()
|
|
34
37
|
}
|
|
35
38
|
|
|
@@ -47,9 +50,10 @@ export class WidgetLinechart extends LitElement {
|
|
|
47
50
|
} else {
|
|
48
51
|
ds.borderDash = undefined
|
|
49
52
|
}
|
|
53
|
+
ds.data ??= []
|
|
50
54
|
|
|
51
55
|
// pivot data
|
|
52
|
-
const distincts = [...new Set(ds.data
|
|
56
|
+
const distincts = [...new Set(ds.data.map((d: Data) => d.pivot))].sort()
|
|
53
57
|
const derivedBgColors = tinycolor(ds.backgroundColor as ColorInput | undefined)
|
|
54
58
|
.monochromatic(distincts.length)
|
|
55
59
|
.map((c: any) => c.toHexString())
|
|
@@ -68,7 +72,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
68
72
|
: derivedBdColors[i],
|
|
69
73
|
backgroundColor: ds.advanced?.chartName?.includes('#split#')
|
|
70
74
|
? ds.backgroundColor
|
|
71
|
-
:
|
|
75
|
+
: derivedBgColors[i],
|
|
72
76
|
styling: ds.styling,
|
|
73
77
|
pointStyle: ds.styling?.pointStyle,
|
|
74
78
|
radius: ds.styling?.radius,
|
|
@@ -80,7 +84,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
80
84
|
}
|
|
81
85
|
let chartName = ds.advanced?.chartName ?? ''
|
|
82
86
|
if (chartName.includes('#split#')) {
|
|
83
|
-
chartName =
|
|
87
|
+
chartName = prefix + chartName
|
|
84
88
|
}
|
|
85
89
|
// If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
|
|
86
90
|
|
|
@@ -122,10 +126,24 @@ export class WidgetLinechart extends LitElement {
|
|
|
122
126
|
|
|
123
127
|
setupCharts() {
|
|
124
128
|
this.canvasList.forEach((chartM, chartName) => {
|
|
125
|
-
if (!chartM.dataSets.length)
|
|
129
|
+
if (!chartM.dataSets.length) {
|
|
130
|
+
this.shadowRoot?.querySelector(`div[name="${chartName}"]`)?.remove()
|
|
131
|
+
this.canvasList.delete(chartName)
|
|
132
|
+
return
|
|
133
|
+
}
|
|
126
134
|
if (chartM.chart) return
|
|
127
|
-
|
|
128
|
-
if (!
|
|
135
|
+
|
|
136
|
+
if (!this.chartContainer) throw new Error('chartContainer not found')
|
|
137
|
+
|
|
138
|
+
const newContainer = document.createElement('div')
|
|
139
|
+
newContainer.setAttribute('name', chartName)
|
|
140
|
+
newContainer.setAttribute('class', 'sizer')
|
|
141
|
+
const canvas = document.createElement('canvas')
|
|
142
|
+
canvas.setAttribute('name', chartName)
|
|
143
|
+
newContainer.appendChild(canvas)
|
|
144
|
+
this.chartContainer.appendChild(newContainer)
|
|
145
|
+
|
|
146
|
+
if (!canvas) throw new Error('canvas not found')
|
|
129
147
|
// console.log('chartM', canvas, chartM.chart)
|
|
130
148
|
chartM.chart = new Chart(canvas, {
|
|
131
149
|
type: 'line',
|
|
@@ -234,17 +252,9 @@ export class WidgetLinechart extends LitElement {
|
|
|
234
252
|
<p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
|
|
235
253
|
</header>
|
|
236
254
|
|
|
237
|
-
<div
|
|
238
|
-
${
|
|
239
|
-
|
|
240
|
-
([chartName, chartM]) => chartName,
|
|
241
|
-
([chartName]) => html`
|
|
242
|
-
<div class="sizer">
|
|
243
|
-
<canvas name="${chartName}"></canvas>
|
|
244
|
-
</div>
|
|
245
|
-
`
|
|
246
|
-
)}
|
|
247
|
-
</div>
|
|
255
|
+
<div
|
|
256
|
+
class="chart-container ${this?.inputData?.axis?.columnLayout ? 'columnLayout' : ''}"
|
|
257
|
+
></div>
|
|
248
258
|
</div>
|
|
249
259
|
`
|
|
250
260
|
}
|