import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement } from 'chart.js';
import { Bar, Doughnut } from 'react-chartjs-2';
import { Head } from '@inertiajs/react';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setPageTitle } from '@/Components/features/common/headerSlice';
import Squares2X2Icon from '@heroicons/react/24/outline/Squares2X2Icon'
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement);
const Dashboard = () => {
const barChartData = {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
datasets: [
{
label: 'CHN',
data: [12, 19, 8, 15, 12, 8, 16, 20, 15, 14],
backgroundColor: 'rgb(196, 151, 239)',
},
{
label: 'USA',
data: [19, 12, 15, 8, 9, 16, 14, 12, 10, 15],
backgroundColor: 'rgb(86, 207, 225)',
},
{
label: 'UK',
data: [15, 15, 10, 12, 20, 14, 8, 16, 10, 18],
backgroundColor: 'rgb(255, 170, 145)',
},
],
};
const doughnutChartData = {
labels: ['Social Media', 'Direct', 'Email', 'Organic'],
datasets: [
{
data: [35, 30, 15, 20],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(75, 192, 192)',
],
borderWidth: 0,
},
],
};
const barChartOptions = {
responsive: true,
plugins: {
legend: {
display: false,
},
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
ticks: {
display: false,
},
},
},
maintainAspectRatio: false,
};
const doughnutChartOptions = {
responsive: true,
plugins: {
legend: {
display: false,
},
},
cutout: '70%',
maintainAspectRatio: false,
};
const dispatch = useDispatch();
useEffect(() => {
dispatch(setPageTitle("Dashboard"));
}, [dispatch]);
return (
Weekly Sales
$ 15,0000
Increased by 60%
Weekly Orders
45,6334
Decreased by 10%
Visitors Online
95,5741
Increased by 5%
Visit And Sales Statistics
Traffic Sources
Social Media
Direct
Email
Organic
);
};
export default Dashboard;