yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-09-09 00:51:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed #854 data profiler charts put tooltip above the chart not on top. (#859)

Browse Source
This commit is contained in:
Sachin Chaurasiya 2021-10-19 18:54:36 +05:30 committed by GitHub
parent 8e5064481e
commit 805839f9f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ProfilerTable.tsx → catalog-rest-service/src/main/resources/ui/src/components/my-data-details/TableProfiler.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { Fragment, useState } from 'react'; import React, { Fragment, useState } from 'react';
import { Table, TableProfile } from '../../generated/entity/data/table'; import { Table, TableProfile } from '../../generated/entity/data/table';
import ProfilerGraph from './ProfilerGraph'; import TableProfilerGraph from './TableProfilerGraph';
type Props = { type Props = {
tableProfiles: Table['tableProfile']; tableProfiles: Table['tableProfile'];
@ -13,7 +13,7 @@ type ProfilerGraphData = Array<{
value: number; value: number;
}>; }>;
const ProfilerTable = ({ tableProfiles, columns }: Props) => { const TableProfiler = ({ tableProfiles, columns }: Props) => {
const [expandedColumn, setExpandedColumn] = useState<{ const [expandedColumn, setExpandedColumn] = useState<{
name: string; name: string;
isExpanded: boolean; isExpanded: boolean;
@ -92,7 +92,7 @@ const ProfilerTable = ({ tableProfiles, columns }: Props) => {
{col.name} {col.name}
</td> </td>
<td className="tw-relative tableBody-cell profiler-graph"> <td className="tw-relative tableBody-cell profiler-graph">
<ProfilerGraph <TableProfilerGraph
data={ data={
col.data col.data
?.map((d) => ({ ?.map((d) => ({
@ -104,7 +104,7 @@ const ProfilerTable = ({ tableProfiles, columns }: Props) => {
/> />
</td> </td>
<td className="tw-relative tableBody-cell profiler-graph"> <td className="tw-relative tableBody-cell profiler-graph">
<ProfilerGraph <TableProfilerGraph
data={ data={
col.data col.data
?.map((d) => ({ ?.map((d) => ({
@ -116,7 +116,7 @@ const ProfilerTable = ({ tableProfiles, columns }: Props) => {
/> />
</td> </td>
<td className="tw-relative tableBody-cell profiler-graph"> <td className="tw-relative tableBody-cell profiler-graph">
<ProfilerGraph <TableProfilerGraph
data={ data={
col.data col.data
?.map((d) => ({ ?.map((d) => ({
@ -131,7 +131,7 @@ const ProfilerTable = ({ tableProfiles, columns }: Props) => {
<td className="tw-relative tableBody-cell">{col.max}</td> <td className="tw-relative tableBody-cell">{col.max}</td>
<td className="tw-relative tableBody-cell">{col.median}</td> <td className="tw-relative tableBody-cell">{col.median}</td>
<td className="tw-relative tableBody-cell profiler-graph"> <td className="tw-relative tableBody-cell profiler-graph">
<ProfilerGraph <TableProfilerGraph
data={ data={
col.data col.data
?.map((d) => ({ ?.map((d) => ({
@ -198,4 +198,4 @@ const ProfilerTable = ({ tableProfiles, columns }: Props) => {
); );
}; };
export default ProfilerTable; export default TableProfiler;

6
catalog-rest-service/src/main/resources/ui/src/components/my-data-details/ProfilerGraph.tsx → catalog-rest-service/src/main/resources/ui/src/components/my-data-details/TableProfilerGraph.tsx
View File

@ -4,7 +4,7 @@ import { Area, AreaChart, Tooltip } from 'recharts';
type Props = { type Props = {
data: Array<{ date: Date | undefined; value: number | undefined }>; data: Array<{ date: Date | undefined; value: number | undefined }>;
}; };
const ProfilerGraph = ({ data }: Props) => { const TableProfilerGraph = ({ data }: Props) => {
const CustomTooltip = ({ const CustomTooltip = ({
active, active,
payload, payload,
@ -40,7 +40,7 @@ const ProfilerGraph = ({ data }: Props) => {
content={CustomTooltip} content={CustomTooltip}
cursor={{ stroke: '#FF4C3B', strokeWidth: 2 }} cursor={{ stroke: '#FF4C3B', strokeWidth: 2 }}
offset={20} offset={20}
position={{ x: 20, y: 20 }} position={{ x: 20, y: -40 }}
/> />
<Area <Area
dataKey="value" dataKey="value"
@ -53,4 +53,4 @@ const ProfilerGraph = ({ data }: Props) => {
); );
}; };
export default ProfilerGraph; export default TableProfilerGraph;

6
catalog-rest-service/src/main/resources/ui/src/pages/my-data-details/index.tsx
View File

@ -41,8 +41,8 @@ import PageContainer from '../../components/containers/PageContainer';
import Entitylineage from '../../components/dataset-lineage/EntityLineage'; import Entitylineage from '../../components/dataset-lineage/EntityLineage';
import FrequentlyJoinedTables from '../../components/my-data-details/FrequentlyJoinedTables'; import FrequentlyJoinedTables from '../../components/my-data-details/FrequentlyJoinedTables';
import ManageTab from '../../components/my-data-details/ManageTab'; import ManageTab from '../../components/my-data-details/ManageTab';
import ProfilerTable from '../../components/my-data-details/ProfilerTable';
import SchemaTab from '../../components/my-data-details/SchemaTab'; import SchemaTab from '../../components/my-data-details/SchemaTab';
import TableProfiler from '../../components/my-data-details/TableProfiler';
import { import {
getDatabaseDetailsPath, getDatabaseDetailsPath,
getServiceDetailsPath, getServiceDetailsPath,
@ -90,7 +90,7 @@ const getProfilerRowDiff = (tableProfile: Table['tableProfile']) => {
if (tableProfile.length > 1) { if (tableProfile.length > 1) {
rowDiff = rowDiff - (tableProfile[1].rowCount || 0); rowDiff = rowDiff - (tableProfile[1].rowCount || 0);
} }
retDiff = `${(rowDiff >= 0 ? '+' : '-') + rowDiff} rows ${dayDiff}`; retDiff = `${(rowDiff >= 0 ? '+' : '') + rowDiff} rows ${dayDiff}`;
} }
return retDiff; return retDiff;
@ -555,7 +555,7 @@ const MyDataDetailsPage = () => {
</div> </div>
)} )}
{activeTab === 2 && ( {activeTab === 2 && (
<ProfilerTable <TableProfiler
columns={columns.map((col) => col.name)} columns={columns.map((col) => col.name)}
tableProfiles={tableProfile} tableProfiles={tableProfile}
/> />