Skip to content

Commit 70ee973

Browse files
graphierosgraphieros
committed
New feature - VueUiStackbar - Add optional zoom minimap
1 parent 91eb928 commit 70ee973

File tree

2 files changed

+573
-113
lines changed

2 files changed

+573
-113
lines changed

‎TestingArena/ArenaVueUiStackbar.vue‎

Lines changed: 87 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,33 +20,54 @@ import { VueUiStackbar as VueUiStackbarTreeshaken } from "vue-data-ui/vue-ui-sta
2020
// },
2121
// ]);
2222
23-
const dataset = ref([]);
23+
function makeDs(n) {
24+
const arr = [];
25+
for(let i = 0; i < n; i += 1) {
26+
arr.push(Math.random() * 5 * (Math.random() > 0.3 ? 1 : 1))
27+
}
28+
return arr;
29+
}
2430
25-
onMounted(() => {
26-
dataset.value = undefined;
27-
setTimeout(() => {
28-
dataset.value = [
31+
const dataset = ref([
2932
{
3033
name: "Series 1",
31-
series: [1, 2, 1, 3, 1, 5, 0.1],
34+
series: makeDs(100),
3235
},
3336
{
3437
name: "Series 2",
35-
series: [0, 2, 3, 2, 1, 2, 0.1],
38+
series: makeDs(100),
3639
},
3740
{
3841
name: "Series 3",
39-
series: [1, 2, 4, 3, 2, 1, 0.1],
42+
series: makeDs(100),
4043
},
41-
]
42-
}, 2000)
43-
})
44+
]);
45+
46+
// onMounted(() => {
47+
// dataset.value = undefined;
48+
// setTimeout(() => {
49+
// dataset.value = [
50+
// {
51+
// name: "Series 1",
52+
// series: makeDs(100),
53+
// },
54+
// {
55+
// name: "Series 2",
56+
// series: makeDs(100),
57+
// },
58+
// {
59+
// name: "Series 3",
60+
// series: makeDs(100),
61+
// },
62+
// ]
63+
// }, 2000)
64+
// })
4465
4566
const monthValues = computed(() => {
4667
const yearStart = 2026
4768
const arr = []
4869
49-
for (let i = 0; i < 13; i++) {
70+
for (let i = 0; i < 100; i += 1) {
5071
const d = new Date(yearStart, i, 1)
5172
arr.push(d.getTime())
5273
}
@@ -91,18 +112,18 @@ const model = ref([
91112
{ key: 'loading', def: false, type: 'checkbox'},
92113
{ key: 'debug', def: false, type: 'checkbox'},
93114
{ key: 'userOptions.position', def: 'right', type: 'select', options: ['left', 'right']},
94-
{ key: 'orientation', def: 'horizontal', type:'select', options: ['vertical', 'horizontal']},
115+
{ key: 'orientation', def: 'vertical', type:'select', options: ['vertical', 'horizontal']},
95116
{ key: 'responsive', def: false, type: 'checkbox'},
96117
{ key: 'theme', def: '', type: 'select', options: ['', 'zen', 'hack', 'concrete']},
97118
{ key: 'useCssAnimation', def: false, type: 'checkbox'},
98119
{ key: 'style.chart.backgroundColor', def: '#FFFFFF', type: 'color'},
99120
{ key: 'style.chart.color', def: '#1A1A1A', type: 'color'},
100121
{ key: 'style.chart.height', def: 500, type: 'number', min: 200, max: 1000},
101122
{ key: 'style.chart.width', def: 800, type: 'number', min: 200, max: 1000},
102-
{ key: 'style.chart.padding.top', def: 0, type: 'number', min: 0, max: 100},
103-
{ key: 'style.chart.padding.right', def: 0, type: 'number', min: 0, max: 100},
104-
{ key: 'style.chart.padding.bottom', def: 0, type: 'number', min: 0, max: 100},
105-
{ key: 'style.chart.padding.left', def: 0, type: 'number', min: 0, max: 100},
123+
{ key: 'style.chart.padding.top', def: 12, type: 'number', min: 0, max: 100},
124+
{ key: 'style.chart.padding.right', def: 24, type: 'number', min: 0, max: 100},
125+
{ key: 'style.chart.padding.bottom', def: 12, type: 'number', min: 0, max: 100},
126+
{ key: 'style.chart.padding.left', def: 12, type: 'number', min: 0, max: 100},
106127
107128
{ key: 'style.chart.title.text', def: 'Lorem ipsum', type: 'text' },
108129
{ key: 'style.chart.title.color', def: '#1A1A1A', type: 'color' },
@@ -132,6 +153,24 @@ const model = ref([
132153
{ key: 'style.chart.zoom.focusOnDrag', def: true, type: 'checkbox'},
133154
{ key: 'style.chart.zoom.focusRangeRatio', def: 0.2, type: 'number', min: 0.1, max: 0.9, step: 0.1},
134155
156+
{ key: 'style.chart.zoom.preview.enable', def: true, type: 'checkbox'},
157+
{ key: 'style.chart.zoom.preview.stroke', def: '#1f77b4', type: 'color'},
158+
{ key: 'style.chart.zoom.preview.fill', def: '#1f77b420', type: 'color'},
159+
{ key: 'style.chart.zoom.preview.strokeDasharray', def: 0, type: 'number', min: 0, max: 12},
160+
{ key: 'style.chart.zoom.preview.strokeWidth', def: 2, type: 'number', min: 0, max: 12},
161+
162+
{ key: 'style.chart.zoom.minimap.show', def: true, type: 'checkbox' },
163+
{ key: 'style.chart.zoom.minimap.smooth', def: false, type: 'checkbox' },
164+
{ key: 'style.chart.zoom.minimap.selectedColor', def: '#1f77b4', type: 'color' },
165+
{ key: 'style.chart.zoom.minimap.selectedColorOpacity', def: 0.2, type: 'range', min: 0, max: 1, step: 0.01 },
166+
{ key: 'style.chart.zoom.minimap.lineColor', def: '#1A1A1A', type: 'color' },
167+
{ key: 'style.chart.zoom.minimap.selectionRadius', def: 2, type: 'number', min: 0, max: 24 },
168+
{ key: 'style.chart.zoom.minimap.indicatorColor', def: '#1A1A1A', type: 'color' },
169+
{ key: 'style.chart.zoom.minimap.verticalHandles', def: false, type: 'checkbox' },
170+
{ key: 'style.chart.zoom.minimap.compact', def: true, type: 'checkbox' },
171+
{ key: 'style.chart.zoom.minimap.merged', def: false, type: 'checkbox' },
172+
173+
135174
{ key: 'style.chart.tooltip.show', def: true, type: 'checkbox'},
136175
{ key: 'style.chart.tooltip.backgroundColor', def: '#FFFFFF', type: 'color'},
137176
{ key: 'style.chart.tooltip.color', def: '#1A1A1A', type: 'color'},
@@ -154,7 +193,7 @@ const model = ref([
154193
{ key: 'style.chart.bars.gapRatio', def: 0.5, type: 'range', min: 0, max: 1, step: 0.01 },
155194
{ key: 'style.chart.bars.distributed', def: false, type: 'checkbox'},
156195
{ key: 'style.chart.bars.showDistributedPercentage', def: false, type: 'checkbox'},
157-
{ key: 'style.chart.bars.borderRadius', def: 6, type: 'number', min: 0, max: 12},
196+
{ key: 'style.chart.bars.borderRadius', def: 1, type: 'number', min: 0, max: 12},
158197
{ key: 'style.chart.bars.strokeWidth', def: 1, type: 'number', min: 0, max: 12},
159198
160199
{ key: 'style.chart.bars.gradient.show', def: true, type: 'checkbox'},
@@ -166,7 +205,7 @@ const model = ref([
166205
{ key: 'style.chart.bars.totalValues.bold', def: false, type: 'checkbox'},
167206
{ key: 'style.chart.bars.totalValues.color', def: '#1A1A1A', type: 'color'},
168207
169-
{ key: 'style.chart.bars.dataLabels.show', def: true, type: 'checkbox'},
208+
{ key: 'style.chart.bars.dataLabels.show', def: false, type: 'checkbox'},
170209
{ key: 'style.chart.bars.dataLabels.hideEmptyValues', def: false, type: 'checkbox'},
171210
{ key: 'style.chart.bars.dataLabels.hideEmptyPercentages', def: true, type: 'checkbox'},
172211
@@ -205,6 +244,9 @@ const model = ref([
205244
{ key: 'style.chart.grid.x.timeLabels.rotation', def: 0, type: 'range', min: -90, max: 90},
206245
{ key: 'style.chart.grid.x.timeLabels.autoRotate.enable', def: true, type: 'checkbox'},
207246
{ key: 'style.chart.grid.x.timeLabels.autoRotate.angle', def: -90, type: 'number', min: -90, max: 90},
247+
{ key: 'style.chart.grid.x.timeLabels.showOnlyAtModulo', def: true, type: 'checkbox'},
248+
{ key: 'style.chart.grid.x.timeLabels.showOnlyFirstAndLast', def: false, type: 'checkbox'},
249+
{ key: 'style.chart.grid.x.timeLabels.modulo', def: 12, type: 'number', min: 2, max: 12 },
208250
209251
{ key: 'style.chart.grid.x.timeLabels.fontSize', def: 14, type: 'number', min: 8, max: 42},
210252
{ key: 'style.chart.grid.x.timeLabels.color', def: '#1A1A1A', type: 'color'},
@@ -286,18 +328,31 @@ const config = computed(() => {
286328
}
287329
}
288330
},
331+
zoom: {
332+
...c.style.chart.zoom,
333+
useDefaultFormat: false,
334+
customFormat: ({ absoluteIndex, seriesIndex, datapoint, timeLabel }) => {
335+
// console.log({ absoluteIndex, seriesIndex, datapoint, timeLabel });
336+
return `T - ${timeLabel.text}`
337+
}
338+
},
339+
tooltip: {
340+
...c.style.chart.tooltip,
341+
useDefaultTimeFormat: true,
342+
timeFormat: 'yyyy-MM-dd'
343+
},
289344
grid: {
290345
...c.style.chart.grid,
291346
x: {
292347
...c.style.chart.grid.x,
293348
timeLabels: {
294349
...c.style.chart.grid.x.timeLabels,
295-
values: monthValues.value,
350+
values: ['T1', 'T2', 'T3', 'T4'],
296351
// values: new Array(6).fill(0).map((d, i) => {
297352
// return `Some long name\nfor dataset of index ${i}`
298353
// }),
299354
datetimeFormatter: {
300-
enable: true
355+
enable: false
301356
}
302357
// values: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG']
303358
}
@@ -329,6 +384,12 @@ onMounted(async () => {
329384
console.log(img)
330385
}
331386
})
387+
388+
const selectedX = ref(undefined);
389+
390+
function selectX({ datapoint, index, indexLabel}) {
391+
selectedX.value = index;
392+
}
332393
333394
</script>
334395

@@ -340,9 +401,9 @@ onMounted(async () => {
340401
</select>
341402
</div>
342403
<div style="width: 600px; height: 600px; resize: both; overflow: auto; background: white">
343-
<LocalVueUiStackbar :dataset="dataset" :config="{...config,
404+
<LocalVueUiStackbar @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="{...config,
344405
responsive: true,
345-
}" :key="`local_resp_${step}`" @selectTimeLabel="selectTimeLabel">
406+
}" @selectTimeLabel="selectTimeLabel">
346407
<template #chart-background>
347408
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
348409
</template>
@@ -390,11 +451,11 @@ onMounted(async () => {
390451
</LocalVueUiStackbar>
391452
</div> -->
392453

393-
<Box>
454+
<Box comp="VueUiStackbar" :dataset="dataset">
394455
<template #title>VueUiStackbar</template>
395456

396457
<template #local>
397-
<LocalVueUiStackbar :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
458+
<LocalVueUiStackbar @selectX="selectX" :selectedXIndex="selectedX" :dataset="dataset" :config="config" :key="`local_${step}`" ref="local">
398459
<!-- <template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
399460
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
400461
<text
@@ -421,7 +482,7 @@ onMounted(async () => {
421482
</template>
422483

423484
<template #VDUI-local>
424-
<LocalVueDataUi component="VueUiStackbar" :dataset="dataset" :config="config" :key="`local_vdui_${step}`">
485+
<LocalVueDataUi @selectX="selectX" :selectedXIndex="selectedX" component="VueUiStackbar" :dataset="dataset" :config="config" :key="`local_vdui_${step}`">
425486
<template #time-label="{x, y, fontSize, fill, transform, absoluteIndex, content, textAnchor }">
426487
<g @click="() => selectTimeLabel({x, y, fontSize, absoluteIndex })">
427488
<text

0 commit comments

Comments
 (0)