Skip to content

Commit 041f6bd

Browse files
graphierosgraphieros
committed
VueUiOnion added tooltip
1 parent 41e2a57 commit 041f6bd

File tree

8 files changed

+146
-16
lines changed

8 files changed

+146
-16
lines changed

‎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.18",
4+
"version": "2.0.19",
55
"type": "module",
66
"description": "A user-empowering data visualization Vue components library",
77
"keywords": [

‎src/App.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2583,6 +2583,19 @@ const moleculeConfig = ref({
25832583
}
25842584
})
25852585
2586+
const onionConfig = ref({
2587+
style: {
2588+
chart: {
2589+
tooltip: {
2590+
customFormat: ({ seriesIndex, datapoint, series, config }) => {
2591+
console.log({ seriesIndex, datapoint, series, config })
2592+
return 'TEST'
2593+
}
2594+
}
2595+
}
2596+
}
2597+
})
2598+
25862599
function selectSparklineDatapoint({ datapoint, index }) {
25872600
console.log({datapoint, index })
25882601
}
@@ -3320,7 +3333,7 @@ function selectHistoDatapoint({ datapoint, index }) {
33203333
</template>
33213334
<template #dev>
33223335
<OnionTest
3323-
:config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
3336+
:config="onionConfig"
33243337
:dataset="onionDataset"
33253338
@selectLegend="selectOnionLegend"
33263339
>
@@ -3332,7 +3345,7 @@ function selectHistoDatapoint({ datapoint, index }) {
33323345
<template #prod>
33333346
<VueUiOnion
33343347
ref="oniontest"
3335-
:config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
3348+
:config="onionConfig"
33363349
:dataset="onionDataset"
33373350
@selectLegend="selectOnionLegend"
33383351
>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
199199
datapoint,
200200
series: immutableSet.value,
201201
config: donutConfig.value
202-
}, () => tooltipContent))) {
202+
}))) {
203203
tooltipContent.value = customFormat({
204204
seriesIndex,
205205
datapoint,
@@ -650,7 +650,7 @@ defineExpose({
650650
:color="donutConfig.style.chart.tooltip.color"
651651
:parent="donutChart"
652652
:content="tooltipContent"
653-
:isCustom="donutConfig.style.chart.tooltip.customFormat && typeof donutConfig.style.chart.tooltip.customFormat === 'function'"
653+
:isCustom="isFunction(donutConfig.style.chart.tooltip.customFormat)"
654654
/>
655655

656656
<!-- DATA TABLE -->

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

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
import { ref, computed, nextTick } from "vue";
33
import {
44
convertColorToHex,
5-
palette,
6-
opacity,
7-
createUid,
85
createCsvContent,
9-
downloadCsv
6+
createUid,
7+
dataLabel,
8+
downloadCsv,
9+
functionReturnsString,
10+
isFunction,
11+
opacity,
12+
palette,
1013
} from "../lib.js";
1114
import pdf from "../pdf";
1215
import img from "../img";
@@ -16,6 +19,7 @@ import Title from "../atoms/Title.vue";
1619
import UserOptions from "../atoms/UserOptions.vue";
1720
import Legend from "../atoms/Legend.vue";
1821
import DataTable from "../atoms/DataTable.vue";
22+
import Tooltip from "../atoms/Tooltip.vue";
1923
2024
const props = defineProps({
2125
config: {
@@ -41,6 +45,8 @@ const isPrinting = ref(false);
4145
const onionChart = ref(null);
4246
const details = ref(null);
4347
const step = ref(0);
48+
const isTooltip = ref(false);
49+
const tooltipContent = ref("");
4450
4551
const onionConfig = computed(() => {
4652
return useNestedProp({
@@ -93,7 +99,8 @@ const immutableDataset = computed(() => {
9399
color: convertColorToHex(onion.color) || palette[i],
94100
id,
95101
shape: 'circle',
96-
opacity: segregated.value.includes(id) ? 0.5 : 1
102+
opacity: segregated.value.includes(id) ? 0.5 : 1,
103+
absoluteIndex: i
97104
}
98105
})
99106
});
@@ -262,6 +269,35 @@ function toggleFullscreen(state) {
262269
step.value += 1;
263270
}
264271
272+
function useTooltip({ datapoint, seriesIndex, show = true }) {
273+
const absoluteIndex = datapoint.absoluteIndex;
274+
selectedSerie.value = seriesIndex;
275+
isTooltip.value = show;
276+
277+
let html = "";
278+
279+
const customFormat = onionConfig.value.style.chart.tooltip.customFormat;
280+
281+
if (isFunction(customFormat) && functionReturnsString(() => customFormat({
282+
seriesIndex: absoluteIndex,
283+
datapoint,
284+
series: immutableDataset.value,
285+
config: onionConfig.value
286+
}))) {
287+
tooltipContent.value = customFormat({
288+
seriesIndex: absoluteIndex,
289+
datapoint,
290+
series: immutableDataset.value,
291+
config: onionConfig.value
292+
})
293+
} else {
294+
html += `<div style="width: 100%; border-bottom: 1px solid #ccc; padding-bottom: 6px;margin-bottom:3px;display:flex;flex-direction:row;gap:3px;align-items:center"><svg viewBox="0 0 12 12" height="14" width="14"><circle data-cy="donut-tooltip-marker" cx="6" cy="6" r="6" stroke="none" fill="${datapoint.color}"/></svg><span></span>${datapoint.name}</span></div>`;
295+
html += `<div style="width:100%;text-align:left;"><b>${dataLabel({p: '', v: datapoint.percentage, s: '%', r: onionConfig.value.style.chart.tooltip.roundingPercentage})}</b> (${dataLabel({ p: datapoint.prefix, v: datapoint.value, s: datapoint.suffix, r: onionConfig.value.style.chart.tooltip.roundingValue })})</div>`
296+
297+
tooltipContent.value = `<div>${html}</div>`
298+
}
299+
}
300+
265301
defineExpose({
266302
getData,
267303
generatePdf,
@@ -410,8 +446,12 @@ defineExpose({
410446
stroke-linecap="round"
411447
class="vue-ui-onion-path"
412448
style="transform:rotate(-90deg);transform-origin: 50% 50%"
413-
@mouseenter="selectedSerie = i"
414-
@mouseleave="selectedSerie = undefined"
449+
@mouseenter="useTooltip({
450+
datapoint: onion,
451+
show: true,
452+
seriesIndex: i,
453+
})"
454+
@mouseleave="selectedSerie = undefined; isTooltip = false"
415455
/>
416456
417457
@@ -487,6 +527,16 @@ defineExpose({
487527
</template>
488528
</Legend>
489529
530+
<!-- TOOLTIP -->
531+
<Tooltip
532+
:show="onionConfig.style.chart.tooltip.show && isTooltip"
533+
:backgroundColor="onionConfig.style.chart.tooltip.backgroundColor"
534+
:color="onionConfig.style.chart.tooltip.color"
535+
:parent="onionChart"
536+
:content="tooltipContent"
537+
:isCustom="isFunction(onionConfig.style.chart.tooltip.customFormat)"
538+
/>
539+
490540
<!-- DATA TABLE -->
491541
<div class="vue-ui-onion-table" :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
492542
<DataTable

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,11 @@ const dataTable = computed(() => {
338338
339339
const body = drawableDataset.value.map(ds => {
340340
return [
341-
`<span style="color:${ds.color}">⬤</span> ${ds.name}`,
341+
{
342+
shape: ds.shape,
343+
content: ds.name,
344+
color: ds.color
345+
},
342346
Number((ds.correlation.coefficient ?? 0).toFixed(scatterConfig.value.table.td.roundingValue)).toLocaleString(),
343347
ds.plots.length.toLocaleString(),
344348
Number((ds.plots.map(p => p.v.x ?? 0).reduce((a,b) => a + b , 0) / ds.plots.length).toFixed(scatterConfig.value.table.td.roundingAverage)).toLocaleString(),
@@ -693,7 +697,10 @@ defineExpose({
693697
{{ th }}
694698
</template>
695699
<template #td="{ td }">
696-
<div v-html="td"/>
700+
<div v-if="td.shape">
701+
<span>{{ td.content }}</span>
702+
</div>
703+
<div v-else v-html="td"/>
697704
</template>
698705
</DataTable>
699706
</div>

‎src/default_configs.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1136,6 +1136,17 @@
11361136
"roundingValue": 0,
11371137
"roundingPercentage": 0,
11381138
"offsetY": 6
1139+
},
1140+
"tooltip": {
1141+
"show": true,
1142+
"color": "#2D353C",
1143+
"backgroundColor": "#FFFFFF",
1144+
"fontSize": 14,
1145+
"showValue": true,
1146+
"showPercentage": true,
1147+
"roundingValue": 0,
1148+
"roundingPercentage": 0,
1149+
"customFormat": null
11391150
}
11401151
}
11411152
},

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

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1278,6 +1278,7 @@ declare module 'vue-data-ui' {
12781278
color?: string;
12791279
useSideColor?: boolean;
12801280
bold?: boolean;
1281+
offsetY?: number;
12811282
};
12821283
xAxis?: {
12831284
show?: boolean;
@@ -3137,6 +3138,17 @@ declare module 'vue-data-ui' {
31373138
roundingValue?: number;
31383139
roundingPercentage?: number;
31393140
};
3141+
tooltip?: {
3142+
show?: boolean;
3143+
color?: string;
3144+
backgroundColor?: string;
3145+
fontSize?: number;
3146+
showValue?: boolean;
3147+
showPercentage?: boolean;
3148+
roundingValue?: number;
3149+
roundingPercentage?: number;
3150+
customFormat?: (params: VueUiTooltipParams<VueUiOnionDatapoint, VueUiOnionSeriesItem[], VueUiOnionConfig>) => string;
3151+
};
31403152
};
31413153
};
31423154
userOptions?: {
@@ -3169,6 +3181,43 @@ declare module 'vue-data-ui' {
31693181
};
31703182
};
31713183

3184+
export type VueUiOnionDatapoint = {
3185+
absoluteIndex: number;
3186+
color: string;
3187+
id: string;
3188+
labelY: number;
3189+
name: string;
3190+
opacity: number;
3191+
path: {
3192+
active: string;
3193+
bgDashArray: string;
3194+
bgDashOffset: number;
3195+
dashArray: string;
3196+
dashOffset: number;
3197+
fullOffset: number;
3198+
};
3199+
percentage: number;
3200+
prefix: string;
3201+
radius: number;
3202+
shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
3203+
suffix: string;
3204+
value: number;
3205+
}
3206+
3207+
export type VueUiOnionSeriesItem = {
3208+
absoluteIndex: number;
3209+
color: string;
3210+
id: string;
3211+
name: string;
3212+
opacity: number;
3213+
percentage: number;
3214+
prefix: string;
3215+
shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
3216+
suffix: string;
3217+
value: number;
3218+
}
3219+
3220+
31723221
export const VueUiOnion: DefineComponent<{
31733222
config?: VueUiOnionConfig,
31743223
dataset: VueUiOnionDatasetItem[]

0 commit comments

Comments
 (0)