fixes for EmptyRows/interactions/legends

actualbudget · Oct 21, 2023 · b2d14d7 · b2d14d7
1 parent 053c419
commit b2d14d7
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 25 deletions.
diff --git a/packages/desktop-client/src/components/reports/Custom.js b/packages/desktop-client/src/components/reports/Custom.js
@@ -187,6 +187,7 @@ export default function Custom() {
           end={end}
           data={data}
           split={split}
+          empty={empty}
           OnChangeLegend={OnChangeLegend}
           typeOp={typeOptions.find(opt => opt.value === type).format}
         />
@@ -210,6 +211,7 @@ export default function Custom() {
           end={end}
           data={data}
           split={split}
+          empty={empty}
           OnChangeLegend={OnChangeLegend}
           typeOp={typeOptions.find(opt => opt.value === type).format}
         />
@@ -259,18 +261,21 @@ export default function Custom() {
 
   function onChangeMode(cond) {
     setMode(cond);
-    if (graphType === 'StackedBarGraph' && cond === 'total') {
-      setGraphType('BarGraph');
-    }
-    if (graphType === 'BarGraph' && cond === 'time') {
-      setGraphType('StackedBarGraph');
-    }
-    if (
-      cond === 'time' &&
-      (graphType === 'AreaGraph' || graphType === 'DonutGraph')
-    ) {
-      setGraphType('TableGraph');
-      setViewSplit(false);
+    if (cond === 'time') {
+      if (graphType === 'BarGraph') {
+        setGraphType('StackedBarGraph');
+      }
+      if (['AreaGraph', 'DonutGraph'].includes(graphType)) {
+        setGraphType('TableGraph');
+        setViewSplit(false);
+      }
+      if ([5, 6].includes(split)) {
+        setSplit(1);
+      }
+    } else {
+      if (graphType === 'StackedBarGraph') {
+        setGraphType('BarGraph');
+      }
     }
   }
 

diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx
@@ -27,6 +27,7 @@ type BarGraphProps = {
   data;
   split;
   typeOp;
+  empty;
   OnChangeLegend;
   compact: boolean;
   domain?: {
@@ -46,6 +47,7 @@ function BarGraph({
   style,
   data,
   split,
+  empty,
   typeOp,
   OnChangeLegend,
   compact,
@@ -63,6 +65,10 @@ function BarGraph({
       totalTotals: number | string;
       networth: number | string;
       totalChange: number | string;
+      children: {
+        fill: string;
+        name: string;
+      };
     };
   };
 
@@ -79,14 +85,14 @@ function BarGraph({
   };
 
   const CustomLegend = ({ active, payload, label }: CustomLegendProps) => {
-    const agg = payload.map(leg => {
+    const agg = payload[0].payload.children.map(leg => {
       return {
-        name: leg.value,
-        //color: leg.color,
+        name: leg.props.name,
+        color: leg.props.fill,
       };
     });
 
-    OnChangeLegend(agg);
+    OnChangeLegend(agg.slice(0).reverse());
 
     return <div />;
   };
@@ -157,7 +163,13 @@ function BarGraph({
               <BarChart
                 width={width}
                 height={height}
-                data={yAxis === 'date' ? data.monthData : data.data}
+                data={
+                  yAxis === 'date'
+                    ? data.monthData.filter(i =>
+                        empty ? i[typeOp] !== 0 : true,
+                      )
+                    : data.data.filter(i => (empty ? i[typeOp] !== 0 : true))
+                }
                 margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
               >
                 <Legend content={<CustomLegend />} />
@@ -170,12 +182,15 @@ function BarGraph({
                 <XAxis dataKey={yAxis} />
                 <YAxis />
                 <Bar dataKey={...typeOp}>
-                  {data.data.map((entry, index) => (
-                    <Cell
-                      key={`cell-${index}`}
-                      fill={colorScale[index % colorScale.length]}
-                    />
-                  ))}
+                  {data.data
+                    .filter(i => (empty ? i[typeOp] !== 0 : true))
+                    .map((entry, index) => (
+                      <Cell
+                        key={`cell-${index}`}
+                        fill={colorScale[index % colorScale.length]}
+                        name={entry.name}
+                      />
+                    ))}
                 </Bar>
               </BarChart>
             </div>

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -24,6 +24,7 @@ type DonutGraphProps = {
   data;
   split;
   typeOp;
+  empty;
   OnChangeLegend;
   compact: boolean;
   domain?: {
@@ -43,6 +44,7 @@ function DonutGraph({
   style,
   data,
   split,
+  empty,
   typeOp,
   OnChangeLegend,
   compact,
@@ -85,7 +87,7 @@ function DonutGraph({
       };
     });
 
-    OnChangeLegend(agg);
+    OnChangeLegend(agg.slice(0).reverse());
 
     return <div />;
   };
@@ -155,7 +157,13 @@ function DonutGraph({
                   dataKey={val => getVal(val)}
                   nameKey={yAxis}
                   isAnimationActive={false}
-                  data={yAxis === 'date' ? data.monthData : data.data}
+                  data={
+                    yAxis === 'date'
+                      ? data.monthData.filter(i =>
+                          empty ? i[typeOp] !== 0 : true,
+                        )
+                      : data.data.filter(i => (empty ? i[typeOp] !== 0 : true))
+                  }
                   outerRadius={200}
                   innerRadius={100}
                   fill="#8884d8"