Skip to content

Commit

Permalink
data spreadsheet updates/groups added to matrix
Browse files Browse the repository at this point in the history
  • Loading branch information
@carkom
carkom committed Oct 27, 2023
1 parent 2d492e1 commit 47058b1
Show file tree
Hide file tree
Showing 5 changed files with 245 additions and 176 deletions.
26 changes: 13 additions & 13 deletions packages/desktop-client/src/components/reports/Custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,12 @@ export default function Custom() {
onCondOpChange,
} = useFilters();

const typeOptions = [
{ value: 1, description: 'Expense', format: 'totalDebts' },
{ value: 2, description: 'Income', format: 'totalAssets' },
{ value: 3, description: 'All', format: 'totalTotals' },
];

const [allMonths, setAllMonths] = useState(null);
const [start, setStart] = useState(
monthUtils.subMonths(monthUtils.currentMonth(), 5),
Expand All @@ -135,6 +141,7 @@ export default function Custom() {
start,
end,
split,
typeOptions.find(opt => opt.value === type).format,
categories,
payees,
accounts,
Expand All @@ -146,6 +153,7 @@ export default function Custom() {
start,
end,
split,
type,
categories,
payees,
accounts,
Expand Down Expand Up @@ -277,7 +285,7 @@ export default function Custom() {
data={data}
empty={!empty}
months={months}
type={type}
typeItem={typeOptions.find(opt => opt.value === type).format}
mode={mode}
split={splitOptions.find(opt => opt.value === split).description}
/>
Expand All @@ -286,7 +294,7 @@ export default function Custom() {
scrollWidth={scrollWidth}
data={data}
mode={mode}
totalItem={typeOptions.find(opt => opt.value === type).format}
typeItem={typeOptions.find(opt => opt.value === type).format}
/>
</>
);
Expand Down Expand Up @@ -387,12 +395,6 @@ export default function Custom() {
{ value: 6, description: 'Year' },
];

const typeOptions = [
{ value: 1, description: 'Expense', format: 'totalDebts' },
{ value: 2, description: 'Income', format: 'totalAssets' },
{ value: 3, description: 'All', format: 'totalTotals' },
];

/*
const intervalOptions = [
{ value: 1, description: 'Daily', name: 1 },
Expand Down Expand Up @@ -485,8 +487,8 @@ export default function Custom() {
mode === 'time'
? [5, 6]
: graphType === 'AreaGraph'
? [1, 2, 3, 4]
: [0]
? [1, 2, 3, 4, 6]
: [6]
}
/>
</View>
Expand All @@ -507,9 +509,7 @@ export default function Custom() {
option.value,
option.description,
])}
disabledKeys={
mode === 'total' && graphType === 'DonutGraph' ? [3] : [0]
}
disabledKeys={[3]}
/>
</View>
{/*
Expand Down
121 changes: 77 additions & 44 deletions packages/desktop-client/src/components/reports/ReportTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,30 @@ type TableRowProps = {
item: {
date: string;
name: string;
monthData: [];
};
totalItem: string;
typeItem?: string | null;
splitItem: string;
mode: string;
data?: [] | null;
style?: object | null;
};

const TableRow = memo(
({ item, totalItem, typeItem, splitItem, mode, data }: TableRowProps) => {
({ item, typeItem, splitItem, mode, style }: TableRowProps) => {
return (
<Row
key={item[splitItem]}
collapsed={true}
style={{
color: theme.tableText,
backgroundColor: theme.tableBackground,
...style,
}}
>
<Cell value={item[splitItem]} width="flex" />
{data &&
{item.monthData &&
mode === 'time' &&
data.map(item => {
item.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[typeItem])}
Expand All @@ -46,7 +47,7 @@ const TableRow = memo(
);
})}
<Cell
value={amountToCurrency(item[totalItem])}
value={amountToCurrency(item[typeItem])}
style={{
fontWeight: 600,
}}
Expand All @@ -58,6 +59,41 @@ const TableRow = memo(
},
);

function GroupedTableRow({ item, typeItem, splitItem, mode, empty }) {
return (
<>
<TableRow
key={item.id}
item={item}
typeItem={typeItem}
splitItem={splitItem}
mode={mode}
style={{
color: theme.tableRowHeaderText,
backgroundColor: theme.tableRowHeaderBackground,
fontWeight: 600,
}}
/>
<View>
{item.categories
.filter(i => (empty ? i[typeItem] !== 0 : true))
.map(item => {
return (
<TableRow
key={item.id}
item={item}
typeItem={typeItem}
splitItem={splitItem}
mode={mode}
/>
);
})}
</View>
<Row height={20} />
</>
);
}

export function TableHeader({ scrollWidth, split, interval }) {
return (
<Row
Expand Down Expand Up @@ -86,7 +122,7 @@ export function TableHeader({ scrollWidth, split, interval }) {
);
}

export function TableTotals({ data, scrollWidth, totalItem, mode }) {
export function TableTotals({ data, scrollWidth, typeItem, mode }) {
return (
<Row
collapsed={true}
Expand All @@ -101,16 +137,16 @@ export function TableTotals({ data, scrollWidth, totalItem, mode }) {
data.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[totalItem])}
value={amountToCurrency(item[totalItem])}
key={amountToCurrency(item[typeItem])}
value={amountToCurrency(item[typeItem])}
width="flex"
privacyFilter
/>
);
})}
<Cell
key={data[totalItem]}
value={amountToCurrency(data[totalItem])}
key={data[typeItem]}
value={amountToCurrency(data[typeItem])}
width="flex"
privacyFilter
/>
Expand All @@ -120,45 +156,42 @@ export function TableTotals({ data, scrollWidth, totalItem, mode }) {
);
}

export function TotalTableList({ data, empty, months, type, mode, split }) {
export function TotalTableList({ data, empty, months, typeItem, mode, split }) {
const splitItem = ['Month', 'Year'].includes(split) ? 'date' : 'name';
const splitData = ['Month', 'Year'].includes(split) ? 'monthData' : 'data';

let typeItem;
let totalItem;

switch (type) {
case 1:
typeItem = 'debts';
totalItem = 'totalDebts';
break;
case 2:
typeItem = 'assets';
totalItem = 'totalAssets';
break;
case 3:
typeItem = 'y';
totalItem = 'totalTotals';
break;
default:
}
const splitData =
split === 'Category'
? 'gData'
: ['Month', 'Year'].includes(split)
? 'monthData'
: 'data';

return (
<View>
{data[splitData]
.filter(i => (empty ? i[totalItem] !== 0 : true))
.filter(i => (empty ? i[typeItem] !== 0 : true))
.map(item => {
return (
<TableRow
key={item.id}
item={item}
totalItem={totalItem}
typeItem={mode === 'time' && typeItem}
splitItem={splitItem}
mode={mode}
data={mode === 'time' && item.graphData.data}
/>
);
if (split === 'Category') {
return (
<GroupedTableRow
key={item.id}
item={item}
typeItem={typeItem}
splitItem={splitItem}
mode={mode}
empty={empty}
/>
);
} else {
return (
<TableRow
key={item.id}
item={item}
typeItem={typeItem}
splitItem={splitItem}
mode={mode}
/>
);
}
})}
</View>
);
Expand Down
35 changes: 14 additions & 21 deletions packages/desktop-client/src/components/reports/SavedGraphs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,45 +8,38 @@ import Text from '../common/Text';
import View from '../common/View';

export function SavedGraphMenuButton({ selectGraph }) {
let [dataMenuOpen, setDataMenuOpen] = useState(false);
let [menuOpen, setMenuOpen] = useState(false);

const onDataMenuSelect = async item => {
const onGraphMenuSelect = async item => {
switch (item) {
case 'NetWorth':
setDataMenuOpen(false);
case 'save':
setMenuOpen(false);
break;
case 'CashFlow':
setDataMenuOpen(false);
break;
case 'Income':
setDataMenuOpen(false);
break;
case 'Expense':
setDataMenuOpen(false);
break;
case 'All':
setDataMenuOpen(false);
case 'clear':
setMenuOpen(false);
break;
default:
}
};

function DataMenu({ onClose }) {
function SavedGraphMenu({ onClose }) {
return (
<MenuTooltip width={150} onClose={onClose}>
<Menu
onMenuSelect={item => {
onDataMenuSelect(item);
onGraphMenuSelect(item);
}}
items={[
...[
{
name: 'NetWorth',
name: 'save',
text: 'Save new report',
disabled: true,
},
{
name: 'CashFlow',
name: 'clear',
text: 'Clear all',
disabled: true,
},
],
]}
Expand All @@ -65,7 +58,7 @@ export function SavedGraphMenuButton({ selectGraph }) {
<Button
type="bare"
onClick={() => {
setDataMenuOpen(true);
setMenuOpen(true);
}}
>
<Text
Expand All @@ -81,7 +74,7 @@ export function SavedGraphMenuButton({ selectGraph }) {
</Text>
<ExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
</Button>
{dataMenuOpen && <DataMenu onClose={() => setDataMenuOpen(false)} />}
{menuOpen && <SavedGraphMenu onClose={() => setMenuOpen(false)} />}
</View>
);
}
8 changes: 4 additions & 4 deletions packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,9 +142,9 @@ function StackedBarGraph({

const getVal = (obj, key) => {
if (typeOp === 'totalDebts') {
return -1 * obj[key][typeOp];
return -1 * obj[key].amount;
} else {
return obj[key][typeOp];
return obj[key].amount;
}
};

Expand All @@ -156,14 +156,14 @@ function StackedBarGraph({
}}
>
{(width, height, portalHost) =>
data.monthData && (
data.stackedData && (
<ResponsiveContainer>
<div>
{!compact && <div style={{ marginTop: '15px' }} />}
<BarChart
width={width}
height={height}
data={data.monthData}
data={data.stackedData}
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
>
<Legend content={<CustomLegend />} />
Expand Down
Loading

0 comments on commit 47058b1

Please sign in to comment.