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

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

@ -39,6 +39,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -91,21 +92,25 @@ const DailyActiveUsersChart: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer debounce={1} minHeight={400}> {dailyActiveUsers.length ? (
<LineChart <ResponsiveContainer debounce={1} minHeight={400}>
data={getFormattedActiveUsersData(dailyActiveUsers)} <LineChart
margin={BAR_CHART_MARGIN}> data={getFormattedActiveUsersData(dailyActiveUsers)}
<CartesianGrid strokeDasharray="3 3" /> margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<YAxis /> <XAxis dataKey="timestamp" />
<Tooltip content={<CustomTooltip />} /> <YAxis />
<Line <Tooltip content={<CustomTooltip />} />
dataKey="activeUsers" <Line
stroke={DATA_INSIGHT_GRAPH_COLORS[3]} dataKey="activeUsers"
type="monotone" stroke={DATA_INSIGHT_GRAPH_COLORS[3]}
/> type="monotone"
</LineChart> />
</ResponsiveContainer> </LineChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </Card>
); );
}; };

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -105,34 +106,40 @@ const DescriptionInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer {data.length ? (
debounce={1} <ResponsiveContainer
id="description-summary-graph" debounce={1}
minHeight={400}> id="description-summary-graph"
<BarChart data={data} margin={BAR_CHART_MARGIN}> minHeight={400}>
<CartesianGrid strokeDasharray="3 3" /> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" />
<YAxis /> <YAxis />
<Tooltip content={<CustomTooltip isPercentage />} /> <Tooltip content={<CustomTooltip isPercentage />} />
<Legend <Legend
align="left" align="left"
content={(props) => renderLegend(props as LegendProps, `${total}%`)} content={(props) =>
layout="vertical" renderLegend(props as LegendProps, `${total}%`)
verticalAlign="top" }
wrapperStyle={{ left: '0px' }} layout="vertical"
/> verticalAlign="top"
{entities.map((entity) => ( wrapperStyle={{ left: '0px' }}
<Bar
barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="description"
/> />
))} {entities.map((entity) => (
</BarChart> <Bar
</ResponsiveContainer> barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="description"
/>
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </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>
);
};

61
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 { CustomTooltip, getKpiGraphData } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
import KPILatestResults from './KPILatestResults'; import KPILatestResults from './KPILatestResults';
interface Props { interface Props {
@ -204,34 +205,40 @@ const KPIChart: FC<Props> = ({ chartFilter }) => {
}> }>
{kpiList.length ? ( {kpiList.length ? (
<Row> <Row>
{!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && ( {graphData.length ? (
<Col span={5}> <>
<KPILatestResults kpiLatestResultsRecord={kpiLatestResults} /> {!isUndefined(kpiLatestResults) && !isEmpty(kpiLatestResults) && (
</Col> <Col span={5}>
)} <KPILatestResults kpiLatestResultsRecord={kpiLatestResults} />
</Col>
)}
<Col span={19}> <Col span={19}>
<ResponsiveContainer debounce={1} minHeight={400}> <ResponsiveContainer debounce={1} minHeight={400}>
<LineChart data={graphData} margin={BAR_CHART_MARGIN}> <LineChart data={graphData} margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" /> <XAxis dataKey="timestamp" />
<YAxis /> <YAxis />
<Tooltip <Tooltip
content={ content={
<CustomTooltip kpiTooltipRecord={kpiTooltipRecord} /> <CustomTooltip kpiTooltipRecord={kpiTooltipRecord} />
} }
/> />
{kpis.map((kpi, i) => ( {kpis.map((kpi, i) => (
<Line <Line
dataKey={kpi} dataKey={kpi}
key={i} key={i}
stroke={DATA_INSIGHT_GRAPH_COLORS[i]} stroke={DATA_INSIGHT_GRAPH_COLORS[i]}
type="monotone" type="monotone"
/> />
))} ))}
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
</Col> </Col>
</>
) : (
<EmptyGraphPlaceholder />
)}
</Row> </Row>
) : ( ) : (
<Space <Space

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -105,30 +106,36 @@ const OwnerInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer debounce={1} minHeight={400}> {data.length ? (
<BarChart data={data} margin={BAR_CHART_MARGIN}> <ResponsiveContainer debounce={1} minHeight={400}>
<CartesianGrid strokeDasharray="3 3" /> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<YAxis /> <XAxis dataKey="timestamp" />
<Tooltip content={<CustomTooltip isPercentage />} /> <YAxis />
<Legend <Tooltip content={<CustomTooltip isPercentage />} />
align="left" <Legend
content={(props) => renderLegend(props as LegendProps, `${total}%`)} align="left"
layout="vertical" content={(props) =>
verticalAlign="top" renderLegend(props as LegendProps, `${total}%`)
wrapperStyle={{ left: '0px' }} }
/> layout="vertical"
{entities.map((entity) => ( verticalAlign="top"
<Bar wrapperStyle={{ left: '0px' }}
barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="owner"
/> />
))} {entities.map((entity) => (
</BarChart> <Bar
</ResponsiveContainer> barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="owner"
/>
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </Card>
); );
}; };

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

@ -44,6 +44,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -102,30 +103,36 @@ const PageViewsByEntitiesChart: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer debounce={1} minHeight={400}> {data.length ? (
<BarChart data={data} margin={BAR_CHART_MARGIN}> <ResponsiveContainer debounce={1} minHeight={400}>
<CartesianGrid strokeDasharray="3 3" /> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<YAxis /> <XAxis dataKey="timestamp" />
<Tooltip content={<CustomTooltip />} /> <YAxis />
<Legend <Tooltip content={<CustomTooltip />} />
align="left" <Legend
content={(props) => renderLegend(props as LegendProps, `${total}`)} align="left"
layout="vertical" content={(props) =>
verticalAlign="top" renderLegend(props as LegendProps, `${total}`)
wrapperStyle={{ left: '0px' }} }
/> layout="vertical"
{entities.map((entity) => ( verticalAlign="top"
<Bar wrapperStyle={{ left: '0px' }}
barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="entityCount"
/> />
))} {entities.map((entity) => (
</BarChart> <Bar
</ResponsiveContainer> barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="entityCount"
/>
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </Card>
); );
}; };

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -101,30 +102,36 @@ const TierInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer debounce={1} minHeight={400}> {data.length ? (
<BarChart data={data} margin={BAR_CHART_MARGIN}> <ResponsiveContainer debounce={1} minHeight={400}>
<CartesianGrid strokeDasharray="3 3" /> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<YAxis /> <XAxis dataKey="timestamp" />
<Tooltip content={<CustomTooltip />} /> <YAxis />
<Legend <Tooltip content={<CustomTooltip />} />
align="left" <Legend
content={(props) => renderLegend(props as LegendProps, `${total}`)} align="left"
layout="vertical" content={(props) =>
verticalAlign="top" renderLegend(props as LegendProps, `${total}`)
wrapperStyle={{ left: '0px' }} }
/> layout="vertical"
{tiers.map((tier) => ( verticalAlign="top"
<Bar wrapperStyle={{ left: '0px' }}
barSize={BAR_SIZE}
dataKey={tier}
fill={TIER_BAR_COLOR_MAP[tier]}
key={uniqueId()}
stackId="tier"
/> />
))} {tiers.map((tier) => (
</BarChart> <Bar
</ResponsiveContainer> barSize={BAR_SIZE}
dataKey={tier}
fill={TIER_BAR_COLOR_MAP[tier]}
key={uniqueId()}
stackId="tier"
/>
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </Card>
); );
}; };

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

@ -46,6 +46,7 @@ import {
} from '../../utils/DataInsightUtils'; } from '../../utils/DataInsightUtils';
import { showErrorToast } from '../../utils/ToastUtils'; import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less'; import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props { interface Props {
chartFilter: ChartFilter; chartFilter: ChartFilter;
@ -104,30 +105,36 @@ const TotalEntityInsight: FC<Props> = ({ chartFilter }) => {
</Typography.Text> </Typography.Text>
</> </>
}> }>
<ResponsiveContainer debounce={1} minHeight={400}> {data.length ? (
<BarChart data={data} margin={BAR_CHART_MARGIN}> <ResponsiveContainer debounce={1} minHeight={400}>
<CartesianGrid strokeDasharray="3 3" /> <BarChart data={data} margin={BAR_CHART_MARGIN}>
<XAxis dataKey="timestamp" /> <CartesianGrid strokeDasharray="3 3" />
<YAxis /> <XAxis dataKey="timestamp" />
<Tooltip content={<CustomTooltip />} /> <YAxis />
<Legend <Tooltip content={<CustomTooltip />} />
align="left" <Legend
content={(props) => renderLegend(props as LegendProps, `${total}`)} align="left"
layout="vertical" content={(props) =>
verticalAlign="top" renderLegend(props as LegendProps, `${total}`)
wrapperStyle={{ left: '0px' }} }
/> layout="vertical"
{entities.map((entity) => ( verticalAlign="top"
<Bar wrapperStyle={{ left: '0px' }}
barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="entityCount"
/> />
))} {entities.map((entity) => (
</BarChart> <Bar
</ResponsiveContainer> barSize={BAR_SIZE}
dataKey={entity}
fill={ENTITIES_BAR_COLO_MAP[entity]}
key={uniqueId()}
stackId="entityCount"
/>
))}
</BarChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card> </Card>
); );
}; };