Fix formatNumber bug and accounts grid mobile sizing

yong-space · Mar 30, 2024 · ab8c3d2 · ab8c3d2
1 parent f63f3ed
commit ab8c3d2
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 14 deletions.
diff --git a/src/dashboard/insights.jsx b/src/dashboard/insights.jsx
@@ -137,8 +137,21 @@ const Insights = ({ setRoute }) => {
                     </div>
                 ),
             },
-            { width: isMobile ? 110 : 200, field: 'average', type: 'number', valueFormatter: formatDecimal, headerName: 'Average', cellClassName: getColourClassForValue },
-            { width: isMobile ? 65 : 150, field: 'transactions', type: 'number', valueFormatter: formatNumber, headerName: isMobile ? 'Tx' : 'Transactions' },
+            {
+                width: isMobile ? 110 : 200,
+                field: 'average',
+                type: 'number',
+                valueFormatter: formatDecimal,
+                headerName: 'Average',
+                cellClassName: getColourClassForValue,
+            },
+            {
+                width: isMobile ? 65 : 150,
+                field: 'transactions',
+                type: 'number',
+                valueFormatter: formatNumber,
+                headerName: isMobile ? 'Tx' : 'Transactions',
+            },
         ];
 
         const handleDoubleClick = ({ row }) => {

diff --git a/src/settings/accounts-grid.jsx b/src/settings/accounts-grid.jsx
@@ -13,12 +13,25 @@ const GridBox = styled.div`
     margin-bottom: ${props => props.isMobile ? '.5rem' : '1rem' };
 `;
 
-const IssuerChip = styled(Chip)`
+const ChipInternal = styled(Chip)`
     border-radius: .5rem;
+    height: fit-content;
+    font-size: .875rem;
+    line-height: initial;
+    margin: .6rem 0;
+    padding: .4rem 0;
     color: #${props => props.colour};
     border-color: #${props => props.colour};
 `;
 
+const IssuerChip = ({ issuer }) => (
+    <ChipInternal
+        colour={issuer.colour}
+        label={issuer.name}
+        variant="outlined"
+    />
+);
+
 const FxRoot = styled.sup`
     font-size: .8rem;
     position: relative;
@@ -72,26 +85,27 @@ const AccountsGrid = ({
             renderCell: ({ value }) => <Chip sx={{ borderRadius: '.5rem' }} label={value} color={colors[value]} />
         },
         {
-            field: 'issuer',
+            field: 'issuerId',
             headerName: 'Issuer',
-            valueGetter: (_, row) => getIssuer(row.issuerId),
-            renderCell: ({ value }) => <IssuerChip colour={value.colour} label={value.name} variant="outlined" />
+            renderCell: ({ value }) => <IssuerChip issuer={getIssuer(value)} />,
         },
         {
             field: 'typeAndIssuer',
             headerName: 'Type + Issuer',
-            valueGetter: (_, row) => ({ type: row.type, issuer: getIssuer(row.issuerId) }),
-            renderCell: ({ value }) => (
+            valueGetter: (_, row) => row.type + row.issuerId,
+            renderCell: ({ row }) => (
                 <div style={{ display: 'flex', gap: '.5rem' }}>
-                    <Chip sx={{ borderRadius: '.5rem' }} label={value.type} color={colors[value.type]} />
-                    <IssuerChip colour={value.issuer.colour} label={value.issuer.name} variant="outlined" />
+                    <ChipInternal label={row.type} color={colors[row.type]} />
+                    <IssuerChip issuer={getIssuer(row.issuerId)} />
                 </div>
             ),
             width: 165,
         },
         {
             field: 'name',
             headerName: 'Name',
+            width: isMobile ? 0 : '150',
+            flex: isMobile ? 1 : 0,
             renderCell: ({ row }) => (
                 <>
                     {row.name}
@@ -101,16 +115,16 @@ const AccountsGrid = ({
         },
         {
             field: 'transactions',
-            headerName: 'Transactions',
+            headerName: isMobile ? 'Tx' : 'Transactions',
             type: 'number',
-            width: '103',
+            width: isMobile ? 60 : 110,
             valueGetter: (_, row) => row.transactions || 0,
             sortable: false,
         },
     ];
 
     useEffect(() => {
-        const vColumns = isMobile ? { id: false, type: false, issuer: false } :
+        const vColumns = isMobile ? { id: false, type: false, issuerId: false } :
             { typeAndIssuer: false };
         setVisibleColumns(vColumns);
     }, [ isMobile ]);

diff --git a/src/util/formatters.js b/src/util/formatters.js
@@ -28,6 +28,6 @@ export const formatDecimal = (value) => processFormatDecimal(value, 0, 2);
 export const formatFx = (value) => formatDecimal(value, 1, 5);
 export const formatDecimalAbs = (value) => formatDecimal(Math.abs(value), null);
 export const formatDecimalRaw = (number) => formatDecimal(number, null);
-export const formatNumber = (number) => formatDecimal(number, 0, 0);
+export const formatNumber = (number) => processFormatDecimal(number, 0, 0);
 export const formatDate = (value) => !value ? '' : dayjs.utc(value).format('YYYY-MM-DD');
 export const formatMonth = (value) => !value ? '' : dayjs.utc(value).format('YYYY MMM');