feat: made value panel responsive and background color to full (#7339)

* feat: made value panel responsive and background color to full

* feat: added css fix

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/components/ValueGraph/ValueGraph.styles.scss

@@ -1,31 +1,42 @@
 .value-graph-container {
-    width: 50%;
-    height: 50%;
-    max-width: 200px;
-    max-height: 200px;
-    border-radius: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	position: relative;
 
-    .value-graph-text {
-        font-size: 2.5vw;
-        text-align: center;
-    }
+	.value-text-container {
+		display: flex;
+		flex-direction: row;
+		align-items: baseline;
+		justify-content: center;
+		flex-wrap: nowrap;
+	}
 
-    .value-graph-bgconflict {
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-    }
+	.value-graph-text {
+		text-align: center;
+		font-weight: 400;
+	}
 
-    .value-graph-textconflict {
-        margin-left: 10px;
-        margin-top: 20px;
-    }
+	.value-graph-unit {
+		margin-left: 4px;
+		font-weight: 300;
+		opacity: 0.8;
+	}
 
-    .value-graph-icon {
-        color: #E89A3C;
-    }
-}
+	.value-graph-bgconflict {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+	}
+
+	.value-graph-textconflict {
+		margin-left: 10px;
+		margin-top: 20px;
+	}
+
+	.value-graph-icon {
+		color: #e89a3c;
+	}
+}

frontend/src/components/ValueGraph/index.tsx

@@ -3,6 +3,7 @@ import './ValueGraph.styles.scss';
 import { ExclamationCircleFilled } from '@ant-design/icons';
 import { Tooltip, Typography } from 'antd';
 import { ThresholdProps } from 'container/NewWidget/RightContainer/Threshold/types';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { getBackgroundColorAndThresholdCheck } from './utils';
@@ -13,6 +14,39 @@ function ValueGraph({
 	thresholds,
 }: ValueGraphProps): JSX.Element {
 	const { t } = useTranslation(['valueGraph']);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fontSize, setFontSize] = useState('2.5vw');
+
+	// Parse value to separate number and unit (assuming unit is at the end)
+	const matches = value.match(/([\d.]+[KMB]?)(.*)$/);
+	const numericValue = matches?.[1] || value;
+	const unit = matches?.[2]?.trim() || '';
+
+	// Adjust font size based on container size
+	useEffect(() => {
+		const updateFontSize = (): void => {
+			if (!containerRef.current) return;
+
+			const { width, height } = containerRef.current.getBoundingClientRect();
+			const minDimension = Math.min(width, height);
+			// Responsive font sizing based on container size
+			const newSize = Math.max(Math.min(minDimension / 5, 60), 16);
+			setFontSize(`${newSize}px`);
+		};
+
+		// Initial sizing
+		updateFontSize();
+
+		// Setup resize observer
+		const resizeObserver = new ResizeObserver(updateFontSize);
+		if (containerRef.current) {
+			resizeObserver.observe(containerRef.current);
+		}
+
+		return (): void => {
+			resizeObserver.disconnect();
+		};
+	}, []);
 
 	const {
 		threshold,
@@ -21,6 +55,7 @@ function ValueGraph({
 
 	return (
 		<div
+			ref={containerRef}
 			className="value-graph-container"
 			style={{
 				backgroundColor:
@@ -29,17 +64,34 @@ function ValueGraph({
 						: undefined,
 			}}
 		>
-			<Typography.Text
-				className="value-graph-text"
-				style={{
-					color:
-						threshold.thresholdFormat === 'Text'
-							? threshold.thresholdColor
-							: undefined,
-				}}
-			>
-				{value}
-			</Typography.Text>
+			<div className="value-text-container">
+				<Typography.Text
+					className="value-graph-text"
+					style={{
+						color:
+							threshold.thresholdFormat === 'Text'
+								? threshold.thresholdColor
+								: undefined,
+						fontSize,
+					}}
+				>
+					{numericValue}
+				</Typography.Text>
+				{unit && (
+					<Typography.Text
+						className="value-graph-unit"
+						style={{
+							color:
+								threshold.thresholdFormat === 'Text'
+									? threshold.thresholdColor
+									: undefined,
+							fontSize: `calc(${fontSize} * 0.7)`,
+						}}
+					>
+						{unit}
+					</Typography.Text>
+				)}
+			</div>
 			{isConflictingThresholds && (
 				<div
 					className={

frontend/src/container/PanelWrapper/__tests__/ValuePanelWrapper.test.tsx

@@ -8,6 +8,14 @@ import {
 	valuePanelWidget,
 } from './valuePanelWrapperHelper';
 
+window.ResizeObserver =
+	window.ResizeObserver ||
+	jest.fn().mockImplementation(() => ({
+		disconnect: jest.fn(),
+		observe: jest.fn(),
+		unobserve: jest.fn(),
+	}));
+
 describe('Value panel wrappper tests', () => {
 	it('should render value panel correctly with yaxis unit', () => {
 		const { getByText } = render(
@@ -19,7 +27,8 @@ describe('Value panel wrappper tests', () => {
 		);
 
 		// selected y axis unit as miliseconds (ms)
-		expect(getByText('295 ms')).toBeInTheDocument();
+		expect(getByText('295')).toBeInTheDocument();
+		expect(getByText('ms')).toBeInTheDocument();
 	});
 
 	it('should render tooltip when there are conflicting thresholds', () => {

frontend/src/container/PanelWrapper/__tests__/__snapshots__/ValuePanelWrapper.test.tsx.snap

@@ -39,12 +39,22 @@ exports[`Value panel wrappper tests should render tooltip when there are conflic
     <div
       class="value-graph-container"
     >
-      <span
-        class="ant-typography value-graph-text css-dev-only-do-not-override-2i2tap"
-        style="color: Blue;"
+      <div
+        class="value-text-container"
       >
-        295 ms
-      </span>
+        <span
+          class="ant-typography value-graph-text css-dev-only-do-not-override-2i2tap"
+          style="color: Blue; font-size: 16px;"
+        >
+          295
+        </span>
+        <span
+          class="ant-typography value-graph-unit css-dev-only-do-not-override-2i2tap"
+          style="color: Blue; font-size: calc(16px * 0.7);"
+        >
+          ms
+        </span>
+      </div>
       <div
         class="value-graph-textconflict"
       >