Feature Flag

actualbudget · Oct 22, 2023 · cde6193 · cde6193
1 parent f5fbbce
commit cde6193
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 7 deletions.
diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
@@ -129,14 +129,14 @@ export default function Custom() {
     return defaultSpreadsheet(
       start,
       end,
+      split,
       categories,
       payees,
       accounts,
       filters,
       conditionsOp,
-      split,
     );
-  }, [start, end, categories, payees, accounts, filters, conditionsOp, split]);
+  }, [start, end, split, categories, payees, accounts, filters, conditionsOp]);
   const data = useReport('default', getGraphData);
 
   useEffect(() => {

diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
@@ -19,10 +19,12 @@ import Change from './Change';
 import { chartTheme } from './chart-theme';
 import Container from './Container';
 import DateRange from './DateRange';
+import BarGraph from './graphs/BarGraph';
 import CategorySpendingGraph from './graphs/CategorySpendingGraph';
 import NetWorthGraph from './graphs/NetWorthGraph';
 import { simpleCashFlow } from './spreadsheets/cash-flow-spreadsheet';
 import categorySpendingSpreadsheet from './spreadsheets/category-spending-spreadsheet';
+import defaultSpreadsheet from './spreadsheets/default-spreadsheet';
 import netWorthSpreadsheet from './spreadsheets/net-worth-spreadsheet';
 import Tooltip from './Tooltip';
 import useReport from './useReport';
@@ -325,11 +327,58 @@ function CategorySpendingCard() {
   );
 }
 
+function CustomReportsCard() {
+  const categories = useCategories();
+
+  const end = monthUtils.currentMonth();
+  const start = monthUtils.subMonths(end, 3);
+  const split = 1;
+
+  const getGraphData = useMemo(() => {
+    return defaultSpreadsheet(start, end, split, categories);
+  }, [start, end, categories]);
+  const data = useReport('default', getGraphData);
+
+  return (
+    <Card flex={1} to="/reports/custom">
+      <View>
+        <View style={{ flexDirection: 'row', padding: '20px 20px 0' }}>
+          <View style={{ flex: 1 }}>
+            <Block
+              style={{ ...styles.mediumText, fontWeight: 500, marginBottom: 5 }}
+              role="heading"
+            >
+              Custom
+            </Block>
+            <DateRange start={start} end={end} />
+          </View>
+        </View>
+      </View>
+
+      {data ? (
+        <BarGraph
+          start={start}
+          end={end}
+          graphData={data}
+          compact={true}
+          split={1}
+          empty={true}
+          typeOp={'totalDebts'}
+        />
+      ) : (
+        <LoadingIndicator />
+      )}
+    </Card>
+  );
+}
+
 export default function Overview() {
   let categorySpendingReportFeatureFlag = useFeatureFlag(
     'categorySpendingReport',
   );
 
+  let customReportsFeatureFlag = useFeatureFlag('customReports');
+
   let accounts = useSelector(state => state.queries.accounts);
   return (
     <View
@@ -360,6 +409,19 @@ export default function Overview() {
           <div style={{ flex: 1 }} />
         </View>
       )}
+
+      {customReportsFeatureFlag && (
+        <View
+          style={{
+            flex: '0 0 auto',
+            flexDirection: 'row',
+          }}
+        >
+          <CustomReportsCard />
+          <div style={{ flex: 1 }} />
+          <div style={{ flex: 1 }} />
+        </View>
+      )}
     </View>
   );
 }
diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -190,9 +190,9 @@ function BarGraph({
                   formatter={numberFormatterTooltip}
                   isAnimationActive={false}
                 />
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey={yAxis} />
-                <YAxis />
+                {compact ? null : <CartesianGrid strokeDasharray="3 3" />}
+                {compact ? null : <XAxis dataKey={yAxis} />}
+                {compact ? null : <YAxis />}
                 <Bar dataKey={val => getVal(val)}>
                   {data.data
                     .filter(i => (empty ? i[typeOp] !== 0 : true))

diff --git a/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx b/packages/desktop-client/src/components/reports/spreadsheets/default-spreadsheet.tsx
@@ -14,12 +14,12 @@ import { index } from '../util';
 export default function createSpreadsheet(
   start,
   end,
+  split,
   categories,
   payees,
   accounts,
   conditions = [],
   conditionsOp,
-  split,
 ) {
   let splitItem;
   let splitList;
@@ -59,7 +59,7 @@ export default function createSpreadsheet(
   }
 
   return async (spreadsheet, setData) => {
-    if (accounts.length === 0) {
+    if (splitItem.length === 0) {
       return null;
     }
 

diff --git a/packages/desktop-client/src/components/settings/Experimental.tsx b/packages/desktop-client/src/components/settings/Experimental.tsx
@@ -102,6 +102,8 @@ export default function ExperimentalFeatures() {
               Category spending report
             </FeatureToggle>
 
+            <FeatureToggle flag="customReports">Custom reports</FeatureToggle>
+
             <ReportBudgetFeature />
 
             <FeatureToggle flag="goalTemplatesEnabled">

diff --git a/packages/desktop-client/src/hooks/useFeatureFlag.ts b/packages/desktop-client/src/hooks/useFeatureFlag.ts
@@ -7,6 +7,7 @@ const DEFAULT_FEATURE_FLAG_STATE: Record<FeatureFlag, boolean> = {
   reportBudget: false,
   goalTemplatesEnabled: false,
   themes: false,
+  customReports: false,
   experimentalOfxParser: true,
 };
 

diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
@@ -5,6 +5,7 @@ export type FeatureFlag =
   | 'reportBudget'
   | 'goalTemplatesEnabled'
   | 'themes'
+  | 'customReports'
   | 'experimentalOfxParser';
 
 export type LocalPrefs = Partial<