@record-evolution/widget-linechart 1.4.15 → 1.5.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.
- package/README.md +6 -98
- package/dist/src/widget-linechart.d.ts +2 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/widget-linechart.js +4335 -4645
- package/dist/widget-linechart.js.map +1 -1
- package/package.json +16 -16
- package/src/default-data.json +91 -67
- package/src/definition-schema.d.ts +53 -39
- package/src/definition-schema.json +92 -74
- package/src/widget-linechart.ts +41 -37
package/src/widget-linechart.ts
CHANGED
|
@@ -2,19 +2,19 @@ import { html, css, LitElement } from 'lit'
|
|
|
2
2
|
import { repeat } from 'lit/directives/repeat.js'
|
|
3
3
|
import { property, state } from 'lit/decorators.js'
|
|
4
4
|
import Chart, { ChartDataset } from 'chart.js/auto'
|
|
5
|
-
import tinycolor from 'tinycolor2'
|
|
5
|
+
import tinycolor, { ColorInput } from 'tinycolor2'
|
|
6
6
|
// This does not work. See comments at the end of the file.
|
|
7
7
|
// import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
|
|
8
8
|
// import 'chartjs-adapter-moment';
|
|
9
9
|
// import 'chartjs-adapter-date-fns';
|
|
10
|
-
import {
|
|
10
|
+
import { InputData } from './definition-schema.js'
|
|
11
11
|
|
|
12
|
-
type Dataseries = Exclude<
|
|
12
|
+
type Dataseries = Exclude<InputData['dataseries'], undefined>[number]
|
|
13
13
|
type Data = Exclude<Dataseries['data'], undefined>[number]
|
|
14
14
|
|
|
15
15
|
export class WidgetLinechart extends LitElement {
|
|
16
16
|
@property({ type: Object })
|
|
17
|
-
inputData?:
|
|
17
|
+
inputData?: InputData
|
|
18
18
|
|
|
19
19
|
@state()
|
|
20
20
|
private canvasList: Map<string, { chart?: any; dataSets: Dataseries[] }> = new Map()
|
|
@@ -38,8 +38,10 @@ export class WidgetLinechart extends LitElement {
|
|
|
38
38
|
|
|
39
39
|
// reset all existing chart dataseries
|
|
40
40
|
this.canvasList.forEach((chartM) => (chartM.dataSets = []))
|
|
41
|
+
this.inputData.dataseries.sort((a, b) => (a.advanced?.drawOrder ?? 0) - (b.advanced?.drawOrder ?? 0))
|
|
41
42
|
this.inputData.dataseries.forEach((ds) => {
|
|
42
|
-
ds.
|
|
43
|
+
ds.advanced ??= {}
|
|
44
|
+
ds.advanced.chartName ??= ''
|
|
43
45
|
if (ds.borderDash && typeof ds.borderDash === 'string') {
|
|
44
46
|
ds.borderDash = JSON.parse(ds.borderDash)
|
|
45
47
|
} else {
|
|
@@ -48,34 +50,40 @@ export class WidgetLinechart extends LitElement {
|
|
|
48
50
|
|
|
49
51
|
// pivot data
|
|
50
52
|
const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))].sort()
|
|
51
|
-
const derivedBgColors = tinycolor(ds.backgroundColor)
|
|
53
|
+
const derivedBgColors = tinycolor(ds.backgroundColor as ColorInput | undefined)
|
|
52
54
|
.monochromatic(distincts.length)
|
|
53
55
|
.map((c: any) => c.toHexString())
|
|
54
|
-
const derivedBdColors = tinycolor(ds.borderColor)
|
|
56
|
+
const derivedBdColors = tinycolor(ds.borderColor as ColorInput | undefined)
|
|
55
57
|
.monochromatic(distincts.length)
|
|
56
58
|
.map((c: any) => c.toHexString())
|
|
57
|
-
|
|
59
|
+
//sd
|
|
58
60
|
distincts.forEach((piv, i) => {
|
|
59
61
|
const prefix = piv ? `${piv} - ` : ''
|
|
60
62
|
const pds: any = {
|
|
61
|
-
label: prefix + ds.label
|
|
63
|
+
label: prefix + ds.label,
|
|
62
64
|
type: ds.type,
|
|
63
65
|
showLine: true,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
66
|
+
borderColor: ds.advanced?.chartName?.includes('#split#')
|
|
67
|
+
? ds.borderColor
|
|
68
|
+
: derivedBdColors[i],
|
|
69
|
+
backgroundColor: ds.advanced?.chartName?.includes('#split#')
|
|
67
70
|
? ds.backgroundColor
|
|
68
|
-
:
|
|
69
|
-
|
|
70
|
-
|
|
71
|
+
: derivedBdColors[i],
|
|
72
|
+
styling: ds.styling,
|
|
73
|
+
pointStyle: ds.styling?.pointStyle,
|
|
74
|
+
radius: ds.styling?.radius,
|
|
75
|
+
fill: ds.styling?.fill,
|
|
76
|
+
borderWidth: ds.styling?.borderWidth,
|
|
71
77
|
borderDash: ds.borderDash,
|
|
72
|
-
|
|
78
|
+
advanced: ds.advanced,
|
|
73
79
|
data: distincts.length === 1 ? ds.data : ds.data?.filter((d) => d.pivot === piv)
|
|
74
80
|
}
|
|
81
|
+
let chartName = ds.advanced?.chartName ?? ''
|
|
82
|
+
if (chartName.includes('#split#')) {
|
|
83
|
+
chartName = chartName + '-' + piv
|
|
84
|
+
}
|
|
75
85
|
// If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
|
|
76
|
-
|
|
77
|
-
? ds.chartName + '-' + piv
|
|
78
|
-
: ds.chartName ?? ''
|
|
86
|
+
|
|
79
87
|
if (!this.canvasList.has(chartName)) {
|
|
80
88
|
// initialize new charts
|
|
81
89
|
this.canvasList.set(chartName, { chart: undefined, dataSets: [] as Dataseries[] })
|
|
@@ -84,7 +92,7 @@ export class WidgetLinechart extends LitElement {
|
|
|
84
92
|
})
|
|
85
93
|
})
|
|
86
94
|
// prevent duplicate transformation
|
|
87
|
-
this.inputData.dataseries = []
|
|
95
|
+
// this.inputData.dataseries = []
|
|
88
96
|
// console.log('new linechart datasets', this.canvasList)
|
|
89
97
|
}
|
|
90
98
|
|
|
@@ -96,18 +104,18 @@ export class WidgetLinechart extends LitElement {
|
|
|
96
104
|
if (chart) {
|
|
97
105
|
chart.data.datasets = dataSets
|
|
98
106
|
chart.options.scales.x.type = this.xAxisType()
|
|
99
|
-
chart.options.scales.x.title.display = !!this.inputData?.
|
|
100
|
-
chart.options.scales.x.title.text = this.inputData?.
|
|
101
|
-
chart.options.scales.y.title.display = !!this.inputData?.
|
|
102
|
-
chart.options.scales.y.title.text = this.inputData?.
|
|
107
|
+
chart.options.scales.x.title.display = !!this.inputData?.axis?.xAxisLabel
|
|
108
|
+
chart.options.scales.x.title.text = this.inputData?.axis?.xAxisLabel
|
|
109
|
+
chart.options.scales.y.title.display = !!this.inputData?.axis?.yAxisLabel
|
|
110
|
+
chart.options.scales.y.title.text = this.inputData?.axis?.yAxisLabel
|
|
103
111
|
chart?.update('resize')
|
|
104
112
|
}
|
|
105
113
|
})
|
|
106
114
|
}
|
|
107
115
|
|
|
108
116
|
xAxisType(): 'linear' | 'logarithmic' | 'category' | 'time' | 'timeseries' | undefined {
|
|
109
|
-
if (this.inputData?.
|
|
110
|
-
const onePoint = this.inputData?.dataseries?.[0]
|
|
117
|
+
if (this.inputData?.axis?.timeseries) return 'time'
|
|
118
|
+
const onePoint = this.inputData?.dataseries?.[0]?.data?.[0]
|
|
111
119
|
if (!isNaN(Number(onePoint?.x))) return 'linear'
|
|
112
120
|
return 'category'
|
|
113
121
|
}
|
|
@@ -143,14 +151,14 @@ export class WidgetLinechart extends LitElement {
|
|
|
143
151
|
x: {
|
|
144
152
|
type: this.xAxisType(),
|
|
145
153
|
title: {
|
|
146
|
-
display: !!this.inputData?.
|
|
147
|
-
text: this.inputData?.
|
|
154
|
+
display: !!this.inputData?.axis?.xAxisLabel,
|
|
155
|
+
text: this.inputData?.axis?.xAxisLabel
|
|
148
156
|
}
|
|
149
157
|
},
|
|
150
158
|
y: {
|
|
151
159
|
title: {
|
|
152
|
-
display: !!this.inputData?.
|
|
153
|
-
text: this.inputData?.
|
|
160
|
+
display: !!this.inputData?.axis?.yAxisLabel,
|
|
161
|
+
text: this.inputData?.axis?.yAxisLabel
|
|
154
162
|
}
|
|
155
163
|
}
|
|
156
164
|
}
|
|
@@ -222,15 +230,11 @@ export class WidgetLinechart extends LitElement {
|
|
|
222
230
|
return html`
|
|
223
231
|
<div class="wrapper">
|
|
224
232
|
<header>
|
|
225
|
-
<h3 class="paging" ?active=${this.inputData?.
|
|
226
|
-
|
|
227
|
-
</h3>
|
|
228
|
-
<p class="paging" ?active=${this.inputData?.settings?.subTitle}>
|
|
229
|
-
${this.inputData?.settings?.subTitle}
|
|
230
|
-
</p>
|
|
233
|
+
<h3 class="paging" ?active=${this.inputData?.title}>${this.inputData?.title}</h3>
|
|
234
|
+
<p class="paging" ?active=${this.inputData?.subTitle}>${this.inputData?.subTitle}</p>
|
|
231
235
|
</header>
|
|
232
236
|
|
|
233
|
-
<div class="chart-container ${this?.inputData?.
|
|
237
|
+
<div class="chart-container ${this?.inputData?.axis?.columnLayout ? 'columnLayout' : ''}">
|
|
234
238
|
${repeat(
|
|
235
239
|
[...this.canvasList.entries()].sort(),
|
|
236
240
|
([chartName, chartM]) => chartName,
|