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..19d94c7058 100644 --- a/plugins/cost-insights/api-report.md +++ b/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; + formatter?: ( + change: ChangeStatistic, + returnAbsoluteValue: 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..bb303956a3 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, + returnAbsoluteValue: boolean, + ) => Maybe; }; export const CostGrowthIndicator = ({ @@ -44,7 +47,7 @@ export const CostGrowthIndicator = ({ return ( - {formatter ? formatter(change) : change.ratio} + {formatter ? formatter(change, true) : change.ratio} {growth === GrowthType.Excess && } {growth === GrowthType.Savings && } diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewLegend.tsx index 2df80f4780..ddd31201a6 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 && ( - {formatChange(dailyCostData.change)} + {formatChange(dailyCostData.change, false)} )} @@ -70,7 +70,7 @@ export const CostOverviewLegend = ({ title={`${metric.name} Trend`} markerColor={theme.palette.magenta} > - {formatChange(metricData.change)} + {formatChange(metricData.change, false)} ) { 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!; } diff --git a/plugins/cost-insights/src/utils/formatters.test.ts b/plugins/cost-insights/src/utils/formatters.test.ts index 9fe17f277f..754760e5cb 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..e66b6bc75c 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, + 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 ? '∞' : '-∞'; }