Skip to content

Commit dcb9385

Browse files
graphierosgraphieros
committed
Added #tooltip-before & #tooltip-after named slots on all components bearing tooltips
1 parent ad47075 commit dcb9385

22 files changed

+338
-32
lines changed

‎README.md‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ Or you can import just what you need in your files:
111111
</script>
112112
```
113113

114-
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using:
114+
Since v.2.0.38, you can also use the "VueDataUi" universal component, just specifying which component you are using. You can of course use the slots provided, if the target component has them.
115115

116116
```
117117
<script setup>
@@ -206,6 +206,46 @@ It is recommended to set the show legend config attribute to false, to hide the
206206
</VueUiDonut>
207207
```
208208

209+
## Tooltip #tooltip-before & #tooltip-after slots
210+
211+
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.
214+
215+
The following charts bear these slots:
216+
217+
- VueUiAgePyramid
218+
- VueUiCandlestick
219+
- VueUiDonut
220+
- VueUiHeatmap
221+
- VueUiMolecule
222+
- VueUiNestedDonuts
223+
- VueUiOnion
224+
- VueUiQuadrant
225+
- VueUiRadar
226+
- VueUiRings
227+
- VueUiScatter
228+
- VueUiVerticalBar
229+
- VueUiXy
230+
- VueUiwaffle
231+
232+
```
233+
<VueUiDonut :config="config" :dataset="dataset">
234+
<template #tooltip-before">
235+
<div>
236+
This content shows first
237+
</div>
238+
</template>
239+
<template #tooltip-after">
240+
<div>
241+
This content shows last
242+
</div>
243+
</template>
244+
</VueUiDonut>
245+
```
246+
247+
The #tooltip-before & #tooltip-after slots also works when using the VueDataUi universal component, if the component it wraps supports them.
248+
209249
# Config
210250

211251
If for some reason you can't access the documentation website and need to get the default config object for a component:

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
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.56",
4+
"version": "2.0.57",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 95 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2479,12 +2479,12 @@ const donutConfig = ref({
24792479
style: {
24802480
chart: {
24812481
tooltip: {
2482-
customFormat: ({ datapoint, seriesIndex, series , config}) => {
2483-
console.log({datapoint, seriesIndex, series, config});
2484-
return `<div style="background:${datapoint.color}33;color:${datapoint.color};padding:12px">
2485-
${datapoint.name} : ${datapoint.value}
2486-
</div>`
2487-
}
2482+
// customFormat: ({ datapoint, seriesIndex, series , config}) => {
2483+
// console.log({datapoint, seriesIndex, series, config});
2484+
// return `<div style="background:${datapoint.color}33;color:${datapoint.color};padding:12px">
2485+
// ${datapoint.name} : ${datapoint.value}
2486+
// </div>`
2487+
// }
24882488
}
24892489
}
24902490
}
@@ -3111,8 +3111,14 @@ const kpiConfig = ref(
31113111
</template>
31123112
<template #dev>
31133113
<VueDataUiTest component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig">
3114-
3114+
<template #tooltip-before>
3115+
BEFORE
3116+
</template>
3117+
<template #tooltip-after>
3118+
AFTER
3119+
</template>
31153120
</VueDataUiTest>
3121+
31163122
</template>
31173123
<template #prod>
31183124
<VueDataUi component="VueUiNestedDonuts" :dataset="nestedDonutsDataset" :config="nestedDonutsConfig"/>
@@ -3172,7 +3178,14 @@ const kpiConfig = ref(
31723178
<BaseIcon name="fullscreen" stroke="#5f8bee"/>
31733179
</template>
31743180
<template #dev>
3175-
<VueDataUiTest component="VueUiMolecule" :dataset="clusterDataset" :config="moleculeConfig"/>
3181+
<VueDataUiTest component="VueUiMolecule" :dataset="clusterDataset" :config="moleculeConfig">
3182+
<template #tooltip-before>
3183+
BEFORE
3184+
</template>
3185+
<template #tooltip-after>
3186+
AFTER
3187+
</template>
3188+
</VueDataUiTest>
31763189
</template>
31773190
<template #prod>
31783191
<VueDataUi component="VueUiMolecule" :dataset="clusterDataset" :config="moleculeConfig"/>
@@ -3437,6 +3450,12 @@ const kpiConfig = ref(
34373450
:dataset="ringsDataset"
34383451
:config="ringsConfig"
34393452
>
3453+
<template #tooltip-before>
3454+
BEFORE
3455+
</template>
3456+
<template #tooltip-after>
3457+
AFTER
3458+
</template>
34403459
<template #svg="{ svg }">
34413460
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
34423461
</template>
@@ -3577,6 +3596,12 @@ const kpiConfig = ref(
35773596
@selectLegend="selectLegendXY"
35783597
@selectX="selectX"
35793598
>
3599+
<template #tooltip-before>
3600+
BEFORE
3601+
</template>
3602+
<template #tooltip-after>
3603+
AFTER
3604+
</template>
35803605
</VueDataUiTest>
35813606
<VueDataUiTest
35823607
component="VueUiXy"
@@ -3655,6 +3680,12 @@ const kpiConfig = ref(
36553680
:dataset="candlestickDataset"
36563681
:config="candlestickConfig"
36573682
>
3683+
<template #tooltip-before>
3684+
BEFORE
3685+
</template>
3686+
<template #tooltip-after>
3687+
AFTER
3688+
</template>
36583689
<template #svg="{ svg }">
36593690
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
36603691
</template>
@@ -3697,6 +3728,12 @@ const kpiConfig = ref(
36973728
:dataset="scatterDataset"
36983729
:config="scatterConfig"
36993730
>
3731+
<template #tooltip-before>
3732+
BEFORE
3733+
</template>
3734+
<template #tooltip-after>
3735+
AFTER
3736+
</template>
37003737
<template #svg="{ svg }">
37013738
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
37023739
</template>
@@ -3740,6 +3777,12 @@ const kpiConfig = ref(
37403777
:dataset="verticalDataset"
37413778
:config="verticalBarConfig"
37423779
>
3780+
<template #tooltip-before>
3781+
BEFORE
3782+
</template>
3783+
<template #tooltip-after>
3784+
AFTER
3785+
</template>
37433786
<template #svg="{ svg }">
37443787
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
37453788
</template>
@@ -3783,6 +3826,12 @@ const kpiConfig = ref(
37833826
:dataset="onionDataset"
37843827
@selectLegend="selectOnionLegend"
37853828
>
3829+
<template #tooltip-before>
3830+
BEFORE
3831+
</template>
3832+
<template #tooltip-after>
3833+
AFTER
3834+
</template>
37863835
<template #svg="{ svg }">
37873836
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
37883837
</template>
@@ -3830,6 +3879,12 @@ const kpiConfig = ref(
38303879
@selectSide="selectSide"
38313880
@selectLegend="selectQuadrantLegend"
38323881
>
3882+
<template #tooltip-before>
3883+
BEFORE
3884+
</template>
3885+
<template #tooltip-after>
3886+
AFTER
3887+
</template>
38333888
<template #svg="{ svg }">
38343889
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
38353890
</template>
@@ -3876,6 +3931,12 @@ const kpiConfig = ref(
38763931
:config="radarConfig"
38773932
@selectLegend="selectRadarLegend"
38783933
>
3934+
<template #tooltip-before>
3935+
BEFORE
3936+
</template>
3937+
<template #tooltip-after>
3938+
AFTER
3939+
</template>
38793940
<template #svg="{ svg }">
38803941
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
38813942
</template>
@@ -3921,6 +3982,12 @@ const kpiConfig = ref(
39213982
:config="donutConfig"
39223983
@selectLegend="selectLegendDonut"
39233984
>
3985+
<template #tooltip-before>
3986+
BEFORE
3987+
</template>
3988+
<template #tooltip-after>
3989+
AFTER
3990+
</template>
39243991
<template #svg="{ svg }">
39253992
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
39263993
<Arrow
@@ -3957,7 +4024,7 @@ const kpiConfig = ref(
39574024
</template>
39584025
</Box>
39594026

3960-
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
4027+
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkstackbar)">
39614028
<template #title>
39624029
<BaseIcon name="chartSparkStackbar" />
39634030
VueUiSparkStackbar
@@ -4140,6 +4207,12 @@ const kpiConfig = ref(
41404207
:dataset="pyramidDataset"
41414208
:config="pyramidConfig"
41424209
>
4210+
<template #tooltip-before>
4211+
BEFORE
4212+
</template>
4213+
<template #tooltip-after>
4214+
AFTER
4215+
</template>
41434216
<template #svg="{ svg }">
41444217
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
41454218
</template>
@@ -4183,6 +4256,12 @@ const kpiConfig = ref(
41834256
:config="waffleConfig"
41844257
@selectLegend="selectLegendWaffle"
41854258
>
4259+
<template #tooltip-before>
4260+
BEFORE
4261+
</template>
4262+
<template #tooltip-after>
4263+
AFTER
4264+
</template>
41864265
<template #svg="{ svg }">
41874266
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="30" fill="#FF000033"/>
41884267
</template>
@@ -4305,7 +4384,7 @@ const kpiConfig = ref(
43054384
</template>
43064385
</Box>
43074386

4308-
<Box open @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
4387+
<Box @copy="copyConfig(PROD_CONFIG.vue_ui_sparkbar)">
43094388
<template #title>
43104389
<BaseIcon name="chartSparkbar"/>
43114390
VueUiSparkbar
@@ -4350,6 +4429,12 @@ const kpiConfig = ref(
43504429
:config="heatmapConfig"
43514430
:dataset="heatmapDataset"
43524431
>
4432+
<template #tooltip-before>
4433+
BEFORE
4434+
</template>
4435+
<template #tooltip-after>
4436+
BEFORE
4437+
</template>
43534438
<template #svg="{ svg }">
43544439
<circle :cx="svg.width / 2" :cy="svg.height / 2" :r="60" fill="#FF0000"/>
43554440
</template>

‎src/atoms/Tooltip.cy.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,20 @@ describe('<Tooltip />', () => {
1212
default: {
1313
render: () => 'Default slot'
1414
},
15-
['content-after']: {
15+
['tooltip-before']: {
16+
render: () => 'Slot before'
17+
},
18+
['tooltip-after']: {
1619
render: () => 'Slot after'
17-
}
20+
},
1821
}
1922
})
2023
})
2124

2225
it('renders all contents', () => {
2326
cy.contains('Default slot')
2427
cy.contains('Content')
28+
cy.contains('Slot before')
2529
cy.contains('Slot after')
2630
})
2731

‎src/atoms/Tooltip.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,10 @@ const position = computed(() => {
5252
v-if="show"
5353
:style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth}`}`"
5454
>
55+
<slot name="tooltip-before"/>
5556
<slot/>
5657
<div v-html="content"/>
57-
<slot name="content-after"/>
58+
<slot name="tooltip-after"/>
5859
</div>
5960
</template>
6061

0 commit comments

Comments
 (0)