VueUiOnion added tooltip

graphieros · Mar 13, 2024 · 041f6bd · 041f6bd
1 parent 41e2a57
commit 041f6bd
Show file tree

Hide file tree

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

diff --git a/src/App.vue b/src/App.vue
@@ -2583,6 +2583,19 @@ const moleculeConfig = ref({
   }
 })
 
+const onionConfig = ref({
+  style: {
+    chart: {
+      tooltip: {
+        customFormat: ({ seriesIndex, datapoint, series, config }) => {
+          console.log({ seriesIndex, datapoint, series, config })
+          return 'TEST'
+        }
+      }
+    }
+  }
+})
+
 function selectSparklineDatapoint({ datapoint, index }) {
   console.log({datapoint, index })
 }
@@ -3320,7 +3333,7 @@ function selectHistoDatapoint({ datapoint, index }) {
         </template>
         <template #dev>
           <OnionTest
-            :config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
+            :config="onionConfig"
             :dataset="onionDataset"
             @selectLegend="selectOnionLegend"
           >
@@ -3332,7 +3345,7 @@ function selectHistoDatapoint({ datapoint, index }) {
         <template #prod>
           <VueUiOnion
             ref="oniontest"
-            :config="{ useCssAnimation: false, style: { chart: { title: { text: 'Title', subtitle: { text: 'Subtitle'}}}} }"
+            :config="onionConfig"
             :dataset="onionDataset"
             @selectLegend="selectOnionLegend"
           >

diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
@@ -199,7 +199,7 @@ function useTooltip({datapoint, relativeIndex, seriesIndex, show = false}) {
         datapoint,
         series: immutableSet.value,
         config: donutConfig.value
-    }, () => tooltipContent))) {
+    }))) {
         tooltipContent.value = customFormat({
             seriesIndex,
             datapoint,
@@ -650,7 +650,7 @@ defineExpose({
             :color="donutConfig.style.chart.tooltip.color"
             :parent="donutChart"
             :content="tooltipContent"
-            :isCustom="donutConfig.style.chart.tooltip.customFormat && typeof donutConfig.style.chart.tooltip.customFormat === 'function'"
+            :isCustom="isFunction(donutConfig.style.chart.tooltip.customFormat)"
         />
 
         <!-- DATA TABLE -->

diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
@@ -2,11 +2,14 @@
 import { ref, computed, nextTick } from "vue";
 import { 
     convertColorToHex, 
-    palette, 
-    opacity, 
-    createUid, 
     createCsvContent, 
-    downloadCsv 
+    createUid,
+    dataLabel,
+    downloadCsv,
+    functionReturnsString,
+    isFunction,
+    opacity, 
+    palette, 
 } from "../lib.js";
 import pdf from "../pdf";
 import img from "../img";
@@ -16,6 +19,7 @@ import Title from "../atoms/Title.vue";
 import UserOptions from "../atoms/UserOptions.vue";
 import Legend from "../atoms/Legend.vue";
 import DataTable from "../atoms/DataTable.vue";
+import Tooltip from "../atoms/Tooltip.vue";
 
 const props = defineProps({
     config: {
@@ -41,6 +45,8 @@ const isPrinting = ref(false);
 const onionChart = ref(null);
 const details = ref(null);
 const step = ref(0);
+const isTooltip = ref(false);
+const tooltipContent = ref("");
 
 const onionConfig = computed(() => {
     return useNestedProp({
@@ -93,7 +99,8 @@ const immutableDataset = computed(() => {
             color: convertColorToHex(onion.color) || palette[i],
             id,
             shape: 'circle',
-            opacity: segregated.value.includes(id) ? 0.5 : 1
+            opacity: segregated.value.includes(id) ? 0.5 : 1,
+            absoluteIndex: i
         }
     })
 });
@@ -262,6 +269,35 @@ function toggleFullscreen(state) {
     step.value += 1;
 }
 
+function useTooltip({ datapoint, seriesIndex, show = true }) {
+    const absoluteIndex = datapoint.absoluteIndex;
+    selectedSerie.value = seriesIndex;
+    isTooltip.value = show;
+
+    let html = "";
+
+    const customFormat = onionConfig.value.style.chart.tooltip.customFormat;
+
+    if (isFunction(customFormat) && functionReturnsString(() => customFormat({
+        seriesIndex: absoluteIndex,
+        datapoint,
+        series: immutableDataset.value,
+        config: onionConfig.value
+    }))) {
+        tooltipContent.value = customFormat({
+            seriesIndex: absoluteIndex,
+            datapoint,
+            series: immutableDataset.value,
+            config: onionConfig.value
+        })
+    } else {
+        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>`;
+        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>`
+
+        tooltipContent.value = `<div>${html}</div>`
+    }
+}
+
 defineExpose({
     getData,
     generatePdf,
@@ -410,8 +446,12 @@ defineExpose({
                 stroke-linecap="round"
                 class="vue-ui-onion-path"
                 style="transform:rotate(-90deg);transform-origin: 50% 50%"
-                @mouseenter="selectedSerie = i"
-                @mouseleave="selectedSerie = undefined"
+                @mouseenter="useTooltip({
+                    datapoint: onion,
+                    show: true,
+                    seriesIndex: i,
+                })"
+                @mouseleave="selectedSerie = undefined; isTooltip = false"
             />
 
 
@@ -487,6 +527,16 @@ defineExpose({
             </template>
         </Legend>
 
+        <!-- TOOLTIP -->
+        <Tooltip
+            :show="onionConfig.style.chart.tooltip.show && isTooltip"
+            :backgroundColor="onionConfig.style.chart.tooltip.backgroundColor"
+            :color="onionConfig.style.chart.tooltip.color"
+            :parent="onionChart"
+            :content="tooltipContent"
+            :isCustom="isFunction(onionConfig.style.chart.tooltip.customFormat)"
+        />
+
         <!-- DATA TABLE -->
         <div class="vue-ui-onion-table" :style="`width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable">
             <DataTable

diff --git a/src/components/vue-ui-scatter.vue b/src/components/vue-ui-scatter.vue
@@ -338,7 +338,11 @@ const dataTable = computed(() => {
 
     const body = drawableDataset.value.map(ds => {
         return [
-            `<span style="color:${ds.color}">⬤</span> ${ds.name}`,
+            {
+                shape: ds.shape,
+                content: ds.name,
+                color: ds.color
+            },
             Number((ds.correlation.coefficient ?? 0).toFixed(scatterConfig.value.table.td.roundingValue)).toLocaleString(),
             ds.plots.length.toLocaleString(),
             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({
                     {{ th }}
                 </template>
                 <template #td="{ td }">
-                    <div v-html="td"/>
+                    <div v-if="td.shape">
+                        <span>{{ td.content }}</span>
+                    </div>
+                    <div v-else v-html="td"/>
                 </template>
             </DataTable>
         </div>

diff --git a/src/default_configs.json b/src/default_configs.json
@@ -1136,6 +1136,17 @@
                     "roundingValue": 0,
                     "roundingPercentage": 0,
                     "offsetY": 6
+                },
+                "tooltip": {
+                    "show": true,
+                    "color": "#2D353C",
+                    "backgroundColor": "#FFFFFF",
+                    "fontSize": 14,
+                    "showValue": true,
+                    "showPercentage": true,
+                    "roundingValue": 0,
+                    "roundingPercentage": 0,
+                    "customFormat": null
                 }
             }
         },

diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
@@ -1278,6 +1278,7 @@ declare module 'vue-data-ui' {
                         color?: string;
                         useSideColor?: boolean;
                         bold?: boolean;
+                        offsetY?: number;
                     };
                     xAxis?: {
                         show?: boolean;
@@ -3137,6 +3138,17 @@ declare module 'vue-data-ui' {
                     roundingValue?: number;
                     roundingPercentage?: number;
                 };
+                tooltip?: {
+                    show?: boolean;
+                    color?: string;
+                    backgroundColor?: string;
+                    fontSize?: number;
+                    showValue?: boolean;
+                    showPercentage?: boolean;
+                    roundingValue?: number;
+                    roundingPercentage?: number;
+                    customFormat?: (params: VueUiTooltipParams<VueUiOnionDatapoint, VueUiOnionSeriesItem[], VueUiOnionConfig>) => string;
+                };
             };
         };
         userOptions?: {
@@ -3169,6 +3181,43 @@ declare module 'vue-data-ui' {
         };
     };
 
+    export type VueUiOnionDatapoint = {
+        absoluteIndex: number;
+        color: string;
+        id: string;
+        labelY: number;
+        name: string;
+        opacity: number;
+        path: {
+            active: string;
+            bgDashArray: string;
+            bgDashOffset: number;
+            dashArray: string;
+            dashOffset: number;
+            fullOffset: number;
+        };
+        percentage: number;
+        prefix: string;
+        radius: number;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        suffix: string;
+        value: number;
+    }
+
+    export type VueUiOnionSeriesItem = {
+        absoluteIndex: number;
+        color: string;
+        id: string;
+        name: string;
+        opacity: number;
+        percentage: number;
+        prefix: string;
+        shape: "circle" | "triangle" | "square" | "diamond" | "pentagon" | "hexagon" | "star" | null;
+        suffix: string;
+        value: number;
+    }
+
+
     export const VueUiOnion: DefineComponent<{
         config?: VueUiOnionConfig,
         dataset: VueUiOnionDatasetItem[]