Merge 026b12b into bb29aa5

patternfly · Jun 4, 2019 · 0459a94 · 0459a94
2 parents bb29aa5 + 026b12b
commit 0459a94
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 9 deletions.
diff --git a/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx b/packages/patternfly-4/react-charts/src/components/Chart/Chart.tsx
@@ -11,7 +11,8 @@ import {
   StringOrNumberOrCallback,
   VictoryChart,
   VictoryChartProps,
-  VictoryStyleInterface
+  VictoryStyleInterface,
+  VictoryZoomContainer
 } from 'victory';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getTheme } from '../ChartUtils/chart-theme';
@@ -24,6 +25,14 @@ export interface ChartProps extends VictoryChartProps {
    * See Victory type docs: https://formidable.com/open-source/victory/docs/victory-area/
    */
   ' '?: any;
+  /**
+   * Specifies the zoom capability of the container component. A value of true allows the chart to
+   * zoom in and out. Zoom events are controlled by scrolling. When zoomed in, panning events are
+   * controlled by dragging. By default this value is set to false.
+   *
+   * Note: Only compatible with charts that display an x, y axis
+   */
+  allowZoom?: boolean;
   /**
    * The animate prop specifies props for VictoryAnimation to use.
    * The animate prop should also be used to specify enter and exit
@@ -288,13 +297,15 @@ export interface ChartProps extends VictoryChartProps {
 }
 
 export const Chart: React.FunctionComponent<ChartProps> = ({
+  allowZoom = false,
   children,
   themeColor,
   themeVariant,
   theme = getTheme(themeColor, themeVariant), // destructure last
+  containerComponent = allowZoom ? <VictoryZoomContainer /> : undefined,
   ...rest
 }: ChartProps) => (
-  <VictoryChart theme={theme} {...rest}>
+  <VictoryChart containerComponent={containerComponent} theme={theme} {...rest}>
     {children}
   </VictoryChart>
 );

diff --git a/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md b/packages/patternfly-4/react-charts/src/components/ChartBar/examples/ChartBar.md
@@ -46,14 +46,15 @@ import { Chart, ChartBar, ChartGroup } from '@patternfly/react-charts';
 </div>
 ```
 
-## Grouped Bar Chart with Light Multi-Color Theme
+## Multi-color bar chart with zoom
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartGroup, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 
 <div>
   <div className="bar-chart-container">
     <Chart
+      allowZoom={true}
       domainPadding={{ x: [30, 25] }}
       themeColor={ChartThemeColor.multi}
       themeVariant={ChartThemeVariant.light}
@@ -68,3 +69,24 @@ import { Chart, ChartBar, ChartGroup, ChartThemeColor, ChartThemeVariant } from
   </div>
 </div>
 ```
+
+## Multi-color bar chart with zoom no x,y axis
+```js
+import React from 'react';
+import { ChartBar, ChartGroup, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
+
+<div>
+  <div className="bar-chart-container">
+    <ChartGroup offset={11}
+      allowZoom={true}
+      domainPadding={{ x: [30, 25] }}
+      themeColor={ChartThemeColor.multi}
+      themeVariant={ChartThemeVariant.light}>
+      <ChartBar data={[{ x: 'Cats', y: 1 }, { x: 'Dogs', y: 2 }, { x: 'Birds', y: 5 }, { x: 'Mice', y: 3 }]} />
+      <ChartBar data={[{ x: 'Cats', y: 2 }, { x: 'Dogs', y: 1 }, { x: 'Birds', y: 7 }, { x: 'Mice', y: 4 }]} />
+      <ChartBar data={[{ x: 'Cats', y: 4 }, { x: 'Dogs', y: 4 }, { x: 'Birds', y: 9 }, { x: 'Mice', y: 7 }]} />
+      <ChartBar data={[{ x: 'Cats', y: 3 }, { x: 'Dogs', y: 3 }, { x: 'Birds', y: 8 }, { x: 'Mice', y: 5 }]} />
+    </ChartGroup>
+  </div>
+</div>
+```
diff --git a/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.tsx b/packages/patternfly-4/react-charts/src/components/ChartGroup/ChartGroup.tsx
@@ -15,7 +15,8 @@ import {
   StringOrNumberOrCallback,
   VictoryStyleInterface,
   VictoryGroup,
-  VictoryGroupProps
+  VictoryGroupProps,
+  VictoryZoomContainer
 } from 'victory';
 import { ChartThemeDefinition } from '../ChartTheme/ChartTheme';
 import { getTheme } from '../ChartUtils/chart-theme';
@@ -34,6 +35,14 @@ export interface ChartGroupProps extends VictoryGroupProps {
    * See Victory type docs: https://formidable.com/open-source/victory/docs/victory-group/
    */
   ' '?: any;
+  /**
+   * Specifies the zoom capability of the container component. A value of true allows the chart to
+   * zoom in and out. Zoom events are controlled by scrolling. When zoomed in, panning events are
+   * controlled by dragging. By default this value is set to false.
+   *
+   * Note: Only compatible with charts that display an x, y axis
+   */
+  allowZoom?: boolean;
   /**
    * The animate prop specifies props for VictoryAnimation to use.
    * The animate prop should also be used to specify enter and exit
@@ -383,13 +392,15 @@ export interface ChartGroupProps extends VictoryGroupProps {
 };
 
 export const ChartGroup: React.FunctionComponent<ChartGroupProps> = ({
+  allowZoom = false,
   children,
   themeColor,
   themeVariant,
   theme = getTheme(themeColor, themeVariant), // destructure last
+  containerComponent = allowZoom ? <VictoryZoomContainer /> : undefined,
   ...rest
 }: ChartGroupProps) => (
-  <VictoryGroup theme={theme} {...rest}>
+  <VictoryGroup containerComponent={containerComponent} theme={theme} {...rest}>
     {children}
   </VictoryGroup>
 );

diff --git a/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md b/packages/patternfly-4/react-charts/src/components/ChartLine/examples/ChartLine.md
@@ -5,18 +5,20 @@ typescript: true
 propComponents: ['Chart', 'ChartAxis', 'ChartGroup', 'ChartLegend', 'ChartLine']
 ---
 
-import { Chart, ChartAxis, ChartGroup, ChartLegend, ChartLine, ChartThemeColor } from '@patternfly/react-charts';
+import { Chart, ChartAxis, ChartGroup, ChartLegend, ChartLine, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
+import { VictoryZoomContainer } from 'victory';
 import './chart-line.scss';
 
-## Green line chart
+## Green line chart with zoom along x axis
 ```js
 import React from 'react';
 import { Chart, ChartAxis, ChartGroup, ChartLegend, ChartLine, ChartThemeColor } from '@patternfly/react-charts';
+import { VictoryZoomContainer } from 'victory';
 
 <div>
   <div className="line-chart-inline">
     <div className="line-chart-container">
-      <Chart themeColor={ChartThemeColor.green}>
+      <Chart themeColor={ChartThemeColor.green} containerComponent={<VictoryZoomContainer zoomDimension="x" />}>
         <ChartGroup>
           <ChartLine
             data={[

diff --git a/...ages/patternfly-4/react-charts/src/components/ChartStack/examples/ChartStack.md b/...ages/patternfly-4/react-charts/src/components/ChartStack/examples/ChartStack.md
@@ -27,14 +27,15 @@ import { Chart, ChartBar, ChartStack } from '@patternfly/react-charts';
 </div>
 ```
 
-## Vertical multi-color stack chart
+## Vertical multi-color stack chart with zoom
 ```js
 import React from 'react';
 import { Chart, ChartBar, ChartStack, ChartThemeColor, ChartThemeVariant } from '@patternfly/react-charts';
 
 <div>
   <div className="stack-chart-container">
     <Chart
+      allowZoom={true}
       themeColor={ChartThemeColor.multi}
       themeVariant={ChartThemeVariant.light}
     >