fix: fixed graph axis and tooltip (#1075)

frontend/src/components/Graph/index.tsx

@@ -32,7 +32,7 @@ import { legend } from './Plugin';
 import { emptyGraph } from './Plugin/EmptyGraph';
 import { LegendsContainer } from './styles';
 import { useXAxisTimeUnit } from './xAxisConfig';
-import { getYAxisFormattedValue } from './yAxisConfig';
+import { getToolTipValue, getYAxisFormattedValue } from './yAxisConfig';
 
 Chart.register(
 	LineElement,
@@ -115,7 +115,7 @@ function Graph({
 									label += ': ';
 								}
 								if (context.parsed.y !== null) {
-									label += getYAxisFormattedValue(context.parsed.y, yAxisUnit);
+									label += getToolTipValue(context.parsed.y.toString(), yAxisUnit);
 								}
 								return label;
 							},
@@ -160,7 +160,7 @@ function Graph({
 						ticks: {
 							// Include a dollar sign in the ticks
 							callback(value) {
-								return getYAxisFormattedValue(parseFloat(value.toString()), yAxisUnit);
+								return getYAxisFormattedValue(value.toString(), yAxisUnit);
 							},
 						},
 					},

frontend/src/components/Graph/yAxisConfig.ts

@@ -1,12 +1,43 @@
 import { formattedValueToString, getValueFormat } from '@grafana/data';
 
 export const getYAxisFormattedValue = (
-	value: number,
+	value: string,
 	format: string,
 ): string => {
+	let numberValue: number = parseInt(value, 10);
+	let decimalPrecision: number | undefined;
+	try {
+		const decimalSplitted = value.split('.');
+		if (decimalSplitted.length === 1) {
+			decimalPrecision = 0;
+		} else {
+			const decimalDigits = decimalSplitted[1].split('');
+			decimalPrecision = decimalDigits.length;
+			let nonZeroCtr = 0;
+			for (let idx = 0; idx < decimalDigits.length; idx += 1) {
+				if (decimalDigits[idx] !== '0') {
+					nonZeroCtr += 1;
+					if (nonZeroCtr >= 2) {
+						decimalPrecision = idx + 1;
+						break;
+					}
+				}
+			}
+			numberValue = parseFloat(value);
+		}
+		return formattedValueToString(
+			getValueFormat(format)(numberValue, decimalPrecision, undefined, undefined),
+		);
+	} catch (error) {
+		console.error(error);
+	}
+	return `${numberValue}`;
+};
+
+export const getToolTipValue = (value: string, format: string): string => {
 	try {
 		return formattedValueToString(
-			getValueFormat(format)(value, 1, undefined, undefined),
+			getValueFormat(format)(parseFloat(value), undefined, undefined, undefined),
 		);
 	} catch (error) {
 		console.error(error);

frontend/src/lib/getChartData.ts

@@ -19,7 +19,7 @@ const getChartData = ({ queryData }: GetChartDataProps): ChartData => {
 				const [first = 0, second = ''] = e || [];
 				return {
 					first: new Date(parseInt(convertIntoEpoc(first * 1000), 10)), // converting in ms
-					second: Number(parseFloat(second).toFixed(2)),
+					second: Number(parseFloat(second)),
 				};
 			});