fixed issue test result graph not displaying full axis values #10704 (#10715)

* fixed issue test result graph not displaying full axis values #10704

* added additional test case for digitFormatter function
This commit is contained in:
Shailesh Parmar 2023-03-25 10:43:39 +05:30 committed by GitHub
parent ea8e1fda46
commit 5bbac9185c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 39 additions and 8 deletions

View File

@ -267,7 +267,9 @@ const KPIChart: FC<Props> = ({ chartFilter, kpiList }) => {
)}
</>
) : (
<EmptyGraphPlaceholder />
<Col className="justify-center" span={24}>
<EmptyGraphPlaceholder />
</Col>
)}
</Row>
) : (

View File

@ -69,7 +69,7 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
<LineChart
className="tw-w-full"
data={data}
margin={{ left: 24 }}>
margin={{ left: 16 }}>
<CartesianGrid stroke={GRAPH_BACKGROUND_COLOR} />
<XAxis
dataKey="name"

View File

@ -11,10 +11,10 @@
* limitations under the License.
*/
import { isString, toString } from 'lodash';
import { isString } from 'lodash';
import React from 'react';
import { LegendProps } from 'recharts';
import { getStatisticsDisplayValue } from './CommonUtils';
import { digitFormatter, getStatisticsDisplayValue } from './CommonUtils';
export const tooltipFormatter = (
value: string | number,
@ -39,9 +39,7 @@ export const renderColorfulLegendText: LegendProps['formatter'] = (
) => <span style={{ color: entry?.color }}>{value}</span>;
export const axisTickFormatter = (value: number, tickFormatter?: string) => {
return tickFormatter
? `${value}${tickFormatter}`
: toString(getStatisticsDisplayValue(value));
return tickFormatter ? `${value}${tickFormatter}` : digitFormatter(value);
};
export const updateActiveChartFilter = (

View File

@ -25,7 +25,11 @@ import {
} from './CommonUtils.mock';
import { cloneDeep } from 'lodash';
import { getNameFromFQN, sortTagsCaseInsensitive } from './CommonUtils';
import {
digitFormatter,
getNameFromFQN,
sortTagsCaseInsensitive,
} from './CommonUtils';
import { mockFQN, mockTags, sortedMockTags } from './CommonUtils.mock';
describe('Tests for CommonUtils', () => {
@ -88,5 +92,24 @@ describe('Tests for CommonUtils', () => {
expect(containsDoubleQuotes > 0).toBe(false);
});
// digitFormatter test
it('digitFormatter formatter should format number 1000 to 1k', () => {
const values = [
{ value: 1000, result: '1K' },
{ value: 10000, result: '10K' },
{ value: 10200, result: '10.2K' },
{ value: 1000000, result: '1M' },
{ value: 100000000, result: '100M' },
{ value: 1000000000, result: '1B' },
{ value: 1500000000, result: '1.5B' },
{ value: 1000000000000, result: '1T' },
{ value: 1100000000000, result: '1.1T' },
];
values.map(({ value, result }) => {
expect(digitFormatter(value)).toEqual(result);
});
});
});
});

View File

@ -664,6 +664,14 @@ export const formTwoDigitNmber = (number: number) => {
});
};
export const digitFormatter = (value: number) => {
// convert 1000 to 1k
return Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: 1,
}).format(value);
};
export const getTeamsUser = (
data?: ExtraInfo
): Record<string, string | undefined> | undefined => {