add 30 min active user histogram

apps/web/src/app/(app)/[organizationId]/[projectId]/overview-metrics.tsx

@@ -187,9 +187,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
             setMetric(index);
           }}
         >
-          <Suspense fallback={<MetricCardLoading />}>
-            <Chart hideID {...report} />
-          </Suspense>
+          <Chart hideID {...report} />
           <div
             className={cn(
               'transition-opacity top-0 left-0 right-0 bottom-0 absolute rounded-md w-full h-full border ring-1 border-chart-0 ring-chart-0',
@@ -204,14 +202,12 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
           <div className="title">{selectedMetric.events[0]?.displayName}</div>
         </WidgetHead>
         <WidgetBody>
-          <Suspense fallback={<ChartLoading />}>
-            <Chart
-              key={selectedMetric.id}
-              hideID
-              {...selectedMetric}
-              chartType="linear"
-            />
-          </Suspense>
+          <Chart
+            key={selectedMetric.id}
+            hideID
+            {...selectedMetric}
+            chartType="linear"
+          />
         </WidgetBody>
       </Widget>
     </>

apps/web/src/app/(app)/[organizationId]/[projectId]/page.tsx

@@ -2,6 +2,7 @@ import PageLayout from '@/app/(app)/[organizationId]/[projectId]/page-layout';
 import ServerLiveCounter from '@/components/overview/live-counter';
 import { OverviewFilters } from '@/components/overview/overview-filters';
 import { OverviewFiltersButtons } from '@/components/overview/overview-filters-buttons';
+import { OverviewLiveHistogram } from '@/components/overview/overview-live-histogram';
 import { OverviewShare } from '@/components/overview/overview-share';
 import OverviewTopDevices from '@/components/overview/overview-top-devices';
 import OverviewTopEvents from '@/components/overview/overview-top-events';
@@ -42,19 +43,22 @@ export default async function Page({
   return (
     <PageLayout title="Overview" organizationSlug={organizationId}>
       <Sheet>
-        <StickyBelowHeader className="p-4 flex gap-2 justify-between">
-          <div className="flex gap-2">
-            <OverviewReportRange />
-            <OverviewFilterSheetTrigger />
-          </div>
-          <div className="flex gap-2">
-            <ServerLiveCounter projectId={projectId} />
-            <OverviewShare data={share} />
+        <StickyBelowHeader>
+          <div className="p-4 flex gap-2 justify-between">
+            <div className="flex gap-2">
+              <OverviewReportRange />
+              <OverviewFilterSheetTrigger />
+            </div>
+            <div className="flex gap-2">
+              <ServerLiveCounter projectId={projectId} />
+              <OverviewShare data={share} />
+            </div>
           </div>
+          <OverviewFiltersButtons />
         </StickyBelowHeader>
         <div className="p-4 grid gap-4 grid-cols-6">
-          <div className="col-span-6 flex flex-wrap gap-2">
-            <OverviewFiltersButtons />
+          <div className="col-span-6">
+            <OverviewLiveHistogram projectId={projectId} />
           </div>
           <OverviewMetrics projectId={projectId} />
           <OverviewTopSources projectId={projectId} />

apps/web/src/app/(app)/[organizationId]/[projectId]/reports/report-editor.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { Suspense, useEffect } from 'react';
+import { useEffect } from 'react';
 import { StickyBelowHeader } from '@/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header';
 import { Chart } from '@/components/report/chart';
-import { ChartLoading } from '@/components/report/chart/ChartLoading';
 import { ReportChartType } from '@/components/report/ReportChartType';
 import { ReportInterval } from '@/components/report/ReportInterval';
 import { ReportLineType } from '@/components/report/ReportLineType';
@@ -18,6 +17,7 @@ import {
 import { ReportSidebar } from '@/components/report/sidebar/ReportSidebar';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
+import { useAppParams } from '@/hooks/useAppParams';
 import { useDispatch, useSelector } from '@/redux';
 import type { IServiceReport } from '@/server/services/reports.service';
 import { GanttChartSquareIcon } from 'lucide-react';
@@ -29,6 +29,7 @@ interface ReportEditorProps {
 export default function ReportEditor({
   report: initialReport,
 }: ReportEditorProps) {
+  const { projectId } = useAppParams();
   const dispatch = useDispatch();
   const report = useSelector((state) => state.report);
 
@@ -72,11 +73,7 @@ export default function ReportEditor({
         </div>
       </StickyBelowHeader>
       <div className="flex flex-col gap-4 p-4">
-        {report.ready && (
-          <Suspense fallback={<ChartLoading />}>
-            <Chart {...report} editMode />
-          </Suspense>
-        )}
+        {report.ready && <Chart {...report} projectId={projectId} editMode />}
       </div>
       <SheetContent className="!max-w-lg w-full" side="left">
         <ReportSidebar />