Skip to content

fix layout mobile for analytics #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JoeClos wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix layout mobile for analytics #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 206 additions & 18 deletions course-subscription-app/src/pages/admin/Analytics.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,199 @@
// import { useEffect, useState } from "react";
// import {
// LineChart,
// Line,
// XAxis,
// YAxis,
// CartesianGrid,
// Tooltip,
// Legend,
// ResponsiveContainer,
// } from "recharts";
// import {
// Box,
// Grid2,
// Card,
// Typography,
// Table,
// TableBody,
// TableCell,
// TableContainer,
// TableHead,
// TableRow,
// Paper,
// CircularProgress,
// } from "@mui/material"; // MUI components
// import { useCourses } from "../../store/CourseContext";
// import { useUsers } from "../../store/UserContext";

// const groupByMonthAndYear = (courses, users) => {
// const months = [
// "January",
// "February",
// "March",
// "April",
// "May",
// "June",
// "July",
// "August",
// "September",
// "October",
// "November",
// "December",
// ];

// const grouped = {};

// // Group courses by month and year
// courses.forEach((course) => {
// const date = new Date(course.createdAt);
// const monthIndex = date.getMonth();
// const year = date.getFullYear();
// const key = `${year}-${monthIndex}`;

// if (!grouped[key]) {
// grouped[key] = {
// name: `${months[monthIndex]} ${year}`,
// users: 0,
// courses: 0,
// };
// }
// grouped[key].courses += 1;
// });

// // Group users by month and year
// users.forEach((user) => {
// const date = new Date(user.createdAt);
// const monthIndex = date.getMonth();
// const year = date.getFullYear();
// const key = `${year}-${monthIndex}`;

// if (!grouped[key]) {
// grouped[key] = {
// name: `${months[monthIndex]} ${year}`,
// users: 0,
// courses: 0,
// };
// }
// grouped[key].users += 1;
// });

// return Object.values(grouped).sort(
// (a, b) => new Date(a.name) - new Date(b.name)
// );
// };

// const Analytics = () => {
// const [analyticsData, setAnalyticsData] = useState([]);
// const { courses, getCourses } = useCourses();
// const { users, getUsers } = useUsers();
// const [loading, setLoading] = useState(true);

// useEffect(() => {
// const fetchData = async () => {
// setLoading(true); // Start loading

// // Fetch courses and users in parallel with await
// await Promise.all([getCourses(), getUsers()]);

// // Process the data once both are fetched
// const groupedData = groupByMonthAndYear(courses, users);
// setAnalyticsData(groupedData);
// setLoading(false); // End loading
// };

// fetchData();
// // Empty dependency array ensures this effect runs once when the component mounts
// }, []);

// if (loading) {
// return (
// <Box
// display="flex"
// justifyContent="center"
// alignItems="center"
// minHeight="100vh"
// >
// <CircularProgress />
// </Box>
// );
// }

// return (
// <Box>
// <Typography
// variant="h4"
// align="center"
// gutterBottom
// mt={6}
// sx={{ padding: "0 16px" }}
// >
// Analytics Overview
// </Typography>

// <Grid2 container spacing={3}>
// {/* Line Chart Section */}
// <Grid2 item xs={12} sm={12} md={8}>
// <Card sx={{ p: 2 }}>
// <Typography variant="h6" gutterBottom>
// Users and Courses Growth (Monthly)
// </Typography>
// <ResponsiveContainer width="100%" height={400}>
// <LineChart data={analyticsData}>
// <CartesianGrid strokeDasharray="3 3" />
// <XAxis dataKey="name" />
// <YAxis />
// <Tooltip />
// <Legend />
// <Line type="monotone" dataKey="users" stroke="#8884d8" />
// <Line type="monotone" dataKey="courses" stroke="#82ca9d" />
// </LineChart>
// </ResponsiveContainer>
// </Card>
// </Grid2>

// {/* Data Table Section */}
// <Grid2 item xs={12} sm={12} md={4}>
// <Card sx={{ p: 2 }}>
// <Typography variant="h6" gutterBottom>
// Detailed Data
// </Typography>
// <TableContainer component={Paper}>
// <Table>
// <TableHead>
// <TableRow>
// <TableCell sx={{ fontWeight: "bold" }}>
// Month and Year
// </TableCell>
// <TableCell align="right" sx={{ fontWeight: "bold" }}>
// Users Registered
// </TableCell>
// <TableCell align="right" sx={{ fontWeight: "bold" }}>
// Courses Added
// </TableCell>
// </TableRow>
// </TableHead>
// <TableBody>
// {analyticsData.map((item, index) => (
// <TableRow key={index}>
// <TableCell>{item.name}</TableCell>
// <TableCell align="right">{item.users || 0}</TableCell>
// <TableCell align="right">{item.courses || 0}</TableCell>
// </TableRow>
// ))}
// </TableBody>
// </Table>
// </TableContainer>
// </Card>
// </Grid2>
// </Grid2>
// </Box>
// );
// };

// export default Analytics;


import { useEffect, useState } from "react";
import {
LineChart,
Expand All @@ -11,7 +207,7 @@ import {
} from "recharts";
import {
Box,
Grid2,
Grid,
Card,
Typography,
Table,
Expand Down Expand Up @@ -120,20 +316,14 @@ const Analytics = () => {
}

return (
<Box>
<Typography
variant="h4"
align="center"
gutterBottom
mt={6}
sx={{ padding: "0 16px" }}
>
<Box sx={{ padding: "0 24px", marginTop: "56px" }}>
<Typography variant="h4" align="center" gutterBottom>
Analytics Overview
</Typography>

<Grid2 container spacing={3}>
<Grid container spacing={3}>
{/* Line Chart Section */}
<Grid2 item xs={12} sm={12} md={8}>
<Grid item xs={12} sm={12} md={8}>
<Card sx={{ p: 2 }}>
<Typography variant="h6" gutterBottom>
Users and Courses Growth (Monthly)
Expand All @@ -150,10 +340,10 @@ const Analytics = () => {
</LineChart>
</ResponsiveContainer>
</Card>
</Grid2>
</Grid>

{/* Data Table Section */}
<Grid2 item xs={12} sm={12} md={4}>
<Grid item xs={12} sm={12} md={4}>
<Card sx={{ p: 2 }}>
<Typography variant="h6" gutterBottom>
Detailed Data
Expand All @@ -162,9 +352,7 @@ const Analytics = () => {
<Table>
<TableHead>
<TableRow>
<TableCell sx={{ fontWeight: "bold" }}>
Month and Year
</TableCell>
<TableCell sx={{ fontWeight: "bold" }}>Month and Year</TableCell>
<TableCell align="right" sx={{ fontWeight: "bold" }}>
Users Registered
</TableCell>
Expand All @@ -185,8 +373,8 @@ const Analytics = () => {
</Table>
</TableContainer>
</Card>
</Grid2>
</Grid2>
</Grid>
</Grid>
</Box>
);
};
Expand Down