Added rounding to MPGA download

Author: Katelyn Grimes

src/components/Reports/MPGAIncomeExpensesReport/CustomExport/CustomExport.test.tsx

@@ -1,7 +1,9 @@
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
-import { mockData, months } from '../mockData';
+import { DataFields, mockData, months } from '../mockData';
 import { createTable, exportToCsv } from './CustomExport';
 
+const locale = 'en-US';
+
 const mockSetAttribute = jest.fn();
 const mockClick = jest.fn();
 
@@ -51,7 +53,12 @@ describe('CustomExport', () => {
     jest.spyOn(link, 'setAttribute').mockImplementation(mockSetAttribute);
     jest.spyOn(link, 'click').mockImplementation(mockClick);
 
-    const data = exportToCsv(mockData.income, ReportTypeEnum.Income, months);
+    const data = exportToCsv(
+      mockData.income,
+      ReportTypeEnum.Income,
+      months,
+      locale,
+    );
 
     expect(mockSetAttribute).toHaveBeenCalledWith(
       'href',
@@ -69,36 +76,79 @@ describe('CustomExport', () => {
   });
 
   it('should contain correct data', () => {
-    const csvData = createTable(mockHeaders, mockData.income);
+    const csvData = createTable(mockHeaders, mockData.income, locale);
 
     expect(csvData).toContain(mockHeaders);
     expect(csvData[1]).toEqual([
       'Contributions',
-      6770,
-      6090,
-      5770,
-      7355,
-      8035,
-      6575,
-      7556,
-      8239,
-      9799,
-      9729,
-      13020,
-      19215,
-      9013,
-      108156,
+      '6770',
+      '6090',
+      '5770',
+      '7355',
+      '8035',
+      '6575',
+      '7556',
+      '8239',
+      '9799',
+      '9729',
+      '13020',
+      '19215',
+      '9013',
+      '108156',
+    ]);
+  });
+
+  it('should round values to two decimal places', () => {
+    const decimalData: DataFields[] = [
+      {
+        id: 'rounding-test',
+        description: 'Rounding',
+        monthly: [10.234, 10.236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+        average: 9012.567,
+        total: 108155.555,
+      },
+    ];
+
+    const csvData = createTable(mockHeaders, decimalData, locale);
+
+    expect(csvData[1]).toEqual([
+      'Rounding',
+      '10.23',
+      '10.24',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '-',
+      '9012.57',
+      '108155.56',
     ]);
   });
 
   it('should display correct totals', () => {
-    const csvData = createTable(mockHeaders, dataWithTotal);
+    const csvData = createTable(mockHeaders, dataWithTotal, locale);
 
     expect(csvData[csvData.length - 1]).toEqual([
       'Overall Total',
-      ...monthlyTotals,
-      overallAverage,
-      overallTotal,
+      '6870',
+      '6190',
+      '5870',
+      '7455',
+      '8135',
+      '6675',
+      '7656',
+      '8239',
+      '9799',
+      '9729',
+      '13020',
+      '19215',
+      '9071',
+      '108856',
     ]);
   });
 });

src/components/Reports/MPGAIncomeExpensesReport/CustomExport/CustomExport.tsx

@@ -2,12 +2,30 @@ import { buildURI } from 'react-csv/lib/core';
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
 import { DataFields } from '../mockData';
 
-export const createTable = (csvHeader: string[], data: DataFields[]) => {
+const round = (value: number, locale: string) =>
+  new Intl.NumberFormat(locale, {
+    style: 'decimal',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+    trailingZeroDisplay: 'stripIfInteger',
+    useGrouping: false,
+  }).format(value);
+
+export const createTable = (
+  csvHeader: string[],
+  data: DataFields[],
+  locale: string,
+) => {
   const csvData = data.map((item) => {
-    const monthlyData = item.monthly.map((month) =>
-      month === 0 ? '-' : month,
+    const monthlyData = item.monthly.map((monthlyAmount) =>
+      monthlyAmount === 0 ? '-' : round(monthlyAmount, locale),
     );
-    return [item.description, ...monthlyData, item.average, item.total];
+    return [
+      item.description,
+      ...monthlyData,
+      round(item.average, locale),
+      round(item.total, locale),
+    ];
   });
 
   return [csvHeader, ...csvData];
@@ -17,6 +35,7 @@ export const exportToCsv = (
   data: DataFields[],
   reportType: ReportTypeEnum,
   months: string[],
+  locale: string,
 ) => {
   const title =
     reportType === ReportTypeEnum.Income
@@ -46,7 +65,7 @@ export const exportToCsv = (
   ];
 
   const csvHeader = ['Description', ...last12Months, 'Average', 'Total'];
-  const csvData = createTable(csvHeader, dataWithTotal);
+  const csvData = createTable(csvHeader, dataWithTotal, locale);
 
   const csvBlob = buildURI(csvData, true);
 

src/components/Reports/MPGAIncomeExpensesReport/CustomToolbar/CustomToolbar.tsx

@@ -10,6 +10,7 @@ import {
   ToolbarButton,
 } from '@mui/x-data-grid';
 import { useTranslation } from 'react-i18next';
+import { useLocale } from 'src/hooks/useLocale';
 import { exportToCsv } from '../CustomExport/CustomExport';
 import { ReportTypeEnum } from '../Helper/MPGAReportEnum';
 import { TableCardHead } from '../Tables/TableCardHead';
@@ -27,6 +28,7 @@ export const CustomToolbar: React.FC<CustomToolbarProps> = ({
   months,
 }) => {
   const { t } = useTranslation();
+  const locale = useLocale();
 
   return (
     <Toolbar style={{ display: 'flex', justifyContent: 'left' }}>
@@ -71,7 +73,7 @@ export const CustomToolbar: React.FC<CustomToolbarProps> = ({
       />
 
       <Tooltip title={t('Download as CSV')}>
-        <ToolbarButton onClick={() => exportToCsv(data, type, months)}>
+        <ToolbarButton onClick={() => exportToCsv(data, type, months, locale)}>
           <FileDownloadIcon fontSize="small" color="primary" />
         </ToolbarButton>
       </Tooltip>