Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable stats header row wrapping and expandable counts #8343

Closed
wants to merge 18 commits into from
Closed

Enable stats header row wrapping and expandable counts #8343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
2e3bab2
fix(stats): improve stats word wrapping
Jun 29, 2023
af68c48
flex approach
Jun 29, 2023
403d7a4
revert test code
Jun 29, 2023
97a2781
componetize more stats
Jun 30, 2023
a043255
hide left separators
Jun 30, 2023
7616af9
use an overflow approach to hide the left borders
Jun 30, 2023
cff9232
proper stat filtering
Jun 30, 2023
ed0aed7
back out some test code
Jun 30, 2023
109e440
more componetization
Jun 30, 2023
8c9dfe5
last updated stat
Jun 30, 2023
9c9f2fa
revert test code
Jun 30, 2023
110361e
remove left dividers
Jun 30, 2023
c4f947d
margin
Jun 30, 2023
65781f2
remove more test code
Jun 30, 2023
28bd4d9
Merge branch 'master' into feature/prd-376
Jul 11, 2023
ec84c88
Merge branch 'master' into feature/prd-376
Aug 1, 2023
a7ec6ee
better handling of overflow css
Aug 1, 2023
0af2bb6
full width stats in search cards
Aug 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 11 additions & 64 deletions datahub-web-react/src/app/entity/chart/shared/ChartStatsSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
import React from 'react';
import styled from 'styled-components';
import { Popover, Tooltip } from 'antd';
import { ClockCircleOutlined, EyeOutlined, TeamOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber';
import { ANTD_GRAY } from '../../shared/constants';
import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils';
import { StatsSummary } from '../../shared/components/styled/StatsSummary';
import { countFormatter, needsFormatting } from '../../../../utils/formatter';
import ExpandingStat from '../../dataset/shared/ExpandingStat';

const StatText = styled.span`
color: ${ANTD_GRAY[8]};
`;

const HelpIcon = styled(QuestionCircleOutlined)`
color: ${ANTD_GRAY[7]};
padding-left: 4px;
`;
import ChartCountStat from '../../shared/components/styled/stat/ChartCountStat';
import ViewCountStat from '../../shared/components/styled/stat/ViewCountStat';
import UserCountStat from '../../shared/components/styled/stat/UserCountStat';
import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat';

type Props = {
chartCount?: number | null;
Expand All @@ -33,55 +21,14 @@ export const ChartStatsSummary = ({
lastUpdatedMs,
createdMs,
}: Props) => {
const color = ANTD_GRAY[7];

const statsViews = [
(!!chartCount && (
<ExpandingStat
disabled={!needsFormatting(chartCount)}
render={(isExpanded) => (
<StatText color={ANTD_GRAY[8]}>
<b>{isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}</b>{' '}
charts
</StatText>
)}
/>
)) ||
undefined,
(!!viewCount && (
<StatText>
<EyeOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
<b>{formatNumberWithoutAbbreviation(viewCount)}</b> views
</StatText>
)) ||
undefined,
(!!uniqueUserCountLast30Days && (
<StatText>
<TeamOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
<b>{formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)}</b> unique users
</StatText>
)) ||
undefined,
(!!lastUpdatedMs && (
<Popover
content={
<>
{createdMs && <div>Created on {toLocalDateTimeString(createdMs)}.</div>}
<div>
Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '}
<Tooltip title="The time at which the chart was last changed in the source platform">
<HelpIcon />
</Tooltip>
</div>
</>
}
>
<StatText>
<ClockCircleOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
Changed {toRelativeTimeString(lastUpdatedMs)}
</StatText>
</Popover>
)) ||
undefined,
].filter((stat) => stat !== undefined);
!!chartCount && <ChartCountStat color={color} chartCount={chartCount} />,
!!viewCount && <ViewCountStat color={color} viewCount={viewCount} />,
!!uniqueUserCountLast30Days && <UserCountStat color={color} userCount={uniqueUserCountLast30Days} />,
!!lastUpdatedMs && <LastUpdatedStat color={color} lastUpdatedMs={lastUpdatedMs} createdMs={createdMs} />,
].filter(Boolean);

return <>{statsViews.length > 0 && <StatsSummary stats={statsViews} />}</>;
};
75 changes: 11 additions & 64 deletions datahub-web-react/src/app/entity/dashboard/shared/DashboardStatsSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,10 @@
import React from 'react';
import styled from 'styled-components';
import { Popover, Tooltip } from 'antd';
import { ClockCircleOutlined, EyeOutlined, TeamOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber';
import { ANTD_GRAY } from '../../shared/constants';
import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils';
import { StatsSummary } from '../../shared/components/styled/StatsSummary';
import { countFormatter, needsFormatting } from '../../../../utils/formatter';
import ExpandingStat from '../../dataset/shared/ExpandingStat';

const StatText = styled.span`
color: ${ANTD_GRAY[8]};
`;

const HelpIcon = styled(QuestionCircleOutlined)`
color: ${ANTD_GRAY[7]};
padding-left: 4px;
`;
import ChartCountStat from '../../shared/components/styled/stat/ChartCountStat';
import ViewCountStat from '../../shared/components/styled/stat/ViewCountStat';
import UserCountStat from '../../shared/components/styled/stat/UserCountStat';
import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat';

type Props = {
chartCount?: number | null;
Expand All @@ -33,55 +21,14 @@ export const DashboardStatsSummary = ({
lastUpdatedMs,
createdMs,
}: Props) => {
const color = ANTD_GRAY[7];

const statsViews = [
(!!chartCount && (
<ExpandingStat
disabled={!needsFormatting(chartCount)}
render={(isExpanded) => (
<StatText color={ANTD_GRAY[8]}>
<b>{isExpanded ? formatNumberWithoutAbbreviation(chartCount) : countFormatter(chartCount)}</b>{' '}
charts
</StatText>
)}
/>
)) ||
undefined,
(!!viewCount && (
<StatText>
<EyeOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
<b>{formatNumberWithoutAbbreviation(viewCount)}</b> views
</StatText>
)) ||
undefined,
(!!uniqueUserCountLast30Days && (
<StatText>
<TeamOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
<b>{formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)}</b> unique users
</StatText>
)) ||
undefined,
(!!lastUpdatedMs && (
<Popover
content={
<>
{createdMs && <div>Created on {toLocalDateTimeString(createdMs)}.</div>}
<div>
Changed on {toLocalDateTimeString(lastUpdatedMs)}.{' '}
<Tooltip title="The time at which the dashboard was last changed in the source platform">
<HelpIcon />
</Tooltip>
</div>
</>
}
>
<StatText>
<ClockCircleOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
Changed {toRelativeTimeString(lastUpdatedMs)}
</StatText>
</Popover>
)) ||
undefined,
].filter((stat) => stat !== undefined);
!!chartCount && <ChartCountStat color={color} chartCount={chartCount} />,
!!viewCount && <ViewCountStat color={color} viewCount={viewCount} />,
!!uniqueUserCountLast30Days && <UserCountStat color={color} userCount={uniqueUserCountLast30Days} />,
!!lastUpdatedMs && <LastUpdatedStat color={color} lastUpdatedMs={lastUpdatedMs} createdMs={createdMs} />,
].filter(Boolean);

return <>{statsViews.length > 0 && <StatsSummary stats={statsViews} />}</>;
};
84 changes: 20 additions & 64 deletions datahub-web-react/src/app/entity/dataset/shared/DatasetStatsSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
import React from 'react';
import styled from 'styled-components/macro';
import { Popover } from 'antd';
import { ClockCircleOutlined, ConsoleSqlOutlined, TableOutlined, TeamOutlined, HddOutlined } from '@ant-design/icons';
import { formatNumberWithoutAbbreviation } from '../../../shared/formatNumber';
import { ANTD_GRAY } from '../../shared/constants';
import { toLocalDateTimeString, toRelativeTimeString } from '../../../shared/time/timeUtils';
import { StatsSummary } from '../../shared/components/styled/StatsSummary';
import { FormattedBytesStat } from './FormattedBytesStat';
import { countFormatter, needsFormatting } from '../../../../utils/formatter';
import ExpandingStat from './ExpandingStat';

const StatText = styled.span<{ color: string }>`
color: ${(props) => props.color};
`;

const PopoverContent = styled.div`
max-width: 300px;
`;
import RowCountStat from '../../shared/components/styled/stat/RowCountStat';
import ByteCountStat from '../../shared/components/styled/stat/ByteCountStat';
import QueryCountStat from '../../shared/components/styled/stat/QueryCountStat';
import UserCountStat from '../../shared/components/styled/stat/UserCountStat';
import LastUpdatedStat from '../../shared/components/styled/stat/LastUpdatedStat';

type Props = {
rowCount?: number | null;
Expand Down Expand Up @@ -46,62 +35,29 @@ export const DatasetStatsSummary = ({

const statsViews = [
!!rowCount && (
<ExpandingStat
disabled={isTooltipMode || !needsFormatting(rowCount)}
render={(isExpanded) => (
<StatText color={displayedColor}>
<TableOutlined style={{ marginRight: 8, color: displayedColor }} />
<b>{isExpanded ? formatNumberWithoutAbbreviation(rowCount) : countFormatter(rowCount)}</b> rows
{!!columnCount && (
<>
,{' '}
<b>
{isExpanded
? formatNumberWithoutAbbreviation(columnCount)
: countFormatter(columnCount)}
</b>{' '}
columns
</>
)}
</StatText>
)}
<RowCountStat
color={displayedColor}
disabled={isTooltipMode}
rowCount={rowCount}
columnCount={columnCount}
/>
),
!!sizeInBytes && (
<StatText color={displayedColor}>
<HddOutlined style={{ marginRight: 8, color: displayedColor }} />
<FormattedBytesStat bytes={sizeInBytes} />
</StatText>
),
!!sizeInBytes && <ByteCountStat color={displayedColor} disabled={isTooltipMode} sizeInBytes={sizeInBytes} />,
(!!queryCountLast30Days || !!totalSqlQueries) && (
<StatText color={displayedColor}>
<ConsoleSqlOutlined style={{ marginRight: 8, color: displayedColor }} />
<b>{formatNumberWithoutAbbreviation(queryCountLast30Days || totalSqlQueries)}</b>{' '}
{queryCountLast30Days ? <>queries last month</> : <>monthly queries</>}
</StatText>
<QueryCountStat
color={displayedColor}
disabled={isTooltipMode}
queryCountLast30Days={queryCountLast30Days}
totalSqlQueries={totalSqlQueries}
/>
),
!!uniqueUserCountLast30Days && (
<StatText color={displayedColor}>
<TeamOutlined style={{ marginRight: 8, color: displayedColor }} />
<b>{formatNumberWithoutAbbreviation(uniqueUserCountLast30Days)}</b> unique users
</StatText>
<UserCountStat color={displayedColor} disabled={isTooltipMode} userCount={uniqueUserCountLast30Days} />
),
!!lastUpdatedMs && (
<Popover
content={
<PopoverContent>
Data was last updated in the source platform on{' '}
<strong>{toLocalDateTimeString(lastUpdatedMs)}</strong>
</PopoverContent>
}
>
<StatText color={displayedColor}>
<ClockCircleOutlined style={{ marginRight: 8, color: ANTD_GRAY[7] }} />
Updated {toRelativeTimeString(lastUpdatedMs)}
</StatText>
</Popover>
<LastUpdatedStat color={displayedColor} disabled={isTooltipMode} lastUpdatedMs={lastUpdatedMs} />
),
].filter((stat) => stat);
].filter(Boolean);

return <>{statsViews.length > 0 && <StatsSummary stats={statsViews} />}</>;
};
12 changes: 0 additions & 12 deletions datahub-web-react/src/app/entity/dataset/shared/FormattedBytesStat.tsx
View file
Open in desktop

This file was deleted.

33 changes: 18 additions & 15 deletions datahub-web-react/src/app/entity/shared/components/styled/StatsSummary.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,34 @@ type Props = {
};

const StatsContainer = styled.div`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we maybe add a minor padding/margin to the bottom? even like 4px or something. it looks a little tight on the bottom of the card between the stats and edge of card!

overflow: hidden;
margin-top: 8px;
`;

const StatsListContainer = styled.div`
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-left: -10px;
`;

const StatDivider = styled.div`
const StatContainer = styled.div`
/* Flex needed so the child stats can animate */
display: flex;
padding-left: 10px;
margin-right: 10px;
border-right: 1px solid ${ANTD_GRAY[4]};
height: 21px;
border-left: 1px solid ${ANTD_GRAY[4]};
`;

export const StatsSummary = ({ stats }: Props) => {
return (
<>
{stats && stats.length > 0 && (
<StatsContainer>
{stats.map((statView, index) => (
<>
{statView}
{index < stats.length - 1 && <StatDivider />}
</>
<StatsContainer>
{!!stats.length && (
<StatsListContainer>
{stats.map((statView) => (
<StatContainer>{statView}</StatContainer>
))}
</StatsContainer>
</StatsListContainer>
)}
</>
</StatsContainer>
);
};
38 changes: 38 additions & 0 deletions datahub-web-react/src/app/entity/shared/components/styled/stat/ByteCountStat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { HddOutlined } from '@ant-design/icons';
import StatText from './StatText';
import { formatBytes, formatNumberWithoutAbbreviation } from '../../../../../shared/formatNumber';
import { needsFormatting } from '../../../../../../utils/formatter';
import HorizontalExpander from '../../../../../shared/HorizontalExpander';

type Props = {
color: string;
disabled: boolean;
sizeInBytes: number;
};

const ByteCountStat = ({ color, disabled, sizeInBytes }: Props) => {
const formattedBytes = formatBytes(sizeInBytes);

return (
<HorizontalExpander
disabled={disabled || !needsFormatting(sizeInBytes)}
render={(isExpanded) => (
<StatText color={color}>
<HddOutlined style={{ marginRight: 8, color }} />
{isExpanded ? (
<>
<b>{formatNumberWithoutAbbreviation(sizeInBytes)}</b> Bytes
</>
) : (
<>
<b>{formattedBytes.number}</b> {formattedBytes.unit}
</>
)}
</StatText>
)}
/>
);
};

export default ByteCountStat;
Loading
Loading