Charts: Responsive legend

packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx

@@ -16,9 +16,9 @@ import {
   VictoryZoomContainer
 } from 'victory';
 import { ChartContainer } from '../ChartContainer';
-import { ChartLegend, ChartLegendOrientation, ChartLegendPosition, ChartLegendWrapper } from '../ChartLegend';
+import { ChartLegend, ChartLegendOrientation, ChartLegendPosition } from '../ChartLegend';
 import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
-import { getClassName, getLabelTextSize, getPaddingForSide, getTheme } from '../ChartUtils';
+import { getClassName, getComputedLegend, getLabelTextSize, getPaddingForSide, getTheme } from '../ChartUtils';
 
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -171,6 +171,13 @@ export interface ChartProps extends VictoryChartProps {
    * When the innerRadius prop is set, polar charts will be hollow rather than circular.
    */
   innerRadius?: number;
+  /**
+   * Allows legend items to wrap. A value of true allows the legend to wrap onto the next line
+   * if its container is not wide enough.
+   *
+   * Note: This is overridden by the legendItemsPerRow property
+   */
+  legendAllowWrap?: boolean;
   /**
    * The legend component to render with chart.
    *
@@ -357,6 +364,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   ariaDesc,
   ariaTitle,
   children,
+  legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
@@ -396,8 +404,8 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     ...legendComponent.props
   });
 
-  // Returns a wrapped legend
-  const getWrappedLegend = () => {
+  // Returns a computed legend
+  const getLegend = () => {
     if (!legend.props.data) {
       return null;
     }
@@ -420,20 +428,18 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
       dy += xAxisLabelHeight + legendTitleHeight;
       dx = -10;
     }
-    return (
-      <ChartLegendWrapper
-        chartType="chart"
-        dx={dx}
-        dy={dy}
-        height={height}
-        legendComponent={legend}
-        orientation={legendOrientation}
-        padding={defaultPadding}
-        position={legendPosition}
-        theme={theme}
-        width={width}
-      />
-    );
+    return getComputedLegend({
+      allowWrap: legendAllowWrap,
+      chartType: 'chart',
+      dx,
+      dy,
+      height,
+      legendComponent: legend,
+      padding: defaultPadding,
+      position: legendPosition,
+      theme,
+      width
+    });
   };
 
   return (
@@ -446,7 +452,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
       {...rest}
     >
       {children}
-      {getWrappedLegend()}
+      {getLegend()}
     </VictoryChart>
   );
 };

packages/patternfly-4/react-charts/src/components/ChartBullet/ChartBullet.tsx

@@ -21,10 +21,10 @@ import { ChartBulletPrimarySegmentedMeasure } from './ChartBulletPrimarySegmente
 import { ChartBulletQualitativeRange } from './ChartBulletQualitativeRange';
 import { ChartBulletTitle } from './ChartBulletTitle';
 import { ChartContainer } from '../ChartContainer';
-import { ChartLegend, ChartLegendOrientation, ChartLegendPosition, ChartLegendWrapper } from '../ChartLegend';
+import { ChartLegend, ChartLegendOrientation, ChartLegendPosition } from '../ChartLegend';
 import { ChartBulletStyles, ChartThemeDefinition } from '../ChartTheme';
 import { ChartTooltip } from '../ChartTooltip';
-import { getPaddingForSide } from '../ChartUtils';
+import { getComputedLegend, getPaddingForSide } from '../ChartUtils';
 
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -194,6 +194,13 @@ export interface ChartBulletProps {
    * of that point in the array of active points, and points is an array of all active points.
    */
   labels?: (point: any, index: number, points: any[]) => string;
+  /**
+   * Allows legend items to wrap. A value of true allows the legend to wrap onto the next line
+   * if its container is not wide enough.
+   *
+   * Note: This is overridden by the legendItemsPerRow property
+   */
+  legendAllowWrap?: boolean;
   /**
    * The legend component to render with chart.
    */
@@ -465,6 +472,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
   horizontal = true,
   invert = false,
   labels,
+  legendAllowWrap = false,
   legendComponent = <ChartLegend />,
   legendItemsPerRow,
   legendPosition = 'bottom' as ChartLegendPosition,
@@ -712,8 +720,8 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
     return tickValues;
   };
 
-  // Returns a wrapped legend
-  const getWrappedLegend = () => {
+  // Returns a computed legend
+  const getLegend = () => {
     if (!legend.props.data) {
       return null;
     }
@@ -735,20 +743,18 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
         : -defaultPadding.bottom;
       dx = -10;
     }
-    return (
-      <ChartLegendWrapper
-        chartType="bullet"
-        dx={dx}
-        dy={dy}
-        height={chartSize.height}
-        legendComponent={legend}
-        orientation={legendOrientation}
-        padding={padding}
-        position={legendPosition}
-        theme={theme}
-        width={chartSize.width}
-      />
-    );
+    return getComputedLegend({
+      allowWrap: legendAllowWrap,
+      chartType: 'bullet',
+      dx,
+      dy,
+      height: chartSize.height,
+      legendComponent: legend,
+      padding: defaultPadding,
+      position: legendPosition,
+      theme,
+      width: chartSize.width
+    });
   };
 
   // Returns comparative zero measure
@@ -799,7 +805,7 @@ export const ChartBullet: React.FunctionComponent<ChartBulletProps> = ({
       {comparativeErrorMeasure}
       {comparativeWarningMeasure}
       {getComparativeZeroMeasure()}
-      {getWrappedLegend()}
+      {getLegend()}
     </React.Fragment>
   );