diff --git a/.changeset/popular-ears-allow.md b/.changeset/popular-ears-allow.md new file mode 100644 index 0000000000..1af2fcbd81 --- /dev/null +++ b/.changeset/popular-ears-allow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cost-insights': patch +--- + +Display minus sign in trends in `CostOverviewCard` diff --git a/plugins/cost-insights/api-report.md b/plugins/cost-insights/api-report.md index 94cab949c7..2a4cecc4eb 100644 --- a/plugins/cost-insights/api-report.md +++ b/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; + formatter?: ( + change: ChangeStatistic, + options?: { + absolute: boolean; + }, + ) => Maybe; }; // Warning: (ae-missing-release-tag) "CostGrowthProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) diff --git a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx b/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx index 592f57d389..e7746495d6 100644 --- a/plugins/cost-insights/src/components/CostGrowth/CostGrowthIndicator.tsx +++ b/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; + formatter?: ( + change: ChangeStatistic, + options?: { absolute: boolean }, + ) => Maybe; }; export const CostGrowthIndicator = ({ @@ -44,7 +47,7 @@ export const CostGrowthIndicator = ({ return ( - {formatter ? formatter(change) : change.ratio} + {formatter ? formatter(change, { absolute: true }) : change.ratio} {growth === GrowthType.Excess && } {growth === GrowthType.Savings && } diff --git a/plugins/cost-insights/src/utils/formatters.test.ts b/plugins/cost-insights/src/utils/formatters.test.ts index 9fe17f277f..8bf0a6a9d7 100644 --- a/plugins/cost-insights/src/utils/formatters.test.ts +++ b/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); diff --git a/plugins/cost-insights/src/utils/formatters.ts b/plugins/cost-insights/src/utils/formatters.ts index 70782123cd..e9b19097a4 100644 --- a/plugins/cost-insights/src/utils/formatters.ts +++ b/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)}%`;