From 73eca39a3d79bf5e2f7957ad30f3a0e4808d9439 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Mon, 12 Feb 2018 17:05:36 +0100
Subject: [PATCH] Update AccountCard, and Dasbhoard Chart

---
 src/components/DashboardPage/AccountCard.js |  2 +-
 src/components/DashboardPage/index.js       | 68 ++++++++++++---------
 src/components/base/Chart/index.js          | 49 +++++++++++----
 3 files changed, 78 insertions(+), 41 deletions(-)

diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 1a788663..82601c6c 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -45,7 +45,7 @@ const AccountCard = ({
       height={52}
       data={data}
       strokeWidth={1}
-      linearGradient={[[5, 0.4], [100, 0]]}
+      linearGradient={[[5, 0.4], [80, 0]]}
     />
   </Card>
 )
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index bdafe16d..bd9dc575 100644
--- a/src/components/DashboardPage/index.js
+++ b/src/components/DashboardPage/index.js
@@ -14,6 +14,7 @@ import type { MapStateToProps } from 'react-redux'
 import type { Accounts } from 'types/common'
 
 import { formatBTC } from 'helpers/format'
+import { space } from 'styles/theme'
 
 import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'
 
@@ -121,7 +122,7 @@ class DashboardPage extends PureComponent<Props, State> {
       <Box flow={7}>
         <Box horizontal align="flex-end">
           <Box>
-            <Text color="dark" ff="Museo Sans|Regular" fontSize={7}>
+            <Text color="dark" ff="Museo Sans" fontSize={7}>
               {'Good morning, Khalil.'}
             </Text>
             <Text color="grey" fontSize={5} ff="Museo Sans|Light">
@@ -140,11 +141,17 @@ class DashboardPage extends PureComponent<Props, State> {
         </Box>
         {totalAccounts > 0 && (
           <Fragment>
-            <Card flow={3} p={6}>
+            <Card flow={3} p={0} py={6}>
               <Text>{formatBTC(totalBalance)}</Text>
               <Box ff="Open Sans" fontSize={4} color="warmGrey">
                 <AreaChart
                   id="dashboard-chart"
+                  margin={{
+                    top: space[6],
+                    bottom: 0,
+                    left: space[6] - 10,
+                    right: space[6],
+                  }}
                   color="#5286f7"
                   height={250}
                   data={takeRight(
@@ -162,32 +169,37 @@ class DashboardPage extends PureComponent<Props, State> {
                 />
               </Box>
             </Card>
-            <Box flow={3}>
-              {this.getAccountsChunk().map((accountsByLine, i) => (
-                <Box
-                  key={i} // eslint-disable-line react/no-array-index-key
-                  horizontal
-                  flow={3}
-                >
-                  {accountsByLine.map(
-                    (account: any, j) =>
-                      account === null ? (
-                        <Box
-                          key={j} // eslint-disable-line react/no-array-index-key
-                          p={2}
-                          flex={1}
-                        />
-                      ) : (
-                        <AccountCard
-                          key={account.id}
-                          account={account}
-                          data={takeRight(fakeDatas[j], 25)}
-                          onClick={() => push(`/account/${account.id}`)}
-                        />
-                      ),
-                  )}
-                </Box>
-              ))}
+            <Box flow={4}>
+              <Text color="dark" ff="Museo Sans" fontSize={6}>
+                {'Accounts'}
+              </Text>
+              <Box flow={5}>
+                {this.getAccountsChunk().map((accountsByLine, i) => (
+                  <Box
+                    key={i} // eslint-disable-line react/no-array-index-key
+                    horizontal
+                    flow={5}
+                  >
+                    {accountsByLine.map(
+                      (account: any, j) =>
+                        account === null ? (
+                          <Box
+                            key={j} // eslint-disable-line react/no-array-index-key
+                            p={4}
+                            flex={1}
+                          />
+                        ) : (
+                          <AccountCard
+                            key={account.id}
+                            account={account}
+                            data={takeRight(fakeDatas[j], 25)}
+                            onClick={() => push(`/account/${account.id}`)}
+                          />
+                        ),
+                    )}
+                  </Box>
+                ))}
+              </Box>
             </Box>
           </Fragment>
         )}
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index 9971f14a..e9ebe6b0 100644
--- a/src/components/base/Chart/index.js
+++ b/src/components/base/Chart/index.js
@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { AreaChart as ReactAreaChart, Area, XAxis, CartesianGrid, Tooltip } from 'recharts'
+import { AreaChart as ReactAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
 
 import Box from 'components/base/Box'
 
@@ -89,26 +89,32 @@ export const AreaChart = ({
         {linearGradient && (
           <defs>
             <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
-              {linearGradient.map(g => (
-                <stop offset={`${g[0]}%`} stopColor={color} stopOpacity={g[1]} />
+              {linearGradient.map((g, i) => (
+                <stop
+                  key={i} // eslint-disable-line react/no-array-index-key
+                  offset={`${g[0]}%`}
+                  stopColor={color}
+                  stopOpacity={g[1]}
+                />
               ))}
             </linearGradient>
           </defs>
         )}
         {!tiny && (
-          <XAxis
-            dataKey="name"
-            stroke="#e9eff4"
+          <YAxis
+            interval={0}
+            dataKey="value"
+            tickMargin={0}
+            stroke={false}
             tickLine={false}
-            interval={2}
-            tick={({ x, y, index, payload, visibleTicksCount }) => {
+            tick={({ x, y, index, payload }) => {
               const { value } = payload
 
-              if (index !== 0 && index !== visibleTicksCount - 1) {
+              if (index !== 0) {
                 return (
                   <g transform={`translate(${x}, ${y})`}>
-                    <text x={0} y={0} dy={16} textAnchor="middle" fill="currentColor">
-                      {value}
+                    <text x={-30} y={0} dy={5} textAnchor="middle" fill="currentColor">
+                      {value}k
                     </text>
                   </g>
                 )
@@ -118,8 +124,27 @@ export const AreaChart = ({
             }}
           />
         )}
+        {!tiny && (
+          <XAxis
+            dataKey="name"
+            stroke="#e9eff4"
+            tickLine={false}
+            interval={2}
+            tick={({ x, y, payload }) => {
+              const { value } = payload
+
+              return (
+                <g transform={`translate(${x}, ${y})`}>
+                  <text x={0} y={0} dy={20} textAnchor="middle" fill="currentColor">
+                    {value}
+                  </text>
+                </g>
+              )
+            }}
+          />
+        )}
         {!tiny && <CartesianGrid vertical={false} strokeDasharray="5" stroke="#e9eff4" />}
-        {!tiny && <Tooltip />}
+        {!tiny && <Tooltip isAnimationActive={false} />}
         <Area
           isAnimationActive={isAnimationActive}
           animationDuration={ANIMATION_DURATION}