numbers and spending bar

Author: chpy04

src/frontend/src/pages/FinancePage/FinanceComponents/PieChart.tsx

@@ -203,7 +203,7 @@ const FinancePieChart: React.FC<FinancePieChartProps> = ({
         </Box>
       ) : (
         <>
-          <ResponsiveContainer width="100%" height={300} style={{ background: 'transparent' }}>
+          <ResponsiveContainer width={250} height={250} style={{ background: 'transparent' }}>
             <RechartsPieChart margin={{ top: 0, right: 0, bottom: 20, left: 0 }} style={{ background: 'transparent' }}>
               <Pie
                 data={adjustedData}

src/frontend/src/pages/FinancePage/FinanceComponents/SpendingBar.tsx

@@ -160,7 +160,7 @@ const SpendingBar = ({ data, title, edit }: SpendingBarProps) => {
         align: 'center',
         textAlign: 'center',
         formatter: (value, context) => {
-          const realValue = value - average;
+          const realValue = Math.round((value - average) * 100) / 100;
           let { label } = context.dataset;
           const datasetMeta = context.chart.getDatasetMeta(context.datasetIndex);
           const bar: any = datasetMeta.data[context.dataIndex];
@@ -207,10 +207,10 @@ const SpendingBar = ({ data, title, edit }: SpendingBarProps) => {
 
             const title = context.dataset.label;
 
-            const value = context.parsed.x - average; // for horizontal bar, use .x — use .y for vertical
+            const value = Math.round((context.parsed.x - average) * 100) / 100; // for horizontal bar, use .x — use .y for vertical
 
             if (dataset.spendingInfo.totalBudget < getTotalMoneySpentNotAvailable(dataset.spendingInfo)) {
-              return `Spending is $${Math.abs(dataset.spendingInfo.available)} overbudget!`;
+              return `Spending is $${Math.abs(Math.round(dataset.spendingInfo.available * 100) / 100)} overbudget!`;
             }
 
             return `${title}: $${value}`;