Skip to content

Commit 02c69b2

Browse files
graphierosgraphieros
committed
Improve minimap layout and add reactivity with parent chart upon selection
1 parent 7ad0444 commit 02c69b2

File tree

2 files changed

+29
-9
lines changed

2 files changed

+29
-9
lines changed

‎src/components/vue-ui-quick-chart.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,12 @@ function segregateDonut(arc, ds) {
291291
}
292292
}
293293
294+
const commonSelectedIndex = ref(null);
295+
296+
function setCommonSelectedIndex(index) {
297+
commonSelectedIndex.value = index;
298+
}
299+
294300
const donut = computed(() => {
295301
if(chartType.value !== detector.chartType.DONUT) return null;
296302
const ds = formattedDataset.value.dataset.map((ds, i) => {
@@ -373,6 +379,7 @@ const donut = computed(() => {
373379
function killTooltip() {
374380
isTooltip.value = false;
375381
selectedDatapoint.value = null;
382+
commonSelectedIndex.value = null;
376383
}
377384
378385
const drawingArea = {
@@ -561,6 +568,7 @@ const line = computed(() => {
561568
562569
function useTooltip(index) {
563570
selectedDatapoint.value = index;
571+
commonSelectedIndex.value = index;
564572
const mappedSeries = ds.map(d => {
565573
return {
566574
...d,
@@ -743,6 +751,7 @@ const bar = computed(() => {
743751
744752
function useTooltip(index) {
745753
selectedDatapoint.value = index;
754+
commonSelectedIndex.value = index;
746755
747756
const mappedSeries = ds.map(d => {
748757
return {
@@ -802,6 +811,7 @@ const bar = computed(() => {
802811
function killTooltip() {
803812
isTooltip.value = false;
804813
selectedDatapoint.value = null;
814+
commonSelectedIndex.value = null;
805815
}
806816
807817
return {
@@ -1217,7 +1227,7 @@ defineExpose({
12171227
:y="line.drawingArea.top"
12181228
:height="line.drawingArea.height <= 0 ? 0.00001 : line.drawingArea.height"
12191229
:width="line.slotSize <= 0 ? 0.00001 : line.slotSize"
1220-
:fill="selectedDatapoint === i ? FINAL_CONFIG.xyHighlighterColor : 'transparent'"
1230+
:fill="[selectedDatapoint, commonSelectedIndex].includes(i) ? FINAL_CONFIG.xyHighlighterColor : 'transparent'"
12211231
:style="`opacity:${FINAL_CONFIG.xyHighlighterOpacity}`"
12221232
@mouseenter="line.useTooltip(i)"
12231233
@mouseleave="line.killTooltip()"
@@ -1396,7 +1406,7 @@ defineExpose({
13961406
:y="bar.drawingArea.top"
13971407
:height="bar.drawingArea.height <= 0 ? 0.00001 : bar.drawingArea.height"
13981408
:width="bar.slotSize <= 0 ? 0.00001 : bar.slotSize"
1399-
:fill="selectedDatapoint === i ? FINAL_CONFIG.xyHighlighterColor : 'transparent'"
1409+
:fill="[selectedDatapoint, commonSelectedIndex].includes(i) ? FINAL_CONFIG.xyHighlighterColor : 'transparent'"
14001410
:style="`opacity:${FINAL_CONFIG.xyHighlighterOpacity}`"
14011411
@mouseenter="bar.useTooltip(i)"
14021412
@mouseleave="bar.killTooltip()"
@@ -1504,9 +1514,12 @@ defineExpose({
15041514
:minimapSelectionRadius="FINAL_CONFIG.zoomMinimap.selectionRadius"
15051515
:minimapLineColor="FINAL_CONFIG.zoomMinimap.lineColor"
15061516
:minimap="minimap"
1517+
:minimapIndicatorColor="FINAL_CONFIG.zoomMinimap.indicatorColor"
1518+
:minimapSelectedIndex="commonSelectedIndex"
15071519
v-model:start="slicer.start"
15081520
v-model:end="slicer.end"
15091521
@reset="refreshSlicer"
1522+
@trapMouse="setCommonSelectedIndex"
15101523
>
15111524
<template #reset-action="{ reset }">
15121525
<slot name="reset-action" v-bind="{ reset }"/>

‎src/components/vue-ui-xy.vue‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@
231231
:y="drawingArea.top"
232232
:height="drawingArea.height < 0 ? 10 : drawingArea.height"
233233
:width="drawingArea.width / maxSeries < 0 ? 0.00001 : drawingArea.width / maxSeries"
234-
:fill="selectedSerieIndex === i || selectedRowIndex === i ? `${FINAL_CONFIG.chart.highlighter.color}${opacity[FINAL_CONFIG.chart.highlighter.opacity]}` : 'transparent'"
234+
:fill="[selectedMinimapIndex, selectedSerieIndex, selectedRowIndex].includes(i) ? `${FINAL_CONFIG.chart.highlighter.color}${opacity[FINAL_CONFIG.chart.highlighter.opacity]}` : 'transparent'"
235235
/>
236236
</g>
237237
</g>
@@ -316,10 +316,10 @@
316316
/>
317317
</template>
318318

319-
<g v-if="FINAL_CONFIG.chart.highlighter.useLine && ![null, undefined].includes(selectedSerieIndex)">
319+
<g v-if="FINAL_CONFIG.chart.highlighter.useLine && (![null, undefined].includes(selectedSerieIndex) || selectedMinimapIndex !== null)">
320320
<line
321-
:x1="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
322-
:x2="drawingArea.left + (drawingArea.width / maxSeries) * selectedSerieIndex + (drawingArea.width / maxSeries / 2)"
321+
:x1="drawingArea.left + (drawingArea.width / maxSeries) * (selectedSerieIndex || selectedMinimapIndex) + (drawingArea.width / maxSeries / 2)"
322+
:x2="drawingArea.left + (drawingArea.width / maxSeries) * (selectedSerieIndex || selectedMinimapIndex) + (drawingArea.width / maxSeries / 2)"
323323
:y1="drawingArea.top"
324324
:y2="drawingArea.bottom"
325325
:stroke="FINAL_CONFIG.chart.highlighter.color"
@@ -471,7 +471,7 @@
471471
:shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(serie.shape) ? serie.shape : 'circle'"
472472
:color="FINAL_CONFIG.plot.useGradient ? `url(#plotGradient_${i}_${uniqueId})` : serie.color"
473473
:plot="{ x: checkNaN(plot.x), y: checkNaN(plot.y) }"
474-
:radius="selectedSerieIndex !== null ? selectedSerieIndex === j ? (plotRadii.plot || 6) * 1.5 : plotRadii.plot || 6 : plotRadii.plot || 6"
474+
:radius="((selectedSerieIndex !== null && selectedSerieIndex === j) || (selectedMinimapIndex !== null && selectedMinimapIndex === j)) ? (plotRadii.plot || 6) * 1.5 : plotRadii.plot || 6"
475475
:stroke="FINAL_CONFIG.chart.backgroundColor"
476476
:strokeWidth="0.5"
477477
/>
@@ -598,7 +598,7 @@
598598
:shape="['triangle', 'square', 'diamond', 'pentagon', 'hexagon', 'star'].includes(serie.shape) ? serie.shape : 'circle'"
599599
:color="FINAL_CONFIG.line.useGradient ? `url(#lineGradient_${i}_${uniqueId})` : serie.color"
600600
:plot="{ x: checkNaN(plot.x), y: checkNaN(plot.y) }"
601-
:radius="selectedSerieIndex !== null ? selectedSerieIndex === j ? (plotRadii.line || 6) * 1.5 : plotRadii.line : plotRadii.line"
601+
:radius="((selectedSerieIndex !== null && selectedSerieIndex === j) || (selectedMinimapIndex !== null && selectedMinimapIndex === j)) ? (plotRadii.line || 6) * 1.5 : plotRadii.line || 6"
602602
:stroke="FINAL_CONFIG.chart.backgroundColor"
603603
:strokeWidth="0.5"
604604
/>
@@ -1036,13 +1036,16 @@
10361036
:minimapSelectionRadius="FINAL_CONFIG.chart.zoom.minimap.selectionRadius"
10371037
:minimapLineColor="FINAL_CONFIG.chart.zoom.minimap.lineColor"
10381038
:minimapSelectedColorOpacity="FINAL_CONFIG.chart.zoom.minimap.selectedColorOpacity"
1039+
:minimapSelectedIndex="selectedSerieIndex"
1040+
:minimapIndicatorColor="FINAL_CONFIG.chart.zoom.minimap.indicatorColor"
10391041
:max="maxX"
10401042
:min="0"
10411043
:valueStart="slicer.start"
10421044
:valueEnd="slicer.end"
10431045
v-model:start="slicer.start"
10441046
v-model:end="slicer.end"
10451047
@reset="refreshSlicer"
1048+
@trapMouse="selectMinimapIndex"
10461049
>
10471050
<template #reset-action="{ reset }">
10481051
<slot name="reset-action" v-bind="{ reset }"/>
@@ -1311,7 +1314,8 @@ export default {
13111314
plotRadii: {
13121315
plot: 3,
13131316
line: 3
1314-
}
1317+
},
1318+
selectedMinimapIndex: null
13151319
}
13161320
},
13171321
computed: {
@@ -2292,6 +2296,9 @@ export default {
22922296
treeShake,
22932297
useMouse,
22942298
useNestedProp,
2299+
selectMinimapIndex(minimapIndex) {
2300+
this.selectedMinimapIndex = minimapIndex;
2301+
},
22952302
convertSizes() {
22962303
// Adaptative sizes in responsive mode
22972304
this.fontSizes.dataLabels = this.translateSize({

0 commit comments

Comments
 (0)