Skip to content

Commit

Permalink
Added all type back in with exceptions
Browse files Browse the repository at this point in the history
  • Loading branch information
@carkom
carkom committed Oct 29, 2023
1 parent d367884 commit 54f8cf2
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 54 deletions.
16 changes: 14 additions & 2 deletions packages/desktop-client/src/components/reports/Custom.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -291,6 +291,7 @@ export default function Custom() {
interval={mode === 'time' && months}
scrollWidth={scrollWidth}
split={splitOptions.find(opt => opt.value === split).description}
type={type}
/>
<SimpleTable saveScrollWidth={saveScrollWidth}>
<TotalTableList
Expand All @@ -308,6 +309,7 @@ export default function Custom() {
mode={mode}
typeItem={typeOptions.find(opt => opt.value === type).format}
monthsCount={months.length}
type={type}
/>
</>
);
Expand All @@ -332,6 +334,9 @@ export default function Custom() {
if ([5, 6].includes(split)) {
setSplit(1);
}
if ([3].includes(type)) {
setType(1);
}
} else {
if (graphType === 'StackedBarGraph') {
setGraphType('BarGraph');
Expand Down Expand Up @@ -529,7 +534,13 @@ export default function Custom() {
option.value,
option.description,
])}
disabledKeys={[3]}
disabledKeys={
mode === 'time'
? [3]
: graphType === 'BarGraph' && [1, 2, 3, 4].includes(split)
? [3]
: [0]
}
/>
</View>
{/*
Expand Down Expand Up @@ -737,6 +748,7 @@ export default function Custom() {
onSelect={() => {
if (mode === 'total') {
onChangeGraph('BarGraph');
[3].includes(type) && setType(1);

Check warning on line 751 in packages/desktop-client/src/components/reports/Custom.js

View workflow job for this annotation

GitHub Actions / lint 

Avoid using the && operator at the top level. Consider using an if statement or optional chaining instead
} else {
onChangeGraph('StackedBarGraph');
}
Expand All @@ -763,7 +775,7 @@ export default function Custom() {
selected={graphType === 'DonutGraph'}
onSelect={() => {
onChangeGraph('DonutGraph');
setType(1);
//setType(1);
}}
style={{ marginLeft: 15 }}
disabled={mode === 'total' ? false : true}
Expand Down
89 changes: 54 additions & 35 deletions packages/desktop-client/src/components/reports/ReportTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ type TableRowProps = {
date: string;
name: string;
monthData: [];
totalAssets: string;
totalDebts: string;
};
typeItem?: string | null;
splitItem: string;
Expand All @@ -40,18 +42,23 @@ const TableRow = memo(
}}
>
<Cell value={item[splitItem]} width="flex" />
{item.monthData &&
mode === 'time' &&
item.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[typeItem])}
value={amountToCurrency(item[typeItem])}
width="flex"
privacyFilter
/>
);
})}
{item.monthData && mode === 'time'
? item.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[typeItem])}
value={amountToCurrency(item[typeItem])}
width="flex"
privacyFilter
/>
);
})
: typeItem === 'totalTotals' && (
<>
<Cell value={amountToCurrency(item.totalAssets)} width="flex" />
<Cell value={amountToCurrency(item.totalDebts)} width="flex" />
</>
)}
<Cell
value={amountToCurrency(item[typeItem])}
style={{
Expand Down Expand Up @@ -117,7 +124,7 @@ function GroupedTableRow({
);
}

export function TableHeader({ scrollWidth, split, interval }) {
export function TableHeader({ scrollWidth, split, interval, type }) {
return (
<Row
collapsed={true}
Expand All @@ -128,17 +135,23 @@ export function TableHeader({ scrollWidth, split, interval }) {
}}
>
<Cell value={split} width="flex" />
{interval &&
interval.map(header => {
return (
<Cell
key={header}
// eslint-disable-next-line rulesdir/typography
value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
width="flex"
/>
);
})}
{interval
? interval.map(header => {
return (
<Cell
key={header}
// eslint-disable-next-line rulesdir/typography
value={d.format(d.parseISO(`${header}-01`), "MMM ''yy")}
width="flex"
/>
);
})
: type === 3 && (
<>
<Cell value={'Assets'} width="flex" />
<Cell value={'Debts'} width="flex" />
</>
)}
<Cell value={'Totals'} width="flex" />
<Cell value={'Average'} width="flex" />
{scrollWidth > 0 && <Cell width={scrollWidth} />}
Expand All @@ -164,17 +177,23 @@ export function TableTotals({
}}
>
<Cell value={'Totals'} width="flex" />
{mode === 'time' &&
data.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[typeItem])}
value={amountToCurrency(item[typeItem])}
width="flex"
privacyFilter
/>
);
})}
{mode === 'time'
? data.monthData.map(item => {
return (
<Cell
key={amountToCurrency(item[typeItem])}
value={amountToCurrency(item[typeItem])}
width="flex"
privacyFilter
/>
);
})
: typeItem === 'totalTotals' && (
<>
<Cell value={data.totalAssets} width="flex" />
<Cell value={data.totalDebts} width="flex" />
</>
)}
<Cell
value={amountToCurrency(data[typeItem])}
width="flex"
Expand Down
49 changes: 32 additions & 17 deletions packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
CartesianGrid,
Legend,
Cell,
ReferenceLine,
XAxis,
YAxis,
Tooltip,
Expand Down Expand Up @@ -55,6 +56,7 @@ function BarGraph({
}: BarGraphProps) {
const colorScale = getColorScale('qualitative');
const yAxis = [5, 6].includes(split) ? 'date' : 'name';
const splitData = [5, 6].includes(split) ? 'monthData' : 'data';

type PayloadItem = {
value: string;
Expand Down Expand Up @@ -154,9 +156,9 @@ function BarGraph({

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

Expand All @@ -168,46 +170,59 @@ function BarGraph({
}}
>
{(width, height, portalHost) =>
data.data && (
data[splitData] && (
<ResponsiveContainer>
<div>
{!compact && <div style={{ marginTop: '15px' }} />}
<BarChart
width={width}
height={height}
data={
yAxis === 'date'
? data.monthData.filter(i =>
empty ? i[typeOp] !== 0 : true,
)
: data.data.filter(i => (empty ? i[typeOp] !== 0 : true))
}
stackOffset="sign"
data={data[splitData].filter(i =>
empty ? i[typeOp] !== 0 : true,
)}
margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
>
{compact ? null : <Legend content={<CustomLegend />} />}
{!compact && <Legend content={<CustomLegend />} />}
<Tooltip
content={<CustomTooltip />}
formatter={numberFormatterTooltip}
isAnimationActive={false}
/>
{compact ? null : <CartesianGrid strokeDasharray="3 3" />}
{compact ? null : <XAxis dataKey={yAxis} />}
{compact ? null : <YAxis />}
<Bar dataKey={val => getVal(val)}>
{data.data
{!compact && <CartesianGrid strokeDasharray="3 3" />}
{!compact && <XAxis dataKey={yAxis} />}
{!compact && <YAxis />}
{!compact && <ReferenceLine y={0} stroke="#000" />}
<Bar dataKey={val => getVal(val)} stackId="a">
{data[splitData]
.filter(i => (empty ? i[typeOp] !== 0 : true))
.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={
yAxis === 'date'
? theme.reportsBlue
? typeOp === 'totalDebts'
? theme.reportsRed
: theme.reportsBlue
: colorScale[index % colorScale.length]
}
name={entry.name}
/>
))}
</Bar>
{yAxis === 'date' && typeOp === 'totalTotals' && (
<Bar dataKey={'totalDebts'} stackId="a">
{data[splitData]
.filter(i => (empty ? i[typeOp] !== 0 : true))
.map((entry, index) => (
<Cell
key={`cell-${index}`}
fill={theme.reportsRed}
name={entry.name}
/>
))}
</Bar>
)}
</BarChart>
</div>
</ResponsiveContainer>
Expand Down

0 comments on commit 54f8cf2

Please sign in to comment.