Weekly session data.

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

@@ -8,6 +8,7 @@ import { GridRow } from 'components/layout/Grid';
 import { Item, Tabs } from 'react-basics';
 import { useState } from 'react';
 import { useMessages } from 'components/hooks';
+import SessionsWeekly from './SessionsWeekly';
 
 export function SessionsPage({ websiteId }) {
   const [tab, setTab] = useState('activity');
@@ -17,8 +18,9 @@ export function SessionsPage({ websiteId }) {
     <>
       <WebsiteHeader websiteId={websiteId} />
       <SessionsMetricsBar websiteId={websiteId} />
-      <GridRow columns="one">
-        <WorldMap websiteId={websiteId} style={{ width: 800, margin: '0 auto' }} />
+      <GridRow columns="two-one">
+        <WorldMap websiteId={websiteId} />
+        <SessionsWeekly websiteId={websiteId} />
       </GridRow>
       <Tabs selectedKey={tab} onSelect={(value: any) => setTab(value)} style={{ marginBottom: 30 }}>
         <Item key="activity">{formatMessage(labels.activity)}</Item>

src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css

@@ -0,0 +1,40 @@
+.week {
+  display: flex;
+  justify-content: space-between;
+  position: relative;
+}
+
+.header {
+  text-align: center;
+  font-weight: 700;
+  margin-bottom: 10px;
+}
+
+.day {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  position: relative;
+}
+
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--base100);
+  width: 20px;
+  height: 20px;
+}
+
+.hour {
+  font-weight: 700;
+  color: var(--font-color300);
+  background-color: transparent;
+}
+
+.block {
+  background-color: var(--primary400);
+  width: 20px;
+  height: 20px;
+  border-radius: 3px;
+}

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

@@ -0,0 +1,78 @@
+import { format } from 'date-fns';
+import { useLocale, useMessages, useWebsiteSessionsWeekly } from 'components/hooks';
+import { LoadingPanel } from 'components/common/LoadingPanel';
+import { getDayOfWeekAsDate } from 'lib/date';
+import styles from './SessionsWeekly.module.css';
+import classNames from 'classnames';
+import { TooltipPopup } from 'react-basics';
+
+export function SessionsWeekly({ websiteId }: { websiteId: string }) {
+  const { data, ...props } = useWebsiteSessionsWeekly(websiteId);
+  const { dateLocale } = useLocale();
+  const { labels, formatMessage } = useMessages();
+
+  const [, max] = data
+    ? data.reduce((arr: number[], hours: number[], index: number) => {
+        const min = Math.min(...hours);
+        const max = Math.max(...hours);
+
+        if (index === 0) {
+          return [min, max];
+        }
+
+        if (min < arr[0]) {
+          arr[0] = min;
+        }
+
+        if (max > arr[1]) {
+          arr[1] = max;
+        }
+
+        return arr;
+      }, [])
+    : [];
+
+  return (
+    <LoadingPanel {...(props as any)} data={data}>
+      <div className={styles.week}>
+        <div className={styles.day}>
+          <div className={styles.header}>&nbsp;</div>
+          {Array(24)
+            .fill(null)
+            .map((_, i) => {
+              return (
+                <div key={i} className={classNames(styles.cell, styles.hour)}>
+                  {i.toString().padStart(2, '0')}
+                </div>
+              );
+            })}
+        </div>
+        {data?.map((day: number[], index: number) => {
+          return (
+            <div className={styles.day} key={index}>
+              <div className={styles.header}>
+                {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
+              </div>
+              {day?.map((hour: number) => {
+                return (
+                  <div key={hour} className={classNames(styles.cell)}>
+                    {hour > 0 && (
+                      <TooltipPopup
+                        label={`${formatMessage(labels.visitors)}: ${hour}`}
+                        position="right"
+                      >
+                        <div className={styles.block} style={{ opacity: hour / max }} />
+                      </TooltipPopup>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          );
+        })}
+      </div>
+    </LoadingPanel>
+  );
+}
+
+export default SessionsWeekly;