Merge upstream

.circleci/config.yml

@@ -218,8 +218,11 @@ jobs:
     - image: circleci/node:8.15
     steps:
     - *attach_workspace
+    - restore_cache:
+        keys:
+        - *js_deps_cache_key
     - run:
-        name: Avoid hosts unknown for github
+        name: Avoid Unknown Host for github.com
         command: mkdir ~/.ssh/ && echo -e "Host github.com\n\tStrictHostKeyChecking no\n" > ~/.ssh/config
     - run:
         name: Deploy to NPM and Github

.circleci/release.sh

@@ -13,4 +13,4 @@ echo "Doing a release..."
 # Lerna is complicated. Commands: https://github.com/lerna/lerna/tree/master/commands
 # Identify packages that have been updated since the previous tagged release
 # Update their versions and changelogs
-npx lerna publish --conventional-commits --create-release=github --yes
+yarn run lerna publish --conventional-commits --create-release=github --yes

packages/patternfly-4/react-charts/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.4.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.3...@patternfly/react-charts@4.4.4) (2019-06-25)
+
+**Note:** Version bump only for package @patternfly/react-charts
+
+
+
+
+
+## [4.4.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.2...@patternfly/react-charts@4.4.3) (2019-06-25)
+
+
+### Bug Fixes
+
+* **charts:** ensure thresholds are sorted ([#2341](https://github.com/patternfly/patternfly-react/issues/2341)) ([f44d4c5](https://github.com/patternfly/patternfly-react/commit/f44d4c5))
+
+
+
+
+
 ## [4.4.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-charts@4.4.1...@patternfly/react-charts@4.4.2) (2019-06-21)
 
 **Note:** Version bump only for package @patternfly/react-charts

packages/patternfly-4/react-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-charts",
-  "version": "4.4.2",
+  "version": "4.4.4",
   "description": "This library provides a set of React chart components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",

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

@@ -14,8 +14,14 @@ import {
   VictoryStyleInterface,
   VictoryZoomContainer
 } from 'victory';
-import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
-import { getTheme } from '../ChartUtils/chart-theme';
+import {
+  ChartLegend,
+  ChartLegendOrientation,
+  ChartLegendPosition,
+  ChartLegendWrapper
+} from "../ChartLegend";
+import { ChartCommonStyles, ChartThemeDefinition } from '../ChartTheme';
+import { getTheme } from '../ChartUtils';
 
 /**
  * See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts
@@ -157,6 +163,38 @@ export interface ChartProps extends VictoryChartProps {
    * When the innerRadius prop is set, polar charts will be hollow rather than circular.
    */
   innerRadius?: number;
+  /**
+   * The legend component to render with chart.
+   *
+   * Note: Use legendData so the legend width can be calculated and positioned properly.
+   * Default legend properties may be applied
+   */
+  legendComponent?: React.ReactElement<any>;
+  /**
+   * The data prop specifies the data to be plotted,
+   * where data X-value is the slice label (string or number),
+   * and Y-value is the corresponding number value represented by the slice
+   * Data should be in the form of an array of data points.
+   * Each data point may be any format you wish (depending on the `x` and `y` accessor props),
+   * but by default, an object with x and y properties is expected.
+   *
+   * @example legendData={[{ name: `GBps capacity - 45%` }, { name: 'Unused' }]}
+   */
+  legendData?: any[];
+  /**
+   * The orientation prop takes a string that defines whether legend data
+   * are displayed in a row or column. When orientation is "horizontal",
+   * legend items will be displayed in a single row. When orientation is
+   * "vertical", legend items will be displayed in a single column. Line
+   * and text-wrapping is not currently supported, so "vertical"
+   * orientation is both the default setting and recommended for
+   * displaying many series of data.
+   */
+  legendOrientation?: 'horizontal' | 'vertical';
+  /**
+   * The legend position relation to the area chart. Valid values are 'bottom' and 'right'
+   */
+  legendPosition?: 'bottom' | 'right';
   /**
    * The maxDomain prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum
    * domain of a chart is static, while the minimum value depends on data or other variable information. If the domain
@@ -299,15 +337,88 @@ export interface ChartProps extends VictoryChartProps {
 export const Chart: React.FunctionComponent<ChartProps> = ({
   allowZoom = false,
   children,
+  containerComponent = allowZoom ? <VictoryZoomContainer /> : undefined,
+  legendData,
+  legendPosition = ChartCommonStyles.legend.position as ChartLegendPosition,
+  padding = {},
+  standalone = true,
   themeColor,
   themeVariant,
-  theme = getTheme(themeColor, themeVariant), // destructure last
-  containerComponent = allowZoom ? <VictoryZoomContainer /> : undefined,
+
+  // destructure last
+  theme = getTheme(themeColor, themeVariant),
+  legendOrientation = theme.legend.orientation as ChartLegendOrientation,
+  legendComponent = <ChartLegend data={legendData} orientation={legendOrientation} theme={theme} />,
+  height = theme.chart.height,
+  width = theme.chart.width,
   ...rest
-}: ChartProps) => (
-  <VictoryChart containerComponent={containerComponent} theme={theme} {...rest}>
-    {children}
-  </VictoryChart>
-);
+}: ChartProps) => {
+  const defaultPadding = {
+    bottom: theme.chart.padding,
+    left: theme.chart.padding,
+    top: theme.chart.padding,
+    right: theme.chart.padding,
+    ...(padding as any)
+  };
+
+  const chartSize = {
+    height: Math.abs(height - (defaultPadding.bottom + defaultPadding.top)),
+    width: Math.abs(width - (defaultPadding.left + defaultPadding.right))
+  };
+
+  const getLegendComponent = () => {
+    const legendProps = legendComponent.props ? legendComponent.props : {};
+    return React.cloneElement(legendComponent as React.ReactElement<any>, {
+      data: legendData,
+      orientation: legendOrientation,
+      theme,
+      ...legendProps
+    });
+  };
+
+  // Returns a legend
+  const getLegend = () => {
+    if (!legendComponent.props.data) {
+      return null;
+    }
+    let dx = 0;
+    let dy = defaultPadding.top || 0;
+    if (legendPosition === ChartLegendPosition.bottom) {
+      dy += ChartCommonStyles.legend.margin;
+    } else if (legendPosition === ChartLegendPosition.right) {
+      dx += defaultPadding.left;
+    }
+    return (
+      <ChartLegendWrapper
+        chartHeight={chartSize.height}
+        chartType="pie"
+        chartWidth={chartSize.width}
+        dx={dx}
+        dy={dy}
+        orientation={legendOrientation}
+        position={legendPosition}
+        svgHeight={height}
+        svgWidth={width}
+        theme={theme}
+      >
+        {getLegendComponent()}
+      </ChartLegendWrapper>
+    );
+  };
+
+  return (
+    <VictoryChart
+      containerComponent={containerComponent}
+      height={height}
+      padding={defaultPadding}
+      theme={theme}
+      width={width}
+      {...rest}
+    >
+      {children}
+      {getLegend()}
+    </VictoryChart>
+  );
+};
 
 hoistNonReactStatics(Chart, VictoryChart);

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

@@ -2145,6 +2145,15 @@ exports[`Chart 1`] = `
     }
   }
   groupComponent={<g />}
+  height={300}
+  padding={
+    Object {
+      "bottom": 50,
+      "left": 50,
+      "right": 50,
+      "top": 50,
+    }
+  }
   standalone={true}
   theme={
     Object {
@@ -2611,6 +2620,7 @@ exports[`Chart 1`] = `
       },
     }
   }
+  width={450}
 />
 `;
 
@@ -4759,6 +4769,15 @@ exports[`Chart 2`] = `
     }
   }
   groupComponent={<g />}
+  height={300}
+  padding={
+    Object {
+      "bottom": 50,
+      "left": 50,
+      "right": 50,
+      "top": 50,
+    }
+  }
   standalone={true}
   theme={
     Object {
@@ -5225,6 +5244,7 @@ exports[`Chart 2`] = `
       },
     }
   }
+  width={450}
 />
 `;
 
@@ -7379,6 +7399,14 @@ exports[`renders axis and component children 1`] = `
       "y": 0,
     }
   }
+  padding={
+    Object {
+      "bottom": 50,
+      "left": 50,
+      "right": 50,
+      "top": 50,
+    }
+  }
   standalone={true}
   theme={
     Object {

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

@@ -16,8 +16,8 @@ import {
   VictoryArea,
   VictoryAreaProps
 } from 'victory';
-import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
-import { getTheme } from '../ChartUtils/chart-theme';
+import { ChartThemeDefinition } from '../ChartTheme';
+import { getTheme } from '../ChartUtils';
 
 export enum ChartAreaSortOrder {
   ascending = 'ascending',
@@ -81,7 +81,7 @@ export interface ChartAreaProps extends VictoryAreaProps {
    * or modified or ignored within the custom component itself. If a dataComponent is
    * not provided, ChartArea will use its default Area component.
    */
-  dataComponent?: React.ReactElement;
+  dataComponent?: React.ReactElement<any>;
   /**
    * The domain prop describes the range of values your chart will cover. This prop can be
    * given as a array of the minimum and maximum expected values for your bar chart,