feat(charts): Add donut percentage & threshold charts

Fixes patternfly/patternfly#901
patternfly · May 23, 2019 · 31962a0 · 31962a0
1 parent 63ff308
commit 31962a0
Show file tree

Hide file tree

Showing 74 changed files with 7,938 additions and 3,415 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -50,4 +50,4 @@ module.exports = {
       tsConfig: "packages/patternfly-4/react-core/tsconfig.jest.json"
     }
   }
-};
+};
diff --git a/packages/patternfly-4/react-charts/package.json b/packages/patternfly-4/react-charts/package.json
@@ -44,10 +44,11 @@
     "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose --source-maps"
   },
   "optionalDependencies": {
-    "@types/victory": "^31.0.15",
+    "@types/victory": "^31.0.18",
     "hoist-non-react-statics": "^3.3.0",
-    "victory": "^32.2.0",
-    "victory-core": "^32.2.0"
+    "lodash": "^4.17.11",
+    "victory": "^32.2.3",
+    "victory-core": "^32.2.3"
   },
   "devDependencies": {
     "@patternfly/patternfly": "2.6.5",

diff --git a/packages/patternfly-4/react-charts/src/components/Chart/Chart.js b/packages/patternfly-4/react-charts/src/components/Chart/Chart.js
@@ -3,32 +3,40 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { VictoryChart } from 'victory';
-import { getTheme } from '../ChartTheme/themes/theme-utils';
+import { getTheme } from '../ChartUtils/chart-theme';
 
 export const propTypes = {
   /**
    * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-chart/
    */
   '': PropTypes.any,
   /**
-   * The height props specifies the height the svg viewBox of the chart container. This value should be given as a
+   * Specifies the height the svg viewBox of the chart container. This value should be given as a
    * number of pixels.
    *
    * 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.
    */
   height: PropTypes.number,
-  /*
-   * Specifies the theme color; blue (default), green, or multi-color. Overridden by the theme property.
+  /**
+   * Specifies the theme color. Valid values are 'blue', 'green', 'grey' (recomended), 'multi', etc.
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeColor={ChartThemeColor.blue}
    */
   themeColor: PropTypes.string,
-  /*
-   * Specifies the theme variant; 'dark' or 'light' (default). Overridden by the theme property.
+  /**
+   * Specifies the theme variant. Valid values are 'dark' or 'light'
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeVariant={ChartThemeVariant.light}
    */
   themeVariant: PropTypes.string,
   /**
-   * The width props specifies the width of the svg viewBox of the chart container. This value should be given as a
+   * Specifies the width of the svg viewBox of the chart container. This value should be given as a
    * number of pixels.
    *
    * Because Victory renders responsive containers, the width and height props do not determine the width and

diff --git a/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.js.snap b/packages/patternfly-4/react-charts/src/components/Chart/__snapshots__/Chart.test.js.snap
@@ -2188,7 +2188,7 @@ exports[`Chart 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -4787,7 +4787,7 @@ exports[`Chart 2`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -7392,7 +7392,7 @@ exports[`renders axis and component children 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,

diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.js b/packages/patternfly-4/react-charts/src/components/ChartArea/ChartArea.js
@@ -3,19 +3,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { VictoryArea } from 'victory';
-import { getTheme } from '../ChartTheme/themes/theme-utils';
+import { getTheme } from '../ChartUtils/chart-theme';
 
 export const propTypes = {
   /**
    * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-area/
    */
   '': PropTypes.any,
-  /*
-   * Specifies the theme color; blue (default), green, or multi-color. Overridden by the theme property.
+  /**
+   * Specifies the theme color. Valid values are 'blue', 'green', 'grey' (recomended), 'multi', etc.
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeColor={ChartThemeColor.blue}
    */
   themeColor: PropTypes.string,
-  /*
-   * Specifies the theme variant; 'dark' or 'light' (default). Overridden by the theme property.
+  /**
+   * Specifies the theme variant. Valid values are 'dark' or 'light'
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeVariant={ChartThemeVariant.light}
    */
   themeVariant: PropTypes.string
 };

diff --git a/...s/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.js.snap b/...s/patternfly-4/react-charts/src/components/ChartArea/__snapshots__/ChartArea.test.js.snap
@@ -80,7 +80,7 @@ exports[`Chart 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -571,7 +571,7 @@ exports[`Chart 2`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -1086,7 +1086,7 @@ exports[`renders component data 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,

diff --git a/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md b/packages/patternfly-4/react-charts/src/components/ChartArea/examples/ChartArea.md
@@ -69,6 +69,7 @@ class SimpleChart extends React.Component {
         <ChartLegend
           data={[{ name: 'Cats' }, { name: 'Dogs' }]}
           height={50}
+          responsive={false}
           title="Average number of pets"
           width={width}
         />
@@ -156,6 +157,7 @@ class CustomColorsChart extends React.Component {
           colorScale={[cats.data.fill, dogs.data.fill]}
           data={[{ name: 'Cats' }, { name: 'Dogs' }]}
           height={50}
+          responsive={false}
           title="Average number of pets"
           width={width}
         />

diff --git a/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js b/packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js
@@ -3,19 +3,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { VictoryAxis } from 'victory';
-import { getTheme } from '../ChartTheme/themes/theme-utils';
+import { getTheme } from '../ChartUtils/chart-theme';
 
 export const propTypes = {
   /**
-   * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-chart/
+   * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-axis/
    */
   '': PropTypes.any,
-  /*
-   * Specifies the theme color; blue (default), green, or multi-color. Overridden by the theme property.
+  /**
+   * Specifies the theme color. Valid values are 'blue', 'green', 'grey' (recomended), 'multi', etc.
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeColor={ChartThemeColor.blue}
    */
   themeColor: PropTypes.string,
-  /*
-   * Specifies the theme variant; 'dark' or 'light' (default). Overridden by the theme property.
+  /**
+   * Specifies the theme variant. Valid values are 'dark' or 'light'
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeVariant={ChartThemeVariant.light}
    */
   themeVariant: PropTypes.string
 };

diff --git a/...s/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap b/...s/patternfly-4/react-charts/src/components/ChartAxis/__snapshots__/ChartAxis.test.js.snap
@@ -80,7 +80,7 @@ exports[`ChartAxis 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -586,7 +586,7 @@ exports[`ChartAxis 2`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -3209,7 +3209,7 @@ exports[`renders component data 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,

diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.js b/packages/patternfly-4/react-charts/src/components/ChartBar/ChartBar.js
@@ -3,19 +3,27 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { VictoryBar } from 'victory';
-import { getTheme } from '../ChartTheme/themes/theme-utils';
+import { getTheme } from '../ChartUtils/chart-theme';
 
 export const propTypes = {
   /**
    * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-bar/
    */
   '': PropTypes.any,
-  /*
-   * Specifies the theme color; blue (default), green, or multi-color. Overridden by the theme property.
+  /**
+   * Specifies the theme color. Valid values are 'blue', 'green', 'grey' (recomended), 'multi', etc.
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeColor={ChartThemeColor.blue}
    */
   themeColor: PropTypes.string,
-  /*
-   * Specifies the theme variant; 'dark' or 'light' (default). Overridden by the theme property.
+  /**
+   * Specifies the theme variant. Valid values are 'dark' or 'light'
+   *
+   * Note: Not compatible with theme prop
+   *
+   * @example themeVariant={ChartThemeVariant.light}
    */
   themeVariant: PropTypes.string
 };

diff --git a/...ges/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.js.snap b/...ges/patternfly-4/react-charts/src/components/ChartBar/__snapshots__/ChartBar.test.js.snap
@@ -95,7 +95,7 @@ exports[`Chart 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -601,7 +601,7 @@ exports[`Chart 2`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,
@@ -3209,7 +3209,7 @@ exports[`renders component data 1`] = `
         "style": Object {
           "axis": Object {
             "fill": "transparent",
-            "stroke": "#D1D1D1",
+            "stroke": "#D2D2D2",
             "strokeLinecap": "round",
             "strokeLinejoin": "round",
             "strokeWidth": 1,

diff --git a/...ly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.js.snap b/...ly-4/react-charts/src/components/ChartContainer/__snapshots__/ChartContainer.test.js.snap
@@ -13,7 +13,7 @@ exports[`Chart 1`] = `
         },
         Object {
           "fill": "#bbb",
-          "fontSize": 18,
+          "fontSize": 16,
         },
       ]
     }
@@ -107,7 +107,7 @@ exports[`Chart 1`] = `
               "style": Object {
                 "axis": Object {
                   "fill": "transparent",
-                  "stroke": "#D1D1D1",
+                  "stroke": "#D2D2D2",
                   "strokeLinecap": "round",
                   "strokeLinejoin": "round",
                   "strokeWidth": 1,
@@ -562,7 +562,7 @@ exports[`Chart 1`] = `
           "style": Object {
             "axis": Object {
               "fill": "transparent",
-              "stroke": "#D1D1D1",
+              "stroke": "#D2D2D2",
               "strokeLinecap": "round",
               "strokeLinejoin": "round",
               "strokeWidth": 1,
@@ -989,7 +989,7 @@ exports[`Chart 2`] = `
         },
         Object {
           "fill": "#bbb",
-          "fontSize": 18,
+          "fontSize": 16,
         },
       ]
     }
@@ -1083,7 +1083,7 @@ exports[`Chart 2`] = `
               "style": Object {
                 "axis": Object {
                   "fill": "transparent",
-                  "stroke": "#D1D1D1",
+                  "stroke": "#D2D2D2",
                   "strokeLinecap": "round",
                   "strokeLinejoin": "round",
                   "strokeWidth": 1,
@@ -1538,7 +1538,7 @@ exports[`Chart 2`] = `
           "style": Object {
             "axis": Object {
               "fill": "transparent",
-              "stroke": "#D1D1D1",
+              "stroke": "#D2D2D2",
               "strokeLinecap": "round",
               "strokeLinejoin": "round",
               "strokeWidth": 1,
@@ -1965,7 +1965,7 @@ exports[`renders container via ChartLegend 1`] = `
         },
         Object {
           "fill": "#bbb",
-          "fontSize": 18,
+          "fontSize": 16,
         },
       ]
     }
@@ -2046,7 +2046,7 @@ exports[`renders container via ChartLegend 1`] = `
               "style": Object {
                 "axis": Object {
                   "fill": "transparent",
-                  "stroke": "#D1D1D1",
+                  "stroke": "#D2D2D2",
                   "strokeLinecap": "round",
                   "strokeLinejoin": "round",
                   "strokeWidth": 1,
@@ -2501,7 +2501,7 @@ exports[`renders container via ChartLegend 1`] = `
           "style": Object {
             "axis": Object {
               "fill": "transparent",
-              "stroke": "#D1D1D1",
+              "stroke": "#D2D2D2",
               "strokeLinecap": "round",
               "strokeLinejoin": "round",
               "strokeWidth": 1,