From 54a45e35c2599b7818c5469dab5aad424380613e Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Mon, 27 Jan 2025 07:14:48 +0700 Subject: [PATCH] ok --- src/components/BarChart.module.css | 1 + src/components/DailyCharts.js | 26 ++++--- src/pages/Reports.js | 114 ++++++++++++++++++++++------- src/pages/Transactions.module.css | 43 ++++++++++- 4 files changed, 147 insertions(+), 37 deletions(-) diff --git a/src/components/BarChart.module.css b/src/components/BarChart.module.css index 2ed60c4..7bf304d 100644 --- a/src/components/BarChart.module.css +++ b/src/components/BarChart.module.css @@ -22,6 +22,7 @@ justify-content: space-around; position: relative; overflow: hidden; + font-size: 14px; } .dateSelector { diff --git a/src/components/DailyCharts.js b/src/components/DailyCharts.js index f96814e..9816052 100644 --- a/src/components/DailyCharts.js +++ b/src/components/DailyCharts.js @@ -59,17 +59,21 @@ const DailyCharts = ({ transactionGraph, colors, type }) => { 0 ); - const formatDate = (dateString) => { - const date = new Date(dateString); - const monthNames = [ - "Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des" - ]; - const month = monthNames[date.getUTCMonth()]; // Use getUTCMonth() for UTC month - const day = date.getUTCDate(); // Use getUTCDate() for UTC day - return { month, day }; - }; - - + const formatDate = (dateString) => { + const date = new Date(dateString); // Parse the date string + + // Create an array of month names (use the same names you had earlier) + const monthNames = [ + "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" + ]; + + // Get the month and day + const month = monthNames[date.getMonth()]; // Month is 0-indexed (January = 0) + const day = date.getDate(); // Get the day of the month + + return { month, day }; // Return the result + }; + return (
{chartData && diff --git a/src/pages/Reports.js b/src/pages/Reports.js index 68233bd..763736b 100644 --- a/src/pages/Reports.js +++ b/src/pages/Reports.js @@ -137,10 +137,10 @@ const App = ({ forCafe = true, cafeId="", fetchData(filter); // Fetch data when filter changes }, [filter, selectedCafeId]); - const filteredItems = analytics.itemSales || []; + const filteredItems = analytics?.itemSales || analytics?.items || []; const colors = [ - "#E63946", // Bright Red + "#af9463", // Bright Red "#F4A261", // Soft Orange "#FFD166", // Sunshine Yellow "#06D6A0", // Mint Green @@ -161,11 +161,54 @@ const App = ({ forCafe = true, cafeId="", "#BC4749", // Cranberry Red ]; - - const segments = filteredItems.map((item, index) => ({ - percentage: item.percentage, - color: colors[index] || "#cccccc", - })); + const totalSoldAcrossAllCafes = filteredItems.reduce((total, cafe) => { + const cafeTotal = (cafe.report?.itemSales || []).reduce((sum, item) => sum + item.sold, 0); + return total + cafeTotal; + }, 0); + + // Define a color palette or generate colors dynamically + const colorPalette = colors; + + // Ensure that each segment gets a unique color + let colorIndex = 0; + + let segments = (selectedCafeId === 0 || selectedCafeId === -1) ? filteredItems.flatMap((cafe) => { + const cafeItems = cafe.report?.itemSales || []; + console.log(cafeItems); // Log all items for the cafe + + return cafeItems.map((item, index) => { + const percentage = totalSoldAcrossAllCafes > 0 + ? ((item.sold / totalSoldAcrossAllCafes) * 100).toFixed(2) + : 0; + + console.log(`${item.itemName}: ${(percentage)}%`); // Log item name and percentage + + // Assign a unique color from the color palette + const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors + + colorIndex++; // Increment to ensure a new color for the next item + + return { + itemName: item.itemName, + sold: item.sold, + percentage: percentage, + color: color, + }; + }); + }) : filteredItems.map((item, index) => { + const color = colorPalette[colorIndex % colorPalette.length]; // Use modulo to cycle through colors + colorIndex++; // Increment to ensure a new color for the next item + return { + itemName: item.itemName, + percentage: item.percentage, + color: color, + }; + }); + + segments.sort((a, b) => b.sold - a.sold); + + +console.log(segments) const formatIncome = (amount) => { if (amount >= 1_000_000_000) { @@ -222,7 +265,7 @@ const App = ({ forCafe = true, cafeId="", updatedFullTexts = [ ["semua", 0], // First entry is "semua" ...otherCafes.map(cafe => [cafe.name, cafe.cafeId]), // Map over cafes to get name and cafeId pairs - ["+", -1] // Add the "+" entry + ["tambah kedai +", -1] // Add the "+" entry ]; } @@ -310,23 +353,44 @@ const App = ({ forCafe = true, cafeId="", >
{forCafe &&
} -

Laporan

- {!forCafe && } + {!forCafe && + + // + +
+ {texts.map((item, indexx) => { + return ( +
onItemToggle(indexx)} + > +
+
+ {item} + +
+
+ ); + })} +
+ }
- {filteredItems.map((item, index) => ( + {segments.map((item, index) => (