VueUiVerticalBar & VueUiHeatmap improvements

Author: graphieros

package.json

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

src/App.vue

@@ -2496,7 +2496,7 @@ const moodRadarConfig = ref({
       </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_mini_loader)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_mini_loader)">
         <template #title>
           <!-- <BaseIcon name="chartTable"/> -->
           VueUiMiniLoader
@@ -2887,7 +2887,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_xy)">
         <template #title>
           <BaseIcon name="chartLine" />
           VueUiXy
@@ -3625,7 +3625,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
         <template #title>
           <BaseIcon name="chartHeatmap"/>
           VueUiHeatmap

src/components/vue-ui-heatmap.vue

@@ -103,6 +103,9 @@ const drawingArea = computed(() => {
     }
 });
 
+const sideLegendHeight = computed(() => {
+    return drawingArea.value.height - (heatmapConfig.value.style.layout.padding.top - heatmapConfig.value.style.layout.padding.bottom)
+})
 
 
 const maxValue = computed(() => {
@@ -167,9 +170,12 @@ const mutableDataset = computed(() => {
     })
 });
 
+const hoveredValue = ref(null);
+
 function useTooltip(datapoint) {
     const { value, yAxisName, xAxisName,id } = datapoint;
     hoveredCell.value = id;
+    hoveredValue.value = value;
     isTooltip.value = true;
     let html = "";
 
@@ -178,6 +184,10 @@ function useTooltip(datapoint) {
     tooltipContent.value = `<div style="font-size:${heatmapConfig.value.style.tooltip.fontSize}px">${html}</div>`;
 }
 
+const sideLegendIndicatorY = computed(() => {
+    return drawingArea.value.top + (sideLegendHeight.value * (1 - hoveredValue.value / maxValue.value))
+})
+
 const __to__ = ref(null);
 
 function showSpinnerPdf() {
@@ -381,7 +391,7 @@ defineExpose({
                         fill="transparent"
                         stroke="none"
                         @mouseover="useTooltip(cell)"
-                        @mouseout="isTooltip = false; hoveredCell = undefined"
+                        @mouseout="isTooltip = false; hoveredCell = undefined; hoveredValue = null"
                     />
                 </g>
                 <g v-if="heatmapConfig.style.layout.dataLabels.yAxis.show">
@@ -430,19 +440,21 @@ defineExpose({
                     :x="drawingArea.right + 36"
                     :y="drawingArea.top"
                     :width="36"
-                    :height="drawingArea.height - 12"
+                    :height="sideLegendHeight"
                     :rx="heatmapConfig.style.legend.scaleBorderRadius"
                     fill="url(#colorScaleVertical)"
                 />
                 <text
                     :x="drawingArea.right + 36 + 18"
-                    :y="drawingArea.bottom + heatmapConfig.style.legend.fontSize * 2"
+                    :y="drawingArea.bottom + heatmapConfig.style.legend.fontSize"
                     text-anchor="middle"
                     :font-size="heatmapConfig.style.legend.fontSize * 2"
                     :fill="heatmapConfig.style.legend.color"
                 >
                     {{ Number(minValue.toFixed(heatmapConfig.style.legend.roundingValue)).toLocaleString() }}
                 </text>
+                <line v-if="hoveredValue !== null" :stroke="heatmapConfig.style.backgroundColor" stroke-width="2" :x1="drawingArea.right + 36" :x2="drawingArea.right + 72" :y1="sideLegendIndicatorY" :y2="sideLegendIndicatorY" />
+                <path v-if="hoveredValue !== null" :fill="heatmapConfig.style.color" stroke="none" :d="`M ${drawingArea.right + 36},${sideLegendIndicatorY} ${drawingArea.right + 26},${sideLegendIndicatorY - 8} ${drawingArea.right + 26},${sideLegendIndicatorY + 8}z`" />
             </g>
 
             <!-- LEGEND AS G -->

src/components/vue-ui-vertical-bar.vue

@@ -238,7 +238,7 @@ function getParentData(serie, index) {
     const start = drawableArea.value.top + ((verticalBarConfig.value.style.chart.layout.bars.gap + verticalBarConfig.value.style.chart.layout.bars.height) * (index));
     const height = parent.children.length * (verticalBarConfig.value.style.chart.layout.bars.gap + verticalBarConfig.value.style.chart.layout.bars.height);
     return {
-        y: start + (height / 2),
+        y: start + (height / 2) - (verticalBarConfig.value.style.chart.layout.bars.parentLabels.fontSize),
         name: parent.name,
         value: [undefined, NaN, null].includes(parent.value) ? '' : parent.value.toFixed(verticalBarConfig.value.style.chart.layout.bars.dataLabels.value.roundingValue),
         percentageToTotal: isNaN(parent.value / total.value) ? '' : calcProportionToTotal(parent.value, true, verticalBarConfig.value.style.chart.layout.bars.dataLabels.percentage.roundingPercentage)