umami/components/metrics/PageviewsChart.js

71 lines
1.8 KiB
JavaScript

import React from 'react';
import { useIntl } from 'react-intl';
import CheckVisible from 'components/helpers/CheckVisible';
import BarChart from './BarChart';
export default function PageviewsChart({ websiteId, data, unit, records, className }) {
const intl = useIntl();
const handleUpdate = chart => {
const {
data: { datasets },
} = chart;
datasets[0].data = data.uniques;
datasets[0].label = intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
});
datasets[1].data = data.pageviews;
datasets[1].label = intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
});
chart.update();
};
if (!data) {
return null;
}
return (
<CheckVisible>
{visible => (
<BarChart
className={className}
chartId={websiteId}
datasets={[
{
label: intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
}),
data: data.uniques,
lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.4)',
borderColor: 'rgb(13, 102, 208, 0.4)',
borderWidth: 1,
},
{
label: intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
}),
data: data.pageviews,
lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.2)',
borderColor: 'rgb(13, 102, 208, 0.2)',
borderWidth: 1,
},
]}
unit={unit}
records={records}
animationDuration={visible ? 300 : 0}
onUpdate={handleUpdate}
/>
)}
</CheckVisible>
);
}