Skip to content

Commit

Permalink
Removed the bubble and scatter graphs from grsphs.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@MeetDOD
MeetDOD committed Jul 12, 2024
1 parent b1e3fa1 commit 6481cc5
Showing 1 changed file with 1 addition and 84 deletions.
85 changes: 1 addition & 84 deletions admin/src/pages/Graphs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import Navbar from "../components/Navbar";
import SideBar from "../components/SideBar";
import axios from "axios";
import { Line, Bar, Bubble, Scatter } from "react-chartjs-2";
import { Line, Bar } from "react-chartjs-2";
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, ArcElement, Title, Tooltip, Legend } from "chart.js";
import { useRecoilValue } from "recoil";
import { tokenState } from "../store/atoms/auth";
Expand Down Expand Up @@ -85,39 +85,6 @@ const Graphs = () => {
};
};

const createBubbleData = ({ data, label, backgroundColor }:any) => {
return {
labels: data.labels,
datasets: [
{
label: label,
data: data.values.map((value:any, index:any) => ({
x: index,
y: value,
r: Math.sqrt(value) * 3,
})),
backgroundColor: backgroundColor,
},
],
};
};

const createScatterData = ({ data, label, backgroundColor }:any) => {
return {
labels: data.labels,
datasets: [
{
label: label,
data: data.values.map((value:any, index:any) => ({
x: index,
y: value,
})),
backgroundColor: backgroundColor,
},
],
};
};

const userData = formatData(userStats);
const postData = formatData(postStats);
const commentData = formatData(commentStats);
Expand All @@ -139,20 +106,6 @@ const Graphs = () => {
const reactionBarData = createBarData({ data: reactionData, label: "Reactions done", backgroundColor: "rgba(75, 192, 75, 0.5)" });
const contactMessageBarData = createBarData({ data: contactMessagesData, label: "Contact messages received", backgroundColor: "rgba(192, 192, 75, 0.5)" });

const userBubbleData = createBubbleData({ data: userData, label: "Users registered", backgroundColor: "rgba(75, 192, 192, 0.5)" });
const postBubbleData = createBubbleData({ data: postData, label: "Posts uploads", backgroundColor: "rgba(75, 75, 192, 0.5)" });
const commentBubbleData = createBubbleData({ data: commentData, label: "Comments done", backgroundColor: "rgba(192, 75, 192, 0.5)" });
const favoriteBubbleData = createBubbleData({ data: favoriteData, label: "Favorites done", backgroundColor: "rgba(192, 75, 75, 0.5)" });
const reactionBubbleData = createBubbleData({ data: reactionData, label: "Reactions done", backgroundColor: "rgba(75, 192, 75, 0.5)" });
const contactMessageBubbleData = createBubbleData({ data: contactMessagesData, label: "Contact messages received", backgroundColor: "rgba(192, 192, 75, 0.5)" });

const userScatterData = createScatterData({ data: userData, label: "Users registered", backgroundColor: "rgba(75, 192, 192, 0.5)" });
const postScatterData = createScatterData({ data: postData, label: "Posts uploads", backgroundColor: "rgba(75, 75, 192, 0.5)" });
const commentScatterData = createScatterData({ data: commentData, label: "Comments done", backgroundColor: "rgba(192, 75, 192, 0.5)" });
const favoriteScatterData = createScatterData({ data: favoriteData, label: "Favorites done", backgroundColor: "rgba(192, 75, 75, 0.5)" });
const reactionScatterData = createScatterData({ data: reactionData, label: "Reactions done", backgroundColor: "rgba(75, 192, 75, 0.5)" });
const contactMessageScatterData = createScatterData({ data: contactMessagesData, label: "Contact messages received", backgroundColor: "rgba(192, 192, 75, 0.5)" });

const Y = new Date();
let year = Y.getFullYear();

Expand All @@ -170,12 +123,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={userBarData} options={{ responsive: true,scales: {x: { title: { display: true, text: 'Date User registered' } }, y: { title: { display: true, text: 'User Count' } },}, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={userBubbleData} options={{ responsive: true,scales: {x: { title: { display: true, text: 'Date User registered' } }, y: { title: { display: true, text: 'User Count' } },}, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={userScatterData} options={{ responsive: true,scales: {x: { title: { display: true, text: 'Date User registered' } }, y: { title: { display: true, text: 'User Count' } },}, maintainAspectRatio: false }} />
</div>
</div>
<h3 className="mt-5 font-bold text-xl decoration-sky-500 decoration-dotted underline">Posts Over Time {year}</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2">
Expand All @@ -185,12 +132,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={postBarData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date when posted' } }, y: { title: { display: true, text: 'Posts Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={postBubbleData} options={{ responsive: true, scales: { x: { title: { display: true, text: 'Date when posted' } }, y: { title: { display: true, text: 'Posts Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={postScatterData} options={{ responsive: true, scales: { x: { title: { display: true, text: 'Date when posted' } }, y: { title: { display: true, text: 'Posts Count' } } }, maintainAspectRatio: false }} />
</div>
</div>
<h3 className="mt-5 font-bold text-xl decoration-sky-500 decoration-dotted underline">Comments Over Time {year}</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2">
Expand All @@ -200,12 +141,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={commentBarData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date when commented' } }, y: { title: { display: true, text: 'Comments Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={commentBubbleData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date when commented' } }, y: { title: { display: true, text: 'Comments Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={commentScatterData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date when commented' } }, y: { title: { display: true, text: 'Comments Count' } } }, maintainAspectRatio: false }} />
</div>
</div>
<h3 className="mt-5 font-bold text-xl decoration-sky-500 decoration-dotted underline">Favorites Over Time {year}</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2">
Expand All @@ -215,12 +150,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={favoriteBarData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'Favorite Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={favoriteBubbleData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'Favorite Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={favoriteScatterData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Date' } }, y: { title: { display: true, text: 'Favorite Count' } } }, maintainAspectRatio: false }} />
</div>
</div>
<h3 className="mt-5 font-bold text-xl decoration-sky-500 decoration-dotted underline">Reactions Over Time {year}</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2">
Expand All @@ -230,12 +159,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={reactionBarData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Reacted Date' } }, y: { title: { display: true, text: 'Reactions Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={reactionBubbleData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Reacted Date' } }, y: { title: { display: true, text: 'Reactions Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={reactionScatterData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Reacted Date' } }, y: { title: { display: true, text: 'Reactions Count' } } }, maintainAspectRatio: false }} />
</div>
</div>
<h3 className="mt-5 font-bold text-xl decoration-sky-500 decoration-dotted underline">Contact Messages Over Time {year}</h3>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 mt-2">
Expand All @@ -245,12 +168,6 @@ const Graphs = () => {
<div className="p-4 bg-white shadow rounded">
<Bar data={contactMessageBarData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Contacted Date' } }, y: { title: { display: true, text: 'Messages Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Bubble data={contactMessageBubbleData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Contacted Date' } }, y: { title: { display: true, text: 'Messages Count' } } }, maintainAspectRatio: false }} />
</div>
<div className="p-4 bg-white shadow rounded">
<Scatter data={contactMessageScatterData} options={{ responsive: true,scales: { x: { title: { display: true, text: 'Contacted Date' } }, y: { title: { display: true, text: 'Messages Count' } } }, maintainAspectRatio: false }} />
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 6481cc5

Please sign in to comment.