Style : add graph for rows count (#970)

* style : add graph for rows count * Fix : removed Overview tesxt from drawer.
2025-12-29 16:39:04 +00:00 · 2021-10-28 14:24:37 +05:30 · 2021-10-28 14:24:37 +05:30 · c97abe0cdc
commit c97abe0cdc
parent 8779e8ee46
6 changed files with 94 additions and 107 deletions
--- a/catalog-rest-service/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/DatasetDetails/DatasetDetails.component.tsx
@ -18,7 +18,6 @@ import {
  getUserTeams,
 } from '../../utils/CommonUtils';
 import { getTagsWithoutTier, getUsagePercentile } from '../../utils/TableUtils';
-import { getRelativeDay } from '../../utils/TimeUtils';
 import Description from '../common/description/Description';
 import EntityPageInfo from '../common/entityPageInfo/EntityPageInfo';
 import TabsPane from '../common/TabsPane/TabsPane';
@ -28,6 +27,7 @@ import FrequentlyJoinedTables from '../FrequentlyJoinedTables/FrequentlyJoinedTa
 import ManageTab from '../ManageTab/ManageTab.component';
 import SchemaTab from '../SchemaTab/SchemaTab.component';
 import TableProfiler from '../TableProfiler/TableProfiler.component';
+import TableProfilerGraph from '../TableProfiler/TableProfilerGraph.component';
 import { DatasetDetailsProps } from './DatasetDetails.interface';

 const DatasetDetails: React.FC<DatasetDetailsProps> = ({
@ -168,29 +168,10 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({

    return freqJoin;
  };
-  const getProfilerRowDiff = (tableProfile: Table['tableProfile']) => {
-    let retDiff;
-    if (tableProfile && tableProfile.length > 0) {
-      let rowDiff: string | number = tableProfile[0].rowCount || 0;
-      const dayDiff = getRelativeDay(
-        tableProfile[0].profileDate
-          ? new Date(tableProfile[0].profileDate).getTime()
-          : Date.now()
-      );
-      if (tableProfile.length > 1) {
-        rowDiff = rowDiff - (tableProfile[1].rowCount || 0);
-      }
-      retDiff = `${(rowDiff >= 0 ? '+' : '') + rowDiff} rows ${dayDiff}`;
-    }
-
-    return retDiff;
-  };
-
-  const profilerRowDiff = getProfilerRowDiff(tableProfile);

  const extraInfo: Array<{
    key?: string;
-    value: string | number;
+    value: string | number | React.ReactNode;
    isLink?: boolean;
    placeholderText?: string;
    openInNewTab?: boolean;
@ -208,13 +189,6 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
    { key: 'Tier', value: tier ? tier.split('.')[1] : '' },
    { key: 'Usage', value: usage },
    { key: 'Queries', value: `${weeklyUsageCount} past week` },
-    {
-      key: 'Rows',
-      value:
-        tableProfile && tableProfile[0]?.rowCount
-          ? tableProfile[0].rowCount
-          : '--',
-    },
    {
      key: 'Columns',
      value:
@ -222,12 +196,31 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
          ? tableProfile[0].columnCount
          : '--',
    },
+    {
+      key: 'Rows',
+      value: tableProfile ? (
+        <TableProfilerGraph
+          className="tw--mt-5"
+          data={
+            tableProfile
+              ?.map((d) => ({
+                date: d.profileDate,
+                value: d.rowCount ?? 0,
+              }))
+              .reverse() as Array<{
+              date: Date;
+              value: number;
+            }>
+          }
+          height={38}
+          toolTipPos={{ x: 20, y: -30 }}
+        />
+      ) : (
+        '--'
+      ),
+    },
  ];

-  if (!isNil(profilerRowDiff)) {
-    extraInfo.push({ value: profilerRowDiff });
-  }
-
  const onDescriptionEdit = (): void => {
    setIsEdit(true);
  };
--- a/catalog-rest-service/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/EntityInfoDrawer/EntityInfoDrawer.component.tsx
@ -180,7 +180,6 @@ const EntityInfoDrawer = ({
      ) : (
        <>
          <section className="tw-mt-1">
-            <span className="tw-text-grey-muted">Overview</span>
            <div className="tw-flex tw-flex-col">
              {getEntityOverview(
                selectedNode.type,
@ -188,7 +187,7 @@ const EntityInfoDrawer = ({
                serviceType
              ).map((d) => {
                return (
-                  <p className="tw-py-1.5" key={d.name}>
+                  <p className="tw-py-1.5 tw-flex" key={d.name}>
                    {d.name && <span>{d.name}:</span>}
                    <span
                      className={classNames(
--- a/catalog-rest-service/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/TableProfiler/TableProfiler.component.tsx
@ -53,7 +53,6 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
          <thead>
            <tr className="tableHead-row">
              <th className="tableHead-cell">Column Name</th>
-              <th className="tableHead-cell">Rows</th>
              <th className="tableHead-cell">Distinct Ratio (%)</th>
              <th className="tableHead-cell">Null Ratio (%)</th>
              <th className="tableHead-cell">Min</th>
@ -97,20 +96,6 @@ const TableProfiler = ({ tableProfiles, columns }: Props) => {
                        <span>{col.name}</span>
                      </p>
                    </td>
-                    <td
-                      className="tw-relative tableBody-cell profiler-graph"
-                      data-testid="profiler-graph">
-                      <TableProfilerGraph
-                        data={
-                          col.data
-                            ?.map((d) => ({
-                              date: d.profilDate,
-                              value: d.rows ?? 0,
-                            }))
-                            .reverse() as ProfilerGraphData
-                        }
-                      />
-                    </td>
                    <td className="tw-relative tableBody-cell profiler-graph">
                      <TableProfilerGraph
                        data={
--- a/catalog-rest-service/src/main/resources/ui/src/components/TableProfiler/TableProfilerGraph.component.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/TableProfiler/TableProfilerGraph.component.tsx
@ -3,8 +3,18 @@ import { Area, AreaChart, Tooltip } from 'recharts';

 type Props = {
  data: Array<{ date: Date | undefined; value: number | undefined }>;
+  margin?: { top: number; left: number; right: number; bottom: number };
+  toolTipPos?: { x: number; y: number };
+  height?: number;
+  className?: string;
 };
-const TableProfilerGraph = ({ data }: Props) => {
+const TableProfilerGraph = ({
+  data,
+  margin,
+  toolTipPos,
+  height,
+  className = '',
+}: Props) => {
  const CustomTooltip = ({
    active,
    payload,
@ -26,30 +36,34 @@ const TableProfilerGraph = ({ data }: Props) => {
  };

  return (
-    <AreaChart
-      data={data}
-      height={40}
-      margin={{
-        top: 10,
-        right: 30,
-        left: 0,
-        bottom: 0,
-      }}
-      width={150}>
-      <Tooltip
-        content={CustomTooltip}
-        cursor={{ stroke: '#FF4C3B', strokeWidth: 2 }}
-        offset={20}
-        position={{ x: 20, y: -40 }}
-      />
-      <Area
-        dataKey="value"
-        fill="#7147E8"
-        fillOpacity="0.4"
-        stroke="#7147E8"
-        type="monotone"
-      />
-    </AreaChart>
+    <div className={className}>
+      <AreaChart
+        data={data}
+        height={height ?? 40}
+        margin={
+          margin ?? {
+            top: 10,
+            right: 30,
+            left: 0,
+            bottom: 0,
+          }
+        }
+        width={150}>
+        <Tooltip
+          content={CustomTooltip}
+          cursor={{ stroke: '#FF4C3B', strokeWidth: 2 }}
+          offset={20}
+          position={toolTipPos ?? { x: 20, y: -40 }}
+        />
+        <Area
+          dataKey="value"
+          fill="#7147E8"
+          fillOpacity="0.4"
+          stroke="#7147E8"
+          type="monotone"
+        />
+      </AreaChart>
+    </div>
  );
 };

--- a/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx
@ -18,7 +18,7 @@ import FollowersModal from './FollowersModal';

 type ExtraInfo = {
  key?: string;
-  value: string | number;
+  value: string | number | React.ReactNode;
  isLink?: boolean;
  placeholderText?: string;
  openInNewTab?: boolean;
@ -175,7 +175,7 @@ const EntityPageInfo = ({
      </div>
      <div className="tw-flex tw-gap-1 tw-mb-2 tw-mt-1">
        {extraInfo.map((info, index) => (
-          <span key={index}>
+          <span className="tw-flex" key={index}>
            {!isNil(info.key) ? (
              <>
                <span className="tw-text-grey-muted tw-font-normal">
--- a/catalog-rest-service/src/main/resources/ui/src/utils/EntityUtils.tsx
+++ b/catalog-rest-service/src/main/resources/ui/src/utils/EntityUtils.tsx
@ -1,4 +1,6 @@
 import { isNil } from 'lodash';
+import React from 'react';
+import TableProfilerGraph from '../components/TableProfiler/TableProfilerGraph.component';
 import {
  getDatabaseDetailsPath,
  getServiceDetailsPath,
@ -17,7 +19,6 @@ import {
  getUsagePercentile,
 } from './TableUtils';
 import { getTableTags } from './TagsUtils';
-import { getRelativeDay } from './TimeUtils';

 export const getEntityTags = (
  type: string,
@ -53,7 +54,7 @@ export const getEntityOverview = (
  serviceType: string
 ): Array<{
  name: string;
-  value: string;
+  value: string | number | React.ReactNode;
  isLink: boolean;
  isExternal?: boolean;
  url?: string;
@ -73,25 +74,7 @@ export const getEntityOverview = (
        ? getUsagePercentile(usageSummary?.weeklyStats?.percentileRank || 0)
        : '--';
      const queries = usageSummary?.weeklyStats?.count.toLocaleString() || '--';
-      const getProfilerRowDiff = (tableProfile: Table['tableProfile']) => {
-        let retDiff;
-        if (tableProfile && tableProfile.length > 0) {
-          let rowDiff: string | number = tableProfile[0].rowCount || 0;
-          const dayDiff = getRelativeDay(
-            tableProfile[0].profileDate
-              ? new Date(tableProfile[0].profileDate).getTime()
-              : Date.now()
-          );
-          if (tableProfile.length > 1) {
-            rowDiff = rowDiff - (tableProfile[1].rowCount || 0);
-          }
-          retDiff = `${(rowDiff >= 0 ? '+' : '') + rowDiff} rows ${dayDiff}`;
-        }

-        return retDiff;
-      };
-
-      const profilerRowDiff = getProfilerRowDiff(tableProfile);
      const overview = [
        {
          name: 'Service',
@ -136,14 +119,6 @@ export const getEntityOverview = (
          value: `${queries} past week`,
          isLink: false,
        },
-        {
-          name: 'Rows',
-          value:
-            tableProfile && tableProfile[0]?.rowCount
-              ? tableProfile[0].rowCount
-              : '--',
-          isLink: false,
-        },
        {
          name: 'Columns',
          value:
@ -152,10 +127,31 @@ export const getEntityOverview = (
              : '--',
          isLink: false,
        },
+        {
+          name: 'Rows',
+          value: tableProfile ? (
+            <TableProfilerGraph
+              className="tw--mt-5"
+              data={
+                tableProfile
+                  ?.map((d) => ({
+                    date: d.profileDate,
+                    value: d.rowCount ?? 0,
+                  }))
+                  .reverse() as Array<{
+                  date: Date;
+                  value: number;
+                }>
+              }
+              height={38}
+              toolTipPos={{ x: 20, y: -30 }}
+            />
+          ) : (
+            '--'
+          ),
+          isLink: false,
+        },
      ];
-      if (!isNil(profilerRowDiff)) {
-        overview.push({ value: profilerRowDiff, name: '', isLink: false });
-      }

      return overview;
    }