2023-05-25 19:26:00 +02:00
|
|
|
import { useMemo } from 'react';
|
2024-03-15 04:26:52 +01:00
|
|
|
import BarChart, { BarChartProps } from 'components/charts/BarChart';
|
2023-08-21 11:06:09 +02:00
|
|
|
import { useLocale, useTheme, useMessages } from 'components/hooks';
|
2024-03-15 04:26:52 +01:00
|
|
|
import { renderDateLabels } from 'lib/charts';
|
2020-07-26 09:12:42 +02:00
|
|
|
|
2023-12-03 12:07:03 +01:00
|
|
|
export interface PageviewsChartProps extends BarChartProps {
|
|
|
|
data: {
|
|
|
|
sessions: any[];
|
|
|
|
pageviews: any[];
|
|
|
|
};
|
|
|
|
unit: string;
|
|
|
|
isLoading?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsChartProps) {
|
2023-03-22 22:05:55 +01:00
|
|
|
const { formatMessage, labels } = useMessages();
|
2023-05-25 06:40:02 +02:00
|
|
|
const { colors } = useTheme();
|
2023-04-19 20:41:31 +02:00
|
|
|
const { locale } = useLocale();
|
2023-03-09 01:37:43 +01:00
|
|
|
|
2024-03-15 04:26:52 +01:00
|
|
|
const chartData = useMemo(() => {
|
|
|
|
if (!data) {
|
|
|
|
return {};
|
|
|
|
}
|
2020-07-29 06:50:29 +02:00
|
|
|
|
2024-03-15 04:26:52 +01:00
|
|
|
return {
|
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
label: formatMessage(labels.visitors),
|
|
|
|
data: data.sessions,
|
|
|
|
borderWidth: 1,
|
|
|
|
...colors.chart.visitors,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
label: formatMessage(labels.views),
|
|
|
|
data: data.pageviews,
|
|
|
|
borderWidth: 1,
|
|
|
|
...colors.chart.views,
|
|
|
|
},
|
|
|
|
],
|
|
|
|
};
|
2024-04-02 06:33:04 +02:00
|
|
|
}, [data, locale]);
|
2023-03-15 06:37:50 +01:00
|
|
|
|
2020-07-26 09:12:42 +02:00
|
|
|
return (
|
2023-04-03 12:12:12 +02:00
|
|
|
<BarChart
|
|
|
|
{...props}
|
2024-03-15 04:26:52 +01:00
|
|
|
data={chartData}
|
2023-04-03 12:12:12 +02:00
|
|
|
unit={unit}
|
2023-12-03 12:07:03 +01:00
|
|
|
isLoading={isLoading}
|
2023-05-25 19:26:00 +02:00
|
|
|
renderXLabel={renderDateLabels(unit, locale)}
|
2023-04-03 12:12:12 +02:00
|
|
|
/>
|
2020-07-26 09:12:42 +02:00
|
|
|
);
|
|
|
|
}
|
2023-04-21 17:00:42 +02:00
|
|
|
|
|
|
|
export default PageviewsChart;
|