Merge pull request #3375 from backstage/ryanv/truncate-large-percentages

truncate large percentages

.changeset/cost-insights-tiny-llamas-perform.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+truncate large percentages > 1000%

plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx

@@ -15,6 +15,7 @@
  */
 
 import React, { ReactNode, PropsWithChildren } from 'react';
+import classnames from 'classnames';
 import { Box, Divider, Typography } from '@material-ui/core';
 import { useTooltipStyles as useStyles } from '../../utils/styles';
 
@@ -35,6 +36,10 @@ export const BarChartTooltip = ({
   children,
 }: PropsWithChildren<BarChartTooltipProps>) => {
   const classes = useStyles();
+  const titleClassName = classnames(classes.truncate, {
+    [classes.maxWidth]: topRight === undefined,
+  });
+
   return (
     <Box className={classes.tooltip} display="flex" flexDirection="column">
       <Box
@@ -46,7 +51,7 @@ export const BarChartTooltip = ({
         pt={2}
       >
         <Box display="flex" flexDirection="column">
-          <Typography className={classes.truncate} variant="h6">
+          <Typography className={titleClassName} variant="h6">
             {title}
           </Typography>
           {subtitle && (
@@ -55,10 +60,10 @@ export const BarChartTooltip = ({
             </Typography>
           )}
         </Box>
-        {topRight && <Box ml={1}>{topRight}</Box>}
+        {topRight && <Box ml={2}>{topRight}</Box>}
       </Box>
       {content && (
-        <Box px={2} pt={2}>
+        <Box px={2} pt={2} className={classes.maxWidth}>
           <Typography variant="body1" paragraph>
             {content}
           </Typography>

plugins/cost-insights/src/utils/formatters.test.ts

@@ -16,6 +16,7 @@
 
 import {
   formatPeriod,
+  formatPercent,
   lengthyCurrencyFormatter,
   quarterOf,
 } from './formatters';
@@ -69,3 +70,17 @@ describe.each`
     expect(formatPeriod(duration, date, isEndDate)).toBe(output);
   });
 });
+
+describe.each`
+  ratio             | expected
+  ${0.0}            | ${'0%'}
+  ${0.000000000001} | ${'0%'}
+  ${-0.00000000001} | ${'0%'}
+  ${0.123123}       | ${'12%'}
+  ${1.123}          | ${'112%'}
+  ${10.123}         | ${'>1000%'}
+`('formatPercent', ({ ratio, expected }) => {
+  it(`correctly formats ${ratio} as ${expected}`, () => {
+    expect(formatPercent(ratio)).toBe(expected);
+  });
+});

plugins/cost-insights/src/utils/formatters.ts

@@ -83,9 +83,11 @@ export function formatPercent(n: number): string {
   if (isNaN(n) || Math.abs(n) < 0.01) {
     return '0%';
   }
-  if (Math.abs(n) >= 1e19) {
-    return '∞%';
+
+  if (Math.abs(n) > 10) {
+    return `>1000%`;
   }
+
   return `${(n * 100).toFixed(0)}%`;
 }
 

plugins/cost-insights/src/utils/styles.ts

@@ -386,6 +386,9 @@ export const useTooltipStyles = makeStyles<CostInsightsTheme>(
         boxShadow: theme.shadows[1],
         color: theme.palette.tooltip.color,
         fontSize: theme.typography.fontSize,
+        minWidth: 300,
+      },
+      maxWidth: {
         maxWidth: 300,
       },
       actions: {