COMPLETED

mock/dashboard.js

@@ -9,8 +9,8 @@ let dataKey = mockStorge('Dashboard', Mock.mock({
     {
       'name|+1': 2008,
       'Clothes|200-500': 1,
-      'Food|180-700': 1,
-      'Electronics|300-850': 1
+      'Food|180-400': 1,
+      'Electronics|300-550': 1
     }
   ],
   'completed|12': [

src/components/dashboard/completed.js

@@ -2,14 +2,14 @@ import React, { PropTypes } from 'react'
 import { Icon } from 'antd'
 import styles from './completed.less'
 import {color} from '../../utils'
-import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'
+import {AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from 'recharts'
 
 function Completed(props) {
   return (
     <div className={styles.sales}>
       <div className={styles.title}>TEAM TOTAL COMPLETED</div>
       <ResponsiveContainer minHeight={360}>
-      <LineChart data={props.data}>
+      <AreaChart  data={props.data}>
        <Legend verticalAlign="top"
          content={props => {
            const { payload } = props
@@ -19,17 +19,16 @@ function Completed(props) {
          }}/>
        <XAxis dataKey="name" axisLine={{stroke:color.borderBase,strokeWidth:1}}  tickLine={false}/>
        <YAxis axisLine={false} tickLine={false} />
-       <CartesianGrid vertical={false} stroke={color.borderBase} strokeWidth={1} />
+       <CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
        <Tooltip
          wrapperStyle={{border:'none',boxShadow:'4px 4px 40px rgba(0, 0, 0, 0.05)'}}
          content={content => {
          const list = content.payload.map((item,key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{background:item.color}}></span>{item.name+':'+item.value}</li>)
          return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
        }}/>
-       <Line type="monotone" dataKey="Food" stroke={color.purple} strokeWidth={3} dot={{fill:color.purple}} activeDot={{r: 5,strokeWidth:0}}/>
-       <Line type="monotone" dataKey="Clothes" stroke={color.red} strokeWidth={3} dot={{fill:color.red}}  activeDot={{r: 5,strokeWidth:0}}/>
-       <Line type="monotone" dataKey="Electronics" stroke={color.green} strokeWidth={3}  dot={{fill:color.green}}  activeDot={{r: 5,strokeWidth:0}}/>
-      </LineChart>
+       <Area  type="monotone" dataKey="Task complete" stroke={color.grass} fill={color.grass} strokeWidth={2} dot={{fill:'#fff'}} activeDot={{r: 5,fill:'#fff',stroke:color.green}}/>
+       <Area  type="monotone" dataKey="Cards Complete" stroke={color.sky} fill={color.sky} strokeWidth={2}  dot={{fill:'#fff'}} activeDot={{r: 5,fill:'#fff',stroke:color.blue}}/>
+      </AreaChart>
     </ResponsiveContainer>
     </div>
   )

src/components/dashboard/sales.js

@@ -19,7 +19,7 @@ function Sales(props) {
          }}/>
        <XAxis dataKey="name" axisLine={{stroke:color.borderBase,strokeWidth:1}}  tickLine={false}/>
        <YAxis axisLine={false} tickLine={false} />
-       <CartesianGrid vertical={false} stroke={color.borderBase} strokeWidth={1} />
+       <CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
        <Tooltip
          wrapperStyle={{border:'none',boxShadow:'4px 4px 40px rgba(0, 0, 0, 0.05)'}}
          content={content => {

src/routes/dashboard.js

@@ -8,7 +8,7 @@ import Sales from '../components/dashboard/sales'
 import Weather from '../components/dashboard/weather'
 import RecentSales from '../components/dashboard/recentSales'
 import Comments from '../components/dashboard/comments'
-// import Completed from '../components/dashboard/completed'
+import Completed from '../components/dashboard/completed'
 import styles from './dashboard.less'
 import {color} from '../utils'
 
@@ -70,7 +70,7 @@ function Dashboard({dashboard}) {
         <Card bordered={false} bodyStyle={{
           padding: '24px 36px 24px 0'
         }}>
-          {/* <Completed data={completed}/> */}
+          <Completed data={completed}/>
         </Card>
       </Col>
       <Col lg={8} md={24}>

src/utils/theme.js

@@ -7,6 +7,8 @@ module.exports = {
     yellow:'#f8c82e',
     peach:'#f797d6',
     borderBase:'#e5e5e5',
-    borderSplit:'#f4f4f4'
+    borderSplit:'#f4f4f4',
+    grass:"#d6fbb5",
+    sky:'#c1e0fc'
   }
 };