Use options parameter

Signed-off-by: kielosz <kielosz@gmail.com>

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>;
 };
 

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>

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

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!;
     }

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);

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)}%`;