Make tooltips headless in customFormat mode

graphieros · graphieros · commit 9c917562a8a9 · 2024-03-07T16:21:28.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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}`}`"
     >
         <slot/>
         <div v-html="content"/>
diff --git 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'"
         />
 
         <!-- DATA TABLE -->
diff --git 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'"
         />
 
         <!-- DATA TABLE -->
diff --git 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'"
         />
 
         <!-- DATA TABLE -->
diff --git 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'"
         />
         
         <!-- DATA TABLE -->
diff --git 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'"
         />
         <div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:48px`" v-if="mutableConfig.showTable">
             <DataTable
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -930,7 +930,7 @@ defineExpose({
             :color="quadrantConfig.style.chart.tooltip.color"
             :parent="quadrantChart"
             :content="tooltipContent"
-            :isCustom="!!quadrantConfig.style.chart.tooltip.customFormat"
+            :isCustom="quadrantConfig.style.chart.tooltip.customFormat && typeof quadrantConfig.style.chart.tooltip.customFormat === 'function'"
         >
             <svg height="14" width="14" viewBox="0 0 20 20" v-if="quadrantConfig.style.chart.tooltip.showShape">
                 <Shape
diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -610,7 +610,7 @@ defineExpose({
             :color="radarConfig.style.chart.tooltip.color"
             :parent="radarChart"
             :content="tooltipContent"
-            :isCustom="!!radarConfig.style.chart.tooltip.customFormat"
+            :isCustom="radarConfig.style.chart.tooltip.customFormat && typeof radarConfig.style.chart.tooltip.customFormat === 'function'"
         >
             <template #content-after>
                 <div style="max-width: 200px;margin:0 auto">
diff --git 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'"
     />
 
     <!-- DATA TABLE -->
diff --git 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'"
         >
             <div style="width: 100%; display: flex; align-items:center;justify-content:center;" v-if="scatterConfig.style.tooltip.showShape">
                 <svg viewBox="0 0 20 20" height="20" width="20" style="overflow: hidden;background:transparent;">
diff --git 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'"
         />
 
         <!-- DATA TABLE -->
diff --git 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'"
         />
 
         <!-- DATA TABLE -->
diff --git 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'"
         />
 
         <!-- DATA TABLE -->

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-data-ui",`
`3`	`3`	`"private": false,`
`4`		`- "version": "2.0.8",`
	`4`	`+ "version": "2.0.9",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"description": "A user-empowering data visualization Vue components library",`
`7`	`7`	`"keywords": [`
Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ const position = computed(() => {`
`50`	`50`	`data-cy="tooltip"`
`51`	`51`	`:class="{'vue-data-ui-custom-tooltip' : isCustom, 'vue-data-ui-tooltip': !isCustom}"`
`52`	`52`	`v-if="show"`
`53`		- :style="`top:${position.top}px;left:${position.left}px;${props.isCustom ? '' : `background:${props.backgroundColor};color:${props.color};max-width:${props.maxWidth}`}`"
	`53`	+ :style="`top:${position.top}px;left:${position.left}px;${isCustom ? '' : `background:${backgroundColor};color:${color};max-width:${maxWidth}`}`"
`54`	`54`	`>`
`55`	`55`	`<slot/>`
`56`	`56`	`<div v-html="content"/>`
Original file line number	Diff line number	Diff line change
`@@ -930,7 +930,7 @@ defineExpose({`
`930`	`930`	`:color="quadrantConfig.style.chart.tooltip.color"`
`931`	`931`	`:parent="quadrantChart"`
`932`	`932`	`:content="tooltipContent"`
`933`		`- :isCustom="!!quadrantConfig.style.chart.tooltip.customFormat"`
	`933`	`+ :isCustom="quadrantConfig.style.chart.tooltip.customFormat && typeof quadrantConfig.style.chart.tooltip.customFormat === 'function'"`
`934`	`934`	`>`
`935`	`935`	`<svg height="14" width="14" viewBox="0 0 20 20" v-if="quadrantConfig.style.chart.tooltip.showShape">`
`936`	`936`	`<Shape`