diff --git a/frontend/src/components/Graph/index.tsx b/frontend/src/components/Graph/index.tsx index 0bd22962f6..2194387dd4 100644 --- a/frontend/src/components/Graph/index.tsx +++ b/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); }, }, }, diff --git a/frontend/src/components/Graph/yAxisConfig.ts b/frontend/src/components/Graph/yAxisConfig.ts index 2a0c4766a1..0bb6cc9f64 100644 --- a/frontend/src/components/Graph/yAxisConfig.ts +++ b/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); diff --git a/frontend/src/lib/getChartData.ts b/frontend/src/lib/getChartData.ts index bdc73eb707..81b1c11d94 100644 --- a/frontend/src/lib/getChartData.ts +++ b/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)), }; });