fix: Default center not appearing randomly

It should not be possible for the hoveredSlice value to ever be 0
CBIIT · Feb 20, 2024 · 7f70db3 · 7f70db3
1 parent 206f46d
commit 7f70db3
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/NodeChart/index.tsx b/src/components/NodeChart/index.tsx
@@ -54,6 +54,8 @@ const NodeChart: FC<Props> = ({ label, centerCount, data }: Props) => {
   const dataset: PieSectorDataItem[] = useMemo(() => data.filter(({ value }) => value > 0), [data]);
   const onMouseOver = useCallback((data) => setHoveredSlice(data), []);
   const onMouseLeave = useCallback(() => setHoveredSlice(null), []);
+  const showDefaultCenter: boolean = useMemo(() => (dataset.length === 0 && hoveredSlice === null)
+    || hoveredSlice?.value === 0, [dataset, hoveredSlice]);
 
   return (
     <StyledChartContainer>
@@ -68,7 +70,7 @@ const NodeChart: FC<Props> = ({ label, centerCount, data }: Props) => {
           isAnimationActive={false}
           aria-label={`${label} chart background`}
         >
-          {(dataset.length === 0 && hoveredSlice === null) && <Label position="center" content={(<PieChartCenter title="Total" value={0} />)} />}
+          {showDefaultCenter ? <Label position="center" content={(<PieChartCenter title="Total" value={0} />)} /> : null}
         </Pie>
         <Pie
           data={dataset}