From 2928ffd7dcec5aefafbf5e12a70d82f0627fb334 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Mon, 1 Aug 2022 01:32:46 +0800
Subject: [PATCH] =?UTF-8?q?fe-31=20ej2-react-charts=20=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/components/Charts/LineChart.jsx | 30 +++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 lazy-timer-fe/src/components/Charts/LineChart.jsx

diff --git a/lazy-timer-fe/src/components/Charts/LineChart.jsx b/lazy-timer-fe/src/components/Charts/LineChart.jsx
new file mode 100644
index 0000000..8909279
--- /dev/null
+++ b/lazy-timer-fe/src/components/Charts/LineChart.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, LineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-react-charts';
+
+import { lineCustomSeries, LinePrimaryXAxis, LinePrimaryYAxis } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const LineChart = () => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <ChartComponent
+      id="line-chart"
+      height="420px"
+      primaryXAxis={LinePrimaryXAxis}
+      primaryYAxis={LinePrimaryYAxis}
+      chartArea={{ border: { width: 0 } }}
+      tooltip={{ enable: true }}
+      background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+      legendSettings={{ background: 'white' }}
+    >
+      <Inject services={[LineSeries, DateTime, Legend, Tooltip]} />
+      <SeriesCollectionDirective>
+        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+        {lineCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
+      </SeriesCollectionDirective>
+    </ChartComponent>
+  );
+};
+
+export default LineChart;