From a120a194835e0d48f1e9ffd1e3f989d5ddf9c247 Mon Sep 17 00:00:00 2001
From: limuen <limuen_dev@163.com>
Date: Thu, 10 Mar 2022 17:30:01 +0800
Subject: [PATCH] feat(function): add timeline

---
 package.json                            |  1 +
 src/components/Chart/TimeLine/index.tsx | 58 +++++++++++++++++++++++++
 src/pages/chart/timeline/index.tsx      | 24 ++++++++++
 src/router/modules/chart.tsx            |  4 ++
 4 files changed, 87 insertions(+)
 create mode 100644 src/components/Chart/TimeLine/index.tsx
 create mode 100644 src/pages/chart/timeline/index.tsx

diff --git a/package.json b/package.json
index 70b341b..08a6b95 100644
--- a/package.json
+++ b/package.json
@@ -51,6 +51,7 @@
     "react-icons": "^4.3.1",
     "react-spring": "^9.4.2",
     "react-transition-group": "^4.4.2",
+    "recharts": "^2.1.9",
     "screenfull": "^6.0.1",
     "umi": "^3.5.20"
   },
diff --git a/src/components/Chart/TimeLine/index.tsx b/src/components/Chart/TimeLine/index.tsx
new file mode 100644
index 0000000..31867f8
--- /dev/null
+++ b/src/components/Chart/TimeLine/index.tsx
@@ -0,0 +1,58 @@
+import { FC } from 'react'
+import { Card, Badge } from 'antd'
+import { ResponsiveContainer, LineChart, Line, Tooltip, XAxis, YAxis, CartesianGrid, Brush, Legend } from 'recharts'
+import moment from 'moment'
+
+const data = new Array(20).fill(null).map((_, index) => ({
+  name: moment()
+    .add(index * 30, 'minute')
+    .format('HH:mm'),
+  traffic: Math.floor(Math.random() * 120 + 1),
+  payments: Math.floor(Math.random() * 120 + 1),
+}))
+
+const CustomTooltip: FC<any> = ({ active, payload, label }) => {
+  if (active) {
+    const { value: value1, stroke: stroke1 } = payload[0]
+    const { value: value2, stroke: stroke2 } = payload[1]
+
+    return (
+      <div className="customTooltip">
+        <span className="customTooltip-title">{label}</span>
+        <ul className="customTooltip-content">
+          <li key="traffic">
+            <Badge color={stroke1} />
+            {value1}
+          </li>
+          <li key="payments">
+            <Badge color={stroke2} />
+            {value2}
+          </li>
+        </ul>
+      </div>
+    )
+  }
+
+  return null
+}
+
+const TimeLine: FC<{ loading: boolean }> = ({ loading }) => {
+  return (
+    <Card loading={loading} style={{ marginTop: 12 }}>
+      <ResponsiveContainer height={400}>
+        <LineChart data={data} syncId="anyId">
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="name" />
+          <YAxis />
+          <Tooltip content={<CustomTooltip />} />
+          <Line type="monotone" dataKey="traffic" stroke="#3F90F7" />
+          <Line type="monotone" dataKey="payments" stroke="#61BE82" />
+          <Brush dataKey="name" fill="#13c2c2" />
+          <Legend verticalAlign="top" height={40} />
+        </LineChart>
+      </ResponsiveContainer>
+    </Card>
+  )
+}
+
+export default TimeLine
diff --git a/src/pages/chart/timeline/index.tsx b/src/pages/chart/timeline/index.tsx
new file mode 100644
index 0000000..a073d05
--- /dev/null
+++ b/src/pages/chart/timeline/index.tsx
@@ -0,0 +1,24 @@
+import { FC, useState, useEffect } from 'react'
+import TimeLine from '@/components/Chart/TimeLine'
+
+const TimeLinePage: FC = () => {
+  const [loading, setLoading] = useState<boolean>(true)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setLoading(false)
+    }, 2000)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [])
+
+  return (
+    <div>
+      <TimeLine loading={loading} />
+    </div>
+  )
+}
+
+export default TimeLinePage
diff --git a/src/router/modules/chart.tsx b/src/router/modules/chart.tsx
index 183ae49..33c6001 100644
--- a/src/router/modules/chart.tsx
+++ b/src/router/modules/chart.tsx
@@ -19,6 +19,10 @@ export default {
           name: '饼图',
           path: '/chart/pie',
         },
+        {
+          name: '时间线图',
+          path: '/chart/timeline',
+        },
       ],
     },
   ],
-- 
Gitee