Revert "Fixed realtime chart for relational. Removed getDateArray. Added chart min/max dates."

This reverts commit 647dcb5f25.

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,
+        pageviews: getDateArray(pageviews, startDate, endDate, unit),
-        sessions,
+        sessions: getDateArray(sessions, startDate, endDate, unit),
       };
 
       if (compare) {
@@ -42,15 +43,7 @@ export function WebsiteChart({
     return { pageviews: [], sessions: [] };
   }, [data, startDate, endDate, unit]);
 
-  return (
+  return <PageviewsChart data={chartData} unit={unit} isLoading={isLoading} />;
-    <PageviewsChart
-      data={chartData}
-      minDate={startDate.toISOString()}
-      maxDate={endDate.toISOString()}
-      unit={unit}
-      isLoading={isLoading}
-    />
-  );
 }
 
 export default WebsiteChart;

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,
           },

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]);

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,
+      pageviews: getDateArray(data.series.views, startDate, endDate, unit),
-      sessions: data.series.visitors,
+      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 (
-    <PageviewsChart
+    <PageviewsChart {...props} unit={unit} data={chartData} animationDuration={animationDuration} />
-      {...props}
-      minDate={startDate.toISOString()}
-      maxDate={endDate.toISOString()}
-      unit={unit}
-      data={chartData}
-      animationDuration={animationDuration}
-    />
   );
 }
 

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];

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',
+  minute: '%Y-%m-%d %H:%i:00',
-  hour: '%Y-%m-%dT%H:00:00Z',
+  hour: '%Y-%m-%d %H:00:00',
-  day: '%Y-%m-%dT00:00:00Z',
+  day: '%Y-%m-%d',
-  month: '%Y-%m-01T00:00:00Z',
+  month: '%Y-%m-01',
-  year: '%Y-01-01T00:00:00Z',
+  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) {

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,
+      ${getDateSQL('website_event.created_at', unit, timezone)} x,
-      count(distinct g.session_id) as y
+      count(distinct website_event.session_id) y
-    from (
+    from website_event
-      select
-        website_event.session_id,
-        min(website_event.created_at) as created_at,
-        count(*) 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}}
       ${filterQuery}
-      group by website_event.session_id, website_event.created_at
-    ) as g
     group by 1
     `,
     params,