diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx index bed20d17876..c0f94fc7751 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/AppRouter/AppRouter.tsx @@ -43,7 +43,7 @@ const AppRouter = () => { isApplicationLoading, isAuthenticating, } = useApplicationStore(); - const { plugins } = useApplicationsProvider(); + const { plugins = [] } = useApplicationsProvider(); useEffect(() => { const { pathname } = location; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.component.tsx index 53d1d12aeb6..b2949876270 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.component.tsx @@ -57,7 +57,9 @@ const ProfilerStateWrapper = ({ boxShadow: 'none', }}> - + {profilerLatestValueProps && ( + + )} {children} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.interface.ts index 0dec155592f..0eb82d9b802 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.interface.ts +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/ProfilerStateWrapper/ProfilerStateWrapper.interface.ts @@ -16,6 +16,6 @@ export interface ProfilerStateWrapperProps { isLoading: boolean; children: React.ReactNode; title: string; - profilerLatestValueProps: ProfilerLatestValueProps; + profilerLatestValueProps?: ProfilerLatestValueProps; dataTestId?: string; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/ColumnProfileTable/ColumnProfileTable.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/ColumnProfileTable/ColumnProfileTable.tsx index d1ba57bc068..25c20712495 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/ColumnProfileTable/ColumnProfileTable.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/ColumnProfileTable/ColumnProfileTable.tsx @@ -12,19 +12,8 @@ */ import { Grid, Stack, Typography, useTheme } from '@mui/material'; -import { Button, Col, Row } from 'antd'; import { ColumnsType } from 'antd/lib/table'; -import classNames from 'classnames'; -import { - filter, - find, - groupBy, - isEmpty, - isUndefined, - map, - round, - toLower, -} from 'lodash'; +import { isEmpty, round } from 'lodash'; import Qs from 'qs'; import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -38,10 +27,6 @@ import { Table as TableType, } from '../../../../../generated/entity/data/table'; import { Operation } from '../../../../../generated/entity/policies/policy'; -import { - TestCase, - TestCaseStatus, -} from '../../../../../generated/tests/testCase'; import { usePaging } from '../../../../../hooks/paging/usePaging'; import useCustomLocation from '../../../../../hooks/useCustomLocation/useCustomLocation'; import { useFqn } from '../../../../../hooks/useFqn'; @@ -49,26 +34,21 @@ import { getTableColumnsByFQN, searchTableColumnsByFQN, } from '../../../../../rest/tableAPI'; -import { getListTestCaseBySearch } from '../../../../../rest/testAPI'; import { formatNumberWithComma, getTableFQNFromColumnFQN, } from '../../../../../utils/CommonUtils'; import { getEntityName } from '../../../../../utils/EntityUtils'; import { - generateEntityLink, getTableExpandableConfig, pruneEmptyChildren, } from '../../../../../utils/TableUtils'; import ErrorPlaceHolder from '../../../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; import FilterTablePlaceHolder from '../../../../common/ErrorWithPlaceholder/FilterTablePlaceHolder'; import { PagingHandlerParams } from '../../../../common/NextPrevious/NextPrevious.interface'; -import { SummaryCard } from '../../../../common/SummaryCard/SummaryCard.component'; -import { SummaryCardProps } from '../../../../common/SummaryCard/SummaryCard.interface'; import SummaryCardV1 from '../../../../common/SummaryCard/SummaryCardV1'; import Table from '../../../../common/Table/Table'; import { TableProfilerTab } from '../../ProfilerDashboard/profilerDashboard.interface'; -import ColumnSummary from '../ColumnSummary'; import NoProfilerBanner from '../NoProfilerBanner/NoProfilerBanner.component'; import SingleColumnProfile from '../SingleColumnProfile'; import { ModifiedColumn } from '../TableProfiler.interface'; @@ -95,8 +75,6 @@ const ColumnProfileTable = () => { const isLoading = isTestsLoading || isProfilerDataLoading; const [searchText, setSearchText] = useState(''); const [data, setData] = useState([]); - const [isTestCaseLoading, setIsTestCaseLoading] = useState(false); - const [columnTestCases, setColumnTestCases] = useState([]); const [isColumnsLoading, setIsColumnsLoading] = useState(false); const { currentPage, @@ -138,14 +116,20 @@ const ColumnProfileTable = () => { fixed: 'left', render: (_, record) => { return ( - + ); }, sorter: (col1, col2) => col1.name.localeCompare(col2.name), @@ -157,7 +141,11 @@ const ColumnProfileTable = () => { width: 150, render: (dataTypeDisplay: string) => { return ( - + {dataTypeDisplay || 'N/A'} ); @@ -286,51 +274,11 @@ const ColumnProfileTable = () => { ]; }, [testCaseSummary]); - const selectedColumn = useMemo(() => { - return find( - data, - (column: Column) => column.fullyQualifiedName === activeColumnFqn - ); - }, [data, activeColumnFqn]); - - const selectedColumnTestsObj = useMemo(() => { - const temp = filter( - columnTestCases, - (test: TestCase) => !isUndefined(test.testCaseResult) - ); - - const statusDict = { - [TestCaseStatus.Success]: [], - [TestCaseStatus.Aborted]: [], - [TestCaseStatus.Failed]: [], - ...groupBy(temp, 'testCaseResult.testCaseStatus'), - }; - - return { statusDict, totalTests: temp.length }; - }, [columnTestCases]); - const handleSearchAction = (searchText: string) => { setSearchText(searchText); handlePageChange(1); }; - const fetchColumnTestCase = async (activeColumnFqn: string) => { - setIsTestCaseLoading(true); - try { - const { data } = await getListTestCaseBySearch({ - fields: TabSpecificField.TEST_CASE_RESULT, - entityLink: generateEntityLink(activeColumnFqn), - limit: PAGE_SIZE_LARGE, - }); - - setColumnTestCases(data); - } catch { - setColumnTestCases([]); - } finally { - setIsTestCaseLoading(false); - } - }; - const fetchTableColumnWithProfiler = useCallback( async (page: number, searchText: string) => { if (!tableFqn) { @@ -382,14 +330,6 @@ const ColumnProfileTable = () => { } }, [tableFqn, currentPage, searchText, pageSize]); - useEffect(() => { - if (activeColumnFqn) { - fetchColumnTestCase(activeColumnFqn); - } else { - setColumnTestCases([]); - } - }, [activeColumnFqn]); - const pagingProps = useMemo(() => { return { currentPage: currentPage, @@ -424,77 +364,43 @@ const ColumnProfileTable = () => { return ( {!isLoading && !isProfilingEnabled && } - - - {overallSummary?.map((summary) => ( - - - - ))} - - - {!isUndefined(selectedColumn) && ( - - - - )} - - - {!isEmpty(activeColumnFqn) && - map(selectedColumnTestsObj.statusDict, (data, key) => ( - - - - ))} - - - - + + {overallSummary?.map((summary) => ( + + + + ))} + + {isEmpty(activeColumnFqn) ? ( - - ()} - loading={isColumnsLoading || isLoading} - locale={{ - emptyText: , - }} - pagination={false} - rowKey="name" - scroll={{ x: true }} - searchProps={searchProps} - size="small" - /> - +
()} + loading={isColumnsLoading || isLoading} + locale={{ + emptyText: , + }} + pagination={false} + rowKey="name" + scroll={{ x: true }} + searchProps={searchProps} + size="small" + /> ) : ( - - - + )} ); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx index 9b7b26d55f7..b1e9db76db9 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/SingleColumnProfile.tsx @@ -10,9 +10,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { Card, Col, Row, Typography } from 'antd'; +import { Stack } from '@mui/material'; import { AxiosError } from 'axios'; -import { first, isString, last, pick } from 'lodash'; +import { find, first, isString, last, pick } from 'lodash'; import { DateRangeObject } from 'Models'; import { FC, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; @@ -20,7 +20,10 @@ import { DEFAULT_RANGE_DATA, INITIAL_COLUMN_METRICS_VALUE, } from '../../../../constants/profiler.constant'; -import { ColumnProfile } from '../../../../generated/entity/data/container'; +import { + Column, + ColumnProfile, +} from '../../../../generated/entity/data/container'; import { Table } from '../../../../generated/entity/data/table'; import { getColumnProfilerList } from '../../../../rest/tableAPI'; import { Transi18next } from '../../../../utils/CommonUtils'; @@ -35,6 +38,8 @@ import { showErrorToast } from '../../../../utils/ToastUtils'; import CardinalityDistributionChart from '../../../Visualisations/Chart/CardinalityDistributionChart.component'; import DataDistributionHistogram from '../../../Visualisations/Chart/DataDistributionHistogram.component'; import ProfilerDetailsCard from '../ProfilerDetailsCard/ProfilerDetailsCard'; +import ProfilerStateWrapper from '../ProfilerStateWrapper/ProfilerStateWrapper.component'; +import ColumnSummary from './ColumnSummary'; import CustomMetricGraphs from './CustomMetricGraphs/CustomMetricGraphs.component'; import { useTableProfiler } from './TableProfilerProvider'; @@ -63,6 +68,13 @@ const SingleColumnProfile: FC = ({ [] ); + const selectedColumn = useMemo(() => { + return find( + tableDetails?.columns ?? [], + (column: Column) => column.fullyQualifiedName === activeColumnFqn + ); + }, [tableDetails, activeColumnFqn]); + const customMetrics = useMemo( () => getColumnCustomMetric( @@ -151,115 +163,85 @@ const SingleColumnProfile: FC = ({ }, [activeColumnFqn, dateRangeObject]); return ( - - - - - - - - - - - - - - - - + spacing="30px"> + {selectedColumn && } + + + + + {firstDay?.histogram || currentDay?.histogram ? ( - - - - - - {t('label.data-distribution')} - - - - - - - - + + + ) : null} {firstDay?.cardinalityDistribution || currentDay?.cardinalityDistribution ? ( - - - - - - {t('label.cardinality')} - - - - - - - - + + + ) : null} - - - - + + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CardinalityDistributionChart.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CardinalityDistributionChart.component.tsx index c1aaf05023d..bcd2709bc34 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CardinalityDistributionChart.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/CardinalityDistributionChart.component.tsx @@ -11,8 +11,8 @@ * limitations under the License. */ -import { Card, Col, Row, Tag } from 'antd'; -import { isUndefined, map } from 'lodash'; +import { Box, Card, Divider, Typography, useTheme } from '@mui/material'; +import { isUndefined } from 'lodash'; import { useTranslation } from 'react-i18next'; import { Bar, @@ -30,6 +30,7 @@ import { GRAPH_BACKGROUND_COLOR } from '../../../constants/constants'; import { ColumnProfile } from '../../../generated/entity/data/table'; import { axisTickFormatter, tooltipFormatter } from '../../../utils/ChartUtils'; import { customFormatDateTime } from '../../../utils/date-time/DateTimeUtils'; +import { DataPill } from '../../common/DataPill/DataPill.styled'; import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; export interface CardinalityDistributionChartProps { @@ -44,6 +45,7 @@ const CardinalityDistributionChart = ({ data, noDataPlaceholderText, }: CardinalityDistributionChartProps) => { + const theme = useTheme(); const { t } = useTranslation(); const showSingleGraph = isUndefined(data.firstDayData?.cardinalityDistribution) || @@ -54,11 +56,16 @@ const CardinalityDistributionChart = ({ isUndefined(data.currentDayData?.cardinalityDistribution) ) { return ( - - - - - + + + ); } @@ -70,16 +77,60 @@ const CardinalityDistributionChart = ({ const data = payload[0].payload; return ( - -

{`${t('label.category')}: ${ - data.name - }`}

-

{`${t('label.count')}: ${tooltipFormatter( - data.count - )}`}

-

{`${t('label.percentage')}: ${ - data.percentage - }%`}

+ + + {data.name} + + + + ({ + color: theme.palette.allShades.gray[700], + fontSize: theme.typography.pxToRem(11), + })}> + {t('label.count')} + + ({ + color: theme.palette.allShades.gray[900], + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.pxToRem(11), + })}> + {tooltipFormatter(data.count)} + + + + ({ + color: theme.palette.allShades.gray[700], + fontSize: theme.typography.pxToRem(11), + })}> + {t('label.percentage')} + + ({ + color: theme.palette.allShades.gray[900], + fontWeight: theme.typography.fontWeightMedium, + fontSize: theme.typography.pxToRem(11), + })}> + {`${data.percentage}%`} + + ); } @@ -87,9 +138,19 @@ const CardinalityDistributionChart = ({ return null; }; + const dataEntries = Object.entries(data).filter( + ([, columnProfile]) => !isUndefined(columnProfile?.cardinalityDistribution) + ); + return ( - - {map(data, (columnProfile, key) => { + + {dataEntries.map(([key, columnProfile], index) => { if ( isUndefined(columnProfile) || isUndefined(columnProfile?.cardinalityDistribution) @@ -108,62 +169,96 @@ const CardinalityDistributionChart = ({ const graphDate = customFormatDateTime( columnProfile?.timestamp || 0, - 'MMM dd' + 'MMM dd, yyyy' ); return ( - - - - {graphDate} - - - {`${t('label.total-entity', { + + + {graphDate} + + {`${t('label.total-entity', { entity: t('label.category-plural'), - })}: ${cardinalityData.categories?.length || 0}`} - - - - - - axisTickFormatter(props, '%')} - type="number" - /> - - value?.length > 15 ? `${value.slice(0, 15)}...` : value - } - type="category" - width={120} - /> - - - - - - - - + })}: ${cardinalityData.categories?.length || 0}`} + + + + + + + axisTickFormatter(props, '%')} + tickLine={false} + type="number" + /> + + value?.length > 15 ? `${value.slice(0, 15)}...` : value + } + tickLine={false} + type="category" + width={120} + /> + + + + + + + ); })} - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/DataDistributionHistogram.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/DataDistributionHistogram.component.tsx index c1454ea48ee..6bfaa2cd879 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/DataDistributionHistogram.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Visualisations/Chart/DataDistributionHistogram.component.tsx @@ -11,8 +11,8 @@ * limitations under the License. */ -import { Col, Row, Tag } from 'antd'; -import { isUndefined, map } from 'lodash'; +import { Box, useTheme } from '@mui/material'; +import { isUndefined } from 'lodash'; import { useTranslation } from 'react-i18next'; import { Bar, @@ -29,7 +29,9 @@ import { GRAPH_BACKGROUND_COLOR } from '../../../constants/constants'; import { DEFAULT_HISTOGRAM_DATA } from '../../../constants/profiler.constant'; import { HistogramClass } from '../../../generated/entity/data/table'; import { axisTickFormatter, tooltipFormatter } from '../../../utils/ChartUtils'; +import { CustomDQTooltip } from '../../../utils/DataQuality/DataQualityUtils'; import { customFormatDateTime } from '../../../utils/date-time/DateTimeUtils'; +import { DataPill } from '../../common/DataPill/DataPill.styled'; import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder'; import { DataDistributionHistogramProps } from './Chart.interface'; @@ -37,7 +39,9 @@ const DataDistributionHistogram = ({ data, noDataPlaceholderText, }: DataDistributionHistogramProps) => { + const theme = useTheme(); const { t } = useTranslation(); + const showSingleGraph = isUndefined(data.firstDayData?.histogram) || isUndefined(data.currentDayData?.histogram); @@ -47,21 +51,32 @@ const DataDistributionHistogram = ({ isUndefined(data.currentDayData?.histogram) ) { return ( - - - - - + + + ); } - return ( - - {map(data, (columnProfile, key) => { - if (isUndefined(columnProfile?.histogram)) { - return; - } + const dataEntries = Object.entries(data).filter( + ([, columnProfile]) => !isUndefined(columnProfile?.histogram) + ); + return ( + + {dataEntries.map(([key, columnProfile], index) => { const histogramData = (columnProfile?.histogram as HistogramClass) || DEFAULT_HISTOGRAM_DATA; @@ -73,59 +88,105 @@ const DataDistributionHistogram = ({ const graphDate = customFormatDateTime( columnProfile?.timestamp || 0, - 'MMM dd' + 'MMM dd, yyyy' ); + const skewColorTheme = columnProfile?.nonParametricSkew + ? columnProfile?.nonParametricSkew > 0 + ? theme.palette.allShades.success + : theme.palette.allShades.error + : theme.palette.allShades.info; + return ( - - - - {graphDate} - - - {`${t('label.skew')}: ${ + + + {graphDate} + + {`${t('label.skew')}: ${ columnProfile?.nonParametricSkew || '--' - }`} - - - - - - - axisTickFormatter(props)} - /> - - - tooltipFormatter(value) - } - /> - - - - - - + }`} + + + + + + + + axisTickFormatter(props)} + tickLine={false} + /> + + tooltipFormatter(value)} + /> + } + cursor={{ + stroke: theme.palette.grey[200], + strokeDasharray: '3 3', + }} + /> + + + + + ); })} - + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DataPill/DataPill.styled.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DataPill/DataPill.styled.tsx new file mode 100644 index 00000000000..e9e563d3979 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DataPill/DataPill.styled.tsx @@ -0,0 +1,24 @@ +/* + * Copyright 2023 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 { Box, styled } from '@mui/material'; + +export const DataPill = styled(Box)(({ theme }) => ({ + backgroundColor: theme.palette.grey[100], + color: theme.palette.grey[900], + borderRadius: '6px', + padding: '6px 12px', + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightBold, + display: 'inline-block', +})); diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/Color.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/Color.constants.ts index 3240ade7866..59fd029b888 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/Color.constants.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/Color.constants.ts @@ -34,7 +34,7 @@ export const BLUE_2 = '#3ca2f4'; export const BLUE_500 = '#2E90FA'; export const BLUE_800 = '#1849A9'; export const BLUE_50 = '#EFF8FF'; -export const CHART_BLUE_1 = '#1890FF'; +export const CHART_BLUE_1 = '#4689FF'; export const RIPTIDE = '#76E9C6'; export const MY_SIN = '#FEB019'; export const SAN_MARINO = '#416BB3'; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts index 76dcfbf8da4..bbaacaff834 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/profiler.constant.ts @@ -123,28 +123,28 @@ export const INITIAL_COUNT_METRIC_VALUE = { entity: t('label.distinct'), }), dataKey: 'distinctCount', - color: '#1890FF', + color: '#467DDC', }, { title: t('label.entity-count', { entity: t('label.null'), }), dataKey: 'nullCount', - color: '#7147E8', + color: '#3488B5', }, { title: t('label.entity-count', { entity: t('label.unique'), }), dataKey: 'uniqueCount', - color: '#008376', + color: '#685997', }, { title: t('label.entity-count', { entity: t('label.value-plural'), }), dataKey: 'valuesCount', - color: '#B02AAC', + color: '#464A52', }, ], data: [], @@ -157,21 +157,21 @@ export const INITIAL_PROPORTION_METRIC_VALUE = { entity: t('label.distinct'), }), dataKey: 'distinctProportion', - color: '#1890FF', + color: '#6B97E3', }, { title: t('label.entity-proportion', { entity: t('label.null'), }), dataKey: 'nullProportion', - color: '#7147E8', + color: '#867AAC', }, { title: t('label.entity-proportion', { entity: t('label.unique'), }), dataKey: 'uniqueProportion', - color: '#008376', + color: '#6B6E75', }, ], data: [], @@ -182,17 +182,17 @@ export const INITIAL_MATH_METRIC_VALUE = { { title: t('label.max'), dataKey: 'max', - color: '#1890FF', + color: '#6B97E3', }, { title: t('label.mean'), dataKey: 'mean', - color: '#7147E8', + color: '#6B6E75', }, { title: t('label.min'), dataKey: 'min', - color: '#008376', + color: '#867AAC', }, ], data: [], @@ -203,7 +203,8 @@ export const INITIAL_SUM_METRIC_VALUE = { { title: t('label.sum'), dataKey: 'sum', - color: '#1890FF', + color: BLUE_500, + fill: BLUE_50, }, ], data: [], @@ -213,22 +214,22 @@ export const INITIAL_QUARTILE_METRIC_VALUE = { { title: t('label.first-quartile'), dataKey: 'firstQuartile', - color: '#1890FF', + color: '#467DDC', }, { title: t('label.median'), dataKey: 'median', - color: '#7147E8', + color: '#3488B5', }, { title: t('label.inter-quartile-range'), dataKey: 'interQuartileRange', - color: '#008376', + color: '#685997', }, { title: t('label.third-quartile'), dataKey: 'thirdQuartile', - color: '#B02AAC', + color: '#464A52', }, ], data: [], 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 30c3c61c31f..b9d42f1df1b 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,6 +41,7 @@ export interface ChartFilter { export interface DataInsightChartTooltipProps extends TooltipProps { cardStyles?: React.CSSProperties; customValueKey?: string; + displayDateInHeader?: boolean; dateTimeFormatter?: (date?: number, format?: string) => string; isPercentage?: boolean; isTier?: boolean; diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/DataQualityUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/DataQualityUtils.tsx index c76193c5c4c..4f10d92e1a5 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/DataQualityUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataQuality/DataQualityUtils.tsx @@ -369,11 +369,15 @@ export const CustomDQTooltip = (props: DataInsightChartTooltipProps) => { timeStampKey = 'timestampValue', transformLabel = true, valueFormatter, + displayDateInHeader = true, } = props; if (active && payload && payload.length) { // we need to check if the xAxis is a date or not. - const timestamp = dateTimeFormatter(payload[0].payload[timeStampKey] || 0); + const timestamp = displayDateInHeader + ? dateTimeFormatter(payload[0].payload[timeStampKey] || 0) + : payload[0].payload[timeStampKey]; + const payloadValue = uniqBy(payload, 'dataKey'); return (