Merge pull request #72 from loeck/master

Add recharts
7 years ago · d734ca7fd3
14 changed files with 582 additions and 237 deletions
--- a/.babelrc
+++ b/.babelrc
@ -13,5 +13,5 @@
    "react",
    "stage-0"
  ],
-  "plugins": [["module-resolver", { "root": ["src"] }]]
+  "plugins": [["module-resolver", { "root": ["src"] }], "recharts"]
 }
--- a/.eslintrc
+++ b/.eslintrc
@ -9,6 +9,7 @@
    "__SENTRY_URL__": false,
    "__static": false,
    "window": false,
+    "ResizeObserver": false,
  },
  "rules": {
    "camelcase": 0,
--- a/flow-defs/globals.js
+++ b/flow-defs/globals.js
@ -5,3 +5,5 @@ declare var __PROD__: boolean
 declare var __ENV__: string
 declare var __SENTRY_URL__: string
 declare var __static: string
+
+declare var ResizeObserver: Class<any>
--- a/package.json
+++ b/package.json
@ -54,14 +54,14 @@
    "bs58check": "^2.1.1",
    "color": "^3.0.0",
    "cross-env": "^5.1.3",
-    "downshift": "^1.27.0",
+    "downshift": "^1.27.1",
    "electron-store": "^1.3.0",
    "electron-updater": "^2.20.1",
    "fuse.js": "^3.2.0",
    "history": "^4.7.2",
    "i18next": "^10.2.2",
    "i18next-node-fs-backend": "^1.0.0",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.5",
    "moment": "^2.20.1",
    "object-path": "^0.11.4",
    "qrcode": "^1.2.0",
@ -78,26 +78,28 @@
    "react-router-dom": "^4.2.2",
    "react-router-redux": "5.0.0-alpha.9",
    "react-smooth-scrollbar": "^8.0.6",
+    "recharts": "^1.0.0-beta.10",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1",
    "redux-thunk": "^2.2.0",
    "shortid": "^2.2.8",
    "smooth-scrollbar": "^8.2.5",
    "source-map-support": "^0.5.3",
-    "styled-components": "^3.1.5",
-    "styled-system": "^1.1.1"
+    "styled-components": "^3.1.6",
+    "styled-system": "^1.1.4"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "^3.3.11",
-    "@storybook/addon-knobs": "^3.3.11",
-    "@storybook/addon-links": "^3.3.11",
-    "@storybook/addon-options": "^3.3.11",
-    "@storybook/addons": "^3.3.11",
-    "@storybook/react": "^3.3.11",
+    "@storybook/addon-actions": "^3.3.12",
+    "@storybook/addon-knobs": "^3.3.12",
+    "@storybook/addon-links": "^3.3.12",
+    "@storybook/addon-options": "^3.3.12",
+    "@storybook/addons": "^3.3.12",
+    "@storybook/react": "^3.3.12",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-module-resolver": "^3.0.0",
+    "babel-plugin-recharts": "^1.1.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
@ -109,7 +111,7 @@
    "electron-builder": "^19.55.3",
    "electron-devtools-installer": "^2.2.3",
    "electron-webpack": "1.12.1",
-    "eslint": "^4.16.0",
+    "eslint": "^4.17.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-config-prettier": "^2.9.0",
    "eslint-import-resolver-babel-module": "^4.0.0",
--- a/src/components/DashboardPage.js
+++ b/src/components/DashboardPage.js
@ -4,21 +4,22 @@ import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { connect } from 'react-redux'
-import chunk from 'lodash/chunk'
 import { push } from 'react-router-redux'

-import { MODAL_ADD_ACCOUNT } from 'constants'
+import chunk from 'lodash/chunk'
+import random from 'lodash/random'
+import takeRight from 'lodash/takeRight'

 import type { MapStateToProps } from 'react-redux'
-import type { Accounts, T } from 'types/common'
+import type { Accounts } from 'types/common'

 import { formatBTC } from 'helpers/format'

-import { openModal } from 'reducers/modals'
 import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'

 import Box, { Card } from 'components/base/Box'
 import Text from 'components/base/Text'
+import { AreaChart, BarChart } from 'components/base/Chart'
 import Select from 'components/base/Select'
 import Tabs from 'components/base/Tabs'

@ -29,37 +30,96 @@ const mapStateToProps: MapStateToProps<*, *, *> = state => ({

 const mapDispatchToProps = {
  push,
-  openModal,
 }

 type Props = {
-  t: T,
  accounts: Accounts,
  push: Function,
-  openModal: Function,
  totalBalance: number,
 }

 type State = {
  tab: number,
+  datas: Object,
 }

+const ACCOUNTS_BY_LINE = 3
+const TIMEOUT_REFRESH_DATAS = 5e3
+
 const itemsTimes = [
  { key: 'week', name: 'Last week' },
  { key: 'month', name: 'Last month' },
  { key: 'year', name: 'Last year' },
 ]

+const generateData = v => ({
+  name: `Day ${v}`,
+  value: random(10, 100),
+})
+
 class DashboardPage extends PureComponent<Props, State> {
  state = {
    tab: 0,
+    datas: this.generateDatas(),
+  }
+
+  componentDidMount() {
+    this.addDatasOnAccounts()
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timeout)
+  }
+
+  getAccountsChunk() {
+    const { accounts } = this.props
+
+    const listAccounts = Object.values(accounts)
+
+    while (listAccounts.length % ACCOUNTS_BY_LINE !== 0) listAccounts.push(null)
+
+    return chunk(listAccounts, ACCOUNTS_BY_LINE)
+  }
+
+  generateDatas() {
+    const { accounts } = this.props
+
+    return Object.keys(accounts).reduce((result, key) => {
+      result[key] = [...Array(25).keys()].map(v => generateData(v + 1))
+
+      return result
+    }, {})
+  }
+
+  addDatasOnAccounts = () => {
+    this._timeout = setTimeout(() => {
+      const { accounts } = this.props
+
+      this.setState(prev => ({
+        datas: {
+          ...Object.keys(accounts).reduce((result, key) => {
+            if (result[key]) {
+              const nextIndex = result[key].length
+
+              result[key][nextIndex] = generateData(nextIndex)
+            }
+
+            return result
+          }, prev.datas),
+        },
+      }))
+
+      this.addDatasOnAccounts()
+    }, TIMEOUT_REFRESH_DATAS)
  }

  handleChangeTab = tab => this.setState({ tab })

+  _timeout = undefined
+
  render() {
-    const { t, totalBalance, openModal, push, accounts } = this.props
-    const { tab } = this.state
+    const { totalBalance, push, accounts } = this.props
+    const { tab, datas } = this.state

    const totalAccounts = Object.keys(accounts).length

@ -107,42 +167,56 @@ class DashboardPage extends PureComponent<Props, State> {
            ]}
          />
        </Card>
+        <Card flow={3} p={0}>
+          <AreaChart
+            height={250}
+            data={takeRight(
+              Object.keys(datas).reduce((result, key) => {
+                const data = datas[key]
+
+                data.forEach((d, i) => {
+                  result[i] = {
+                    name: d.name,
+                    value: (result[i] ? result[i].value : 0) + d.value,
+                  }
+                })
+
+                return result
+              }, []),
+              25,
+            )}
+          />
+        </Card>
        <Box flow={3}>
-          {chunk([...Object.keys(accounts), MODAL_ADD_ACCOUNT], 3).map((line, i) => (
+          {this.getAccountsChunk().map((accountsByLine, i) => (
            <Box
              key={i} // eslint-disable-line react/no-array-index-key
              horizontal
              flow={3}
            >
-              {line.map(
-                key =>
-                  key === MODAL_ADD_ACCOUNT ? (
+              {accountsByLine.map(
+                (account: any, j) =>
+                  account === null ? (
                    <Box
-                      key={key}
-                      p={3}
+                      key={j} // eslint-disable-line react/no-array-index-key
+                      p={2}
                      flex={1}
-                      borderWidth={2}
-                      align="center"
-                      justify="center"
-                      borderColor="mouse"
-                      style={{ borderStyle: 'dashed', cursor: 'pointer', textAlign: 'center' }}
-                      onClick={() => openModal(MODAL_ADD_ACCOUNT)}
-                    >
-                      {`+ ${t('addAccount.title')}`}
-                    </Box>
+                    />
                  ) : (
                    <Card
-                      key={key}
+                      key={account.id}
+                      p={2}
                      flex={1}
-                      style={{ cursor: 'pointer', height: 200 }}
-                      onClick={() => push(`/account/${key}`)}
+                      style={{ cursor: 'pointer' }}
+                      onClick={() => push(`/account/${account.id}`)}
                    >
                      <Box>
-                        <Text fontWeight="bold">{accounts[key].name}</Text>
+                        <Text fontWeight="bold">{account.name}</Text>
                      </Box>
                      <Box grow align="center" justify="center">
-                        {accounts[key].data && formatBTC(accounts[key].data.balance)}
+                        {account.data && formatBTC(account.data.balance)}
                      </Box>
+                      <BarChart height={100} data={takeRight(datas[account.id], 25)} />
                    </Card>
                  ),
              )}
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@ -0,0 +1,140 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import {
+  AreaChart as ReactAreaChart,
+  BarChart as ReactBarChart,
+  Bar,
+  Area,
+  XAxis,
+  CartesianGrid,
+  Tooltip,
+} from 'recharts'
+
+import Box from 'components/base/Box'
+
+const ANIMATION_DURATION = 1000
+
+type Props = {
+  render: Function,
+}
+
+type State = {
+  isAnimationActive: boolean,
+  width: number,
+}
+
+class Container extends PureComponent<Props, State> {
+  state = {
+    isAnimationActive: true,
+    width: 0,
+  }
+
+  componentDidMount() {
+    this._timeout = setTimeout(
+      () =>
+        this.setState({
+          isAnimationActive: false,
+        }),
+      ANIMATION_DURATION * 2,
+    )
+
+    if (this._node) {
+      this._ro = new ResizeObserver(entries =>
+        entries.forEach(entry => {
+          if (this._node === entry.target) {
+            this.setState({
+              width: entry.contentRect.width,
+            })
+          }
+        }),
+      )
+
+      this._ro.observe(this._node)
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timeout)
+
+    if (this._ro) {
+      this._ro.disconnect()
+    }
+  }
+
+  _ro = undefined
+  _node = undefined
+  _timeout = undefined
+
+  render() {
+    const { render } = this.props
+    const { isAnimationActive, width } = this.state
+    return <Box innerRef={n => (this._node = n)}>{render({ isAnimationActive, width })}</Box>
+  }
+}
+
+export const AreaChart = ({ height, data }: { height: number, data: Array<Object> }) => (
+  <Container
+    render={({ width }) => (
+      <ReactAreaChart
+        width={width}
+        height={height}
+        data={data}
+        margin={{ top: 10, right: 0, left: 0, bottom: 10 }}
+      >
+        <defs>
+          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="5%" stopColor="#5286f7" stopOpacity={0.3} />
+            <stop offset="65%" stopColor="#5286f7" stopOpacity={0} />
+          </linearGradient>
+        </defs>
+        <XAxis
+          dataKey="name"
+          stroke="#d2d3d5"
+          tickLine={false}
+          interval={2}
+          tick={({ x, y, index, payload, visibleTicksCount }) => {
+            const { value } = payload
+
+            if (index !== 0 && index !== visibleTicksCount - 1) {
+              return (
+                <g transform={`translate(${x}, ${y})`}>
+                  <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
+                    {value}
+                  </text>
+                </g>
+              )
+            }
+
+            return null
+          }}
+        />
+        <CartesianGrid vertical={false} strokeDasharray="5" stroke="#d2d3d5" />
+        <Tooltip />
+        <Area
+          animationDuration={ANIMATION_DURATION}
+          animationEasing="ease-in-out"
+          dataKey="value"
+          fill="url(#colorUv)"
+          stroke="#5286f7"
+          strokeWidth={3}
+        />
+      </ReactAreaChart>
+    )}
+  />
+)
+
+export const BarChart = ({ height, data }: { height: number, data: Array<Object> }) => (
+  <Container
+    render={({ width }) => (
+      <ReactBarChart width={width} height={height} data={data}>
+        <Bar
+          animationDuration={ANIMATION_DURATION}
+          animationEasing="ease-in-out"
+          dataKey="value"
+          fill="#8884d8"
+        />
+      </ReactBarChart>
+    )}
+  />
+)
--- a/src/components/modals/AddAccount/index.js
+++ b/src/components/modals/AddAccount/index.js
@ -286,26 +286,31 @@ class AddAccountModal extends PureComponent<Props, State> {

  _timeout = undefined

-  render() {
+  renderModal = ({ onClose }) => {
    const { step } = this.state
    const { t } = this.props

    const Step = Steps[step]

+    return (
+      <ModalBody onClose={onClose} flow={3}>
+        <Text fontSize={4} color="steel">
+          {t('addAccount.title')}
+        </Text>
+        <Step {...this.getStepProps()} />
+      </ModalBody>
+    )
+  }
+
+  render() {
+    const { step } = this.state
+
    return (
      <Modal
        name={MODAL_ADD_ACCOUNT}
        preventBackdropClick={step !== 'chooseWallet'}
-        onClose={this.handleClose}
        onHide={this.handleHide}
-        render={({ onClose }) => (
-          <ModalBody onClose={onClose} flow={3}>
-            <Text fontSize={4} color="steel">
-              {t('addAccount.title')}
-            </Text>
-            <Step {...this.getStepProps()} />
-          </ModalBody>
-        )}
+        render={this.renderModal}
      />
    )
  }
--- a/src/components/modals/Receive.js
+++ b/src/components/modals/Receive.js
@ -52,51 +52,48 @@ class ReceiveModal extends PureComponent<Props, State> {
      ...defaultState,
    })

-  render() {
+  renderModal = ({ data, onClose }) => {
    const { amount } = this.state
    const { t } = this.props

+    const account = this.getAccount(data)
+
    return (
-      <Modal
-        name={MODAL_RECEIVE}
-        onHide={this.handleHide}
-        render={({ data, onClose }) => {
-          const account = this.getAccount(data)
-          return (
-            <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
-                {t('receive.title')}
-              </Text>
+      <ModalBody onClose={onClose} flow={3}>
+        <Text fontSize={4} color="steel">
+          {t('receive.title')}
+        </Text>
+        <Box flow={1}>
+          <Label>Account</Label>
+          <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
+        </Box>
+        {account &&
+          account.data && (
+            <Fragment>
              <Box flow={1}>
-                <Label>Account</Label>
-                <SelectAccount value={account} onChange={this.handleChangeInput('account')} />
-              </Box>
-              {account &&
-                account.data && (
-                  <Fragment>
-                    <Box flow={1}>
-                      <Label>Request amount</Label>
-                      <Input
-                        type="number"
-                        min={0}
-                        max={account.data.balance / 1e8}
-                        onChange={this.handleChangeInput('amount')}
-                      />
-                    </Box>
-                    <ReceiveBox amount={amount} address={get(account, 'data.address', '')} />
-                  </Fragment>
-                )}
-              <Box horizontal justify="center">
-                <Button primary onClick={onClose}>
-                  Close
-                </Button>
+                <Label>Request amount</Label>
+                <Input
+                  type="number"
+                  min={0}
+                  max={account.data.balance / 1e8}
+                  onChange={this.handleChangeInput('amount')}
+                />
              </Box>
-            </ModalBody>
-          )
-        }}
-      />
+              <ReceiveBox amount={amount} address={get(account, 'data.address', '')} />
+            </Fragment>
+          )}
+        <Box horizontal justify="center">
+          <Button primary onClick={onClose}>
+            Close
+          </Button>
+        </Box>
+      </ModalBody>
    )
  }
+
+  render() {
+    return <Modal name={MODAL_RECEIVE} onHide={this.handleHide} render={this.renderModal} />
+  }
 }

 export default translate()(ReceiveModal)
--- a/src/components/modals/Send.js
+++ b/src/components/modals/Send.js
@ -145,36 +145,34 @@ class Send extends PureComponent<Props, State> {
      ...defaultState,
    })

-  render() {
+  renderModal = ({ data, onClose }) => {
    const { step } = this.state

    const Step = Steps[step]

    return (
-      <Modal
-        name={MODAL_SEND}
-        onHide={this.handleHide}
-        render={({ data, onClose }) => (
-          <Fragment>
-            <ModalBody p={2}>
-              <Breadcrumb
-                currentStep={step}
-                items={[
-                  { label: 'Amount' },
-                  { label: 'Summary' },
-                  { label: 'Secure validation' },
-                  { label: 'Confirmation' },
-                ]}
-              />
-            </ModalBody>
-            <ModalBody onClose={onClose}>
-              <Step {...this.getStepProps(data)} />
-            </ModalBody>
-          </Fragment>
-        )}
-      />
+      <Fragment>
+        <ModalBody p={2}>
+          <Breadcrumb
+            currentStep={step}
+            items={[
+              { label: 'Amount' },
+              { label: 'Summary' },
+              { label: 'Secure validation' },
+              { label: 'Confirmation' },
+            ]}
+          />
+        </ModalBody>
+        <ModalBody onClose={onClose}>
+          <Step {...this.getStepProps(data)} />
+        </ModalBody>
+      </Fragment>
    )
  }
+
+  render() {
+    return <Modal name={MODAL_SEND} onHide={this.handleHide} render={this.renderModal} />
+  }
 }

 export default translate()(Send)
--- a/src/components/modals/SettingsAccount.js
+++ b/src/components/modals/SettingsAccount.js
@ -118,67 +118,66 @@ class SettingsAccount extends PureComponent<Props, State> {
      ...defaultState,
    })

-  render() {
+  renderModal = ({ data, onClose }) => {
    const { editName, nameHovered } = this.state

+    const account = this.getAccount(data)
+
    return (
-      <Modal
-        name={MODAL_SETTINGS_ACCOUNT}
-        onHide={this.handleHide}
-        render={({ data, onClose }) => {
-          const account = this.getAccount(data)
-          return (
-            <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
-                Account settings
-              </Text>
-              <Box
-                align="center"
-                flow={2}
-                horizontal
-                onMouseEnter={this.handleHoveredName(true)}
-                onMouseLeave={this.handleHoveredName(false)}
-              >
-                <Box>
-                  {editName ? (
-                    <form onSubmit={this.handleSubmitName(account)}>
-                      <Box align="center" horizontal flow={2}>
-                        <Box>
-                          <Input value={account.name} onChange={this.handleChangeName} />
-                        </Box>
-                        <Box flow={2} horizontal>
-                          <Button type="button" onClick={this.handleCancelEditName(data)}>
-                            Cancel
-                          </Button>
-                          <Button type="submit" primary>
-                            Ok
-                          </Button>
-                        </Box>
-                      </Box>
-                    </form>
-                  ) : (
-                    account.name
-                  )}
-                </Box>
-                {!editName &&
-                  nameHovered && (
-                    <Box onClick={this.handleEditName(true)} style={{ cursor: 'pointer' }}>
-                      <Icon name="edit" />
-                    </Box>
-                  )}
-              </Box>
-              <Box horizontal grow align="flex-end" flow={2}>
-                <Box grow>
-                  <Button onClick={this.handleArchiveAccount(account)}>Archive account</Button>
-                </Box>
-                <Box grow>
-                  <Button primary>Go to account</Button>
+      <ModalBody onClose={onClose} flow={3}>
+        <Text fontSize={4} color="steel">
+          Account settings
+        </Text>
+        <Box
+          align="center"
+          flow={2}
+          horizontal
+          onMouseEnter={this.handleHoveredName(true)}
+          onMouseLeave={this.handleHoveredName(false)}
+        >
+          <Box>
+            {editName ? (
+              <form onSubmit={this.handleSubmitName(account)}>
+                <Box align="center" horizontal flow={2}>
+                  <Box>
+                    <Input value={account.name} onChange={this.handleChangeName} />
+                  </Box>
+                  <Box flow={2} horizontal>
+                    <Button type="button" onClick={this.handleCancelEditName(data)}>
+                      Cancel
+                    </Button>
+                    <Button type="submit" primary>
+                      Ok
+                    </Button>
+                  </Box>
                </Box>
+              </form>
+            ) : (
+              account.name
+            )}
+          </Box>
+          {!editName &&
+            nameHovered && (
+              <Box onClick={this.handleEditName(true)} style={{ cursor: 'pointer' }}>
+                <Icon name="edit" />
              </Box>
-            </ModalBody>
-          )
-        }}
-      />
+            )}
+        </Box>
+        <Box horizontal grow align="flex-end" flow={2}>
+          <Box grow>
+            <Button onClick={this.handleArchiveAccount(account)}>Archive account</Button>
+          </Box>
+          <Box grow>
+            <Button primary>Go to account</Button>
+          </Box>
+        </Box>
+      </ModalBody>
+    )
+  }
+
+  render() {
+    return (
+      <Modal name={MODAL_SETTINGS_ACCOUNT} onHide={this.handleHide} render={this.renderModal} />
    )
  }
 }
--- a/src/main/app.js
+++ b/src/main/app.js
@ -22,6 +22,13 @@ function createMainWindow() {
    width: MIN_WIDTH,
    minHeight: MIN_HEIGHT,
    minWidth: MIN_WIDTH,
+    webPreferences: {
+      // Disable auxclick event
+      // See https://developers.google.com/web/updates/2016/10/auxclick
+      disableBlinkFeatures: 'Auxclick',
+      // Enable, among other things, the ResizeObserver
+      experimentalFeatures: true,
+    },
  }

  const window = new BrowserWindow(windowOptions)
--- a/src/reducers/modals.js
+++ b/src/reducers/modals.js
@ -5,7 +5,7 @@ import { handleActions, createAction } from 'redux-actions'
 export type ModalsState = {
  [key: string]: {
    isOpened: boolean,
-    data?: Object | null,
+    data?: Object,
  },
 }

@ -13,7 +13,7 @@ const state: ModalsState = {}

 type OpenPayload = {
  name: string,
-  data?: Object | null,
+  data?: Object,
 }

 type ClosePayload = {
@ -37,7 +37,7 @@ const handlers = {
      ...state,
      [name]: {
        isOpened: false,
-        data: null,
+        data: undefined,
      },
    }
  },
@ -55,9 +55,9 @@ const handlers = {

 // Actions

-export const openModal = createAction('MODAL_OPEN', (name, data = {}) => ({ name, data }))
+export const openModal = createAction('MODAL_OPEN', (name, data) => ({ name, data }))
 export const closeModal = createAction('MODAL_CLOSE', name => ({ name }))
-export const setDataModal = createAction('MODAL_SET_DATA', (name, data = {}) => ({ name, data }))
+export const setDataModal = createAction('MODAL_SET_DATA', (name, data) => ({ name, data }))

 // Selectors

--- a/src/styles/global.js
+++ b/src/styles/global.js
@ -53,4 +53,8 @@ injectGlobal`
    transition: opacity 0.2s ease-in-out !important;
    z-index: 20 !important;
  }
+
+  .recharts-wrapper {
+    cursor: inherit !important;
+  }
 `
--- a/yarn.lock
+++ b/yarn.lock
@ -167,9 +167,9 @@
  dependencies:
    events "^1.1.1"

-"@storybook/addon-actions@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.11.tgz#158a64f01c97fcf6922e7a370c6519d216544bcd"
+"@storybook/addon-actions@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.12.tgz#1bd2668918a62f32c0907af14946cdd0c6be66f5"
  dependencies:
    deep-equal "^1.0.1"
    global "^4.3.2"
@ -178,9 +178,9 @@
    react-inspector "^2.2.2"
    uuid "^3.1.0"

-"@storybook/addon-knobs@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.3.11.tgz#ab53a627f9517d922e1a1f6b874bd76ae2fc3b08"
+"@storybook/addon-knobs@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-knobs/-/addon-knobs-3.3.12.tgz#371c3d5b50bd0220a7f0d18e5c20794fb6292545"
  dependencies:
    babel-runtime "^6.26.0"
    deep-equal "^1.0.1"
@ -194,41 +194,41 @@
    react-textarea-autosize "^5.2.1"
    util-deprecate "^1.0.2"

-"@storybook/addon-links@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.11.tgz#7bc57baddd1502153ee94cf11fcb88d49131b211"
+"@storybook/addon-links@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.12.tgz#e1bb6e207506a45bea9e5f64cd78c045327412b7"
  dependencies:
-    "@storybook/components" "^3.3.11"
+    "@storybook/components" "^3.3.12"
    global "^4.3.2"
    prop-types "^15.5.10"

-"@storybook/addon-options@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.3.11.tgz#2e4a5fd9b4a5875104aed232dff0f7f257a9611b"
+"@storybook/addon-options@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-options/-/addon-options-3.3.12.tgz#d0f19936c2ca8ed4e900cf68760db4eeda24ce16"

-"@storybook/addons@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.11.tgz#7f85136d6da785160658aee512fd3cac99780f42"
+"@storybook/addons@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.12.tgz#682927b5ac4baad796922eec505a7e956a3f79d9"

-"@storybook/channel-postmessage@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.11.tgz#a379f96f7819ba3752bb471ebf90ad07c3fc28ea"
+"@storybook/channel-postmessage@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.12.tgz#a4e7ac32ff84d2cc41bf3a5f30608ce5f82bcf82"
  dependencies:
-    "@storybook/channels" "^3.3.11"
+    "@storybook/channels" "^3.3.12"
    global "^4.3.2"
    json-stringify-safe "^5.0.1"

-"@storybook/channels@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.11.tgz#569f1c7c364aeb076df78eb829c58f9c9f0a3936"
+"@storybook/channels@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.12.tgz#aa4106888971f9e689511093b0e6f2b569973a09"

-"@storybook/client-logger@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.11.tgz#35c851dbed2067201189847c7aa92f8d567a4d61"
+"@storybook/client-logger@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.12.tgz#5307eba4d63d6dc54676e14a40bc0d4be3439d92"

-"@storybook/components@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.11.tgz#cb2a48b52e7cb45408172f4462f4730ca6970e78"
+"@storybook/components@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.12.tgz#e2571ca7150488f4ac3fa1cd1f70fa91ce38da8b"
  dependencies:
    glamor "^2.20.40"
    glamorous "^4.11.2"
@ -242,9 +242,9 @@
    "@storybook/react-simple-di" "^1.2.1"
    babel-runtime "6.x.x"

-"@storybook/node-logger@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.11.tgz#e459cbf8da75e2671a08de4f6dfe32b556b20af6"
+"@storybook/node-logger@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.12.tgz#97251cfa46be4a0d856b394f5dbbf32d6ab2f2cd"
  dependencies:
    chalk "^2.3.0"
    npmlog "^4.1.2"
@ -274,17 +274,17 @@
  dependencies:
    babel-runtime "^6.5.0"

-"@storybook/react@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.11.tgz#5438d40aa095dd7b0c2f4e8e51a83fd5151df0c1"
-  dependencies:
-    "@storybook/addon-actions" "^3.3.11"
-    "@storybook/addon-links" "^3.3.11"
-    "@storybook/addons" "^3.3.11"
-    "@storybook/channel-postmessage" "^3.3.11"
-    "@storybook/client-logger" "^3.3.11"
-    "@storybook/node-logger" "^3.3.11"
-    "@storybook/ui" "^3.3.11"
+"@storybook/react@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.12.tgz#f1f6587499e0aaa7b14be911a53d09a61e219ccd"
+  dependencies:
+    "@storybook/addon-actions" "^3.3.12"
+    "@storybook/addon-links" "^3.3.12"
+    "@storybook/addons" "^3.3.12"
+    "@storybook/channel-postmessage" "^3.3.12"
+    "@storybook/client-logger" "^3.3.12"
+    "@storybook/node-logger" "^3.3.12"
+    "@storybook/ui" "^3.3.12"
    airbnb-js-shims "^1.4.0"
    autoprefixer "^7.2.3"
    babel-loader "^7.1.2"
@ -336,11 +336,11 @@
    webpack-dev-middleware "^1.12.2"
    webpack-hot-middleware "^2.21.0"

-"@storybook/ui@^3.3.11":
-  version "3.3.11"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.11.tgz#df500b97739da484d51d6a1bcb52ce3866ad2148"
+"@storybook/ui@^3.3.12":
+  version "3.3.12"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.12.tgz#b0a9cd83423c4d6cded0a0340fc4f48d5bdf3bc0"
  dependencies:
-    "@storybook/components" "^3.3.11"
+    "@storybook/components" "^3.3.12"
    "@storybook/mantra-core" "^1.7.2"
    "@storybook/react-komposer" "^2.0.3"
    babel-runtime "^6.26.0"
@ -1093,6 +1093,14 @@ babel-plugin-react-docgen@^1.8.0:
    lodash "^4.17.0"
    react-docgen "^2.20.0"

+babel-plugin-recharts@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-recharts/-/babel-plugin-recharts-1.1.1.tgz#44fedb9250eaf0073455b06248441bc12e64ed18"
+  dependencies:
+    babel-traverse "^6.19.0"
+    babel-types "^6.19.0"
+    babylon "^6.14.1"
+
 babel-plugin-syntax-async-functions@^6.8.0:
  version "6.13.0"
  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@ -1674,7 +1682,7 @@ babel-template@^6.24.1, babel-template@^6.26.0:
    babylon "^6.18.0"
    lodash "^4.17.4"

-babel-traverse@^6.24.1, babel-traverse@^6.26.0:
+babel-traverse@^6.19.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0:
  version "6.26.0"
  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee"
  dependencies:
@ -1701,7 +1709,7 @@ babylon@7.0.0-beta.36:
  version "7.0.0-beta.36"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e"

-babylon@^6.18.0:
+babylon@^6.14.1, babylon@^6.18.0:
  version "6.18.0"
  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"

@ -2324,7 +2332,7 @@ class-utils@^0.3.5:
    isobject "^3.0.0"
    static-extend "^0.1.1"

-classnames@^2.2.5:
+classnames@2.2.5, classnames@^2.2.5:
  version "2.2.5"
  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"

@ -2625,6 +2633,10 @@ copy-descriptor@^0.1.0:
  version "0.1.1"
  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"

+core-js@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.1.tgz#ae6874dc66937789b80754ff5428df66819ca50b"
+
 core-js@^1.0.0:
  version "1.2.7"
  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
@ -2906,6 +2918,60 @@ cyclist@~0.2.2:
  version "0.2.2"
  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"

+d3-array@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
+
+d3-collection@1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
+
+d3-color@1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
+
+d3-format@1:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.2.tgz#1a39c479c8a57fe5051b2e67a3bee27061a74e7a"
+
+d3-interpolate@1, d3-interpolate@^1.1.5:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"
+  dependencies:
+    d3-color "1"
+
+d3-path@1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
+
+d3-scale@1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.6.tgz#bce19da80d3a0cf422c9543ae3322086220b34ed"
+  dependencies:
+    d3-array "^1.2.0"
+    d3-collection "1"
+    d3-color "1"
+    d3-format "1"
+    d3-interpolate "1"
+    d3-time "1"
+    d3-time-format "2"
+
+d3-shape@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
+  dependencies:
+    d3-path "1"
+
+d3-time-format@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31"
+  dependencies:
+    d3-time "1"
+
+d3-time@1:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"
+
 d@1:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
@ -3188,9 +3254,9 @@ dotenv@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.0.tgz#0206eb5b336639bf377618a2a304ff00c6a1fddb"

-downshift@^1.27.0:
-  version "1.27.0"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.27.0.tgz#e04987a6ee37c99772e76febad0955f874dd0696"
+downshift@^1.27.1:
+  version "1.27.1"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.27.1.tgz#c91830ed476771373da7353b69726b436a3e3df3"

 duplexer3@^0.1.4:
  version "0.1.4"
@ -3688,9 +3754,9 @@ eslint-visitor-keys@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"

-eslint@^4.16.0:
-  version "4.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.16.0.tgz#934ada9e98715e1d7bbfd6f6f0519ed2fab35cc1"
+eslint@^4.17.0:
+  version "4.17.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.17.0.tgz#dc24bb51ede48df629be7031c71d9dc0ee4f3ddf"
  dependencies:
    ajv "^5.3.0"
    babel-code-frame "^6.22.0"
@ -5738,10 +5804,14 @@ lodash@^3.10.1:
  version "3.10.1"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-3.10.1.tgz#5bf45e8e49ba4189e17d482789dfd15bd140b7b6"

-lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1:
+lodash@^4.0.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.5.1, lodash@~4.17.4:
  version "4.17.4"
  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"

+lodash@^4.17.5:
+  version "4.17.5"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
+
 log-symbols@^1.0.2:
  version "1.0.2"
  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@ -7276,7 +7346,7 @@ radium@^0.19.0:
    inline-style-prefixer "^2.0.5"
    prop-types "^15.5.8"

-raf@^3.1.0:
+raf@^3.1.0, raf@^3.2.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
  dependencies:
@ -7482,6 +7552,12 @@ react-redux@^5.0.5, react-redux@^5.0.6:
    loose-envify "^1.1.0"
    prop-types "^15.5.10"

+react-resize-detector@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-1.1.0.tgz#4a9831fa3caad32230478dd0185cbd2aa91a5ebf"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-router-dom@^4.2.2:
  version "4.2.2"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d"
@ -7517,6 +7593,15 @@ react-smooth-scrollbar@^8.0.6:
  version "8.0.6"
  resolved "https://registry.yarnpkg.com/react-smooth-scrollbar/-/react-smooth-scrollbar-8.0.6.tgz#179072e6a547b3af589ea303c50fd86366275edc"

+react-smooth@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-1.0.0.tgz#b29dbebddddb06d21b5b08962167fb9eac1897d8"
+  dependencies:
+    lodash "~4.17.4"
+    prop-types "^15.6.0"
+    raf "^3.2.0"
+    react-transition-group "^2.2.1"
+
 react-split-pane@^0.1.74:
  version "0.1.74"
  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.74.tgz#cf79fc98b51ab0763fdc778749b810a102b036ca"
@ -7555,6 +7640,17 @@ react-transition-group@^1.1.2:
    prop-types "^15.5.6"
    warning "^3.0.0"

+react-transition-group@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.2.1.tgz#e9fb677b79e6455fd391b03823afe84849df4a10"
+  dependencies:
+    chain-function "^1.0.0"
+    classnames "^2.2.5"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.8"
+    warning "^3.0.0"
+
 react-treebeard@^2.1.0:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/react-treebeard/-/react-treebeard-2.1.0.tgz#fbd5cf51089b6f09a9b18350ab3bddf736e57800"
@ -7683,6 +7779,26 @@ recast@~0.11.12:
    private "~0.1.5"
    source-map "~0.5.0"

+recharts-scale@0.3.2:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.3.2.tgz#dac7621714a4765d152cb2adbc30c73b831208c9"
+
+recharts@^1.0.0-beta.10:
+  version "1.0.0-beta.10"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-1.0.0-beta.10.tgz#d3cd15df6b7879d5968da3c942b5fcdaf2504fe1"
+  dependencies:
+    classnames "2.2.5"
+    core-js "2.5.1"
+    d3-interpolate "^1.1.5"
+    d3-scale "1.0.6"
+    d3-shape "1.2.0"
+    lodash "~4.17.4"
+    prop-types "^15.6.0"
+    react-resize-detector "1.1.0"
+    react-smooth "1.0.0"
+    recharts-scale "0.3.2"
+    reduce-css-calc "1.3.0"
+
 rechoir@^0.6.2:
  version "0.6.2"
  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@ -7696,7 +7812,7 @@ redent@^1.0.0:
    indent-string "^2.1.0"
    strip-indent "^1.0.1"

-reduce-css-calc@^1.2.6:
+reduce-css-calc@1.3.0, reduce-css-calc@^1.2.6:
  version "1.3.0"
  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
  dependencies:
@ -8628,9 +8744,9 @@ style-loader@^0.20.1:
    loader-utils "^1.1.0"
    schema-utils "^0.4.3"

-styled-components@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.5.tgz#7aaf0a97f8c5cd49791e924887f9d8f428fb010c"
+styled-components@^3.1.6:
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.6.tgz#9c443146fa82c6659a9f64dd493bf2202480342e"
  dependencies:
    buffer "^5.0.3"
    css-to-react-native "^2.0.3"
@ -8642,9 +8758,9 @@ styled-components@^3.1.5:
    stylis-rule-sheet "^0.0.7"
    supports-color "^3.2.3"

-styled-system@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-1.1.1.tgz#6611da9ce5e561b50f217996ea555ea7b1855d5d"
+styled-system@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-1.1.4.tgz#904521a5142e85345c76956c50524e4d05a88af3"
  dependencies:
    prop-types "^15.6.0"