Merge pull request #1173 from RedisInsight/fe/bugfix/RI-3550_no-data-display

#RI-3550 - fix donut chart rendering with 0 values

Author: rsergeenko

redisinsight/ui/src/components/charts/donut-chart/DonutChart.spec.tsx

@@ -21,6 +21,20 @@ describe('DonutChart', () => {
     expect(render(<DonutChart data={mockData} />)).toBeTruthy()
   })
 
+  it('should not render donut with empty data', () => {
+    const { container } = render(<DonutChart data={[]} name="test" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should not render donut with 0 values', () => {
+    const mockData: ChartData[] = [
+      { value: 0, name: 'A', color: [0, 0, 0] },
+      { value: 0, name: 'B', color: [10, 10, 10] },
+    ]
+    const { container } = render(<DonutChart data={mockData} name="test" />)
+    expect(container).toBeEmptyDOMElement()
+  })
+
   it('should render svg', () => {
     render(<DonutChart data={mockData} name="test" />)
     expect(screen.getByTestId('donut-test')).toBeInTheDocument()
@@ -34,6 +48,16 @@ describe('DonutChart', () => {
     })
   })
 
+  it('should not render arcs and labels with 0 value', () => {
+    const mockData: ChartData[] = [
+      { value: 0, name: 'A', color: [0, 0, 0] },
+      { value: 10, name: 'B', color: [10, 10, 10] },
+    ]
+    render(<DonutChart data={mockData} />)
+    expect(screen.queryByTestId('arc-A-0')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('label-A-0')).not.toBeInTheDocument()
+  })
+
   it('should do not render label value if value less than 5%', () => {
     render(<DonutChart data={mockData} config={{ percentToShowLabel: 5 }} />)
     expect(screen.getByTestId('label-A-1')).toHaveTextContent('')

redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx

@@ -1,5 +1,6 @@
 import cx from 'classnames'
 import * as d3 from 'd3'
+import { sumBy } from 'lodash'
 import React, { useEffect, useRef } from 'react'
 import { truncateNumberToRange } from 'uiSrc/utils'
 import { rgb, RGBColor } from 'uiSrc/utils/colors'
@@ -104,7 +105,7 @@ const DonutChart = (props: IProps) => {
 
   useEffect(() => {
     const pie = d3.pie<ChartData>().value((d: ChartData) => d.value).sort(null)
-    const dataReady = pie(data)
+    const dataReady = pie(data.filter((d) => d.value !== 0))
 
     d3
       .select(svgRef.current)
@@ -151,6 +152,10 @@ const DonutChart = (props: IProps) => {
       .attr('class', cx(styles.chartLabelValue, classNames?.arcLabelValue))
   }, [data])
 
+  if (!data.length || sumBy(data, 'value') === 0) {
+    return null
+  }
+
   return (
     <div className={styles.wrapper}>
       <svg ref={svgRef} />