Added map to sessions page.

src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx

@@ -2,12 +2,17 @@
 import WebsiteHeader from '../WebsiteHeader';
 import SessionsDataTable from './SessionsDataTable';
 import SessionsMetricsBar from './SessionsMetricsBar';
+import WorldMap from 'components/metrics/WorldMap';
+import { GridRow } from 'components/layout/Grid';
 
 export function SessionsPage({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
       <SessionsMetricsBar websiteId={websiteId} />
+      <GridRow columns="one">
+        <WorldMap websiteId={websiteId} style={{ width: 800, margin: '0 auto' }} />
+      </GridRow>
       <SessionsDataTable websiteId={websiteId} />
     </>
   );

src/components/hooks/useTimezone.ts

@@ -14,7 +14,13 @@ export function useTimezone() {
   };
 
   const formatDate = (date: string, pattern: string) => {
-    return formatInTimeZone(date.split(' ').join('T') + 'Z', timezone, pattern);
+    return formatInTimeZone(
+      /^[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}:[0-9]{2}Z$/.test(date)
+        ? date
+        : date.split(' ').join('T') + 'Z',
+      timezone,
+      pattern,
+    );
   };
 
   return { timezone, saveTimezone, formatDate };

src/components/metrics/WorldMap.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react';
+import { useState, useMemo, HTMLAttributes } from 'react';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
@@ -16,11 +16,12 @@ export function WorldMap({
   websiteId,
   data,
   className,
+  ...props
 }: {
   websiteId?: string;
   data?: any[];
   className?: string;
-}) {
+} & HTMLAttributes<HTMLDivElement>) {
   const [tooltip, setTooltipPopup] = useState();
   const { theme, colors } = useTheme();
   const { locale } = useLocale();
@@ -67,6 +68,7 @@ export function WorldMap({
 
   return (
     <div
+      {...props}
       className={classNames(styles.container, className)}
       data-tip=""
       data-for="world-map-tooltip"

src/queries/analytics/sessions/getWebsiteSessions.ts

@@ -60,7 +60,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters, pagePar
       data: result.data.map((row: any) => {
         return {
           ...row,
-          createdAt: row.firstAt,
+          createdAt: row.lastAt,
           visits: Number(row.visits),
           views: Number(row.views),
         };