umami/components/pages/websites/WebsiteChartList.js
2023-03-31 05:55:28 -07:00

36 lines
973 B
JavaScript

import { useMemo } from 'react';
import { firstBy } from 'thenby';
import WebsiteChart from 'components/metrics/WebsiteChart';
import useDashboard from 'store/dashboard';
import styles from './WebsiteList.module.css';
export default function WebsiteChartList({ websites, showCharts, limit }) {
const { websiteOrder } = useDashboard();
const ordered = useMemo(
() =>
websites
.map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
.sort(firstBy('order')),
[websites, websiteOrder],
);
return (
<div>
{ordered.map(({ id, name, domain }, index) => {
return index < limit ? (
<div key={id} className={styles.website}>
<WebsiteChart
websiteId={id}
name={name}
domain={domain}
showChart={showCharts}
showDetailsButton={true}
/>
</div>
) : null;
})}
</div>
);
}