data display adjustments

actualbudget · Oct 26, 2023 · 2d492e1 · 2d492e1
1 parent 4de4996
commit 2d492e1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 32 deletions.
diff --git a/packages/desktop-client/src/components/reports/ReportTable.tsx b/packages/desktop-client/src/components/reports/ReportTable.tsx
@@ -47,6 +47,9 @@ const TableRow = memo(
           })}
         <Cell
           value={amountToCurrency(item[totalItem])}
+          style={{
+            fontWeight: 600,
+          }}
           width="flex"
           privacyFilter
         />
@@ -94,28 +97,24 @@ export function TableTotals({ data, scrollWidth, totalItem, mode }) {
       }}
     >
       <Cell value={'Totals'} width="flex" />
-      {mode === 'time' ? (
-        <>
-          {data.monthData.map(item => {
-            return (
-              <Cell
-                key={amountToCurrency(item[totalItem])}
-                value={amountToCurrency(item[totalItem])}
-                width="flex"
-                privacyFilter
-              />
-            );
-          })}
-          <Cell width="flex" />
-        </>
-      ) : (
-        <Cell
-          key={data[totalItem]}
-          value={amountToCurrency(data[totalItem])}
-          width="flex"
-          privacyFilter
-        />
-      )}
+      {mode === 'time' &&
+        data.monthData.map(item => {
+          return (
+            <Cell
+              key={amountToCurrency(item[totalItem])}
+              value={amountToCurrency(item[totalItem])}
+              width="flex"
+              privacyFilter
+            />
+          );
+        })}
+      <Cell
+        key={data[totalItem]}
+        value={amountToCurrency(data[totalItem])}
+        width="flex"
+        privacyFilter
+      />
+
       {scrollWidth > 0 && <Cell width={scrollWidth} />}
     </Row>
   );

diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx
@@ -60,12 +60,6 @@ function StackedBarGraph({
     };
   };
 
-  type CustomTooltipProps = {
-    active?: boolean;
-    payload?: PayloadItem[];
-    label?: string;
-  };
-
   type CustomLegendProps = {
     active?: boolean;
     payload?: PayloadItem[];
@@ -85,8 +79,15 @@ function StackedBarGraph({
     return <div />;
   };
 
+  type CustomTooltipProps = {
+    active?: boolean;
+    payload?: PayloadItem[];
+    label?: string;
+  };
+
   const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
     if (active && payload && payload.length) {
+      let sumTotals = 0;
       return (
         <div
           className={`${css(
@@ -111,17 +112,26 @@ function StackedBarGraph({
                 {payload
                   .slice(0)
                   .reverse()
-                  .map(
-                    pay =>
+                  .map(pay => {
+                    sumTotals += pay.value;
+                    return (
                       pay.value !== 0 && (
                         <AlignedText
                           key={pay.name}
                           left={pay.name}
                           right={amountToCurrency(pay.value)}
                           style={{ color: pay.color }}
                         />
-                      ),
-                  )}
+                      )
+                    );
+                  })}
+                <AlignedText
+                  left={'Total'}
+                  right={amountToCurrency(sumTotals)}
+                  style={{
+                    fontWeight: 600,
+                  }}
+                />
               </PrivacyFilter>
             </div>
           </div>