diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx index fa5ab694..48da2377 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx @@ -1,5 +1,6 @@ import { useMemo } from 'react'; import PageviewsChart from 'components/metrics/PageviewsChart'; +import { getDateArray } from 'lib/date'; import useWebsitePageviews from 'components/hooks/queries/useWebsitePageviews'; import { useDateRange } from 'components/hooks'; @@ -18,8 +19,8 @@ export function WebsiteChart({ const chartData = useMemo(() => { if (data) { const result = { - pageviews, - sessions, + pageviews: getDateArray(pageviews, startDate, endDate, unit), + sessions: getDateArray(sessions, startDate, endDate, unit), }; if (compare) { @@ -42,15 +43,7 @@ export function WebsiteChart({ return { pageviews: [], sessions: [] }; }, [data, startDate, endDate, unit]); - return ( - - ); + return ; } export default WebsiteChart; diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index b9681221..cfcbe743 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -12,8 +12,6 @@ export interface BarChartProps extends ChartProps { renderYLabel?: (label: string, index: number, values: any[]) => string; XAxisType?: string; YAxisType?: string; - minDate?: number | string; - maxDate?: number | string; } export function BarChart(props: BarChartProps) { @@ -26,8 +24,6 @@ export function BarChart(props: BarChartProps) { XAxisType = 'time', YAxisType = 'linear', stacked = false, - minDate, - maxDate, } = props; const options: any = useMemo(() => { @@ -36,8 +32,6 @@ export function BarChart(props: BarChartProps) { x: { type: XAxisType, stacked: true, - min: minDate, - max: maxDate, time: { unit, }, diff --git a/src/components/metrics/EventsChart.tsx b/src/components/metrics/EventsChart.tsx index ee7f866c..0bb65eb2 100644 --- a/src/components/metrics/EventsChart.tsx +++ b/src/components/metrics/EventsChart.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import { colord } from 'colord'; import BarChart from 'components/charts/BarChart'; +import { getDateArray } from 'lib/date'; import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks'; import { CHART_COLORS } from 'lib/constants'; import { renderDateLabels } from 'lib/charts'; @@ -30,6 +31,10 @@ export function EventsChart({ websiteId, className }: EventsChartProps) { return obj; }, {}); + Object.keys(map).forEach(key => { + map[key] = getDateArray(map[key], startDate, endDate, unit); + }); + return { datasets: Object.keys(map).map((key, index) => { const color = colord(CHART_COLORS[index % CHART_COLORS.length]); diff --git a/src/components/metrics/RealtimeChart.tsx b/src/components/metrics/RealtimeChart.tsx index b2819f9c..b24eedb5 100644 --- a/src/components/metrics/RealtimeChart.tsx +++ b/src/components/metrics/RealtimeChart.tsx @@ -1,6 +1,7 @@ import { useMemo, useRef } from 'react'; import { startOfMinute, subMinutes, isBefore } from 'date-fns'; import PageviewsChart from './PageviewsChart'; +import { getDateArray } from 'lib/date'; import { DEFAULT_ANIMATION_DURATION, REALTIME_RANGE } from 'lib/constants'; import { RealtimeData } from 'lib/types'; @@ -21,8 +22,8 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) { } return { - pageviews: data.series.views, - sessions: data.series.visitors, + pageviews: getDateArray(data.series.views, startDate, endDate, unit), + sessions: getDateArray(data.series.visitors, startDate, endDate, unit), }; }, [data, startDate, endDate, unit]); @@ -36,14 +37,7 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) { }, [endDate]); return ( - + ); } diff --git a/src/lib/date.ts b/src/lib/date.ts index b731140c..b8bfa6c7 100644 --- a/src/lib/date.ts +++ b/src/lib/date.ts @@ -273,6 +273,19 @@ export function getMinimumUnit(startDate: number | Date, endDate: number | Date) return 'year'; } +export function getDateFromString(str: string) { + const [ymd, hms] = str.split(' '); + const [year, month, day] = ymd.split('-'); + + if (hms) { + const [hour, min, sec] = hms.split(':'); + + return new Date(+year, +month - 1, +day, +hour, +min, +sec); + } + + return new Date(+year, +month - 1, +day); +} + export function getDateArray(data: any[], startDate: Date, endDate: Date, unit: string) { const arr = []; const { diff, add, start } = DATE_FUNCTIONS[unit]; diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts index 110b4750..c450f1f0 100644 --- a/src/lib/prisma.ts +++ b/src/lib/prisma.ts @@ -12,11 +12,19 @@ import { filtersToArray } from './params'; const log = debug('umami:prisma'); const MYSQL_DATE_FORMATS = { - minute: '%Y-%m-%dT%H:%i:00Z', - hour: '%Y-%m-%dT%H:00:00Z', - day: '%Y-%m-%dT00:00:00Z', - month: '%Y-%m-01T00:00:00Z', - year: '%Y-01-01T00:00:00Z', + minute: '%Y-%m-%d %H:%i:00', + hour: '%Y-%m-%d %H:00:00', + day: '%Y-%m-%d', + month: '%Y-%m-01', + year: '%Y-01-01', +}; + +const POSTGRESQL_DATE_FORMATS = { + minute: 'YYYY-MM-DD HH24:MI:00', + hour: 'YYYY-MM-DD HH24:00:00', + day: 'YYYY-MM-DD', + month: 'YYYY-MM-01', + year: 'YYYY-01-01', }; function getAddIntervalQuery(field: string, interval: string): string { @@ -60,9 +68,9 @@ function getDateSQL(field: string, unit: string, timezone?: string): string { if (db === POSTGRESQL) { if (timezone) { - return `date_trunc('${unit}', ${field} at time zone '${timezone}')`; + return `to_char(date_trunc('${unit}', ${field} at time zone '${timezone}'), '${POSTGRESQL_DATE_FORMATS[unit]}')`; } - return `date_trunc('${unit}', ${field})`; + return `to_char(date_trunc('${unit}', ${field}), '${POSTGRESQL_DATE_FORMATS[unit]}')`; } if (db === MYSQL) { diff --git a/src/queries/analytics/sessions/getSessionStats.ts b/src/queries/analytics/sessions/getSessionStats.ts index cd049761..ee16e425 100644 --- a/src/queries/analytics/sessions/getSessionStats.ts +++ b/src/queries/analytics/sessions/getSessionStats.ts @@ -22,21 +22,14 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) { return rawQuery( ` select - ${getDateSQL('g.created_at', unit, timezone)} as x, - count(distinct g.session_id) as y - from ( - select - website_event.session_id, - min(website_event.created_at) as created_at, - count(*) y - from website_event + ${getDateSQL('website_event.created_at', unit, timezone)} x, + count(distinct website_event.session_id) y + from website_event ${joinSession} - where website_event.website_id = {{websiteId::uuid}} + where website_event.website_id = {{websiteId::uuid}} and website_event.created_at between {{startDate}} and {{endDate}} - and event_type = {{eventType}} + and event_type = {{eventType}} ${filterQuery} - group by website_event.session_id, website_event.created_at - ) as g group by 1 `, params,