From 8a883f1b5e85f7c620b66f8a8f106ea4a6b9dd7a Mon Sep 17 00:00:00 2001
From: Pranshu Chittora <pranshu@signoz.io>
Date: Wed, 23 Mar 2022 22:03:57 +0530
Subject: [PATCH] feat: unit selection for value graph on dashboard (#898)

---
 frontend/src/container/GridGraphComponent/index.tsx        | 7 ++++++-
 .../NewWidget/RightContainer/YAxisUnitSelector.tsx         | 4 ++--
 frontend/src/container/NewWidget/RightContainer/index.tsx  | 6 +++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/frontend/src/container/GridGraphComponent/index.tsx b/frontend/src/container/GridGraphComponent/index.tsx
index 7c1572fae1..3ca7f4f544 100644
--- a/frontend/src/container/GridGraphComponent/index.tsx
+++ b/frontend/src/container/GridGraphComponent/index.tsx
@@ -1,6 +1,7 @@
 import { Typography } from 'antd';
 import { ChartData } from 'chart.js';
 import Graph, { graphOnClickHandler } from 'components/Graph';
+import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import ValueGraph from 'components/ValueGraph';
 import { GRAPH_TYPES } from 'container/NewDashboard/ComponentsSlider';
 import history from 'lib/history';
@@ -57,7 +58,11 @@ function GridGraphComponent({
 					<Typography>{title}</Typography>
 				</TitleContainer>
 				<ValueContainer isDashboardPage={isDashboardPage}>
-					<ValueGraph value={value.toString()} />
+					<ValueGraph
+						value={
+							yAxisUnit ? getYAxisFormattedValue(value, yAxisUnit) : value.toString()
+						}
+					/>
 				</ValueContainer>
 			</>
 		);
diff --git a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
index d8202d6fdb..1af32aff45 100644
--- a/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx
@@ -9,7 +9,7 @@ const findCategoryById = (searchValue) =>
 const findCategoryByName = (searchValue) =>
 	find(flattenedCategories, (option) => option.name == searchValue);
 
-function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
+function YAxisUnitSelector({ defaultValue, onSelect, fieldLabel }): JSX.Element {
 	const onSelectHandler = (selectedValue: string): void => {
 		onSelect(findCategoryByName(selectedValue)?.id);
 	};
@@ -19,7 +19,7 @@ function YAxisUnitSelector({ defaultValue, onSelect }): JSX.Element {
 	return (
 		<Col style={{ marginTop: '1rem' }}>
 			<div style={{ margin: '0.5rem 0' }}>
-				<Typography.Text>Y Axis Unit</Typography.Text>
+				<Typography.Text>{fieldLabel}</Typography.Text>
 			</div>
 			<AutoComplete
 				style={{ width: '100%' }}
diff --git a/frontend/src/container/NewWidget/RightContainer/index.tsx b/frontend/src/container/NewWidget/RightContainer/index.tsx
index 660451b439..dc9f79f0c5 100644
--- a/frontend/src/container/NewWidget/RightContainer/index.tsx
+++ b/frontend/src/container/NewWidget/RightContainer/index.tsx
@@ -148,7 +148,11 @@ function RightContainer({
 					setSelectedTime,
 				}}
 			/>
-			<YAxisUnitSelector defaultValue={yAxisUnit} onSelect={setYAxisUnit} />
+			<YAxisUnitSelector
+				defaultValue={yAxisUnit}
+				onSelect={setYAxisUnit}
+				fieldLabel={selectedGraphType === 'Value' ? 'Unit' : 'Y Axis Unit'}
+			/>
 		</Container>
 	);
 }