From 9c917562a8a98e1c080598b85426bf04c1a30594 Mon Sep 17 00:00:00 2001 From: graphieros Date: Thu, 7 Mar 2024 16:21:28 +0100 Subject: [PATCH] Make tooltips headless in customFormat mode --- package-lock.json | 4 ++-- package.json | 2 +- src/App.vue | 12 ++++++------ src/atoms/Tooltip.vue | 2 +- src/components/vue-ui-age-pyramid.vue | 2 +- src/components/vue-ui-candlestick.vue | 2 +- src/components/vue-ui-donut.vue | 2 +- src/components/vue-ui-heatmap.vue | 2 +- src/components/vue-ui-molecule.vue | 2 +- src/components/vue-ui-quadrant.vue | 2 +- src/components/vue-ui-radar.vue | 2 +- src/components/vue-ui-rings.vue | 2 +- src/components/vue-ui-scatter.vue | 2 +- src/components/vue-ui-vertical-bar.vue | 2 +- src/components/vue-ui-waffle.vue | 2 +- src/components/vue-ui-xy.vue | 2 +- 16 files changed, 22 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index c063f897..cfcc4f32 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "vue-data-ui", - "version": "2.0.7", + "version": "2.0.8", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "vue-data-ui", - "version": "2.0.7", + "version": "2.0.8", "license": "MIT", "devDependencies": { "@vitejs/plugin-vue": "^4.2.3", diff --git a/package.json b/package.json index 015ff882..180b6f32 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "vue-data-ui", "private": false, - "version": "2.0.8", + "version": "2.0.9", "type": "module", "description": "A user-empowering data visualization Vue components library", "keywords": [ diff --git a/src/App.vue b/src/App.vue index 13831b69..d65f85ae 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2319,12 +2319,12 @@ const donutConfig = ref({ const xyConfig = ref({ chart: { - // tooltip: { - // customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => { - // console.log({seriesIndex, datapoint, series, bars, lines, plots, config}); - // return 'TEST' - // } - // } + tooltip: { + customFormat: ({ seriesIndex, datapoint, series, bars, lines, plots, config }) => { + console.log({seriesIndex, datapoint, series, bars, lines, plots, config}); + return 'TEST' + } + } } }) diff --git a/src/atoms/Tooltip.vue b/src/atoms/Tooltip.vue index b05e5901..31abcae1 100644 --- a/src/atoms/Tooltip.vue +++ b/src/atoms/Tooltip.vue @@ -50,7 +50,7 @@ const position = computed(() => { data-cy="tooltip" :class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}" v-if="show" - :style="`top:${position.top}px;left:${position.left}px;${props.isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`" + :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth}`}`" >
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue index 1a42d543..cb82b2fb 100644 --- a/src/components/vue-ui-age-pyramid.vue +++ b/src/components/vue-ui-age-pyramid.vue @@ -610,7 +610,7 @@ defineExpose({ :color="agePyramidConfig.style.tooltip.color" :parent="agePyramid" :content="tooltipContent" - :isCustom="!!agePyramidConfig.style.tooltip.customFormat" + :isCustom="agePyramidConfig.style.tooltip.customFormat && typeof agePyramidConfig.style.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue index 5eed87ef..8ddb9d6e 100644 --- a/src/components/vue-ui-candlestick.vue +++ b/src/components/vue-ui-candlestick.vue @@ -615,7 +615,7 @@ defineExpose({ :color="candlestickConfig.style.tooltip.color" :parent="candlestickChart" :content="tooltipContent" - :isCustom="!!candlestickConfig.style.tooltip.customFormat" + :isCustom="candlestickConfig.style.tooltip.customFormat && typeof candlestickConfig.style.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue index 8ece5e23..96eb9c00 100644 --- a/src/components/vue-ui-donut.vue +++ b/src/components/vue-ui-donut.vue @@ -638,7 +638,7 @@ defineExpose({ :color="donutConfig.style.chart.tooltip.color" :parent="donutChart" :content="tooltipContent" - :isCustom="!!donutConfig.style.chart.tooltip.customFormat" + :isCustom="donutConfig.style.chart.tooltip.customFormat && typeof donutConfig.style.chart.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue index 08e88919..52512add 100644 --- a/src/components/vue-ui-heatmap.vue +++ b/src/components/vue-ui-heatmap.vue @@ -529,7 +529,7 @@ defineExpose({ :color="heatmapConfig.style.tooltip.color" :parent="heatmapChart" :content="tooltipContent" - :isCustom="!!heatmapConfig.style.tooltip.customFormat" + :isCustom="heatmapConfig.style.tooltip.customFormat && typeof heatmapConfig.style.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue index 02079151..12841cac 100644 --- a/src/components/vue-ui-molecule.vue +++ b/src/components/vue-ui-molecule.vue @@ -555,7 +555,7 @@ defineExpose({ :color="moleculeConfig.style.chart.tooltip.color" :parent="moleculeChart" :content="tooltipContent" - :isCustom="!!moleculeConfig.style.chart.tooltip.customFormat" + :isCustom="moleculeConfig.style.chart.tooltip.customFormat && typeof moleculeConfig.style.chart.tooltip.customFormat === 'function'" />
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue index 9204e916..a8c4e485 100644 --- a/src/components/vue-ui-rings.vue +++ b/src/components/vue-ui-rings.vue @@ -537,7 +537,7 @@ defineExpose({ :color="ringsConfig.style.chart.tooltip.color" :parent="ringsChart" :content="tooltipContent" - :isCustom="!!ringsConfig.style.chart.tooltip.customFormat" + :isCustom="ringsConfig.style.chart.tooltip.customFormat && typeof ringsConfig.style.chart.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue index 35edac91..10342a2b 100644 --- a/src/components/vue-ui-scatter.vue +++ b/src/components/vue-ui-scatter.vue @@ -657,7 +657,7 @@ defineExpose({ :color="scatterConfig.style.tooltip.color" :parent="scatterChart" :content="tooltipContent" - :isCustom="!!scatterConfig.style.tooltip.customFormat" + :isCustom="scatterConfig.style.tooltip.customFormat && typeof scatterConfig.style.tooltip.customFormat === 'function'" >
diff --git a/src/components/vue-ui-vertical-bar.vue b/src/components/vue-ui-vertical-bar.vue index b3f48377..d47d065b 100644 --- a/src/components/vue-ui-vertical-bar.vue +++ b/src/components/vue-ui-vertical-bar.vue @@ -676,7 +676,7 @@ defineExpose({ :color="verticalBarConfig.style.chart.tooltip.color" :parent="verticalBarChart" :content="tooltipContent" - :isCustom="!!verticalBarConfig.style.chart.tooltip.customFormat" + :isCustom="verticalBarConfig.style.chart.tooltip.customFormat && typeof verticalBarConfig.style.chart.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue index 917a3e40..14b13f79 100644 --- a/src/components/vue-ui-waffle.vue +++ b/src/components/vue-ui-waffle.vue @@ -603,7 +603,7 @@ defineExpose({ :color="waffleConfig.style.chart.tooltip.color" :parent="waffleChart" :content="tooltipContent" - :isCustom="!!waffleConfig.style.chart.tooltip.customFormat" + :isCustom="waffleConfig.style.chart.tooltip.customFormat && typeof waffleConfig.style.chart.tooltip.customFormat === 'function'" /> diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue index bc41bf73..2edbfd5c 100644 --- a/src/components/vue-ui-xy.vue +++ b/src/components/vue-ui-xy.vue @@ -647,7 +647,7 @@ :color="chartConfig.chart.tooltip.color" :parent="$refs.chart" :content="tooltipContent" - :isCustom="!!chartConfig.chart.tooltip.customFormat" + :isCustom="chartConfig.chart.tooltip.customFormat && typeof chartConfig.chart.tooltip.customFormat === 'function'" />