Merge pull request #1297 from RedisInsight/fe/feature/RI-3659_hide-labels

#RI-3659 - hide chart labels for medium screens

Author: rsergeenko

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

@@ -72,6 +72,11 @@ describe('DonutChart', () => {
     expect(screen.getByTestId('label-E-30')).toHaveTextContent('E: 30')
   })
 
+  it('should render label value without title', () => {
+    render(<DonutChart data={mockData} config={{ percentToShowLabel: 5 }} hideLabelTitle />)
+    expect(screen.getByTestId('label-E-30').textContent).toBe('30')
+  })
+
   it('should call render tooltip and label methods', () => {
     const renderLabel = jest.fn()
     const renderTooltip = jest.fn()

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

@@ -40,6 +40,7 @@ interface IProps {
   renderLabel?: (data: ChartData) => string
   renderTooltip?: (data: ChartData) => React.ReactElement | string
   labelAs?: 'value' | 'percentage'
+  hideLabelTitle?: boolean
 }
 
 const ANIMATION_DURATION_MS = 100
@@ -56,6 +57,7 @@ const DonutChart = (props: IProps) => {
     labelAs = 'value',
     renderLabel,
     renderTooltip,
+    hideLabelTitle = false,
   } = props
 
   const margin = config?.margin || 98
@@ -121,6 +123,15 @@ const DonutChart = (props: IProps) => {
     return `translate(${(x / h) * (radius + 12)}, ${((y + 4) / h) * (radius + 12)})`
   }
 
+  useEffect(() => {
+    d3
+      .select(svgRef.current)
+      .attr('width', width)
+      .attr('height', height)
+      .select('g')
+      .attr('transform', `translate(${width / 2},${height / 2})`)
+  }, [height, width])
+
   useEffect(() => {
     const pie = d3.pie<ChartData>().value((d: ChartData) => d.value).sort(null)
     const dataReady = pie(data.filter((d) => d.value !== 0))
@@ -134,7 +145,7 @@ const DonutChart = (props: IProps) => {
       .select(svgRef.current)
       .attr('width', width)
       .attr('height', height)
-      .attr('data-testid', `donut-${name}`)
+      .attr('data-testid', `donut-svg-${name}`)
       .attr('class', cx(classNames?.chart))
       .append('g')
       .attr('transform', `translate(${width / 2},${height / 2})`)
@@ -160,7 +171,7 @@ const DonutChart = (props: IProps) => {
       .append('text')
       .attr('class', cx(styles.chartLabel, classNames?.arcLabel))
       .attr('transform', getLabelPosition)
-      .text((d) => (isShowLabel(d) ? d.data.name : ''))
+      .text((d) => (isShowLabel(d) && !hideLabelTitle ? `${d.data.name}: ` : ''))
       .attr('data-testid', (d) => `label-${d.data.name}-${d.data.value}`)
       .style('text-anchor', (d) => ((d.endAngle + d.startAngle) / 2 > Math.PI ? 'end' : 'start'))
       .on('mouseenter mousemove', onMouseEnterSlice)
@@ -175,22 +186,21 @@ const DonutChart = (props: IProps) => {
           return renderLabel(d.data)
         }
 
-        const separator = ': '
         if (labelAs === 'percentage') {
-          return `${separator}${getPercentage(d.value, sum)}%`
+          return `${getPercentage(d.value, sum)}%`
         }
 
-        return `${separator}${truncateNumberToRange(d.value)}`
+        return truncateNumberToRange(d.value)
       })
       .attr('class', cx(styles.chartLabelValue, classNames?.arcLabelValue))
-  }, [data])
+  }, [data, hideLabelTitle])
 
   if (!data.length || sum === 0) {
     return null
   }
 
   return (
-    <div className={styles.wrapper}>
+    <div className={styles.wrapper} data-testid={`donut-${name}`}>
       <svg ref={svgRef} />
       <div
         className={cx(styles.tooltip, classNames?.tooltip)}

redisinsight/ui/src/pages/databaseAnalysis/components/summary-per-data/SummaryPerData.tsx

@@ -18,10 +18,15 @@ export interface Props {
   loading: boolean
 }
 
+const widthResponsiveSize = 1024
+const CHART_WITH_LABELS_WIDTH = 432
+const CHART_WIDTH = 320
+
 const SummaryPerData = ({ data, loading }: Props) => {
   const { totalMemory, totalKeys } = data || {}
   const [memoryData, setMemoryData] = useState<ChartData[]>([])
   const [keysData, setKeysData] = useState<ChartData[]>([])
+  const [hideLabelTitle, setHideLabelTitle] = useState(false)
 
   const getChartData = (t: SimpleTypeSummary) => ({
     value: t.total,
@@ -30,6 +35,18 @@ const SummaryPerData = ({ data, loading }: Props) => {
     meta: { ...t }
   })
 
+  const updateChartSize = () => {
+    setHideLabelTitle(globalThis.innerWidth < widthResponsiveSize)
+  }
+
+  useEffect(() => {
+    updateChartSize()
+    globalThis.addEventListener('resize', updateChartSize)
+    return () => {
+      globalThis.removeEventListener('resize', updateChartSize)
+    }
+  }, [])
+
   useEffect(() => {
     if (data && totalMemory && totalKeys) {
       setMemoryData(totalMemory.types?.map(getChartData) as ChartData[])
@@ -45,6 +62,7 @@ const SummaryPerData = ({ data, loading }: Props) => {
       </div>
     )
   }
+
   if ((!totalMemory || memoryData.length === 0) && (!totalKeys || keysData.length === 0)) {
     return null
   }
@@ -83,7 +101,8 @@ const SummaryPerData = ({ data, loading }: Props) => {
           name="memory"
           data={memoryData}
           labelAs="percentage"
-          width={432}
+          hideLabelTitle={hideLabelTitle}
+          width={hideLabelTitle ? CHART_WIDTH : CHART_WITH_LABELS_WIDTH}
           config={{ radius: 94 }}
           renderTooltip={renderMemoryTooltip}
           title={(
@@ -103,7 +122,8 @@ const SummaryPerData = ({ data, loading }: Props) => {
           name="keys"
           data={keysData}
           labelAs="percentage"
-          width={432}
+          hideLabelTitle={hideLabelTitle}
+          width={hideLabelTitle ? CHART_WIDTH : CHART_WITH_LABELS_WIDTH}
           config={{ radius: 94 }}
           renderTooltip={renderKeysTooltip}
           title={(