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

* Minor: improve the UX of profiler graph tooltip * addressing comment
open-metadata · Sep 18, 2024 · ec6a662 · ec6a662
1 parent 4b0b22a
commit ec6a662
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 23 deletions.
diff --git a/...rces/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx b/...rces/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx
@@ -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 () => {

diff --git a/...resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx b/...resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
@@ -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) => (

diff --git a/...nents/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx b/...nents/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
@@ -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)
+                              }
+                            />
                           }
                         />
 

diff --git a/...components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx b/...components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx
@@ -58,7 +58,11 @@ const mockProps = {
     },
   ],
 };
-
+jest.mock('../../../../../utils/DataInsightUtils', () => {
+  return jest.fn().mockImplementation(() => {
+    return <div>CustomTooltip</div>;
+  });
+});
 jest.mock(
   '../../../../DataQuality/CustomMetricForm/CustomMetricForm.component',
   () => {

diff --git a/...data-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx b/...data-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx
@@ -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 () => {

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.tsx
@@ -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) => (

diff --git a/.../src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx b/.../src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx
@@ -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 () => {

diff --git a/...ta-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx b/...ta-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
@@ -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}

diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts b/openmetadata-ui/src/main/resources/ui/src/interface/data-insight.interface.ts
@@ -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;
 }
 

diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
@@ -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}`}>