Customizeable Reports

packages/desktop-client/src/components/accounts/Header.js

@@ -239,7 +239,7 @@ export function AccountHeader({
             </Button>
           )}
           <View style={{ flexShrink: 0 }}>
-            <FilterButton onApply={onApplyFilter} />
+            <FilterButton onApply={onApplyFilter} type="accounts" />
           </View>
           <View style={{ flex: 1 }} />
           <Search

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

@@ -24,6 +24,7 @@ import {
 import { titleFirst } from 'loot-core/src/shared/util';
 
 import DeleteIcon from '../../icons/v0/Delete';
+import Filter from '../../icons/v1/Filter';
 import SettingsSliderAlternate from '../../icons/v2/SettingsSliderAlternate';
 import { theme } from '../../style';
 import Button from '../common/Button';
@@ -335,7 +336,28 @@ function ConfigureField({
   );
 }
 
-export function FilterButton({ onApply }) {
+function ButtonType({ type, dispatch }) {
+  return (
+    <Button
+      type="bare"
+      onClick={() => dispatch({ type: 'select-field' })}
+      title={type && 'Filters'}
+    >
+      {type === 'reports' ? (
+        <Filter width={15} height={15} />
+      ) : (
+        <>
+          <SettingsSliderAlternate
+            style={{ width: 16, height: 16, marginRight: 5 }}
+          />{' '}
+          Filter
+        </>
+      )}
+    </Button>
+  );
+}
+
+export function FilterButton({ onApply, type }) {
   let filters = useFilters();
 
   let { dateFormat } = useSelector(state => {
@@ -418,12 +440,7 @@ export function FilterButton({ onApply }) {
 
   return (
     <View>
-      <Button type="bare" onClick={() => dispatch({ type: 'select-field' })}>
-        <SettingsSliderAlternate
-          style={{ width: 16, height: 16, marginRight: 5 }}
-        />{' '}
-        Filter
-      </Button>
+      <ButtonType type={type} dispatch={dispatch} />
       {state.fieldsOpen && (
         <Tooltip
           position="bottom-left"

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

@@ -0,0 +1,138 @@
+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 { ReportOptions } from './ReportOptions';
+import ReportTable from './ReportTable';
+import ReportTableHeader from './ReportTableHeader';
+import ReportTableList from './ReportTableList';
+import ReportTableTotals from './ReportTableTotals';
+
+export function ChooseGraph({
+  start,
+  end,
+  data,
+  mode,
+  graphType,
+  balanceType,
+  groupBy,
+  empty,
+  scrollWidth,
+  setScrollWidth,
+  months,
+}) {
+  function saveScrollWidth(parent, child) {
+    let width = parent > 0 && child > 0 && parent - child;
+
+    setScrollWidth(!width ? 0 : width);
+  }
+
+  if (graphType === 'AreaGraph') {
+    return (
+      <AreaGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        data={data}
+        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+      />
+    );
+  }
+  if (graphType === 'BarGraph') {
+    return (
+      <BarGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        data={data}
+        groupBy={groupBy}
+        empty={empty}
+        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+      />
+    );
+  }
+  if (graphType === 'BarLineGraph') {
+    return (
+      <BarLineGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        graphData={data.graphData}
+      />
+    );
+  }
+  if (graphType === 'DonutGraph') {
+    return (
+      <DonutGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        data={data}
+        groupBy={groupBy}
+        empty={empty}
+        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+      />
+    );
+  }
+  if (graphType === 'LineGraph') {
+    return (
+      <LineGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        graphData={data.graphData}
+      />
+    );
+  }
+  if (graphType === 'StackedBarGraph') {
+    return (
+      <StackedBarGraph
+        style={{ flexGrow: 1 }}
+        start={start}
+        end={end}
+        data={data}
+        balanceTypeOp={ReportOptions.balanceTypeMap.get(balanceType)}
+      />
+    );
+  }
+  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>
+    );
+  }
+}

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

@@ -1,3 +1,5 @@
+import { useLocation } from 'react-router-dom';
+
 import * as monthUtils from 'loot-core/src/shared/months';
 
 import ArrowLeft from '../../icons/v1/ArrowLeft';
@@ -8,15 +10,15 @@ import Select from '../common/Select';
 import View from '../common/View';
 import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
 
-function validateStart(allMonths, start, end) {
+export function validateStart(allMonths, start, end) {
   const earliest = allMonths[allMonths.length - 1].name;
   if (end < start) {
     end = monthUtils.addMonths(start, 6);
   }
   return boundedRange(earliest, start, end);
 }
 
-function validateEnd(allMonths, start, end) {
+export function validateEnd(allMonths, start, end) {
   const earliest = allMonths[allMonths.length - 1].name;
   if (start > end) {
     start = monthUtils.subMonths(end, 6);
@@ -35,13 +37,13 @@ function boundedRange(earliest, start, end) {
   return [start, end];
 }
 
-function getLatestRange(offset) {
+export function getLatestRange(offset) {
   const end = monthUtils.currentMonth();
   const start = monthUtils.subMonths(end, offset);
   return [start, end];
 }
 
-function getFullRange(allMonths) {
+export function getFullRange(allMonths) {
   const start = allMonths[allMonths.length - 1].name;
   const end = monthUtils.currentMonth();
   return [start, end];
@@ -61,7 +63,11 @@ function Header({
   onDeleteFilter,
   onCondOpChange,
   headerPrefixItems,
+  selectGraph,
 }) {
+  let location = useLocation();
+  let path = location.pathname;
+
   return (
     <View
       style={{
@@ -79,70 +85,79 @@ function Header({
       </ButtonLink>
       <View style={styles.veryLargeText}>{title}</View>
 
-      <View
-        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
-          marginTop: 15,
-          gap: 15,
-        }}
-      >
-        {headerPrefixItems}
-
+      {path !== '/reports/custom' && (
         <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',
-            gap: 5,
+            marginTop: 15,
+            gap: 15,
           }}
         >
-          <Select
-            onChange={newValue =>
-              onChangeDates(...validateStart(allMonths, newValue, end))
-            }
-            value={start}
-            defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
-          <View>to</View>
-          <Select
-            onChange={newValue =>
-              onChangeDates(...validateEnd(allMonths, start, newValue))
-            }
-            value={end}
-            options={allMonths.map(({ name, pretty }) => [name, pretty])}
-          />
-        </View>
+          {headerPrefixItems}
 
-        {filters && <FilterButton onApply={onApply} />}
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 5,
+            }}
+          >
+            <Select
+              onChange={newValue =>
+                onChangeDates(...validateStart(allMonths, newValue, end))
+              }
+              value={start}
+              defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
+              options={allMonths.map(({ name, pretty }) => [name, pretty])}
+            />
+            <View>to</View>
+            <Select
+              onChange={newValue =>
+                onChangeDates(...validateEnd(allMonths, start, newValue))
+              }
+              value={end}
+              options={allMonths.map(({ name, pretty }) => [name, pretty])}
+            />
+          </View>
+
+          {filters && <FilterButton onApply={onApply} type="accounts" />}
 
-        {show1Month && (
+          {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))}
-        >
-          All Time
-        </Button>
-      </View>
+          <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))}
+          >
+            All Time
+          </Button>
+          <View style={{ flex: 1 }} />
+        </View>
+      )}
       {filters && filters.length > 0 && (
         <View
           style={{ marginTop: 5 }}