yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-02 03:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Minor: improve the UX of profiler graph tooltip (#17892)

Browse Source 
* Minor: improve the UX of profiler graph tooltip

* addressing comment
This commit is contained in:
Shailesh Parmar 2024-09-18 18:58:06 +05:30 committed by GitHub
parent 4b0b22af2a
commit ec6a662202
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 75 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx
View File

@ -32,6 +32,11 @@ jest.mock('../../../common/ErrorWithPlaceholder/ErrorPlaceHolder', () => {
return <div>ErrorPlaceHolder</div>;
});
});
jest.mock('../../../../utils/DataInsightUtils', () => {
return jest.fn().mockImplementation(() => {
return <div>CustomTooltip</div>;
});
});
describe('ProfilerDetailsCard Test', () => {
it('Component should render', async () => {

12
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
View File

@ -30,6 +30,8 @@ import {
tooltipFormatter,
updateActiveChartFilter,
} from '../../../../utils/ChartUtils';
import { CustomTooltip } from '../../../../utils/DataInsightUtils';
import { formatDateTime } from '../../../../utils/date-time/DateTimeUtils';
import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import { ProfilerDetailsCardProps } from '../ProfilerDashboard/profilerDashboard.interface';
import ProfilerLatestValue from '../ProfilerLatestValue/ProfilerLatestValue';
@ -94,8 +96,14 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
type={showYAxisCategory ? 'category' : 'number'}
/>
<Tooltip
formatter={(value: number | string) =>
tooltipFormatter(value, tickFormatter)
content={
<CustomTooltip
dateTimeFormatter={formatDateTime}
timeStampKey="timestamp"
valueFormatter={(value) =>
tooltipFormatter(value, tickFormatter)
}
/>
}
/>
{information.map((info) => (

17
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
View File

@ -48,7 +48,11 @@ import {
axisTickFormatter,
tooltipFormatter,
} from '../../../../../utils/ChartUtils';
import { getRandomHexColor } from '../../../../../utils/DataInsightUtils';
import {
CustomTooltip,
getRandomHexColor,
} from '../../../../../utils/DataInsightUtils';
import { formatDateTime } from '../../../../../utils/date-time/DateTimeUtils';
import {
showErrorToast,
showSuccessToast,
@ -260,9 +264,16 @@ const CustomMetricGraphs = ({
tickFormatter={(props) => axisTickFormatter(props)}
type="number"
/>
<Tooltip
formatter={(value: number | string) =>
tooltipFormatter(value)
content={
<CustomTooltip
dateTimeFormatter={formatDateTime}
timeStampKey="timestamp"
valueFormatter={(value) =>
tooltipFormatter(value)
}
/>
}
/>

6
openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx
View File

@ -58,7 +58,11 @@ const mockProps = {
},
],
};
jest.mock('../../../../../utils/DataInsightUtils', () => {
return jest.fn().mockImplementation(() => {
return <div>CustomTooltip</div>;
});
});
jest.mock(
'../../../../DataQuality/CustomMetricForm/CustomMetricForm.component',
() => {

5
openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx
View File

@ -36,6 +36,11 @@ const mockCustomBarChartProp: CustomBarChartProps = {
},
name: 'testChart',
};
jest.mock('../../../utils/DataInsightUtils', () => {
return jest.fn().mockImplementation(() => {
return <div>CustomTooltip</div>;
});
});
describe('CustomBarChart component test', () => {
it('Component should render', async () => {

10
openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.tsx
View File

@ -30,6 +30,8 @@ import {
tooltipFormatter,
updateActiveChartFilter,
} from '../../../utils/ChartUtils';
import { CustomTooltip } from '../../../utils/DataInsightUtils';
import { formatDateTime } from '../../../utils/date-time/DateTimeUtils';
import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import { CustomBarChartProps } from './Chart.interface';
@ -77,8 +79,12 @@ const CustomBarChart = ({
tickFormatter={(props) => axisTickFormatter(props, tickFormatter)}
/>
<Tooltip
formatter={(value: number | string) =>
tooltipFormatter(value, tickFormatter)
content={
<CustomTooltip
dateTimeFormatter={formatDateTime}
timeStampKey="timestamp"
valueFormatter={(value) => tooltipFormatter(value, tickFormatter)}
/>
}
/>
{information.map((info) => (

5
openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx
View File

@ -36,6 +36,11 @@ const mockCustomBarChartProp: CustomBarChartProps = {
},
name: 'testChart',
};
jest.mock('../../../utils/DataInsightUtils', () => {
return jest.fn().mockImplementation(() => {
return <div>CustomTooltip</div>;
});
});
describe('OperationDateBarChart component test', () => {
it('Component should render', async () => {

28
openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
View File

@ -22,12 +22,15 @@ import {
ResponsiveContainer,
Scatter,
Tooltip,
TooltipProps,
XAxis,
} from 'recharts';
import { GRAPH_BACKGROUND_COLOR } from '../../../constants/constants';
import { updateActiveChartFilter } from '../../../utils/ChartUtils';
import { formatNumberWithComma } from '../../../utils/CommonUtils';
import {
tooltipFormatter,
updateActiveChartFilter,
} from '../../../utils/ChartUtils';
import { CustomTooltip } from '../../../utils/DataInsightUtils';
import { formatDateTime } from '../../../utils/date-time/DateTimeUtils';
import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
import { CustomBarChartProps } from './Chart.interface';
@ -38,14 +41,6 @@ const OperationDateBarChart = ({
const { data, information } = chartCollection;
const [activeKeys, setActiveKeys] = useState<string[]>([]);
const tooltipFormatter: TooltipProps<number | string, string>['formatter'] = (
_value,
_label,
data
) => {
return formatNumberWithComma(data.payload.data);
};
const handleClick: LegendProps['onClick'] = (event) => {
setActiveKeys((prevActiveKeys) =>
updateActiveChartFilter(event.dataKey, prevActiveKeys)
@ -75,7 +70,16 @@ const OperationDateBarChart = ({
tick={{ fontSize: 12 }}
/>
<CartesianGrid stroke={GRAPH_BACKGROUND_COLOR} />
<Tooltip formatter={tooltipFormatter} />
<Tooltip
content={
<CustomTooltip
dateTimeFormatter={formatDateTime}
timeStampKey="timestamp"
valueFormatter={(value) => tooltipFormatter(value)}
/>
}
/>
{information.map((info) => (
<Bar
barSize={1}

3
openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts
View File

@ -41,7 +41,8 @@ export interface ChartFilter {
export interface DataInsightChartTooltipProps extends TooltipProps<any, any> {
isPercentage?: boolean;
isTier?: boolean;
valueFormatter?: (value: number | string, key?: string) => string;
dateTimeFormatter?: (date?: number) => string;
valueFormatter?: (value: number | string, key?: string) => string | number;
timeStampKey?: string;
}

7
openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
View File

@ -26,6 +26,7 @@ import {
startCase,
sumBy,
toNumber,
uniqBy,
} from 'lodash';
import moment from 'moment';
import React from 'react';
@ -144,19 +145,21 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
active,
payload = [],
valueFormatter,
dateTimeFormatter = formatDate,
isPercentage,
timeStampKey = 'timestampValue',
} = props;
if (active && payload && payload.length) {
const timestamp = formatDate(payload[0].payload[timeStampKey] || 0);
const timestamp = dateTimeFormatter(payload[0].payload[timeStampKey] || 0);
const payloadValue = uniqBy(payload, 'dataKey');
return (
<Card
className="custom-data-insight-tooltip"
title={<Typography.Title level={5}>{timestamp}</Typography.Title>}>
<ul className="custom-data-insight-tooltip-container">
{payload.map((entry, index) => (
{payloadValue.map((entry, index) => (
<li
className="d-flex items-center justify-between gap-6 p-b-xss text-sm"
key={`item-${index}`}>