Added Y axis for metric data

Signed-off-by: Kévin Gomez <contact@kevingomez.fr>

.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

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 (
     <Box display="flex" flexDirection="column">
@@ -161,16 +162,19 @@ export const CostOverviewChart = ({
           <YAxis
             domain={[() => 0, 'dataMax']}
             tick={{ fill: styles.axis.fill }}
-            tickFormatter={formatGraphValue(baseCurrency)}
+            tickFormatter={localizedTickFormatter}
             width={styles.yAxis.width}
             yAxisId={data.dailyCost.dataKey}
           />
           {metric && (
             <YAxis
-              hide
-              domain={[() => 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"
             />
           )}
           <Area