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.
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

View File

@ -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"

View File

@ -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"

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 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 (

View File

@ -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);
};

View File

@ -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);