VueUiTableSparkline improved interactivity

Author: graphieros

package-lock.json

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

package.json

@@ -24,7 +24,11 @@ const props = defineProps({
     },
     showInfo : {
         type: Boolean,
-        default: true
+        default: true,
+    },
+    selectedIndex: {
+        type: Number,
+        default: undefined
     }
 });
 
@@ -217,7 +221,7 @@ const isBar = computed(() => {
                 <!-- VERTICAL INDICATORS -->
                 <line
                     :data-cy="`sparkline-vertical-indicator-${i}`"
-                    v-if="sparklineConfig.style.verticalIndicator.show && selectedPlot && plot.id === selectedPlot.id"
+                    v-if="sparklineConfig.style.verticalIndicator.show && ((selectedPlot && plot.id === selectedPlot.id) || selectedIndex === i)"
                     :x1="plot.x"
                     :x2="plot.x"
                     :y1="drawingArea.top - 6"
@@ -247,7 +251,7 @@ const isBar = computed(() => {
             <g v-if="sparklineConfig.style.plot.show" v-for="(plot, i) in mutableDataset">
                 <circle
                     :data-cy="`sparkline-plot-${i}`"
-                    v-if="selectedPlot && plot.id === selectedPlot.id" 
+                    v-if="(selectedPlot && plot.id === selectedPlot.id) || selectedIndex === i" 
                     :cx="plot.x" 
                     :cy="plot.y" 
                     :r="sparklineConfig.style.plot.radius"

src/components/vue-ui-sparkline.vue

@@ -255,7 +255,7 @@ defineExpose({
 <template>
     <div ref="tableContainer" :class="{ 'vue-ui-responsive': isResponsive }" style="overflow: hidden" :id="`table_${uid}`">
 
-        <div style="overflow: auto">
+        <div style="overflow: auto" @pointerleave="selectedSerieIndex = undefined; selectedDataIndex = undefined">
 
             <table data-cy="vue-data-ui-table-sparkline" class="vue-ui-data-table"
                 :style="{ fontFamily: tableConfig.fontFamily, position: 'relative' }">
@@ -330,7 +330,7 @@ defineExpose({
                         color: tableConfig.tbody.color,
                     }" :class="{'vue-ui-data-table__tbody__row' : true, 'vue-ui-data-table__tbody__row-even': i % 2 === 0, 'vue-ui-data-table__tbody__row-odd': i % 2 !== 0}">
                         <td role="cell" :style="{
-                            backgroundColor: tableConfig.tbody.backgroundColor,
+                            backgroundColor: 'inherit',
                             outline: tableConfig.tbody.outline,
                             fontSize: `${tableConfig.tbody.fontSize}px`,
                             fontWeight: tableConfig.tbody.bold ? 'bold' : 'normal',
@@ -360,7 +360,7 @@ defineExpose({
                                     selectedSerieIndex === i
                                     ? '3px'
                                     : '',
-                        }" :data-cell="colNames[j]" class="vue-ui-data-table__tbody__td">
+                        }" :data-cell="colNames[j]" class="vue-ui-data-table__tbody__td" @pointerenter="selectedSerieIndex = i; selectedDataIndex = j">
                             {{ Number(td.toFixed(tableConfig.roundingValues)).toLocaleString() }}
                         </td>
                         <td role="cell" v-if="tableConfig.showTotal" :style="{
@@ -394,7 +394,7 @@ defineExpose({
                             textAlign: tableConfig.tbody.textAlign,
                         }" class="vue-ui-data-table__tbody__td sticky-col">
                             <SparkLine @hoverIndex="({ index }) => hoverSparkline({ dataIndex: index, serieIndex: i })
-                                " :dataset="tr.sparklineDataset" :showInfo="false" :config="{
+                                " :dataset="tr.sparklineDataset" :showInfo="false" :selectedIndex="selectedDataIndex" :config="{
                                 type: tableConfig.sparkline.type,
                                 style: {
                                     backgroundColor: tableConfig.tbody.backgroundColor,

src/components/vue-ui-table-sparkline.vue

@@ -3026,7 +3026,7 @@
             "fontSize":18,
             "color":"#2D353C",
             "bold":true,
-            "textAlign": "left",
+            "textAlign": "center",
             "subtitle": {
                 "text": "",
                 "color":"#2D353C",