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 { Button } from '@/components/ui/button';
|
||||||
import { useFetchYear } from './hooks/useFetchYear';
|
import { useFetchYear } from './hooks/useFetchYear';
|
||||||
import { get5LastYear } from '@/utils/Date';
|
import { get5LastYear } from '@/utils/Date';
|
||||||
|
import { staticChartData } from './staticChart';
|
||||||
|
|
||||||
// sum -> nominal, count-> total
|
// sum -> nominal, count-> total
|
||||||
type CountType = 'sum' | 'count';
|
type CountType = 'sum' | 'count';
|
||||||
type ChartType = 'line' | 'bar';
|
type ChartType = 'line' | 'bar';
|
||||||
@ -184,9 +186,9 @@ const DashboardHomePage = () => {
|
|||||||
<div className="lg:col-span-1">
|
<div className="lg:col-span-1">
|
||||||
<Chart
|
<Chart
|
||||||
title="Overview"
|
title="Overview"
|
||||||
count={count}
|
count={12}
|
||||||
toolbar={toolbar}
|
toolbar={toolbar}
|
||||||
chartData={chartData}
|
chartData={staticChartData.series.map((data: any) => data.data)}
|
||||||
chartType={chartType}
|
chartType={chartType}
|
||||||
chartLegend={chartLegend}
|
chartLegend={chartLegend}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@ -37,7 +37,7 @@ const Chart = ({
|
|||||||
plotOptions: {
|
plotOptions: {
|
||||||
bar: {
|
bar: {
|
||||||
horizontal: false,
|
horizontal: false,
|
||||||
columnWidth: '50%'
|
columnWidth: '30%'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
dataLabels: {
|
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