import React, { useEffect, useRef } from 'react';
import { Chart, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import Navbar from '../components/Navbar';
Chart.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
const Dashboard = () => {
const userStats = { totalUsers: 100, totalAds: 50, totalRevenue: 5000 };
const chartData = {
labels: ['Users', 'Revenue'],
datasets: [
{
label: 'Statistics',
data: [userStats.totalUsers, userStats.totalRevenue],
backgroundColor: ['rgba(75,192,192,0.6)', 'rgba(153,102,255,0.6)'],
},
],
};
const chartRef = useRef(null);
useEffect(() => {
const chartInstance = chartRef.current.chartInstance;
return () => {
if (chartInstance) {
chartInstance.destroy();
}
};
}, []);
return (
<div>
<Navbar />
<div className="container mt-5">
<h4 className="mb-4">Dashboard</h4>
<div className="mb-4">
<h6>Total Users: {userStats.totalUsers}</h6>
<h6>Total Ads: {userStats.totalAds}</h6>
<h6>Total Revenue: {userStats.totalRevenue}</h6>
</div>
<div>
<Bar ref={chartRef} data={chartData} />
</div>
</div>
</div>
);
};
export default Dashboard;