From 5b4cbf41bf11785ffe66dc263c7c26e61d25cacd Mon Sep 17 00:00:00 2001
From: Dan Labrecque <dlabrecq@redhat.com>
Date: Mon, 9 Oct 2023 09:44:38 -0400
Subject: [PATCH] fix(charts): legendAllowWrap function generates an null error
 (#9719)

https://github.com/patternfly/patternfly-react/issues/9718
---
 .../src/components/Chart/Chart.tsx            |  2 +-
 .../src/components/ChartPie/ChartPie.tsx      |  2 +-
 .../ResizeObserver/examples/resizeObserver.md | 35 +++++++++++++------
 3 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/packages/react-charts/src/components/Chart/Chart.tsx b/packages/react-charts/src/components/Chart/Chart.tsx
index 10803be4699..4c5882dbad1 100644
--- a/packages/react-charts/src/components/Chart/Chart.tsx
+++ b/packages/react-charts/src/components/Chart/Chart.tsx
@@ -627,7 +627,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   // Callback to compliment legendAllowWrap
   const computedLegend = getLegend();
   useEffect(() => {
-    if (typeof legendAllowWrap === 'function') {
+    if (computedLegend?.props && typeof legendAllowWrap === 'function') {
       const extraHeight = getLegendItemsExtraHeight({
         legendData: computedLegend.props.data,
         legendOrientation: computedLegend.props.orientation,
diff --git a/packages/react-charts/src/components/ChartPie/ChartPie.tsx b/packages/react-charts/src/components/ChartPie/ChartPie.tsx
index 899cabe0bd7..61263aeecc8 100644
--- a/packages/react-charts/src/components/ChartPie/ChartPie.tsx
+++ b/packages/react-charts/src/components/ChartPie/ChartPie.tsx
@@ -651,7 +651,7 @@ export const ChartPie: React.FunctionComponent<ChartPieProps> = ({
   // Callback to compliment legendAllowWrap
   const computedLegend = getLegend();
   useEffect(() => {
-    if (typeof legendAllowWrap === 'function') {
+    if (computedLegend?.props && typeof legendAllowWrap === 'function') {
       const extraHeight = getLegendItemsExtraHeight({
         legendData: computedLegend.props.data,
         legendOrientation: computedLegend.props.orientation,
diff --git a/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md b/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md
index adfe14c99bc..0e77eac5cbb 100644
--- a/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md
+++ b/packages/react-charts/src/components/ResizeObserver/examples/resizeObserver.md
@@ -161,6 +161,24 @@ class MultiColorChart extends React.Component {
         this.setState({ width: this.containerRef.current.clientWidth });
       }
     };
+    this.handleLegendAllowWrap = (extraHeight) => {
+      if (extraHeight !== this.state.extraHeight) {
+        this.setState({ extraHeight });
+      }
+    }
+    this.getHeight = (baseHeight) => {
+      const { extraHeight } = this.state;
+      return baseHeight + extraHeight;
+    };
+    this.getPadding = () => {
+      const { extraHeight } = this.state;
+      return {
+        bottom: 100 + extraHeight, // Adjusted to accomodate legend
+        left: 50,
+        right: 50,
+        top: 50,
+      };
+    };
   }
 
   componentDidMount() {
@@ -174,11 +192,11 @@ class MultiColorChart extends React.Component {
 
   render() {
     const { width } = this.state;
-    const itemsPerRow = width > 650 ? 4 : 2;
+    const height = this.getHeight(250);
 
     return (
       <div ref={this.containerRef}>
-        <div style={{ height: '250px' }}>
+        <div style={{ height: height + 'px' }}>
           <Chart
             ariaDesc="Average number of pets"
             ariaTitle="Area chart example"
@@ -188,32 +206,27 @@ class MultiColorChart extends React.Component {
                 constrainToVisibleArea
               />
             }
+            legendAllowWrap={this.handleLegendAllowWrap}
             legendPosition="bottom-left"
             legendComponent={
               <ChartLegend
                 data={[
                   { name: 'Cats' },
-                  { name: 'Birds' },
                   {
                     name: 'Cats Threshold',
                     symbol: { fill: chart_color_blue_300.var, type: 'threshold' }
                   },
+                  { name: 'Birds' },
                   {
                     name: 'Birds Threshold',
                     symbol: { fill: chart_color_orange_300.var, type: 'threshold' }
                   }
                 ]}
-                itemsPerRow={itemsPerRow}
               />
             }
-            height={250}
+            height={height}
             name="chart2"
-            padding={{
-              bottom: 100, // Adjusted to accomodate legend
-              left: 50,
-              right: 50,
-              top: 50
-            }}
+            padding={this.getPadding()}
             maxDomain={{ y: 9 }}
             themeColor={ChartThemeColor.multiUnordered}
             width={width}