VueUiAgePyramid added OffsetY to serie titles; refactored tooltip cus…

…tomFormat handling
graphieros · Mar 11, 2024 · 41e2a57 · 41e2a57
1 parent f7c8dff
commit 41e2a57
Show file tree

Hide file tree

Showing 18 changed files with 201 additions and 58 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.17",
+  "version": "2.0.18",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

diff --git a/src/App.vue b/src/App.vue
@@ -2410,8 +2410,8 @@ const donutConfig = ref({
       tooltip: {
         customFormat: ({ datapoint, seriesIndex, series , config}) => {
           console.log({datapoint, seriesIndex, series, config});
-          return `<div style="color:${datapoint.color}">
-              ${datapoint.name}
+          return `<div style="background:${datapoint.color}33;color:${datapoint.color};padding:12px">
+              ${datapoint.name} : ${datapoint.value}
             </div>`
         }
       }
@@ -2424,12 +2424,12 @@ const xyConfig = ref({
     labels: {
       fontSize: 30
     },
-    // 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'
+      }
+    }
   },
   bar: {
       labels: {
@@ -2545,6 +2545,13 @@ const pyramidConfig = ref({
         console.log({ seriesIndex, datapoint, series, config });
         return "TEST"
       }
+    },
+    layout: {
+      dataLabels: {
+        sideTitles: {
+          offsetY: -20
+        }
+      }
     }
   }
 })
@@ -3948,8 +3955,5 @@ function selectHistoDatapoint({ datapoint, index }) {
 </style>
 
 <style>
-.vue-data-ui-custom-tooltip {
-  background: red;
-}
 
 </style>
diff --git a/src/components/vue-ui-age-pyramid.vue b/src/components/vue-ui-age-pyramid.vue
@@ -1,6 +1,14 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { opacity, shiftHue, createUid, createCsvContent, downloadCsv } from '../lib';
+import { 
+    createCsvContent, 
+    createUid, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction, 
+    opacity, 
+    shiftHue, 
+} from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -184,7 +192,7 @@ function useTooltip(index, datapoint) {
 
     const customFormat = agePyramidConfig.value.style.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             seriesIndex: index,
             datapoint: {
                 segment: datapoint[0],
@@ -194,7 +202,7 @@ function useTooltip(index, datapoint) {
             },
             series: drawableDataset.value,
             config: agePyramidConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             seriesIndex: index,
             datapoint: {
@@ -475,7 +483,7 @@ defineExpose({
                 <g v-if="agePyramidConfig.style.layout.dataLabels.sideTitles.show">
                     <text
                         :x="drawingArea.left"
-                        :y="drawingArea.top"
+                        :y="drawingArea.top + agePyramidConfig.style.layout.dataLabels.sideTitles.offsetY"
                         :fill="agePyramidConfig.style.layout.dataLabels.sideTitles.useSideColor ? agePyramidConfig.style.layout.bars.left.color : agePyramidConfig.style.layout.dataLabels.sideTitles.color"
                         :font-size="agePyramidConfig.style.layout.dataLabels.sideTitles.fontSize"
                         text-anchor="start"
@@ -485,7 +493,7 @@ defineExpose({
                     </text>
                     <text
                         :x="drawingArea.right"
-                        :y="drawingArea.top"
+                        :y="drawingArea.top + agePyramidConfig.style.layout.dataLabels.sideTitles.offsetY"
                         :fill="agePyramidConfig.style.layout.dataLabels.sideTitles.useSideColor ? agePyramidConfig.style.layout.bars.right.color : agePyramidConfig.style.layout.dataLabels.sideTitles.color"
                         :font-size="agePyramidConfig.style.layout.dataLabels.sideTitles.fontSize"
                         text-anchor="end"

diff --git a/src/components/vue-ui-candlestick.vue b/src/components/vue-ui-candlestick.vue
@@ -1,6 +1,17 @@
 <script setup>
 import { ref, computed, onMounted, nextTick } from "vue";
-import { canShowValue, closestDecimal, shiftHue, opacity, createUid, createCsvContent, downloadCsv, calculateNiceScale } from "../lib";
+import { 
+    calculateNiceScale, 
+    canShowValue, 
+    closestDecimal, 
+    createCsvContent, 
+    createUid, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction, 
+    opacity, 
+    shiftHue, 
+} from "../lib";
 import mainConfig from "../default_configs.json";
 import pdf from "../pdf";
 import img from "../img";
@@ -188,12 +199,12 @@ function useTooltip(index, datapoint) {
 
     const customFormat = candlestickConfig.value.style.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             seriesIndex: index,
             datapoint,
             series: drawableDataset.value,
             config: candlestickConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             seriesIndex: index,
             datapoint,

diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -8,7 +8,9 @@ import {
     createCsvContent, 
     createUid, 
     dataLabel,
-    downloadCsv, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction, 
     makeDonut, 
     opacity, 
     palette, 
@@ -192,8 +194,18 @@ function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
 
     const customFormat = donutConfig.value.style.chart.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value }) === 'string') {
-        tooltipContent.value = customFormat({ seriesIndex, datapoint, series: immutableSet.value, config: donutConfig.value })
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
+        seriesIndex,
+        datapoint,
+        series: immutableSet.value,
+        config: donutConfig.value
+    }, () => tooltipContent))) {
+        tooltipContent.value = customFormat({
+            seriesIndex,
+            datapoint,
+            series: immutableSet.value,
+            config: donutConfig.value
+        })
     } else {
         html += `<div data-cy="donut-tooltip-name" style="width:100%;text-align:center;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:3px;">${datapoint.name}</div>`;
         html += `<div style="display:flex;flex-direction:row;gap:6px;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>`;

diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
@@ -5,7 +5,9 @@ import {
     createCsvContent, 
     createUid, 
     dataLabel,
-    downloadCsv, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction,
     interpolateColorHex, 
     opacity, 
 } from "../lib";
@@ -183,12 +185,12 @@ function useTooltip(datapoint, seriesIndex) {
 
     const customFormat = heatmapConfig.value.style.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             datapoint,
             seriesIndex,
             series: mutableDataset.value,
             config: heatmapConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             datapoint,
             seriesIndex,
@@ -200,7 +202,6 @@ function useTooltip(datapoint, seriesIndex) {
         html += `<div data-cy="heatmap-tooltip-value" style="margin-top:6px;padding-top:6px;border-top:1px solid #e1e5e8;font-weight:bold;display:flex;flex-direction:row;gap:12px;align-items:center;justify-content:center"><span style="color:${interpolateColorHex(heatmapConfig.value.style.layout.cells.colors.cold, heatmapConfig.value.style.layout.cells.colors.hot, minValue.value, maxValue.value, value)}">⬤</span><span>${isNaN(value) ? "-" : dataLabel({p:heatmapConfig.value.style.layout.dataLabels.prefix, v: value, s: heatmapConfig.value.style.layout.dataLabels.suffix, r:heatmapConfig.value.style.tooltip.roundingValue })}</span></div>`
         tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
     }
-
 }
 
 const sideLegendIndicatorY = computed(() => {

diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -1,6 +1,15 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { lightenHexColor, palette, createUid, createCsvContent, downloadCsv, createPolygonPath } from '../lib';
+import { 
+    createCsvContent, 
+    createPolygonPath, 
+    createUid, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction, 
+    lightenHexColor, 
+    palette, 
+} from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -250,12 +259,12 @@ function createTooltipContent(node) {
 
     const customFormat = moleculeConfig.value.style.chart.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             seriesIndex: -1,
             datapoint: node,
             series: convertedDataset.value,
             config: moleculeConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             seriesIndex: -1, // well, ok
             datapoint: node,

diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
@@ -1,6 +1,18 @@
 <script setup>
 import { ref, computed, onMounted, nextTick, watch } from "vue";
-import { palette, createUid, giftWrap, shiftHue, opacity, convertColorToHex, createCsvContent, downloadCsv, adaptColorToBackground } from "../lib";
+import { 
+    adaptColorToBackground,
+    convertColorToHex, 
+    createCsvContent, 
+    createUid, 
+    downloadCsv, 
+    functionReturnsString,
+    isFunction,
+    giftWrap, 
+    opacity, 
+    palette, 
+    shiftHue, 
+} from "../lib";
 import pdf from "../pdf.js";
 import img from "../img.js";
 import mainConfig from "../default_configs.json";
@@ -426,20 +438,18 @@ function useTooltip(category, plot, categoryIndex) {
 
     const customFormat = quadrantConfig.value.style.chart.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             seriesIndex: categoryIndex,
             datapoint: plot,
             series: drawableDataset.value,
             config: quadrantConfig.value
-        }) === 'string') {
-
+        }))) {
         tooltipContent.value = customFormat({
             seriesIndex: categoryIndex,
             datapoint: plot,
             series: drawableDataset.value,
             config: quadrantConfig.value
         })
-
     } else {
         let html = "";
     

diff --git a/src/components/vue-ui-radar.vue b/src/components/vue-ui-radar.vue
@@ -7,6 +7,8 @@ import {
     createUid, 
     dataLabel,
     downloadCsv,
+    functionReturnsString,
+    isFunction,
     makePath, 
     opacity, 
     palette, 
@@ -298,12 +300,12 @@ function useTooltip(apex, i) {
 
     const customFormat = radarConfig.value.style.chart.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             seriesIndex: i,
             datapoint: apex,
             series: { categories: datasetCopy.value, datapoints: seriesCopy.value, radar: radar.value  },
             config: radarConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             seriesIndex: i,
             datapoint: apex,

diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
@@ -6,6 +6,8 @@ import {
   createUid,
   dataLabel,
   downloadCsv,
+  functionReturnsString,
+  isFunction,
   opacity,
   palette,
   shiftHue,
@@ -191,12 +193,12 @@ function useTooltip(index, datapoint) {
   const selected = convertedDataset.value[index];
   const customFormat = ringsConfig.value.style.chart.tooltip.customFormat;
 
-  if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+  if (isFunction(customFormat) && functionReturnsString(() => customFormat({
       seriesIndex: index,
       datapoint,
       series: convertedDataset.value,
       config: ringsConfig.value
-    }) === 'string') {
+    }))) {
     tooltipContent.value = customFormat({
       seriesIndex: index,
       datapoint,

diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -1,6 +1,14 @@
 <script setup>
 import { ref, computed, nextTick, onMounted } from "vue";
-import { palette, opacity, createUid, createCsvContent, downloadCsv } from '../lib';
+import { 
+    createCsvContent, 
+    createUid, 
+    downloadCsv,
+    functionReturnsString,
+    isFunction, 
+    opacity, 
+    palette, 
+} from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";
@@ -210,12 +218,12 @@ function useTooltip(plot, seriesIndex) {
 
     const customFormat = scatterConfig.value.style.tooltip.customFormat;
 
-    if (customFormat && typeof customFormat === 'function' && typeof customFormat({
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
             datapoint: plot,
             seriesIndex,
             series: drawableDataset.value,
             config: scatterConfig.value
-        }) === 'string') {
+        }))) {
         tooltipContent.value = customFormat({
             datapoint: plot,
             seriesIndex,