Merge pull request #4799 from dfe-analytical-services/EES-5080

EES-5080 fix vertical bar chart re-rendering
dfe-analytical-services · Apr 25, 2024 · babb39e · babb39e
2 parents e1fe1b5 + 9538fe6
commit babb39e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 16 deletions.
diff --git a/src/explore-education-statistics-common/src/modules/charts/components/HorizontalBarBlock.tsx b/src/explore-education-statistics-common/src/modules/charts/components/HorizontalBarBlock.tsx
@@ -64,7 +64,7 @@ const HorizontalBarBlock = ({
   showDataLabels,
   dataLabelPosition,
 }: HorizontalBarProps) => {
-  const [legendProps, renderLegend] = useLegend({});
+  const [legendProps, renderLegend] = useLegend();
   const { isMedia: isMobileMedia } = useMobileMedia();
 
   if (

diff --git a/src/explore-education-statistics-common/src/modules/charts/components/LineChartBlock.tsx b/src/explore-education-statistics-common/src/modules/charts/components/LineChartBlock.tsx
@@ -72,7 +72,7 @@ const LineChartBlock = ({
   showDataLabels,
   dataLabelPosition,
 }: LineChartProps) => {
-  const [legendProps, renderLegend] = useLegend({});
+  const [legendProps, renderLegend] = useLegend();
 
   if (
     axes === undefined ||

diff --git a/src/explore-education-statistics-common/src/modules/charts/components/VerticalBarBlock.tsx b/src/explore-education-statistics-common/src/modules/charts/components/VerticalBarBlock.tsx
@@ -62,7 +62,7 @@ const VerticalBarBlock = ({
   stacked,
   width,
 }: VerticalBarProps) => {
-  const [legendProps, renderLegend] = useLegend({ reverseOrder: stacked });
+  const [legendProps, renderLegend] = useLegend();
   if (
     axes === undefined ||
     axes.major === undefined ||
@@ -127,7 +127,11 @@ const VerticalBarBlock = ({
   return (
     <ChartContainer
       height={height || 300}
-      legend={legendProps}
+      legend={
+        stacked && legendProps?.payload
+          ? { ...legendProps, payload: [...legendProps.payload].reverse() }
+          : legendProps
+      }
       legendPosition={legend.position}
       yAxisWidth={yAxisWidth}
       yAxisLabel={axes.minor.label}

diff --git a/src/explore-education-statistics-common/src/modules/charts/components/hooks/useLegend.ts b/src/explore-education-statistics-common/src/modules/charts/components/hooks/useLegend.ts
@@ -3,11 +3,7 @@ import { useCallback, useState } from 'react';
 import { LegendProps, DefaultLegendContentProps } from 'recharts';
 import { ContentType } from 'recharts/types/component/DefaultLegendContent';
 
-export default function useLegend({
-  reverseOrder = false,
-}: {
-  reverseOrder?: boolean;
-}): [LegendProps | undefined, ContentType] {
+export default function useLegend(): [LegendProps | undefined, ContentType] {
   const [legendProps, setLegendProps] = useState<LegendProps>();
 
   const renderLegend: ContentType = useCallback(
@@ -18,22 +14,17 @@ export default function useLegend({
         height: nextProps.height ? Number(nextProps.height) : undefined,
       };
 
-      const { payload = [] } = nextLegendProps;
-
       // Need to do a deep comparison of the props to
       // avoid falling into an infinite rendering loop.
       if (JSON.stringify(legendProps) !== JSON.stringify(nextLegendProps)) {
         setTimeout(() => {
-          setLegendProps({
-            ...nextLegendProps,
-            payload: reverseOrder ? [...payload].reverse() : payload,
-          });
+          setLegendProps(nextLegendProps);
         });
       }
 
       return null;
     },
-    [legendProps, reverseOrder],
+    [legendProps],
   );
 
   return [legendProps, renderLegend];