umami/components/metrics/PageviewsChart.js

69 lines
1.7 KiB
JavaScript
Raw Normal View History

2023-03-22 22:05:55 +01:00
import { useMemo } from 'react';
2022-01-14 09:39:27 +01:00
import { colord } from 'colord';
2020-08-26 18:58:24 +02:00
import BarChart from './BarChart';
2023-04-03 12:12:12 +02:00
import { THEME_COLORS } from 'lib/constants';
2023-03-22 22:05:55 +01:00
import useTheme from 'hooks/useTheme';
import useMessages from 'hooks/useMessages';
2020-07-26 09:12:42 +02:00
2020-10-09 10:04:06 +02:00
export default function PageviewsChart({
websiteId,
data,
unit,
records,
className,
loading,
2020-10-10 02:58:27 +02:00
...props
2020-10-09 10:04:06 +02:00
}) {
2023-03-22 22:05:55 +01:00
const { formatMessage, labels } = useMessages();
const [theme] = useTheme();
const colors = useMemo(() => {
const primaryColor = colord(THEME_COLORS[theme].primary);
return {
views: {
hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
backgroundColor: primaryColor.alpha(0.4).toRgbString(),
borderColor: primaryColor.alpha(0.7).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
visitors: {
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
};
}, [theme]);
2020-09-06 02:27:01 +02:00
2023-03-26 13:15:08 +02:00
const datasets = useMemo(() => {
if (!data) return [];
2020-07-29 06:50:29 +02:00
2023-03-26 13:15:08 +02:00
return [
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
borderWidth: 1,
...colors.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
borderWidth: 1,
...colors.views,
},
];
}, [data]);
2020-07-26 09:12:42 +02:00
return (
2023-04-03 12:12:12 +02:00
<BarChart
{...props}
key={websiteId}
className={className}
datasets={datasets}
unit={unit}
records={records}
loading={loading}
/>
2020-07-26 09:12:42 +02:00
);
}