From 9d69a87ee28d8f271a26f4a8749cb7260c4f4ad9 Mon Sep 17 00:00:00 2001
From: Ryan Vazquez <ryanv@spotify.com>
Date: Fri, 20 Nov 2020 10:26:11 -0500
Subject: [PATCH] truncate large percentages

---
 .../src/components/BarChart/BarChartTooltip.tsx   | 11 ++++++++---
 .../cost-insights/src/utils/formatters.test.ts    | 15 +++++++++++++++
 plugins/cost-insights/src/utils/formatters.ts     |  6 ++++++
 plugins/cost-insights/src/utils/styles.ts         |  3 +++
 4 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx b/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx
index 8ab787a443..64a35e2658 100644
--- a/plugins/cost-insights/src/components/BarChart/BarChartTooltip.tsx
+++ b/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>
diff --git a/plugins/cost-insights/src/utils/formatters.test.ts b/plugins/cost-insights/src/utils/formatters.test.ts
index 69e9086be1..db25b6f3b7 100644
--- a/plugins/cost-insights/src/utils/formatters.test.ts
+++ b/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);
+  });
+});
diff --git a/plugins/cost-insights/src/utils/formatters.ts b/plugins/cost-insights/src/utils/formatters.ts
index 42505e7072..19255d3c56 100644
--- a/plugins/cost-insights/src/utils/formatters.ts
+++ b/plugins/cost-insights/src/utils/formatters.ts
@@ -83,9 +83,15 @@ export function formatPercent(n: number): string {
   if (isNaN(n) || Math.abs(n) < 0.01) {
     return '0%';
   }
+
+  if (Math.abs(n) > 10) {
+    return `>1000%`;
+  }
+
   if (Math.abs(n) >= 1e19) {
     return '∞%';
   }
+
   return `${(n * 100).toFixed(0)}%`;
 }
 
diff --git a/plugins/cost-insights/src/utils/styles.ts b/plugins/cost-insights/src/utils/styles.ts
index 1e8fd50899..542896d6fc 100644
--- a/plugins/cost-insights/src/utils/styles.ts
+++ b/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: {