refactor(charts): Move arc-styling to central PieChart

BudgetBuddyDE · Sep 18, 2024 · 1c8a8af · 1c8a8af
1 parent d295b7a
commit 1c8a8af
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 21 deletions.
diff --git a/src/components/Base/Charts/PieChart.component.tsx b/src/components/Base/Charts/PieChart.component.tsx
@@ -1,6 +1,8 @@
+import {useTheme} from '@mui/material';
 import {PieChart as MuiPieChart, type PieChartProps as MuiPieChartProps} from '@mui/x-charts';
 import React from 'react';
 
+import {useScreenSize} from '@/hooks';
 import {PieCenterLabel} from '@/routes/Charts.route';
 
 import {ParentSize} from './ParentSize.component';
@@ -41,6 +43,8 @@ export type TPieChartProps = Omit<MuiPieChartProps, 'children'> & {
  * @returns {JSX.Element} The rendered PieChart component.
  */
 export const PieChart: React.FC<TPieChartProps> = ({fullWidth = false, primaryText, secondaryText, ...props}) => {
+  const theme = useTheme();
+  const screenSize = useScreenSize();
   const defaultProps: Partial<MuiPieChartProps> = {
     slotProps: {
       legend: {
@@ -53,12 +57,16 @@ export const PieChart: React.FC<TPieChartProps> = ({fullWidth = false, primaryTe
 
   const preparedData: typeof props.series = React.useMemo(() => {
     return props.series.map(item => ({
-      ...item,
+      innerRadius: screenSize === 'small' ? 90 : 110,
+      paddingAngle: 1,
+      cornerRadius: theme.shape.borderRadius,
       arcLabel: params => params.label ?? '',
       arcLabelMinAngle: 18,
+      highlightScope: {faded: 'global', highlighted: 'item'},
       sortingValues(a, b) {
         return b - a;
       },
+      ...item,
     }));
   }, [props.series]);
 

diff --git a/src/components/Budget/BudgetPieChart.component.tsx b/src/components/Budget/BudgetPieChart.component.tsx
@@ -91,10 +91,6 @@ export const BudgetPieChart: React.FC<TBudgetPieChartProps> = () => {
               {
                 data: chartData,
                 valueFormatter: value => Formatter.formatBalance(value.value),
-                innerRadius: 110,
-                paddingAngle: 1,
-                cornerRadius: 5,
-                highlightScope: {faded: 'global', highlighted: 'item'},
               },
             ]}
           />

diff --git a/src/components/Category/Chart/CategoryPieChart.component.tsx b/src/components/Category/Chart/CategoryPieChart.component.tsx
@@ -145,10 +145,6 @@ export const CategoryPieChart: React.FC<TCategoryPieChartProps> = ({
               {
                 data: currentChartData,
                 valueFormatter: value => Formatter.formatBalance(value.value),
-                innerRadius: 110,
-                paddingAngle: 1,
-                cornerRadius: 5,
-                highlightScope: {faded: 'global', highlighted: 'item'},
               },
             ]}
           />

diff --git a/src/components/Subscription/SubscriptionPieChart.component.tsx b/src/components/Subscription/SubscriptionPieChart.component.tsx
@@ -85,10 +85,6 @@ export const SubscriptionPieChart = () => {
                 {
                   data: chartData,
                   valueFormatter: value => Formatter.formatBalance(value.value),
-                  innerRadius: 110,
-                  paddingAngle: 1,
-                  cornerRadius: 5,
-                  highlightScope: {faded: 'global', highlighted: 'item'},
                 },
               ]}
             />

diff --git a/src/routes/Stock.route.tsx b/src/routes/Stock.route.tsx
@@ -550,10 +550,6 @@ export const Stock = () => {
                             value: marketValue,
                           })),
                           valueFormatter: value => Formatter.formatBalance(value.value),
-                          innerRadius: 110,
-                          paddingAngle: 1,
-                          cornerRadius: 5,
-                          highlightScope: {faded: 'global', highlighted: 'item'},
                         },
                       ]}
                     />
@@ -575,10 +571,6 @@ export const Stock = () => {
                         {
                           data: stockDetails.asset.security.regions.map(({id, share}) => ({label: id, value: share})),
                           valueFormatter: value => `${value.value} shares`,
-                          innerRadius: 110,
-                          paddingAngle: 1,
-                          cornerRadius: 5,
-                          highlightScope: {faded: 'global', highlighted: 'item'},
                         },
                       ]}
                     />