VueUiSparkHistogram add selector

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.18",
+  "version": "1.9.19",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { makeDonut, palette, convertColorToHex, createUid, opacity, makeXls } from '../lib';
+import { makeDonut, palette, convertColorToHex, opacity, makeXls } from '../lib';
 import pdf from "../pdf";
 import img from "../img";
 import mainConfig from "../default_configs.json";

src/components/vue-ui-donut.vue

@@ -69,6 +69,7 @@ const computedDataset = computed(() => {
         const width = unitWidth - gap;
         const y = drawingArea.value.centerY - height / 2;
         const x = drawingArea.value.left + (gap / 2  + (i * unitWidth));
+        const trapX = drawingArea.value.left + (i * unitWidth);
         const intensity = typeof dp.intensity === 'undefined' ? 100 : Math.round(dp.intensity * 100);
         const color = dp.value >= 0 ? `${histoConfig.value.style.bars.colors.positive}${opacity[intensity]}` : `${histoConfig.value.style.bars.colors.negative}${opacity[intensity]}`;
         const stroke = dp.value >= 0 ? histoConfig.value.style.bars.colors.positive : histoConfig.value.style.bars.colors.negative;
@@ -83,28 +84,32 @@ const computedDataset = computed(() => {
             proportion,
             stroke,
             textAnchor,
+            trapX,
+            unitWidth,
             width,
             x,
             y
         }
     });
 });
 
+const selectedIndex = ref(null);
+
 </script>
 
 <template>
-    <div :style="`width:100%;background:${histoConfig.style.backgroundColor};font-family:${histoConfig.style.fontFamily}`">
+    <div :style="`width:100%;background:${histoConfig.style.backgroundColor};font-family:${histoConfig.style.fontFamily}`" @mouseleave="selectedIndex = null">
         <!-- TITLE -->
         <div v-if="histoConfig.style.title.text" :style="`width:calc(100% - 12px);background:${histoConfig.style.backgroundColor};margin:0 auto;margin:${histoConfig.style.title.margin};padding: 0 6px;text-align:${histoConfig.style.title.textAlign}`">
             <div :style="`font-size:${histoConfig.style.title.fontSize}px;color:${histoConfig.style.title.color};font-weight:${histoConfig.style.title.bold ? 'bold' : 'normal'}`">
-                {{ histoConfig.style.title.text }}
+                {{ histoConfig.style.title.text }} <span v-if="selectedIndex !== null">- {{ computedDataset[selectedIndex].timeLabel || '' }} {{ histoConfig.style.labels.value.prefix }}{{ isNaN(computedDataset[selectedIndex].value) ? '' : ': ' + Number(computedDataset[selectedIndex].value.toFixed(histoConfig.style.labels.value.rounding)).toLocaleString() }}{{ histoConfig.style.labels.value.suffix }}</span> <span v-if="![undefined, null].includes(selectedIndex)">({{ computedDataset[selectedIndex].valueLabel || 0 }})</span>
             </div>
             <div v-if="histoConfig.style.title.subtitle.text" :style="`font-size:${histoConfig.style.title.subtitle.fontSize}px;color:${histoConfig.style.title.subtitle.color};font-weight:${histoConfig.style.title.subtitle.bold ? 'bold' : 'normal'}`">
                 {{ histoConfig.style.title.subtitle.text }}
             </div>    
         </div>
 
-        <svg data-cy="sparkhistogram-svg" :viewBox="`0 0 ${drawingArea.width} ${drawingArea.height}`">
+        <svg data-cy="sparkhistogram-svg" :viewBox="`0 0 ${drawingArea.width} ${drawingArea.height}`" style="overflow: visible">
             <defs>
                 <radialGradient v-for="(posGrad, i) in computedDataset" :id="`gradient_positive_${i}_${uid}`"  cy="50%" cx="50%" r="50%" fx="50%" fy="50%">
                     <stop offset="0%" :stop-color="`${shiftHue(histoConfig.style.bars.colors.positive, 0.05)}${opacity[posGrad.intensity]}`"/>
@@ -170,6 +175,22 @@ const computedDataset = computed(() => {
                 </text>
             </g>
 
+            <!-- TOOLTIP TRAPS -->
+            <g v-for="(rect, i) in computedDataset">
+                <rect 
+                    :height="drawingArea.height" 
+                    :width="rect.unitWidth" 
+                    fill="transparent" 
+                    :x="rect.trapX" 
+                    :y="0" @mouseover="selectedIndex = i" 
+                    @mouseleave="selectedIndex = null" 
+                    :stroke="selectedIndex !== null && selectedIndex === i ? histoConfig.style.selector.stroke : ''"
+                    :stroke-width="selectedIndex !== null && selectedIndex === i ? histoConfig.style.selector.strokeWidth : 0"
+                    :rx="histoConfig.style.selector.borderRadius"
+                    :stroke-dasharray="histoConfig.style.selector.strokeDasharray"
+                />
+            </g>
+
         </svg>
     </div>
 </template>

src/components/vue-ui-sparkhistogram.vue

@@ -2405,6 +2405,12 @@
                     "bold": false
                 }
             },
+            "selector": {
+                "stroke": "#3366cc",
+                "strokeWidth": 2,
+                "strokeDasharray": 0,
+                "borderRadius": 2
+            },
             "title": {
                 "textAlign": "left",
                 "text": "",

src/default_configs.json

@@ -52,6 +52,12 @@ declare module 'vue-data-ui' {
                     bold?: boolean;
                 };
             };
+            selector?: {
+                stroke?: string;
+                strokeDasharray?: number;
+                strokeWidth?: number;
+                borderRadius?: number;
+            };
             title?: {
                 textAlign?: "left" | "right" | "center";
                 text?: string;