From 7f0e81d8b9d0c8ef2ccd4b5d4ab4c5afb4b569cc Mon Sep 17 00:00:00 2001
From: zuiidea <zuiiidea@gmail.com>
Date: Mon, 28 Nov 2016 22:46:16 +0800
Subject: [PATCH] sales charts

---
 README.md                           |  1 +
 src/components/dashboard/sales.js   |  7 ++++++-
 src/components/dashboard/sales.less | 21 +++++++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index adae91a..0664a60 100644
--- a/README.md
+++ b/README.md
@@ -17,6 +17,7 @@
 - [x] 主布局示例
 - [x] 数据列表
 - [x] 表单相关
+- [ ] dashbord首页
 - [ ] 可视化图表
 
 ## 开发及构建
diff --git a/src/components/dashboard/sales.js b/src/components/dashboard/sales.js
index 9ed9d3a..3c6c592 100644
--- a/src/components/dashboard/sales.js
+++ b/src/components/dashboard/sales.js
@@ -24,7 +24,12 @@ 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} />
-       <Tooltip/>
+       <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}}/>
diff --git a/src/components/dashboard/sales.less b/src/components/dashboard/sales.less
index 82fe6cf..9483687 100644
--- a/src/components/dashboard/sales.less
+++ b/src/components/dashboard/sales.less
@@ -5,3 +5,24 @@
     font-size: 16px;
   }
 }
+.tooltip{
+  background: #fff;
+  padding: 20px;
+  font-size: 14px;
+  .tiptitle{
+    font-weight: 700;
+    font-size: 16px;
+    margin-bottom: 8px;
+  }
+  .tipitem{
+    height: 32px;
+    line-height: 32px;
+  }
+  .radiusdot{
+    width:12px;
+    height:12px;
+    margin-right: 8px;
+    border-radius:50%;
+    display:inline-block;
+  }
+}