umami/components/metrics/PageviewsChart.js

87 lines
2.4 KiB
JavaScript
Raw Normal View History

2020-08-27 12:42:24 +02:00
import React from 'react';
2020-09-06 02:27:01 +02:00
import { useIntl } from 'react-intl';
import tinycolor from 'tinycolor2';
import CheckVisible from 'components/helpers/CheckVisible';
2020-08-26 18:58:24 +02:00
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';
2020-07-26 09:12:42 +02:00
export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
2020-09-06 02:27:01 +02:00
const intl = useIntl();
const [theme] = useTheme();
const primaryColor = tinycolor(THEME_COLORS[theme].primary);
const colors = {
views: {
background: primaryColor.setAlpha(0.4).toRgbString(),
border: primaryColor.setAlpha(0.5).toRgbString(),
},
visitors: {
background: primaryColor.setAlpha(0.6).toRgbString(),
border: primaryColor.setAlpha(0.7).toRgbString(),
},
};
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-08-26 18:58:24 +02:00
datasets[0].data = data.uniques;
datasets[0].label = intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
});
2020-08-26 18:58:24 +02:00
datasets[1].data = data.pageviews;
datasets[1].label = intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
});
2020-07-31 08:08:33 +02:00
2020-08-26 18:58:24 +02:00
chart.update();
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 (
<CheckVisible>
{visible => (
<BarChart
className={className}
chartId={websiteId}
datasets={[
{
2020-09-06 02:27:01 +02:00
label: intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
}),
data: data.uniques,
lineTension: 0,
backgroundColor: colors.visitors.background,
borderColor: colors.visitors.border,
borderWidth: 1,
},
{
2020-09-06 02:27:01 +02:00
label: intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
}),
data: data.pageviews,
lineTension: 0,
backgroundColor: colors.views.background,
borderColor: colors.views.border,
borderWidth: 1,
},
]}
unit={unit}
2020-08-31 23:11:30 +02:00
records={records}
animationDuration={visible ? 300 : 0}
onUpdate={handleUpdate}
loading={loading}
/>
)}
</CheckVisible>
2020-07-26 09:12:42 +02:00
);
}