fix(charts): legendAllowWrap function generates an null error (#9719)

#9718
patternfly · Oct 9, 2023 · 5b4cbf4 · 5b4cbf4
1 parent bd71235
commit 5b4cbf4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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}