fix(VSparkline): handle a divide by zero bug when all values are zero (…

…#11315) fixes #11311 * fix(VSparkline): handle a divide by zero bug when all values are zero * test * test: missing snapshot * Update packages/vuetify/src/components/VSparkline/__tests__/VSparkline.spec.ts Co-authored-by: Jacek Karczmarczyk <jk@drukcd.pl>
vuetifyjs · May 4, 2020 · 2dacec2 · 2dacec2
1 parent ee73538
commit 2dacec2
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VSparkline/__tests__/VSparkline.spec.ts b/packages/vuetify/src/components/VSparkline/__tests__/VSparkline.spec.ts
@@ -266,4 +266,15 @@ describe('VSparkline.ts', () => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should render bar component with all values 0', () => {
+    const wrapper = mountFunction({
+      propsData: {
+        value: [0, 0, 0],
+        type: 'bar',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
 })
diff --git a/packages/vuetify/src/components/VSparkline/__tests__/__snapshots__/VSparkline.spec.ts.snap b/packages/vuetify/src/components/VSparkline/__tests__/__snapshots__/VSparkline.spec.ts.snap
@@ -47,6 +47,62 @@ exports[`VSparkline.ts should position labels correctly 1`] = `
 </svg>
 `;
 
+exports[`VSparkline.ts should render bar component with all values 0 1`] = `
+<svg display="block"
+     viewbox="0 0 300 75"
+>
+  <defs>
+    <linearGradient id="39"
+                    x1="0"
+                    y1="1"
+                    x2="0"
+                    y2="0"
+    >
+      <stop offset="0"
+            stop-color="currentColor"
+      >
+      </stop>
+    </linearGradient>
+  </defs>
+  <clipPath id="sparkline-bar-39-clip">
+    <rect x="48"
+          y="75"
+          width="4"
+          height="0"
+          rx="0"
+          ry="0"
+    >
+    </rect>
+    <rect x="148"
+          y="75"
+          width="4"
+          height="0"
+          rx="0"
+          ry="0"
+    >
+    </rect>
+    <rect x="248"
+          y="75"
+          width="4"
+          height="0"
+          rx="0"
+          ry="0"
+    >
+    </rect>
+  </clipPath>
+  <g clip-path="url(#sparkline-bar-39-clip)"
+     fill="url(#39)"
+  >
+    <rect x="0"
+          y="0"
+          width="300"
+          height="75"
+    >
+    </rect>
+  </g>
+</svg>
+`;
+
 exports[`VSparkline.ts should render component and match a snapshot 1`] = `
 <svg display="block"
      stroke-width="4"

diff --git a/packages/vuetify/src/components/VSparkline/helpers/core.ts b/packages/vuetify/src/components/VSparkline/helpers/core.ts
@@ -38,7 +38,7 @@ export function genBars (
   if (maxValue < 0) maxValue = 0
 
   const gridX = maxX / totalValues
-  const gridY = (maxY - minY) / (maxValue - minValue)
+  const gridY = (maxY - minY) / ((maxValue - minValue) || 1)
   const horizonY = maxY - Math.abs(minValue * gridY)
 
   return values.map((value, index) => {