Add ChartAxis

ChartAxis is a wrapper for VictoryAxis, which allows users to customize chart tic labels along the x/y axis.

packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.d.ts

@@ -0,0 +1,7 @@
+import * as victory from 'victory';
+
+export interface ChartAxisProps extends victory.VictoryAxisProps {}
+
+declare const ChartAxis: React.ComponentClass<ChartAxisProps>;
+
+export default ChartAxis;

packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import hoistNonReactStatics from 'hoist-non-react-statics';
+import { VictoryAxis } from 'victory';
+import { default as ChartTheme } from '../ChartTheme/ChartTheme';
+
+export const propTypes = {
+  /**
+   * See TypeScript API docs: https://formidable.com/open-source/victory/docs/victory-chart/
+   */
+  '': PropTypes.any
+};
+
+const ChartAxis = (props) => (
+  <VictoryAxis theme={ChartTheme.default} {...props}/>
+);
+hoistNonReactStatics(ChartAxis, VictoryAxis);
+ChartAxis.propTypes = propTypes;
+
+export default ChartAxis;

packages/patternfly-4/react-charts/src/components/ChartAxis/ChartAxis.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Chart from '../Chart/Chart';
+import ChartAxis from './ChartAxis';
+import ChartGroup from '../ChartGroup/ChartGroup';
+import ChartLine from '../ChartLine/ChartLine';
+
+Object.values([true, false]).forEach(isRead => {
+  test(`ChartAxis`, () => {
+    const view = shallow(<ChartAxis/>);
+    expect(view).toMatchSnapshot();
+  });
+});
+
+test('renders component data', () => {
+  const view = shallow(
+    <Chart
+      domainPadding={{ x: [30, 25] }}
+      height={200}
+      width={300}
+    >
+      <ChartGroup>
+        <ChartLine data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }, { x: 4, y: 3 }]} />
+        <ChartLine data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }, { x: 4, y: 4 }]} />
+        <ChartLine data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }, { x: 4, y: 5 }]} />
+        <ChartLine data={[{ x: 1, y: 3 }, { x: 2, y: 3 }, { x: 3, y: 8 }, { x: 4, y: 7 }]} />
+    </ChartGroup>
+    <ChartAxis tickValues={[2, 3, 4]} />
+    <ChartAxis dependentAxis tickValues={[2, 5, 8]} />
+  </Chart>
+);
+  expect(view).toMatchSnapshot();
+});
+