Skip to content

Commit 226baa7

Browse files
graphierosgraphieros
committed
Added exposed data to #tooltip-before and #tooltip-after scoped slots
1 parent 1c936d8 commit 226baa7

20 files changed

+351
-185
lines changed

‎README.md‎

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -209,8 +209,18 @@ It is recommended to set the show legend config attribute to false, to hide the
209209
## Tooltip #tooltip-before & #tooltip-after slots
210210

211211
Since v.2.0.57, it is possible to further customize tooltip contents with #tooltip-before and #tooltip-after slots.
212-
It is that easy to include an image, another chart or any other content into your tooltips.
213-
These slots do not expose any data, as you can create your own custom data content using the config option tooltip.customFormat.
212+
It is that easy to include an image, another chart or any other content into your tooltips. It's an alternative to the config option tooltip.customFormat, in case richer tooltip content is needed.
213+
214+
Both slots expose the following object:
215+
216+
```
217+
{
218+
datapoint,
219+
seriesIndex,
220+
series,
221+
config,
222+
}
223+
```
214224

215225
The following charts bear these slots:
216226

@@ -227,17 +237,29 @@ The following charts bear these slots:
227237
- VueUiRings
228238
- VueUiScatter
229239
- VueUiVerticalBar
230-
- VueUiXy
240+
- VueUiXy \*
231241
- VueUiwaffle
232242

243+
\* VueUiXy slots specifically expose the following additional attributes:
244+
233245
```
246+
247+
{
248+
...,
249+
bars,
250+
lines,
251+
plots
252+
}
253+
254+
```
255+
234256
<VueUiDonut :config="config" :dataset="dataset">
235-
<template #tooltip-before">
257+
<template #tooltip-before={ datapoint, seriesIndex, dataset, config }">
236258
<div>
237259
This content shows first
238260
</div>
239261
</template>
240-
<template #tooltip-after">
262+
<template #tooltip-after={ datapoint, seriesIndex, dataset, config }">
241263
<div>
242264
This content shows last
243265
</div>

‎package-lock.json‎

Lines changed: 7 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "vue-data-ui",
33
"private": false,
4-
"version": "2.0.58",
4+
"version": "2.0.59",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [
@@ -79,7 +79,7 @@
7979
"jspdf": "^2.5.1",
8080
"remove-attr": "^0.0.13",
8181
"sass": "^1.57.1",
82-
"vite": "^4.4.5",
82+
"vite": "^4.5.3",
8383
"vitest": "^0.34.1",
8484
"vue": "^3.3.4"
8585
}

‎src/App.vue‎

Lines changed: 76 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -2495,12 +2495,12 @@ const xyConfig = ref({
24952495
labels: {
24962496
fontSize: 30
24972497
},
2498-
tooltip: {
2499-
customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2500-
console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2501-
return 'TEST'
2502-
}
2503-
}
2498+
// tooltip: {
2499+
// customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => {
2500+
// console.log({seriesIndex, datapoint, series, bars, lines, plots, config});
2501+
// return 'TEST'
2502+
// }
2503+
// }
25042504
},
25052505
bar: {
25062506
labels: {
@@ -3075,11 +3075,11 @@ const kpiConfig = ref(
30753075
</template>
30763076
<template #dev>
30773077
<GalaxyTest :dataset="galaxyDataset" :config="galaxyConfig">
3078-
<template #tooltip-before>
3079-
BEFORE
3078+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3079+
{{ datapoint.name }}
30803080
</template>
3081-
<template #tooltip-after>
3082-
AFTER
3081+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3082+
{{ seriesIndex }}
30833083
</template>
30843084
</GalaxyTest>
30853085
</template>
@@ -3118,11 +3118,11 @@ const kpiConfig = ref(
31183118
</template>
31193119
<template #dev>
31203120
<VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig">
3121-
<template #tooltip-before>
3122-
BEFORE
3121+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3122+
{{ datapoint.name }}
31233123
</template>
3124-
<template #tooltip-after>
3125-
AFTER
3124+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3125+
{{ seriesIndex }}
31263126
</template>
31273127
</VueDataUiTest>
31283128

@@ -3186,11 +3186,11 @@ const kpiConfig = ref(
31863186
</template>
31873187
<template #dev>
31883188
<VueDataUiTest component="VueUiMolecule" :dataset="clusterDataset" :config="moleculeConfig">
3189-
<template #tooltip-before>
3190-
BEFORE
3189+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3190+
{{ datapoint.name }}
31913191
</template>
3192-
<template #tooltip-after>
3193-
AFTER
3192+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3193+
{{ seriesIndex }}
31943194
</template>
31953195
</VueDataUiTest>
31963196
</template>
@@ -3457,11 +3457,11 @@ const kpiConfig = ref(
34573457
:dataset="ringsDataset"
34583458
:config="ringsConfig"
34593459
>
3460-
<template #tooltip-before>
3461-
BEFORE
3460+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3461+
{{ seriesIndex }}
34623462
</template>
3463-
<template #tooltip-after>
3464-
AFTER
3463+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3464+
{{ seriesIndex }}
34653465
</template>
34663466
<template #svg="{ svg }">
34673467
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3603,11 +3603,11 @@ const kpiConfig = ref(
36033603
@selectLegend="selectLegendXY"
36043604
@selectX="selectX"
36053605
>
3606-
<template #tooltip-before>
3607-
BEFORE
3606+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3607+
{{ seriesIndex }}
36083608
</template>
3609-
<template #tooltip-after>
3610-
AFTER
3609+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3610+
{{ seriesIndex }}
36113611
</template>
36123612
</VueDataUiTest>
36133613
<VueDataUiTest
@@ -3687,11 +3687,11 @@ const kpiConfig = ref(
36873687
:dataset="candlestickDataset"
36883688
:config="candlestickConfig"
36893689
>
3690-
<template #tooltip-before>
3691-
BEFORE
3690+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3691+
{{ seriesIndex }}
36923692
</template>
3693-
<template #tooltip-after>
3694-
AFTER
3693+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3694+
{{ seriesIndex }}
36953695
</template>
36963696
<template #svg="{ svg }">
36973697
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3735,12 +3735,12 @@ const kpiConfig = ref(
37353735
:dataset="scatterDataset"
37363736
:config="scatterConfig"
37373737
>
3738-
<template #tooltip-before>
3739-
BEFORE
3740-
</template>
3741-
<template #tooltip-after>
3742-
AFTER
3743-
</template>
3738+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3739+
{{ seriesIndex }}
3740+
</template>
3741+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3742+
{{ seriesIndex }}
3743+
</template>
37443744
<template #svg="{ svg }">
37453745
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
37463746
</template>
@@ -3784,11 +3784,12 @@ const kpiConfig = ref(
37843784
:dataset="verticalDataset"
37853785
:config="verticalBarConfig"
37863786
>
3787-
<template #tooltip-before>
3788-
BEFORE
3787+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3788+
{{ seriesIndex }}
3789+
{{ datapoint.name }}
37893790
</template>
3790-
<template #tooltip-after>
3791-
AFTER
3791+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3792+
{{ seriesIndex }}
37923793
</template>
37933794
<template #svg="{ svg }">
37943795
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3833,11 +3834,12 @@ const kpiConfig = ref(
38333834
:dataset="onionDataset"
38343835
@selectLegend="selectOnionLegend"
38353836
>
3836-
<template #tooltip-before>
3837-
BEFORE
3837+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3838+
{{ seriesIndex }}
3839+
{{ datapoint.name }}
38383840
</template>
3839-
<template #tooltip-after>
3840-
AFTER
3841+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3842+
{{ seriesIndex }}
38413843
</template>
38423844
<template #svg="{ svg }">
38433845
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3886,11 +3888,12 @@ const kpiConfig = ref(
38863888
@selectSide="selectSide"
38873889
@selectLegend="selectQuadrantLegend"
38883890
>
3889-
<template #tooltip-before>
3890-
BEFORE
3891+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3892+
{{ seriesIndex }}
3893+
{{ datapoint.name }}
38913894
</template>
3892-
<template #tooltip-after>
3893-
AFTER
3895+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3896+
{{ seriesIndex }}
38943897
</template>
38953898
<template #svg="{ svg }">
38963899
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3938,11 +3941,12 @@ const kpiConfig = ref(
39383941
:config="radarConfig"
39393942
@selectLegend="selectRadarLegend"
39403943
>
3941-
<template #tooltip-before>
3942-
BEFORE
3944+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3945+
{{ seriesIndex }}
3946+
{{ datapoint.name }}
39433947
</template>
3944-
<template #tooltip-after>
3945-
AFTER
3948+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
3949+
{{ seriesIndex }}
39463950
</template>
39473951
<template #svg="{ svg }">
39483952
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -3989,11 +3993,13 @@ const kpiConfig = ref(
39893993
:config="donutConfig"
39903994
@selectLegend="selectLegendDonut"
39913995
>
3992-
<template #tooltip-before>
3993-
BEFORE
3996+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
3997+
{{ seriesIndex }}
3998+
{{ datapoint.name }}
39943999
</template>
3995-
<template #tooltip-after>
3996-
AFTER
4000+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
4001+
{{ seriesIndex }}
4002+
{{ datapoint.name }}
39974003
</template>
39984004
<template #svg="{ svg }">
39994005
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -4214,11 +4220,11 @@ const kpiConfig = ref(
42144220
:dataset="pyramidDataset"
42154221
:config="pyramidConfig"
42164222
>
4217-
<template #tooltip-before>
4218-
BEFORE
4223+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
4224+
{{ seriesIndex }}
42194225
</template>
4220-
<template #tooltip-after>
4221-
AFTER
4226+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
4227+
{{ seriesIndex }}
42224228
</template>
42234229
<template #svg="{ svg }">
42244230
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -4263,11 +4269,11 @@ const kpiConfig = ref(
42634269
:config="waffleConfig"
42644270
@selectLegend="selectLegendWaffle"
42654271
>
4266-
<template #tooltip-before>
4267-
BEFORE
4272+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
4273+
{{ seriesIndex }}
42684274
</template>
4269-
<template #tooltip-after>
4270-
AFTER
4275+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
4276+
{{ seriesIndex }}
42714277
</template>
42724278
<template #svg="{ svg }">
42734279
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
@@ -4436,12 +4442,12 @@ const kpiConfig = ref(
44364442
:config="heatmapConfig"
44374443
:dataset="heatmapDataset"
44384444
>
4439-
<template #tooltip-before>
4440-
BEFORE
4441-
</template>
4442-
<template #tooltip-after>
4443-
BEFORE
4444-
</template>
4445+
<template #tooltip-before="{ seriesIndex, datapoint, series, config }">
4446+
{{ seriesIndex }}
4447+
</template>
4448+
<template #tooltip-after="{ seriesIndex, datapoint, series, config }">
4449+
{{ seriesIndex }}
4450+
</template>
44454451
<template #svg="{ svg }">
44464452
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="60" fill="#FF0000"/>
44474453
</template>

0 commit comments

Comments
 (0)