@@ -8,6 +8,267 @@ import { useArena } from "../src/useArena";
8
8
9
9
const { local , build , vduiLocal , vduiBuild , toggleTable , toggleLabels , toggleStack } = useArena ()
10
10
11
+ const dates = [
12
+ " 2024-12-11T15:20:00.000+01:00" ,
13
+ " 2024-12-13T00:00:00.000+01:00" ,
14
+ " 2024-12-14T00:00:00.000+01:00" ,
15
+ " 2024-12-15T00:00:00.000+01:00" ,
16
+ " 2024-12-16T00:00:00.000+01:00" ,
17
+ " 2024-12-17T00:00:00.000+01:00" ,
18
+ " 2024-12-18T00:00:00.000+01:00" ,
19
+ " 2024-12-19T00:00:00.000+01:00" ,
20
+ " 2024-12-20T00:00:00.000+01:00" ,
21
+ " 2024-12-21T00:00:00.000+01:00" ,
22
+ " 2024-12-22T00:00:00.000+01:00" ,
23
+ " 2024-12-23T00:00:00.000+01:00" ,
24
+ " 2024-12-24T00:00:00.000+01:00" ,
25
+ " 2024-12-25T00:00:00.000+01:00" ,
26
+ " 2024-12-26T00:00:00.000+01:00" ,
27
+ " 2024-12-27T00:00:00.000+01:00" ,
28
+ " 2024-12-28T00:00:00.000+01:00" ,
29
+ " 2024-12-29T00:00:00.000+01:00" ,
30
+ " 2024-12-30T00:00:00.000+01:00" ,
31
+ " 2024-12-31T00:00:00.000+01:00" ,
32
+ " 2025-01-01T00:00:00.000+01:00" ,
33
+ " 2025-01-02T00:00:00.000+01:00" ,
34
+ " 2025-01-03T00:00:00.000+01:00" ,
35
+ " 2025-01-04T00:00:00.000+01:00" ,
36
+ " 2025-01-05T00:00:00.000+01:00" ,
37
+ " 2025-01-06T00:00:00.000+01:00" ,
38
+ " 2025-01-06T17:15:00.000+01:00" ,
39
+ " 2025-01-08T00:00:00.000+01:00" ,
40
+ " 2025-01-09T00:00:00.000+01:00" ,
41
+ " 2025-01-10T00:00:00.000+01:00" ,
42
+ " 2025-01-11T00:00:00.000+01:00" ,
43
+ " 2025-01-12T00:00:00.000+01:00" ,
44
+ " 2025-01-13T00:00:00.000+01:00" ,
45
+ " 2025-01-14T00:00:00.000+01:00" ,
46
+ " 2025-01-15T00:00:00.000+01:00" ,
47
+ " 2025-01-16T00:00:00.000+01:00" ,
48
+ " 2025-01-17T00:00:00.000+01:00" ,
49
+ " 2025-01-18T00:00:00.000+01:00" ,
50
+ " 2025-01-19T00:00:00.000+01:00" ,
51
+ " 2025-01-20T00:00:00.000+01:00" ,
52
+ " 2025-01-21T10:00:00.000+01:00" ,
53
+ " 2025-01-22T00:00:00.000+01:00" ,
54
+ " 2025-01-23T00:00:00.000+01:00" ,
55
+ " 2025-01-24T00:00:00.000+01:00" ,
56
+ " 2025-01-25T00:00:00.000+01:00" ,
57
+ " 2025-01-26T00:00:00.000+01:00" ,
58
+ " 2025-01-27T00:00:00.000+01:00" ,
59
+ " 2025-01-28T00:00:00.000+01:00" ,
60
+ " 2025-01-29T00:00:00.000+01:00" ,
61
+ " 2025-01-30T00:00:00.000+01:00" ,
62
+ " 2025-01-31T00:00:00.000+01:00" ,
63
+ " 2025-02-01T00:00:00.000+01:00" ,
64
+ " 2025-02-02T00:00:00.000+01:00" ,
65
+ " 2025-02-03T00:00:00.000+01:00" ,
66
+ " 2025-02-04T00:00:00.000+01:00" ,
67
+ " 2025-02-05T00:00:00.000+01:00" ,
68
+ " 2025-02-06T00:00:00.000+01:00" ,
69
+ " 2025-02-07T00:00:00.000+01:00" ,
70
+ " 2025-02-08T00:00:00.000+01:00" ,
71
+ " 2025-02-09T00:00:00.000+01:00" ,
72
+ " 2025-02-10T00:00:00.000+01:00" ,
73
+ " 2025-02-11T00:00:00.000+01:00" ,
74
+ " 2025-02-12T00:00:00.000+01:00" ,
75
+ " 2025-02-13T00:00:00.000+01:00" ,
76
+ " 2025-02-14T00:00:00.000+01:00" ,
77
+ " 2025-02-15T00:00:00.000+01:00" ,
78
+ " 2025-02-16T00:00:00.000+01:00" ,
79
+ " 2025-02-17T00:00:00.000+01:00" ,
80
+ " 2025-02-18T00:00:00.000+01:00" ,
81
+ " 2025-02-19T00:00:00.000+01:00" ,
82
+ " 2025-02-20T00:00:00.000+01:00" ,
83
+ " 2025-02-21T00:00:00.000+01:00" ,
84
+ " 2025-02-22T00:00:00.000+01:00" ,
85
+ " 2025-02-23T00:00:00.000+01:00" ,
86
+ " 2025-02-24T00:00:00.000+01:00" ,
87
+ " 2025-02-25T00:00:00.000+01:00" ,
88
+ " 2025-02-26T00:00:00.000+01:00" ,
89
+ " 2025-02-27T00:00:00.000+01:00" ,
90
+ " 2025-02-28T00:00:00.000+01:00" ,
91
+ " 2025-03-01T00:00:00.000+01:00" ,
92
+ " 2025-03-02T00:00:00.000+01:00" ,
93
+ " 2025-03-03T00:00:00.000+01:00" ,
94
+ " 2025-03-04T00:00:00.000+01:00" ,
95
+ " 2025-03-05T00:00:00.000+01:00" ,
96
+ " 2025-03-06T00:00:00.000+01:00" ,
97
+ " 2025-03-07T00:00:00.000+01:00" ,
98
+ " 2025-03-08T00:00:00.000+01:00" ,
99
+ " 2025-03-09T00:00:00.000+01:00" ,
100
+ " 2025-03-10T00:00:00.000+01:00" ,
101
+ " 2025-03-11T00:00:00.000+01:00" ,
102
+ " 2025-03-12T00:00:00.000+01:00" ,
103
+ " 2025-03-13T00:00:00.000+01:00" ,
104
+ " 2025-03-14T00:00:00.000+01:00" ,
105
+ " 2025-03-15T00:00:00.000+01:00" ,
106
+ " 2025-03-16T00:00:00.000+01:00" ,
107
+ " 2025-03-17T00:00:00.000+01:00" ,
108
+ " 2025-03-18T00:00:00.000+01:00" ,
109
+ " 2025-03-19T00:00:00.000+01:00" ,
110
+ " 2025-03-20T00:00:00.000+01:00" ,
111
+ " 2025-03-21T00:00:00.000+01:00" ,
112
+ " 2025-03-22T00:00:00.000+01:00" ,
113
+ " 2025-03-23T00:00:00.000+01:00" ,
114
+ " 2025-03-24T00:00:00.000+01:00" ,
115
+ " 2025-03-25T00:00:00.000+01:00" ,
116
+ " 2025-03-26T00:00:00.000+01:00" ,
117
+ " 2025-03-27T00:00:00.000+01:00" ,
118
+ " 2025-03-28T00:00:00.000+01:00" ,
119
+ " 2025-03-29T00:00:00.000+01:00" ,
120
+ " 2025-03-30T00:00:00.000+01:00" ,
121
+ " 2025-03-31T00:00:00.000+02:00" ,
122
+ " 2025-04-01T00:00:00.000+02:00" ,
123
+ " 2025-04-02T00:00:00.000+02:00" ,
124
+ " 2025-04-03T00:00:00.000+02:00" ,
125
+ " 2025-04-04T00:00:00.000+02:00" ,
126
+ " 2025-04-05T00:00:00.000+02:00" ,
127
+ " 2025-04-06T00:00:00.000+02:00" ,
128
+ " 2025-04-07T00:00:00.000+02:00" ,
129
+ " 2025-04-08T00:00:00.000+02:00" ,
130
+ " 2025-04-09T00:00:00.000+02:00" ,
131
+ " 2025-04-10T00:00:00.000+02:00" ,
132
+ " 2025-04-11T00:00:00.000+02:00" ,
133
+ " 2025-04-12T00:00:00.000+02:00" ,
134
+ " 2025-04-13T00:00:00.000+02:00" ,
135
+ " 2025-04-14T00:00:00.000+02:00" ,
136
+ " 2025-04-15T00:00:00.000+02:00" ,
137
+ " 2025-04-16T00:00:00.000+02:00" ,
138
+ " 2025-04-17T00:00:00.000+02:00" ,
139
+ " 2025-04-18T00:00:00.000+02:00" ,
140
+ " 2025-04-19T00:00:00.000+02:00" ,
141
+ " 2025-04-20T00:00:00.000+02:00" ,
142
+ " 2025-04-21T00:00:00.000+02:00" ,
143
+ " 2025-04-22T00:00:00.000+02:00" ,
144
+ " 2025-04-23T00:00:00.000+02:00" ,
145
+ " 2025-04-24T00:00:00.000+02:00" ,
146
+ " 2025-04-25T00:00:00.000+02:00" ,
147
+ " 2025-04-26T00:00:00.000+02:00" ,
148
+ " 2025-04-27T00:00:00.000+02:00" ,
149
+ " 2025-04-28T00:00:00.000+02:00" ,
150
+ " 2025-04-29T00:00:00.000+02:00" ,
151
+ " 2025-04-30T00:00:00.000+02:00" ,
152
+ " 2025-05-01T00:00:00.000+02:00" ,
153
+ " 2025-05-02T00:00:00.000+02:00" ,
154
+ " 2025-05-03T00:00:00.000+02:00" ,
155
+ " 2025-05-04T00:00:00.000+02:00" ,
156
+ " 2025-05-05T00:00:00.000+02:00" ,
157
+ " 2025-05-06T00:00:00.000+02:00" ,
158
+ " 2025-05-07T00:00:00.000+02:00" ,
159
+ " 2025-05-08T00:00:00.000+02:00" ,
160
+ " 2025-05-09T00:00:00.000+02:00" ,
161
+ " 2025-05-10T00:00:00.000+02:00" ,
162
+ " 2025-05-11T00:00:00.000+02:00" ,
163
+ " 2025-05-12T00:00:00.000+02:00" ,
164
+ " 2025-05-13T00:00:00.000+02:00" ,
165
+ " 2025-05-14T00:00:00.000+02:00" ,
166
+ " 2025-05-15T00:00:00.000+02:00" ,
167
+ " 2025-05-16T00:00:00.000+02:00" ,
168
+ " 2025-05-17T00:00:00.000+02:00" ,
169
+ " 2025-05-18T00:00:00.000+02:00" ,
170
+ " 2025-05-19T00:00:00.000+02:00" ,
171
+ " 2025-05-20T00:00:00.000+02:00" ,
172
+ " 2025-05-21T00:00:00.000+02:00" ,
173
+ " 2025-05-22T00:00:00.000+02:00" ,
174
+ " 2025-05-23T00:00:00.000+02:00" ,
175
+ " 2025-05-24T00:00:00.000+02:00" ,
176
+ " 2025-05-25T00:00:00.000+02:00" ,
177
+ " 2025-05-26T00:00:00.000+02:00" ,
178
+ " 2025-05-27T10:35:00.000+02:00" ,
179
+ " 2025-05-28T00:00:00.000+02:00" ,
180
+ " 2025-05-29T00:00:00.000+02:00" ,
181
+ " 2025-05-30T00:00:00.000+02:00" ,
182
+ " 2025-05-31T00:00:00.000+02:00" ,
183
+ " 2025-06-01T00:00:00.000+02:00" ,
184
+ " 2025-06-02T00:00:00.000+02:00" ,
185
+ " 2025-06-03T00:00:00.000+02:00" ,
186
+ " 2025-06-04T00:00:00.000+02:00" ,
187
+ " 2025-06-05T00:00:00.000+02:00" ,
188
+ " 2025-06-06T00:00:00.000+02:00" ,
189
+ " 2025-06-07T00:00:00.000+02:00" ,
190
+ " 2025-06-08T00:00:00.000+02:00" ,
191
+ " 2025-06-09T00:00:00.000+02:00" ,
192
+ " 2025-06-10T00:00:00.000+02:00" ,
193
+ " 2025-06-11T00:00:00.000+02:00" ,
194
+ " 2025-06-12T00:00:00.000+02:00" ,
195
+ " 2025-06-13T00:00:00.000+02:00" ,
196
+ " 2025-06-14T00:00:00.000+02:00" ,
197
+ " 2025-06-15T00:00:00.000+02:00" ,
198
+ " 2025-06-16T00:00:00.000+02:00" ,
199
+ " 2025-06-17T00:00:00.000+02:00" ,
200
+ " 2025-06-18T00:00:00.000+02:00" ,
201
+ " 2025-06-19T00:00:00.000+02:00" ,
202
+ " 2025-06-20T00:00:00.000+02:00" ,
203
+ " 2025-06-21T00:00:00.000+02:00" ,
204
+ " 2025-06-22T00:00:00.000+02:00" ,
205
+ " 2025-06-23T00:00:00.000+02:00" ,
206
+ " 2025-06-24T00:00:00.000+02:00" ,
207
+ " 2025-06-25T00:00:00.000+02:00" ,
208
+ " 2025-06-26T00:00:00.000+02:00" ,
209
+ " 2025-06-27T00:00:00.000+02:00" ,
210
+ " 2025-06-28T00:00:00.000+02:00" ,
211
+ " 2025-06-29T00:00:00.000+02:00" ,
212
+ " 2025-06-30T00:00:00.000+02:00" ,
213
+ " 2025-07-01T00:00:00.000+02:00" ,
214
+ " 2025-07-02T07:29:00.000+02:00" ,
215
+ " 2025-07-03T00:00:00.000+02:00" ,
216
+ " 2025-07-04T00:00:00.000+02:00" ,
217
+ " 2025-07-05T00:00:00.000+02:00" ,
218
+ " 2025-07-06T00:00:00.000+02:00" ,
219
+ " 2025-07-07T00:00:00.000+02:00" ,
220
+ " 2025-07-08T00:00:00.000+02:00" ,
221
+ " 2025-07-09T00:00:00.000+02:00" ,
222
+ " 2025-07-10T00:00:00.000+02:00" ,
223
+ " 2025-07-11T00:00:00.000+02:00" ,
224
+ " 2025-07-12T00:00:00.000+02:00" ,
225
+ " 2025-07-13T00:00:00.000+02:00" ,
226
+ " 2025-07-14T00:00:00.000+02:00" ,
227
+ " 2025-07-15T00:00:00.000+02:00" ,
228
+ " 2025-07-16T00:00:00.000+02:00" ,
229
+ " 2025-07-17T00:00:00.000+02:00" ,
230
+ " 2025-07-18T00:00:00.000+02:00" ,
231
+ " 2025-07-19T00:00:00.000+02:00" ,
232
+ " 2025-07-20T00:00:00.000+02:00" ,
233
+ " 2025-07-21T00:00:00.000+02:00" ,
234
+ " 2025-07-22T00:00:00.000+02:00" ,
235
+ " 2025-07-23T00:00:00.000+02:00" ,
236
+ " 2025-07-24T00:00:00.000+02:00" ,
237
+ " 2025-07-25T00:00:00.000+02:00" ,
238
+ " 2025-07-26T00:00:00.000+02:00" ,
239
+ " 2025-07-27T00:00:00.000+02:00" ,
240
+ " 2025-07-28T00:00:00.000+02:00" ,
241
+ " 2025-07-29T00:00:00.000+02:00" ,
242
+ " 2025-07-30T00:00:00.000+02:00" ,
243
+ " 2025-07-31T00:00:00.000+02:00" ,
244
+ " 2025-08-01T00:00:00.000+02:00" ,
245
+ " 2025-08-02T00:00:00.000+02:00" ,
246
+ " 2025-08-03T00:00:00.000+02:00" ,
247
+ " 2025-08-04T00:00:00.000+02:00" ,
248
+ " 2025-08-05T00:00:00.000+02:00" ,
249
+ " 2025-08-06T00:00:00.000+02:00" ,
250
+ " 2025-08-07T00:00:00.000+02:00" ,
251
+ " 2025-08-08T00:00:00.000+02:00" ,
252
+ " 2025-08-09T00:00:00.000+02:00" ,
253
+ " 2025-08-10T00:00:00.000+02:00" ,
254
+ " 2025-08-11T00:00:00.000+02:00" ,
255
+ " 2025-08-12T00:00:00.000+02:00" ,
256
+ " 2025-08-13T00:00:00.000+02:00" ,
257
+ " 2025-08-14T00:00:00.000+02:00" ,
258
+ " 2025-08-15T00:00:00.000+02:00" ,
259
+ " 2025-08-16T00:00:00.000+02:00" ,
260
+ " 2025-08-17T00:00:00.000+02:00" ,
261
+ " 2025-08-18T00:00:00.000+02:00" ,
262
+ " 2025-08-19T00:00:00.000+02:00" ,
263
+ " 2025-08-20T00:00:00.000+02:00" ,
264
+ " 2025-08-21T00:00:00.000+02:00" ,
265
+ " 2025-08-22T00:00:00.000+02:00" ,
266
+ " 2025-08-23T00:00:00.000+02:00" ,
267
+ " 2025-08-24T00:00:00.000+02:00" ,
268
+ " 2025-08-25T00:00:00.000+02:00" ,
269
+ " 2025-08-26T00:00:00.000+02:00"
270
+ ].map (el => new Date (el).getTime ())
271
+
11
272
// function createDs(n,m=100) {
12
273
// const arr = [];
13
274
// for(let i = 0; i < n; i += 1) {
@@ -123,7 +384,7 @@ onMounted(() => {
123
384
},
124
385
{
125
386
name: " Serie B with a long name" ,
126
- series: [ 60 , 75 , 119 , 201 , 109 , 85 , null , 206 , 223 , 204 , 146 , 117 , 87 ] ,
387
+ series: createDs ( 258 ) ,
127
388
type: " line" ,
128
389
dataLabels: false ,
129
390
shape: ' triangle' ,
@@ -409,7 +670,7 @@ const model = ref([
409
670
{ key: ' chart.grid.showVerticalLines' , def: true , type: ' checkbox' , label: ' verticalLines' , category: ' grid' },
410
671
{ key: ' chart.grid.showHorizontalLines' , def: true , type: ' checkbox' , label: ' verticalLines' , category: ' grid' },
411
672
412
- { key: ' chart.grid.position' , def: ' middle ' , type: ' select' , options: [' middle' , ' start' ]},
673
+ { key: ' chart.grid.position' , def: ' start ' , type: ' select' , options: [' middle' , ' start' ]},
413
674
{ key: ' chart.grid.frame.show' , def: false , type: ' checkbox' },
414
675
{ key: ' chart.grid.frame.stroke' , def: ' #1A1A1A' , type: ' color' },
415
676
{ key: ' chart.grid.frame.strokeWidth' , def: 4 , type: ' number' , min: 0 , max: 12 },
@@ -436,8 +697,8 @@ const model = ref([
436
697
{ key: ' chart.grid.labels.axis.xLabelOffsetY' , def: 0 , type: ' number' , min: - 100 , max: 100 },
437
698
{ key: ' chart.grid.labels.axis.yLabelOffsetX' , def: 0 , type: ' number' , min: - 100 , max: 100 },
438
699
439
- { key: ' chart.grid.labels.xAxisLabels.showOnlyAtModulo' , def: false , type: ' checkbox' },
440
- { key: ' chart.grid.labels.xAxisLabels.modulo' , def: 6 , type: ' number' },
700
+ { key: ' chart.grid.labels.xAxisLabels.showOnlyAtModulo' , def: true , type: ' checkbox' },
701
+ { key: ' chart.grid.labels.xAxisLabels.modulo' , def: 12 , type: ' number' },
441
702
{ key: ' chart.grid.labels.xAxisLabels.autoRotate' , def: true , type: ' checkbox' },
442
703
443
704
{ key: ' chart.grid.labels.yAxis.position' , def: ' right' , type: ' select' , options: [' left' , ' right' ] },
@@ -840,7 +1101,7 @@ const config = computed(() => {
840
1101
},
841
1102
xAxisLabels: {
842
1103
... c .chart .grid .labels .xAxisLabels ,
843
- values: monthValues . value ,
1104
+ values: dates ,
844
1105
// values: new Array(13).fill(0).map((d,i) => {
845
1106
// return `Some long name\nwith a value ${i}`
846
1107
// }),
0 commit comments