add tooltip names...again

actualbudget · Oct 24, 2023 · 25b799a · 25b799a
1 parent 6dd09f3
commit 25b799a
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 33 deletions.
diff --git a/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SankeyGraph.tsx
@@ -8,6 +8,8 @@ import {
   ResponsiveContainer,
 } from 'recharts';
 
+import Container from '../Container';
+
 type SankeyProps = {
   style;
   data;
@@ -22,9 +24,8 @@ const numberFormatterTooltip = (value: PotentialNumber): number | null => {
   return null; // or some default value for other cases
 };
 
-function SankeyNode({ x, y, width, height, index, payload }) {
-  // const isOut = x + width + 6 > containerWidth;
-  const isOut = false; // not configured yet
+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';
@@ -89,36 +90,45 @@ function SankeyGraph({ style, data, compact }: SankeyProps) {
 
   if (!data.links || data.links.length === 0) return null;
   return (
-    <ResponsiveContainer>
-      <Sankey
-        data={sankeyData}
-        node={props => <SankeyNode {...props} />}
-        sort={false}
-        iterations={1000}
-        nodePadding={23}
-        margin={
-          compact
-            ? {
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-              }
-            : {
-                left: 0,
-                right: 0,
-                top: 10,
-                bottom: 25,
-              }
-        }
-      >
-        <Tooltip
-          formatter={numberFormatterTooltip}
-          isAnimationActive={false}
-          separator=": "
-        />
-      </Sankey>
-    </ResponsiveContainer>
+    <Container
+      style={{
+        ...style,
+        ...(compact && { height: 'auto' }),
+      }}
+    >
+      {(width, height, portalHost) => (
+        <ResponsiveContainer>
+          <Sankey
+            data={sankeyData}
+            node={props => <SankeyNode {...props} containerWidth={width} />}
+            sort={true}
+            iterations={1000}
+            nodePadding={23}
+            margin={
+              compact
+                ? {
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                  }
+                : {
+                    left: 0,
+                    right: 0,
+                    top: 10,
+                    bottom: 25,
+                  }
+            }
+          >
+            <Tooltip
+              formatter={numberFormatterTooltip}
+              isAnimationActive={false}
+              separator=": "
+            />
+          </Sankey>
+        </ResponsiveContainer>
+      )}
+    </Container>
   );
 }
 

diff --git a/packages/desktop-client/src/components/reports/graphs/sankey-spreadsheet.tsx b/packages/desktop-client/src/components/reports/graphs/sankey-spreadsheet.tsx
@@ -165,6 +165,7 @@ function transformToSankeyData(categoryData, incomeData) {
         value: integerToAmount(mainCategorySum),
       });
 
+      // add the subcategories of the main category
       for (let subCategory of mainCategory.balances) {
         if (!nodeNames.has(subCategory.subcategory) && subCategory.value > 0) {
           data.nodes.push({ name: subCategory.subcategory });