From 593c22253a5dd04084860559b5cc2b8eb1fa284c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?K=C3=A9vin=20Gomez?= <contact@kevingomez.fr>
Date: Sun, 11 Dec 2022 01:25:40 +0100
Subject: [PATCH] Added Y axis for metric data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Kévin Gomez <contact@kevingomez.fr>
---
 .changeset/beige-chairs-wink.md                      |  5 +++++
 .../CostOverviewCard/CostOverviewChart.tsx           | 12 ++++++++----
 2 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/beige-chairs-wink.md

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 (
     <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