watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 06:07:17 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Fixed bar chart rendering.

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

7
src/components/charts/BarChart.tsx
View file

@ -5,7 +5,7 @@ import { Chart, ChartProps } from '@/components/charts/Chart';
import { useLocale } from '@/components/hooks';
import { renderNumberLabels } from '@/lib/charts';
import { getThemeColors } from '@/lib/colors';
import { formatDate } from '@/lib/date';
import { formatDate, formatDateByUnit } from '@/lib/date';
import { formatLongCurrency, formatLongNumber } from '@/lib/format';
const dateFormats = {
@ -57,8 +57,9 @@ export function BarChart({
x: {
type: XAxisType,
stacked: true,
min: minDate,
max: maxDate,
min: formatDateByUnit(minDate, unit),
max: formatDateByUnit(maxDate, unit),
offset: true,
time: {
unit,
},

2
src/components/hooks/useLocale.ts
View file

@ -11,7 +11,7 @@ const messages = {
'en-US': enUS,
};
const selector = (state: { locale: any }) => state.locale;
const selector = (state: { locale: string }) => state.locale;
export function useLocale() {
const locale = useApp(selector);

15
src/components/metrics/PageviewsChart.tsx
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) }));
}