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 2d055e16816..da3d27d2be1 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 @@ -73,6 +73,7 @@ const OperationDateBarChart = ({ 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 c77d4c1c573..2ea47213f04 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 @@ -45,6 +45,7 @@ export interface DataInsightChartTooltipProps extends TooltipProps { valueFormatter?: (value: number | string, key?: string) => string | number; timeStampKey?: string; transformLabel?: boolean; + customValueKey?: string; } export interface UIKpiResult extends KpiResult { diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.test.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.test.tsx new file mode 100644 index 00000000000..e0d1cb83ac9 --- /dev/null +++ b/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(); + + // 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( + + ); + + // 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( + + ); + + expect(container.firstChild).toBeNull(); + }); +}); 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 7d0dca2fc50..7a319a67997 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx +++ b/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={{timestamp}}>
    - {payloadValue.map((entry, index) => ( -
  • - - - - - {transformLabel - ? startCase(entry.name ?? (entry.dataKey as string)) - : entry.name ?? (entry.dataKey as string)} - - - {valueFormatter - ? valueFormatter(entry.value, entry.name ?? entry.dataKey) - : getEntryFormattedValue(entry.value, isPercentage)} - -
  • - ))} + {payloadValue.map((entry, index) => { + const value = customValueKey + ? entry.payload[customValueKey] + : entry.value; + + return ( +
  • + + + + + {transformLabel + ? startCase(entry.name ?? (entry.dataKey as string)) + : entry.name ?? (entry.dataKey as string)} + + + {valueFormatter + ? valueFormatter(value, entry.name ?? entry.dataKey) + : getEntryFormattedValue(value, isPercentage)} + +
  • + ); + })}
);