fix(charts): update Victory to 30.0.0

CHANGES: In order to work with constrainToVisibleArea, removed the donutHeight/Width, & pieHeight/Width props — use padding prop. Replaced bulletHeight/Width with bulletSize. Fixes #2786
patternfly · Sep 10, 2019 · 888c7f5 · 888c7f5
1 parent f71e22b
commit 888c7f5
Show file tree

Hide file tree

Showing 112 changed files with 14,857 additions and 5,491 deletions.
diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json
@@ -29,7 +29,14 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/react-styles": "^3.5.22"
+    "hoist-non-react-statics": "^3.3.0",
+    "lodash": "^4.17.11",
+    "victory": "^33.0.5",
+    "victory-core": "^33.0.1",
+    "victory-legend": "^33.0.1",
+    "@patternfly/patternfly": "2.31.6",
+    "@patternfly/react-styles": "^3.5.22",
+    "@patternfly/react-tokens": "^2.6.26"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",
@@ -45,15 +52,6 @@
     "clean": "rimraf dist",
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps"
   },
-  "optionalDependencies": {
-    "@types/lodash": "^4.14.132",
-    "@types/victory": "^31.0.18",
-    "hoist-non-react-statics": "^3.3.0",
-    "lodash": "^4.17.11",
-    "victory": "^32.2.3",
-    "victory-core": "^32.2.3",
-    "victory-legend": "^32.2.3"
-  },
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
@@ -63,9 +61,8 @@
     "@babel/plugin-transform-typescript": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@patternfly/patternfly": "2.31.6",
-    "@patternfly/react-icons": "^3.14.2",
-    "@patternfly/react-tokens": "^2.6.26",
+    "@types/lodash": "^4.14.132",
+    "@types/victory": "^31.0.21",
     "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-typescript-to-proptypes": "^0.17.1",
     "css": "^2.2.3",

diff --git a/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx b/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx
@@ -23,7 +23,7 @@ import {
   ChartLegendWrapper
 } from '../ChartLegend';
 import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
-import { getLabelTextSize, getPaddingForSide, getTheme } from '../ChartUtils';
+import { getClassName, getLabelTextSize, getPaddingForSide, getTheme } from '../ChartUtils';
 
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -124,7 +124,7 @@ export interface ChartProps extends VictoryChartProps {
    * The mutation function will be called with the calculated props for the individual selected
    * element (i.e. a single bar), and the object returned from the mutation function
    * will override the props of the selected element via object assignment.
-   * @examples
+   * @example
    * events={[
    *   {
    *     target: "data",
@@ -167,9 +167,8 @@ export interface ChartProps extends VictoryChartProps {
    *
    * Because Victory renders responsive containers, the width and height props do not determine the width and
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
-   * pixels will depend on the size of the container the chart is rendered into.
-   *
-   * Typically, the parent container is set to the same width in order to maintain the aspect ratio.
+   * pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set
+   * to the same width in order to maintain the aspect ratio.
    */
   height?: number;
   /**
@@ -214,6 +213,9 @@ export interface ChartProps extends VictoryChartProps {
   legendOrientation?: 'horizontal' | 'vertical';
   /**
    * The legend position relation to the chart. Valid values are 'bottom', 'bottom-left', and 'right'
+   *
+   * Note: When adding a legend, padding may need to be adjusted in order to accommodate the extra legend. In some
+   * cases, the legend may not be visible until enough padding is applied.
    */
   legendPosition?: 'bottom' | 'bottom-left' | 'right';
   /**
@@ -350,9 +352,8 @@ export interface ChartProps extends VictoryChartProps {
    *
    * Because Victory renders responsive containers, the width and height props do not determine the width and
    * height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of
-   * pixels will depend on the size of the container the chart is rendered into.
-   *
-   * Typically, the parent container is set to the same width in order to maintain the aspect ratio.
+   * pixels will depend on the size of the container the chart is rendered into. Typically, the parent container is set
+   * to the same width in order to maintain the aspect ratio.
    */
   width?: number;
 }
@@ -362,7 +363,6 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
   ariaDesc,
   ariaTitle,
   children,
-  containerComponent = allowZoom ? <VictoryZoomContainer /> : <ChartContainer />,
   legendComponent = <ChartLegend/>,
   legendData,
   legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
@@ -373,6 +373,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
 
   // destructure last
   theme = getTheme(themeColor, themeVariant),
+  containerComponent = allowZoom ? <VictoryZoomContainer /> : <ChartContainer />,
   legendOrientation = theme.legend.orientation as ChartLegendOrientation,
   height = theme.chart.height,
   width = theme.chart.width,
@@ -385,16 +386,12 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     top: getPaddingForSide('top', padding, theme.chart.padding),
   };
 
-  const chartSize = {
-    height: Math.abs(height - (defaultPadding.bottom + defaultPadding.top)),
-    width: Math.abs(width - (defaultPadding.left + defaultPadding.right))
-  };
-
   const container = React.cloneElement(containerComponent, {
     desc: ariaDesc,
     title: ariaTitle,
     theme,
-    ...containerComponent.props
+    ...containerComponent.props,
+    className: getClassName({className: containerComponent.props.className}) // Override VictoryContainer class name
   });
 
   const legend = React.cloneElement(legendComponent, {
@@ -410,7 +407,7 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
       return null;
     }
     let dx = 0;
-    let dy = defaultPadding.top;
+    let dy = 0;
     let xAxisLabelHeight = 0;
     let legendTitleHeight = legend.props.title ? 10 : 0;
 
@@ -423,25 +420,22 @@ export const Chart: React.FunctionComponent<ChartProps> = ({
     });
 
     if (legendPosition === ChartLegendPosition.bottom) {
-      dy += ChartCommonStyles.legend.margin + xAxisLabelHeight + legendTitleHeight;
+      dy += xAxisLabelHeight + legendTitleHeight;
     } else if (legendPosition === ChartLegendPosition.bottomLeft) {
-      dy += ChartCommonStyles.legend.margin + xAxisLabelHeight + legendTitleHeight;
-      dx += defaultPadding.left - 10;
-    } else if (legendPosition === ChartLegendPosition.right) {
-      dx += defaultPadding.left;
+      dy += xAxisLabelHeight + legendTitleHeight;
+      dx = -10;
     }
     return (
       <ChartLegendWrapper
-        chartHeight={chartSize.height}
-        chartType="pie"
-        chartWidth={chartSize.width}
+        chartType="chart"
         dx={dx}
         dy={dy}
+        height={height}
         orientation={legendOrientation}
+        padding={defaultPadding}
         position={legendPosition}
-        svgHeight={height}
-        svgWidth={width}
         theme={theme}
+        width={width}
       >
         {legend}
       </ChartLegendWrapper>