Merge branch 'main' of https://github.com/Newspaper-Advertisement-Ana…

…lyzer/client
Newspaper-Advertisement-Analyzer · Sep 9, 2023 · a99633f · a99633f
2 parents 3d4ffe6 + c70fddf
commit a99633f
Show file tree

Hide file tree

Showing 10 changed files with 425 additions and 135 deletions.
diff --git a/src/api/graphViewer/houseSaleAveragePrice.js 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
@@ -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 = (
-    <Menu
-      id="simple-menu"
-      anchorEl={menu}
-      anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "right",
-      }}
-      transformOrigin={{
-        vertical: "top",
-        horizontal: "right",
-      }}
-      open={Boolean(menu)}
-      onClose={closeMenu}
-    >
-      {menuItems.map((item, index) => (
-        <MenuItem key={index} onClick={() => handleMenuItemClick(item)}>
-          {item}
-        </MenuItem>
-      ))}
-    </Menu>
-  );
   const chartDatasets = chart.datasets
     ? chart.datasets.map((dataset) => ({
         ...dataset,
@@ -150,28 +123,45 @@ function VerticalBarChart({
             </MDBox>
           </MDBox>
           <MDBox color="text" pr={0} display="flex" justifyContent="space-between">
-            <MDinput
+            <MDInput
               value={selectedData}
-              readOnly // Make the input read-only to prevent typing
-              onClick={openMenu}
+              onChange={handleMenuItemClick}
               size="small"
               sx={{ marginRight: "5%" }}
-            />
-            <MDinput
-              value={selectedData}
-              readOnly // Make the input read-only to prevent typing
-              onClick={openMenu}
+              // Add options for districts
+              select
+            >
+              {menuItems.map((item, index) => (
+                <MenuItem key={index} value={item}>
+                  {item}
+                </MenuItem>
+              ))}
+            </MDInput>
+
+            <MDInput
+              value={selectedDistrict}
+              onChange={handleDistrictChange}
               size="small"
-            />
-            {/* <Icon
-              sx={{ cursor: "pointer", fontWeight: "bold" }}
-              fontSize="small"
-              onClick={openMenu}
+              sx={{
+                marginRight: "5%",
+              }}
+              // Add options for districts
+              select
             >
-              more_vert
-            </Icon> */}
+              {/* <MenuList
+                style={{
+                  maxHeight: "200px", // Adjust the maxHeight as needed
+                  overflowY: "auto",
+                }}
+              > */}
+              {districts.map((district, index) => (
+                <MenuItem key={index} value={district}>
+                  {district}
+                </MenuItem>
+              ))}
+              {/* </MenuList> */}
+            </MDInput>
           </MDBox>
-          {renderMenu}
         </MDBox>
       ) : null}
       {useMemo(
@@ -188,16 +178,16 @@ function VerticalBarChart({
   return title || description ? <Card>{renderChart}</Card> : 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
@@ -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 = (
     <MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
       {title || description ? (
-        <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
-          {icon.component && (
-            <MDBox
-              width="4rem"
-              height="4rem"
-              bgColor={icon.color || "dark"}
-              variant="gradient"
-              coloredShadow={icon.color || "dark"}
-              borderRadius="xl"
-              display="flex"
-              justifyContent="center"
-              alignItems="center"
-              color="white"
-              mt={-5}
-              mr={2}
-            >
-              <Icon fontSize="medium">{icon.component}</Icon>
-            </MDBox>
-          )}
-          <MDBox mt={icon.component ? -2 : 0}>
-            {title && <MDTypography variant="h6">{title}</MDTypography>}
-            <MDBox mb={2}>
-              <MDTypography component="div" variant="button" color="text">
-                {description}
-              </MDTypography>
+        <MDBox
+          display="flex"
+          px={description ? 1 : 0}
+          pt={description ? 1 : 0}
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          <MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
+            {icon.component && (
+              <MDBox
+                width="4rem"
+                height="4rem"
+                bgColor={icon.color || "dark"}
+                variant="gradient"
+                coloredShadow={icon.color || "dark"}
+                borderRadius="xl"
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                color="white"
+                mt={-5}
+                mr={2}
+              >
+                <Icon fontSize="medium">{icon.component}</Icon>
+              </MDBox>
+            )}
+            <MDBox mt={icon.component ? -2 : 0}>
+              {title && <MDTypography variant="h6">{title}</MDTypography>}
+              <MDBox mb={2}>
+                <MDTypography component="div" variant="button" color="text">
+                  {description}
+                </MDTypography>
+              </MDBox>
             </MDBox>
           </MDBox>
+          <MDBox color="text" pr={0} display="flex" justifyContent="space-between">
+            <MDInput
+              value={selectedData}
+              onChange={handleMenuItemClick}
+              size="small"
+              sx={{ marginRight: "5%" }}
+              select
+            >
+              {menuItems.map((item, index) => (
+                <MenuItem key={index} value={item}>
+                  {item}
+                </MenuItem>
+              ))}
+            </MDInput>
+          </MDBox>
         </MDBox>
       ) : 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;