Dynamic Chart Updated
This commit is contained in:
Sibunnayak
parent
c379820307
commit
296df28cac
@ -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",
|
||||
|
||||
@ -1,26 +1,199 @@
|
||||
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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{ height: "75vh" }}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex"}}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{height:"75vh"}}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{ height: "75vh" }}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{ height: "75vh" }}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,26 +1,199 @@
|
||||
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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{ height: "75vh" }}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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 ? (
|
||||
<iframe
|
||||
style={{
|
||||
background: "#F1F5F4",
|
||||
border: "none",
|
||||
borderRadius: "2px",
|
||||
boxShadow: "0 2px 10px 0 rgba(70, 76, 79, .2)",
|
||||
width: "80vw",
|
||||
height: "85vh",
|
||||
}}
|
||||
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"
|
||||
></iframe>
|
||||
<>
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ marginRight: "20px" }}>
|
||||
<label htmlFor="year">Select Year:</label>
|
||||
<select
|
||||
id="year"
|
||||
value={selectedYear}
|
||||
onChange={(e) => setSelectedYear(parseInt(e.target.value))}
|
||||
>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</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>
|
||||
) : (
|
||||
<h3>No charts available</h3>
|
||||
<div style={{ height: "75vh" }}>
|
||||
<Bar data={data} options={options} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserCharts;
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user