umami/components/metrics/PageviewsChart.js

86 lines
2.2 KiB
JavaScript
Raw Normal View History

import { useVisible } from 'react-basics';
2020-09-06 02:27:01 +02:00
import { useIntl } from 'react-intl';
2022-01-14 09:39:27 +01:00
import { colord } from 'colord';
2020-08-26 18:58:24 +02:00
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
2020-10-09 21:39:03 +02:00
import { THEME_COLORS, DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import { labels } from 'components/messages';
import { useMemo } from 'react';
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-09 21:39:03 +02:00
animationDuration = DEFAULT_ANIMATION_DURATION,
2020-10-10 02:58:27 +02:00
...props
2020-10-09 10:04:06 +02:00
}) {
const { formatMessage } = useIntl();
const [theme] = useTheme();
const { ref, visible } = useVisible();
const colors = useMemo(() => {
const primaryColor = colord(THEME_COLORS[theme].primary);
return {
views: {
background: primaryColor.alpha(0.4).toRgbString(),
border: primaryColor.alpha(0.5).toRgbString(),
},
visitors: {
background: primaryColor.alpha(0.6).toRgbString(),
border: primaryColor.alpha(0.7).toRgbString(),
},
};
}, [theme]);
2020-09-06 02:27:01 +02:00
2020-08-26 18:58:24 +02:00
const handleUpdate = chart => {
const {
data: { datasets },
} = chart;
2020-07-29 06:50:29 +02:00
2020-10-09 08:26:05 +02:00
datasets[0].data = data.sessions;
datasets[0].label = formatMessage(labels.uniqueVisitors);
2020-08-26 18:58:24 +02:00
datasets[1].data = data.pageviews;
datasets[1].label = formatMessage(labels.pageViews);
2020-07-29 06:50:29 +02:00
};
2020-07-26 09:12:42 +02:00
2020-08-26 18:58:24 +02:00
if (!data) {
return null;
2020-07-26 09:12:42 +02:00
}
return (
<div ref={ref}>
<BarChart
{...props}
className={className}
chartId={websiteId}
datasets={[
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
lineTension: 0,
backgroundColor: colors.visitors.background,
borderColor: colors.visitors.border,
borderWidth: 1,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
lineTension: 0,
backgroundColor: colors.views.background,
borderColor: colors.views.border,
borderWidth: 1,
},
]}
unit={unit}
records={records}
animationDuration={visible ? animationDuration : 0}
onUpdate={handleUpdate}
loading={loading}
/>
</div>
2020-07-26 09:12:42 +02:00
);
}