diff --git a/.changeset/beige-chairs-wink.md b/.changeset/beige-chairs-wink.md new file mode 100644 index 0000000000..40724c254f --- /dev/null +++ b/.changeset/beige-chairs-wink.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-cost-insights': patch +--- + +Added Y axis for metric data, with relevant formatting and data domain diff --git a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx index c46f2b0b82..ce0623cc7e 100644 --- a/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx +++ b/plugins/cost-insights/src/components/CostOverviewCard/CostOverviewChart.tsx @@ -43,7 +43,7 @@ import { isInvalid, } from '../../utils/graphs'; import { useCostOverviewStyles as useStyles } from '../../utils/styles'; -import { groupByDate, toDataMax, trendFrom } from '../../utils/charts'; +import { groupByDate, trendFrom } from '../../utils/charts'; import { aggregationSort } from '../../utils/sort'; import { CostOverviewLegend } from './CostOverviewLegend'; import { TooltipRenderer } from '../../types'; @@ -135,6 +135,7 @@ export const CostOverviewChart = ({ }; const { hideTrendLine } = useCostInsightsOptions(); + const localizedTickFormatter = formatGraphValue(baseCurrency); return ( @@ -161,16 +162,19 @@ export const CostOverviewChart = ({ 0, 'dataMax']} tick={{ fill: styles.axis.fill }} - tickFormatter={formatGraphValue(baseCurrency)} + tickFormatter={localizedTickFormatter} width={styles.yAxis.width} yAxisId={data.dailyCost.dataKey} /> {metric && ( 0, toDataMax(data.metric.dataKey, chartData)]} + domain={['auto', 'auto']} width={styles.yAxis.width} yAxisId={data.metric.dataKey} + tickFormatter={(value: any, index: number) => + localizedTickFormatter(value, index, data.metric.format) + } + orientation="right" /> )}