Fixed bar chart rendering.

This commit is contained in:
Mike Cao 2025-06-18 21:31:42 -07:00
parent 96fcdefeed
commit 3a737e7e25
5 changed files with 47 additions and 15 deletions

View file

@ -4,6 +4,7 @@ import { BarChart, BarChartProps } from '@/components/charts/BarChart';
import { useLocale, useMessages } from '@/components/hooks';
import { renderDateLabels } from '@/lib/charts';
import { getThemeColors } from '@/lib/colors';
import { formatDateByUnit } from '@/lib/date';
export interface PageviewsChartProps extends BarChartProps {
data: {
@ -20,7 +21,7 @@ export interface PageviewsChartProps extends BarChartProps {
export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
const { formatMessage, labels } = useMessages();
const { theme } = useTheme();
const { locale } = useLocale();
const { locale, dateLocale } = useLocale();
const { colors } = useMemo(() => getThemeColors(theme), [theme]);
const chartData: any = useMemo(() => {
@ -31,14 +32,18 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
datasets: [
{
label: formatMessage(labels.visitors),
data: data.sessions,
data: convertDataset(data.sessions, unit, dateLocale),
borderWidth: 1,
barPercentage: 0.9,
categoryPercentage: 0.9,
...colors.chart.visitors,
order: 3,
},
{
label: formatMessage(labels.views),
data: data.pageviews,
data: convertDataset(data.pageviews, unit, dateLocale),
barPercentage: 0.9,
categoryPercentage: 0.9,
borderWidth: 1,
...colors.chart.views,
order: 4,
@ -81,3 +86,7 @@ export function PageviewsChart({ data, unit, ...props }: PageviewsChartProps) {
/>
);
}
function convertDataset(data: { x: string; y: number }[], unit: string, locale?: any) {
return data.map(d => ({ ...d, x: formatDateByUnit(d.x, unit, locale) }));
}