fix overview issues

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

apps/web/src/components/overview/overview-top-devices.tsx

@@ -189,35 +189,7 @@ export default function OverviewTopDevices({
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>
-          <ChartSwitch
+          <ChartSwitch hideID {...widget.chart} previous={false} />
-            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',
-            }}
-          />
         </WidgetBody>
       </Widget>
     </>

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) => (
+            {widgets
-              <button
+              .filter((item) => item.hide !== true)
-                key={w.key}
+              .map((w) => (
-                onClick={() => setWidget(w.key)}
+                <button
-                className={cn(w.key === widget.key && 'active')}
+                  key={w.key}
-              >
+                  onClick={() => setWidget(w.key)}
-                {w.btn}
+                  className={cn(w.key === widget.key && 'active')}
-              </button>
+                >
-            ))}
+                  {w.btn}
+                </button>
+              ))}
           </WidgetButtons>
         </WidgetHead>
         <WidgetBody>

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>(