@operato/scene-chartjs 7.3.13 → 7.3.19

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,120 +0,0 @@
1
- const icon = new URL('../../icons/horizontal-bar-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'horizontal-bar-chart',
5
- description: 'ChartJS - horizontal barchart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 200,
12
- left: 300,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'horizontalBar',
17
- data: {
18
- labels: [],
19
- datasets: [
20
- {
21
- label: 'series 1',
22
- data: [],
23
- backgroundColor: 'rgb(66, 110, 164)',
24
- borderColor: 'rgb(66, 110, 164)',
25
- borderWidth: 0,
26
- dataKey: 'value1',
27
- yAxisID: 'left'
28
- },
29
- {
30
- label: 'series 2',
31
- data: [],
32
- backgroundColor: 'rgb(62, 196, 221)',
33
- borderColor: 'rgb(62, 196, 221)',
34
- borderWidth: 0,
35
- dataKey: 'value2',
36
- yAxisID: 'left'
37
- }
38
- ],
39
- labelDataKey: 'color'
40
- },
41
- options: {
42
- theme: 'dark',
43
- xGridLine: true,
44
- yGridLine: false,
45
- legend: {
46
- display: true,
47
- position: 'top'
48
- },
49
- scales: {
50
- xAxes: [
51
- {
52
- gridLines: {
53
- display: true
54
- },
55
- scaleLabel: {
56
- labelString: '',
57
- display: false
58
- },
59
- ticks: {
60
- autoMin: true,
61
- autoMax: true,
62
- display: true
63
- }
64
- }
65
- ],
66
- yAxes: [
67
- {
68
- id: 'left',
69
- position: 'left',
70
- gridLines: {
71
- display: false
72
- },
73
- scaleLabel: {
74
- labelString: '',
75
- display: false
76
- },
77
- ticks: {
78
- autoMin: true,
79
- autoMax: true,
80
- display: true
81
- }
82
- }
83
- ]
84
- }
85
- }
86
- },
87
- data: [
88
- {
89
- color: 'Red',
90
- value1: 12,
91
- value2: 24
92
- },
93
- {
94
- color: 'Blue',
95
- value1: 19,
96
- value2: 9
97
- },
98
- {
99
- color: 'Yellow',
100
- value1: 3,
101
- value2: 6
102
- },
103
- {
104
- color: 'Green',
105
- value1: 5,
106
- value2: 2
107
- },
108
- {
109
- color: 'Purple',
110
- value1: 2,
111
- value2: 4
112
- },
113
- {
114
- color: 'Orange',
115
- value1: 3,
116
- value2: 1
117
- }
118
- ]
119
- }
120
- }
@@ -1,19 +0,0 @@
1
- import barChart from './bar-chart'
2
- import doughnutChart from './doughnut-chart'
3
- import horizontalBarChart from './horizontal-bar-chart'
4
- import lineChart from './line-chart'
5
- import mixedChart from './mixed-chart'
6
- import pieChart from './pie-chart'
7
- import polarAreaChart from './polar-area-chart'
8
- import radarChart from './radar-chart'
9
-
10
- export default [
11
- barChart,
12
- horizontalBarChart,
13
- lineChart,
14
- mixedChart,
15
- pieChart,
16
- doughnutChart,
17
- polarAreaChart,
18
- radarChart
19
- ]
@@ -1,152 +0,0 @@
1
- const icon = new URL('../../icons/line-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'line-chart',
5
- description: 'ChartJS - line chart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 0,
12
- left: 0,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'line',
17
- data: {
18
- labels: [],
19
- datasets: [
20
- {
21
- label: 'series 1',
22
- type: 'line',
23
- backgroundColor: 'rgb(66, 110, 164)',
24
- borderColor: 'rgb(66, 110, 164)',
25
- borderWidth: 3,
26
- pointBorderColor: 'rgb(66, 110, 164)',
27
- pointBorderWidth: 3,
28
- pointBackgroundColor: 'rgba(255,255,255,1)',
29
- lineTension: 0.4,
30
- yAxisID: 'left',
31
- data: [],
32
- dataKey: 'value1',
33
- fill: false
34
- },
35
- {
36
- label: 'series 2',
37
- type: 'line',
38
- backgroundColor: 'rgb(62, 196, 221)',
39
- borderColor: 'rgb(62, 196, 221)',
40
- borderWidth: 3,
41
- pointBorderColor: 'rgb(62, 196, 221)',
42
- pointBorderWidth: 3,
43
- pointBackgroundColor: 'rgba(255,255,255,1)',
44
- lineTension: 0.4,
45
- yAxisID: 'left',
46
- data: [],
47
- dataKey: 'value2',
48
- fill: false
49
- }
50
- ],
51
- labelDataKey: 'data'
52
- },
53
- options: {
54
- theme: 'dark',
55
- xGridLine: false,
56
- yGridLine: true,
57
- legend: {
58
- display: true,
59
- position: 'top'
60
- },
61
- scales: {
62
- xAxes: [
63
- {
64
- gridLines: {
65
- display: false
66
- },
67
- scaleLabel: {
68
- labelString: '',
69
- display: false
70
- },
71
- ticks: {
72
- display: true
73
- }
74
- }
75
- ],
76
- yAxes: [
77
- {
78
- id: 'left',
79
- position: 'left',
80
- gridLines: {
81
- display: true
82
- },
83
- scaleLabel: {
84
- labelString: '',
85
- display: false
86
- },
87
- ticks: {
88
- autoMin: true,
89
- autoMax: true,
90
- display: true
91
- }
92
- },
93
- {
94
- id: 'right',
95
- position: 'right',
96
- display: false,
97
- gridLines: {
98
- display: false
99
- },
100
- scaleLabel: {
101
- labelString: '',
102
- display: false
103
- },
104
- ticks: {
105
- autoMin: true,
106
- autoMax: true,
107
- display: true
108
- }
109
- }
110
- ]
111
- }
112
- }
113
- },
114
- data: [
115
- {
116
- data: 'Data 1',
117
- value1: 20,
118
- value2: 60
119
- },
120
- {
121
- data: 'Data 2',
122
- value1: 30,
123
- value2: 10
124
- },
125
- {
126
- data: 'Data 3',
127
- value1: 80,
128
- value2: 40
129
- },
130
- {
131
- data: 'Data 4',
132
- value1: 20,
133
- value2: 30
134
- },
135
- {
136
- data: 'Data 5',
137
- value1: 40,
138
- value2: 80
139
- },
140
- {
141
- data: 'Data 6',
142
- value1: 10,
143
- value2: 30
144
- },
145
- {
146
- data: 'Data 7',
147
- value1: 60,
148
- value2: 20
149
- }
150
- ]
151
- }
152
- }
@@ -1,149 +0,0 @@
1
- const icon = new URL('../../icons/mixed-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'mixed-chart',
5
- description: 'ChartJS - mixed chart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 0,
12
- left: 0,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'bar',
17
- subType: 'mixed',
18
- data: {
19
- labels: [],
20
- datasets: [
21
- {
22
- type: 'line',
23
- label: 'series 1',
24
- backgroundColor: 'rgb(66, 110, 164)',
25
- borderColor: 'rgb(66, 110, 164)',
26
- borderWidth: 3,
27
- pointBorderColor: 'rgb(66, 110, 164)',
28
- pointBorderWidth: 3,
29
- pointBackgroundColor: 'rgba(255,255,255,1)',
30
- lineTension: 0.4,
31
- fill: false,
32
- yAxisID: 'left',
33
- data: [],
34
- dataKey: 'value1'
35
- },
36
- {
37
- type: 'bar',
38
- label: 'series 2',
39
- backgroundColor: 'rgb(62, 196, 221)',
40
- borderColor: 'rgb(62, 196, 221)',
41
- borderWidth: 0,
42
- yAxisID: 'right',
43
- data: [],
44
- dataKey: 'value2'
45
- }
46
- ],
47
- labelDataKey: 'data'
48
- },
49
- options: {
50
- theme: 'dark',
51
- multiAxis: true,
52
- xGridLine: false,
53
- yGridLine: true,
54
- legend: {
55
- display: true,
56
- position: 'top'
57
- },
58
- scales: {
59
- xAxes: [
60
- {
61
- gridLines: {
62
- display: false
63
- },
64
- scaleLabel: {
65
- labelString: '',
66
- display: false
67
- },
68
- ticks: {
69
- display: true
70
- }
71
- }
72
- ],
73
- yAxes: [
74
- {
75
- position: 'left',
76
- id: 'left',
77
- gridLines: {
78
- display: true
79
- },
80
- scaleLabel: {
81
- labelString: '',
82
- display: false
83
- },
84
- ticks: {
85
- autoMin: true,
86
- autoMax: true,
87
- display: true
88
- }
89
- },
90
- {
91
- id: 'right',
92
- position: 'right',
93
- display: true,
94
- gridLines: {
95
- display: false
96
- },
97
- scaleLabel: {
98
- labelString: '',
99
- display: false
100
- },
101
- ticks: {
102
- autoMin: true,
103
- autoMax: true,
104
- display: true
105
- }
106
- }
107
- ]
108
- }
109
- }
110
- },
111
- data: [
112
- {
113
- data: 'Data 1',
114
- value1: 20,
115
- value2: 60
116
- },
117
- {
118
- data: 'Data 2',
119
- value1: 30,
120
- value2: 10
121
- },
122
- {
123
- data: 'Data 3',
124
- value1: 80,
125
- value2: 40
126
- },
127
- {
128
- data: 'Data 4',
129
- value1: 20,
130
- value2: 30
131
- },
132
- {
133
- data: 'Data 5',
134
- value1: 40,
135
- value2: 80
136
- },
137
- {
138
- data: 'Data 6',
139
- value1: 10,
140
- value2: 30
141
- },
142
- {
143
- data: 'Data 7',
144
- value1: 60,
145
- value2: 20
146
- }
147
- ]
148
- }
149
- }
@@ -1,55 +0,0 @@
1
- const icon = new URL('../../icons/pie-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'pie-chart',
5
- description: 'ChartJS - pie chart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 0,
12
- left: 0,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'pie',
17
- data: {
18
- labels: [],
19
- datasets: [
20
- {
21
- data: [],
22
- backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
23
- borderWidth: 0,
24
- dataKey: 'value'
25
- }
26
- ],
27
- labelDataKey: 'label'
28
- },
29
- options: {
30
- theme: 'dark',
31
- legend: {
32
- display: true,
33
- position: 'top'
34
- },
35
- animation: {
36
- animateScale: true
37
- }
38
- }
39
- },
40
- data: [
41
- {
42
- label: 'A',
43
- value: 80
44
- },
45
- {
46
- label: 'B',
47
- value: 15
48
- },
49
- {
50
- label: 'C',
51
- value: 15
52
- }
53
- ]
54
- }
55
- }
@@ -1,89 +0,0 @@
1
- const icon = new URL('../../icons/polar-area-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'polar-area-chart',
5
- description: 'ChartJS - ploar area chart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 0,
12
- left: 0,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'polarArea',
17
- data: {
18
- labels: [],
19
- datasets: [
20
- {
21
- label: 'My First dataset',
22
- backgroundColor: [
23
- 'rgba(248, 42, 18, 1)',
24
- 'rgba(255,99,132,1)',
25
- 'rgba(9, 64, 169, 1)',
26
- 'rgba(24, 185, 87, 1)',
27
- 'rgba(216, 100, 19, 1)',
28
- 'rgba(82, 8, 99, 1)',
29
- 'rgba(225, 102, 234, 1)'
30
- ],
31
- borderColor: 'rgba(179,181,198,1)',
32
- borderWidth: 0,
33
- data: [],
34
- dataKey: 'rate1'
35
- }
36
- ],
37
- labelDataKey: 'hobby'
38
- },
39
- options: {
40
- theme: 'dark',
41
- legend: {
42
- display: true,
43
- position: 'top'
44
- },
45
- scale: {
46
- ticks: {},
47
- pointLabels: {}
48
- }
49
- }
50
- },
51
- data: [
52
- {
53
- hobby: 'Eating',
54
- rate1: 65,
55
- rate2: 28
56
- },
57
- {
58
- hobby: 'Drinking',
59
- rate1: 59,
60
- rate2: 48
61
- },
62
- {
63
- hobby: 'Sleeping',
64
- rate1: 90,
65
- rate2: 40
66
- },
67
- {
68
- hobby: 'Designing',
69
- rate1: 81,
70
- rate2: 19
71
- },
72
- {
73
- hobby: 'Coding',
74
- rate1: 56,
75
- rate2: 96
76
- },
77
- {
78
- hobby: 'Cycling',
79
- rate1: 55,
80
- rate2: 27
81
- },
82
- {
83
- hobby: 'Running',
84
- rate1: 40,
85
- rate2: 100
86
- }
87
- ]
88
- }
89
- }
@@ -1,95 +0,0 @@
1
- const icon = new URL('../../icons/radar-chart.png', import.meta.url).href
2
-
3
- export default {
4
- type: 'radar-chart',
5
- description: 'ChartJS - radar chart',
6
- icon: icon,
7
- group: 'chartAndGauge',
8
- /* line|shape|textAndMedia|chartAndGauge|table|container|dataSource|IoT|3D|warehouse|form|etc */
9
- model: {
10
- type: 'chartjs',
11
- top: 0,
12
- left: 0,
13
- width: 200,
14
- height: 200,
15
- chart: {
16
- type: 'radar',
17
- data: {
18
- labels: [],
19
- datasets: [
20
- {
21
- label: 'My First dataset',
22
- type: 'radar',
23
- backgroundColor: 'rgb(66, 110, 164)',
24
- borderColor: 'rgb(66, 110, 164)',
25
- pointBackgroundColor: 'rgba(255,255,255,1)',
26
- pointBorderColor: 'rgb(66, 110, 164)',
27
- data: [],
28
- fill: false,
29
- dataKey: 'rate1'
30
- },
31
- {
32
- label: 'My Second dataset',
33
- type: 'radar',
34
- backgroundColor: 'rgb(62, 196, 221)',
35
- borderColor: 'rgb(62, 196, 221)',
36
- pointBackgroundColor: 'rgba(255,255,255,1)',
37
- pointBorderColor: 'rgb(62, 196, 221)',
38
- data: [],
39
- fill: false,
40
- dataKey: 'rate2'
41
- }
42
- ],
43
- labelDataKey: 'hobby'
44
- },
45
- options: {
46
- theme: 'dark',
47
- legend: {
48
- display: true,
49
- position: 'top'
50
- },
51
- scale: {
52
- ticks: {},
53
- pointLabels: {}
54
- }
55
- }
56
- },
57
- data: [
58
- {
59
- hobby: 'Eating',
60
- rate1: 65,
61
- rate2: 28
62
- },
63
- {
64
- hobby: 'Drinking',
65
- rate1: 59,
66
- rate2: 48
67
- },
68
- {
69
- hobby: 'Sleeping',
70
- rate1: 90,
71
- rate2: 40
72
- },
73
- {
74
- hobby: 'Designing',
75
- rate1: 81,
76
- rate2: 19
77
- },
78
- {
79
- hobby: 'Coding',
80
- rate1: 56,
81
- rate2: 96
82
- },
83
- {
84
- hobby: 'Cycling',
85
- rate1: 55,
86
- rate2: 27
87
- },
88
- {
89
- hobby: 'Running',
90
- rate1: 40,
91
- rate2: 100
92
- }
93
- ]
94
- }
95
- }