kediritechnopark/kedaimaster
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
insvrgent
2025-02-03 10:28:58 +07:00
parent 50de8d7961
commit f6bc5dc401
4 changed files with 37 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/BarChart.module.css
View File

@@ -71,7 +71,7 @@
}
.chartWrapper {
/* border: 1px solid rgb(179, 177, 177);
border-radius: 0 0 11px 11px; */
width: 100%; /* This makes the chart responsive to its parent's width */
height: 200px; /* Set a fixed height for the chart */
}

36
src/components/DailyCharts.js
View File

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import Chart from "react-apexcharts";
import styles from "./BarChart.module.css"; // Import the CSS module
const DailyCharts = ({ transactionGraph, colors, type }) => {
const DailyCharts = ({ incomeGraph, transactionGraph, materialGraph, colors, type, graphFilter }) => {
const [selectedIndex, setSelectedIndex] = useState(-1);
useEffect(() => {
@@ -23,7 +23,9 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
"21-24",
];
console.log(dayData)
const seriesData = [
let seriesData = []
if(graphFilter == 'transactions'){
seriesData = [
dayData.hour0To3Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour3To6Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour6To9Transactions.reduce((acc, t) => acc + t.sold, 0),
@@ -33,7 +35,31 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
dayData.hour18To21Transactions.reduce((acc, t) => acc + t.sold, 0),
dayData.hour21To24Transactions.reduce((acc, t) => acc + t.sold, 0),
];
}
else if(graphFilter == 'income'){
seriesData = [
dayData.hour0To3Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour3To6Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour6To9Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour9To12Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour12To15Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour15To18Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour18To21Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
dayData.hour21To24Transactions.reduce((acc, t) => acc + t.totalPrice, 0),
];
}
else if(graphFilter == 'outcome'){
seriesData = [
dayData.hour3To6MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour6To9MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour0To3MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour9To12MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour12To15MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour15To18MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour18To21MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
dayData.hour21To24MaterialIds.reduce((acc, t) => acc + t.materialOutcome, 0),
];
}
return {
date: new Date(dayData.date).toLocaleDateString(),
categories,
@@ -47,7 +73,7 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
});
};
const chartData = processData(transactionGraph);
const chartData = processData(graphFilter != 'outcome' ? transactionGraph : materialGraph);
let globalMax = null;
if (chartData)
@@ -139,7 +165,9 @@ const DailyCharts = ({ transactionGraph, colors, type }) => {
},
},
yaxis: {
show: false,
max: globalMax,
min: 0,
labels: {
style: {
colors: "transparent",

4
src/components/PeriodCharts.js
View File

@@ -105,7 +105,7 @@ if (aggregatedCurrentReports || aggregatedPreviousReports) {
}
}
},
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
yaxis: { show: false, max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false },
fill: { opacity: 0.5 },
colors: [colors[0]],
@@ -166,7 +166,7 @@ if (aggregatedCurrentReports || aggregatedPreviousReports) {
}
}
},
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
yaxis: { show: false, max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false },
fill: { opacity: 0.5 },
colors: [colors[1]],

2
src/pages/Reports.js
View File

@@ -612,7 +612,7 @@ const App = ({ forCafe = true, cafeId = -1,
</div>
</div>
{filter == 'yesterday' || filter == 'weekly' ?
<DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} type={filter} colors={colors} />
<DailyCharts transactionGraph={analytics?.transactionGraph || analytics?.combinedTransactionGraph} materialGraph={analytics?.materialGraph || analytics?.combinedMaterialGraph} type={filter} graphFilter={graphFilter} colors={colors} />
:
<PeriodCharts type={filter} graphFilter={graphFilter} aggregatedCurrentReports={analytics?.aggregatedCurrentReports} aggregatedPreviousReports={analytics?.aggregatedPreviousReports} colors={colors} />
}