@ -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; |
@ -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; |
@ -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'; | |||||