[WIP] Save custom reports

packages/desktop-client/src/components/common/AnchorLink.tsx

@@ -10,19 +10,22 @@ type AnchorLinkProps = {
   style?: CSSProperties;
   activeStyle?: CSSProperties;
   children?: ReactNode;
+  report?: [];
 };
 
 export default function AnchorLink({
   to,
   style,
   activeStyle,
   children,
+  report,
 }: AnchorLinkProps) {
   let match = useMatch({ path: to });
 
   return (
     <NavLink
       to={to}
+      state={report ? { report: report } : {}}
       className={`${css([
         styles.smallText,
         style,

packages/desktop-client/src/components/common/Menu.tsx

@@ -29,14 +29,14 @@ type MenuItem = {
   disabled?: boolean;
   icon?;
   iconSize?: number;
-  text: string;
+  text?: string;
   key?: string;
 };
 
 type MenuProps = {
   header?: ReactNode;
   footer?: ReactNode;
-  items: Array<MenuItem | typeof Menu.line>;
+  items: Array<MenuItem>;
   onMenuSelect: (itemName: MenuItem['name']) => void;
 };
 
@@ -56,7 +56,7 @@ export default function Menu({
 
     let onKeyDown = e => {
       let filteredItems = items.filter(
-        item => item && item !== Menu.line && item.type !== Menu.label,
+        item => item && item.type !== Menu.line && item.type !== Menu.label,
       );
       let currentIndex = filteredItems.indexOf(items[hoveredIndex]);
 
@@ -84,7 +84,7 @@ export default function Menu({
         case 'Enter':
           e.preventDefault();
           const item = items[hoveredIndex];
-          if (hoveredIndex !== null && item !== Menu.line) {
+          if (hoveredIndex !== null && item.type !== Menu.line) {
             onMenuSelect?.(item.name);
           }
           break;
@@ -107,7 +107,7 @@ export default function Menu({
     >
       {header}
       {items.map((item, idx) => {
-        if (item === Menu.line) {
+        if (item.type === Menu.line) {
           return (
             <View key={idx} style={{ margin: '3px 0px' }}>
               <View style={{ borderTop: '1px solid ' + theme.menuBorder }} />
@@ -142,7 +142,7 @@ export default function Menu({
               padding: '9px 10px',
               marginTop:
                 idx === 0 ||
-                lastItem === Menu.line ||
+                lastItem.type === Menu.line ||
                 lastItem.type === Menu.label
                   ? 0
                   : -3,
@@ -182,6 +182,5 @@ export default function Menu({
   );
 }
 
-const MenuLine: unique symbol = Symbol('menu-line');
-Menu.line = MenuLine;
+Menu.line = Symbol('menu-line');
 Menu.label = Symbol('menu-label');

packages/desktop-client/src/components/common/MenuButton.tsx

@@ -4,9 +4,9 @@ import DotsHorizontalTriple from '../../icons/v1/DotsHorizontalTriple';
 
 import Button from './Button';
 
-export default function MenuButton({ onClick }) {
+export default function MenuButton({ onClick, style }) {
   return (
-    <Button type="bare" onClick={onClick} aria-label="Menu">
+    <Button type="bare" onClick={onClick} aria-label="Menu" style={style}>
       <DotsHorizontalTriple
         width={15}
         height={15}

packages/desktop-client/src/components/filters/SavedFilters.js

@@ -34,7 +34,7 @@ function FilterMenu({ onClose, filterId, onFilterMenuSelect }) {
                   ? [
                       { name: 'rename-filter', text: 'Rename' },
                       { name: 'delete-filter', text: 'Delete' },
-                      Menu.line,
+                      { name: 'menu-line', type: Menu.line },
                       {
                         name: 'save-filter',
                         text: 'Save new filter',
@@ -47,7 +47,7 @@ function FilterMenu({ onClose, filterId, onFilterMenuSelect }) {
                       { name: 'update-filter', text: 'Update condtions' },
                       { name: 'reload-filter', text: 'Revert changes' },
                       { name: 'delete-filter', text: 'Delete' },
-                      Menu.line,
+                      { name: 'menu-line', type: Menu.line },
                       { name: 'save-filter', text: 'Save new filter' },
                       { name: 'clear-filter', text: 'Clear all conditions' },
                     ]),
@@ -197,7 +197,7 @@ function SavedFilterMenuButton({
     }
   };
 
-  async function onAddUpdate() {
+  const onAddUpdate = async () => {
     if (adding) {
       //create new flow
       savedFilter = {
@@ -233,7 +233,7 @@ function SavedFilterMenuButton({
       setNameOpen(false);
       onReloadSavedFilter(savedFilter);
     }
-  }
+  };
 
   return (
     <View>

packages/desktop-client/src/components/payees/index.js

@@ -322,7 +322,7 @@ function PayeeMenu({ payeesById, selectedPayees, onDelete, onMerge, onClose }) {
             text: 'Merge',
             disabled: isDisabled || selectedPayees.size < 2,
           },
-          Menu.line,
+          { name: 'menu-line', type: Menu.line },
         ]}
       />
     </Tooltip>

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

@@ -1,22 +1,19 @@
 import React from 'react';
 
-import View from '../common/View';
-
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
 import DonutGraph from './graphs/DonutGraph';
 import LineGraph from './graphs/LineGraph';
 import StackedBarGraph from './graphs/StackedBarGraph';
+import TableGraph from './graphs/TableGraph';
 import { ReportOptions } from './ReportOptions';
-import ReportTable from './ReportTable';
-import ReportTableHeader from './ReportTableHeader';
-import ReportTableList from './ReportTableList';
-import ReportTableTotals from './ReportTableTotals';
 
 export function ChooseGraph({
   start,
   end,
+  compact,
+  style,
   data,
   mode,
   graphType,
@@ -25,18 +22,21 @@ export function ChooseGraph({
   empty,
   scrollWidth,
   setScrollWidth,
-  months,
 }) {
+  const graphStyle = compact ? { ...style } : { flexGrow: 1 };
+
   function saveScrollWidth(parent, child) {
     let width = parent > 0 && child > 0 && parent - child;
-
-    setScrollWidth(!width ? 0 : width);
+    if (setScrollWidth) {
+      setScrollWidth(!width ? 0 : width);
+    }
   }
 
   if (graphType === 'AreaGraph') {
     return (
       <AreaGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
         data={data}
@@ -47,7 +47,8 @@ export function ChooseGraph({
   if (graphType === 'BarGraph') {
     return (
       <BarGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
         data={data}
@@ -60,17 +61,19 @@ export function ChooseGraph({
   if (graphType === 'BarLineGraph') {
     return (
       <BarLineGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
-        graphData={data.graphData}
+        graphData={data}
       />
     );
   }
   if (graphType === 'DonutGraph') {
     return (
       <DonutGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
         data={data}
@@ -83,17 +86,19 @@ export function ChooseGraph({
   if (graphType === 'LineGraph') {
     return (
       <LineGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
-        graphData={data.graphData}
+        graphData={data}
       />
     );
   }
   if (graphType === 'StackedBarGraph') {
     return (
       <StackedBarGraph
-        style={{ flexGrow: 1 }}
+        style={graphStyle}
+        compact={compact}
         start={start}
         end={end}
         data={data}
@@ -103,36 +108,19 @@ export function ChooseGraph({
   }
   if (graphType === 'TableGraph') {
     return (
-      <View
-        style={{
-          overflow: 'auto',
-        }}
-      >
-        <ReportTableHeader
-          interval={mode === 'time' && months}
-          scrollWidth={scrollWidth}
-          groupBy={groupBy}
-          balanceType={balanceType}
-        />
-        <ReportTable saveScrollWidth={saveScrollWidth}>
-          <ReportTableList
-            data={data}
-            empty={empty}
-            monthsCount={months.length}
-            balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
-            mode={mode}
-            groupBy={groupBy}
-          />
-          <ReportTableTotals
-            scrollWidth={scrollWidth}
-            data={data}
-            mode={mode}
-            balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
-            monthsCount={months.length}
-            balanceType={balanceType}
-          />
-        </ReportTable>
-      </View>
+      <TableGraph
+        mode={mode}
+        start={start}
+        end={end}
+        scrollWidth={scrollWidth}
+        saveScrollWidth={saveScrollWidth}
+        balanceType={balanceType}
+        style={style}
+        data={data}
+        groupBy={groupBy}
+        empty={empty}
+        compact={compact}
+      />
     );
   }
 }

packages/desktop-client/src/components/reports/Convert.tsx

@@ -0,0 +1,7 @@
+export default function Convert(item) {
+  if (Number.isInteger(item)) {
+    return item === 1 ? true : false;
+  } else {
+    return item ? 1 : 0;
+  }
+}

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

@@ -1,14 +1,18 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
+import { useReports } from 'loot-core/src/client/data-hooks/reports';
+
 import useFeatureFlag from '../../hooks/useFeatureFlag';
 import AnimatedLoading from '../../icons/AnimatedLoading';
-import { styles } from '../../style';
+import { theme, styles } from '../../style';
 import View from '../common/View';
 
+import Convert from './Convert';
 import CashFlowCard from './reports/CashFlowCard';
 import CategorySpendingCard from './reports/CategorySpendingCard';
 import CustomReportCard from './reports/CustomReportCard';
+import CustomReportListCards from './reports/CustomReportListCards';
 import NetWorthCard from './reports/NetWorthCard';
 import SankeyCard from './reports/SankeyCard';
 
@@ -27,13 +31,20 @@ export function LoadingIndicator() {
 }
 
 export default function Overview() {
+  let reports = useReports();
   let categorySpendingReportFeatureFlag = useFeatureFlag(
     'categorySpendingReport',
   );
   let sankeyFeatureFlag = useFeatureFlag('sankeyReport');
 
   let customReportsFeatureFlag = useFeatureFlag('customReports');
 
+  const featureCount =
+    3 -
+    Convert(categorySpendingReportFeatureFlag) -
+    Convert(sankeyFeatureFlag) -
+    Convert(customReportsFeatureFlag);
+
   let accounts = useSelector(state => state.queries.accounts);
   return (
     <View
@@ -59,14 +70,25 @@ export default function Overview() {
       >
         {categorySpendingReportFeatureFlag && <CategorySpendingCard />}
         {sankeyFeatureFlag && <SankeyCard />}
-        {customReportsFeatureFlag ? (
-          <CustomReportCard />
-        ) : (
-          <div style={{ flex: 1 }} />
-        )}
-        {!categorySpendingReportFeatureFlag && <div style={{ flex: 1 }} />}
-        {!sankeyFeatureFlag && <div style={{ flex: 1 }} />}
+        {customReportsFeatureFlag && <CustomReportCard />}
+        {featureCount !== 3 &&
+          [...Array(featureCount)].map((e, i) => (
+            <View key={i} style={{ padding: 15, flex: 1 }} />
+          ))}
       </View>
+      {customReportsFeatureFlag && (
+        <>
+          <View
+            style={{
+              height: 1,
+              backgroundColor: theme.sidebarBackground,
+              marginTop: 10,
+              flexShrink: 0,
+            }}
+          />
+          <CustomReportListCards reports={reports} />
+        </>
+      )}
     </View>
   );
 }

packages/desktop-client/src/components/reports/ReportCard.tsx

@@ -4,7 +4,7 @@ import { theme } from '../../style';
 import AnchorLink from '../common/AnchorLink';
 import View from '../common/View';
 
-export default function ReportCard({ flex, to, style, children }) {
+export default function ReportCard({ flex, to, style, report, children }) {
   const containerProps = { flex, margin: 15 };
 
   const content = (
@@ -34,6 +34,7 @@ export default function ReportCard({ flex, to, style, children }) {
       <AnchorLink
         to={to}
         style={{ textDecoration: 'none', flex, ...containerProps }}
+        report={report}
       >
         {content}
       </AnchorLink>