feat: add static chart
This commit is contained in:
@ -14,6 +14,8 @@ import { useFetchCardData, useFetchChartData } from './hooks';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useFetchYear } from './hooks/useFetchYear';
|
||||
import { get5LastYear } from '@/utils/Date';
|
||||
import { staticChartData } from './staticChart';
|
||||
|
||||
// sum -> nominal, count-> total
|
||||
type CountType = 'sum' | 'count';
|
||||
type ChartType = 'line' | 'bar';
|
||||
@ -184,9 +186,9 @@ const DashboardHomePage = () => {
|
||||
<div className="lg:col-span-1">
|
||||
<Chart
|
||||
title="Overview"
|
||||
count={count}
|
||||
count={12}
|
||||
toolbar={toolbar}
|
||||
chartData={chartData}
|
||||
chartData={staticChartData.series.map((data: any) => data.data)}
|
||||
chartType={chartType}
|
||||
chartLegend={chartLegend}
|
||||
/>
|
||||
|
||||
@ -37,7 +37,7 @@ const Chart = ({
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
columnWidth: '50%'
|
||||
columnWidth: '30%'
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
|
||||
189
src/pages/dashboards/home/staticChart.tsx
Normal file
189
src/pages/dashboards/home/staticChart.tsx
Normal file
@ -0,0 +1,189 @@
|
||||
export const staticChartData = {
|
||||
series: [
|
||||
{
|
||||
categories: 'Jan',
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 01',
|
||||
y: 50
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 02',
|
||||
y: 75
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 03',
|
||||
y: 200
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 04',
|
||||
y: 125
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 05',
|
||||
y: 150
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: 'Jan 06',
|
||||
y: 175
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
}
|
||||
};
|
||||
|
||||
// const staticChartData = {
|
||||
// series: [
|
||||
// {
|
||||
// name: 'Sales',
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Jan',
|
||||
// y: 20
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// name: 'Orders',
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Feb',
|
||||
// y: 32
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Mar',
|
||||
// y: 41
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Apr',
|
||||
// y: 38
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'May',
|
||||
// y: 50
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Jun',
|
||||
// y: 47
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Jul',
|
||||
// y: 62
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Aug',
|
||||
// y: 51
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Sep',
|
||||
// y: 25
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Oct',
|
||||
// y: 72
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Nov',
|
||||
// y: 70
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// data: [
|
||||
// {
|
||||
// x: 'Des',
|
||||
// y: 100
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// ],
|
||||
// options: {
|
||||
// chart: {
|
||||
// type: chartType,
|
||||
// height: 350
|
||||
// },
|
||||
// title: {
|
||||
// text: 'Overview',
|
||||
// align: 'center'
|
||||
// },
|
||||
// xaxis: {
|
||||
// categories: [
|
||||
// 'Jan',
|
||||
// 'Feb',
|
||||
// 'Mar',
|
||||
// 'Apr',
|
||||
// 'May',
|
||||
// 'Jun',
|
||||
// 'Jul',
|
||||
// 'Aug',
|
||||
// 'Sep',
|
||||
// 'Oct',
|
||||
// 'Nov',
|
||||
// 'Dec'
|
||||
// ]
|
||||
// },
|
||||
// legend: {
|
||||
// show: chartLegend === 'true'
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
Reference in New Issue
Block a user