From 16b67f1b2b3eeef3c0ba6521d954e5750acbeff6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Wed, 28 Feb 2024 12:09:42 +0100
Subject: [PATCH] fix overview issues

---
 .../layout-sticky-below-header.tsx            |  2 +-
 .../overview/overview-top-devices.tsx         | 30 +------------------
 .../overview-top-events.tsx                   | 21 +++++++------
 .../components/overview/useOverviewWidget.tsx |  5 +++-
 4 files changed, 18 insertions(+), 40 deletions(-)

diff --git a/apps/web/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx b/apps/web/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
index f2ec414b..b0cd9b5e 100644
--- a/apps/web/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
+++ b/apps/web/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
@@ -12,7 +12,7 @@ export function StickyBelowHeader({
   return (
     <div
       className={cn(
-        'md:sticky bg-white border-b border-border z-10 [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none rounded-lg top-0',
+        'md:sticky bg-white border-b border-border z-20 [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none rounded-lg top-0',
         className
       )}
     >
diff --git a/apps/web/src/components/overview/overview-top-devices.tsx b/apps/web/src/components/overview/overview-top-devices.tsx
index 4d346f25..0b3daebb 100644
--- a/apps/web/src/components/overview/overview-top-devices.tsx
+++ b/apps/web/src/components/overview/overview-top-devices.tsx
@@ -189,35 +189,7 @@ export default function OverviewTopDevices({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
-            hideID
-            {...{
-              projectId,
-              startDate,
-              endDate,
-              events: [
-                {
-                  segment: 'user',
-                  filters,
-                  id: 'A',
-                  name: 'session_start',
-                },
-              ],
-              breakdowns: [
-                {
-                  id: 'A',
-                  name: 'browser_version',
-                },
-              ],
-              chartType: 'bar',
-              lineType: 'monotone',
-              interval: interval,
-              name: 'Top sources',
-              range: range,
-              previous: previous,
-              metric: 'sum',
-            }}
-          />
+          <ChartSwitch hideID {...widget.chart} previous={false} />
         </WidgetBody>
       </Widget>
     </>
diff --git a/apps/web/src/components/overview/overview-top-events/overview-top-events.tsx b/apps/web/src/components/overview/overview-top-events/overview-top-events.tsx
index 0519ba21..7ec1cab3 100644
--- a/apps/web/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/apps/web/src/components/overview/overview-top-events/overview-top-events.tsx
@@ -62,6 +62,7 @@ export default function OverviewTopEvents({
     conversions: {
       title: 'Conversions',
       btn: 'Conversions',
+      hide: conversions.length === 0,
       chart: {
         projectId,
         startDate,
@@ -105,15 +106,17 @@ export default function OverviewTopEvents({
         <WidgetHead>
           <div className="title">{widget.title}</div>
           <WidgetButtons>
-            {widgets.map((w) => (
-              <button
-                key={w.key}
-                onClick={() => setWidget(w.key)}
-                className={cn(w.key === widget.key && 'active')}
-              >
-                {w.btn}
-              </button>
-            ))}
+            {widgets
+              .filter((item) => item.hide !== true)
+              .map((w) => (
+                <button
+                  key={w.key}
+                  onClick={() => setWidget(w.key)}
+                  className={cn(w.key === widget.key && 'active')}
+                >
+                  {w.btn}
+                </button>
+              ))}
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
diff --git a/apps/web/src/components/overview/useOverviewWidget.tsx b/apps/web/src/components/overview/useOverviewWidget.tsx
index 62e0dd5e..a516c471 100644
--- a/apps/web/src/components/overview/useOverviewWidget.tsx
+++ b/apps/web/src/components/overview/useOverviewWidget.tsx
@@ -5,7 +5,10 @@ import type { IChartInput } from '@mixan/validation';
 
 export function useOverviewWidget<T extends string>(
   key: string,
-  widgets: Record<T, { title: string; btn: string; chart: IChartInput }>
+  widgets: Record<
+    T,
+    { title: string; btn: string; chart: IChartInput; hide?: boolean }
+  >
 ) {
   const keys = Object.keys(widgets) as T[];
   const [widget, setWidget] = useQueryState<T>(