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

ok

Browse Source
This commit is contained in:
zadit
2025-02-03 07:17:53 +07:00
parent 02e101025e
commit fa5bab4d5f
8 changed files with 199 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/PeriodCharts.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 PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
const PeriodCharts = ({ type, graphFilter, aggregatedCurrentReports, aggregatedPreviousReports, colors }) => {
const [selectedIndex, setSelectedIndex] = useState(-1);
useEffect(() => {
@@ -20,6 +20,12 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
if (type == 'monthly' && currentIncomeData.length === 4) {
currentIncomeData.push(null);
}
if (type == 'monthly' && currentOutcomeData.length === 4) {
currentOutcomeData.push(null);
}
if (type == 'monthly' && currentTransactionData.length === 4) {
currentTransactionData.push(null);
}
@@ -30,21 +36,27 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
if (type == 'monthly' && previousIncomeData.length === 4) {
previousIncomeData.push(null);
}
if (type == 'monthly' && previousOutcomeData.length === 4) {
previousOutcomeData.push(null);
}
if (type == 'monthly' && previousTransactionData.length === 4) {
previousTransactionData.push(null);
}
}
let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports)
// Find the global maximum for the y-axis
globalMax = Math.max(
// ...currentIncomeData,
// ...currentOutcomeData,
...currentTransactionData,
// ...previousIncomeData,
// ...previousOutcomeData,
...previousTransactionData
);
let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports) {
// Find the global maximum for the y-axis
globalMax = Math.max(
...(graphFilter === 'income'
? [...currentIncomeData, ...previousIncomeData]
: graphFilter === 'outcome'
? [...currentOutcomeData, ...previousOutcomeData]
: [...currentTransactionData, ...previousTransactionData])
);
}
return (
<div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
@@ -61,7 +73,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
}
style={{ color: 'black', position: 'relative' }}
>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[0]}` }}></div>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `2px solid ${colors[0]}` }}></div>
<div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
</div>
<div
@@ -101,7 +113,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
series={[
// { name: "Pemasukan", data: previousIncomeData },
// { name: "Pengaluaran", data: previousOutcomeData },
{ name: "Total transaksi", data: previousTransactionData },
{ name: "Total transaksi", data: graphFilter == 'income' ? previousIncomeData : graphFilter == 'outcome' ? previousOutcomeData : previousTransactionData },
]}
type="area"
height={200}
@@ -131,7 +143,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
style={{ color: 'black', position: 'relative' }}
>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `1px solid ${colors[1]}` }}></div>
<div style={{ position: 'absolute', bottom: 0, left: '10%', right: '10%', borderBottom: `2px solid ${colors[1]}` }}></div>
<div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
</div>
</div>
@@ -162,7 +174,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
series={[
// { name: "Pemasukan", data: currentIncomeData },
// { name: "Pengeluaran", data: currentOutcomeData },
{ name: "Total transaksi", data: currentTransactionData },
{ name: "Total transaksi", data: graphFilter == 'income' ? currentIncomeData : graphFilter == 'outcome' ? currentOutcomeData : currentTransactionData },
]}
type="area"
height={200}