feat: add static chart

This commit is contained in:
Wikzyy
2025-02-20 21:53:17 +07:00
parent 5b8ba07391
commit 276240fb32
3 changed files with 194 additions and 3 deletions

View File

@ -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}
/>

View File

@ -37,7 +37,7 @@ const Chart = ({
plotOptions: {
bar: {
horizontal: false,
columnWidth: '50%'
columnWidth: '30%'
}
},
dataLabels: {

View 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'
// }
// }
// };