Make reports more responsive (#1592)

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,

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',
         }}
       >

packages/desktop-client/src/components/reports/CategorySpending.js

@@ -135,7 +135,13 @@ function CategoryAverage() {
         headerPrefixItems={headerPrefixItems}
       />
       <View
-        style={{ display: 'flex', flexDirection: 'row', padding: 15, gap: 15 }}
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          padding: 15,
+          gap: 15,
+          flexGrow: 1,
+        }}
       >
         <View style={{ width: 200 }}>
           <CategorySelector
@@ -157,6 +163,7 @@ function CategoryAverage() {
           }}
         >
           <CategorySpendingGraph
+            style={{ flexGrow: 1 }}
             start={start}
             end={end}
             graphData={perCategorySpending}

packages/desktop-client/src/components/reports/NetWorth.js

@@ -105,6 +105,7 @@ export default function NetWorth() {
           padding: 30,
           paddingTop: 0,
           overflow: 'auto',
+          flexGrow: 1,
         }}
       >
         <View
@@ -127,7 +128,12 @@ export default function NetWorth() {
           </PrivacyFilter>
         </View>
 
-        <NetWorthGraph start={start} end={end} graphData={data.graphData} />
+        <NetWorthGraph
+          style={{ flexGrow: 1 }}
+          start={start}
+          end={end}
+          graphData={data.graphData}
+        />
 
         <View style={{ marginTop: 30 }}>
           <Paragraph>

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 (
-    <Container style={compact && { height: 'auto', flex: 1 }}>
+    <Container style={[style, compact && { height: 'auto', flex: 1 }]}>
       {(width, height, portalHost) => (
         <VictoryChart
           scale={{ x: 'time', y: 'linear' }}
           theme={theme}
-          domainPadding={compact ? { x: 10, y: 5 } : { x: 50, y: 10 }}
           width={width}
           height={height}
         >
           <Area start={start} end={end} />
-          <VictoryStack colorScale="qualitative">
+          <VictoryStack
+            colorScale="qualitative"
+            domainPadding={{ x: compact ? 5 : 15 }}
+          >
             {graphData.categories.map(category => (
               <VictoryBar
                 key={category.id}
@@ -65,7 +71,7 @@ function CategorySpendingGraph({
             dependentAxis
             crossAxis={false}
             invertAxis
-            tickCount={compact ? 2 : undefined}
+            tickCount={compact ? 2 : height / 70}
           />
         </VictoryChart>
       )}

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 && (
-              <VictoryAxis dependentAxis crossAxis={!graphData.hasNegative} />
+              <VictoryAxis
+                dependentAxis
+                tickCount={Math.round(height / 70)}
+                crossAxis={!graphData.hasNegative}
+              />
             )}
           </Chart>
         )

upcoming-release-notes/1592.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [OlegWock]
+---
+
+Make reports more responsive.