Make tooltips headless in customFormat mode

graphieros · Mar 7, 2024 · 9c91756 · 9c91756
1 parent b940cac
commit 9c91756
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 22 deletions.
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 -->