dashboard: just toggle one chart at the time (overview)

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

@@ -1,9 +1,12 @@
 'use client';
 
+import { useState } from 'react';
 import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
+import type { IChartType } from '@openpanel/validation';
+
 import { Widget, WidgetBody } from '../widget';
 import { OverviewChartToggle } from './overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from './overview-widget';
@@ -14,8 +17,9 @@ interface OverviewTopPagesProps {
   projectId: string;
 }
 export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
-  const { interval, range, previous, startDate, endDate, chartType } =
+  const { interval, range, previous, startDate, endDate } =
     useOverviewOptions();
+  const [chartType, setChartType] = useState<IChartType>('bar');
   const [filters, setFilter] = useEventQueryFilters();
   const [widget, setWidget, widgets] = useOverviewWidget('pages', {
     top: {
@@ -116,7 +120,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
         <WidgetHead>
           <div className="title">
             {widget.title}
-            <OverviewChartToggle />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
           </div>
           <WidgetButtons>
             {widgets.map((w) => (