mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-09-25 17:04:54 +00:00
updated pie chart with new mock
This commit is contained in:
Shailesh Parmar
parent
c6682384d9
commit
3ff41d3438
@ -1,245 +1,255 @@
|
||||
import { Card, Col, Row, Typography } from 'antd';
|
||||
/*
|
||||
* Copyright 2024 Collate.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
CheckCircleOutlined,
|
||||
FilterOutlined,
|
||||
SnippetsOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Card, Col, Row, Space, Typography } from 'antd';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Cell, Pie, PieChart } from 'recharts';
|
||||
import { PRIMARY_COLOR, WHITE_SMOKE } from '../../../constants/Color.constants';
|
||||
import PageHeader from '../../PageHeader/PageHeader.component';
|
||||
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
|
||||
import {
|
||||
BLUE_2,
|
||||
GREEN_3,
|
||||
RED_3,
|
||||
YELLOW_2,
|
||||
} from '../../../constants/Color.constants';
|
||||
import { formatNumberWithComma } from '../../../utils/CommonUtils';
|
||||
import './pie-chart-summary-panel.style.less';
|
||||
import { SummaryPanelProps } from './SummaryPanel.interface';
|
||||
|
||||
const renderCenterText = (value: number) => (
|
||||
<text
|
||||
dominantBaseline="middle"
|
||||
fill="#222"
|
||||
fontSize="28"
|
||||
fontWeight="bold"
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="50%">
|
||||
{value.toLocaleString()}
|
||||
</text>
|
||||
);
|
||||
|
||||
const PieChartSummaryPanel = ({
|
||||
testSummary,
|
||||
isLoading = false,
|
||||
showAdditionalSummary = true,
|
||||
}: SummaryPanelProps) => {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
total: totalTests = 0,
|
||||
success: successTests = 0,
|
||||
failed: failedTests = 0,
|
||||
aborted: abortedTests = 0,
|
||||
healthy: healthyDataAssets = 0,
|
||||
totalDQEntities = 0,
|
||||
totalEntityCount = 0,
|
||||
} = testSummary || {};
|
||||
|
||||
const healthyDataAssets = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
name: 'healthy',
|
||||
value: testSummary?.healthy,
|
||||
color: '#12B76A',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value:
|
||||
(testSummary?.totalDQEntities ?? 0) - (testSummary?.healthy ?? 0),
|
||||
color: WHITE_SMOKE,
|
||||
},
|
||||
];
|
||||
}, [testSummary?.healthy, testSummary?.totalDQEntities]);
|
||||
const totalDataAssets = totalDQEntities;
|
||||
const dataAssetsCoverage = totalDQEntities;
|
||||
|
||||
const dataAssetsCoverage = useMemo(() => {
|
||||
const testData = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
name: 'dataAssetsCoverage',
|
||||
value: testSummary?.totalDQEntities,
|
||||
color: PRIMARY_COLOR,
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value:
|
||||
(testSummary?.totalEntityCount ?? 0) -
|
||||
(testSummary?.totalDQEntities ?? 0),
|
||||
color: WHITE_SMOKE,
|
||||
},
|
||||
{ name: 'Success', value: successTests, color: GREEN_3 },
|
||||
{ name: 'Aborted', value: abortedTests, color: YELLOW_2 },
|
||||
{ name: 'Failed', value: failedTests, color: RED_3 },
|
||||
];
|
||||
}, [testSummary?.totalEntityCount, testSummary?.totalDQEntities]);
|
||||
}, [successTests, abortedTests, failedTests]);
|
||||
|
||||
const healthyPercentage = useMemo(() => {
|
||||
if (totalDataAssets === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round((healthyDataAssets / totalDataAssets) * 100);
|
||||
}, [healthyDataAssets, totalDataAssets]);
|
||||
|
||||
const coveragePercentage = useMemo(() => {
|
||||
if (totalEntityCount === 0) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return Math.round((dataAssetsCoverage / totalEntityCount) * 100);
|
||||
}, [dataAssetsCoverage, totalEntityCount]);
|
||||
|
||||
const healthyData = useMemo(() => {
|
||||
const unhealthy = totalDataAssets - healthyDataAssets;
|
||||
|
||||
const testCaseSummary = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
name: 'success',
|
||||
data: [
|
||||
{
|
||||
name: 'success',
|
||||
value: testSummary?.success,
|
||||
color: '#12B76A',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value: (testSummary?.total ?? 0) - (testSummary?.success ?? 0),
|
||||
color: WHITE_SMOKE,
|
||||
},
|
||||
],
|
||||
innerRadius: 90,
|
||||
outerRadius: 100,
|
||||
},
|
||||
{
|
||||
name: 'failed',
|
||||
data: [
|
||||
{
|
||||
name: 'failed',
|
||||
value: testSummary?.failed,
|
||||
color: '#EF4444',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value: (testSummary?.total ?? 0) - (testSummary?.failed ?? 0),
|
||||
color: WHITE_SMOKE,
|
||||
},
|
||||
],
|
||||
innerRadius: 70,
|
||||
outerRadius: 80,
|
||||
},
|
||||
{
|
||||
name: 'aborted',
|
||||
data: [
|
||||
{
|
||||
name: 'aborted',
|
||||
value: testSummary?.aborted,
|
||||
color: '#F59E0B',
|
||||
},
|
||||
{
|
||||
name: 'total',
|
||||
value: (testSummary?.total ?? 0) - (testSummary?.aborted ?? 0),
|
||||
color: WHITE_SMOKE,
|
||||
},
|
||||
],
|
||||
innerRadius: 50,
|
||||
outerRadius: 60,
|
||||
},
|
||||
{ name: 'Healthy', value: healthyDataAssets, color: GREEN_3 },
|
||||
{ name: 'Unhealthy', value: unhealthy, color: '#E5E7EB' },
|
||||
];
|
||||
}, [testSummary]);
|
||||
}, [healthyDataAssets, totalDataAssets]);
|
||||
|
||||
const coverageData = useMemo(() => {
|
||||
const uncovered = totalEntityCount - dataAssetsCoverage;
|
||||
|
||||
return [
|
||||
{ name: 'Covered', value: dataAssetsCoverage, color: BLUE_2 },
|
||||
{ name: 'Uncovered', value: uncovered, color: '#E5E7EB' },
|
||||
];
|
||||
}, [dataAssetsCoverage, totalEntityCount]);
|
||||
|
||||
return (
|
||||
<Card loading={isLoading}>
|
||||
<PageHeader
|
||||
data={{
|
||||
header: t('label.data-quality'),
|
||||
subHeader: t('message.page-sub-header-for-data-quality'),
|
||||
}}
|
||||
/>
|
||||
<Row className="p-t-box" gutter={[32, 16]} justify="center">
|
||||
{/* Total Tests */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 300 }}>
|
||||
<Typography.Title
|
||||
className="heading"
|
||||
data-testid="heading"
|
||||
level={5}>
|
||||
{t('label.total-entity', {
|
||||
entity: t('label.test-case-plural'),
|
||||
})}
|
||||
</Typography.Title>
|
||||
<div className="flex-center m-y-md" style={{ height: 200 }}>
|
||||
<PieChart height={200} width={200}>
|
||||
{testCaseSummary.map((item) => {
|
||||
return (
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={item.data}
|
||||
dataKey="value"
|
||||
endAngle={-270}
|
||||
innerRadius={item.innerRadius}
|
||||
key={item.name}
|
||||
outerRadius={item.outerRadius}
|
||||
startAngle={90}>
|
||||
{item.data?.map((entry) => (
|
||||
<Cell fill={entry.color} key={`cell-${entry.name}`} />
|
||||
))}
|
||||
</Pie>
|
||||
);
|
||||
})}
|
||||
{renderCenterText(testSummary?.total || 0)}
|
||||
</PieChart>
|
||||
<Row className="pie-chart-summary-panel" gutter={[16, 16]}>
|
||||
<Col md={8} sm={24} xs={24}>
|
||||
<Card className="h-full" loading={isLoading}>
|
||||
<div className="d-flex justify-between items-center">
|
||||
<div className="d-flex items-center gap-4">
|
||||
<FilterOutlined className="summary-icon total-tests-icon" />
|
||||
<div>
|
||||
<Typography.Paragraph className="summary-title">
|
||||
{t('label.total-entity', {
|
||||
entity: t('label.test-plural'),
|
||||
})}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Typography.Paragraph className="summary-value m-b-0">
|
||||
{formatNumberWithComma(totalTests)}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-center gap-6">
|
||||
{testCaseSummary?.map((item) => (
|
||||
<div className="flex-center gap-2" key={item.name}>
|
||||
<span
|
||||
style={{
|
||||
width: 10,
|
||||
height: 10,
|
||||
borderRadius: '50%',
|
||||
background: item.data[0].color,
|
||||
display: 'inline-block',
|
||||
}}
|
||||
/>
|
||||
<span style={{ color: '#222', fontWeight: 500 }}>
|
||||
{t(item.name)}
|
||||
</span>
|
||||
<span style={{ color: '#6B7280', fontWeight: 500 }}>
|
||||
{item.data[0].value}
|
||||
</span>
|
||||
|
||||
<div className="chart-container d-flex items-center">
|
||||
<Space className="m-r-md" direction="vertical" size={4}>
|
||||
{testData.map((item) => (
|
||||
<Space key={item.name} size={8}>
|
||||
<div
|
||||
className="legend-dot"
|
||||
style={{ backgroundColor: item.color }}
|
||||
/>
|
||||
<Typography.Text className="legend-text">
|
||||
{item.name} {formatNumberWithComma(item.value)}
|
||||
</Typography.Text>
|
||||
</Space>
|
||||
))}
|
||||
</Space>
|
||||
<ResponsiveContainer height={120} width={120}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={testData}
|
||||
dataKey="value"
|
||||
innerRadius={35}
|
||||
outerRadius={55}
|
||||
paddingAngle={2}>
|
||||
{testData.map((entry, index) => (
|
||||
<Cell fill={entry.color} key={`cell-${index}`} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<text
|
||||
className="chart-center-text"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="50%">
|
||||
100%
|
||||
</text>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{showAdditionalSummary && (
|
||||
<>
|
||||
<Col md={8} sm={24} xs={24}>
|
||||
<Card className="h-full" loading={isLoading}>
|
||||
<div className="d-flex justify-between items-center">
|
||||
<div className="d-flex items-center gap-4">
|
||||
<CheckCircleOutlined className="summary-icon healthy-icon" />
|
||||
<div>
|
||||
<Typography.Paragraph className="summary-title">
|
||||
{t('label.healthy-data-asset-plural')}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Typography.Paragraph className="summary-value m-b-0">
|
||||
{formatNumberWithComma(healthyDataAssets)}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{/* Healthy Data Assets */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 300 }}>
|
||||
<Typography.Title
|
||||
className="heading"
|
||||
data-testid="heading"
|
||||
level={5}>
|
||||
{t('label.healthy-data-asset-plural')}
|
||||
</Typography.Title>
|
||||
<div className="flex-center m-y-md" style={{ height: 200 }}>
|
||||
<PieChart height={200} width={200}>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={healthyDataAssets}
|
||||
dataKey="value"
|
||||
endAngle={-270}
|
||||
innerRadius={90}
|
||||
outerRadius={100}
|
||||
startAngle={90}>
|
||||
{healthyDataAssets?.map((entry, idx) => (
|
||||
<Cell fill={entry.color} key={`cell-healthy-${idx}`} />
|
||||
))}
|
||||
</Pie>
|
||||
{renderCenterText(testSummary?.healthy || 0)}
|
||||
</PieChart>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
{/* Data Assets Coverage */}
|
||||
<Col md={8} xs={24}>
|
||||
<Card style={{ textAlign: 'center', minHeight: 300 }}>
|
||||
<Typography.Title
|
||||
className="heading"
|
||||
data-testid="heading"
|
||||
level={5}>
|
||||
{t('label.data-asset-plural-coverage')}
|
||||
</Typography.Title>
|
||||
<div className="flex-center m-y-md" style={{ height: 200 }}>
|
||||
<PieChart height={200} width={200}>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={dataAssetsCoverage}
|
||||
dataKey="value"
|
||||
endAngle={-270}
|
||||
innerRadius={90}
|
||||
outerRadius={100}
|
||||
startAngle={90}>
|
||||
{dataAssetsCoverage?.map((entry, idx) => (
|
||||
<Cell fill={entry.color} key={`cell-coverage-${idx}`} />
|
||||
))}
|
||||
</Pie>
|
||||
{renderCenterText(testSummary?.totalDQEntities || 0)}
|
||||
</PieChart>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</Card>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer height={120} width={120}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={healthyData}
|
||||
dataKey="value"
|
||||
innerRadius={35}
|
||||
outerRadius={55}
|
||||
paddingAngle={0}>
|
||||
{healthyData.map((entry, index) => (
|
||||
<Cell fill={entry.color} key={`cell-${index}`} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<text
|
||||
className="chart-center-text"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="50%">
|
||||
{`${healthyPercentage}%`}
|
||||
</text>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
<Col md={8} sm={24} xs={24}>
|
||||
<Card className="h-full" loading={isLoading}>
|
||||
<div className="d-flex justify-between items-center">
|
||||
<div className="d-flex items-center gap-4">
|
||||
<SnippetsOutlined className="summary-icon coverage-icon" />
|
||||
<div>
|
||||
<Typography.Paragraph className="summary-title">
|
||||
{t('label.data-asset-plural-coverage')}
|
||||
</Typography.Paragraph>
|
||||
|
||||
<Typography.Paragraph className="summary-value m-b-0">
|
||||
{formatNumberWithComma(dataAssetsCoverage)}
|
||||
</Typography.Paragraph>
|
||||
</div>
|
||||
</div>
|
||||
<div className="chart-container">
|
||||
<ResponsiveContainer height={120} width={120}>
|
||||
<PieChart>
|
||||
<Pie
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
data={coverageData}
|
||||
dataKey="value"
|
||||
innerRadius={35}
|
||||
outerRadius={55}
|
||||
paddingAngle={0}>
|
||||
{coverageData.map((entry, index) => (
|
||||
<Cell fill={entry.color} key={`cell-${index}`} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip />
|
||||
<text
|
||||
className="chart-center-text"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
x="50%"
|
||||
y="50%">
|
||||
{`${coveragePercentage}%`}
|
||||
</text>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Col>
|
||||
</>
|
||||
)}
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
/*
|
||||
* Copyright 2024 Collate.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
@import (reference) '../../../styles/variables.less';
|
||||
|
||||
.pie-chart-summary-panel {
|
||||
.summary-icon {
|
||||
font-size: 28px;
|
||||
|
||||
&.total-tests-icon {
|
||||
color: #3b82f6;
|
||||
background: #eff6ff;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.healthy-icon {
|
||||
color: @green-3;
|
||||
background: #f0fdf4;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&.coverage-icon {
|
||||
color: @blue-2;
|
||||
background: #e0f2fe;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.summary-title {
|
||||
font-size: 16px;
|
||||
color: @text-color;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
color: @text-color;
|
||||
line-height: 1.2;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.percentage-change {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
&.positive {
|
||||
color: @green-3;
|
||||
}
|
||||
|
||||
&.negative {
|
||||
color: @red-3;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.title-value-section {
|
||||
flex-shrink: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.chart-center-text {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
fill: @text-color;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.legend-text {
|
||||
font-size: 12px;
|
||||
color: @text-grey-muted;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user