Merge pull request #13019 from kielosz/cost-trend

Display minus sign in trends in CostOverviewCard

.changeset/popular-ears-allow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-cost-insights': patch
+---
+
+Display minus sign in trends in `CostOverviewCard`

plugins/cost-insights/api-report.md

@@ -320,7 +320,12 @@ export const CostGrowthIndicator: ({
 // @public (undocumented)
 export type CostGrowthIndicatorProps = TypographyProps & {
   change: ChangeStatistic;
-  formatter?: (change: ChangeStatistic) => Maybe<string>;
+  formatter?: (
+    change: ChangeStatistic,
+    options?: {
+      absolute: boolean;
+    },
+  ) => Maybe<string>;
 };
 
 // Warning: (ae-missing-release-tag) "CostGrowthProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)

plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx

@@ -25,7 +25,10 @@ import { useCostGrowthStyles as useStyles } from '../../utils/styles';
 
 export type CostGrowthIndicatorProps = TypographyProps & {
   change: ChangeStatistic;
-  formatter?: (change: ChangeStatistic) => Maybe<string>;
+  formatter?: (
+    change: ChangeStatistic,
+    options?: { absolute: boolean },
+  ) => Maybe<string>;
 };
 
 export const CostGrowthIndicator = ({
@@ -44,7 +47,7 @@ export const CostGrowthIndicator = ({
 
   return (
     <Typography className={classNames} component="span" {...props}>
-      {formatter ? formatter(change) : 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/utils/formatters.test.ts

@@ -73,6 +73,9 @@ describe.each`
   ${0.123123}       | ${'12%'}
   ${1.123}          | ${'112%'}
   ${10.123}         | ${'>1000%'}
+  ${-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

@@ -81,9 +81,17 @@ export function formatCurrency(amount: number, currency?: string): string {
   return currency ? `${numString} ${pluralize(currency, n)}` : numString;
 }
 
-export function formatChange(change: ChangeStatistic): string {
+export function formatChange(
+  change: ChangeStatistic,
+  options?: { absolute: boolean },
+): string {
   if (notEmpty(change.ratio)) {
-    return formatPercent(Math.abs(change.ratio));
+    return formatPercent(
+      options?.absolute ? Math.abs(change.ratio) : change.ratio,
+    );
+  }
+  if (options?.absolute) {
+    return '∞';
   }
   return change.amount >= 0 ? '∞' : '-∞';
 }
@@ -95,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)}%`;