add titles to node and sizing

packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx

@@ -1,11 +1,52 @@
-import { Sankey, Tooltip } from 'recharts';
+import { Sankey, Tooltip, Rectangle, Layer } from 'recharts';
 
 import Container from '../Container';
 type SankeyProps = {
   style;
   data;
 };
 
+function SankeyNode({ x, y, width, height, index, payload, containerWidth }) {
+  const isOut = x + width + 6 > containerWidth;
+  let payloadValue = Math.round(payload.value / 1000).toString();
+  if (payload.value < 1000) {
+    payloadValue = '<1k';
+  } else {
+    payloadValue = payloadValue + 'k';
+  }
+  return (
+    <Layer key={`CustomNode${index}`}>
+      <Rectangle
+        x={x}
+        y={y}
+        width={width}
+        height={height}
+        fill="#5192ca"
+        fillOpacity="1"
+      />
+      <text
+        textAnchor={isOut ? 'end' : 'start'}
+        x={isOut ? x - 6 : x + width + 6}
+        y={y + height / 2}
+        fontSize="14"
+        stroke="#333"
+      >
+        {payload.name}
+      </text>
+      <text
+        textAnchor={isOut ? 'end' : 'start'}
+        x={isOut ? x - 6 : x + width + 6}
+        y={y + height / 2 + 13}
+        fontSize="12"
+        stroke="#333"
+        strokeOpacity="0.5"
+      >
+        {payloadValue}
+      </text>
+    </Layer>
+  );
+}
+
 function SankeyGraph({ style, data }: SankeyProps) {
   return (
     <Container
@@ -20,11 +61,13 @@ function SankeyGraph({ style, data }: SankeyProps) {
             width={width}
             height={height}
             data={data}
+            node={<SankeyNode />}
+            nodePadding={23}
             margin={{
-              left: 0,
-              right: 0,
-              top: 0,
-              bottom: 0,
+              left: 100,
+              right: 100,
+              top: 25,
+              bottom: 25,
             }}
           >
             <Tooltip formatter={value => Math.round(value)} />

packages/desktop-client/src/components/reports/graphs/sankey-spreadsheet.tsx

@@ -109,28 +109,25 @@ function transformToSankeyData(categoryData, incomeData) {
   const data = { nodes: [], links: [] };
   const nodeNames = new Set();
 
-  // Add the Income node first.
-  data.nodes.push({ name: 'Income' });
-  nodeNames.add('Income');
+  // Add the Budget node first.
+  data.nodes.push({ name: 'Budget' });
+  nodeNames.add('Budget');
 
-  // Handle the income sources and link them to the Income node.
+  // Handle the income sources and link them to the Budget node.
   Object.entries(incomeData).forEach(([sourceName, value]) => {
     if (!nodeNames.has(sourceName) && integerToAmount(value) > 0) {
       data.nodes.push({ name: sourceName });
       nodeNames.add(sourceName);
       data.links.push({
         source: sourceName,
-        target: 'Income',
+        target: 'Budget',
         value: integerToAmount(value),
       });
     }
   });
 
   for (let mainCategory of categoryData) {
-    if (!nodeNames.has(mainCategory.name)) {
-      data.nodes.push({ name: mainCategory.name });
-      nodeNames.add(mainCategory.name);
-
+    if (!nodeNames.has(mainCategory.name) && mainCategory.balances.length > 0) {
       let mainCategorySum = 0;
       for (let subCategory of mainCategory.balances) {
         if (!nodeNames.has(subCategory.subcategory) && subCategory.value > 0) {
@@ -147,8 +144,10 @@ function transformToSankeyData(categoryData, incomeData) {
         }
       }
       if (mainCategorySum > 0) {
+        data.nodes.push({ name: mainCategory.name });
+        nodeNames.add(mainCategory.name);
         data.links.push({
-          source: 'Income',
+          source: 'Budget',
           target: mainCategory.name,
           value: integerToAmount(mainCategorySum),
         });