diff --git a/src/grants/components/grant-stat-item/grantee-stat-item.stories.tsx b/src/grants/components/grant-stat-item/grantee-stat-item.stories.tsx index 82ab34a8..a3efb8bf 100644 --- a/src/grants/components/grant-stat-item/grantee-stat-item.stories.tsx +++ b/src/grants/components/grant-stat-item/grantee-stat-item.stories.tsx @@ -89,3 +89,48 @@ export const DeepNested: Story = { }, }, }; + +export const TrimmedDecimal: Story = { + args: { + granteeStat: { + label: 'Some Label', + value: 'Sample non-integer value', + stats: [ + { + label: 'New Contributors', + value: '35.023523', + stats: [ + { + label: 'Crypto Native', + value: '4.457', + stats: [], + }, + + { + label: 'Open Source Contributor', + value: '7.55', + stats: [], + }, + ], + }, + { + label: 'Last 6 months', + value: '2.342634263246326', + stats: [ + { + label: 'First Half', + value: '2.123421351236236', + stats: [], + }, + + { + label: 'Last Half', + value: '4.324632463246', + stats: [], + }, + ], + }, + ], + }, + }, +}; diff --git a/src/grants/components/grant-stat-item/grantee-stat-item.tsx b/src/grants/components/grant-stat-item/grantee-stat-item.tsx index cf58577b..704a4945 100644 --- a/src/grants/components/grant-stat-item/grantee-stat-item.tsx +++ b/src/grants/components/grant-stat-item/grantee-stat-item.tsx @@ -22,7 +22,7 @@ export const GranteeStatItem = ({ granteeStat, level = 1 }: Props) => { <span className="text-13 font-medium leading-tight text-white md:text-2xl md:text-white/60"> {label} </span> - <span className="text-xl font-medium">{value}</span> + <span className="text-xl font-medium">{trimStat(value)}</span> </Inner> {hasChildren && ( @@ -110,3 +110,13 @@ export const GranteeStatsSkeleton = () => ( <GranteeStatItemSkeleton /> </> ); + +export const trimStat = (input: string): string => { + const num = parseFloat(input); + + if (!isNaN(num)) { + return num.toFixed(2); + } + + return input; +};