Spaces:
Running
Running
File size: 2,326 Bytes
4fb0c68 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
import React from 'react';
import { Line, Bar, Doughnut } from 'react-chartjs-2';
import Sidebar from '../components/SideBarGPT';
const Analytics = () => {
// Sample data for charts
const messagesOverTimeData = {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [
{
label: 'Messages',
data: [65, 59, 80, 81, 56, 55],
fill: false,
backgroundColor: 'rgba(75,192,192,0.2)',
borderColor: 'rgba(75,192,192,1)',
},
],
};
const userBotMessagesData = {
labels: ['User', 'Bot'],
datasets: [
{
label: 'Messages',
data: [300, 450],
backgroundColor: ['#36A2EB', '#FF6384'],
},
],
};
const responseTimeData = {
labels: ['<1s', '1-2s', '2-3s', '>3s'],
datasets: [
{
label: 'Response Time',
data: [50, 100, 75, 25],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
],
borderWidth: 1,
},
],
};
return (
<div className="flex">
<Sidebar />
<div className="ml-64 flex-1 p-6 bg-gray-100">
<div className="p-4 bg-white rounded-lg shadow">
<h2 className="text-2xl font-bold mb-4">Analytics</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className="p-4 bg-gray-100 rounded-lg">
<h3 className="text-xl font-semibold mb-2">Messages Over Time</h3>
<Line data={messagesOverTimeData} />
</div>
<div className="p-4 bg-gray-100 rounded-lg">
<h3 className="text-xl font-semibold mb-2">User vs Bot Messages</h3>
<Doughnut data={userBotMessagesData} />
</div>
<div className="p-4 bg-gray-100 rounded-lg">
<h3 className="text-xl font-semibold mb-2">Response Time Distribution</h3>
<Bar data={responseTimeData} />
</div>
</div>
</div>
</div>
</div>
);
};
export default Analytics;
|