Created PieChart component. Refactored charts.

This commit is contained in:
Mike Cao 2024-03-14 20:26:52 -07:00
parent f277580722
commit f6524392e2
15 changed files with 403 additions and 336 deletions

View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import BarChart, { BarChartProps } from './BarChart';
import BarChart, { BarChartProps } from 'components/charts/BarChart';
import { useLocale, useTheme, useMessages } from 'components/hooks';
import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
import { renderDateLabels } from 'lib/charts';
export interface PageviewsChartProps extends BarChartProps {
data: {
@ -17,33 +17,36 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
const { colors } = useTheme();
const { locale } = useLocale();
const datasets = useMemo(() => {
if (!data) return [];
const chartData = useMemo(() => {
if (!data) {
return {};
}
return [
{
label: formatMessage(labels.visitors),
data: data.sessions,
borderWidth: 1,
...colors.chart.visitors,
},
{
label: formatMessage(labels.views),
data: data.pageviews,
borderWidth: 1,
...colors.chart.views,
},
];
}, [data, colors, formatMessage, labels]);
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,
},
],
};
}, [data]);
return (
<BarChart
{...props}
datasets={datasets}
data={chartData}
unit={unit}
isLoading={isLoading}
renderXLabel={renderDateLabels(unit, locale)}
renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/>
);
}