From 53d3a60cdd26ac094f4b81b4702d9ae787d9dcb4 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Tue, 2 Aug 2022 01:36:07 +0800
Subject: [PATCH] fe-35 ej2-react-charts Stacked Chart

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

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