Fix - VueUiWaffle - Keep cells centered when applying spaceBetween

Author: graphieros

src/components/vue-ui-waffle.vue

@@ -716,8 +716,8 @@ defineExpose({
                     v-for="(position, i) in positions"
                     :data-cy="`waffle-rect-underlayer-${i}`"
                     :rx="FINAL_CONFIG.style.chart.layout.rect.rounded ? FINAL_CONFIG.style.chart.layout.rect.rounding : 0"
-                    :x="position.x"
-                    :y="position.y"
+                    :x="position.x + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
+                    :y="position.y + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
                     :height="rectDimensionY <= 0 ? 0.0001 : rectDimensionY"
                     :width="rectDimension <= 0 ? 0.0001 : rectDimension"
                     fill="white"
@@ -728,8 +728,8 @@ defineExpose({
                 <rect
                     v-for="(position, i) in positions"
                     :rx="FINAL_CONFIG.style.chart.layout.rect.rounded ? FINAL_CONFIG.style.chart.layout.rect.rounding : 0"
-                    :x="position.x"
-                    :y="position.y"
+                    :x="position.x + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
+                    :y="position.y + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
                     :height="rectDimensionY <= 0 ? 0.0001 : rectDimensionY"
                     :width="rectDimension <= 0 ? 0.0001 : rectDimension"
                     :fill="FINAL_CONFIG.style.chart.layout.rect.useGradient && FINAL_CONFIG.style.chart.layout.rect.gradientIntensity > 0 ? `url(#gradient_${uid}_${i})` : rects[i].color"
@@ -743,8 +743,8 @@ defineExpose({
             <template v-for="(position, i) in positions">
                 <foreignObject
                     v-if="!isAnimating && !FINAL_CONFIG.style.chart.layout.grid.vertical && FINAL_CONFIG.style.chart.layout.labels.captions.show && ((rects[i].isFirst && position.position < FINAL_CONFIG.style.chart.layout.grid.size - 2) || (rects[i].isAbsoluteFirst && i % FINAL_CONFIG.style.chart.layout.grid.size === 0 && rects[i].absoluteStartIndex))"
-                    :x="position.x + FINAL_CONFIG.style.chart.layout.labels.captions.offsetX"
-                    :y="position.y + FINAL_CONFIG.style.chart.layout.labels.captions.offsetY"
+                    :x="position.x + FINAL_CONFIG.style.chart.layout.labels.captions.offsetX + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
+                    :y="position.y + FINAL_CONFIG.style.chart.layout.labels.captions.offsetY + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
                     :height="absoluteRectDimensionY <= 0 ? 0.0001 : absoluteRectDimensionY"
                     :width="absoluteRectDimension * FINAL_CONFIG.style.chart.layout.grid.size <= 0 ? 0.0001 : absoluteRectDimension * FINAL_CONFIG.style.chart.layout.grid.size"
                     :filter="getBlurFilter(rects[i].serieIndex)"
@@ -771,8 +771,8 @@ defineExpose({
                 :data-cy="`waffle-rect-${i}`"
                 @mouseover="useTooltip(i)"
                 @mouseleave="isTooltip = false; selectedSerie = null"
-                :x="position.x"
-                :y="position.y"
+                :x="position.x + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
+                :y="position.y + FINAL_CONFIG.style.chart.layout.grid.spaceBetween / 2"
                 :height="absoluteRectDimensionY <= 0 ? 0.0001 : absoluteRectDimensionY"
                 :width="absoluteRectDimension <= 0 ? 0.0001 : absoluteRectDimension"
                 fill="transparent"