fix #19686: Table Update Sys Metric shows wrong value (#19786)

(cherry picked from commit 5a5d03615aae19132d7f5f66fe2a8d3afeada602)

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

@@ -73,6 +73,7 @@ const OperationDateBarChart = ({
         <Tooltip
           content={
             <CustomTooltip
+              customValueKey="data"
               dateTimeFormatter={formatDateTime}
               timeStampKey="timestamp"
               valueFormatter={(value) => tooltipFormatter(value)}

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

@@ -45,6 +45,7 @@ export interface DataInsightChartTooltipProps extends TooltipProps<any, any> {
   valueFormatter?: (value: number | string, key?: string) => string | number;
   timeStampKey?: string;
   transformLabel?: boolean;
+  customValueKey?: string;
 }
 
 export interface UIKpiResult extends KpiResult {

openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.test.tsx

@@ -0,0 +1,64 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { render } from '@testing-library/react';
+import React from 'react';
+import { DataInsightChartTooltipProps } from '../interface/data-insight.interface';
+import { CustomTooltip } from './DataInsightUtils';
+
+describe('CustomTooltip', () => {
+  const defaultProps: DataInsightChartTooltipProps = {
+    active: true,
+    payload: [
+      {
+        color: '#ff0000',
+        name: 'Test Data',
+        value: 100,
+        payload: { timestampValue: 1620000000000, 'Test Data': 100, data: 120 },
+        dataKey: 'Test Data',
+      },
+    ],
+    valueFormatter: jest.fn((value) => `${value} units`),
+    dateTimeFormatter: jest.fn((timestamp) =>
+      new Date(timestamp || 0).toLocaleString()
+    ),
+    isPercentage: false,
+    timeStampKey: 'timestampValue',
+    transformLabel: true,
+  };
+
+  it('renders correctly when active', () => {
+    const { getByText } = render(<CustomTooltip {...defaultProps} />);
+
+    // Check if the timestamp is rendered
+    expect(getByText(/Test Data/i)).toBeInTheDocument();
+    expect(getByText(/100 units/i)).toBeInTheDocument();
+  });
+
+  it('renders correctly when customValueKey is provided', () => {
+    const { getByText } = render(
+      <CustomTooltip {...{ ...defaultProps, customValueKey: 'data' }} />
+    );
+
+    // Check if the timestamp is rendered
+    expect(getByText(/Test Data/i)).toBeInTheDocument();
+    expect(getByText(/120 units/i)).toBeInTheDocument();
+  });
+
+  it('returns null when not active', () => {
+    const { container } = render(
+      <CustomTooltip {...{ ...defaultProps, active: false }} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+});

openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx

@@ -150,6 +150,7 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
     isPercentage,
     timeStampKey = 'timestampValue',
     transformLabel = true,
+    customValueKey,
   } = props;
 
   if (active && payload && payload.length) {
@@ -165,25 +166,35 @@ export const CustomTooltip = (props: DataInsightChartTooltipProps) => {
         className="custom-data-insight-tooltip"
         title={<Typography.Title level={5}>{timestamp}</Typography.Title>}>
         <ul className="custom-data-insight-tooltip-container">
-          {payloadValue.map((entry, index) => (
-            <li
-              className="d-flex items-center justify-between gap-6 p-b-xss text-sm"
-              key={`item-${index}`}>
-              <span className="flex items-center text-grey-muted">
-                <Surface className="mr-2" height={12} version="1.1" width={12}>
-                  <rect fill={entry.color} height="14" rx="2" width="14" />
-                </Surface>
-                {transformLabel
-                  ? startCase(entry.name ?? (entry.dataKey as string))
-                  : entry.name ?? (entry.dataKey as string)}
-              </span>
-              <span className="font-medium">
-                {valueFormatter
-                  ? valueFormatter(entry.value, entry.name ?? entry.dataKey)
-                  : getEntryFormattedValue(entry.value, isPercentage)}
-              </span>
-            </li>
-          ))}
+          {payloadValue.map((entry, index) => {
+            const value = customValueKey
+              ? entry.payload[customValueKey]
+              : entry.value;
+
+            return (
+              <li
+                className="d-flex items-center justify-between gap-6 p-b-xss text-sm"
+                key={`item-${index}`}>
+                <span className="flex items-center text-grey-muted">
+                  <Surface
+                    className="mr-2"
+                    height={12}
+                    version="1.1"
+                    width={12}>
+                    <rect fill={entry.color} height="14" rx="2" width="14" />
+                  </Surface>
+                  {transformLabel
+                    ? startCase(entry.name ?? (entry.dataKey as string))
+                    : entry.name ?? (entry.dataKey as string)}
+                </span>
+                <span className="font-medium">
+                  {valueFormatter
+                    ? valueFormatter(value, entry.name ?? entry.dataKey)
+                    : getEntryFormattedValue(value, isPercentage)}
+                </span>
+              </li>
+            );
+          })}
         </ul>
       </Card>
     );