From 01f3e3f914746d90d56f9c496747e1f9faa4f36e Mon Sep 17 00:00:00 2001 From: Shailesh Parmar Date: Fri, 16 Dec 2022 20:48:28 +0530 Subject: [PATCH] UI: DataInsight feedback part 4 (#9345) * UI: Data insight feedback part 4 * layout fix added data assets type field in top view entities table * Fixed Unit test and added localization --- .../DataInsightProgressBar.tsx | 86 +++++++++++++++++++ .../DataInsightSummary.test.tsx | 16 ++-- .../DataInsightDetail/DataInsightSummary.tsx | 17 ++-- .../DescriptionInsight.test.tsx | 5 +- .../DataInsightDetail/DescriptionInsight.tsx | 30 ++++++- .../components/DataInsightDetail/KPIChart.tsx | 27 +----- .../DataInsightDetail/KPILatestResults.tsx | 22 +++-- .../DataInsightDetail/OwnerInsight.tsx | 30 ++++++- .../DataInsightDetail/TierInsight.tsx | 8 +- .../DataInsightDetail/TopViewEntities.tsx | 8 ++ .../ui/src/locale/languages/en-us.json | 3 +- .../pages/DataInsightPage/DataInsight.less | 38 ++++++++ .../DataInsightPage.component.tsx | 39 ++++++++- .../ui/src/utils/DataInsightUtils.tsx | 27 +++--- 14 files changed, 283 insertions(+), 73 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightProgressBar.tsx diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightProgressBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightProgressBar.tsx new file mode 100644 index 00000000000..9b22ff984de --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightProgressBar.tsx @@ -0,0 +1,86 @@ +/* + * Copyright 2022 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 { Progress, Typography } from 'antd'; +import classNames from 'classnames'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import SVGIcons, { Icons } from '../../utils/SvgUtils'; + +interface DataInsightProgressBarProps { + width?: number; + progress: number; + className?: string; + showLabel?: boolean; + showSuccessInfo?: boolean; + label?: string; + target?: number; + successValue?: number | string; + startValue?: number | string; + suffix?: string; +} + +const DataInsightProgressBar = ({ + width, + progress, + className, + target, + startValue, + label, + suffix = '%', + successValue = 100, + showLabel = true, + showSuccessInfo = false, +}: DataInsightProgressBarProps) => { + const { t } = useTranslation(); + + return ( +
+ {showLabel && ( + + {label ?? t('label.latest')} + + )} +
+ ( + <> + + {startValue ?? per} + {suffix} + + {target && ( + + )} + + {successValue} + {suffix} + + + )} + percent={progress} + strokeColor="#B3D4F4" + /> + {showSuccessInfo && progress >= 100 && ( + + )} +
+
+ ); +}; + +export default DataInsightProgressBar; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx index 0358d3519c5..7dd32bb7ffe 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.test.tsx @@ -15,7 +15,6 @@ import { render, screen } from '@testing-library/react'; import React from 'react'; import { MemoryRouter } from 'react-router-dom'; import { act } from 'react-test-renderer'; -import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult'; import { DataInsightTabs } from '../../interface/data-insight.interface'; import DataInsightSummary from './DataInsightSummary'; @@ -55,12 +54,7 @@ describe('Test DataInsightSummary Component', () => { const summaryCard = screen.getByTestId('summary-card'); - const totalEntitiesByType = screen.getByTestId( - `summary-item-${DataInsightChartType.TotalEntitiesByType}` - ); - expect(summaryCard).toBeInTheDocument(); - expect(totalEntitiesByType).toBeInTheDocument(); }); it('Should render only the data assets summary', async () => { @@ -74,9 +68,11 @@ describe('Test DataInsightSummary Component', () => { ); }); - const dataAssetSummary = await screen.findByTestId('data-assets-summary'); + const dataAssetSummary = await screen.findAllByTestId( + 'data-assets-summary' + ); - expect(dataAssetSummary).toBeInTheDocument(); + expect(dataAssetSummary).toHaveLength(4); // should not render the app analytics summary expect(screen.queryByTestId('app-analytics-summary')).toBeNull(); @@ -95,11 +91,11 @@ describe('Test DataInsightSummary Component', () => { ); }); - const appAnalyticsSummary = await screen.findByTestId( + const appAnalyticsSummary = await screen.findAllByTestId( 'app-analytics-summary' ); - expect(appAnalyticsSummary).toBeInTheDocument(); + expect(appAnalyticsSummary).toHaveLength(2); // should not render the data assets summary expect(screen.queryByTestId('data-assets-summary')).toBeNull(); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx index 3b87b98845f..0a4e0f8d6cd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightSummary.tsx @@ -174,12 +174,12 @@ const DataInsightSummary: FC = ({ chartFilter, onScrollToChart }) => { }> {tab === DataInsightTabs.DATA_ASSETS && ( -
+ <> {/* summary of entity charts */} {entitiesSummaryList.map((summary) => ( onScrollToChart(summary.id)}> @@ -188,19 +188,22 @@ const DataInsightSummary: FC = ({ chartFilter, onScrollToChart }) => { {summary.latest} - {summary.id.startsWith('Percentage') ? '%' : ''} + {summary.id.startsWith('Percentage') || + summary.id.includes(DataInsightChartType.TotalEntitiesByTier) + ? '%' + : ''} ))} -
+ )} {tab === DataInsightTabs.APP_ANALYTICS && ( -
+ <> {/* summary for web charts */} {webSummaryList.map((summary) => ( onScrollToChart(summary.id)}> @@ -237,7 +240,7 @@ const DataInsightSummary: FC = ({ chartFilter, onScrollToChart }) => { )} -
+ )} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx index d5652c77c85..70f336307d0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.test.tsx @@ -62,7 +62,10 @@ describe('Test DescriptionInsight Component', () => { it('Should render the graph', async () => { await act(async () => { const { container } = render( - + ); const card = screen.getByTestId('entity-description-percentage-card'); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx index e2fdc06a762..9a40c65e339 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx @@ -25,6 +25,7 @@ import { ResponsiveContainer, Tooltip, XAxis, + YAxis, } from 'recharts'; import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI'; import { @@ -41,8 +42,12 @@ import { DataInsightChartResult, DataInsightChartType, } from '../../generated/dataInsight/dataInsightChartResult'; +import { Kpi } from '../../generated/dataInsight/kpi/kpi'; import { ChartFilter } from '../../interface/data-insight.interface'; -import { updateActiveChartFilter } from '../../utils/ChartUtils'; +import { + axisTickFormatter, + updateActiveChartFilter, +} from '../../utils/ChartUtils'; import { CustomTooltip, getGraphDataByEntityType, @@ -50,13 +55,15 @@ import { } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import './DataInsightDetail.less'; +import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; interface Props { chartFilter: ChartFilter; + kpi: Kpi | undefined; } -const DescriptionInsight: FC = ({ chartFilter }) => { +const DescriptionInsight: FC = ({ chartFilter, kpi }) => { const [totalEntitiesDescriptionByType, setTotalEntitiesDescriptionByType] = useState(); @@ -73,6 +80,14 @@ const DescriptionInsight: FC = ({ chartFilter }) => { const { t } = useTranslation(); + const targetValue = useMemo(() => { + if (kpi?.targetDefinition) { + return Number(kpi.targetDefinition[0].value) * 100; + } + + return undefined; + }, [kpi]); + const fetchTotalEntitiesDescriptionByType = async () => { setIsLoading(true); try { @@ -125,6 +140,12 @@ const DescriptionInsight: FC = ({ chartFilter }) => { }> + {data.length ? ( = ({ chartFilter }) => { + axisTickFormatter(value, '%')} + /> } /> - renderLegend(props as LegendProps, `${total}%`, activeKeys) + renderLegend(props as LegendProps, total, activeKeys, false) } layout="vertical" verticalAlign="top" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx index e873a54bbcd..5c717d5c39e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx @@ -34,11 +34,7 @@ import { XAxis, YAxis, } from 'recharts'; -import { - getLatestKpiResult, - getListKpiResult, - getListKPIs, -} from '../../axiosAPIs/KpiAPI'; +import { getLatestKpiResult, getListKpiResult } from '../../axiosAPIs/KpiAPI'; import { GRAPH_BACKGROUND_COLOR, ROUTES } from '../../constants/constants'; import { BAR_CHART_MARGIN, @@ -63,13 +59,14 @@ import KPILatestResults from './KPILatestResults'; interface Props { chartFilter: ChartFilter; + kpiList: Array; } -const KPIChart: FC = ({ chartFilter }) => { +const KPIChart: FC = ({ chartFilter, kpiList }) => { const { isAdminUser } = useAuth(); const { t } = useTranslation(); const history = useHistory(); - const [kpiList, setKpiList] = useState>([]); + const [kpiResults, setKpiResults] = useState([]); const [kpiLatestResults, setKpiLatestResults] = useState>(); @@ -77,18 +74,6 @@ const KPIChart: FC = ({ chartFilter }) => { const handleAddKpi = () => history.push(ROUTES.ADD_KPI); - const fetchKpiList = async () => { - try { - setIsLoading(true); - const response = await getListKPIs(); - setKpiList(response.data); - } catch (_err) { - setKpiList([]); - } finally { - setIsLoading(false); - } - }; - const fetchKpiResults = async () => { setIsLoading(true); try { @@ -167,10 +152,6 @@ const KPIChart: FC = ({ chartFilter }) => { return { ...getKpiGraphData(kpiResults, kpiList), kpiTooltipRecord }; }, [kpiResults, kpiList]); - useEffect(() => { - fetchKpiList(); - }, []); - useEffect(() => { setKpiResults([]); setKpiLatestResults(undefined); diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResults.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResults.tsx index ebfd442f955..1d3188b8d72 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResults.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPILatestResults.tsx @@ -1,4 +1,4 @@ -import { Progress, Space, Typography } from 'antd'; +import { Space, Typography } from 'antd'; import { toNumber, uniqueId } from 'lodash'; import React, { FC, useMemo } from 'react'; @@ -6,6 +6,7 @@ import { KpiTargetType } from '../../generated/api/dataInsight/kpi/createKpiRequ import { UIKpiResult } from '../../interface/data-insight.interface'; import { getKpiResultFeedback } from '../../utils/DataInsightUtils'; import { getNumberOfDaysForTimestamp } from '../../utils/TimeUtils'; +import DataInsightProgressBar from './DataInsightProgressBar'; interface Props { kpiLatestResultsRecord: Record; @@ -49,15 +50,18 @@ const KPILatestResults: FC = ({ kpiLatestResultsRecord }) => { {resultData.displayName ?? name} - - {`${ - isPercentage ? targetPercentValue : targetValue - }${suffix}`} - {`${ + + - - + } + suffix={suffix} + /> + {getKpiResultFeedback(daysLeft, Boolean(isTargetMet))} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx index 2fcfe1e5159..028c8185c15 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx @@ -25,6 +25,7 @@ import { ResponsiveContainer, Tooltip, XAxis, + YAxis, } from 'recharts'; import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI'; import { @@ -41,8 +42,12 @@ import { DataInsightChartResult, DataInsightChartType, } from '../../generated/dataInsight/dataInsightChartResult'; +import { Kpi } from '../../generated/dataInsight/kpi/kpi'; import { ChartFilter } from '../../interface/data-insight.interface'; -import { updateActiveChartFilter } from '../../utils/ChartUtils'; +import { + axisTickFormatter, + updateActiveChartFilter, +} from '../../utils/ChartUtils'; import { CustomTooltip, getGraphDataByEntityType, @@ -50,13 +55,15 @@ import { } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import './DataInsightDetail.less'; +import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; interface Props { chartFilter: ChartFilter; + kpi: Kpi | undefined; } -const OwnerInsight: FC = ({ chartFilter }) => { +const OwnerInsight: FC = ({ chartFilter, kpi }) => { const [totalEntitiesOwnerByType, setTotalEntitiesOwnerByType] = useState(); @@ -71,6 +78,14 @@ const OwnerInsight: FC = ({ chartFilter }) => { ); }, [totalEntitiesOwnerByType]); + const targetValue = useMemo(() => { + if (kpi?.targetDefinition) { + return Number(kpi.targetDefinition[0].value) * 100; + } + + return undefined; + }, [kpi]); + const { t } = useTranslation(); const fetchTotalEntitiesOwnerByType = async () => { @@ -124,16 +139,25 @@ const OwnerInsight: FC = ({ chartFilter }) => { }> + {data.length ? ( + axisTickFormatter(value, '%')} + /> } /> - renderLegend(props as LegendProps, `${total}%`, activeKeys) + renderLegend(props as LegendProps, total, activeKeys, true) } layout="vertical" verticalAlign="top" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx index 415bee5e4d0..5313fd2c859 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx @@ -51,6 +51,7 @@ import { } from '../../utils/DataInsightUtils'; import { showErrorToast } from '../../utils/ToastUtils'; import './DataInsightDetail.less'; +import DataInsightProgressBar from './DataInsightProgressBar'; import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder'; interface Props { @@ -121,6 +122,11 @@ const TierInsight: FC = ({ chartFilter }) => { }> + {data.length ? ( @@ -131,7 +137,7 @@ const TierInsight: FC = ({ chartFilter }) => { - renderLegend(props as LegendProps, `${total}%`, activeKeys) + renderLegend(props as LegendProps, total, activeKeys, false) } layout="vertical" verticalAlign="top" diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx index 26efe928137..8ef4e9ebb88 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TopViewEntities.tsx @@ -74,6 +74,14 @@ const TopViewEntities: FC = ({ chartFilter }) => { return {getDecodedFqn(entityFqn)}; }, }, + { + title: t('label.data-asset-type'), + dataIndex: 'entityType', + key: 'entityType', + render: (entityType: string) => ( + {entityType} + ), + }, { title: t('label.owner'), dataIndex: 'owner', diff --git a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json index dcfd5a446bf..800ba38c4b1 100644 --- a/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json +++ b/openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json @@ -550,7 +550,8 @@ "dbt-Configuration-source": "DBT Configuration Source", "select-dbt-source": "Select DBT Source", "no-selected-dbt": "No source selected for DBT Configuration.", - "dbt": "DBT" + "dbt": "DBT", + "latest": "Latest" }, "message": { "service-email-required": "Service account Email is required", diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less index 55d17555362..9657cb13826 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsight.less @@ -80,3 +80,41 @@ .side-panel-icons { color: @icon-color; } + +.data-insight-progress-bar { + .ant-progress-bg, + .ant-progress-success-bg { + // library has given height directly via style attribute , so to override need to provide !important + height: 30px !important; + } + .ant-progress-outer { + margin-right: 0; + padding-right: 0; + } + .ant-progress-inner, + .ant-progress-bg, + .ant-progress-success-bg { + border-radius: 4px; + } + .ant-progress-text { + display: flex; + margin: 0; + position: absolute; + width: 100%; + justify-content: space-between; + align-items: center; + height: 100%; + top: 0px; + right: 2px; + left: 2px; + padding: 0 16px 0 8px; + font-size: 12px; + } + .data-insight-kpi-target { + height: 100%; + position: absolute; + left: 0; + border-right: 2px solid #1890ff; + border-radius: 4px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx index 557a8aa6599..6a0ff2f65a0 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx @@ -23,8 +23,9 @@ import { Typography, } from 'antd'; import { t } from 'i18next'; -import React, { useEffect, useLayoutEffect, useState } from 'react'; +import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'; import { useHistory, useParams } from 'react-router-dom'; +import { getListKPIs } from '../../axiosAPIs/KpiAPI'; import { searchQuery } from '../../axiosAPIs/searchAPI'; import PageLayoutV1 from '../../components/containers/PageLayoutV1'; import DailyActiveUsersChart from '../../components/DataInsightDetail/DailyActiveUsersChart'; @@ -49,6 +50,7 @@ import { import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; import { SearchIndex } from '../../enums/search.enum'; import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult'; +import { Kpi } from '../../generated/dataInsight/kpi/kpi'; import { useAuth } from '../../hooks/authHooks'; import { ChartFilter, @@ -79,9 +81,25 @@ const DataInsightPage = () => { const [activeTab, setActiveTab] = useState(DataInsightTabs.DATA_ASSETS); const [chartFilter, setChartFilter] = useState(INITIAL_CHART_FILTER); + const [kpiList, setKpiList] = useState>([]); const [selectedChart, setSelectedChart] = useState(); + const { descriptionKpi, ownerKpi } = useMemo(() => { + return { + descriptionKpi: kpiList.find( + (kpi) => + kpi.dataInsightChart.name === + DataInsightChartType.PercentageOfEntitiesWithDescriptionByType + ), + ownerKpi: kpiList.find( + (kpi) => + kpi.dataInsightChart.name === + DataInsightChartType.PercentageOfEntitiesWithOwnerByType + ), + }; + }, [kpiList]); + const handleTierChange = (tiers: string[] = []) => { setChartFilter((previous) => ({ ...previous, @@ -137,6 +155,15 @@ const DataInsightPage = () => { } }; + const fetchKpiList = async () => { + try { + const response = await getListKPIs({ fields: 'dataInsightChart' }); + setKpiList(response.data); + } catch (_err) { + setKpiList([]); + } + }; + const handleScrollToChart = (chartType: DataInsightChartType) => { if (ENTITIES_CHARTS.includes(chartType)) { history.push(getDataInsightPathWithFqn(DataInsightTabs.DATA_ASSETS)); @@ -162,6 +189,7 @@ const DataInsightPage = () => { useEffect(() => { fetchDefaultTeamOptions(); + fetchKpiList(); }, []); useEffect(() => { @@ -260,7 +288,7 @@ const DataInsightPage = () => { {/* Do not show KPIChart for app analytics */} {tab !== DataInsightTabs.APP_ANALYTICS && ( - + )} {activeTab === DataInsightTabs.DATA_ASSETS && ( @@ -269,10 +297,13 @@ const DataInsightPage = () => { - + - + 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 adf43d325cc..38a8faeac3c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx @@ -62,21 +62,26 @@ const checkIsPercentageGraph = (dataInsightChartType: DataInsightChartType) => export const renderLegend = ( legendData: LegendProps, - latest: string, - activeKeys = [] as string[] + latest: string | number, + activeKeys = [] as string[], + showLatestValue = true ) => { const { payload = [] } = legendData; return ( <> - - Latest - - - {latest} - + {showLatestValue && ( + <> + + Latest + + + {latest} + + + )}
    {payload.map((entry, index) => { const isActive = @@ -399,7 +404,7 @@ export const getGraphDataByTierType = (rawData: TotalEntitiesByTier[]) => { return { timestamp: timestamp, - [tiering]: (data?.entityCountFraction || 0) * 100, + [tiering]: ((data?.entityCountFraction || 0) * 100).toFixed(2), }; }