Dynamic Chart Updated

package.json

@@ -45,6 +45,7 @@
     "@reduxjs/toolkit": "^1.9.2",
     "axios": "^0.25.0",
     "bootstrap": "^5.1.3",
+    "chart.js": "^4.4.2",
     "country-state-city": "^3.2.1",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
@@ -55,6 +56,7 @@
     "quill": "^1.3.7",
     "react": "18.0.0",
     "react-bootstrap": "^2.7.0",
+    "react-chartjs-2": "^5.2.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.0.0",
     "react-draft-wysiwyg": "^1.15.0",
@@ -66,6 +68,7 @@
     "react-spinners": "^0.11.0",
     "react-tag-input-component": "^2.0.2",
     "react-to-print": "^2.14.11",
+    "recharts": "^2.12.4",
     "redux": "4.1.2",
     "serve": "^13.0.2",
     "simplebar-react": "^2.3.6",

src/views/Charts/CityRevenue.js

@@ -1,27 +1,200 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const CityRevenueCharts = () => {
   const token = isAutheticated();
+  const [ordersData, setOrdersData] = useState([]);
+  const [filteredOrders, setFilteredOrders] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/order/getAll/`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setOrdersData(res.data.order);
+          // console.log(res.data.order);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, []);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = ordersData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setFilteredOrders(filtered);
+  }, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  const uniquecity = [
+    ...new Set(
+      filteredOrders.map((item) => item.shippingInfo.city)
+    ),
+  ];
+// console.log(uniquecity);
+// console.log(filteredOrders);
+  // Prepare data for chart
+  const data = {
+    labels: uniquecity, // Use unique product names as labels
+    datasets: [
+      {
+        label: "Total Amount",
+        data: uniquecity.map((city) => {
+          // Sum total amounts for each date
+          return filteredOrders
+            .filter((order) => order.shippingInfo.city.includes(city))
+            .reduce((total, order) => total + order.total_amount, 0);
+      }),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "Revenue Chart",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "City",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Total Amount",
+        },
+        ticks: {
+          stepSize: 1, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the ordersData
+  const lowestYear = Math.min(
+    ...ordersData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex" }}>
-        <iframe
+        <div style={{ marginRight: "20px" }}>
-        style={{
+          <label htmlFor="year">Select Year:</label>
-          background: "#F1F5F4",
+          <select
-          border: "none",
+            id="year"
-          borderRadius: "2px",
+            value={selectedYear}
-          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-          width: "80vw",
+          >
-          height: "85vh",
+            {years.map((year) => (
-        }}
+              <option key={year} value={year}>
-        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7447b4d9-2c23-4b85-aa8b-242097a6aafd&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-      ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredOrders.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{ height: "75vh" }}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 
-export default CityRevenueCharts;
+export default CityRevenueCharts;

src/views/Charts/OrderDaywise.js

@@ -1,26 +1,194 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const OrderdayChart = () => {
   const token = isAutheticated();
+  const [ordersData, setOrdersData] = useState([]);
+  const [filteredOrders, setFilteredOrders] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/order/getAll/`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setOrdersData(res.data.order);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, [token]);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = ordersData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setFilteredOrders(filtered);
+  }, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  // Extract unique dates from filtered orders
+  const uniqueDates = Array.from(
+    new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
+  );
+
+  // Prepare data for chart
+  const data = {
+    labels: uniqueDates,
+    datasets: [
+      {
+        label: "Total Orders",
+        data: uniqueDates.map((date) => {
+          // Count total orders for each date
+          return filteredOrders.filter((order) => order.createdAt.includes(date)).length;
+        }),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "Revenue Order",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "Date",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Orders",
+        },
+        ticks: {
+          stepSize: 1, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the ordersData
+  const lowestYear = Math.min(
+    ...ordersData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex"}}>
-        <iframe
+        <div style={{ marginRight: "20px" }}>
-        style={{
+          <label htmlFor="year">Select Year:</label>
-          background: "#F1F5F4",
+          <select
-          border: "none",
+            id="year"
-          borderRadius: "2px",
+            value={selectedYear}
-          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-          width: "80vw",
+          >
-          height: "85vh",
+            {years.map((year) => (
-        }}
+              <option key={year} value={year}>
-        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=2d28091a-a2f4-4a8b-af87-7bb7d4bb0d56&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-      ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredOrders.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{height:"75vh"}}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

src/views/Charts/ProductRevenue.js

@@ -1,26 +1,212 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const ProductrevenueCharts = () => {
   const token = isAutheticated();
+  const [ordersData, setOrdersData] = useState([]);
+  const [filteredOrders, setFilteredOrders] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/order/getAll/`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setOrdersData(res.data.order);
+          // console.log(res.data.order);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, []);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = ordersData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setFilteredOrders(filtered);
+  }, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  // Extract unique products from filtered orders
+  const uniqueProducts = [
+    ...new Set(
+      filteredOrders.flatMap((order) =>
+        order.orderItems.map((item) => item.name)
+      )
+    ),
+  ];
+// console.log(uniqueProducts);
+// console.log(filteredOrders);
+  // Prepare data for chart
+  const data = {
+    labels: uniqueProducts, // Use unique product names as labels
+    datasets: [
+      {
+        label: "Total Amount",
+        data: uniqueProducts.map((product) =>
+          filteredOrders.reduce((total, order) => {
+            // Find the order item for the current product
+            const orderItem = order.orderItems.find(
+              (item) => item.name === product
+            );
+            if (orderItem) {
+              // If the order item exists, add its total amount to the total for this product
+              return total + orderItem.
+              product_Subtotal;
+            } else {
+              // If the order item does not exist, return the current total
+              return total;
+            }
+          }, 0)
+        ),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "Revenue Chart",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "Product",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Total Amount",
+        },
+        ticks: {
+          stepSize: 1, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the ordersData
+  const lowestYear = Math.min(
+    ...ordersData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex" }}>
-        <iframe
+        <div style={{ marginRight: "20px" }}>
-        style={{
+          <label htmlFor="year">Select Year:</label>
-          background: "#F1F5F4",
+          <select
-          border: "none",
+            id="year"
-          borderRadius: "2px",
+            value={selectedYear}
-          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-          width: "80vw",
+          >
-          height: "85vh",
+            {years.map((year) => (
-        }}
+              <option key={year} value={year}>
-        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=7549914d-a34f-4ae6-b535-99cfc1d52fb7&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-      ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredOrders.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{ height: "75vh" }}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

src/views/Charts/RevenueCharts.js

@@ -1,26 +1,198 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const RevenueCharts = () => {
   const token = isAutheticated();
+  const [ordersData, setOrdersData] = useState([]);
+  const [filteredOrders, setFilteredOrders] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/order/getAll/`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setOrdersData(res.data.order);
+          // console.log(res.data.order);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, []);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = ordersData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setFilteredOrders(filtered);
+  }, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  // Extract unique dates from filtered orders
+  const uniqueDates = Array.from(
+    new Set(filteredOrders.map((order) => order.createdAt.split("T")[0]))
+  );
+  // console.log(uniqueDates);
+  // console.log(filteredOrders);
+  // Prepare data for chart
+  const data = {
+    labels: uniqueDates,
+    datasets: [
+      {
+        label: "Total Amount",
+        data: uniqueDates.map((date) => {
+          // Sum total amounts for each date
+          return filteredOrders
+            .filter((order) => order.createdAt.includes(date))
+            .reduce((total, order) => total + order.total_amount, 0);
+        }),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "Revenue Chart",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "Date",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Total Amount",
+        },
+        ticks: {
+          stepSize: 1000, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the ordersData
+  const lowestYear = Math.min(
+    ...ordersData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex" }}>
-          <iframe
+        <div style={{ marginRight: "20px" }}>
-            style={{
+          <label htmlFor="year">Select Year:</label>
-              background: "#F1F5F4",
+          <select
-              border: "none",
+            id="year"
-              borderRadius: "2px",
+            value={selectedYear}
-              boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-              width: "80vw",
+          >
-              height: "85vh",
+            {years.map((year) => (
-            }}
+              <option key={year} value={year}>
-            src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=35dc4a1b-72dd-4ad1-bf2e-78318d261aa0&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-          ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredOrders.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{ height: "75vh" }}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 

src/views/Charts/Staterevenue.js

@@ -1,27 +1,200 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const StateRevenueCharts = () => {
   const token = isAutheticated();
+  const [ordersData, setOrdersData] = useState([]);
+  const [filteredOrders, setFilteredOrders] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/order/getAll/`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setOrdersData(res.data.order);
+          // console.log(res.data.order);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, []);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = ordersData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setFilteredOrders(filtered);
+  }, [ordersData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  const uniquestate = [
+    ...new Set(
+      filteredOrders.map((item) => item.shippingInfo.state)
+    ),
+  ];
+// console.log(uniquestate);
+// console.log(filteredOrders);
+  // Prepare data for chart
+  const data = {
+    labels: uniquestate, // Use unique product names as labels
+    datasets: [
+      {
+        label: "Total Amount",
+        data: uniquestate.map((state) => {
+          // Sum total amounts for each date
+          return filteredOrders
+            .filter((order) => order.shippingInfo.state.includes(state))
+            .reduce((total, order) => total + order.total_amount, 0);
+      }),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "Revenue Chart",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "State",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "Total Amount",
+        },
+        ticks: {
+          stepSize: 1, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the ordersData
+  const lowestYear = Math.min(
+    ...ordersData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex" }}>
-        <iframe
+        <div style={{ marginRight: "20px" }}>
-        style={{
+          <label htmlFor="year">Select Year:</label>
-          background: "#F1F5F4",
+          <select
-          border: "none",
+            id="year"
-          borderRadius: "2px",
+            value={selectedYear}
-          boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-          width: "80vw",
+          >
-          height: "85vh",
+            {years.map((year) => (
-        }}
+              <option key={year} value={year}>
-        src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=3c517c32-541f-4bf5-ad2c-3fed5db1d1c9&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-      ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredOrders.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{ height: "75vh" }}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 
-export default StateRevenueCharts;
+export default StateRevenueCharts;

src/views/Charts/UserChart.js

@@ -1,27 +1,200 @@
-import { isAutheticated } from "../../auth.js";
+import React, { useEffect, useState } from "react";
+import { isAutheticated } from "src/auth";
+import axios from "axios";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
 
 const UserCharts = () => {
   const token = isAutheticated();
+  const [userData, setUsers] = useState([]);
+  const [filteredUsers, setfilteredUsers] = useState([]);
+  const [selectedYear, setSelectedYear] = useState(new Date().getFullYear());
+  const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth() + 1);
+
+  useEffect(() => {
+    function getOrder() {
+      axios
+        .get(`/api/v1/admin/users`, {
+          headers: {
+            "Access-Control-Allow-Origin": "*",
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then((res) => {
+          setUsers(res.data.users);
+          // console.log(res.data.users);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    }
+    getOrder();
+  }, []);
+
+  useEffect(() => {
+    // Filter orders based on selected year and month
+    const filtered = userData.filter((order) => {
+      const createdAt = new Date(order.createdAt);
+      return (
+        createdAt.getFullYear() === selectedYear &&
+        createdAt.getMonth() + 1 === selectedMonth
+      );
+    });
+    // Sort filtered orders by date in ascending order
+    filtered.sort((a, b) => {
+      const dateA = new Date(a.createdAt);
+      const dateB = new Date(b.createdAt);
+      return dateA - dateB;
+    });
+    setfilteredUsers(filtered);
+  }, [userData, selectedYear, selectedMonth]); // Update filtered orders when orders data, year, or month changes
+
+  // Extract unique dates from filtered orders
+  const uniqueDates = Array.from(
+    new Set(filteredUsers.map((order) => order.createdAt.split("T")[0]))
+  );
+  // console.log(uniqueDates);
+  // console.log(filteredUsers);
+  // Prepare data for chart
+  const data = {
+    labels: uniqueDates,
+    datasets: [
+      {
+        label: "No of Amounts",
+        data: uniqueDates.map((date) => {
+          // Sum total amounts for each date
+          return filteredUsers
+            .filter((order) => order.createdAt.includes(date))
+            .length;
+        }),
+        backgroundColor: "rgba(43, 63, 229, 0.8)",
+        borderRadius: 5,
+      },
+    ],
+  };
+
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: {
+        display: false,
+      },
+      title: {
+        display: true,
+        text: "User Chart",
+      },
+    },
+    scales: {
+      x: {
+        title: {
+          display: true,
+          text: "Date",
+        },
+      },
+      y: {
+        beginAtZero: true,
+        title: {
+          display: true,
+          text: "No of Users",
+        },
+        ticks: {
+          stepSize: 1, // Adjust step size as needed
+        },
+      },
+    },
+  };
+
+  // Convert month number to string
+  const monthToString = (monthNumber) => {
+    const months = [
+      "January",
+      "February",
+      "March",
+      "April",
+      "May",
+      "June",
+      "July",
+      "August",
+      "September",
+      "October",
+      "November",
+      "December",
+    ];
+    return months[monthNumber - 1];
+  };
+
+  // Determine the lowest year found in the userData
+  const lowestYear = Math.min(
+    ...userData.map((order) => new Date(order.createdAt).getFullYear())
+  );
+
+  // Generate an array of years from the lowest year to the current year
+  const years = Array.from(
+    { length: new Date().getFullYear() - lowestYear + 1 },
+    (_, index) => lowestYear + index
+  );
 
   return (
-    <div className="w-80vw">
+    <>
-      {token ? (
+      <div style={{ display: "flex" }}>
-        <iframe
+        <div style={{ marginRight: "20px" }}>
-          style={{
+          <label htmlFor="year">Select Year:</label>
-            background: "#F1F5F4",
+          <select
-            border: "none",
+            id="year"
-            borderRadius: "2px",
+            value={selectedYear}
-            boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
+            onChange={(e) => setSelectedYear(parseInt(e.target.value))}
-            width: "80vw",
+          >
-            height: "85vh",
+            {years.map((year) => (
-          }}
+              <option key={year} value={year}>
-          src="https://charts.mongodb.com/charts-smellica-hqyad/embed/dashboards?id=9ac07f5d-4eec-4d4a-8bbb-3b0f76ab2869&theme=light&autoRefresh=true&maxDataAge=3600&showTitleAndDesc=true&scalingWidth=scale&scalingHeight=scale"
+                {year}
-        ></iframe>
+              </option>
-      ) : (
+            ))}
-        <h3>No charts available</h3>
+          </select>
-      )}
+        </div>
-    </div>
+        <div>
+          <label htmlFor="month">Select Month:</label>
+          <select
+            id="month"
+            value={selectedMonth}
+            onChange={(e) => setSelectedMonth(parseInt(e.target.value))}
+          >
+            {[...Array(12).keys()].map((month) => (
+              <option key={month + 1} value={month + 1}>
+                {monthToString(month + 1)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div style={{ textAlign: "center" }}>
+        {filteredUsers.length === 0 ? (
+          <p>No data available</p>
+        ) : (
+          <div style={{ height: "75vh" }}>
+            <Bar data={data} options={options} />
+          </div>
+        )}
+      </div>
+    </>
   );
 };
 
 export default UserCharts;
+