Merge pull request #105 from loeck/master

Add AccountCard

src/components/DashboardPage/AccountCard.js

@@ -0,0 +1,53 @@
+// @flow
+
+import React from 'react'
+
+import type { Account } from 'types/common'
+
+import { formatBTC } from 'helpers/format'
+
+import { AreaChart } from 'components/base/Chart'
+import Bar from 'components/base/Bar'
+import Box, { Card } from 'components/base/Box'
+import Icon from 'components/base/Icon'
+
+const AccountCard = ({
+  account,
+  data,
+  onClick,
+}: {
+  account: Account,
+  data: Array<Object>,
+  onClick: Function,
+}) => (
+  <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
+    <Box horizontal ff="Open Sans|SemiBold" flow={3} align="center">
+      <Box style={{ color: '#fcb653' }}>
+        <Icon fontSize="20px" name={{ iconName: 'btc', prefix: 'fab' }} />
+      </Box>
+      <Box>
+        <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
+          {account.type}
+        </Box>
+        <Box fontSize={4} color="dark">
+          {account.name}
+        </Box>
+      </Box>
+    </Box>
+    <Bar size={1} color="argile" />
+    <Box grow justify="center" color="dark">
+      {account.data && formatBTC(account.data.balance)}
+    </Box>
+    <AreaChart
+      tiny
+      id={`account-chart-${account.id}`}
+      color="#fcb653"
+      height={52}
+      data={data}
+      strokeWidth={1}
+      linearGradient={[[5, 0.4], [100, 0]]}
+    />
+  </Card>
+)
+
+export default AccountCard

src/components/DashboardPage/index.js

@@ -17,10 +17,12 @@ import { formatBTC } from 'helpers/format'
 
 import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'
 
+import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
 import Pills from 'components/base/Pills'
 import Text from 'components/base/Text'
-import { AreaChart, BarChart } from 'components/base/Chart'
+
+import AccountCard from './AccountCard'
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
@@ -138,23 +140,27 @@ class DashboardPage extends PureComponent<Props, State> {
         </Box>
         {totalAccounts > 0 && (
           <Fragment>
-            <Card flow={3} p={4}>
+            <Card flow={3} p={6}>
               <Text>{formatBTC(totalBalance)}</Text>
-              <AreaChart
-                height={250}
-                data={takeRight(
-                  fakeDatas.reduce((res, data) => {
-                    data.forEach((d, i) => {
-                      res[i] = {
-                        name: d.name,
-                        value: (res[i] ? res[i].value : 0) + d.value,
-                      }
-                    })
-                    return res
-                  }, []),
-                  25,
-                )}
-              />
+              <Box ff="Open Sans" fontSize={4} color="warmGrey">
+                <AreaChart
+                  id="dashboard-chart"
+                  color="#5286f7"
+                  height={250}
+                  data={takeRight(
+                    fakeDatas.reduce((res, data) => {
+                      data.forEach((d, i) => {
+                        res[i] = {
+                          name: d.name,
+                          value: (res[i] ? res[i].value : 0) + d.value,
+                        }
+                      })
+                      return res
+                    }, []),
+                    25,
+                  )}
+                />
+              </Box>
             </Card>
             <Box flow={3}>
               {this.getAccountsChunk().map((accountsByLine, i) => (
@@ -172,21 +178,12 @@ class DashboardPage extends PureComponent<Props, State> {
                           flex={1}
                         />
                       ) : (
-                        <Card
+                        <AccountCard
                           key={account.id}
-                          p={2}
-                          flex={1}
-                          style={{ cursor: 'pointer' }}
+                          account={account}
+                          data={takeRight(fakeDatas[j], 25)}
                           onClick={() => push(`/account/${account.id}`)}
-                        >
-                          <Box>
-                            <Text fontWeight="bold">{account.name}</Text>
-                          </Box>
-                          <Box grow align="center" justify="center">
-                            {account.data && formatBTC(account.data.balance)}
-                          </Box>
-                          <BarChart height={100} data={takeRight(fakeDatas[j], 25)} />
-                        </Card>
+                        />
                       ),
                   )}
                 </Box>

src/components/base/Box/index.js

@@ -7,6 +7,7 @@ import {
   borderColor,
   borderRadius,
   borderWidth,
+  boxShadow,
   color,
   flex,
   fontSize,
@@ -23,6 +24,7 @@ const Box = styled.div`
   ${borderColor};
   ${borderRadius};
   ${borderWidth};
+  ${boxShadow};
   ${color};
   ${flex};
   ${fontFamily};
@@ -53,10 +55,7 @@ const Box = styled.div`
   }
 `
 
-const RawCard = styled(Box).attrs({ bg: 'white', p: 3 })`
-  box-shadow: rgba(0, 0, 0, 0.06) 0 8px 30px;
-  border-radius: 5px;
-`
+const RawCard = styled(Box).attrs({ bg: 'white', p: 3, boxShadow: 0, borderRadius: 1 })``
 
 export const Card = ({ title, ...props }: { title?: string }) => {
   if (title) {

src/components/base/Chart/index.js

@@ -1,15 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import {
-  AreaChart as ReactAreaChart,
-  BarChart as ReactBarChart,
-  Bar,
-  Area,
-  XAxis,
-  CartesianGrid,
-  Tooltip,
-} from 'recharts'
+import { AreaChart as ReactAreaChart, Area, XAxis, CartesianGrid, Tooltip } from 'recharts'
 
 import Box from 'components/base/Box'
 
@@ -72,68 +64,79 @@ class Container extends PureComponent<Props, State> {
   }
 }
 
-export const AreaChart = ({ height, data }: { height: number, data: Array<Object> }) => (
+export const AreaChart = ({
+  id,
+  linearGradient,
+  strokeWidth,
+  height,
+  color,
+  data,
+  margin,
+  tiny,
+}: {
+  id: string,
+  linearGradient?: Array<Array<*>>,
+  strokeWidth?: number,
+  height: number,
+  color: string,
+  data: Array<Object>,
+  margin?: Object,
+  tiny?: boolean,
+}) => (
   <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 />
+    render={({ width, isAnimationActive }) => (
+      <ReactAreaChart width={width} height={height} data={data} margin={margin}>
+        {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>
+          </defs>
+        )}
+        {!tiny && (
+          <XAxis
+            dataKey="name"
+            stroke="#e9eff4"
+            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="currentColor">
+                      {value}
+                    </text>
+                  </g>
+                )
+              }
+
+              return null
+            }}
+          />
+        )}
+        {!tiny && <CartesianGrid vertical={false} strokeDasharray="5" stroke="#e9eff4" />}
+        {!tiny && <Tooltip />}
         <Area
+          isAnimationActive={isAnimationActive}
           animationDuration={ANIMATION_DURATION}
           animationEasing="ease-in-out"
           dataKey="value"
-          fill="url(#colorUv)"
-          stroke="#5286f7"
-          strokeWidth={3}
+          fill={`url(#${id})`}
+          stroke={color}
+          strokeWidth={strokeWidth}
         />
       </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>
-    )}
-  />
-)
+AreaChart.defaultProps = {
+  linearGradient: [[5, 0.3], [65, 0]],
+  margin: undefined,
+  strokeWidth: 2,
+  tiny: false,
+}

src/components/base/Icon/index.js

@@ -12,7 +12,7 @@ const Container = styled.span`
   position: relative;
 `
 
-export default ({ name, ...props }: { name: string }) => (
+export default ({ name, ...props }: { name: string | Object }) => (
   <Container {...props}>
     <FontAwesomeIcon icon={name} />
   </Container>

src/styles/theme.js

@@ -3,6 +3,7 @@
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
 export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 22, 32]
 export const radii = [0, 4]
+export const shadows = ['0 4px 8px 0 rgba(0, 0, 0, 0.03)']
 
 export const fontFamilies = {
   'Open Sans': {
@@ -60,6 +61,7 @@ export default {
   fontFamilies,
   fontSizes,
   space,
+  shadows,
   colors: {
     transparent: 'transparent',