Add Category Selector

actualbudget · Oct 28, 2023 · 80d08c6 · 80d08c6
1 parent 47058b1
commit 80d08c6
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
@@ -26,6 +26,7 @@ import { FilterButton, AppliedFilters } from '../filters/FiltersMenu';
 import { Checkbox } from '../forms';
 import PrivacyFilter from '../PrivacyFilter';
 
+import CategorySelector from './CategorySelector';
 import AreaGraph from './graphs/AreaGraph';
 import BarGraph from './graphs/BarGraph';
 import BarLineGraph from './graphs/BarLineGraph';
@@ -117,6 +118,7 @@ export default function Custom() {
     { value: 3, description: 'All', format: 'totalTotals' },
   ];
 
+  const [selectedCategories, setSelectedCategories] = useState(null);
   const [allMonths, setAllMonths] = useState(null);
   const [start, setStart] = useState(
     monthUtils.subMonths(monthUtils.currentMonth(), 5),
@@ -143,6 +145,7 @@ export default function Custom() {
       split,
       typeOptions.find(opt => opt.value === type).format,
       categories,
+      selectedCategories,
       payees,
       accounts,
       filters,
@@ -155,6 +158,7 @@ export default function Custom() {
     split,
     type,
     categories,
+    selectedCategories,
     payees,
     accounts,
     filters,
@@ -163,6 +167,12 @@ export default function Custom() {
   ]);
   const data = useReport('default', getGraphData);
 
+  useEffect(() => {
+    if (selectedCategories === null && categories.list.length !== 0) {
+      setSelectedCategories(categories.list);
+    }
+  }, [categories, selectedCategories]);
+
   useEffect(() => {
     async function run() {
       const trans = await send('get-earliest-transaction');
@@ -666,6 +676,25 @@ export default function Custom() {
               options={allMonths.map(({ name, pretty }) => [name, pretty])}
             />
           </View>
+          <View
+            style={{
+              height: 1,
+              backgroundColor: theme.altPillBorder,
+              marginTop: 10,
+              flexShrink: 0,
+            }}
+          />
+          <View
+            style={{
+              marginTop: 10,
+            }}
+          >
+            <CategorySelector
+              categoryGroups={categories.grouped}
+              selectedCategories={selectedCategories}
+              setSelectedCategories={setSelectedCategories}
+            />
+          </View>
         </View>
         <View
           style={{

diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
@@ -336,7 +336,7 @@ function CustomReportsCard() {
   const split = 1;
 
   const getGraphData = useMemo(() => {
-    return defaultSpreadsheet(start, end, split, categories);
+    return defaultSpreadsheet(start, end, split, 'totalDebts', categories);
   }, [start, end, categories]);
   const data = useReport('default', getGraphData);
 

diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -13,12 +13,22 @@ export default function createSpreadsheet(
   split,
   typeItem,
   categories,
+  selectedCategories,
   payees,
   accounts,
   conditions = [],
   conditionsOp,
   hidden,
 ) {
+  let categoryFilter = (categories.list || []).filter(
+    category =>
+      !category.hidden &&
+      selectedCategories &&
+      selectedCategories.some(
+        selectedCategory => selectedCategory.id === category.id,
+      ),
+  );
+
   let splitItem;
   let splitList;
   let splitLabel;
@@ -87,6 +97,13 @@ export default function createSpreadsheet(
                   ],
                 },
               )
+              .filter(
+                selectedCategories && {
+                  $or: categoryFilter.map(category => ({
+                    category: category.id,
+                  })),
+                },
+              )
               .filter({
                 [splitLabel]: splt.id,
                 $and: [
@@ -115,6 +132,13 @@ export default function createSpreadsheet(
                   ],
                 },
               )
+              .filter(
+                selectedCategories && {
+                  $or: categoryFilter.map(category => ({
+                    category: category.id,
+                  })),
+                },
+              )
               .filter({
                 [splitLabel]: splt.id,
                 $and: [