From 5272139b2d4c119a0adad00a034e5b32e8846e2e Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Thu, 19 Jun 2025 11:09:35 +0530
Subject: [PATCH] added pie chart component in test case page.

---
 .../PieChartSummaryPanel.component.tsx        | 288 ++++++++++--------
 .../TestCases/TestCases.component.tsx         |   5 +-
 .../TestSuiteList/TestSuites.component.tsx    |   8 +-
 .../src/pages/DataQuality/DataQualityPage.tsx |  21 +-
 4 files changed, 180 insertions(+), 142 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
index f92f8053e15..4bf05875579 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/PieChartSummaryPanel.component.tsx
@@ -1,7 +1,9 @@
-import { Card, Col, Row } from 'antd';
+import { Card, Col, Row, 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 { SummaryPanelProps } from './SummaryPanel.interface';
 
 const renderCenterText = (value: number) => (
@@ -20,98 +22,150 @@ const renderCenterText = (value: number) => (
 const PieChartSummaryPanel = ({
   testSummary,
   isLoading = false,
-  showAdditionalSummary = false,
 }: SummaryPanelProps) => {
   const { t } = useTranslation();
-  console.log('testSummary', testSummary);
 
-  //   {
-  //     "success": 4,
-  //     "failed": 3,
-  //     "aborted": 1,
-  //     "total": 8,
-  //     "unhealthy": 1,
-  //     "healthy": 1,
-  //     "totalDQEntities": 2,
-  //     "totalEntityCount": 36
-  // }
-
-  const success = useMemo(
-    () => [
+  const healthyDataAssets = useMemo(() => {
+    return [
       {
-        name: 'success',
-        value: testSummary?.success,
-        color: '#22C55E',
+        name: 'healthy',
+        value: testSummary?.healthy,
+        color: '#12B76A',
       },
       {
         name: 'total',
-        value: testSummary?.total,
-        color: '#E5E7EB',
+        value:
+          (testSummary?.totalDQEntities ?? 0) - (testSummary?.healthy ?? 0),
+        color: WHITE_SMOKE,
       },
-    ],
-    [testSummary]
-  );
+    ];
+  }, [testSummary?.healthy, testSummary?.totalDQEntities]);
+
+  const dataAssetsCoverage = useMemo(() => {
+    return [
+      {
+        name: 'dataAssetsCoverage',
+        value: testSummary?.totalDQEntities,
+        color: PRIMARY_COLOR,
+      },
+      {
+        name: 'total',
+        value:
+          (testSummary?.totalEntityCount ?? 0) -
+          (testSummary?.totalDQEntities ?? 0),
+        color: WHITE_SMOKE,
+      },
+    ];
+  }, [testSummary?.totalEntityCount, testSummary?.totalDQEntities]);
+
+  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,
+      },
+    ];
+  }, [testSummary]);
 
   return (
     <Card loading={isLoading}>
-      <div style={{ marginBottom: 16 }}>
-        <div style={{ fontWeight: 600, fontSize: 20 }}>
-          {t('test-cases-status', 'Test Cases Status')}
-        </div>
-        <div style={{ color: '#6B7280' }}>
-          {t(
-            'test-cases-status-desc',
-            'Understand the metadata available in your service and keep track of the main KPIs coverage'
-          )}
-        </div>
-      </div>
-      <Row gutter={[32, 16]} justify="center">
+      <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: 320 }}>
-            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
-              {t('total-tests', 'Total Tests')}
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                position: 'relative',
-                height: 180,
-              }}>
+          <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}>
-                <Pie
-                  cx="50%"
-                  cy="50%"
-                  data={success}
-                  dataKey="value"
-                  innerRadius={85}
-                  outerRadius={100}>
-                  {success?.map((entry) => (
-                    <Cell fill={entry.color} key={`cell-${entry.name}`} />
-                  ))}
-                </Pie>
-                {/* {renderCenterText(testSummary?.totalTests || 0)} */}
+                {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>
             </div>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                gap: 16,
-                marginTop: 8,
-              }}>
-              {testSummary?.totalTests?.map((item: any) => (
-                <div
-                  key={item.name}
-                  style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+            <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.color,
+                      background: item.data[0].color,
                       display: 'inline-block',
                     }}
                   />
@@ -119,7 +173,7 @@ const PieChartSummaryPanel = ({
                     {t(item.name)}
                   </span>
                   <span style={{ color: '#6B7280', fontWeight: 500 }}>
-                    {item.value}
+                    {item.data[0].value}
                   </span>
                 </div>
               ))}
@@ -128,74 +182,58 @@ const PieChartSummaryPanel = ({
         </Col>
         {/* Healthy Data Assets */}
         <Col md={8} xs={24}>
-          <Card style={{ textAlign: 'center', minHeight: 320 }}>
-            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
-              {t('healthy-data-asset-plural')}
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                position: 'relative',
-                height: 180,
-              }}>
-              <PieChart height={180} width={180}>
+          <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={testSummary?.healthyDataAssets}
+                  data={healthyDataAssets}
                   dataKey="value"
-                  endAngle={-30}
-                  innerRadius={60}
-                  nameKey="name"
-                  outerRadius={80}
-                  startAngle={210}
-                  stroke="none">
-                  {testSummary?.healthyDataAssets?.map(
-                    (entry: any, idx: number) => (
-                      <Cell fill={entry.color} key={`cell-healthy-${idx}`} />
-                    )
-                  )}
+                  endAngle={-270}
+                  innerRadius={90}
+                  outerRadius={100}
+                  startAngle={90}>
+                  {healthyDataAssets?.map((entry, idx) => (
+                    <Cell fill={entry.color} key={`cell-healthy-${idx}`} />
+                  ))}
                 </Pie>
-                {renderCenterText(1000)}
+                {renderCenterText(testSummary?.healthy || 0)}
               </PieChart>
             </div>
           </Card>
         </Col>
         {/* Data Assets Coverage */}
         <Col md={8} xs={24}>
-          <Card style={{ textAlign: 'center', minHeight: 320 }}>
-            <div style={{ fontWeight: 600, fontSize: 20, marginBottom: 8 }}>
-              {t('data-asset-plural-coverage')}
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                position: 'relative',
-                height: 180,
-              }}>
-              <PieChart height={180} width={180}>
+          <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={testSummary?.dataAssetsCoverage}
+                  data={dataAssetsCoverage}
                   dataKey="value"
-                  endAngle={-30}
-                  innerRadius={60}
-                  nameKey="name"
-                  outerRadius={80}
-                  startAngle={210}
-                  stroke="none">
-                  {testSummary?.dataAssetsCoverage?.map(
-                    (entry: any, idx: number) => (
-                      <Cell fill={entry.color} key={`cell-coverage-${idx}`} />
-                    )
-                  )}
+                  endAngle={-270}
+                  innerRadius={90}
+                  outerRadius={100}
+                  startAngle={90}>
+                  {dataAssetsCoverage?.map((entry, idx) => (
+                    <Cell fill={entry.color} key={`cell-coverage-${idx}`} />
+                  ))}
                 </Pie>
-                {renderCenterText(1000)}
+                {renderCenterText(testSummary?.totalDQEntities || 0)}
               </PieChart>
             </div>
           </Card>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
index 13278eee274..056848ddf33 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx
@@ -83,7 +83,6 @@ import Searchbar from '../../common/SearchBarComponent/SearchBar.component';
 import DataQualityTab from '../../Database/Profiler/DataQualityTab/DataQualityTab';
 import { TestCaseSearchParams } from '../DataQuality.interface';
 import PieChartSummaryPanel from '../SummaryPannel/PieChartSummaryPanel.component';
-import { SummaryPanel } from '../SummaryPannel/SummaryPanel.component';
 
 export const TestCases = () => {
   const [form] = useForm();
@@ -650,13 +649,13 @@ export const TestCases = () => {
             </Space>
           </Form>
         </Col>
-        <Col span={24}>
+        {/* <Col span={24}>
           <SummaryPanel
             showAdditionalSummary
             isLoading={isTestCaseSummaryLoading}
             testSummary={testCaseSummary}
           />
-        </Col>
+        </Col> */}
         <Col span={24}>
           <PieChartSummaryPanel
             isLoading={isTestCaseSummaryLoading}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx
index 9ce1d2dbba4..91ad7b0fb9d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestSuite/TestSuiteList/TestSuites.component.tsx
@@ -71,7 +71,7 @@ import { UserTeamSelectableList } from '../../../common/UserTeamSelectableList/U
 import { TableProfilerTab } from '../../../Database/Profiler/ProfilerDashboard/profilerDashboard.interface';
 import ProfilerProgressWidget from '../../../Database/Profiler/TableProfiler/ProfilerProgressWidget/ProfilerProgressWidget';
 import { TestSuiteSearchParams } from '../../DataQuality.interface';
-import { SummaryPanel } from '../../SummaryPannel/SummaryPanel.component';
+import PieChartSummaryPanel from '../../SummaryPannel/PieChartSummaryPanel.component';
 
 export const TestSuites = () => {
   const { t } = useTranslation();
@@ -352,10 +352,14 @@ export const TestSuites = () => {
       </Col>
 
       <Col span={24}>
-        <SummaryPanel
+        {/* <SummaryPanel
           showAdditionalSummary
           isLoading={isTestCaseSummaryLoading}
           testSummary={testCaseSummary}
+        /> */}
+        <PieChartSummaryPanel
+          isLoading={isTestCaseSummaryLoading}
+          testSummary={testCaseSummary}
         />
       </Col>
       <Col span={24}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
index af2973fef84..5fbaaa5338d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityPage.tsx
@@ -11,13 +11,14 @@
  *  limitations under the License.
  */
 
-import { Button, Card, Col, Row, Tabs, Typography } from 'antd';
+import { Button, Card, Col, Row, Tabs } from 'antd';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import ManageButton from '../../components/common/EntityPageInfos/ManageButton/ManageButton';
 import TabsLabel from '../../components/common/TabsLabel/TabsLabel.component';
+import PageHeader from '../../components/PageHeader/PageHeader.component';
 import { ROUTES } from '../../constants/constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { EntityType } from '../../enums/entity.enum';
@@ -68,18 +69,14 @@ const DataQualityPage = () => {
           <Card>
             <Row>
               <Col span={isEmpty(extraDropdownContent) ? 16 : 23}>
-                <Typography.Title
-                  className="m-b-md"
-                  data-testid="page-title"
-                  level={5}>
-                  {t('label.data-quality')}
-                </Typography.Title>
-                <Typography.Paragraph
-                  className="text-grey-muted m-b-0"
-                  data-testid="page-sub-title">
-                  {t('message.page-sub-header-for-data-quality')}
-                </Typography.Paragraph>
+                <PageHeader
+                  data={{
+                    header: t('label.data-quality'),
+                    subHeader: t('message.page-sub-header-for-data-quality'),
+                  }}
+                />
               </Col>
+
               <Col className="d-flex justify-end" span={8}>
                 {activeTab === DataQualityPageTabs.TEST_SUITES &&
                   testSuitePermission?.Create && (