diff --git a/src/api/graphViewer/houseSaleAveragePrice.js b/src/api/graphViewer/houseSaleAveragePrice.js new file mode 100644 index 0000000..5377af7 --- /dev/null +++ b/src/api/graphViewer/houseSaleAveragePrice.js @@ -0,0 +1,12 @@ +import axios from "axios"; + +// Function to fetch data from the backend +export async function getAverageHousePrice(interval) { + try { + const response = await axios.get(`/getAverageHousePrice${interval}`); // Adjust the endpoint URL + return response.data; + } catch (error) { + console.error("Error fetching data from the backend:", error); + throw error; + } +} diff --git a/src/examples/Charts/BarCharts/VerticalBarChart/index.js b/src/examples/Charts/BarCharts/VerticalBarChart/index.js index 9b5f265..3ba992c 100644 --- a/src/examples/Charts/BarCharts/VerticalBarChart/index.js +++ b/src/examples/Charts/BarCharts/VerticalBarChart/index.js @@ -14,11 +14,7 @@ Coded by www.creative-tim.com */ import { useMemo, useState } from "react"; - -// porp-types is a library for typechecking of props import PropTypes from "prop-types"; - -// react-chartjs-2 components import { Bar } from "react-chartjs-2"; import { Chart as ChartJS, @@ -29,23 +25,15 @@ import { Tooltip, Legend, } from "chart.js"; - -// @mui material components import Card from "@mui/material/Card"; import Icon from "@mui/material/Icon"; -import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; - -// Material Dashboard 2 React components +// import MenuList from "@mui/material/MenuList"; import MDBox from "components/MDBox"; import MDTypography from "components/MDTypography"; -import MDinput from "components/MDInput"; - -// VerticalBarChart configurations -import configs from "examples/Charts/BarCharts/VerticalBarChart/configs"; - -// Material Dashboard 2 React base styles +import MDInput from "components/MDInput"; import colors from "assets/theme/base/colors"; +import configs from "examples/Charts/BarCharts/VerticalBarChart/configs"; ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); @@ -57,44 +45,29 @@ function VerticalBarChart({ chart, menuItems, onMenuItemSelect, + districts, // New prop for districts + onDistrictSelect, // New prop for district selection }) { - const [menu, setMenu] = useState(null); const [selectedData, setSelectedData] = useState(menuItems[0]); - console.log("selectedData", selectedData); + const [selectedDistrict, setSelectedDistrict] = useState(districts[0]); // State for selected district - const openMenu = ({ currentTarget }) => setMenu(currentTarget); - const closeMenu = () => setMenu(null); - - const handleMenuItemClick = (dataKey) => { + const handleMenuItemClick = (event) => { + const dataKey = event.target.value; setSelectedData(dataKey); - closeMenu(); + if (onMenuItemSelect) { - onMenuItemSelect(dataKey); // Call the callback function with the selected item + onMenuItemSelect(dataKey); + } + }; + + const handleDistrictChange = (event) => { + const selectedDistrict = event.target.value; + setSelectedDistrict(selectedDistrict); + if (onDistrictSelect) { + onDistrictSelect(selectedDistrict); } }; - const renderMenu = ( - - {menuItems.map((item, index) => ( - handleMenuItemClick(item)}> - {item} - - ))} - - ); const chartDatasets = chart.datasets ? chart.datasets.map((dataset) => ({ ...dataset, @@ -150,28 +123,45 @@ function VerticalBarChart({ - - + {menuItems.map((item, index) => ( + + {item} + + ))} + + + - {/* - more_vert - */} + {/* */} + {districts.map((district, index) => ( + + {district} + + ))} + {/* */} + - {renderMenu} ) : null} {useMemo( @@ -188,16 +178,16 @@ function VerticalBarChart({ return title || description ? {renderChart} : renderChart; } -// Setting default values for the props of VerticalBarChart VerticalBarChart.defaultProps = { icon: { color: "info", component: "" }, title: "", description: "", height: "19.125rem", menuItems: ["option 1", "option 2", "option 3"], + districts: ["option 1", "option 2", "option 3"], // Default empty array for districts + onDistrictSelect: null, // Default null for onDistrictSelect }; -// Typechecking props for the VerticalBarChart VerticalBarChart.propTypes = { icon: PropTypes.shape({ color: PropTypes.oneOf([ @@ -218,6 +208,8 @@ VerticalBarChart.propTypes = { chart: PropTypes.objectOf(PropTypes.array).isRequired, menuItems: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), onMenuItemSelect: PropTypes.func, + districts: PropTypes.arrayOf(PropTypes.string), // Prop type for districts + onDistrictSelect: PropTypes.func, // Prop type for onDistrictSelect }; export default VerticalBarChart; diff --git a/src/examples/Charts/LineCharts/DefaultLineChart/index.js b/src/examples/Charts/LineCharts/DefaultLineChart/index.js index 0989ebc..e6d8799 100644 --- a/src/examples/Charts/LineCharts/DefaultLineChart/index.js +++ b/src/examples/Charts/LineCharts/DefaultLineChart/index.js @@ -13,7 +13,7 @@ Coded by www.creative-tim.com * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; // porp-types is a library for typechecking of props import PropTypes from "prop-types"; @@ -45,6 +45,8 @@ import configs from "examples/Charts/LineCharts/DefaultLineChart/configs"; // Material Dashboard 2 React base styles import colors from "assets/theme/base/colors"; +import { MenuItem } from "@mui/material"; +import MDInput from "components/MDInput"; ChartJS.register( CategoryScale, @@ -57,7 +59,15 @@ ChartJS.register( Filler ); -function DefaultLineChart({ icon, title, description, height, chart }) { +function DefaultLineChart({ + icon, + title, + description, + height, + chart, + menuItems, + onMenuItemSelect, +}) { const chartDatasets = chart.datasets ? chart.datasets.map((dataset) => ({ ...dataset, @@ -76,37 +86,69 @@ function DefaultLineChart({ icon, title, description, height, chart }) { : []; const { data, options } = configs(chart.labels || [], chartDatasets); + const [selectedData, setSelectedData] = useState(menuItems[0]); + const handleMenuItemClick = (event) => { + const dataKey = event.target.value; + setSelectedData(dataKey); + + if (onMenuItemSelect) { + onMenuItemSelect(dataKey); + } + }; const renderChart = ( {title || description ? ( - - {icon.component && ( - - {icon.component} - - )} - - {title && {title}} - - - {description} - + + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + {menuItems.map((item, index) => ( + + {item} + + ))} + + ) : null} {useMemo( @@ -129,6 +171,7 @@ DefaultLineChart.defaultProps = { title: "", description: "", height: "19.125rem", + menuItems: ["option 1", "option 2", "option 3"], }; // Typechecking props for the DefaultLineChart @@ -150,6 +193,8 @@ DefaultLineChart.propTypes = { description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), chart: PropTypes.objectOf(PropTypes.array).isRequired, + menuItems: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + onMenuItemSelect: PropTypes.func, }; export default DefaultLineChart; diff --git a/src/examples/Charts/PieChart/index.js b/src/examples/Charts/PieChart/index.js index e60fa7f..8f4938e 100644 --- a/src/examples/Charts/PieChart/index.js +++ b/src/examples/Charts/PieChart/index.js @@ -13,7 +13,7 @@ Coded by www.creative-tim.com * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. */ -import { useMemo } from "react"; +import { useMemo, useState } from "react"; // porp-types is a library for typechecking of props import PropTypes from "prop-types"; @@ -32,42 +32,76 @@ import MDTypography from "components/MDTypography"; // PieChart configurations import configs from "examples/Charts/PieChart/configs"; +import MDInput from "components/MDInput"; +import { MenuItem } from "@mui/material"; ChartJS.register(ArcElement, Tooltip, Legend); -function PieChart({ icon, title, description, height, chart }) { +function PieChart({ icon, title, description, height, chart, menuItems, onMenuItemSelect }) { const { data, options } = configs(chart.labels || [], chart.datasets || {}); + const [selectedData, setSelectedData] = useState(menuItems[0]); + const handleMenuItemClick = (event) => { + const dataKey = event.target.value; + setSelectedData(dataKey); + + if (onMenuItemSelect) { + onMenuItemSelect(dataKey); + } + }; const renderChart = ( {title || description ? ( - - {icon.component && ( - - {icon.component} - - )} - - {title && {title}} - - - {description} - + + + {icon.component && ( + + {icon.component} + + )} + + {title && {title}} + + + {description} + + + + + {menuItems.map((item, index) => ( + + {item} + + ))} + + ) : null} {useMemo( @@ -90,6 +124,7 @@ PieChart.defaultProps = { title: "", description: "", height: "19.125rem", + menuItems: ["option 1", "option 2", "option 3"], }; // Typechecking props for the PieChart @@ -111,6 +146,8 @@ PieChart.propTypes = { description: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), chart: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.object])).isRequired, + menuItems: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + onMenuItemSelect: PropTypes.func, }; export default PieChart; diff --git a/src/layouts/dashboard/components/SearchBar/searchBar.js b/src/layouts/dashboard/components/SearchBar/searchBar.js index 97dff33..af92458 100644 --- a/src/layouts/dashboard/components/SearchBar/searchBar.js +++ b/src/layouts/dashboard/components/SearchBar/searchBar.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import ReactPaginate from "react-paginate"; +// import ReactPaginate from "react-paginate"; import MDBox from "components/MDBox"; import Icon from "@mui/material/Icon"; import Menu from "@mui/material/Menu"; @@ -8,9 +8,10 @@ import MenuItem from "@mui/material/MenuItem"; import MDInput from "components/MDInput"; import MDButton from "components/MDButton"; import SearchResultCard from "./searchResultCard"; -import { Grid } from "@mui/material"; +import { Grid, Pagination } from "@mui/material"; import { getAdbyFilter } from "api/searchBar/getAdbyFilter"; import MDTypography from "components/MDTypography"; +// import MDPagination from "components/MDPagination"; const AdvertisementSearch = () => { const [selectedOption, setSelectedOption] = useState("Title"); @@ -122,8 +123,12 @@ const AdvertisementSearch = () => { handleMenuItemClick("Title")}>Title ); - const handlePageChange = ({ selected }) => { - setCurrentPage(selected); + const handlePageChange = (selected) => { + setCurrentPage(selected - 1); + window.scrollTo({ + top: 0, + behavior: "smooth", + }); }; // Calculate the start and end indexes for the current page @@ -154,6 +159,7 @@ const AdvertisementSearch = () => { // description: ad.Description, // })), // Add your data here // }; + // Customized page options starting from 1 return ( @@ -246,17 +252,39 @@ const AdvertisementSearch = () => { ))} {selectedData.length > adsPerPage && ( - + // + // + // + // keyboard_arrow_left + // + // + // 1 + // + // 2 + // 3 + // + // keyboard_arrow_right + // + // + + + handlePageChange(page)} + /> + + )} diff --git a/src/layouts/graph/components/barCharts/houseSaleChart.js b/src/layouts/graph/components/barCharts/houseSaleChart.js index f4dd513..6975114 100644 --- a/src/layouts/graph/components/barCharts/houseSaleChart.js +++ b/src/layouts/graph/components/barCharts/houseSaleChart.js @@ -5,18 +5,22 @@ import { useState, useEffect } from "react"; import VerticalBarChart from "examples/Charts/BarCharts/VerticalBarChart"; -// import { getAverageLandPrice } from "api/graphViewer/landsaleAveragePrice"; -// import { getAverageHousePrice } from "api/graphViewer/houseSaleAveragePrice"; +import { getAverageHousePrice } from "api/graphViewer/houseSaleAveragePrice"; function HousesaleAveragePrice() { const [averageHousePrice, setAverageHousePrice] = useState([]); const [selectedItem, setSelectedItem] = useState("Weekly"); + const [selectedDistrict, setSelectedDistrict] = useState("Overall"); const handleMenuItemSelect = (item) => { setSelectedItem(item); // You can perform any additional actions here based on the selected item }; + const handleDistrictSelect = async (item) => { + setSelectedDistrict(item); + }; console.log(selectedItem); + console.log(selectedDistrict); useEffect(() => { // Fetch average price data from the Flask API endpoint' const fetchData = async () => { @@ -59,6 +63,32 @@ function HousesaleAveragePrice() { }} menuItems={["Weekly", "Monthly", "Yearly"]} onMenuItemSelect={handleMenuItemSelect} + districts={[ + "Overall", + "Colombo", + "Gampaha", + "Kalutara", + "Kandy", + "Matale", + "Nuwara Eliya", + "Galle", + "Matara", + "Hambantota", + "Jaffna", + "Kilinochchi", + "Mannar", + "Mullaitivu", + "Vavuniya", + "Puttalam", + "Kurunegala", + "Anuradhapura", + "Polonnaruwa", + "Badulla", + "Monaragala", + "Ratnapura", + "Kegalle", + ]} + onDistrictSelect={handleDistrictSelect} /> ); diff --git a/src/layouts/graph/components/barCharts/landSaleChart.js b/src/layouts/graph/components/barCharts/landSaleChart.js index 6930a9b..9435d00 100644 --- a/src/layouts/graph/components/barCharts/landSaleChart.js +++ b/src/layouts/graph/components/barCharts/landSaleChart.js @@ -10,12 +10,17 @@ import { getAverageLandPrice } from "api/graphViewer/landsaleAveragePrice"; function LandsaleAveragePrice() { const [averageLandPrice, setAverageLandPrice] = useState([]); const [selectedItem, setSelectedItem] = useState("Weekly"); + const [selectedDistrict, setSelectedDistrict] = useState("Overall"); const handleMenuItemSelect = async (item) => { setSelectedItem(item); }; + const handleDistrictSelect = async (item) => { + setSelectedDistrict(item); + }; console.log(selectedItem); + console.log(selectedDistrict); useEffect(() => { // Fetch average price data from the Flask API endpoint' const fetchData = async () => { @@ -57,7 +62,33 @@ function LandsaleAveragePrice() { ], }} menuItems={["Weekly", "Monthly", "Yearly"]} + districts={[ + "Overall", + "Colombo", + "Gampaha", + "Kalutara", + "Kandy", + "Matale", + "Nuwara Eliya", + "Galle", + "Matara", + "Hambantota", + "Jaffna", + "Kilinochchi", + "Mannar", + "Mullaitivu", + "Vavuniya", + "Puttalam", + "Kurunegala", + "Anuradhapura", + "Polonnaruwa", + "Badulla", + "Monaragala", + "Ratnapura", + "Kegalle", + ]} onMenuItemSelect={handleMenuItemSelect} + onDistrictSelect={handleDistrictSelect} /> ); diff --git a/src/layouts/graph/components/lineCharts/demographic.js b/src/layouts/graph/components/lineCharts/demographic.js new file mode 100644 index 0000000..5350424 --- /dev/null +++ b/src/layouts/graph/components/lineCharts/demographic.js @@ -0,0 +1,73 @@ +// Material Dashboard 2 React Examples +import DefaultLineChart from "examples/Charts/LineCharts/DefaultLineChart"; +import React from "react"; +import MDBox from "components/MDBox"; + +import { useState, useEffect } from "react"; + +// import {getDemographic} from "api/graphViewer/demographic"; + +function Demographic() { + const [demographic, setdemographic] = useState([]); + const [selectedItem, setSelectedItem] = useState("Population Density"); + + const handleMenuItemSelect = async (item) => { + setSelectedItem(item); + }; + console.log(selectedItem); + useEffect(() => { + const fetchData = async () => { + try { + var data; + // const data = getDemographic(); + setdemographic(data); + console.log(demographic); + } catch (error) { + console.error("Error fetching data:", error); + } + }; + + // Call the fetchData function whenever selectedItem changes + fetchData(); + }, []); + + return ( + + + + ); +} + +export default Demographic; diff --git a/src/layouts/graph/components/pieCharts/marriageDist.js b/src/layouts/graph/components/pieCharts/marriageDist.js index d996f23..4a0dd2c 100644 --- a/src/layouts/graph/components/pieCharts/marriageDist.js +++ b/src/layouts/graph/components/pieCharts/marriageDist.js @@ -9,7 +9,11 @@ import { getAgeDistribution } from "api/graphViewer/catergorizebyAge"; function MarriageDistribution() { const [ageDistribution, setageDistribution] = useState([]); - + const [selectedItem, setSelectedItem] = useState("Age"); + const handleMenuItemSelect = async (item) => { + setSelectedItem(item); + }; + console.log(selectedItem); useEffect(() => { // Fetch average price data from the Flask API endpoint getAgeDistribution() @@ -35,6 +39,8 @@ function MarriageDistribution() { data: ageDistribution.map((data) => data.count), }, }} + menuItems={["Age", "Profession", "District"]} + onMenuItemSelect={handleMenuItemSelect} /> ); diff --git a/src/layouts/graph/index.js b/src/layouts/graph/index.js index 4f5cf26..58cc92b 100644 --- a/src/layouts/graph/index.js +++ b/src/layouts/graph/index.js @@ -19,6 +19,8 @@ import HouseSaleDistribution from "./components/pieCharts/houseSaleDDist"; import createPDF from "layouts/reports/reports"; import PriceFluctuation from "./components/lineCharts/pricefluctuation"; import MDInput from "components/MDInput"; +import Demographic from "./components/lineCharts/demographic"; +import HousesaleAveragePrice from "./components/barCharts/houseSaleChart"; function GraphViewer() { const contentRef = useRef(null); @@ -116,6 +118,24 @@ function GraphViewer() { + +
+ +
+ + + + Do you want to include this graph in the generated PDF? + + + + setIncludeLandSale(!includeLandSale)} + /> + + + @@ -181,6 +201,22 @@ function GraphViewer() { + + + + + + Do you want to include this graph in the generated PDF? + + + + setIncludePriceFluct(!includePriceFluct)} + /> + + +