From 0ea4d09bf84c3f5357e6bb646ce71b9c92319325 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Tue, 6 Dec 2022 20:16:42 +0530
Subject: [PATCH] UI : Remove Y-axis for percentage charts on data insight page
 (#9175)

* UI : Remove Y-axis for percentage charts on data insight page

* Revert KPI chart changes

* Refactor the util function.
---
 .../components/DataInsightDetail/DescriptionInsight.tsx  | 3 ---
 .../ui/src/components/DataInsightDetail/OwnerInsight.tsx | 2 --
 .../src/pages/DataInsightPage/DataInsightLeftPanel.tsx   | 4 ++--
 .../pages/DataInsightPage/DataInsightPage.component.tsx  | 9 ++++++---
 .../src/main/resources/ui/src/utils/DataInsightUtils.tsx | 4 ++++
 5 files changed, 12 insertions(+), 10 deletions(-)

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 8453fbfca65..55c12188623 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,7 +25,6 @@ import {
   ResponsiveContainer,
   Tooltip,
   XAxis,
-  YAxis,
 } from 'recharts';
 import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI';
 import {
@@ -114,8 +113,6 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
           <BarChart data={data} margin={BAR_CHART_MARGIN}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="timestamp" />
-
-            <YAxis />
             <Tooltip content={<CustomTooltip isPercentage />} />
             <Legend
               align="left"
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 d5b1b7c1c35..424ab715daa 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,7 +25,6 @@ import {
   ResponsiveContainer,
   Tooltip,
   XAxis,
-  YAxis,
 } from 'recharts';
 import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI';
 import {
@@ -111,7 +110,6 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
           <BarChart data={data} margin={BAR_CHART_MARGIN}>
             <CartesianGrid strokeDasharray="3 3" />
             <XAxis dataKey="timestamp" />
-            <YAxis />
             <Tooltip content={<CustomTooltip isPercentage />} />
             <Legend
               align="left"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx
index 1e1445cd2fa..681579ceeda 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx
@@ -19,8 +19,8 @@ import { ReactComponent as AppAnalyticsIcon } from '../../assets/svg/app-analyti
 import { ReactComponent as DataAssetsIcon } from '../../assets/svg/data-asset.svg';
 import { ReactComponent as KPIIcon } from '../../assets/svg/kpi.svg';
 import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard';
-import { ROUTES } from '../../constants/constants';
 import { DataInsightTabs } from '../../interface/data-insight.interface';
+import { getDataInsightPathWithFqn } from '../../utils/DataInsightUtils';
 
 const DataInsightLeftPanel = () => {
   const { tab } = useParams<{ tab: DataInsightTabs }>();
@@ -47,7 +47,7 @@ const DataInsightLeftPanel = () => {
   ];
 
   const handleMenuClick: MenuProps['onClick'] = (e) => {
-    history.push(`${ROUTES.DATA_INSIGHT}/${e.key}`);
+    history.push(getDataInsightPathWithFqn(e.key));
   };
 
   return (
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 8b2b048ad77..f984268b282 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
@@ -54,7 +54,10 @@ import {
   ChartFilter,
   DataInsightTabs,
 } from '../../interface/data-insight.interface';
-import { getTeamFilter } from '../../utils/DataInsightUtils';
+import {
+  getDataInsightPathWithFqn,
+  getTeamFilter,
+} from '../../utils/DataInsightUtils';
 import {
   getCurrentDateTimeMillis,
   getFormattedDateFromMilliSeconds,
@@ -136,9 +139,9 @@ const DataInsightPage = () => {
 
   const handleScrollToChart = (chartType: DataInsightChartType) => {
     if (ENTITIES_CHARTS.includes(chartType)) {
-      history.push(DataInsightTabs.DATA_ASSETS);
+      history.push(getDataInsightPathWithFqn(DataInsightTabs.DATA_ASSETS));
     } else {
-      history.push(DataInsightTabs.APP_ANALYTICS);
+      history.push(getDataInsightPathWithFqn(DataInsightTabs.APP_ANALYTICS));
     }
     setSelectedChart(chartType);
   };
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 ab065f47039..e156ea03368 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
@@ -28,6 +28,7 @@ import moment from 'moment';
 import React from 'react';
 import { ListItem, ListValues } from 'react-awesome-query-builder';
 import { LegendProps, Surface } from 'recharts';
+import { PLACEHOLDER_ROUTE_TAB, ROUTES } from '../constants/constants';
 import {
   ENTITIES_SUMMARY_LIST,
   KPI_DATE_PICKER_FORMAT,
@@ -519,3 +520,6 @@ export const getKpiResultFeedback = (day: number, isTargetMet: boolean) => {
     return t('label.day-left', { day: pluralize(day, 'day') });
   }
 };
+
+export const getDataInsightPathWithFqn = (fqn: string) =>
+  ROUTES.DATA_INSIGHT_WITH_TAB.replace(PLACEHOLDER_ROUTE_TAB, fqn);