From 7330cac2a033e084ba9f9ff6e16e7b8488116b49 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Tue, 17 Sep 2024 21:01:02 +0530
Subject: [PATCH 1/2] Minor: improve the UX of profiler graph tooltip

---
 .../ProfilerDetailsCard.test.tsx              |  5 ++++
 .../ProfilerDetailsCard.tsx                   | 11 ++++++--
 .../CustomMetricGraphs.component.tsx          | 16 ++++++++---
 .../CustomMetricGraphs.test.tsx               |  6 ++++-
 .../Chart/CustomBarChart.test.tsx             |  5 ++++
 .../Visualisations/Chart/CustomBarChart.tsx   |  9 +++++--
 .../Chart/OperationDateBarChart.test.tsx      |  5 ++++
 .../Chart/OperationDateBarChart.tsx           | 27 ++++++++++---------
 .../src/interface/data-insight.interface.ts   |  3 ++-
 .../ui/src/utils/DataInsightUtils.tsx         | 15 ++++++++---
 10 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx
index 353c67691649..a2b5b026c6c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.test.tsx
+++ b/openmetadata-ui/src/main/resources/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/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
index fe74073d802d..7edcaf8a94a8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
@@ -30,6 +30,7 @@ import {
   tooltipFormatter,
   updateActiveChartFilter,
 } from '../../../../utils/ChartUtils';
+import { CustomTooltip } from '../../../../utils/DataInsightUtils';
 import ErrorPlaceHolder from '../../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { ProfilerDetailsCardProps } from '../ProfilerDashboard/profilerDashboard.interface';
 import ProfilerLatestValue from '../ProfilerLatestValue/ProfilerLatestValue';
@@ -94,8 +95,14 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
                   type={showYAxisCategory ? 'category' : 'number'}
                 />
                 <Tooltip
-                  formatter={(value: number | string) =>
-                    tooltipFormatter(value, tickFormatter)
+                  content={
+                    <CustomTooltip
+                      showFullTimestamp
+                      timeStampKey="timestamp"
+                      valueFormatter={(value) =>
+                        tooltipFormatter(value, tickFormatter)
+                      }
+                    />
                   }
                 />
                 {information.map((info) => (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
index 840a7ee18253..862d77fa1f97 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
@@ -48,7 +48,10 @@ import {
   axisTickFormatter,
   tooltipFormatter,
 } from '../../../../../utils/ChartUtils';
-import { getRandomHexColor } from '../../../../../utils/DataInsightUtils';
+import {
+  CustomTooltip,
+  getRandomHexColor,
+} from '../../../../../utils/DataInsightUtils';
 import {
   showErrorToast,
   showSuccessToast,
@@ -260,9 +263,16 @@ const CustomMetricGraphs = ({
                           tickFormatter={(props) => axisTickFormatter(props)}
                           type="number"
                         />
+
                         <Tooltip
-                          formatter={(value: number | string) =>
-                            tooltipFormatter(value)
+                          content={
+                            <CustomTooltip
+                              showFullTimestamp
+                              timeStampKey="timestamp"
+                              valueFormatter={(value) =>
+                                tooltipFormatter(value)
+                              }
+                            />
                           }
                         />
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx
index d379db61c3a0..76ecb0ddd3c7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/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/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx
index e07eec408db4..97e44ecdbec5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CustomBarChart.test.tsx
+++ b/openmetadata-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
index eb592098187a..440b8565d738 100644
--- 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,7 @@ import {
   tooltipFormatter,
   updateActiveChartFilter,
 } from '../../../utils/ChartUtils';
+import { CustomTooltip } from '../../../utils/DataInsightUtils';
 import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { CustomBarChartProps } from './Chart.interface';
 
@@ -77,8 +78,12 @@ const CustomBarChart = ({
           tickFormatter={(props) => axisTickFormatter(props, tickFormatter)}
         />
         <Tooltip
-          formatter={(value: number | string) =>
-            tooltipFormatter(value, tickFormatter)
+          content={
+            <CustomTooltip
+              showFullTimestamp
+              timeStampKey="timestamp"
+              valueFormatter={(value) => tooltipFormatter(value, tickFormatter)}
+            />
           }
         />
         {information.map((info) => (
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx
index 476aafff290e..3ecd6d95e706 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.test.tsx
+++ b/openmetadata-ui/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/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
index c9f461a40731..9139b2f6061f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
@@ -22,12 +22,14 @@ 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 ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
 import { CustomBarChartProps } from './Chart.interface';
 
@@ -38,14 +40,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 +69,16 @@ const OperationDateBarChart = ({
           tick={{ fontSize: 12 }}
         />
         <CartesianGrid stroke={GRAPH_BACKGROUND_COLOR} />
-        <Tooltip formatter={tooltipFormatter} />
+        <Tooltip
+          content={
+            <CustomTooltip
+              showFullTimestamp
+              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
index 08317f217ba3..47fe80399289 100644
--- 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;
+  showFullTimestamp?: boolean;
+  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
index 3092a5beb31c..939234af5977 100644
--- 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';
@@ -69,7 +70,11 @@ import {
 } from '../rest/DataInsightAPI';
 import { axisTickFormatter } from './ChartUtils';
 import { pluralize } from './CommonUtils';
-import { customFormatDateTime, formatDate } from './date-time/DateTimeUtils';
+import {
+  customFormatDateTime,
+  formatDate,
+  formatDateTime,
+} from './date-time/DateTimeUtils';
 
 export const renderLegend = (
   legendData: LegendProps,
@@ -144,19 +149,23 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
     active,
     payload = [],
     valueFormatter,
+    showFullTimestamp = false,
     isPercentage,
     timeStampKey = 'timestampValue',
   } = props;
 
   if (active && payload && payload.length) {
-    const timestamp = formatDate(payload[0].payload[timeStampKey] || 0);
+    const timestamp = showFullTimestamp
+      ? formatDateTime(payload[0].payload[timeStampKey] || 0)
+      : formatDate(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}`}>

From 38f2476ad7b28ce2dc296935e2f0ca87a53eb944 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Wed, 18 Sep 2024 13:14:32 +0530
Subject: [PATCH 2/2] addressing comment

---
 .../ProfilerDetailsCard/ProfilerDetailsCard.tsx      |  3 ++-
 .../CustomMetricGraphs.component.tsx                 |  3 ++-
 .../Visualisations/Chart/CustomBarChart.tsx          |  3 ++-
 .../Visualisations/Chart/OperationDateBarChart.tsx   |  3 ++-
 .../ui/src/interface/data-insight.interface.ts       |  2 +-
 .../main/resources/ui/src/utils/DataInsightUtils.tsx | 12 +++---------
 6 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
index 7edcaf8a94a8..d6c0d28db477 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerDetailsCard/ProfilerDetailsCard.tsx
@@ -31,6 +31,7 @@ import {
   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';
@@ -97,7 +98,7 @@ const ProfilerDetailsCard: React.FC<ProfilerDetailsCardProps> = ({
                 <Tooltip
                   content={
                     <CustomTooltip
-                      showFullTimestamp
+                      dateTimeFormatter={formatDateTime}
                       timeStampKey="timestamp"
                       valueFormatter={(value) =>
                         tooltipFormatter(value, tickFormatter)
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
index 862d77fa1f97..2b910041ad29 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/CustomMetricGraphs/CustomMetricGraphs.component.tsx
@@ -52,6 +52,7 @@ import {
   CustomTooltip,
   getRandomHexColor,
 } from '../../../../../utils/DataInsightUtils';
+import { formatDateTime } from '../../../../../utils/date-time/DateTimeUtils';
 import {
   showErrorToast,
   showSuccessToast,
@@ -267,7 +268,7 @@ const CustomMetricGraphs = ({
                         <Tooltip
                           content={
                             <CustomTooltip
-                              showFullTimestamp
+                              dateTimeFormatter={formatDateTime}
                               timeStampKey="timestamp"
                               valueFormatter={(value) =>
                                 tooltipFormatter(value)
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
index 440b8565d738..158a46fbb4e5 100644
--- 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
@@ -31,6 +31,7 @@ import {
   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';
 
@@ -80,7 +81,7 @@ const CustomBarChart = ({
         <Tooltip
           content={
             <CustomTooltip
-              showFullTimestamp
+              dateTimeFormatter={formatDateTime}
               timeStampKey="timestamp"
               valueFormatter={(value) => tooltipFormatter(value, tickFormatter)}
             />
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
index 9139b2f6061f..2d055e16816e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/OperationDateBarChart.tsx
@@ -30,6 +30,7 @@ import {
   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';
 
@@ -72,7 +73,7 @@ const OperationDateBarChart = ({
         <Tooltip
           content={
             <CustomTooltip
-              showFullTimestamp
+              dateTimeFormatter={formatDateTime}
               timeStampKey="timestamp"
               valueFormatter={(value) => tooltipFormatter(value)}
             />
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
index 47fe80399289..55425e3adc7d 100644
--- 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,7 @@ export interface ChartFilter {
 export interface DataInsightChartTooltipProps extends TooltipProps<any, any> {
   isPercentage?: boolean;
   isTier?: boolean;
-  showFullTimestamp?: boolean;
+  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
index 939234af5977..3e2cc420dbbd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
@@ -70,11 +70,7 @@ import {
 } from '../rest/DataInsightAPI';
 import { axisTickFormatter } from './ChartUtils';
 import { pluralize } from './CommonUtils';
-import {
-  customFormatDateTime,
-  formatDate,
-  formatDateTime,
-} from './date-time/DateTimeUtils';
+import { customFormatDateTime, formatDate } from './date-time/DateTimeUtils';
 
 export const renderLegend = (
   legendData: LegendProps,
@@ -149,15 +145,13 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
     active,
     payload = [],
     valueFormatter,
-    showFullTimestamp = false,
+    dateTimeFormatter = formatDate,
     isPercentage,
     timeStampKey = 'timestampValue',
   } = props;
 
   if (active && payload && payload.length) {
-    const timestamp = showFullTimestamp
-      ? formatDateTime(payload[0].payload[timeStampKey] || 0)
-      : formatDate(payload[0].payload[timeStampKey] || 0);
+    const timestamp = dateTimeFormatter(payload[0].payload[timeStampKey] || 0);
     const payloadValue = uniqBy(payload, 'dataKey');
 
     return (