Barchart Update

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 }) =>
-  <BarChart layout="horizontal" width={730} height={250} data={data}>
-    <XAxis dataKey="name" />
-    <YAxis />
-    <CartesianGrid strokeDasharray="3 3" />
-    <Tooltip />
-    <Legend />
-    <Bar dataKey="x" fill="#8884d8" />
-    <Bar dataKey="y" fill="#82ca9d" />
-  </BarChart>;
+const HorizontalBarChart = ({ data, colors }) => {
+  const bars = [];
+
+  const myKeys = Object.keys(data[0]);
+  myKeys.forEach((key, index) => {
+    if (key !== 'name') {
+      bars.push(<Bar
+        key={`${myKeys[index]}`}
+        dataKey={`${myKeys[index]}`}
+        fill={colors[index]}
+      />);
+    }
+  });
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-around', margin: 'auto' }} >
+      <BarChart layout="horizontal" width={730} height={250} data={data}>
+        <XAxis dataKey="name" />
+        <YAxis />
+        <CartesianGrid strokeDasharray="3 3" />
+        <Tooltip />
+        <Legend />
+        {bars}
+      </BarChart>
+    </div>
+  );
+};
 
 HorizontalBarChart.propTypes = {
-  data: PropTypes.arrayOf(PropTypes.object),
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
 };
 
-export default HorizontalBarChart;
+export default HorizontalBarChart;

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(
+    <BarChart
+      data={data}
+      colors={colors}
+    />,
+  );
+
+  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);
+  });
+});

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 = () => (
-  <BarChart data={[{ name: 'David', x: 200, y: 300 }]} />
+  <BarChart
+    data={data}
+    colors={colors}
+  />
 );
 
 const propDocs = { inline: true, propTables: [BarChart] };
 
 export default () => storiesOf(displayName, module)
-  .addWithInfo(
-    title,
-    description,
-    demoCode,
-    propDocs,
-  );
+.addWithInfo(
+title,
+description,
+demoCode,
+propDocs,
+);