From 6338b8c5bf04a0a44252563bae803f96d3a093ec Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Wed, 6 Jul 2022 01:14:54 +0800
Subject: [PATCH] =?UTF-8?q?fe-16=20=E5=AE=8C=E6=88=90=E8=82=A1=E7=A5=A8?=
 =?UTF-8?q?=E6=A1=91=E5=9F=BA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 lazy-timer-fe/src/pages/Charts/Financial.jsx | 53 ++++++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 lazy-timer-fe/src/pages/Charts/Financial.jsx

diff --git a/lazy-timer-fe/src/pages/Charts/Financial.jsx b/lazy-timer-fe/src/pages/Charts/Financial.jsx
new file mode 100644
index 0000000..acccdf2
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Charts/Financial.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, HiloSeries, Tooltip, DateTime, Zoom, Logarithmic, Crosshair } from '@syncfusion/ej2-react-charts';
+
+import { financialChartData, FinancialPrimaryXAxis, FinancialPrimaryYAxis } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+import { ChartsHeader } from '../../components';
+
+const date1 = new Date('2017, 1, 1');
+
+// eslint-disable-next-line consistent-return
+function filterValue(value) {
+  if (value.x >= date1) {
+    // eslint-disable-next-line no-sequences
+    return value.x, value.high, value.low;
+  }
+}
+const returnValue = financialChartData.filter(filterValue);
+
+const Financial = () => {
+  const { currentMode } = useStateContext();
+
+  return (
+    <div className="m-4 md:m-10 mt-24 p-10 bg-white dark:bg-secondary-dark-bg rounded-3xl">
+      <ChartsHeader category="Financial" title="AAPLE Historical" />
+      <div className="w-full">
+        <ChartComponent
+          id="charts"
+          primaryXAxis={FinancialPrimaryXAxis}
+          primaryYAxis={FinancialPrimaryYAxis}
+          chartArea={{ border: { width: 0 } }}
+          tooltip={{ enable: true, shared: true }}
+          crosshair={{ enable: true, lineType: 'Vertical', line: { width: 0 } }}
+          background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+        >
+          <Inject services={[HiloSeries, Tooltip, DateTime, Logarithmic, Crosshair, Zoom]} />
+          <SeriesCollectionDirective>
+            <SeriesDirective
+              dataSource={returnValue}
+              xName="x"
+              yName="low"
+              name="Apple Inc"
+              type="Hilo"
+              low="low"
+              high="high"
+            />
+          </SeriesCollectionDirective>
+        </ChartComponent>
+      </div>
+    </div>
+  );
+};
+
+export default Financial;