From 0c027eb524be00bccf349880038f712a314349b3 Mon Sep 17 00:00:00 2001
From: kielosz <kielosz@gmail.com>
Date: Wed, 10 Aug 2022 17:51:07 +0200
Subject: [PATCH] Use options parameter

Signed-off-by: kielosz <kielosz@gmail.com>
---
 plugins/cost-insights/api-report.md                    |  4 +++-
 .../src/components/CostGrowth/CostGrowthIndicator.tsx  |  4 ++--
 .../components/CostOverviewCard/CostOverviewLegend.tsx |  4 ++--
 .../ProductInsightsCard/ProductEntityTable.tsx         | 10 ++--------
 plugins/cost-insights/src/utils/formatters.test.ts     |  2 +-
 plugins/cost-insights/src/utils/formatters.ts          |  8 ++++----
 6 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/plugins/cost-insights/api-report.md b/plugins/cost-insights/api-report.md
index 19d94c7058..2a4cecc4eb 100644
--- a/plugins/cost-insights/api-report.md
+++ b/plugins/cost-insights/api-report.md
@@ -322,7 +322,9 @@ export type CostGrowthIndicatorProps = TypographyProps & {
   change: ChangeStatistic;
   formatter?: (
     change: ChangeStatistic,
-    returnAbsoluteValue: boolean,
+    options?: {
+      absolute: boolean;
+    },
   ) => Maybe<string>;
 };
 
diff --git a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx b/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx
index bb303956a3..e7746495d6 100644
--- a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx
+++ b/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx
@@ -27,7 +27,7 @@ export type CostGrowthIndicatorProps = TypographyProps & {
   change: ChangeStatistic;
   formatter?: (
     change: ChangeStatistic,
-    returnAbsoluteValue: boolean,
+    options?: { absolute: boolean },
   ) => Maybe<string>;
 };
 
@@ -47,7 +47,7 @@ export const CostGrowthIndicator = ({
 
   return (
     <Typography className={classNames} component="span" {...props}>
-      {formatter ? formatter(change, true) : change.ratio}
+      {formatter ? formatter(change, { absolute: true }) : change.ratio}
       {growth === GrowthType.Excess && <ArrowDropUp aria-label="excess" />}
       {growth === GrowthType.Savings && <ArrowDropDown aria-label="savings" />}
     </Typography>
diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx
index ddd31201a6..2df80f4780 100644
--- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx
+++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx
@@ -59,7 +59,7 @@ export const CostOverviewLegend = ({
       {dailyCostData.change && (
         <Box mr={2}>
           <LegendItem title="Cost Trend" markerColor={theme.palette.blue}>
-            {formatChange(dailyCostData.change, false)}
+            {formatChange(dailyCostData.change)}
           </LegendItem>
         </Box>
       )}
@@ -70,7 +70,7 @@ export const CostOverviewLegend = ({
               title={`${metric.name} Trend`}
               markerColor={theme.palette.magenta}
             >
-              {formatChange(metricData.change, false)}
+              {formatChange(metricData.change)}
             </LegendItem>
           </Box>
           <LegendItem
diff --git a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx
index 54f81a1bc9..95ba4f2f2d 100644
--- a/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx
+++ b/plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx
@@ -76,15 +76,9 @@ function createSorter(field?: keyof Omit<RowData, 'id'>) {
     if (b.id === 'total') return 1;
     if (field === 'label') return a.label.localeCompare(b.label);
     if (field === 'change') {
-      if (
-        formatChange(a[field], false) === '∞' ||
-        formatChange(b[field], false) === '-∞'
-      )
+      if (formatChange(a[field]) === '∞' || formatChange(b[field]) === '-∞')
         return 1;
-      if (
-        formatChange(a[field], false) === '-∞' ||
-        formatChange(b[field], false) === '∞'
-      )
+      if (formatChange(a[field]) === '-∞' || formatChange(b[field]) === '∞')
         return -1;
       return a[field].ratio! - b[field].ratio!;
     }
diff --git a/plugins/cost-insights/src/utils/formatters.test.ts b/plugins/cost-insights/src/utils/formatters.test.ts
index 754760e5cb..8bf0a6a9d7 100644
--- a/plugins/cost-insights/src/utils/formatters.test.ts
+++ b/plugins/cost-insights/src/utils/formatters.test.ts
@@ -75,7 +75,7 @@ describe.each`
   ${10.123}         | ${'>1000%'}
   ${-0.123123}      | ${'-12%'}
   ${-1.123}         | ${'-112%'}
-  ${-10.123}        | ${'>1000%'}
+  ${-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 e66b6bc75c..e9b19097a4 100644
--- a/plugins/cost-insights/src/utils/formatters.ts
+++ b/plugins/cost-insights/src/utils/formatters.ts
@@ -83,14 +83,14 @@ export function formatCurrency(amount: number, currency?: string): string {
 
 export function formatChange(
   change: ChangeStatistic,
-  returnAbsoluteValue: boolean,
+  options?: { absolute: boolean },
 ): string {
   if (notEmpty(change.ratio)) {
     return formatPercent(
-      returnAbsoluteValue ? Math.abs(change.ratio) : change.ratio,
+      options?.absolute ? Math.abs(change.ratio) : change.ratio,
     );
   }
-  if (returnAbsoluteValue) {
+  if (options?.absolute) {
     return '∞';
   }
   return change.amount >= 0 ? '∞' : '-∞';
@@ -103,7 +103,7 @@ export function formatPercent(n: number): string {
   }
 
   if (Math.abs(n) > 10) {
-    return `>1000%`;
+    return `>${n < 0 ? '-' : ''}1000%`;
   }
 
   return `${(n * 100).toFixed(0)}%`;