diff --git a/BackEnd/server.py b/BackEnd/server.py index 116af7c..8810c31 100644 --- a/BackEnd/server.py +++ b/BackEnd/server.py @@ -483,6 +483,25 @@ def get_recommendations(): return recommendations_json_string +# Sample data +total_movies = 1000 +total_users = 5000 + +@app.route('/totalMovies', methods=['GET']) +def get_total_movies(): + # You can fetch this data from a database or any other source + response_data = { + 'total_movies': total_movies + } + return jsonify(response_data) + +@app.route('/totalUsers', methods=['GET']) +def get_total_users(): + # You can fetch this data from a database or any other source + response_data = { + 'total_users': total_users + } + return jsonify(response_data) # Route for seeing a data @app.route('/data') diff --git a/FrontEnd/pages/MovieRating.js b/FrontEnd/pages/MovieRating.js index be76a80..b0be988 100644 --- a/FrontEnd/pages/MovieRating.js +++ b/FrontEnd/pages/MovieRating.js @@ -19,9 +19,9 @@ import Slider from "@mui/material/Slider"; import Typography from "@mui/material/Typography"; import axios from "axios"; -const lightTheme = createTheme({ +const darkTheme = createTheme({ palette: { - mode: "light", + mode: "dark", }, }); @@ -120,20 +120,23 @@ export default function MovieRatings() { return ( <> - + -

___________Suggestions Based on ReleaseDate

+
+

Suggestions Based on ReleaseDate

+
@@ -141,30 +144,37 @@ export default function MovieRatings() { Generated from Movie Rating - Rank - Movie Title - Genres - Votes - Rating - Release Date - Watched? - Review? - Reviewed + RANK + MOVIE TITLE + GENRE(S) + VOTES + RATING + RELEASE DATE + WATCHED? + REVIEW? + REVIEWED {jsonfile.map((movie) => { return( - {movie.id} - {movie.title} - {movie.genres} - {movie.vote_count} - {movie.vote_average} - {movie.release_date} + {movie.id} + {movie.title} + {movie.genres} + {movie.vote_count} + {movie.vote_average} + {movie.release_date} - + {reviewedMovies.includes(movie.id) ? "True" : "False"} diff --git a/FrontEnd/pages/Pagination.js b/FrontEnd/pages/Pagination.js index 2c2e161..3eec3dd 100644 --- a/FrontEnd/pages/Pagination.js +++ b/FrontEnd/pages/Pagination.js @@ -34,23 +34,22 @@ const PaginationApp = () => { const totalTableHeight = 30 + data.length * 30 + 1; return ( -
+
data[index]} headerClassName="table-header" - rowClassName={({ index }) => index % 2 === 0 ? 'even-row' : 'odd-row'} + rowClassName={({ index }) => (index % 2 === 0 ? 'even-row' : 'odd-row')} > - - - - - - + + + + +
); @@ -80,15 +79,15 @@ const PaginationApp = () => { return (
-
+
- - - diff --git a/FrontEnd/pages/analytics.js b/FrontEnd/pages/analytics.js index 2fd429f..4237528 100644 --- a/FrontEnd/pages/analytics.js +++ b/FrontEnd/pages/analytics.js @@ -1,17 +1,32 @@ -// import React, { useState, useEffect } from "react"; -// import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from "@mui/material"; -// import { ThemeProvider, createTheme, Select, MenuItem } from "@mui/material/styles"; -// import CssBaseline from "@mui/material/CssBaseline"; -// import { Container, Typography } from "@mui/material"; -// import { Box } from "@mui/material"; -// import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, LineChart, Line, PieChart, Pie, Cell } from "recharts"; -// import axios from "axios"; - import React, { useState, useEffect } from "react"; import { ThemeProvider, createTheme } from "@mui/material/styles"; import CssBaseline from "@mui/material/CssBaseline"; -import { Container, Typography, Button, Dialog, Select, MenuItem, Box, DialogTitle, DialogContent, DialogActions } from "@mui/material"; -import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, LineChart, Line, PieChart, Pie, Cell } from "recharts"; +import { + Container, + Typography, + Button, + Dialog, + Select, + MenuItem, + Box, + DialogTitle, + DialogContent, + DialogActions, +} from "@mui/material"; +import { + BarChart, + Bar, + XAxis, + YAxis, + CartesianGrid, + Tooltip, + Legend, + LineChart, + Line, + PieChart, + Pie, + Cell, +} from "recharts"; import axios from "axios"; const darkTheme = createTheme({ @@ -41,55 +56,99 @@ const dummyPieData = [ { label: "Others", value: 10 }, ]; -const COLORS = ["#8884d8", "#82ca9d", "#ffc658", "#ff8042"]; +const COLORS = ["#8884d8", "#82ca9d", "#ffc658", "#ff8042"]; function Analytics() { - const [isBarChartOpen, setIsBarChartOpen] = useState(false); - const [isLineChartOpen, setIsLineChartOpen] = useState(false); - const [isPieChartOpen, setIsPieChartOpen] = useState(false); - const [pieData, setPieData] = useState([]); - const [selectedAgeRange, setSelectedAgeRange] = useState(null); - + const [isBarChartOpen, setIsBarChartOpen] = useState(false); + const [isLineChartOpen, setIsLineChartOpen] = useState(false); + const [isPieChartOpen, setIsPieChartOpen] = useState(false); + const [pieData, setPieData] = useState([]); + const [selectedAgeRange, setSelectedAgeRange] = useState(null); + const [isTotalMoviesChartOpen, setIsTotalMoviesChartOpen] = useState(false); + + const [totalMovies, setTotalMovies] = useState(0); + const [totalUsers, setTotalUsers] = useState(0); + + const openBarChartDialog = () => { + setIsBarChartOpen(true); + }; + + const closeBarChartDialog = () => { + setIsBarChartOpen(false); + }; + + const openLineChartDialog = () => { + setIsLineChartOpen(true); + }; + + const closeLineChartDialog = () => { + setIsLineChartOpen(false); + }; + + const openPieChartDialog = () => { + setIsPieChartOpen(true); + }; + + const closePieChartDialog = () => { + setIsPieChartOpen(false); + }; - const openBarChartDialog = () => { - setIsBarChartOpen(true); - }; - - const closeBarChartDialog = () => { - setIsBarChartOpen(false); - }; - - const openLineChartDialog = () => { - setIsLineChartOpen(true); - }; - - const closeLineChartDialog = () => { - setIsLineChartOpen(false); - }; - - const openPieChartDialog = () => { - setIsPieChartOpen(true); - }; - - const closePieChartDialog = () => { - setIsPieChartOpen(false); - }; + const openTotalMoviesChartDialog = () => { + setIsTotalMoviesChartOpen(true); + }; + + const closeTotalMoviesChartDialog = () => { + setIsTotalMoviesChartOpen(false); + }; + + // Add this line to declare isTotalUsersChartOpen state + const [isTotalUsersChartOpen, setIsTotalUsersChartOpen] = useState(false); + + const openTotalUsersChartDialog = () => { + setIsTotalUsersChartOpen(true); + }; + + const closeTotalUsersChartDialog = () => { + setIsTotalUsersChartOpen(false); + }; useEffect(() => { // Fetch pie chart data using Axios from the Flask endpoint - axios.get("http://localhost:8003/genreDistribution") + axios + .get("http://localhost:8003/genreDistribution") .then((response) => { setPieData(response.data); }) .catch((error) => { console.error("Error fetching pie chart data:", error); }); + + // Fetch the total number of movies + axios + .get("http://localhost:8003/totalMovies") + .then((response) => { + setTotalMovies(response.data.total_movies); + }) + .catch((error) => { + console.error("Error fetching total movies:", error); + }); + + // Fetch the total number of users - Add this part + axios + .get("http://localhost:8003/totalUsers") + .then((response) => { + setTotalUsers(response.data.total_users); + }) + .catch((error) => { + console.error("Error fetching total users:", error); + }); }, []); const handleAgeRangeChange = (event) => { setSelectedAgeRange(event.target.value); // Make an API call to fetch data based on the selected age range - axios.get(`http://localhost:8003/genreDistribution?ageRange=${event.target.value}`) + axios + .get(`http://localhost:8003/genreDistribution?ageRange=${event.target.value}`) .then((response) => { setPieData(response.data); }) @@ -97,7 +156,9 @@ function Analytics() { console.error("Error fetching pie chart data:", error); }); }; - const filteredPieData = pieData.filter(entry => entry.count > 0); + + const filteredPieData = pieData.filter((entry) => entry.count > 0); + return ( @@ -106,7 +167,6 @@ function Analytics() { marginTop: 8, display: "flex", flexDirection: "column", - backgroundColor: "black", alignItems: "center", width: "900px", borderRadius: 8, @@ -114,21 +174,25 @@ function Analytics() { marginRight: "auto", }} > -

Analytics

+

ANALYTICS

{/* Bar Chart */}
- + Bar Chart @@ -139,30 +203,32 @@ function Analytics() { - - - Bar Chart - - - - - - - - - - - - - - +
+ + + Bar Chart + + + + + + + + + + + + + + +
{/* Line Chart */}
- + Line Chart @@ -173,27 +239,32 @@ function Analytics() { - - - - - - - - - - - - - - +
+ + + Line Chart + + + + + + + + + + + + + + +
{/* Pie Chart */}
- + Pie Chart @@ -212,51 +283,125 @@ function Analytics() { ))} - - - - - - entry.genre} - > - {filteredPieData.map((entry, index) => ( - - ))} - - `No. of users - ${value}`} /> - - - - - - +
+ + + + + + entry.genre} + > + {filteredPieData.map((entry, index) => ( + + ))} + + `No. of users - ${value}`} /> + + + + + + +
+
+ + {/* Total Movies Bar Chart */} +
+ + Movies + + + + + + + + + +
+ + + Movies Chart + + + + + + + + + + + + + + +
+
+ + {/* Total Users Bar Chart */} +
+ + Total Users + + + + + + + + + +
+ + + Users Chart + + + + + + + + + + + + + + +
diff --git a/FrontEnd/pages/interestsFromSurvey.js b/FrontEnd/pages/interestsFromSurvey.js index 16f678d..cc2c9ff 100644 --- a/FrontEnd/pages/interestsFromSurvey.js +++ b/FrontEnd/pages/interestsFromSurvey.js @@ -19,20 +19,37 @@ import Slider from "@mui/material/Slider"; import Typography from "@mui/material/Typography"; import axios from "axios"; -const lightTheme = createTheme({ +const darkTheme = createTheme({ palette: { - mode: "light", + mode: "dark", }, }); const StyledTableRow = styled(TableRow)(({ theme }) => ({ - backgroundColor: theme.palette.common.black, + backgroundColor: "black", // Set the background color to black +})); + +const StyledTableHeaderCell = styled(TableCell)(({ theme }) => ({ + color: "#178582", + fontWeight: "bold", + backgroundColor: "black", // Change this to your desired background color +})); + +const CustomButton = styled(Button)(({ theme }) => ({ + backgroundColor: "#178582", + color: "white", + "&:hover": { + backgroundColor: "#178582", + }, +})); + +const CustomTableCell = styled(TableCell)(({ theme }) => ({ + color: "#178582", + fontWeight: "bold", })); const jsonfile = [ - { id: 1, title: "Movie 1", genres: "Action", vote_average: 9.5, Rated: "PG-13" }, - { id: 2, title: "Movie 2", genres: "Drama", vote_average: 8.7, Rated: "R" }, - // ... + // ... (your movie data) ]; const theme = createTheme({ @@ -47,15 +64,15 @@ export default function MovieshowerFromInterests() { const [openWatchedConfirmation, setOpenWatchedConfirmation] = useState(false); const [selectedMovie, setSelectedMovie] = useState(null); const [sliderValue, setSliderValue] = useState(0); - const [reviewedMovies, setReviewedMovies] = useState(new Set()); // Use a Set - const [movies, setMovies] = useState(jsonfile); // State to hold movie data + const [reviewedMovies, setReviewedMovies] = useState(new Set()); + const [movies, setMovies] = useState(jsonfile); const isMovieReviewed = (movie) => reviewedMovies.has(movie.id); const handleOpenReview = (movie) => { if (!isMovieReviewed(movie)) { setSelectedMovie(movie); - setSliderValue(0); // Initialize the slider value + setSliderValue(0); setOpenReview(true); } }; @@ -68,19 +85,15 @@ export default function MovieshowerFromInterests() { const handleClose = () => { setOpenReview(false); setOpenWatched(false); - setSelectedMovie(null); // Reset the selectedMovie state + setSelectedMovie(null); }; const handleSubmitReview = () => { - // Perform any review submission logic here - - // Mark the selected movie as reviewed if (selectedMovie) { const updatedReviewedMovies = new Set(reviewedMovies); updatedReviewedMovies.add(selectedMovie.id); setReviewedMovies(updatedReviewedMovies); } - handleClose(); }; @@ -89,33 +102,28 @@ export default function MovieshowerFromInterests() { }; const handleConfirmWatched = () => { - // Mark the movie as watched or perform other actions - // You can add your logic here to update the state or perform any other actions. - // For example, you can set a "watched" flag for the selected movie. - - // Remove the selected movie from the state if (selectedMovie) { setMovies((prevMovies) => prevMovies.filter((movie) => movie.id !== selectedMovie.id) ); } - - setSelectedMovie(null); // Reset the selectedMovie state + setSelectedMovie(null); handleCloseWatchedConfirmation(); }; const getData3 = async () => { try { - console.log('before') + console.log('before'); const res = await axios.post( - "http://localhost:8003/suggestions", {}, + "http://localhost:8003/suggestions", + {}, { headers: { Authorization: localStorage.getItem("authToken"), }, } ); - console.log('after') + console.log('after'); setMovies(res.data); console.log(res.data); } catch (err) { @@ -127,8 +135,6 @@ export default function MovieshowerFromInterests() { getData3(); }, []); - - return ( <> @@ -138,62 +144,61 @@ export default function MovieshowerFromInterests() { marginTop: 8, display: "flex", flexDirection: "column", - backgroundColor: "white", - alignItems: "center", // Center the content horizontally + alignItems: "center", borderRadius: 8, padding: "20px", + backgroundColor: "black", // Set the background color to black }} > -

+

Suggestions Based on Ratings

- + - Rank - Movie - Genre(s) - Rating - Watched? - Review? - Rated - Reviewed + RANK + MOVIE + GENRES + RATING + WATCHED? + REVIEW? + RATED + REVIEWED - - {movies.map((list, index) => { - return( + {movies.map((list, index) => { + return ( - {index + 1} - {list.title} - {list.genres} - {list.vote_average} + {index + 1} + {list.title} + {list.genres} + {list.vote_average} - + - + - {list.Rated} - + {list.Rated} + {reviewedMovies.has(list.id) ? "True" : "False"} - + ); - })}; + })}
Generated from User Survey
@@ -221,7 +226,6 @@ export default function MovieshowerFromInterests() { )} - {selectedMovie && ( - setpage(7)}> - - - - - - + setpage(7)}> + + + + + +