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-02 18:17:56 +07:00
parent b0813e1519
commit 02e101025e
13 changed files with 216 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/PeriodCharts.js
View File

@@ -19,12 +19,20 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
currentIncomeData = aggregatedCurrentReports.map((report) => report.income);
currentOutcomeData = aggregatedCurrentReports.map((report) => report.outcome);
currentTransactionData = aggregatedCurrentReports.map((report) => report.transactions);
if (type == 'monthly' && currentTransactionData.length === 4) {
currentTransactionData.push(null);
}
}
if (aggregatedPreviousReports) {
// Map the data for the previous reports
previousIncomeData = aggregatedPreviousReports.map((report) => report.income);
previousOutcomeData = aggregatedPreviousReports.map((report) => report.outcome);
previousTransactionData = aggregatedPreviousReports.map((report) => report.transactions);
if (type == 'monthly' && previousTransactionData.length === 4) {
previousTransactionData.push(null);
}
}
let globalMax = null;
if (aggregatedCurrentReports || aggregatedPreviousReports)
@@ -39,8 +47,7 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
);
return (
<div className={styles.chartItemContainer}>
<div className={`${styles.chartItemContainer} ${selectedIndex !== -1 ? styles.expanded : ''}`}>
{aggregatedPreviousReports && (
<div className={`${styles.chartItemWrapper} ${selectedIndex !== -1 && selectedIndex !== 0
? styles.chartItemWrapperActive
@@ -52,9 +59,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
onClick={() =>
selectedIndex === -1 ? setSelectedIndex(0) : setSelectedIndex(-1)
}
style={{ color: 'black',position: 'relative' }}
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: `1px solid ${colors[0]}` }}></div>
<div>{type == 'monthly' ? 'bulan lalu' : 'tahun lalu'}</div>
</div>
<div
@@ -80,6 +87,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
axisTicks: {
show: false, // Removes the ticks on the x-axis
},
labels: {
style: {
colors: ['black', 'black', 'black', 'black', aggregatedPreviousReports?.length == 4 ? 'transparent' : 'black'],
}
}
},
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false },
@@ -117,9 +129,9 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
selectedIndex === -1 ? setSelectedIndex(1) : setSelectedIndex(-1)
}
style={{ color: 'black',position: 'relative' }}
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: `1px solid ${colors[1]}` }}></div>
<div>{type == 'monthly' ? 'bulan ini' : 'tahun ini'}</div>
</div>
</div>
@@ -136,6 +148,11 @@ const PeriodCharts = ({ type, aggregatedCurrentReports, aggregatedPreviousReport
axisTicks: {
show: false, // Removes the ticks on the x-axis
},
labels: {
style: {
colors: ['black', 'black', 'black', 'black', aggregatedCurrentReports?.length == 4 ? 'transparent' : 'black'],
}
}
},
yaxis: { max: globalMax, min: 0, labels: { style: { colors: "transparent" } } },
grid: { show: false },