Merge pull request #140 from mikecao/dev

Fix more button. Added NoData component.
This commit is contained in:
Mike Cao 2020-09-10 22:22:31 -07:00 committed by GitHub
commit 67787724fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 28 additions and 36 deletions

View File

@ -0,0 +1,12 @@
import React from 'react';
import classNames from 'classnames';
import { FormattedMessage } from 'react-intl';
import styles from './NoData.module.css';
export default function NoData({ className }) {
return (
<div className={classNames(styles.container, className)}>
<FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
</div>
);
}

View File

@ -0,0 +1,7 @@
.container {
color: var(--gray500);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

View File

@ -1,7 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import NoData from 'components/common/NoData';
import styles from './Table.module.css';
import { FormattedMessage } from 'react-intl';
export default function Table({ columns, rows, empty }) {
if (empty && rows.length === 0) {
@ -22,11 +22,7 @@ export default function Table({ columns, rows, empty }) {
))}
</div>
<div className={styles.body}>
{rows.length === 0 && (
<div className={styles.empty}>
<FormattedMessage id="message.no-data-available" defaultMessage="No data available." />
</div>
)}
{rows.length === 0 && <NoData />}
{rows.map((row, rowIndex) => (
<div className={classNames(styles.row, 'row')} key={rowIndex}>
{columns.map(({ key, render, className, style, cell }) => (

View File

@ -19,14 +19,6 @@
flex-direction: column;
}
.empty {
color: var(--gray500);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.row {
border-bottom: 1px solid var(--gray300);
padding: 10px 0;

View File

@ -1,16 +1,17 @@
import React, { useState, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
import { FixedSizeList } from 'react-window';
import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames';
import Button from 'components/common/Button';
import Loading from 'components/common/Loading';
import NoData from 'components/common/NoData';
import useFetch from 'hooks/useFetch';
import Arrow from 'assets/arrow-right.svg';
import { percentFilter } from 'lib/filters';
import { formatNumber, formatLongNumber } from 'lib/format';
import { useDateRange } from 'hooks/useDateRange';
import styles from './MetricsTable.module.css';
import { FormattedMessage } from 'react-intl';
export default function MetricsTable({
websiteId,
@ -77,7 +78,8 @@ export default function MetricsTable({
return (
<div className={classNames(styles.container, className)}>
{data ? (
{!data && <Loading />}
{data && (
<>
<div className={styles.header}>
<div className={styles.title}>{title}</div>
@ -87,14 +89,7 @@ export default function MetricsTable({
</div>
</div>
<div className={styles.body}>
{rankings?.length === 0 && (
<div className={styles.empty}>
<FormattedMessage
id="message.no-data-available"
defaultMessage="No data available."
/>
</div>
)}
{rankings?.length === 0 && <NoData />}
{limit
? rankings.map(row => getRow(row))
: rankings.length > 0 && (
@ -104,7 +99,7 @@ export default function MetricsTable({
)}
</div>
<div className={styles.footer}>
{limit && rankings.length > limit && (
{limit && data.length > limit && (
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
<div>
<FormattedMessage id="button.more" defaultMessage="More" />
@ -113,8 +108,6 @@ export default function MetricsTable({
)}
</div>
</>
) : (
<Loading />
)}
</div>
);

View File

@ -95,14 +95,6 @@
overflow: hidden;
}
.empty {
color: var(--gray500);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer {
display: flex;
justify-content: center;

View File

@ -1,6 +1,6 @@
{
"name": "umami",
"version": "0.27.0",
"version": "0.28.0",
"description": "A simple, fast, website analytics alternative to Google Analytics. ",
"author": "Mike Cao <mike@mikecao.com>",
"license": "MIT",