[WIP] POC Budget Bar Graph

packages/desktop-client/src/components/budget/BudgetTable.jsx

@@ -41,6 +41,9 @@ export function BudgetTable(props) {
     'budget.showHiddenCategories',
   );
   const [editing, setEditing] = useState(null);
+  const [showProgress = false, setShowProgress] = useLocalPref(
+    'budget.showProgress',
+  );
 
   const onEditMonth = (id, month) => {
     setEditing(id ? { id, cell: month } : null);
@@ -141,14 +144,6 @@ export function BudgetTable(props) {
     setCollapsedGroupIdsPref(collapsedIds);
   };
 
-  const onToggleHiddenCategories = () => {
-    setShowHiddenCategoriesPef(!showHiddenCategories);
-  };
-
-  const toggleHiddenCategories = () => {
-    onToggleHiddenCategories();
-  };
-
   const expandAllCategories = () => {
     onCollapse([]);
   };
@@ -202,7 +197,10 @@ export function BudgetTable(props) {
       >
         <BudgetTotals
           MonthComponent={dataComponents.BudgetTotalsComponent}
-          toggleHiddenCategories={toggleHiddenCategories}
+          setShowHiddenCategoriesPef={setShowHiddenCategoriesPef}
+          showHiddenCategories={showHiddenCategories}
+          setShowProgress={setShowProgress}
+          showProgress={showProgress}
           expandAllCategories={expandAllCategories}
           collapseAllCategories={collapseAllCategories}
         />

packages/desktop-client/src/components/budget/BudgetTotals.tsx

@@ -1,29 +1,68 @@
 import React, { type ComponentProps, memo, useRef, useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
+import { useSyncedPref } from '../../hooks/useSyncedPref';
 
 import { SvgDotsHorizontalTriple } from '../../icons/v1';
 import { theme, styles } from '../../style';
 import { Button } from '../common/Button2';
 import { Menu } from '../common/Menu';
 import { Popover } from '../common/Popover';
+import { Text } from '../common/Text';
 import { View } from '../common/View';
 
 import { RenderMonths } from './RenderMonths';
 import { getScrollbarWidth } from './util';
 
+function Legend({ title, color }: { title: string; color: string }) {
+  return (
+    <View
+      style={{
+        paddingBottom: 10,
+        flexDirection: 'row',
+        alignItems: 'center',
+      }}
+    >
+      <View
+        style={{
+          marginRight: 5,
+          borderRadius: 1000,
+          width: 14,
+          height: 14,
+          backgroundColor: color,
+        }}
+      />
+      <Text
+        style={{
+          whiteSpace: 'nowrap',
+          flexShrink: 0,
+        }}
+      >
+        {title}
+      </Text>
+    </View>
+  );
+}
+
 type BudgetTotalsProps = {
   MonthComponent: ComponentProps<typeof RenderMonths>['component'];
-  toggleHiddenCategories: () => void;
+  setShowHiddenCategoriesPef: (value: boolean) => void;
+  showHiddenCategories: boolean;
+  setShowProgress: (value: boolean) => void;
+  showProgress: boolean;
   expandAllCategories: () => void;
   collapseAllCategories: () => void;
 };
 
 export const BudgetTotals = memo(function BudgetTotals({
   MonthComponent,
-  toggleHiddenCategories,
+  setShowHiddenCategoriesPef,
+  showHiddenCategories,
+  setShowProgress,
+  showProgress,
   expandAllCategories,
   collapseAllCategories,
 }: BudgetTotalsProps) {
+  const [budgetType = 'rollover'] = useSyncedPref('budgetType');
   const { t } = useTranslation();
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
@@ -77,23 +116,60 @@
           triggerRef={triggerRef}
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 210 }}
         >
           <Menu
             onMenuSelect={type => {
-              if (type === 'toggle-visibility') {
-                toggleHiddenCategories();
+              if (type === 'showHiddenCategories') {
+                setShowHiddenCategoriesPef(!showHiddenCategories);
+              } else if (type === 'showProgress') {
+                setShowProgress(!showProgress);
               } else if (type === 'expandAllCategories') {
                 expandAllCategories();
+                setMenuOpen(false);
               } else if (type === 'collapseAllCategories') {
                 collapseAllCategories();
+                setMenuOpen(false);
               }
-              setMenuOpen(false);
             }}
             items={[
               {
-                name: 'toggle-visibility',
-                text: t('Toggle hidden categories'),
+                name: 'showHiddenCategories',
+                text: t('Show hidden categories'),
+                toggle: showHiddenCategories,
+              },
+              {
+                name: 'showProgress',
+                text: t('Show progress bars'),
+                toggle: showProgress,
+                customTooltip: (
+                  <View
+                    style={{
+                      padding: 10,
+                      paddingBottom: 0,
+                    }}
+                    >
+                    {budgetType === 'rollover' && (
+                      <>
+                        <Legend
+                          title="Rollover added"
+                          color={theme.reportsLightPurple}
+                        />
+                        <Legend
+                          title="Rollover spent"
+                          color={theme.reportsLightGreen}
+                        />
+                        <Legend
+                          title="Rollover overspent"
+                          color={theme.reportsLightRed}
+                        />
+                      </>
+                    )}
+                    <Legend title="Budgeted" color={theme.reportsPurple} />
+                    <Legend title="Spent" color={theme.reportsGreen} />
+                    <Legend title="Overspent" color={theme.reportsRed} />
+                  </View>
+                ),
               },
               {
                 name: 'expandAllCategories',

packages/desktop-client/src/components/budget/ExpenseCategory.tsx

@@ -6,6 +6,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
+import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme } from '../../style';
 import { View } from '../common/View';
 import {
@@ -52,6 +53,7 @@ export function ExpenseCategory({
   onDragChange,
   onReorder,
 }: ExpenseCategoryProps) {
+  const [showProgress] = useLocalPref('budget.showProgress');
   let dragging = dragState && dragState.item === cat;
 
   if (dragState && dragState.item.id === cat.cat_group) {
@@ -75,6 +77,7 @@ export function ExpenseCategory({
     <Row
       innerRef={dropRef}
       collapsed={true}
+      height={showProgress && 44}
       style={{
         backgroundColor: theme.tableBackground,
         opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined,