diff --git a/src/BarChart/BarChart.js b/src/BarChart/BarChart.js
index 17c91478..56ea3479 100644
--- a/src/BarChart/BarChart.js
+++ b/src/BarChart/BarChart.js
@@ -1,21 +1,39 @@
import React, { PropTypes } from 'react';
import {
- BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar,
+BarChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, Bar,
} from 'recharts';
-const HorizontalBarChart = ({ data }) =>
-
-
-
-
-
-
-
-
- ;
+const HorizontalBarChart = ({ data, colors }) => {
+ const bars = [];
+
+ const myKeys = Object.keys(data[0]);
+ myKeys.forEach((key, index) => {
+ if (key !== 'name') {
+ bars.push();
+ }
+ });
+
+ return (
+
+
+
+
+
+
+
+ {bars}
+
+
+ );
+};
HorizontalBarChart.propTypes = {
- data: PropTypes.arrayOf(PropTypes.object),
+ data: PropTypes.arrayOf(PropTypes.object).isRequired,
+ colors: PropTypes.arrayOf(PropTypes.string).isRequired,
};
-export default HorizontalBarChart;
\ No newline at end of file
+export default HorizontalBarChart;
diff --git a/src/BarChart/BarChart.test.js b/src/BarChart/BarChart.test.js
new file mode 100644
index 00000000..c9add13f
--- /dev/null
+++ b/src/BarChart/BarChart.test.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import BarChart from './BarChart';
+
+describe('BarChart', () => {
+ const { data, colors } = {
+ data: [{ name: 'Year 1', Bar1: 6000, Bar2: 4000 },
+ { name: 'Year 2', Bar1: 3000, Bar2: 2000 }],
+ colors: ['#a6cee3', '#1f78b4'],
+ };
+
+ const wrapper = shallow(
+ ,
+ );
+
+ it('should render a div', () => {
+ expect(wrapper.find('div')).to.have.length(1);
+ });
+
+ it('should render a div with one child element', () => {
+ expect(wrapper.find('div').children()).to.have.length(1);
+ });
+
+ it('should render a div with one child element that itself has seven children elements', () => {
+ expect(wrapper.find('div').children().props().children).to.have.length(6);
+ });
+});
diff --git a/stories/BarChart.story.js b/stories/BarChart.story.js
index 0d7074e2..e88858ee 100644
--- a/stories/BarChart.story.js
+++ b/stories/BarChart.story.js
@@ -1,23 +1,36 @@
import React from 'react';
import { storiesOf } from '@kadira/storybook';
import { BarChart } from '../src';
+import { colors } from './shared';
const displayName = BarChart.displayName || 'BarChart';
const title = 'Simple usage';
const description = `
- This is some basic usage with the button with providing a label to show the text.
- Clicking should trigger an action.`;
+This is some basic usage with the BarChart.
+A legend includes bar titles.
+A tooltip includes each bar value at each X-axis point.`;
+
+const data = [
+{ name: 'Year 1', Bar1: 6000, Bar2: 4000 },
+{ name: 'Year 2', Bar1: 3000, Bar2: 2000 },
+{ name: 'Year 3', Bar1: 4000, Bar2: 3000 },
+{ name: 'Year 4', Bar1: 4500, Bar2: 3500 },
+{ name: 'Year 5', Bar1: 3500, Bar2: 3000 },
+];
const demoCode = () => (
-
+
);
const propDocs = { inline: true, propTables: [BarChart] };
export default () => storiesOf(displayName, module)
- .addWithInfo(
- title,
- description,
- demoCode,
- propDocs,
- );
\ No newline at end of file
+.addWithInfo(
+title,
+description,
+demoCode,
+propDocs,
+);