diff --git a/package.json b/package.json index 0cee480..497456f 100644 --- a/package.json +++ b/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", diff --git a/src/views/Charts/CityRevenue.js b/src/views/Charts/CityRevenue.js index 6cf4db2..27ea992 100644 --- a/src/views/Charts/CityRevenue.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredOrders.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; -export default CityRevenueCharts; \ No newline at end of file +export default CityRevenueCharts; diff --git a/src/views/Charts/OrderDaywise.js b/src/views/Charts/OrderDaywise.js index 08f4373..26b048c 100644 --- a/src/views/Charts/OrderDaywise.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredOrders.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; diff --git a/src/views/Charts/ProductRevenue.js b/src/views/Charts/ProductRevenue.js index d6bb0c5..dcf8e0e 100644 --- a/src/views/Charts/ProductRevenue.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredOrders.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; diff --git a/src/views/Charts/RevenueCharts.js b/src/views/Charts/RevenueCharts.js index 40a9cf6..4a4a88f 100644 --- a/src/views/Charts/RevenueCharts.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredOrders.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; diff --git a/src/views/Charts/Staterevenue.js b/src/views/Charts/Staterevenue.js index c584d5b..3becaf4 100644 --- a/src/views/Charts/Staterevenue.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredOrders.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; -export default StateRevenueCharts; \ No newline at end of file +export default StateRevenueCharts; diff --git a/src/views/Charts/UserChart.js b/src/views/Charts/UserChart.js index e99dcfc..60fbcc9 100644 --- a/src/views/Charts/UserChart.js +++ b/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 ( -
- {token ? ( - - ) : ( -

No charts available

- )} -
+ <> +
+
+ + +
+
+ + +
+
+
+ {filteredUsers.length === 0 ? ( +

No data available

+ ) : ( +
+ +
+ )} +
+ ); }; export default UserCharts; +