Mobile reports (#2624)

* mobile reports * notes * header updates * hide tooltip in mobile view * visual updates * padding changes * VRT * bottom padding * merge fixes * VRT * unselectable * merge fixes
actualbudget · Apr 24, 2024 · 469c789 · 469c789
1 parent 6ec3728
commit 469c789
Show file tree

Hide file tree

Showing 21 changed files with 239 additions and 135 deletions.
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-1-chromium-linux.png
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-2-chromium-linux.png
diff --git a/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png b/...s-snapshots/Mobile-checks-that-settings-page-can-be-opened-3-chromium-linux.png
diff --git a/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png
diff --git a/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png b/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-2-chromium-linux.png
diff --git a/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png b/...js-snapshots/Reports-loads-net-worth-and-cash-flow-reports-3-chromium-linux.png
diff --git a/packages/desktop-client/src/components/FinancesApp.tsx b/packages/desktop-client/src/components/FinancesApp.tsx
@@ -163,15 +163,7 @@ function FinancesAppWithoutContext() {
               <Routes>
                 <Route path="/" element={<Navigate to="/budget" replace />} />
 
-                <Route
-                  path="/reports/*"
-                  element={
-                    <NarrowNotSupported>
-                      {/* Has its own lazy loading logic */}
-                      <Reports />
-                    </NarrowNotSupported>
-                  }
-                />
+                <Route path="/reports/*" element={<Reports />} />
 
                 <Route
                   path="/budget"
@@ -239,6 +231,7 @@ function FinancesAppWithoutContext() {
               <Route path="/budget" element={<MobileNavTabs />} />
               <Route path="/accounts" element={<MobileNavTabs />} />
               <Route path="/settings" element={<MobileNavTabs />} />
+              <Route path="/reports" element={<MobileNavTabs />} />
               <Route path="*" element={null} />
             </Routes>
           </View>

diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx
@@ -14,6 +14,7 @@ import {
   SvgTuning,
   SvgWallet,
 } from '../../icons/v1';
+import { SvgReports } from '../../icons/v1/Reports';
 import { SvgCalendar } from '../../icons/v2';
 import { useResponsive } from '../../ResponsiveProvider';
 import { theme, styles, type CSSProperties } from '../../style';
@@ -54,6 +55,12 @@ export function MobileNavTabs() {
       style: navTabStyle,
       Icon: SvgPiggyBank,
     },
+    {
+      name: 'Reports',
+      path: '/reports',
+      style: navTabStyle,
+      Icon: SvgReports,
+    },
     {
       name: 'Schedules (Soon)',
       path: '/schedules/soon',

diff --git a/packages/desktop-client/src/components/reports/Header.jsx b/packages/desktop-client/src/components/reports/Header.jsx
@@ -3,6 +3,7 @@ import { useLocation } from 'react-router-dom';
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import { SvgArrowLeft } from '../../icons/v1';
+import { useResponsive } from '../../ResponsiveProvider';
 import { styles } from '../../style';
 import { Button } from '../common/Button';
 import { Link } from '../common/Link';
@@ -36,6 +37,7 @@ export function Header({
 }) {
   const location = useLocation();
   const path = location.pathname;
+  const { isNarrowWidth } = useResponsive();
 
   return (
     <View
@@ -58,8 +60,8 @@ export function Header({
       {path !== '/reports/custom' && (
         <View
           style={{
-            flexDirection: 'row',
-            alignItems: 'center',
+            flexDirection: isNarrowWidth ? 'column' : 'row',
+            alignItems: isNarrowWidth ? 'right' : 'center',
             marginTop: 15,
             gap: 15,
           }}
@@ -103,45 +105,53 @@ export function Header({
             />
           </View>
 
-          {filters && <FilterButton onApply={onApply} type="accounts" />}
-
-          {show1Month && (
+          {!isNarrowWidth && filters && (
+            <FilterButton onApply={onApply} type="accounts" />
+          )}
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 15,
+            }}
+          >
+            {show1Month && (
+              <Button
+                type="bare"
+                onClick={() => onChangeDates(...getLatestRange(1))}
+              >
+                1 month
+              </Button>
+            )}
             <Button
               type="bare"
-              onClick={() => onChangeDates(...getLatestRange(1))}
+              onClick={() => onChangeDates(...getLatestRange(2))}
             >
-              1 month
+              3 months
             </Button>
-          )}
-          <Button
-            type="bare"
-            onClick={() => onChangeDates(...getLatestRange(2))}
-          >
-            3 months
-          </Button>
-          <Button
-            type="bare"
-            onClick={() => onChangeDates(...getLatestRange(5))}
-          >
-            6 months
-          </Button>
-          <Button
-            type="bare"
-            onClick={() => onChangeDates(...getLatestRange(11))}
-          >
-            1 Year
-          </Button>
-          <Button
-            type="bare"
-            onClick={() =>
-              onChangeDates(
-                ...getFullRange(allMonths[allMonths.length - 1].name),
-              )
-            }
-          >
-            All Time
-          </Button>
-
+            <Button
+              type="bare"
+              onClick={() => onChangeDates(...getLatestRange(5))}
+            >
+              6 months
+            </Button>
+            <Button
+              type="bare"
+              onClick={() => onChangeDates(...getLatestRange(11))}
+            >
+              1 Year
+            </Button>
+            <Button
+              type="bare"
+              onClick={() =>
+                onChangeDates(
+                  ...getFullRange(allMonths[allMonths.length - 1].name),
+                )
+              }
+            >
+              All Time
+            </Button>
+          </View>
           {children || <View style={{ flex: 1 }} />}
         </View>
       )}

diff --git a/packages/desktop-client/src/components/reports/Overview.jsx b/packages/desktop-client/src/components/reports/Overview.jsx
@@ -5,6 +5,7 @@ import { useReports } from 'loot-core/src/client/data-hooks/reports';
 
 import { useAccounts } from '../../hooks/useAccounts';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useResponsive } from '../../ResponsiveProvider';
 import { styles } from '../../style';
 import { Button } from '../common/Button';
 import { Link } from '../common/Link';
@@ -17,6 +18,7 @@ import { NetWorthCard } from './reports/NetWorthCard';
 
 export function Overview() {
   const customReports = useReports();
+  const { isNarrowWidth } = useResponsive();
 
   const location = useLocation();
   sessionStorage.setItem('url', location.pathname);
@@ -28,10 +30,14 @@ export function Overview() {
     <View
       style={{
         ...styles.page,
-        ...{ paddingLeft: 40, paddingRight: 40, minWidth: 700 },
+        ...{
+          padding: 15,
+          paddingTop: 0,
+          minWidth: isNarrowWidth ? null : 700,
+        },
       }}
     >
-      {customReportsFeatureFlag && (
+      {customReportsFeatureFlag && !isNarrowWidth && (
         <View
           style={{
             flex: '0 0 auto',
@@ -49,7 +55,7 @@ export function Overview() {
       )}
       <View
         style={{
-          flexDirection: 'row',
+          flexDirection: isNarrowWidth ? 'column' : 'row',
           flex: '0 0 auto',
         }}
       >

diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx
@@ -20,6 +20,7 @@ import {
 import { type GroupedEntity } from 'loot-core/src/types/models/reports';
 
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
+import { useResponsive } from '../../../ResponsiveProvider';
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
@@ -125,6 +126,7 @@ export function AreaGraph({
   viewLabels,
 }: AreaGraphProps) {
   const privacyMode = usePrivacyMode();
+  const { isNarrowWidth } = useResponsive();
   const dataMax = Math.max(...data.intervalData.map(i => i[balanceTypeOp]));
   const dataMin = Math.min(...data.intervalData.map(i => i[balanceTypeOp]));
 
@@ -211,11 +213,13 @@ export function AreaGraph({
                     tickSize={0}
                   />
                 )}
-                <Tooltip
-                  content={<CustomTooltip balanceTypeOp={balanceTypeOp} />}
-                  formatter={numberFormatterTooltip}
-                  isAnimationActive={false}
-                />
+                {(!isNarrowWidth || !compact) && (
+                  <Tooltip
+                    content={<CustomTooltip balanceTypeOp={balanceTypeOp} />}
+                    formatter={numberFormatterTooltip}
+                    isAnimationActive={false}
+                  />
+                )}
                 <defs>
                   <linearGradient
                     id={`fill${balanceTypeOp}`}

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -26,6 +26,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
+import { useResponsive } from '../../../ResponsiveProvider';
 import { type CSSProperties } from '../../../style';
 import { theme } from '../../../style/index';
 import { AlignedText } from '../../common/AlignedText';
@@ -157,6 +158,7 @@ export function BarGraph({
   const categories = useCategories();
   const accounts = useAccounts();
   const privacyMode = usePrivacyMode();
+  const { isNarrowWidth } = useResponsive();
   const [pointer, setPointer] = useState('');
 
   const yAxis = groupBy === 'Interval' ? 'date' : 'name';
@@ -261,17 +263,19 @@ export function BarGraph({
                   bottom: 0,
                 }}
               >
-                <Tooltip
-                  cursor={{ fill: 'transparent' }}
-                  content={
-                    <CustomTooltip
-                      balanceTypeOp={balanceTypeOp}
-                      yAxis={yAxis}
-                    />
-                  }
-                  formatter={numberFormatterTooltip}
-                  isAnimationActive={false}
-                />
+                {(!isNarrowWidth || !compact) && (
+                  <Tooltip
+                    cursor={{ fill: 'transparent' }}
+                    content={
+                      <CustomTooltip
+                        balanceTypeOp={balanceTypeOp}
+                        yAxis={yAxis}
+                      />
+                    }
+                    formatter={numberFormatterTooltip}
+                    isAnimationActive={false}
+                  />
+                )}
                 {!compact && (
                   <>
                     <CartesianGrid strokeDasharray="3 3" />
@@ -306,7 +310,9 @@ export function BarGraph({
                     setPointer('pointer')
                   }
                   onClick={
-                    !['Group', 'Interval'].includes(groupBy) && onShowActivity
+                    !isNarrowWidth &&
+                    !['Group', 'Interval'].includes(groupBy) &&
+                    onShowActivity
                   }
                 >
                   {viewLabels && !compact && (

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -10,6 +10,7 @@ import { type RuleConditionEntity } from 'loot-core/types/models/rule';
 import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
+import { useResponsive } from '../../../ResponsiveProvider';
 import { theme, type CSSProperties } from '../../../style';
 import { PrivacyFilter } from '../../PrivacyFilter';
 import { Container } from '../Container';
@@ -203,6 +204,7 @@ export function DonutGraph({
   const navigate = useNavigate();
   const categories = useCategories();
   const accounts = useAccounts();
+  const { isNarrowWidth } = useResponsive();
   const [pointer, setPointer] = useState('');
 
   const onShowActivity = item => {
@@ -308,7 +310,9 @@ export function DonutGraph({
                     }
                   }}
                   onClick={
-                    !['Group', 'Interval'].includes(groupBy) && onShowActivity
+                    !isNarrowWidth &&
+                    !['Group', 'Interval'].includes(groupBy) &&
+                    onShowActivity
                   }
                 >
                   {data.legend.map((entry, index) => (

diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx
@@ -23,6 +23,7 @@ import { useAccounts } from '../../../hooks/useAccounts';
 import { useCategories } from '../../../hooks/useCategories';
 import { useNavigate } from '../../../hooks/useNavigate';
 import { usePrivacyMode } from '../../../hooks/usePrivacyMode';
+import { useResponsive } from '../../../ResponsiveProvider';
 import { theme } from '../../../style';
 import { type CSSProperties } from '../../../style';
 import { AlignedText } from '../../common/AlignedText';
@@ -133,6 +134,7 @@ export function LineGraph({
   const privacyMode = usePrivacyMode();
   const [pointer, setPointer] = useState('');
   const [tooltip, setTooltip] = useState('');
+  const { isNarrowWidth } = useResponsive();
 
   const largestValue = data.intervalData
     .map(c => c[balanceTypeOp])
@@ -206,13 +208,15 @@ export function LineGraph({
                 margin={{ top: 10, right: 10, left: leftMargin, bottom: 10 }}
                 style={{ cursor: pointer }}
               >
-                <Tooltip
-                  content={
-                    <CustomTooltip compact={compact} tooltip={tooltip} />
-                  }
-                  formatter={numberFormatterTooltip}
-                  isAnimationActive={false}
-                />
+                {(!isNarrowWidth || !compact) && (
+                  <Tooltip
+                    content={
+                      <CustomTooltip compact={compact} tooltip={tooltip} />
+                    }
+                    formatter={numberFormatterTooltip}
+                    isAnimationActive={false}
+                  />
+                )}
                 {!compact && (
                   <>
                     <CartesianGrid strokeDasharray="3 3" />
@@ -255,6 +259,7 @@ export function LineGraph({
                           setTooltip('');
                         },
                         onClick: (e, payload) =>
+                          !isNarrowWidth &&
                           !['Group', 'Interval'].includes(groupBy) &&
                           onShowActivity(e, entry.id, payload),
                       }}