diff --git a/src/components/Base/Charts/PieChart.component.tsx b/src/components/Base/Charts/PieChart.component.tsx index 9ad2456c..9a2b7008 100644 --- 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 & { * @returns {JSX.Element} The rendered PieChart component. */ export const PieChart: React.FC = ({fullWidth = false, primaryText, secondaryText, ...props}) => { + const theme = useTheme(); + const screenSize = useScreenSize(); const defaultProps: Partial = { slotProps: { legend: { @@ -53,12 +57,16 @@ export const PieChart: React.FC = ({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 index d2683fe7..c6ab96a8 100644 --- a/src/components/Budget/BudgetPieChart.component.tsx +++ b/src/components/Budget/BudgetPieChart.component.tsx @@ -91,10 +91,6 @@ export const BudgetPieChart: React.FC = () => { { 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 index 52ff84db..01054838 100644 --- 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 = ({ { 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 index 82d00216..c07c8fa8 100644 --- 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 index 218efd0b..b18f25d5 100644 --- 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'}, }, ]} />