[WIP] Experimental feature: Sankey chart

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

@@ -13,6 +13,7 @@
 import { StackedBarGraph } from './graphs/StackedBarGraph';
 import { ReportTable } from './graphs/tableGraph/ReportTable';
 import { ReportOptions } from './ReportOptions';
+import { SankeyGraph } from './graphs/SankeyGraph';
 
 type ChooseGraphProps = {
   data: DataEntity;
@@ -204,5 +205,21 @@
       />
     );
   }
+  if (graphType === 'SankeyGraph') {
+    return (
+      <SankeyGraph
+        style={graphStyle}
+        compact={compact}
+        graphData={data}
+        filters={filters}
+        groupBy={groupBy}
+        balanceTypeOp={balanceTypeOp}
+        viewLabels={viewLabels}
+        showHiddenCategories={showHiddenCategories}
+        showOffBudget={showOffBudget}
+        showTooltip={showTooltip}
+      />
+    );
+  }
   return null;
 }

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

@@ -123,6 +123,7 @@ export function Header({
                 )
               }
               value={end}
+              defaultLabel={monthUtils.format(end, 'MMMM, yyyy')}
               options={allMonths.map(({ name, pretty }) => [name, pretty])}
               style={{ marginRight: 10 }}
             />

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

@@ -41,7 +41,9 @@
 import { NetWorthCard } from './reports/NetWorthCard';
 import { SpendingCard } from './reports/SpendingCard';
 import './overview.scss';
 import { SummaryCard } from './reports/SummaryCard';
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { SankeyCard } from './reports/SankeyCard';
 
 const ResponsiveGridLayout = WidthProvider(Responsive);
 
@@ -294,6 +296,7 @@
   };
 
   const accounts = useAccounts();
+  const enableSankey = false; //useFeatureFlag('sankeyChart');
 
   if (isLoading) {
     return <LoadingIndicator message={t('Loading reports...')} />;
@@ -364,7 +367,7 @@
                           return;
                         }
 
                         onAddWidget(item);
                       }}
                       items={[
                         {
@@ -391,6 +394,14 @@
                           name: 'calendar-card' as const,
                           text: t('Calendar card'),
                         },
+                        ...(enableSankey
+                          ? [
+                              {
+                                name: 'sankey-card' as const,
+                                text: t('Sankey card'),
+                              },
+                            ]
+                          : []),
                         {
                           name: 'custom-report' as const,
                           text: t('New custom report'),
@@ -549,6 +560,15 @@
                     onMetaChange={newMeta => onMetaChange(item, newMeta)}
                     onRemove={() => onRemoveWidget(item.i)}
                   />
+                ) : (enableSankey && item.type === 'sankey-card') ? (
+                  <SankeyCard
+                    widgetId={item.i}
+                    isEditing={isEditing}
+                    meta={item.meta}
+                    accounts={accounts}
+                    onMetaChange={newMeta => onMetaChange(item, newMeta)}
+                    onRemove={() => onRemoveWidget(item.i)}
+                  />
                 ) : null}
               </div>
             ))}

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

@@ -8,6 +8,7 @@
 import { NetWorth } from './reports/NetWorth';
 import { Spending } from './reports/Spending';
 import { Summary } from './reports/Summary';
+import { Sankey } from './reports/Sankey';
 
 export function ReportRouter() {
   return (
@@ -25,6 +26,8 @@
       <Route path="/summary/:id" element={<Summary />} />
       <Route path="/calendar" element={<Calendar />} />
       <Route path="/calendar/:id" element={<Calendar />} />
+      <Route path="/sankey" element={<Sankey />} />
+      <Route path="/sankey/:id" element={<Sankey />} />
     </Routes>
   );
 }

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

@@ -9,6 +9,7 @@
   SvgChart,
   SvgChartBar,
   SvgChartPie,
+  SvgChartSankey,
   SvgListBullet,
   SvgQueue,
   SvgTag,
@@ -21,7 +22,8 @@
 
 import { GraphButton } from './GraphButton';
 import { SaveReport } from './SaveReport';
 import { setSessionReport } from './setSessionReport';
+import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 
 type ReportTopbarProps = {
   customReportItems: CustomReportEntity;
@@ -59,6 +61,7 @@
     setGraphType(cond);
     defaultItems(cond);
   };
+  const enableSankey = useFeatureFlag('sankeyChart');
 
   return (
     <View
@@ -136,6 +139,19 @@
       >
         <SvgChartPie width={15} height={15} />
       </GraphButton>
+      { enableSankey ? (
+        <GraphButton
+          title={t('Sankey Diagram')}
+          selected={customReportItems.graphType === 'SankeyGraph'}
+          onSelect={() => {
+            onChangeGraph('SankeyGraph');
+          }}
+          style={{ marginRight: 15 }}
+          disabled={isItemDisabled('ShowSankey')}
+        >
+          <SvgChartSankey width={15} height={15} />
+        </GraphButton>
+      ) : null}
       <View
         style={{
           width: 1,

packages/desktop-client/src/components/reports/disabledList.ts

@@ -111,6 +111,13 @@ const timeGraphOptions: graphOptions[] = [
     disableLegend: false,
     disableLabel: true,
   },
+  {
+    description: 'SankeyGraph',
+    disabledSplit: ['Interval'],
+    defaultSplit: 'Category',
+    disabledType: [],
+    defaultType: 'Net',
+  },
 ];
 
 const modeOptions = [
@@ -123,7 +130,7 @@ const modeOptions = [
   {
     description: 'time',
     graphs: timeGraphOptions,
-    disabledGraph: ['AreaGraph', 'DonutGraph'],
+    disabledGraph: ['AreaGraph', 'DonutGraph', 'SankeyGraph'],
     defaultGraph: 'TableGraph',
   },
 ];