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