yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-27 18:36:08 +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';
import { showErrorToast } from '../../utils/ToastUtils';
import './DataInsightDetail.less';
import { EmptyGraphPlaceholder } from './EmptyGraphPlaceholder';
interface Props {
chartFilter: ChartFilter;
@ -91,21 +92,25 @@ const DailyActiveUsersChart: FC<Props> = ({ chartFilter }) => {
</Typography.Text>
</>
}>
<ResponsiveContainer debounce={1} minHeight={400}>
<LineChart
data={getFormattedActiveUsersData(dailyActiveUsers)}
margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" />
<YAxis />
<Tooltip content={<CustomTooltip />} />
<Line
dataKey="activeUsers"
stroke={DATA_INSIGHT_GRAPH_COLORS[3]}
type="monotone"
/>
</LineChart>
</ResponsiveContainer>
{dailyActiveUsers.length ? (
<ResponsiveContainer debounce={1} minHeight={400}>
<LineChart
data={getFormattedActiveUsersData(dailyActiveUsers)}
margin={BAR_CHART_MARGIN}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="timestamp" />
<YAxis />
<Tooltip content={<CustomTooltip />} />
<Line
dataKey="activeUsers"
stroke={DATA_INSIGHT_GRAPH_COLORS[3]}
type="monotone"
/>
</LineChart>
</ResponsiveContainer>
) : (
<EmptyGraphPlaceholder />
)}
</Card>
);
};

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

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

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

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

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

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