umami/components/pages/websites/WebsiteChartList.js

65 lines
1.8 KiB
JavaScript
Raw Normal View History

2022-08-04 23:30:09 +02:00
import { defineMessages, useIntl } from 'react-intl';
2020-10-02 02:32:49 +02:00
import Link from 'components/common/Link';
import WebsiteChart from 'components/metrics/WebsiteChart';
2020-08-12 07:24:41 +02:00
import Page from 'components/layout/Page';
import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
import Arrow from 'assets/arrow-right.svg';
2020-07-30 08:25:52 +02:00
import styles from './WebsiteList.module.css';
2022-08-04 12:56:30 +02:00
import useDashboard from 'store/dashboard';
import { useMemo } from 'react';
import { firstBy } from 'thenby';
2022-08-04 23:30:09 +02:00
const messages = defineMessages({
noWebsites: {
id: 'message.no-websites-configured',
defaultMessage: "You don't have any websites configured.",
},
goToSettngs: {
id: 'message.go-to-buttons',
defaultMessage: 'Go to buttons',
2022-08-04 23:30:09 +02:00
},
});
2022-08-05 06:37:18 +02:00
export default function WebsiteList({ websites, showCharts, limit }) {
2022-08-04 12:56:30 +02:00
const { websiteOrder } = useDashboard();
2022-08-04 23:30:09 +02:00
const { formatMessage } = useIntl();
2022-08-05 06:37:18 +02:00
const ordered = useMemo(
() =>
websites
2022-11-01 07:42:37 +01:00
.map(website => ({ ...website, order: websiteOrder.indexOf(website.id) || 0 }))
.sort(firstBy('order')),
2022-08-05 06:37:18 +02:00
[websites, websiteOrder],
);
2022-03-04 04:45:49 +01:00
if (websites.length === 0) {
return (
<Page>
2022-08-04 23:30:09 +02:00
<EmptyPlaceholder msg={formatMessage(messages.noWebsites)}>
<Link href="/websites" icon={<Arrow />} iconRight>
2022-08-04 23:30:09 +02:00
{formatMessage(messages.goToSettngs)}
2020-10-02 02:32:49 +02:00
</Link>
</EmptyPlaceholder>
</Page>
);
}
return (
2022-08-04 12:56:30 +02:00
<div>
2022-11-01 07:42:37 +01:00
{ordered.map(({ id, name, domain }, index) =>
2022-08-04 12:56:30 +02:00
index < limit ? (
2022-11-01 07:42:37 +01:00
<div key={id} className={styles.website}>
2022-08-04 12:56:30 +02:00
<WebsiteChart
2022-11-01 07:42:37 +01:00
websiteId={id}
2022-08-04 12:56:30 +02:00
title={name}
domain={domain}
showChart={showCharts}
showLink
/>
</div>
) : null,
)}
2022-03-04 04:45:49 +01:00
</div>
);
}