Display minus sign in trends

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

.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,10 @@ export const CostGrowthIndicator: ({
 // @public (undocumented)
 export type CostGrowthIndicatorProps = TypographyProps & {
   change: ChangeStatistic;
-  formatter?: (change: ChangeStatistic) => Maybe<string>;
+  formatter?: (
+    change: ChangeStatistic,
+    returnAbsoluteValue: 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,
+    returnAbsoluteValue: 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, 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)}
+            {formatChange(dailyCostData.change, false)}
           </LegendItem>
         </Box>
       )}
@@ -70,7 +70,7 @@ export const CostOverviewLegend = ({
               title={`${metric.name} Trend`}
               markerColor={theme.palette.magenta}
             >
-              {formatChange(metricData.change)}
+              {formatChange(metricData.change, false)}
             </LegendItem>
           </Box>
           <LegendItem

plugins/cost-insights/src/components/ProductInsightsCard/ProductEntityTable.tsx

@@ -76,9 +76,15 @@ 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]) === '∞' || formatChange(b[field]) === '-∞')
+      if (
+        formatChange(a[field], false) === '∞' ||
+        formatChange(b[field], false) === '-∞'
+      )
         return 1;
-      if (formatChange(a[field]) === '-∞' || formatChange(b[field]) === '∞')
+      if (
+        formatChange(a[field], false) === '-∞' ||
+        formatChange(b[field], false) === '∞'
+      )
         return -1;
       return a[field].ratio! - b[field].ratio!;
     }

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,
+  returnAbsoluteValue: boolean,
+): string {
   if (notEmpty(change.ratio)) {
-    return formatPercent(Math.abs(change.ratio));
+    return formatPercent(
+      returnAbsoluteValue ? Math.abs(change.ratio) : change.ratio,
+    );
+  }
+  if (returnAbsoluteValue) {
+    return '∞';
   }
   return change.amount >= 0 ? '∞' : '-∞';
 }