mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2026-01-06 04:26:57 +00:00
* fixed issue test result graph not displaying full axis values #10704 * added additional test case for digitFormatter function
This commit is contained in:
parent
ea8e1fda46
commit
5bbac9185c
@ -267,7 +267,9 @@ const KPIChart: FC<Props> = ({ chartFilter, kpiList }) => {
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<EmptyGraphPlaceholder />
|
||||
<Col className="justify-center" span={24}>
|
||||
<EmptyGraphPlaceholder />
|
||||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
) : (
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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 = (
|
||||
|
||||
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -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 => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user