umami/components/metrics/MetricsTable.js

142 lines
4.1 KiB
JavaScript
Raw Normal View History

import React, { useState, useMemo } from 'react';
import { FormattedMessage } from 'react-intl';
2020-08-10 00:13:38 +02:00
import { FixedSizeList } from 'react-window';
2020-08-04 03:12:28 +02:00
import { useSpring, animated, config } from 'react-spring';
2020-08-01 04:05:14 +02:00
import classNames from 'classnames';
2020-08-09 12:04:48 +02:00
import Button from 'components/common/Button';
import Loading from 'components/common/Loading';
import NoData from 'components/common/NoData';
import useFetch from 'hooks/useFetch';
2020-08-09 12:04:48 +02:00
import Arrow from 'assets/arrow-right.svg';
2020-08-01 12:34:56 +02:00
import { percentFilter } from 'lib/filters';
2020-08-19 23:35:38 +02:00
import { formatNumber, formatLongNumber } from 'lib/format';
2020-09-01 00:02:32 +02:00
import { useDateRange } from 'hooks/useDateRange';
import styles from './MetricsTable.module.css';
2020-08-01 04:05:14 +02:00
export default function MetricsTable({
2020-08-01 04:05:14 +02:00
websiteId,
websiteDomain,
2020-08-31 23:11:30 +02:00
title,
metric,
2020-08-01 04:05:14 +02:00
type,
className,
2020-08-01 05:37:29 +02:00
dataFilter,
filterOptions,
2020-08-10 00:13:38 +02:00
limit,
headerComponent,
2020-08-25 08:49:14 +02:00
renderLabel,
2020-08-01 12:34:56 +02:00
onDataLoad = () => {},
2020-08-09 12:04:48 +02:00
onExpand = () => {},
2020-08-01 04:05:14 +02:00
}) {
2020-09-01 00:02:32 +02:00
const dateRange = useDateRange(websiteId);
const { startDate, endDate, modified } = dateRange;
const { data } = useFetch(
`/api/website/${websiteId}/rankings`,
{
type,
start_at: +startDate,
end_at: +endDate,
domain: websiteDomain,
},
2020-08-31 23:11:30 +02:00
{ onDataLoad, delay: 300, update: [modified] },
);
2020-08-19 23:35:38 +02:00
const [format, setFormat] = useState(true);
const formatFunc = format ? formatLongNumber : formatNumber;
const shouldAnimate = limit > 0;
2020-08-01 04:05:14 +02:00
2020-08-01 06:56:25 +02:00
const rankings = useMemo(() => {
if (data) {
const items = percentFilter(dataFilter ? dataFilter(data, filterOptions) : data);
2020-08-10 00:13:38 +02:00
if (limit) {
return items.filter((e, i) => i < limit);
}
return items;
2020-08-01 06:56:25 +02:00
}
return [];
2020-08-23 07:01:14 +02:00
}, [data, dataFilter, filterOptions]);
2020-08-01 04:05:14 +02:00
2020-08-25 08:49:14 +02:00
const handleSetFormat = () => setFormat(state => !state);
2020-08-01 04:05:14 +02:00
2020-08-25 08:49:14 +02:00
const getRow = row => {
const { x: label, y: value, z: percent } = row;
2020-08-10 00:13:38 +02:00
return (
<AnimatedRow
2020-08-25 08:49:14 +02:00
key={label}
label={renderLabel ? renderLabel(row) : label}
value={value}
percent={percent}
animate={shouldAnimate}
format={formatFunc}
onClick={handleSetFormat}
/>
2020-08-10 00:13:38 +02:00
);
2020-08-25 08:49:14 +02:00
};
const Row = ({ index, style }) => {
2020-08-25 08:49:14 +02:00
return <div style={style}>{getRow(rankings[index])}</div>;
2020-08-10 00:13:38 +02:00
};
2020-08-01 04:05:14 +02:00
return (
2020-08-10 00:13:38 +02:00
<div className={classNames(styles.container, className)}>
{!data && <Loading />}
{data && (
<>
<div className={styles.header}>
<div className={styles.title}>{title}</div>
{headerComponent}
<div className={styles.metric} onClick={handleSetFormat}>
{metric}
</div>
</div>
<div className={styles.body}>
{rankings?.length === 0 && <NoData />}
{limit
? rankings.map(row => getRow(row))
2020-09-11 06:05:02 +02:00
: rankings.length > 0 && (
<FixedSizeList height={500} itemCount={rankings.length} itemSize={30}>
{Row}
</FixedSizeList>
)}
</div>
<div className={styles.footer}>
{limit && data.length > limit && (
<Button icon={<Arrow />} size="xsmall" onClick={() => onExpand(type)}>
2020-09-06 02:27:01 +02:00
<div>
<FormattedMessage id="button.more" defaultMessage="More" />
</div>
</Button>
2020-08-25 08:49:14 +02:00
)}
</div>
</>
)}
2020-08-10 00:13:38 +02:00
</div>
2020-08-01 04:05:14 +02:00
);
}
2020-08-25 08:49:14 +02:00
const AnimatedRow = ({ label, value = 0, percent, animate, format, onClick }) => {
2020-08-04 03:12:28 +02:00
const props = useSpring({
width: percent,
y: value,
from: { width: 0, y: 0 },
config: animate ? config.default : { duration: 0 },
});
2020-08-01 04:05:14 +02:00
return (
<div className={styles.row}>
2020-08-25 08:49:14 +02:00
<div className={styles.label}>{label}</div>
<div className={styles.value} onClick={onClick}>
<animated.div className={styles.value}>{props.y?.interpolate(format)}</animated.div>
</div>
2020-08-01 05:37:29 +02:00
<div className={styles.percent}>
2020-08-04 03:12:28 +02:00
<animated.div
className={styles.bar}
style={{ width: props.width.interpolate(n => `${n}%`) }}
/>
<animated.span className={styles.percentValue}>
{props.width.interpolate(n => `${n.toFixed(0)}%`)}
</animated.span>
2020-08-01 05:37:29 +02:00
</div>
2020-08-01 04:05:14 +02:00
</div>
);
};