feat: バーチャートを追加した。

package.json

@@ -6,6 +6,7 @@
     "moment": "^2.24.0",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-nvd3": "^0.5.7",
     "react-pure-lifecycle": "^3.0.0",
     "react-redux": "^7.1.1",
     "react-scripts": "3.2.0",

src/l2_molecules/chart/bar_chart.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import NVD3Chart from 'react-nvd3'
+
+const datum = [{
+  key: 'Cumulative Return',
+  values: [
+    {
+      'label' : 'A' ,
+      'value' : -29.765957771107
+    } ,
+    {
+      'label' : 'B' ,
+      'value' : 0
+    } ,
+    {
+      'label' : 'C' ,
+      'value' : 32.807804682612
+    } ,
+    {
+      'label' : 'D' ,
+      'value' : 196.45946739256
+    } ,
+    {
+      'label' : 'E' ,
+      'value' : 0.19434030906893
+    } ,
+    {
+      'label' : 'F' ,
+      'value' : -98.079782601442
+    } ,
+    {
+      'label' : 'G' ,
+      'value' : -13.925743130903
+    } ,
+    {
+      'label' : 'H' ,
+      'value' : -5.1387322875705
+    }
+  ]
+}
+]
+
+export const BarChartPure = ({id, className, ...props}) =>
+  <div className={className}>
+    <NVD3Chart
+      id        = "barChart"
+      type      = "discreteBarChart"
+      datum     = {datum}
+      x         = "label"
+      y         = "value"
+    />
+  </div>
+
+BarChartPure.propTypes = {
+  className:    PropTypes.string,
+  id:           PropTypes.string
+}
+
+const BarChart = styled(BarChartPure)`
+    display:                flex;
+    justify-content:        center;
+`
+
+export default BarChart

src/l2_molecules/chart/chart.stories.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import {storiesOf} from '@storybook/react'
+import {action} from '@storybook/addon-actions'
+import Frame from '~/l1_atoms/frame'
+import BarChart from './bar_chart'
+
+storiesOf('l2_molecules', module)
+  .add('チャート部品', () =>
+    <Frame>
+      <h2>バーチャートのサンプル</h2>
+      <BarChart />
+    </Frame>
+  , {
+    info: {
+      inline: true,
+      header: false,
+      text: `
+        横幅は上位の DIV で設定して利用する。
+        `
+    }
+  })