VueUiHeatmap fixed viewBox size issues on small datasets; added tests

Author: graphieros

README.md

@@ -109,4 +109,14 @@ Types are available in the 'vue-data-ui.d.ts' file under the types directory of
 [This repo contains a boilerplate implementation of the vue-data-ui package in Nuxt](https://github.com/graphieros/vue-data-ui-nuxt)
 
 # Slots
-Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
+Most Vue Data UI chart components include a #svg slot you can use to introduce customized svg elements (shapes, text, etc).
+
+# Config
+If for some reason you can't access the documentation website and need to get the default config object for a component:
+
+```
+import { getVueDataUiConfig } from "vue-data-ui";
+
+const defaultConfigXy = getVueDataUiConfig("vue_ui_xy");
+
+```

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.94",
+  "version": "1.9.95",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -60,7 +60,7 @@
     "./style.css": "./dist/style.css"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "npm i && vite",
     "clean": "node cleanup.cjs",
     "build": "npm run clean && vite build --mode production && node copy-types.cjs && npm i",
     "prod": "npm run test && npx cypress run --component && npm run clean && vite build --mode production && node copy-types.cjs",

package.json

@@ -23,34 +23,26 @@ describe('<VueUiDonutEvolution />', () => {
     })
   });
 
-  function updateConfig(modifiedConfig) {
-    cy.get('@fixture').then((fixture) => {
-      const updatedFixture = { ...fixture, config: modifiedConfig };
-      cy.wrap(updatedFixture).as('fixture');
-      cy.mount(VueUiDonutEvolution, {
-        props: {
-          dataset: fixture.dataset,
-          config: modifiedConfig
-        }
-      });
-    });
-  }
+  it('shows zoomed donut on trap click', () => {
+    cy.get('[data-cy-trap]').eq(0).click()
+    cy.get('[data-cy-zoom]').should('be.visible')
+    cy.get('[data-cy-zoom-donut]').should('be.visible')
+    cy.get('[data-cy-close]').should('be.visible').click({ force: true})
+    cy.get('[data-cy-zoom]').should('not.exist')
+  })
 
-  it('renders donuts', () => {
-    for(let i = 0; i < 12; i += 1) {
-      cy.get(`[data-cy="donut-wrapper-${i}"]`).then(($wrapper) => {
-        cy.wrap($wrapper).should('exist')
-      })
-      
-      cy.get(`[data-cy="trap-${i}"]`).then(($trap) => {
-        cy.wrap($trap).trigger('mouseenter', { force: true })
-        cy.wait(150)
-        cy.wrap($trap).trigger('mouseleave')
-        cy.wrap($trap).click();
-        cy.wait(150)
-        cy.get(`[data-cy="quit-dialog"]`).click()
-      })
-    }
+  it('segregates series when selecting legend items', () => {
+    cy.get('[data-cy-legend-item]').eq(0).click()
+    cy.get(`[data-cy="arc_0"]`).should('have.length', 3)
+    cy.get('[data-cy-legend-item]').eq(0).click()
+    cy.get(`[data-cy="arc_0"]`).should('have.length', 4)
+  })
+
+  it('shows donut hovered state', () => {
+    cy.get('[data-cy-trap]').eq(0).trigger('mouseenter')
+    cy.get('[data-cy="donut_hover_0"]').should('have.length', 4)
+    cy.get('[data-cy-trap]').eq(0).trigger('mouseleave')
+    cy.get('[data-cy="donut_hover_0"]').should('not.exist')
   })
 
   it('opens user options and shows table', () => {

src/components/vue-ui-donut-evolution.cy.js

@@ -536,6 +536,7 @@ defineExpose({
                     <g v-if="hoveredIndex !== null && hoveredIndex === i">
                         <g v-for="arc in datapoint.donut">
                             <path
+                                :data-cy="`donut_hover_${i}`"
                                 :d="calcNutArrowPath(arc, {x: arc.center.endX, y: arc.center.endY}, 12, 12, { x: datapoint.x, y: datapoint.y}, true)"
                                 :stroke="arc.color"
                                 stroke-width="1"
@@ -548,6 +549,7 @@ defineExpose({
                         <g v-for="(arc, i) in datapoint.donut">
                             <text
                                 :data-cy="`donut-datalabel-value-${i}`"
+                                data-cy-hover-label
                                 :text-anchor="calcMarkerOffsetX(arc, true, 0).anchor"
                                 :x="calcMarkerOffsetX(arc, true, 3).x"
                                 :y="calcMarkerOffsetY(arc)"
@@ -580,7 +582,8 @@ defineExpose({
                         />
                     </g>
                     <g v-else>
-                        <path 
+                        <path
+                        :data-cy="`arc_${i}`"
                             v-for="(arc, k) in datapoint.donut"
                             :d="arc.arcSlice"
                             :fill="`${arc.color}`"
@@ -629,6 +632,7 @@ defineExpose({
             <rect 
                 v-for="(datapoint, i) in drawableDataset"
                 :data-cy="`trap-${i}`"
+                data-cy-trap
                 :x="padding.left + (i * slit)"
                 :y="padding.top"
                 :width="slit"
@@ -641,7 +645,7 @@ defineExpose({
             />
 
             <!-- DIALOG -->
-            <g v-if="isFixed">
+            <g v-if="isFixed" data-cy-zoom>
                 <rect 
                     :rx="4"
                     :x="padding.left"
@@ -672,7 +676,7 @@ defineExpose({
                     stroke-width="1.5"
                 />
                 <circle
-                    data-cy="quit-dialog"
+                    data-cy-close
                     @click="unfixDatapoint"
                     @keypress.enter="unfixDatapoint"
                     :cx="svg.absoluteWidth - padding.right - svg.width / 40"
@@ -685,6 +689,7 @@ defineExpose({
 
                 <g v-for="arc in fixedDatapoint.donutFocus">
                     <path
+                        data-cy-zoom-donut
                         :d="calcNutArrowPath(arc, {x: svg.centerX, y: svg.centerY}, 12, 12, false, false, 1)"
                         :stroke="arc.color"
                         stroke-width="1"
@@ -764,7 +769,7 @@ defineExpose({
             @clickMarker="({legend}) => segregate(legend.uid)"
         >
             <template #item="{legend, index}">
-                <div @click="segregate(legend.uid)" :style="`opacity:${segregated.includes(legend.uid) ? 0.5 : 1}`">
+                <div data-cy-legend-item @click="segregate(legend.uid)" :style="`opacity:${segregated.includes(legend.uid) ? 0.5 : 1}`">
                     {{ legend.name }} : {{ Number(legend.value.toFixed(donutEvolutionConfig.style.chart.legend.roundingValue)).toLocaleString() }}
                     <span v-if="!segregated.includes(legend.uid)">
                         ({{ isNaN(legend.value / grandTotal) ? '-' : (legend.value / grandTotal * 100).toFixed(donutEvolutionConfig.style.chart.legend.roundingPercentage)}}%)

src/components/vue-ui-donut-evolution.vue

@@ -80,7 +80,7 @@ const maxX = computed(() => {
 
 const svg = computed(() => {
     const height = heatmapConfig.value.style.layout.padding.top + heatmapConfig.value.style.layout.padding.bottom + (props.dataset.length * heatmapConfig.value.style.layout.cells.height) + (mutableConfig.value.inside ? 92 : 0);
-    const width= heatmapConfig.value.style.layout.padding.left + heatmapConfig.value.style.layout.padding.right + (maxX.value * heatmapConfig.value.style.layout.cells.height);
+    const width= heatmapConfig.value.style.layout.padding.left + heatmapConfig.value.style.layout.padding.right + ((maxX.value < props.dataset.length ? props.dataset.length : maxX.value) * heatmapConfig.value.style.layout.cells.height);
 
     return {
         height,
@@ -125,7 +125,7 @@ const average = computed(() => {
 const cellSize = computed(() => {
     return {
         width: (drawingArea.value.width / maxX.value),
-        height: (drawingArea.value.width / maxX.value)
+        height: (drawingArea.value.width / (maxX.value < props.dataset.length ? props.dataset.length : maxX.value))
     }
 });
 
@@ -352,18 +352,18 @@ defineExpose({
                 <g v-for="(cell, j) in serie.temperatures">
                     <rect
                         :x="drawingArea.left + cellSize.width * j"
-                        :y="drawingArea.top + cellSize.width * i"
+                        :y="drawingArea.top + cellSize.height * i"
                         :width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
-                        :height="cellSize.width - heatmapConfig.style.layout.cells.spacing"
+                        :height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
                         :fill="heatmapConfig.style.layout.cells.colors.underlayer"
                         :stroke="heatmapConfig.style.backgroundColor"
                         :stroke-width="heatmapConfig.style.layout.cells.spacing"
                     />
                     <rect
                         :x="drawingArea.left + cellSize.width * j"
-                        :y="drawingArea.top + cellSize.width * i"
+                        :y="drawingArea.top + cellSize.height * i"
                         :width="cellSize.width - heatmapConfig.style.layout.cells.spacing"
-                        :height="cellSize.width - heatmapConfig.style.layout.cells.spacing"
+                        :height="cellSize.height - heatmapConfig.style.layout.cells.spacing"
                         :fill="cell.color"
                         :stroke="hoveredCell && hoveredCell === cell.id ? heatmapConfig.style.layout.cells.selected.color : heatmapConfig.style.backgroundColor"
                         :stroke-width="heatmapConfig.style.layout.cells.spacing"
@@ -375,7 +375,7 @@ defineExpose({
                         :font-weight="heatmapConfig.style.layout.cells.value.bold ? 'bold': 'normal'"
                         :fill="adaptColorToBackground(cell.color)"
                         :x="(drawingArea.left + cellSize.width * j) + (cellSize.width / 2)"
-                        :y="(drawingArea.top + cellSize.width * i) + (cellSize.width / 2) + heatmapConfig.style.layout.cells.value.fontSize / 3"
+                        :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() }}
                     </text>
@@ -385,9 +385,9 @@ defineExpose({
                     <rect
                         :data-cy="`heatmap-trap-${i}-${j}`"
                         :x="drawingArea.left + cellSize.width * j"
-                        :y="drawingArea.top + cellSize.width * i"
+                        :y="drawingArea.top + cellSize.height * i"
                         :width="cellSize.width"
-                        :height="cellSize.width"
+                        :height="cellSize.height"
                         fill="transparent"
                         stroke="none"
                         @mouseover="useTooltip(cell)"
@@ -399,7 +399,7 @@ defineExpose({
                         :font-size="heatmapConfig.style.layout.dataLabels.yAxis.fontSize"
                         :fill="heatmapConfig.style.layout.dataLabels.yAxis.color"
                         :x="drawingArea.left + heatmapConfig.style.layout.dataLabels.yAxis.offsetX - 6"
-                        :y="drawingArea.top + (cellSize.width * i) + cellSize.width / 2 + heatmapConfig.style.layout.dataLabels.yAxis.fontSize / 3 + heatmapConfig.style.layout.dataLabels.yAxis.offsetY"
+                        :y="drawingArea.top + (cellSize.height * i) + cellSize.height / 2 + heatmapConfig.style.layout.dataLabels.yAxis.fontSize / 3 + heatmapConfig.style.layout.dataLabels.yAxis.offsetY"
                         text-anchor="end"
                         :font-weight="heatmapConfig.style.layout.dataLabels.yAxis.bold ? 'bold' : 'normal'"
                     >

src/components/vue-ui-heatmap.vue

@@ -13,6 +13,22 @@ describe('<VueUiOnion />', () => {
     });
   }
 
+  it('segregates series when selecting legend items', () => {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiOnion, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        }
+      });
+
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-trap]').should('have.length', 3)
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-trap]').should('have.length', 4)
+    });
+  })
+
   it('renders with different config attributes', function () {
     cy.get('@fixture').then((fixture) => {
       cy.mount(VueUiOnion, {

src/components/vue-ui-onion.cy.js

@@ -397,6 +397,7 @@ defineExpose({
             <!-- TOOLTIP TRAPS -->
             <circle 
                 v-for="(onion, i) in mutableDataset" 
+                data-cy-trap
                 :data-cy="`onion-track-${i}`"
                 :cx="drawableArea.centerX" 
                 :cy="drawableArea.centerY" 
@@ -448,7 +449,7 @@ defineExpose({
             <foreignObject 
                 v-if="onionConfig.style.chart.legend.show && mutableConfig.inside && !isPrinting"
                 :x="0"
-                :y="drawableArea.bottom"
+                :y="drawableArea.bottom + onionConfig.style.chart.legend.offsetY"
                 width="100%"
                 :height="svg.height - drawableArea.bottom"
                 style="overflow:visible"
@@ -478,7 +479,7 @@ defineExpose({
             @clickMarker="({legend}) => segregate(legend.id)"
         >
             <template #item="{ legend }">
-                <div @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
+                <div data-cy-legend-item @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
                     {{ legend.name }} : {{ legend.percentage.toFixed(onionConfig.style.chart.legend.roundingPercentage) }}%
 
 

src/components/vue-ui-onion.vue

@@ -7,6 +7,22 @@ describe('<VueUiQuadrant />', () => {
     cy.viewport(500, 650);
   });
 
+  it('segregates series when selecting legend items', () => {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiQuadrant, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        },
+      });
+
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-quadrant-area]').should('have.length', 1)
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-quadrant-area]').should('have.length', 2)
+    });
+  })
+
   it('renders', () => {
     cy.get('@fixture').then((fixture) => {
       cy.mount(VueUiQuadrant, {

src/components/vue-ui-quadrant.cy.js

@@ -798,8 +798,9 @@ defineExpose({
             <!-- AREAS GIFT WRAPPING -->
             <g v-if="quadrantConfig.style.chart.layout.areas.show">
                 <g v-for="(category, i) in drawableDataset">
-                    <polygon 
+                    <polygon
                         v-if="category.series.length > 2"
+                        data-cy-quadrant-area
                         :fill="quadrantConfig.style.chart.layout.areas.useGradient ? `url(#quadrant_gradient_${uid}_${i})` : `${category.color}${opacity[quadrantConfig.style.chart.layout.areas.opacity]}`"
                         :points="giftWrap(category)"
                     />
@@ -870,7 +871,7 @@ defineExpose({
             @clickMarker="({legend}) => segregate(legend.id)"
         >
             <template #item="{ legend }">
-                <div @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
+                <div data-cy-legend-item @click="segregate(legend.id)" :style="`opacity:${segregated.includes(legend.id) ? 0.5 : 1}`">
                     {{ legend.name }} 
                 </div>
             </template>

src/components/vue-ui-quadrant.vue

@@ -7,6 +7,22 @@ describe('<VueUiRadar />', () => {
     cy.viewport(500, 500);
   });
 
+  it('segregates series when selecting legend items', () => {
+    cy.get('@fixture').then((fixture) => {
+      cy.mount(VueUiRadar, {
+        props: {
+          dataset: fixture.dataset,
+          config: fixture.config
+        },
+      });
+
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-radar-path]').should('have.length', 2)
+      cy.get('[data-cy-legend-item]').eq(0).click()
+      cy.get('[data-cy-radar-path]').should('have.length', 3)
+    });
+  })
+
   it('renders', () => {
     cy.get('@fixture').then((fixture) => {
       cy.mount(VueUiRadar, {

src/components/vue-ui-radar.cy.js

@@ -525,7 +525,8 @@ defineExpose({
             <!-- PLOTS -->
             <g v-for="(d, i) in datasetCopy">
                 <g v-if="!segregated.includes(i)">
-                    <path 
+                    <path
+                        data-cy-radar-path
                         :d="makePath(radar.map(r => r.plots[i]))"
                         :stroke="d.color"
                         :stroke-width="radarConfig.style.chart.layout.dataPolygon.strokeWidth"
@@ -578,7 +579,7 @@ defineExpose({
             @clickMarker="({i}) => segregate(i)"
         >
             <template #item="{ legend, index }">
-                <div @click="segregate(index)" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
+                <div data-cy-legend-item @click="segregate(index)" :style="`opacity:${segregated.includes(index) ? 0.5 : 1}`">
                     {{ legend.name }} : {{ (legend.totalProportion * 100).toFixed(radarConfig.style.chart.legend.roundingPercentage) }}%
                 </div>
             </template>