From 347eb261158eebbe3134da58882af59ba25d0ceb Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Fri, 1 Mar 2024 17:22:22 +0100
Subject: [PATCH] VueUiHeatmap & VueUiQuadrant fixes

---
 package-lock.json                  |  4 ++--
 package.json                       |  2 +-
 src/App.vue                        | 13 +++++++++----
 src/components/vue-ui-heatmap.vue  | 16 ++++++++--------
 src/components/vue-ui-onion.vue    |  2 +-
 src/components/vue-ui-quadrant.vue | 18 ++++++++++++++----
 src/components/vue-ui-xy.vue       |  6 ++++--
 7 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 03dd2b34..6f34d29a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.98",
+  "version": "2.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.98",
+      "version": "2.0.0",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index bf7fd8a9..e929d47f 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.1",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/App.vue b/src/App.vue
index 45c80742..b8c4025e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -431,8 +431,8 @@ const quadrantDataset = ref([
     series: [
       {
         name: "cat2 item1",
-        x: -50,
-        y: -50,
+        x: -60,
+        y: -60,
       },
       {
         name: "cat2 item2",
@@ -925,10 +925,15 @@ const heatmapConfig = ref({
   style: {
     layout: {
       useDiv: true,
+      padding: {
+        bottom: 48,
+      },
       cells: {
         value: {
           show: true,
+          fontSize: 10
         },
+        spacing: 2
       },
       dataLabels: {
         prefix: "$",
@@ -3072,7 +3077,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_onion)">
         <template #title>
           <BaseIcon name="chartOnion" />
           VueUiOnion
@@ -3625,7 +3630,7 @@ const moodRadarConfig = ref({
         </template>
       </Box>
 
-      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_heatmap)">
         <template #title>
           <BaseIcon name="chartHeatmap"/>
           VueUiHeatmap
diff --git a/src/components/vue-ui-heatmap.vue b/src/components/vue-ui-heatmap.vue
index 471bba0d..ef892274 100644
--- a/src/components/vue-ui-heatmap.vue
+++ b/src/components/vue-ui-heatmap.vue
@@ -104,7 +104,7 @@ const drawingArea = computed(() => {
 });
 
 const sideLegendHeight = computed(() => {
-    return drawingArea.value.height - (heatmapConfig.value.style.layout.padding.top - heatmapConfig.value.style.layout.padding.bottom)
+    return cellSize.value.height * props.dataset.length
 })
 
 
@@ -351,8 +351,8 @@ defineExpose({
             <g v-for="(serie, i) in mutableDataset">
                 <g v-for="(cell, j) in serie.temperatures">
                     <rect
-                        :x="drawingArea.left + cellSize.width * j"
-                        :y="drawingArea.top + cellSize.height * i"
+                        :x="drawingArea.left + cellSize.width * j + (heatmapConfig.style.layout.cells.spacing / 2)"
+                        :y="drawingArea.top + cellSize.height * i + (heatmapConfig.style.layout.cells.spacing / 2)"
                         :width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
                         :height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
                         :fill="heatmapConfig.style.layout.cells.colors.underlayer"
@@ -360,8 +360,8 @@ defineExpose({
                         :stroke-width="heatmapConfig.style.layout.cells.spacing"
                     />
                     <rect
-                        :x="drawingArea.left + cellSize.width * j"
-                        :y="drawingArea.top + cellSize.height * i"
+                        :x="drawingArea.left + cellSize.width * j + (heatmapConfig.style.layout.cells.spacing / 2)"
+                        :y="drawingArea.top + cellSize.height * i + (heatmapConfig.style.layout.cells.spacing / 2)"
                         :width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
                         :height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
                         :fill="cell.color"
@@ -377,7 +377,7 @@ defineExpose({
                         :x="(drawingArea.left + cellSize.width * j) + (cellSize.width / 2)"
                         :y="(drawingArea.top + cellSize.height * i) + (cellSize.height / 2) + heatmapConfig.style.layout.cells.value.fontSize / 3"
                     >
-                        {{ Number(cell.value.toFixed(heatmapConfig.style.layout.cells.value.roundingValue)).toLocaleString() }}
+                        {{ heatmapConfig.style.layout.dataLabels.prefix }}{{ Number(cell.value.toFixed(heatmapConfig.style.layout.cells.value.roundingValue)).toLocaleString() }}{{ heatmapConfig.style.layout.dataLabels.suffix }}
                     </text>
                 </g>
                 <g v-for="(cell, j) in serie.temperatures">
@@ -429,7 +429,7 @@ defineExpose({
                 </defs>
                 <text
                     :x="drawingArea.right + 36 + 18"
-                    :y="drawingArea.top - heatmapConfig.style.legend.fontSize * 2"
+                    :y="drawingArea.top - heatmapConfig.style.legend.fontSize * 1.5"
                     text-anchor="middle"
                     :font-size="heatmapConfig.style.legend.fontSize * 2"
                     :fill="heatmapConfig.style.legend.color"
@@ -446,7 +446,7 @@ defineExpose({
                 />
                 <text
                     :x="drawingArea.right + 36 + 18"
-                    :y="drawingArea.bottom + heatmapConfig.style.legend.fontSize"
+                    :y="drawingArea.top + sideLegendHeight + heatmapConfig.style.legend.fontSize * 2.5"
                     text-anchor="middle"
                     :font-size="heatmapConfig.style.legend.fontSize * 2"
                     :fill="heatmapConfig.style.legend.color"
diff --git a/src/components/vue-ui-onion.vue b/src/components/vue-ui-onion.vue
index f8ab08c0..57b3a5b0 100644
--- a/src/components/vue-ui-onion.vue
+++ b/src/components/vue-ui-onion.vue
@@ -434,7 +434,7 @@ defineExpose({
                     <text
                         v-if="!segregated.includes(onion.id)"
                         :x="svg.width / 2 - onionSkin.gutter * 0.8 + onionConfig.style.chart.layout.labels.offsetX"
-                        :y="onion.labelY"
+                        :y="onion.labelY + onionConfig.style.chart.layout.labels.offsetX"
                         text-anchor="end"
                         :font-size="onionConfig.style.chart.layout.labels.fontSize"
                         :fill="onionConfig.useBlurOnHover && ![null, undefined].includes(selectedSerie) && selectedSerie === i ? onion.color:  onionConfig.style.chart.layout.labels.color"
diff --git a/src/components/vue-ui-quadrant.vue b/src/components/vue-ui-quadrant.vue
index a7a727b9..fbf2d89b 100644
--- a/src/components/vue-ui-quadrant.vue
+++ b/src/components/vue-ui-quadrant.vue
@@ -278,13 +278,23 @@ const drawableDataset = computed(() => {
 });
 
 function calcX(x) {
-    const ratio = x / axisValues.value.x.max;
-    return svg.value.centerX + ((svg.value.usableWidth / 2) * ratio);
+    if(x >= 0) {
+        const ratio = x / axisValues.value.x.max;
+        return svg.value.centerX + ((svg.value.usableWidth / 2) * ratio);
+    } else {
+        const ratio = Math.abs(x) / Math.abs(axisValues.value.x.min)
+        return svg.value.centerX - ((svg.value.usableWidth / 2) * ratio);
+    }
 }
 
 function calcY(y) {
-    const ratio = y / axisValues.value.y.max;
-    return svg.value.centerY + (1-(svg.value.usableHeight / 2) * ratio);
+    if(y >= 0) {
+        const ratio = y / axisValues.value.y.max;
+        return svg.value.centerY + (1-(svg.value.usableHeight / 2) * ratio);
+    } else {
+        const ratio = Math.abs(y) / Math.abs(axisValues.value.y.min);
+        return svg.value.centerY - (1 - (svg.value.usableHeight / 2) * ratio);
+    }
 }
 
 const table = computed(() => {
diff --git a/src/components/vue-ui-xy.vue b/src/components/vue-ui-xy.vue
index 5b9f02cb..e288bb84 100644
--- a/src/components/vue-ui-xy.vue
+++ b/src/components/vue-ui-xy.vue
@@ -657,7 +657,7 @@
                 <BaseIcon name="chartLine" :size="20" :stroke="chartConfig.chart.color"/>
             </div>
         </div>
-            <TableSparkline v-if="showSparklineTable" :dataset="tableSparklineDataset" :config="tableSparklineConfig"/>
+            <TableSparkline v-if="showSparklineTable" :key="`sparkline_${segregateStep}`" :dataset="tableSparklineDataset" :config="tableSparklineConfig"/>
             <DataTable 
                 v-else
                 :colNames="dataTable.colNames"
@@ -787,7 +787,8 @@ export default {
             slicer,
             __to__: null,
             maxX,
-            showSparklineTable: true
+            showSparklineTable: true,
+            segregateStep: 0
         }
     },
     computed: {
@@ -1935,6 +1936,7 @@ export default {
             if(this.chartConfig.useCanvas) {
                 this.drawCanvas();
             }
+            this.segregateStep += 1;
         },
         toggleTooltip(show, selectedIndex = null) {
             this.isTooltip = show;