Improve scaling of donut graph

actualbudget · Nov 22, 2024 · cdabda2 · cdabda2
1 parent 1875f86
commit cdabda2
Show file tree

Hide file tree

Showing 2 changed files with 95 additions and 71 deletions.
diff --git a/packages/desktop-client/src/components/reports/ChooseGraph.tsx b/packages/desktop-client/src/components/reports/ChooseGraph.tsx
@@ -137,7 +137,6 @@ export function ChooseGraph({
     return (
       <DonutGraph
         style={graphStyle}
-        compact={compact}
         data={data}
         filters={filters}
         groupBy={groupBy}

diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx
@@ -38,16 +38,38 @@ const ActiveShapeMobile = props => {
   } = props;
   const yAxis = payload.name ?? payload.date;
 
+  const sin = Math.sin(-RADIAN * 240);
+  const my = cy + outerRadius * sin;
+  const ey = my - 5;
+
   return (
     <g>
-      <text x={cx} y={cy + 70} dy={0} textAnchor="middle" fill={fill}>
+      <text
+        x={cx}
+        y={cy + outerRadius * Math.sin(-RADIAN * 270) + 15}
+        dy={0}
+        textAnchor="middle"
+        fill={fill}
+      >
         {`${yAxis}`}
       </text>
       <PrivacyFilter>
-        <text x={cx - 50} y={cy + 40} dy={0} textAnchor="end" fill={fill}>
+        <text
+          x={cx + outerRadius * Math.cos(-RADIAN * 240) - 30}
+          y={ey}
+          dy={0}
+          textAnchor="end"
+          fill={fill}
+        >
           {`${amountToCurrency(value)}`}
         </text>
-        <text x={cx + 50} y={cy + 40} dy={0} textAnchor="start" fill="#999">
+        <text
+          x={cx + outerRadius * Math.cos(-RADIAN * 330) + 10}
+          y={ey}
+          dy={0}
+          textAnchor="start"
+          fill="#999"
+        >
           {`${(percent * 100).toFixed(2)}%`}
         </text>
       </PrivacyFilter>
@@ -184,7 +206,6 @@ type DonutGraphProps = {
   filters: RuleConditionEntity[];
   groupBy: string;
   balanceTypeOp: balanceTypeOpType;
-  compact?: boolean;
   viewLabels: boolean;
   showHiddenCategories?: boolean;
   showOffBudget?: boolean;
@@ -197,7 +218,6 @@ export function DonutGraph({
   filters,
   groupBy,
   balanceTypeOp,
-  compact,
   viewLabels,
   showHiddenCategories,
   showOffBudget,
@@ -226,72 +246,77 @@ export function DonutGraph({
   const sortedData = unsortedData.slice().sort((a, b) => getVal(b) - getVal(a));
 
   return (
-    <Container
-      style={{
-        ...style,
-        ...(compact && { height: 'auto' }),
-      }}
-    >
-      {(width, height) =>
-        sortedData && (
-          <ResponsiveContainer>
-            <div>
-              {!compact && <div style={{ marginTop: '15px' }} />}
-              <PieChart
-                width={width}
-                height={height}
-                style={{ cursor: pointer }}
-              >
-                <Pie
-                  activeIndex={activeIndex}
-                  activeShape={compact ? ActiveShapeMobile : ActiveShape}
-                  dataKey={val => getVal(val)}
-                  nameKey={yAxis}
-                  isAnimationActive={false}
-                  data={sortedData}
-                  innerRadius={Math.min(width, height) * 0.2}
-                  fill="#8884d8"
-                  labelLine={false}
-                  label={e =>
-                    viewLabels && !compact ? customLabel(e) : <div />
-                  }
-                  startAngle={90}
-                  endAngle={-270}
-                  onMouseLeave={() => setPointer('')}
-                  onMouseEnter={(_, index) => {
-                    setActiveIndex(index);
-                    if (!['Group', 'Interval'].includes(groupBy)) {
-                      setPointer('pointer');
-                    }
-                  }}
-                  onClick={item =>
-                    ((compact && showTooltip) || !compact) &&
-                    !['Group', 'Interval'].includes(groupBy) &&
-                    showActivity({
-                      navigate,
-                      categories,
-                      accounts,
-                      balanceTypeOp,
-                      filters,
-                      showHiddenCategories,
-                      showOffBudget,
-                      type: 'totals',
-                      startDate: data.startDate,
-                      endDate: data.endDate,
-                      field: groupBy.toLowerCase(),
-                      id: item.id,
-                    })
-                  }
+    <Container style={style}>
+      {(width, height) => {
+        const compact = height <= 300 || width <= 300;
+
+        return (
+          sortedData && (
+            <ResponsiveContainer>
+              <div>
+                {!compact && <div style={{ marginTop: '15px' }} />}
+                <PieChart
+                  width={width}
+                  height={height}
+                  style={{ cursor: pointer }}
                 >
-                  {data.legend.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-              </PieChart>
-            </div>
-          </ResponsiveContainer>
-        )
-      }
+                  <Pie
+                    activeIndex={activeIndex}
+                    activeShape={
+                      width < 220 || height < 130
+                        ? undefined
+                        : compact
+                          ? ActiveShapeMobile
+                          : ActiveShape
+                    }
+                    dataKey={val => getVal(val)}
+                    nameKey={yAxis}
+                    isAnimationActive={false}
+                    data={sortedData}
+                    innerRadius={Math.min(width, height) * 0.2}
+                    fill="#8884d8"
+                    labelLine={false}
+                    label={e =>
+                      viewLabels && !compact ? customLabel(e) : <div />
+                    }
+                    startAngle={90}
+                    endAngle={-270}
+                    onMouseLeave={() => setPointer('')}
+                    onMouseEnter={(_, index) => {
+                      setActiveIndex(index);
+                      if (!['Group', 'Interval'].includes(groupBy)) {
+                        setPointer('pointer');
+                      }
+                    }}
+                    onClick={item =>
+                      ((compact && showTooltip) || !compact) &&
+                      !['Group', 'Interval'].includes(groupBy) &&
+                      showActivity({
+                        navigate,
+                        categories,
+                        accounts,
+                        balanceTypeOp,
+                        filters,
+                        showHiddenCategories,
+                        showOffBudget,
+                        type: 'totals',
+                        startDate: data.startDate,
+                        endDate: data.endDate,
+                        field: groupBy.toLowerCase(),
+                        id: item.id,
+                      })
+                    }
+                  >
+                    {data.legend.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+              </div>
+            </ResponsiveContainer>
+          )
+        );
+      }}
     </Container>
   );
 }