From 8337cc3cde429633f6955cfdbf875f36b7e1b753 Mon Sep 17 00:00:00 2001
From: Chunxian Zhang <1836891291@qq.com>
Date: Sat, 9 Jul 2022 01:16:53 +0800
Subject: [PATCH] =?UTF-8?q?fe-19=20=E9=87=91=E5=AD=97=E5=A1=94=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/lazy-timer-fe/src/pages/Charts/Pyramid.jsx b/lazy-timer-fe/src/pages/Charts/Pyramid.jsx
new file mode 100644
index 0000000..3b8e8b7
--- /dev/null
+++ b/lazy-timer-fe/src/pages/Charts/Pyramid.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, AccumulationDataLabel, AccumulationTooltip, PyramidSeries, AccumulationSelection } from '@syncfusion/ej2-react-charts';
+
+import { PyramidData } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+import { ChartsHeader } from '../../components';
+
+const Pyramid = () => {
+  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="Pyramid" title="Food Comparison Chart" />
+      <div className="w-full">
+        <AccumulationChartComponent
+          id="pyramid-chart"
+          legendSettings={{ background: 'white' }}
+          tooltip={{ enable: true }}
+          background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+        >
+          <Inject services={[AccumulationDataLabel, AccumulationTooltip, PyramidSeries, AccumulationLegend, AccumulationSelection]} />
+          <AccumulationSeriesCollectionDirective>
+            <AccumulationSeriesDirective
+              name="Food"
+              dataSource={PyramidData}
+              xName="x"
+              yName="y"
+              type="Pyramid"
+              width="45%"
+              height="80%"
+              neckWidth="15%"
+              gapRatio={0.03}
+              explode
+              emptyPointSettings={{ mode: 'Drop', fill: 'red' }}
+              dataLabel={{
+                visible: true,
+                position: 'Inside',
+                name: 'text',
+              }}
+            />
+          </AccumulationSeriesCollectionDirective>
+        </AccumulationChartComponent>
+      </div>
+    </div>
+  );
+};
+
+export default Pyramid;