Skip to content

Commit 718c1f0

Browse files
graphierosgraphieros
committed
Improvement - VueUiDonut & VueUiVerticalBar - Add config events
1 parent 4aa5626 commit 718c1f0

File tree

6 files changed

+193
-13
lines changed

6 files changed

+193
-13
lines changed

‎TestingArena/ArenaVueUiDonut.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,17 @@ const config = computed(() => {
266266
} else {
267267
return {
268268
...c,
269+
events: {
270+
datapointEnter: (e) => {
271+
console.log({e})
272+
},
273+
datapointLeave: (l) => {
274+
console.log({l})
275+
},
276+
datapointClick: (c) => {
277+
console.log({c})
278+
}
279+
},
269280
style: {
270281
...c.style,
271282
chart: {

‎TestingArena/ArenaVueUiVerticalBar.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -245,6 +245,17 @@ const config = computed(() => {
245245
} else {
246246
return {
247247
...c,
248+
events: {
249+
datapointClick: (c) => {
250+
console.log({c})
251+
},
252+
datapointEnter: (e) => {
253+
console.log({e})
254+
},
255+
datapointLeave: (l) => {
256+
console.log({l})
257+
}
258+
},
248259
style: {
249260
...c.style,
250261
chart: {

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

Lines changed: 102 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import {
1616
easeOutCubic,
1717
error,
1818
getMissingDatasetAttributes,
19+
hasDeepProperty,
1920
isFunction,
2021
makeDonut,
2122
objectIsEmpty,
@@ -164,17 +165,44 @@ function prepareConfig() {
164165
userConfig: props.config,
165166
defaultConfig: DEFAULT_CONFIG
166167
});
168+
169+
let finalConfig = {}
170+
167171
if (mergedConfig.theme) {
168-
return {
172+
finalConfig = {
169173
...useNestedProp({
170174
userConfig: themes.vue_ui_donut[mergedConfig.theme] || props.config,
171175
defaultConfig: mergedConfig
172176
}),
173177
customPalette: themePalettes[mergedConfig.theme] || palette
174178
}
175179
} else {
176-
return mergedConfig;
180+
finalConfig = mergedConfig;
181+
}
182+
183+
// ------------------------------ OVERRIDES -----------------------------------
184+
185+
if (props.config && hasDeepProperty(props.config, 'events.datapointEnter')) {
186+
finalConfig.events.datapointEnter = props.config.events.datapointEnter;
187+
} else {
188+
finalConfig.events.datapointEnter = null;
189+
}
190+
191+
if (props.config && hasDeepProperty(props.config, 'events.datapointLeave')) {
192+
finalConfig.events.datapointLeave = props.config.events.datapointLeave;
193+
} else {
194+
finalConfig.events.datapointLeave = null;
195+
}
196+
197+
if (props.config && hasDeepProperty(props.config, 'events.datapointClick')) {
198+
finalConfig.events.datapointClick = props.config.events.datapointClick;
199+
} else {
200+
finalConfig.events.datapointClick = null;
177201
}
202+
203+
// ----------------------------------------------------------------------------
204+
205+
return finalConfig;
178206
}
179207
180208
const FINAL_CONFIG = computed({
@@ -611,7 +639,20 @@ const dataTooltipSlot = ref(null);
611639
612640
const useCustomFormat = ref(false);
613641
642+
function handleDatapointLeave({ datapoint, seriesIndex }) {
643+
if (FINAL_CONFIG.value.events.datapointLeave) {
644+
FINAL_CONFIG.value.events.datapointLeave({ datapoint, seriesIndex });
645+
}
646+
isTooltip.value = false;
647+
selectedSerie.value = null;
648+
}
649+
614650
function useTooltip({ datapoint, relativeIndex, seriesIndex, show = false }) {
651+
console.log(datapoint)
652+
if (FINAL_CONFIG.value.events.datapointEnter) {
653+
FINAL_CONFIG.value.events.datapointEnter({ datapoint, seriesIndex });
654+
}
655+
615656
dataTooltipSlot.value = { datapoint, seriesIndex, config: FINAL_CONFIG.value, series: immutableSet.value };
616657
isTooltip.value = show;
617658
selectedSerie.value = relativeIndex;
@@ -788,6 +829,9 @@ function dashLabel(num) {
788829
}
789830
790831
function selectDatapoint(datapoint, index) {
832+
if (FINAL_CONFIG.value.events.datapointClick) {
833+
FINAL_CONFIG.value.events.datapointClick({ datapoint, seriesIndex: datapoint.seriesIndex})
834+
}
791835
emit('selectDatapoint', { datapoint, index });
792836
}
793837
@@ -1133,7 +1177,8 @@ defineExpose({
11331177
relativeIndex: i,
11341178
seriesIndex: arc.seriesIndex,
11351179
show: true
1136-
})" @mouseleave="isTooltip = false; selectedSerie = null" @click="selectDatapoint(arc, i)" />
1180+
})"
1181+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })" @click="selectDatapoint(arc, i)" />
11371182
</g>
11381183
<g v-else>
11391184
<circle data-cy="tooltip-trap" :cx="svg.width / 2" :cy="svg.height / 2" :r="minSize"
@@ -1142,7 +1187,7 @@ defineExpose({
11421187
relativeIndex: 0,
11431188
seriesIndex: currentDonut[0].seriesIndex,
11441189
show: true
1145-
})" @mouseleave="isTooltip = false; selectedSerie = null"
1190+
})" @mouseleave="handleDatapointLeave({ datapoint: currentDonut[0], seriesIndex: currentDonut[0].seriesIndex })"
11461191
@click="selectDatapoint(currentDonut[0], i)" />
11471192
</g>
11481193
</template>
@@ -1229,7 +1274,15 @@ defineExpose({
12291274
:cx="calcMarkerOffsetX(arc).x" :cy="calcMarkerOffsetY(arc) - 3.5" :fill="arc.color"
12301275
:stroke="FINAL_CONFIG.style.chart.backgroundColor" :stroke-width="1" :r="3"
12311276
:filter="!FINAL_CONFIG.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? `` : `url(#blur_${uid})`"
1232-
@click="selectDatapoint(arc, i)" />
1277+
@click="selectDatapoint(arc, i)"
1278+
@mouseenter="useTooltip({
1279+
datapoint: arc,
1280+
relativeIndex: i,
1281+
seriesIndex: arc.seriesIndex,
1282+
show: true
1283+
})"
1284+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
1285+
/>
12331286
</template>
12341287
<template v-if="FINAL_CONFIG.type === 'polar'">
12351288
<circle data-cy="polar-label-marker" v-if="isArcBigEnough(arc) && mutableConfig.dataLabels.show"
@@ -1238,7 +1291,14 @@ defineExpose({
12381291
:fill="arc.color" :stroke="FINAL_CONFIG.style.chart.backgroundColor" :stroke-width="1"
12391292
:r="3"
12401293
:filter="!FINAL_CONFIG.useBlurOnHover || [null, undefined].includes(selectedSerie) || selectedSerie === i ? `` : `url(#blur_${uid})`"
1241-
@click="selectDatapoint(arc, i)"
1294+
@click="selectDatapoint(arc, i)"
1295+
@mouseenter="useTooltip({
1296+
datapoint: arc,
1297+
relativeIndex: i,
1298+
seriesIndex: arc.seriesIndex,
1299+
show: true
1300+
})"
1301+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
12421302
:style="{
12431303
transition: isFirstLoad || !FINAL_CONFIG.serieToggleAnimation.show ? 'none' : `all ${FINAL_CONFIG.serieToggleAnimation.durationMs}ms ease-in-out`
12441304
}"
@@ -1251,7 +1311,15 @@ defineExpose({
12511311
:fill="FINAL_CONFIG.style.chart.layout.labels.percentage.color"
12521312
:font-size="FINAL_CONFIG.style.chart.layout.labels.percentage.fontSize"
12531313
:style="`font-weight:${FINAL_CONFIG.style.chart.layout.labels.percentage.bold ? 'bold' : ''}`"
1254-
@click="selectDatapoint(arc, i)">
1314+
@click="selectDatapoint(arc, i)"
1315+
@mouseenter="useTooltip({
1316+
datapoint: arc,
1317+
relativeIndex: i,
1318+
seriesIndex: arc.seriesIndex,
1319+
show: true
1320+
})"
1321+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
1322+
>
12551323
{{ displayArcPercentage(arc, noGhostDonut) }} {{
12561324
FINAL_CONFIG.style.chart.layout.labels.value.show ? `(${applyDataLabel(
12571325
FINAL_CONFIG.style.chart.layout.labels.value.formatter,
@@ -1271,7 +1339,15 @@ defineExpose({
12711339
:fill="FINAL_CONFIG.style.chart.layout.labels.name.color"
12721340
:font-size="FINAL_CONFIG.style.chart.layout.labels.name.fontSize"
12731341
:style="`font-weight:${FINAL_CONFIG.style.chart.layout.labels.name.bold ? 'bold' : ''}`"
1274-
@click="selectDatapoint(arc, i)">
1342+
@click="selectDatapoint(arc, i)"
1343+
@mouseenter="useTooltip({
1344+
datapoint: arc,
1345+
relativeIndex: i,
1346+
seriesIndex: arc.seriesIndex,
1347+
show: true
1348+
})"
1349+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
1350+
>
12751351
{{ arc.name }}
12761352
</text>
12771353
</template>
@@ -1286,7 +1362,15 @@ defineExpose({
12861362
transition: isFirstLoad || !FINAL_CONFIG.serieToggleAnimation.show ? 'none' : `all ${FINAL_CONFIG.serieToggleAnimation.durationMs}ms ease-in-out`,
12871363
fontWeight: FINAL_CONFIG.style.chart.layout.labels.percentage.bold ? 'bold': 'normal'
12881364
}"
1289-
@click="selectDatapoint(arc, i)">
1365+
@click="selectDatapoint(arc, i)"
1366+
@mouseenter="useTooltip({
1367+
datapoint: arc,
1368+
relativeIndex: i,
1369+
seriesIndex: arc.seriesIndex,
1370+
show: true
1371+
})"
1372+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
1373+
>
12901374
{{ displayArcPercentage(arc, noGhostDonut) }} {{
12911375
FINAL_CONFIG.style.chart.layout.labels.value.show ? `(${applyDataLabel(
12921376
FINAL_CONFIG.style.chart.layout.labels.value.formatter,
@@ -1310,7 +1394,15 @@ defineExpose({
13101394
transition: isFirstLoad || !FINAL_CONFIG.serieToggleAnimation.show ? 'none' : `all ${FINAL_CONFIG.serieToggleAnimation.durationMs}ms ease-in-out`,
13111395
fontWeight: FINAL_CONFIG.style.chart.layout.labels.name.bold ? 'bold': 'normal'
13121396
}"
1313-
@click="selectDatapoint(arc, i)">
1397+
@click="selectDatapoint(arc, i)"
1398+
@mouseenter="useTooltip({
1399+
datapoint: arc,
1400+
relativeIndex: i,
1401+
seriesIndex: arc.seriesIndex,
1402+
show: true
1403+
})"
1404+
@mouseleave="handleDatapointLeave({ datapoint: arc, seriesIndex: arc.seriesIndex })"
1405+
>
13141406
{{ arc.name }}
13151407
</text>
13161408
</template>

‎src/components/vue-ui-vertical-bar.vue‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
downloadCsv,
1212
error,
1313
functionReturnsString,
14+
hasDeepProperty,
1415
isFunction,
1516
objectIsEmpty,
1617
palette,
@@ -96,17 +97,42 @@ function prepareConfig() {
9697
userConfig: props.config,
9798
defaultConfig: DEFAULT_CONFIG
9899
});
100+
let finalConfig = {};
101+
99102
if (mergedConfig.theme) {
100-
return {
103+
finalConfig = {
101104
...useNestedProp({
102105
userConfig: themes.vue_ui_vertical_bar[mergedConfig.theme] || props.config,
103106
defaultConfig: mergedConfig
104107
}),
105108
customPalette: themePalettes[mergedConfig.theme] || palette
106109
}
107110
} else {
108-
return mergedConfig;
111+
finalConfig = mergedConfig;
112+
}
113+
114+
// ------------------------------ OVERRIDES -----------------------------------
115+
116+
if (props.config && hasDeepProperty(props.config, 'events.datapointEnter')) {
117+
finalConfig.events.datapointEnter = props.config.events.datapointEnter;
118+
} else {
119+
finalConfig.events.datapointEnter = null;
120+
}
121+
122+
if (props.config && hasDeepProperty(props.config, 'events.datapointLeave')) {
123+
finalConfig.events.datapointLeave = props.config.events.datapointLeave;
124+
} else {
125+
finalConfig.events.datapointLeave = null;
126+
}
127+
128+
if (props.config && hasDeepProperty(props.config, 'events.datapointClick')) {
129+
finalConfig.events.datapointClick = props.config.events.datapointClick;
130+
} else {
131+
finalConfig.events.datapointClick = null;
109132
}
133+
134+
// ----------------------------------------------------------------------------
135+
return finalConfig;
110136
}
111137
112138
watch(() => props.config, (_newCfg) => {
@@ -450,7 +476,26 @@ const selectedBarId = ref(null);
450476
451477
const dataTooltipSlot = ref(null);
452478
479+
function selectDatapoint({ datapoint, seriesIndex }) {
480+
if (FINAL_CONFIG.value.events.datapointClick) {
481+
FINAL_CONFIG.value.events.datapointClick({ datapoint, seriesIndex });
482+
}
483+
}
484+
485+
function handleDatapointLeave({ datapoint, seriesIndex }) {
486+
if (FINAL_CONFIG.value.events.datapointLeave) {
487+
FINAL_CONFIG.value.events.datapointLeave({ datapoint, seriesIndex });
488+
}
489+
hoveredBar.value = null;
490+
isTooltip.value = false;
491+
selectedBarId.value = null;
492+
}
493+
453494
function useTooltip(bar, seriesIndex) {
495+
if (FINAL_CONFIG.value.events.datapointEnter) {
496+
FINAL_CONFIG.value.events.datapointEnter({ datpoint: bar, seriesIndex });
497+
}
498+
454499
dataTooltipSlot.value = {
455500
datapoint: bar,
456501
seriesIndex,
@@ -1010,7 +1055,8 @@ defineExpose({
10101055
:height="barHeight + barGap <= 0 ? 0.0001 : barHeight + barGap"
10111056
:fill="selectedBarId === serie.id ? setOpacity(FINAL_CONFIG.style.chart.layout.highlighter.color, FINAL_CONFIG.style.chart.layout.highlighter.opacity) : 'transparent'"
10121057
@mouseenter="useTooltip(serie, i)"
1013-
@mouseleave="hoveredBar = null; isTooltip = false; selectedBarId = null"
1058+
@mouseleave="handleDatapointLeave({ datapoint: serie, seriesIndex: i })"
1059+
@click="selectDatapoint({ datapoint: serie, seriesIndex: i })"
10141060
/>
10151061
</g>
10161062
<slot name="svg" :svg="svg"/>

‎src/useConfig.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,11 @@ export function useConfig() {
703703
theme: '',
704704
customPalette: [],
705705
useCssAnimation: true,
706+
events: {
707+
datapointEnter: null,
708+
datapointLeave: null,
709+
datapointClick: null
710+
},
706711
serieToggleAnimation: {
707712
show: true,
708713
durationMs: 500,
@@ -1694,6 +1699,11 @@ export function useConfig() {
16941699
theme: '',
16951700
customPalette: [],
16961701
useCssAnimation: true,
1702+
events: {
1703+
datapointEnter: null,
1704+
datapointLeave: null,
1705+
datapointClick: null
1706+
},
16971707
style: {
16981708
fontFamily: 'inherit',
16991709
chart: {

‎types/vue-data-ui.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3295,6 +3295,11 @@ declare module "vue-data-ui" {
32953295
customPalette?: string[];
32963296
useBlurOnHover?: boolean;
32973297
useCssAnimation?: boolean;
3298+
events?: {
3299+
datapointEnter?: null | ((data: any) => void),
3300+
datapointLeave?: null | ((data: any) => void),
3301+
datapointClick?: null | ((data: any) => void)
3302+
},
32983303
serieToggleAnimation?: {
32993304
show?: boolean;
33003305
durationMs?: number;
@@ -4692,6 +4697,11 @@ declare module "vue-data-ui" {
46924697
theme?: Theme;
46934698
customPalette?: string[];
46944699
useCssAnimation?: boolean;
4700+
events?: {
4701+
datapointEnter?: null | ((data: any) => void),
4702+
datapointLeave?: null | ((data: any) => void),
4703+
datapointClick?: null | ((data: any) => void)
4704+
},
46954705
style?: {
46964706
fontFamily?: string;
46974707
chart?: {

0 commit comments

Comments
 (0)