Skip to content

Commit bc23456

Browse files
graphierosgraphieros
committed
Improvement - VueUiXyCanvas - Add optional zoom minimap; add embedded skeleton loader
1 parent 70ee973 commit bc23456

File tree

3 files changed

+687
-228
lines changed

3 files changed

+687
-228
lines changed

‎TestingArena/ArenaVueUiXyCanvas.vue‎

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,14 @@ const { local, build, vduiLocal, vduiBuild, toggleTable, toggleLabels, toggleSta
1414
const crazyDs = [];
1515
const crazyDs2 = [];
1616
const crazyDs3 = []
17-
for (let i = 0; i < 200; i += 1) {
18-
crazyDs.push(Math.random() + (Math.random() > 0.5 ? Math.random() * 100 : 0))
17+
for (let i = 0; i < 50; i += 1) {
18+
if ((i > 10 && i <= 20) || (i > 21 && i < 30)) {
19+
crazyDs3.push(null)
20+
} else {
21+
crazyDs3.push(Math.random() + (Math.random() > 0.5 ? Math.random() * -5 : Math.random() * 5))
22+
}
23+
crazyDs.push(Math.random() + (Math.random() > 0.5 ? Math.random() * 10 : -10))
1924
crazyDs2.push(Math.random() + (Math.random() > 0.5 ? Math.random() * -10 : -10))
20-
crazyDs3.push(Math.random() + (Math.random() > 0.5 ? Math.random() * -5 : Math.random() * 5))
2125
}
2226
2327
function makeDs(n,m) {
@@ -28,19 +32,47 @@ function makeDs(n,m) {
2832
return arr
2933
}
3034
31-
const dataset = ref([
35+
const dataset = ref(undefined);
36+
37+
onMounted(() => {
38+
setTimeout(() => {
39+
dataset.value = [
3240
{
3341
name: "S0",
3442
series: crazyDs3,
3543
type: "line",
44+
useArea: true,
45+
dataLabels: true,
46+
scaleSteps: 2,
47+
prefix: '$',
48+
suffix: '£',
49+
rounding: 1,
50+
},
51+
{
52+
name: "S1",
53+
series: crazyDs2,
54+
type: "bar",
55+
useArea: false,
56+
dataLabels: true,
57+
scaleSteps: 2,
58+
prefix: '$',
59+
suffix: '£',
60+
rounding: 1,
61+
},
62+
{
63+
name: "S2",
64+
series: crazyDs,
65+
type: "plot",
3666
useArea: false,
3767
dataLabels: true,
3868
scaleSteps: 2,
3969
prefix: '$',
4070
suffix: '£',
4171
rounding: 1,
4272
},
43-
])
73+
]
74+
}, 2000)
75+
})
4476
4577
async function getData() {
4678
return makeDs(800, 100)
@@ -75,6 +107,8 @@ async function longpolling ()
75107
76108
77109
const model = ref([
110+
{ key: 'loading', def: false, type: 'checkbox'},
111+
{ key: 'debug', def: true, type: 'checkbox'},
78112
{ key: 'downsample.threshold', def: 120000, type: 'number', min: 0,max: 10000000},
79113
{ key: 'responsive', def: false, type: "checkbox" },
80114
{ key: 'userOptions.show', def: true, type: 'checkbox' },
@@ -95,7 +129,7 @@ const model = ref([
95129
{ key: 'userOptions.print.backgroundColor', def: '#FFFFFF' },
96130
97131
{ key: 'style.fontFamily', def: 'Arial', type: 'text' },
98-
{ key: 'style.chart.backgroundColor', def: '#FFFFFF20', type: 'color' },
132+
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color' },
99133
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color' },
100134
{ key: 'style.chart.aspectRatio', def: '12 / 9', type: 'text' },
101135
{ key: 'style.chart.stacked', def: false, type: 'checkbox' },
@@ -116,6 +150,9 @@ const model = ref([
116150
{ key: 'style.chart.zoom.focusOnDrag', def: true, type: 'checkbox'},
117151
{ key: 'style.chart.zoom.focusRangeRatio', def: 0.2, type: 'number', min: 0.1, max: 0.9, step: 0.1},
118152
153+
{ key: 'style.chart.zoom.minimap.show', def: true, type: 'checkbox'},
154+
{ key: 'style.chart.zoom.preview.enable', def: true, type: 'checkbox'},
155+
119156
{ key: 'style.chart.selector.show', def: true, type: 'checkbox' },
120157
{ key: 'style.chart.selector.color', def: '#1A1A1A', type: 'color' },
121158
{ key: 'style.chart.selector.dashed', def: false, type: 'checkbox' },
@@ -194,7 +231,7 @@ const model = ref([
194231
195232
{ key: 'style.chart.bar.gradient.show', def: false, type: 'checkbox'},
196233
197-
{ key: 'style.chart.area.opacity', def: 60, type: 'number', min: 10, max: 100 },
234+
{ key: 'style.chart.area.opacity', def: 30, type: 'number', min: 10, max: 100 },
198235
{ key: 'style.chart.dataLabels.show', def: false, type: 'checkbox' },
199236
{ key: 'style.chart.dataLabels.bold', def: true, type: 'checkbox' },
200237
{ key: 'style.chart.dataLabels.fontSizeRatio', def: 1, type: 'number', min: 0.1, max: 2, step: 0.1 },
@@ -231,20 +268,18 @@ const themeOptions = ref([
231268
"celebrationNight"
232269
])
233270
234-
const currentTheme = ref(themeOptions.value[6]);
271+
const currentTheme = ref(themeOptions.value[0]);
235272
236273
const monthValues = computed(() => {
237-
const yearStart = 2026
238-
const arr = []
274+
const yearStart = 2026
275+
const arr = []
239276
240-
for (let i = 0; i < 200; i++) {
241-
const d = new Date(yearStart, i, 1)
242-
arr.push(d.getTime())
243-
}
244-
245-
console.log(arr)
277+
for (let i = 0; i < 200; i += 1) {
278+
const d = new Date(yearStart, i, 1)
279+
arr.push(d.getTime())
280+
}
246281
247-
return arr
282+
return arr
248283
})
249284
250285
const config = computed(() => {
@@ -263,19 +298,30 @@ const config = computed(() => {
263298
return `f | ${value}`
264299
}
265300
},
266-
// tooltip: {
267-
// ...c.style.chart.tooltip,
268-
// customFormat: ({ datapoint }) => {
269-
// return datapoint[0].name
270-
// }
271-
// },
301+
tooltip: {
302+
...c.style.chart.tooltip,
303+
useDefaultTimeFormat: false,
304+
timeFormat: 'yyyy-MM-dd'
305+
// customFormat: ({ datapoint }) => {
306+
// return datapoint[0].name
307+
// }
308+
},
309+
zoom: {
310+
...c.style.chart.zoom,
311+
useDefaultFormat: false,
312+
timeFormat: 'yyyy-MM',
313+
// customFormat: (d) => {
314+
// console.log(d);
315+
// return 'T'
316+
// }
317+
},
272318
grid: {
273319
...c.style.chart.grid,
274320
x: {
275321
...c.style.chart.grid.x,
276322
timeLabels: {
277323
...c.style.chart.grid.x.timeLabels,
278-
values: monthValues.value,
324+
values: [],
279325
datetimeFormatter: {
280326
enable: true,
281327
}
@@ -313,7 +359,11 @@ const config = computed(() => {
313359
// }
314360
// })
315361
362+
const selectedX = ref(undefined);
316363
364+
function selectX({ datapoint, index, indexLabel}) {
365+
selectedX.value = index;
366+
}
317367
318368
</script>
319369

@@ -354,15 +404,15 @@ const config = computed(() => {
354404
<template #title>VueUiXyCanvas</template>
355405

356406
<template #local>
357-
<LocalVueUiXyCanvas :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
407+
<LocalVueUiXyCanvas @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
358408
<template #optionPdf>
359409
PRINT PDF
360410
</template>
361411
</LocalVueUiXyCanvas>
362412
</template>
363413

364414
<template #VDUI-local>
365-
<LocalVueDataUi component="VueUiXyCanvas" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
415+
<LocalVueDataUi @selectX="selectX" :selectedXIndex="selectedX" component="VueUiXyCanvas" :dataset="dataset" :config="config" :key="`VDUI-lodal_${step}`" ref="vduiLocal">
366416

367417
</LocalVueDataUi>
368418
</template>

‎src/canvas-lib.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,7 +284,7 @@ export function rect(ctx, coordinates, options = {}) {
284284
shadowColor = null,
285285
shadowBlur = 0,
286286
shadowOffsetX = 0,
287-
shadowOffsetY = 0
287+
shadowOffsetY = 0,
288288
} = options;
289289

290290
ctx.beginPath();

0 commit comments

Comments
 (0)