yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-29 19:35:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Remove Y-axis for percentage charts on data insight page (#9175)

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

* Revert KPI chart changes

* Refactor the util function.
This commit is contained in:
Sachin Chaurasiya 2022-12-06 20:16:42 +05:30 committed by GitHub
parent d84df61d65
commit 0ea4d09bf8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DescriptionInsight.tsx
View File

@ -25,7 +25,6 @@ import {
ResponsiveContainer, ResponsiveContainer,
Tooltip, Tooltip,
XAxis, XAxis,
YAxis,
} from 'recharts'; } from 'recharts';
import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI'; import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI';
import { import {
@ -114,8 +113,6 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
<BarChart data={data} margin={BAR_CHART_MARGIN}> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" /> <XAxis dataKey="timestamp" />
<YAxis />
<Tooltip content={<CustomTooltip isPercentage />} /> <Tooltip content={<CustomTooltip isPercentage />} />
<Legend <Legend
align="left" align="left"

2
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/OwnerInsight.tsx
View File

@ -25,7 +25,6 @@ import {
ResponsiveContainer, ResponsiveContainer,
Tooltip, Tooltip,
XAxis, XAxis,
YAxis,
} from 'recharts'; } from 'recharts';
import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI'; import { getAggregateChartData } from '../../axiosAPIs/DataInsightAPI';
import { import {
@ -111,7 +110,6 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
<BarChart data={data} margin={BAR_CHART_MARGIN}> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" /> <XAxis dataKey="timestamp" />
<YAxis />
<Tooltip content={<CustomTooltip isPercentage />} /> <Tooltip content={<CustomTooltip isPercentage />} />
<Legend <Legend
align="left" align="left"

4
openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightLeftPanel.tsx
View File

@ -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 DataAssetsIcon } from '../../assets/svg/data-asset.svg';
import { ReactComponent as KPIIcon } from '../../assets/svg/kpi.svg'; import { ReactComponent as KPIIcon } from '../../assets/svg/kpi.svg';
import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard'; import LeftPanelCard from '../../components/common/LeftPanelCard/LeftPanelCard';
import { ROUTES } from '../../constants/constants';
import { DataInsightTabs } from '../../interface/data-insight.interface'; import { DataInsightTabs } from '../../interface/data-insight.interface';
import { getDataInsightPathWithFqn } from '../../utils/DataInsightUtils';
const DataInsightLeftPanel = () => { const DataInsightLeftPanel = () => {
const { tab } = useParams<{ tab: DataInsightTabs }>(); const { tab } = useParams<{ tab: DataInsightTabs }>();
@ -47,7 +47,7 @@ const DataInsightLeftPanel = () => {
]; ];
const handleMenuClick: MenuProps['onClick'] = (e) => { const handleMenuClick: MenuProps['onClick'] = (e) => {
history.push(`${ROUTES.DATA_INSIGHT}/${e.key}`); history.push(getDataInsightPathWithFqn(e.key));
}; };
return ( return (

9
openmetadata-ui/src/main/resources/ui/src/pages/DataInsightPage/DataInsightPage.component.tsx
View File

@ -54,7 +54,10 @@ import {
ChartFilter, ChartFilter,
DataInsightTabs, DataInsightTabs,
} from '../../interface/data-insight.interface'; } from '../../interface/data-insight.interface';
import { getTeamFilter } from '../../utils/DataInsightUtils'; import {
getDataInsightPathWithFqn,
getTeamFilter,
} from '../../utils/DataInsightUtils';
import { import {
getCurrentDateTimeMillis, getCurrentDateTimeMillis,
getFormattedDateFromMilliSeconds, getFormattedDateFromMilliSeconds,
@ -136,9 +139,9 @@ const DataInsightPage = () => {
const handleScrollToChart = (chartType: DataInsightChartType) => { const handleScrollToChart = (chartType: DataInsightChartType) => {
if (ENTITIES_CHARTS.includes(chartType)) { if (ENTITIES_CHARTS.includes(chartType)) {
history.push(DataInsightTabs.DATA_ASSETS); history.push(getDataInsightPathWithFqn(DataInsightTabs.DATA_ASSETS));
} else { } else {
history.push(DataInsightTabs.APP_ANALYTICS); history.push(getDataInsightPathWithFqn(DataInsightTabs.APP_ANALYTICS));
} }
setSelectedChart(chartType); setSelectedChart(chartType);
}; };

4
openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
View File

@ -28,6 +28,7 @@ import moment from 'moment';
import React from 'react'; import React from 'react';
import { ListItem, ListValues } from 'react-awesome-query-builder'; import { ListItem, ListValues } from 'react-awesome-query-builder';
import { LegendProps, Surface } from 'recharts'; import { LegendProps, Surface } from 'recharts';
import { PLACEHOLDER_ROUTE_TAB, ROUTES } from '../constants/constants';
import { import {
ENTITIES_SUMMARY_LIST, ENTITIES_SUMMARY_LIST,
KPI_DATE_PICKER_FORMAT, KPI_DATE_PICKER_FORMAT,
@ -519,3 +520,6 @@ export const getKpiResultFeedback = (day: number, isTargetMet: boolean) => {
return t('label.day-left', { day: pluralize(day, 'day') }); return t('label.day-left', { day: pluralize(day, 'day') });
} }
}; };
export const getDataInsightPathWithFqn = (fqn: string) =>
ROUTES.DATA_INSIGHT_WITH_TAB.replace(PLACEHOLDER_ROUTE_TAB, fqn);