Merge pull request #1207 from RedisInsight/fe/feature/RI-3585_update-donut-charts

vlad-dargel · web-flow · commit ee7ab37cefe7 · 2022-09-27T16:58:07.000+02:00
#RI-3585 - add endpoints, percentage and totals to Memory and Keys graphs
diff --git a/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx b/redisinsight/ui/src/components/charts/donut-chart/DonutChart.tsx
@@ -1,16 +1,21 @@
 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 React, { useEffect, useRef, useState } from 'react'
+import { flushSync } from 'react-dom'
+import { Nullable, truncateNumberToRange } from 'uiSrc/utils'
 import { rgb, RGBColor } from 'uiSrc/utils/colors'
+import { getPercentage } from 'uiSrc/utils/numbers'
 
 import styles from './styles.module.scss'
 
 export interface ChartData {
   value: number
   name: string
   color: RGBColor
+  meta?: {
+    [key: string]: any
+  }
 }
 
 interface IProps {
@@ -32,8 +37,9 @@ interface IProps {
     arcLabelValue?: string
     tooltip?: string
   }
-  renderLabel?: (value: number) => string
-  renderTooltip?: (value: number) => string
+  renderLabel?: (data: ChartData) => string
+  renderTooltip?: (data: ChartData) => React.ReactElement | string
+  labelAs?: 'value' | 'percentage'
 }
 
 const ANIMATION_DURATION_MS = 100
@@ -47,17 +53,20 @@ const DonutChart = (props: IProps) => {
     title,
     config,
     classNames,
+    labelAs = 'value',
     renderLabel,
-    renderTooltip = (v) => v,
+    renderTooltip,
   } = props
 
   const margin = config?.margin || 98
   const radius = config?.radius || (width / 2 - margin)
   const arcWidth = config?.arcWidth || 8
   const percentToShowLabel = config?.percentToShowLabel || 5
 
+  const [hoveredData, setHoveredData] = useState<Nullable<ChartData>>(null)
   const svgRef = useRef<SVGSVGElement>(null)
   const tooltipRef = useRef<HTMLDivElement>(null)
+  const sum = sumBy(data, 'value')
 
   const arc = d3.arc<d3.PieArcDatum<ChartData>>()
     .outerRadius(radius)
@@ -74,12 +83,20 @@ const DonutChart = (props: IProps) => {
       .duration(ANIMATION_DURATION_MS)
       .attr('d', arcHover)
 
-    if (tooltipRef.current) {
-      tooltipRef.current.innerHTML = `${d.data.name}: ${renderTooltip(d.value)}`
-      tooltipRef.current.style.visibility = 'visible'
-      tooltipRef.current.style.top = `${e.pageY + 15}px`
-      tooltipRef.current.style.left = `${e.pageX + 15}px`
+    if (!tooltipRef.current) {
+      return
     }
+
+    // calculate position after tooltip rendering (do update as synchronous operation)
+    if (e.type === 'mouseenter') {
+      flushSync(() => { setHoveredData(d.data) })
+    }
+
+    tooltipRef.current.style.top = `${e.pageY + 15}px`
+    tooltipRef.current.style.left = (window.innerWidth < (tooltipRef.current.scrollWidth + e.pageX + 20))
+      ? `${e.pageX - tooltipRef.current.scrollWidth - 15}px`
+      : `${e.pageX + 15}px`
+    tooltipRef.current.style.visibility = 'visible'
   }
 
   const onMouseLeaveSlice = (e: MouseEvent) => {
@@ -91,6 +108,7 @@ const DonutChart = (props: IProps) => {
 
     if (tooltipRef.current) {
       tooltipRef.current.style.visibility = 'hidden'
+      setHoveredData(null)
     }
   }
 
@@ -148,11 +166,26 @@ const DonutChart = (props: IProps) => {
       .on('mouseenter mousemove', onMouseEnterSlice)
       .on('mouseleave', onMouseLeaveSlice)
       .append('tspan')
-      .text((d) => (isShowLabel(d) ? `: ${renderLabel ? renderLabel(d.value) : truncateNumberToRange(d.value)}` : ''))
+      .text((d) => {
+        if (!isShowLabel(d)) {
+          return ''
+        }
+
+        if (renderLabel) {
+          return renderLabel(d.data)
+        }
+
+        const separator = ': '
+        if (labelAs === 'percentage') {
+          return `${separator}${getPercentage(d.value, sum)}%`
+        }
+
+        return `${separator}${truncateNumberToRange(d.value)}`
+      })
       .attr('class', cx(styles.chartLabelValue, classNames?.arcLabelValue))
   }, [data])
 
-  if (!data.length || sumBy(data, 'value') === 0) {
+  if (!data.length || sum === 0) {
     return null
   }
 
@@ -163,7 +196,9 @@ const DonutChart = (props: IProps) => {
         className={cx(styles.tooltip, classNames?.tooltip)}
         data-testid="chart-value-tooltip"
         ref={tooltipRef}
-      />
+      >
+        {(renderTooltip && hoveredData) ? renderTooltip(hoveredData) : (hoveredData?.value || '')}
+      </div>
       {title && (
         <div className={styles.innerTextContainer}>
           {title}
diff --git a/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss b/redisinsight/ui/src/components/charts/donut-chart/styles.module.scss
@@ -11,12 +11,12 @@
 
 .tooltip {
   position: fixed;
-  background: var(--separatorColor);
+  background: var(--euiTooltipBackgroundColor);
   color: var(--htmlColor);
   padding: 10px;
   visibility: hidden;
   border-radius: 4px;
-  z-index: 5;
+  z-index: 100;
 }
 
 .chartLabel {
diff --git a/redisinsight/ui/src/pages/clusterDetails/components/cluster-details-graphics/ClusterDetailsGraphics.tsx b/redisinsight/ui/src/pages/clusterDetails/components/cluster-details-graphics/ClusterDetailsGraphics.tsx
@@ -1,26 +1,58 @@
 import { EuiIcon, EuiTitle } from '@elastic/eui'
 import cx from 'classnames'
+import { sumBy } from 'lodash'
 import React, { useEffect, useState } from 'react'
 import { DonutChart } from 'uiSrc/components/charts'
 import { ChartData } from 'uiSrc/components/charts/donut-chart/DonutChart'
 import { KeyIconSvg, MemoryIconSvg } from 'uiSrc/components/database-overview/components/icons'
 import { ModifiedClusterNodes } from 'uiSrc/pages/clusterDetails/ClusterDetailsPage'
 import { formatBytes, Nullable } from 'uiSrc/utils'
-import { numberWithSpaces } from 'uiSrc/utils/numbers'
+import { getPercentage, numberWithSpaces } from 'uiSrc/utils/numbers'
 
 import styles from './styles.module.scss'
 
 const ClusterDetailsGraphics = ({ nodes, loading }: { nodes: Nullable<ModifiedClusterNodes[]>, loading: boolean }) => {
   const [memoryData, setMemoryData] = useState<ChartData[]>([])
+  const [memorySum, setMemorySum] = useState(0)
   const [keysData, setKeysData] = useState<ChartData[]>([])
+  const [keysSum, setKeysSum] = useState(0)
 
-  const renderMemoryLabel = (value: number) => formatBytes(value, 1, false) as string
-  const renderMemoryTooltip = (value: number) => `${numberWithSpaces(value)} B`
+  const renderMemoryTooltip = (data: ChartData) => (
+    <div className={styles.labelTooltip}>
+      <div className={styles.tooltipTitle}>
+        <span data-testid="tooltip-node-name">{data.name}: </span>
+        <span data-testid="tooltip-host-port">{data.meta?.host}:{data.meta?.port}</span>
+      </div>
+      <b>
+        <span className={styles.tooltipPercentage} data-testid="tooltip-node-percent">{getPercentage(data.value, memorySum)}%</span>
+        <span data-testid="tooltip-total-memory">(&thinsp;{formatBytes(data.value, 3, false)}&thinsp;)</span>
+      </b>
+    </div>
+  )
+
+  const renderKeysTooltip = (data: ChartData) => (
+    <div className={styles.labelTooltip}>
+      <div className={styles.tooltipTitle}>
+        <span data-testid="tooltip-node-name">{data.name}: </span>
+        <span data-testid="tooltip-host-port">{data.meta?.host}:{data.meta?.port}</span>
+      </div>
+      <b>
+        <span className={styles.tooltipPercentage} data-testid="tooltip-node-percent">{getPercentage(data.value, keysSum)}%</span>
+        <span data-testid="tooltip-total-keys">(&thinsp;{numberWithSpaces(data.value)}&thinsp;)</span>
+      </b>
+    </div>
+  )
 
   useEffect(() => {
     if (nodes) {
-      setMemoryData(nodes.map((n) => ({ value: n.usedMemory, name: n.letter, color: n.color })) as ChartData[])
-      setKeysData(nodes.map((n) => ({ value: n.totalKeys, name: n.letter, color: n.color })) as ChartData[])
+      const memory = nodes.map((n) => ({ value: n.usedMemory, name: n.letter, color: n.color, meta: { ...n } }))
+      const keys = nodes.map((n) => ({ value: n.totalKeys, name: n.letter, color: n.color, meta: { ...n } }))
+
+      setMemoryData(memory as ChartData[])
+      setKeysData(keys as ChartData[])
+
+      setMemorySum(sumBy(memory, 'value'))
+      setKeysSum(sumBy(keys, 'value'))
     }
   }, [nodes])
 
@@ -42,27 +74,36 @@ const ClusterDetailsGraphics = ({ nodes, loading }: { nodes: Nullable<ModifiedCl
       <DonutChart
         name="memory"
         data={memoryData}
-        renderLabel={renderMemoryLabel}
         renderTooltip={renderMemoryTooltip}
+        labelAs="percentage"
         title={(
-          <div className={styles.chartTitle} data-testid="donut-title-memory">
-            <EuiIcon type={MemoryIconSvg} className={styles.icon} size="m" />
-            <EuiTitle size="xs">
-              <span>Memory</span>
-            </EuiTitle>
+          <div className={styles.chartCenter}>
+            <div className={styles.chartTitle} data-testid="donut-title-memory">
+              <EuiIcon type={MemoryIconSvg} className={styles.icon} size="m" />
+              <EuiTitle size="xs">
+                <span>Memory</span>
+              </EuiTitle>
+            </div>
+            <hr className={styles.titleSeparator} />
+            <div className={styles.centerCount}>{formatBytes(memorySum, 3)}</div>
           </div>
         )}
       />
       <DonutChart
         name="keys"
         data={keysData}
-        renderTooltip={numberWithSpaces}
+        renderTooltip={renderKeysTooltip}
+        labelAs="percentage"
         title={(
-          <div className={styles.chartTitle} data-testid="donut-title-keys">
-            <EuiIcon type={KeyIconSvg} className={styles.icon} size="m" />
-            <EuiTitle size="xs">
-              <span>Keys</span>
-            </EuiTitle>
+          <div className={styles.chartCenter}>
+            <div className={styles.chartTitle} data-testid="donut-title-keys">
+              <EuiIcon type={KeyIconSvg} className={styles.icon} size="m" />
+              <EuiTitle size="xs">
+                <span>Keys</span>
+              </EuiTitle>
+            </div>
+            <hr className={styles.titleSeparator} />
+            <div className={styles.centerCount}>{numberWithSpaces(keysSum)}</div>
           </div>
         )}
       />
diff --git a/redisinsight/ui/src/pages/clusterDetails/components/cluster-details-graphics/styles.module.scss b/redisinsight/ui/src/pages/clusterDetails/components/cluster-details-graphics/styles.module.scss
@@ -11,6 +11,12 @@
     margin-top: 36px;
   }
 
+  .chartCenter {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .chartTitle {
     display: flex;
     align-items: center;
@@ -20,11 +26,37 @@
     }
   }
 
+  .titleSeparator {
+    height: 1px;
+    border: 0;
+    background-color: var(--separatorColorLight);
+    margin: 6px 0;
+    width: 60px;
+  }
+
+  .centerCount {
+    margin-top: 2px;
+    font-weight: 500;
+    font-size: 14px;
+  }
+
   .preloaderCircle {
     width: 180px;
     height: 180px;
     margin: 60px 0;
     border-radius: 100%;
     background-color: var(--separatorColor);
   }
+
+  .labelTooltip {
+    font-size: 12px;
+
+    .tooltipPercentage {
+      margin-right: 6px;
+    }
+
+    .tooltipTitle {
+      margin-bottom: 6px;
+    }
+  }
 }
diff --git a/redisinsight/ui/src/utils/numbers.ts b/redisinsight/ui/src/utils/numbers.ts
@@ -11,3 +11,8 @@ export const nullableNumberWithSpaces = (number: Nullable<number> = 0) => {
   }
   return numberWithSpaces(number)
 }
+
+export const getPercentage = (value = 0, sum = 1, round = false, decimals = 2) => {
+  const percent = parseFloat(((value / sum) * 100).toFixed(decimals))
+  return round ? Math.round(percent) : percent
+}

Original file line number	Diff line number	Diff line change
`@@ -11,3 +11,8 @@ export const nullableNumberWithSpaces = (number: Nullable<number> = 0) => {`
`11`	`11`	`}`
`12`	`12`	`return numberWithSpaces(number)`
`13`	`13`	`}`
	`14`	`+`
	`15`	`+export const getPercentage = (value = 0, sum = 1, round = false, decimals = 2) => {`
	`16`	`+ const percent = parseFloat(((value / sum) * 100).toFixed(decimals))`
	`17`	`+ return round ? Math.round(percent) : percent`
	`18`	`+}`