Skip to content

Commit

Permalink
Clean-up some custom reports code (actualbudget#2254)
Browse files Browse the repository at this point in the history 
* work

* missed

* notes

* change element name

* update

* update changes

* merge fixes
  • Loading branch information
@carkom
carkom authored Jan 19, 2024
1 parent 39af189 commit bdf5d36
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 91 deletions.
124 changes: 70 additions & 54 deletions packages/desktop-client/src/components/reports/ReportSidebar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,34 +20,23 @@ import { ModeButton } from './ModeButton';
import { ReportOptions } from './ReportOptions';

export function ReportSidebar({
startDate,
endDate,
onChangeDates,
dateRange,
setDateRange,
customReportItems,
categories,
dateRangeLine,
allMonths,
graphType,
setGraphType,
setDateRange,
typeDisabled,
setTypeDisabled,
groupBy,
setGraphType,
setGroupBy,
balanceType,
setBalanceType,
mode,
setMode,
isDateStatic,
setIsDateStatic,
showEmpty,
setShowEmpty,
showOffBudgetHidden,
setShowOffBudgetHidden,
showUncategorized,
setShowUncategorized,
categories,
selectedCategories,
setSelectedCategories,
onChangeDates,
onChangeViews,
}) {
const onSelectRange = cond => {
Expand Down Expand Up @@ -86,26 +75,26 @@ export function ReportSidebar({
const onChangeMode = cond => {
setMode(cond);
if (cond === 'time') {
if (graphType === 'TableGraph') {
if (customReportItems.graphType === 'TableGraph') {
setTypeDisabled([]);
} else {
setTypeDisabled(['Net']);
if (['Net'].includes(balanceType)) {
if (['Net'].includes(customReportItems.balanceType)) {
setBalanceType('Payment');
}
}
if (graphType === 'BarGraph') {
if (customReportItems.graphType === 'BarGraph') {
setGraphType('StackedBarGraph');
}
if (['AreaGraph', 'DonutGraph'].includes(graphType)) {
if (['AreaGraph', 'DonutGraph'].includes(customReportItems.graphType)) {
setGraphType('TableGraph');
onChangeViews('viewLegend', false);
}
if (['Month', 'Year'].includes(groupBy)) {
if (['Month', 'Year'].includes(customReportItems.groupBy)) {
setGroupBy('Category');
}
} else {
if (graphType === 'StackedBarGraph') {
if (customReportItems.graphType === 'StackedBarGraph') {
setGraphType('BarGraph');
} else {
setTypeDisabled([]);
Expand All @@ -115,12 +104,17 @@ export function ReportSidebar({

const onChangeSplit = cond => {
setGroupBy(cond);
if (mode === 'total') {
if (graphType !== 'TableGraph') {
setTypeDisabled(!['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
if (customReportItems.mode === 'total') {
if (customReportItems.graphType !== 'TableGraph') {
setTypeDisabled(
!['Month', 'Year'].includes(customReportItems.groupBy) ? [] : ['Net'],
);
}
}
if (['Net'].includes(balanceType) && graphType !== 'TableGraph') {
if (
['Net'].includes(customReportItems.balanceType) &&
customReportItems.graphType !== 'TableGraph'
) {
setBalanceType('Payment');
}
};
Expand Down Expand Up @@ -158,13 +152,13 @@ export function ReportSidebar({
Mode:
</Text>
<ModeButton
selected={mode === 'total'}
selected={customReportItems.mode === 'total'}
onSelect={() => onChangeMode('total')}
>
Total
</ModeButton>
<ModeButton
selected={mode === 'time'}
selected={customReportItems.mode === 'time'}
onSelect={() => onChangeMode('time')}
>
Time
Expand All @@ -181,16 +175,16 @@ export function ReportSidebar({
Split:
</Text>
<Select
value={groupBy}
value={customReportItems.groupBy}
onChange={e => onChangeSplit(e)}
options={ReportOptions.groupBy.map(option => [
option.description,
option.description,
])}
disabledKeys={
mode === 'time'
customReportItems.mode === 'time'
? ['Month', 'Year']
: graphType === 'AreaGraph'
: customReportItems.graphType === 'AreaGraph'
? ['Category', 'Group', 'Payee', 'Account', 'Year']
: ['Year']
}
Expand All @@ -207,7 +201,7 @@ export function ReportSidebar({
Type:
</Text>
<Select
value={balanceType}
value={customReportItems.balanceType}
onChange={setBalanceType}
options={ReportOptions.balanceType.map(option => [
option.description,
Expand Down Expand Up @@ -251,9 +245,9 @@ export function ReportSidebar({

<Checkbox
id="show-empty-columns"
checked={showEmpty}
value={showEmpty}
onChange={() => setShowEmpty(!showEmpty)}
checked={customReportItems.showEmpty}
value={customReportItems.showEmpty}
onChange={() => setShowEmpty(!customReportItems.showEmpty)}
/>
<label
htmlFor="show-empty-columns"
Expand All @@ -274,9 +268,11 @@ export function ReportSidebar({

<Checkbox
id="show-hidden-columns"
checked={showOffBudgetHidden}
value={showOffBudgetHidden}
onChange={() => setShowOffBudgetHidden(!showOffBudgetHidden)}
checked={customReportItems.showOffBudgetHidden}
value={customReportItems.showOffBudgetHidden}
onChange={() =>
setShowOffBudgetHidden(!customReportItems.showOffBudgetHidden)
}
/>
<label
htmlFor="show-hidden-columns"
Expand All @@ -297,9 +293,11 @@ export function ReportSidebar({

<Checkbox
id="show-uncategorized"
checked={showUncategorized}
value={showUncategorized}
onChange={() => setShowUncategorized(!showUncategorized)}
checked={customReportItems.showUncategorized}
value={customReportItems.showUncategorized}
onChange={() =>
setShowUncategorized(!customReportItems.showUncategorized)
}
/>
<label
htmlFor="show-uncategorized"
Expand Down Expand Up @@ -330,25 +328,28 @@ export function ReportSidebar({
</Text>
<View style={{ flex: 1 }} />
<ModeButton
selected={!isDateStatic}
selected={!customReportItems.isDateStatic}
onSelect={() => {
setIsDateStatic(false);
onSelectRange(dateRange);
onSelectRange(customReportItems.dateRange);
}}
>
Live
</ModeButton>
<ModeButton
selected={isDateStatic}
selected={customReportItems.isDateStatic}
onSelect={() => {
setIsDateStatic(true);
onChangeDates(startDate, endDate);
onChangeDates(
customReportItems.startDate,
customReportItems.endDate,
);
}}
>
Static
</ModeButton>
</View>
{!isDateStatic ? (
{!customReportItems.isDateStatic ? (
<View
style={{
flexDirection: 'row',
Expand All @@ -360,7 +361,7 @@ export function ReportSidebar({
Range:
</Text>
<Select
value={dateRange}
value={customReportItems.dateRange}
onChange={e => {
onSelectRange(e);
}}
Expand All @@ -385,10 +386,19 @@ export function ReportSidebar({
</Text>
<Select
onChange={newValue =>
onChangeDates(...validateStart(allMonths, newValue, endDate))
onChangeDates(
...validateStart(
allMonths,
newValue,
customReportItems.endDate,
),
)
}
value={startDate}
defaultLabel={monthUtils.format(startDate, 'MMMM, yyyy')}
value={customReportItems.startDate}
defaultLabel={monthUtils.format(
customReportItems.startDate,
'MMMM, yyyy',
)}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
/>
</View>
Expand All @@ -404,9 +414,15 @@ export function ReportSidebar({
</Text>
<Select
onChange={newValue =>
onChangeDates(...validateEnd(allMonths, startDate, newValue))
onChangeDates(
...validateEnd(
allMonths,
customReportItems.startDate,
newValue,
),
)
}
value={endDate}
value={customReportItems.endDate}
options={allMonths.map(({ name, pretty }) => [name, pretty])}
/>
</View>
Expand All @@ -421,7 +437,7 @@ export function ReportSidebar({
}}
/>
</View>
{['Category', 'Group'].includes(groupBy) && (
{['Category', 'Group'].includes(customReportItems.groupBy) && (
<View
style={{
marginTop: 10,
Expand All @@ -431,7 +447,7 @@ export function ReportSidebar({
<CategorySelector
categoryGroups={categories.grouped}
categories={categories.list}
selectedCategories={selectedCategories}
selectedCategories={customReportItems.selectedCategories}
setSelectedCategories={setSelectedCategories}
/>
</View>
Expand Down
41 changes: 25 additions & 16 deletions packages/desktop-client/src/components/reports/ReportTopbar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,12 @@ import { GraphButton } from './GraphButton';
import { SaveReportMenuButton } from './SaveReport';

export function ReportTopbar({
graphType,
customReportItems,
setGraphType,
mode,
viewLegend,
setTypeDisabled,
balanceType,
setBalanceType,
groupBy,
setGroupBy,
viewLegend,
viewSummary,
viewLabels,
onApplyFilter,
Expand All @@ -41,7 +38,7 @@ export function ReportTopbar({
}}
>
<GraphButton
selected={graphType === 'TableGraph'}
selected={customReportItems.graphType === 'TableGraph'}
title="Data Table"
onSelect={() => {
setGraphType('TableGraph');
Expand All @@ -53,15 +50,24 @@ export function ReportTopbar({
<SvgQueue width={15} height={15} />
</GraphButton>
<GraphButton
title={mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'}
selected={graphType === 'BarGraph' || graphType === 'StackedBarGraph'}
title={
customReportItems.mode === 'total' ? 'Bar Graph' : 'Stacked Bar Graph'
}
selected={
customReportItems.graphType === 'BarGraph' ||
customReportItems.graphType === 'StackedBarGraph'
}
onSelect={() => {
if (mode === 'total') {
if (customReportItems.mode === 'total') {
setGraphType('BarGraph');
if (['Net'].includes(balanceType)) {
if (['Net'].includes(customReportItems.balanceType)) {
setBalanceType('Payment');
}
setTypeDisabled(['Month', 'Year'].includes(groupBy) ? [] : ['Net']);
setTypeDisabled(
['Month', 'Year'].includes(customReportItems.groupBy)
? []
: ['Net'],
);
} else {
setGraphType('StackedBarGraph');
setTypeDisabled(['Net']);
Expand All @@ -74,28 +80,28 @@ export function ReportTopbar({
</GraphButton>
<GraphButton
title="Area Graph"
selected={graphType === 'AreaGraph'}
selected={customReportItems.graphType === 'AreaGraph'}
onSelect={() => {
setGraphType('AreaGraph');
setGroupBy('Month');
onChangeViews('viewLegend', false);
setTypeDisabled([]);
}}
style={{ marginRight: 15 }}
disabled={mode === 'total' ? false : true}
disabled={customReportItems.mode === 'total' ? false : true}
>
<SvgChart width={15} height={15} />
</GraphButton>
<GraphButton
title="Donut Graph"
selected={graphType === 'DonutGraph'}
selected={customReportItems.graphType === 'DonutGraph'}
onSelect={() => {
setGraphType('DonutGraph');
setTypeDisabled(['Net']);
setBalanceType('Payment');
}}
style={{ marginRight: 15 }}
disabled={mode === 'total' ? false : true}
disabled={customReportItems.mode === 'total' ? false : true}
>
<SvgChartPie width={15} height={15} />
</GraphButton>
Expand All @@ -116,7 +122,10 @@ export function ReportTopbar({
style={{ marginRight: 15 }}
title="Show Legend"
disabled={
graphType === 'TableGraph' || graphType === 'AreaGraph' ? true : false
customReportItems.graphType === 'TableGraph' ||
customReportItems.graphType === 'AreaGraph'
? true
: false
}
>
<SvgListBullet width={15} height={15} />
Expand Down
Loading

0 comments on commit bdf5d36

Please sign in to comment.