From 4f888bc8b1f149e060ef123bdbdf9581f2cca357 Mon Sep 17 00:00:00 2001
From: drabelpdx <drabelpdx@gmail.com>
Date: Tue, 11 Apr 2017 08:38:41 -0700
Subject: [PATCH 1/2] Updates BarChart to take multiple bars and colors like
 AreaChart and RechartsPie. Also adds tests for BarChart.

---
 src/BarChart/BarChart.js      | 44 ++++++++++++++++++++++++-----------
 src/BarChart/BarChart.test.js | 30 ++++++++++++++++++++++++
 stories/BarChart.story.js     | 31 +++++++++++++++++-------
 3 files changed, 83 insertions(+), 22 deletions(-)
 create mode 100644 src/BarChart/BarChart.test.js

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 }) =>
-  <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;
\ 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..81205df3
--- /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(
+    <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(7);
+  });
+});
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 = () => (
-  <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,
-  );
\ No newline at end of file
+.addWithInfo(
+title,
+description,
+demoCode,
+propDocs,
+);

From af6a052c2b31db20fecf8247e2196063a5238a30 Mon Sep 17 00:00:00 2001
From: drabelpdx <drabelpdx@gmail.com>
Date: Tue, 11 Apr 2017 08:54:55 -0700
Subject: [PATCH 2/2] Update to BarChart.test.js

---
 src/BarChart/BarChart.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BarChart/BarChart.test.js b/src/BarChart/BarChart.test.js
index 81205df3..c9add13f 100644
--- a/src/BarChart/BarChart.test.js
+++ b/src/BarChart/BarChart.test.js
@@ -25,6 +25,6 @@ describe('BarChart', () => {
   });
 
   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(7);
+    expect(wrapper.find('div').children().props().children).to.have.length(6);
   });
 });