diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx index 15685ad392..a34fdbd598 100644 --- a/packages/desktop-client/src/components/forms.tsx +++ b/packages/desktop-client/src/components/forms.tsx @@ -75,6 +75,7 @@ export const Checkbox = (props: CheckboxProps) => { { position: 'relative', margin: 0, + flexShrink: 0, marginRight: 6, width: 15, height: 15, diff --git a/packages/desktop-client/src/components/reports/CategorySelector.tsx b/packages/desktop-client/src/components/reports/CategorySelector.tsx index 01c5b9db1c..9c388348a8 100644 --- a/packages/desktop-client/src/components/reports/CategorySelector.tsx +++ b/packages/desktop-client/src/components/reports/CategorySelector.tsx @@ -48,6 +48,7 @@ export default function CategorySelector({ paddingLeft: 0, paddingRight: 10, height: 320, + flexGrow: 1, overflowY: 'scroll', }} > diff --git a/packages/desktop-client/src/components/reports/CategorySpending.js b/packages/desktop-client/src/components/reports/CategorySpending.js index 7b1ce7f292..0a01fa4951 100644 --- a/packages/desktop-client/src/components/reports/CategorySpending.js +++ b/packages/desktop-client/src/components/reports/CategorySpending.js @@ -135,7 +135,13 @@ function CategoryAverage() { headerPrefixItems={headerPrefixItems} /> - + diff --git a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx index a5dfdb8dbd..438c2db2ad 100644 --- a/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/CategorySpendingGraph.tsx @@ -1,3 +1,5 @@ +import type { CSSProperties } from 'react'; + import * as d from 'date-fns'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryStack } from 'victory'; @@ -13,8 +15,10 @@ type CategorySpendingGraphProps = { end: string; graphData: CategorySpendingGraphData; compact?: boolean; + style?: CSSProperties; }; function CategorySpendingGraph({ + style, start, end, graphData, @@ -25,17 +29,19 @@ function CategorySpendingGraph({ } return ( - + {(width, height, portalHost) => ( - + {graphData.categories.map(category => ( )} diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index 5990ffa84b..f19da27d81 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx @@ -92,12 +92,16 @@ function NetWorthGraph({ style, graphData, compact }: NetWorthGraphProps) { // eslint-disable-next-line rulesdir/typography tickFormat={x => d.format(x, "MMM ''yy")} tickValues={graphData.data.map(item => item.x)} - tickCount={Math.min(5, graphData.data.length)} + tickCount={Math.min(width / 220, graphData.data.length)} offsetY={50} /> )} {!compact && ( - + )} ) diff --git a/upcoming-release-notes/1592.md b/upcoming-release-notes/1592.md new file mode 100644 index 0000000000..823c5ef17a --- /dev/null +++ b/upcoming-release-notes/1592.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [OlegWock] +--- + +Make reports more responsive.