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

UI : Add Empty data placeholder for data insight graph (#8919)

Browse Source 
* UI : Add Empty data placeholder for data insight charts

* Fix kpichart no data placeholder alignment
This commit is contained in:
Sachin Chaurasiya 2022-11-21 16:28:24 +05:30 committed by GitHub
parent cc8ce8a13b
commit c8166f2f4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 223 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DailyActiveUsersChart.tsx
View File

@ -39,6 +39,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -91,6 +92,7 @@ const DailyActiveUsersChart: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{dailyActiveUsers.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<LineChart
data={getFormattedActiveUsersData(dailyActiveUsers)}
@ -106,6 +108,9 @@ const DailyActiveUsersChart: FC<Props> = ({ chartFilter }) => {
/>
</LineChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -105,6 +106,7 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{data.length ? (
<ResponsiveContainer
debounce={1}
id="description-summary-graph"
@ -117,7 +119,9 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
<Tooltip content={<CustomTooltip isPercentage />} />
<Legend
align="left"
content={(props) => renderLegend(props as LegendProps, `${total}%`)}
content={(props) =>
renderLegend(props as LegendProps, `${total}%`)
}
layout="vertical"
verticalAlign="top"
wrapperStyle={{ left: '0px' }}
@ -133,6 +137,9 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

16
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/EmptyGraphPlaceholder.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Typography } from 'antd';
import React from 'react';
import { useTranslation } from 'react-i18next';
import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
export const EmptyGraphPlaceholder = () => {
const { t } = useTranslation();
return (
<ErrorPlaceHolder>
<Typography.Text type="secondary">
{t('label.no-data-available')}
</Typography.Text>
</ErrorPlaceHolder>
);
};

7
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/KPIChart.tsx
View File

@ -58,6 +58,7 @@ import {
import { CustomTooltip, getKpiGraphData } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
import KPILatestResults from './KPILatestResults';
interface Props {
@ -204,6 +205,8 @@ const KPIChart: FC<Props> = ({ chartFilter }) => {
}>
{kpiList.length ? (
<Row>
{graphData.length ? (
<>
{!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && (
<Col span={5}>
<KPILatestResults kpiLatestResultsRecord={kpiLatestResults} />
@ -232,6 +235,10 @@ const KPIChart: FC<Props> = ({ chartFilter }) => {
</LineChart>
</ResponsiveContainer>
</Col>
</>
) : (
<EmptyGraphPlaceholder />
)}
</Row>
) : (
<Space

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -105,6 +106,7 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{data.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
@ -113,7 +115,9 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
<Tooltip content={<CustomTooltip isPercentage />} />
<Legend
align="left"
content={(props) => renderLegend(props as LegendProps, `${total}%`)}
content={(props) =>
renderLegend(props as LegendProps, `${total}%`)
}
layout="vertical"
verticalAlign="top"
wrapperStyle={{ left: '0px' }}
@ -129,6 +133,9 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

9
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/PageViewsByEntitiesChart.tsx
View File

@ -44,6 +44,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -102,6 +103,7 @@ const PageViewsByEntitiesChart: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{data.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
@ -110,7 +112,9 @@ const PageViewsByEntitiesChart: FC<Props> = ({ chartFilter }) => {
<Tooltip content={<CustomTooltip />} />
<Legend
align="left"
content={(props) => renderLegend(props as LegendProps, `${total}`)}
content={(props) =>
renderLegend(props as LegendProps, `${total}`)
}
layout="vertical"
verticalAlign="top"
wrapperStyle={{ left: '0px' }}
@ -126,6 +130,9 @@ const PageViewsByEntitiesChart: FC<Props> = ({ chartFilter }) => {
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

9
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TierInsight.tsx
View File

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -101,6 +102,7 @@ const TierInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{data.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
@ -109,7 +111,9 @@ const TierInsight: FC<Props> = ({ chartFilter }) => {
<Tooltip content={<CustomTooltip />} />
<Legend
align="left"
content={(props) => renderLegend(props as LegendProps, `${total}`)}
content={(props) =>
renderLegend(props as LegendProps, `${total}`)
}
layout="vertical"
verticalAlign="top"
wrapperStyle={{ left: '0px' }}
@ -125,6 +129,9 @@ const TierInsight: FC<Props> = ({ chartFilter }) => {
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

9
openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/TotalEntityInsight.tsx
View File

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -104,6 +105,7 @@ const TotalEntityInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
{data.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<BarChart data={data} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
@ -112,7 +114,9 @@ const TotalEntityInsight: FC<Props> = ({ chartFilter }) => {
<Tooltip content={<CustomTooltip />} />
<Legend
align="left"
content={(props) => renderLegend(props as LegendProps, `${total}`)}
content={(props) =>
renderLegend(props as LegendProps, `${total}`)
}
layout="vertical"
verticalAlign="top"
wrapperStyle={{ left: '0px' }}
@ -128,6 +132,9 @@ const TotalEntityInsight: FC<Props> = ({ chartFilter }) => {
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};