fe-14 完成面积图组件和柱状图组件

lazy-timer-fe/src/pages/Charts/Area.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, DateTime, SplineAreaSeries, Legend } from '@syncfusion/ej2-react-charts';
+
+import { ChartsHeader } from '../../components';
+import { areaCustomSeries, areaPrimaryXAxis, areaPrimaryYAxis } from '../../data/dummy';
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const Area = () => {
+  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="Area" title="Inflation Rate in percentage" />
+      <div className="w-full">
+        <ChartComponent
+          id="charts"
+          primaryXAxis={areaPrimaryXAxis}
+          primaryYAxis={areaPrimaryYAxis}
+          chartArea={{ border: { width: 0 } }}
+          background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+          legendSettings={{ background: 'white' }}
+        >
+          <Inject services={[SplineAreaSeries, DateTime, Legend]} />
+          <SeriesCollectionDirective>
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            {areaCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
+          </SeriesCollectionDirective>
+        </ChartComponent>
+      </div>
+    </div>
+  );
+};
+
+export default Area;

lazy-timer-fe/src/pages/Charts/Bar.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, ColumnSeries, DataLabel } from '@syncfusion/ej2-react-charts';
+
+import { barCustomSeries, barPrimaryXAxis, barPrimaryYAxis } from '../../data/dummy';
+import { ChartsHeader } from '../../components';
+import { useStateContext } from '../../contexts/ContextProvider';
+
+const Bar = () => {
+  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="Bar" title="Olympic Medal Counts - RIO" />
+      <div className=" w-full">
+        <ChartComponent
+          id="charts"
+          primaryXAxis={barPrimaryXAxis}
+          primaryYAxis={barPrimaryYAxis}
+          chartArea={{ border: { width: 0 } }}
+          tooltip={{ enable: true }}
+          background={currentMode === 'Dark' ? '#33373E' : '#fff'}
+          legendSettings={{ background: 'white' }}
+        >
+          <Inject services={[ColumnSeries, Legend, Tooltip, Category, DataLabel]} />
+          <SeriesCollectionDirective>
+            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+            {barCustomSeries.map((item, index) => <SeriesDirective key={index} {...item} />)}
+          </SeriesCollectionDirective>
+        </ChartComponent>
+      </div>
+    </div>
+  );
+};
+
+export default Bar;

lazy-timer-fe/src/pages/index.jsx

@@ -0,0 +1,17 @@
+export { default as Ecommerce } from './Ecommerce';
+export { default as Kanban } from './Kanban';
+export { default as Orders } from './Orders';
+export { default as Employees } from './Employees';
+export { default as Editor } from './Editor';
+export { default as Customers } from './Customers';
+export { default as ColorPicker } from './ColorPicker';
+export { default as Calendar } from './Calendar';
+export { default as Area } from './Charts/Area';
+export { default as Bar } from './Charts/Bar';
+export { default as ColorMapping } from './Charts/ColorMapping';
+export { default as Financial } from './Charts/Financial';
+export { default as Line } from './Charts/Line';
+export { default as Pie } from './Charts/Pie';
+export { default as Pyramid } from './Charts/Pyramid';
+export { default as Stacked } from './Charts/Stacked';
+