dashboard: update event and profile list

apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx

@@ -1,10 +1,13 @@
 'use client';
 
 import { ChartSwitch } from '@/components/report/chart';
+import { Button } from '@/components/ui/button';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
+import { BarChartIcon, LineChart, LineChartIcon } from 'lucide-react';
 
 import { Widget, WidgetBody } from '../../Widget';
+import { OverviewChartToggle } from '../overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from '../overview-widget';
 import { useOverviewOptions } from '../useOverviewOptions';
 import { useOverviewWidget } from '../useOverviewWidget';
@@ -17,8 +20,15 @@ export default function OverviewTopEvents({
   projectId,
   conversions,
 }: OverviewTopEventsProps) {
-  const { interval, range, previous, startDate, endDate } =
-    useOverviewOptions();
+  const {
+    interval,
+    range,
+    previous,
+    startDate,
+    endDate,
+    chartType,
+    setChartType,
+  } = useOverviewOptions();
   const [filters] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('ev', {
     all: {
@@ -50,7 +60,7 @@ export default function OverviewTopEvents({
             name: 'name',
           },
         ],
-        chartType: 'bar',
+        chartType: chartType,
         lineType: 'monotone',
         interval: interval,
         name: 'Top sources',
@@ -89,7 +99,7 @@ export default function OverviewTopEvents({
             name: 'name',
           },
         ],
-        chartType: 'bar',
+        chartType: chartType,
         lineType: 'monotone',
         interval: interval,
         name: 'Top sources',
@@ -104,7 +114,10 @@ export default function OverviewTopEvents({
     <>
       <Widget className="col-span-6 md:col-span-3">
         <WidgetHead>
-          <div className="title">{widget.title}</div>
+          <div className="title">
+            {widget.title}
+            <OverviewChartToggle />
+          </div>
           <WidgetButtons>
             {widgets
               .filter((item) => item.hide !== true)