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

apps/dashboard/src/components/overview/overview-chart-toggle.tsx

@@ -1,10 +1,15 @@
+import type { Dispatch, SetStateAction } from 'react';
 import { BarChartIcon, LineChartIcon } from 'lucide-react';
 
-import { Button } from '../ui/button';
+import type { IChartType } from '@openpanel/validation';
-import { useOverviewOptions } from './useOverviewOptions';
 
-export function OverviewChartToggle() {
+import { Button } from '../ui/button';
-  const { chartType, setChartType } = useOverviewOptions();
+
+interface Props {
+  chartType: IChartType;
+  setChartType: Dispatch<SetStateAction<IChartType>>;
+}
+export function OverviewChartToggle({ chartType, setChartType }: Props) {
   return (
     <Button
       size={'icon'}

apps/dashboard/src/components/overview/overview-live-histogram.tsx

@@ -3,12 +3,10 @@
 import { Fragment } from 'react';
 import { api } from '@/app/_trpc/client';
 import { cn } from '@/utils/cn';
-import { ChevronsUpDownIcon } from 'lucide-react';
 import AnimateHeight from 'react-animate-height';
 
 import type { IChartInput } from '@openpanel/validation';
 
-import { redisSub } from '../../../../../packages/redis';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { useOverviewOptions } from './useOverviewOptions';
 

apps/dashboard/src/components/overview/overview-top-devices.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';
@@ -16,9 +19,10 @@ interface OverviewTopDevicesProps {
 export default function OverviewTopDevices({
   projectId,
 }: OverviewTopDevicesProps) {
-  const { interval, range, previous, startDate, endDate, chartType } =
+  const { interval, range, previous, startDate, endDate } =
     useOverviewOptions();
   const [filters, setFilter] = useEventQueryFilters();
+  const [chartType, setChartType] = useState<IChartType>('bar');
   const isPageFilter = filters.find((filter) => filter.name === 'path');
   const [widget, setWidget, widgets] = useOverviewWidget('tech', {
     devices: {
@@ -179,7 +183,7 @@ export default function OverviewTopDevices({
         <WidgetHead>
           <div className="title">
             {widget.title}
-            <OverviewChartToggle />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
           </div>
           <WidgetButtons>
             {widgets.map((w) => (

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

@@ -1,11 +1,14 @@
 'use client';
 
+import { useState } from 'react';
 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 type { IChartType } from '@openpanel/validation';
+
 import { Widget, WidgetBody } from '../../widget';
 import { OverviewChartToggle } from '../overview-chart-toggle';
 import { WidgetButtons, WidgetHead } from '../overview-widget';
@@ -20,16 +23,10 @@ export default function OverviewTopEvents({
   projectId,
   conversions,
 }: OverviewTopEventsProps) {
-  const {
+  const { interval, range, previous, startDate, endDate } =
-    interval,
+    useOverviewOptions();
-    range,
-    previous,
-    startDate,
-    endDate,
-    chartType,
-    setChartType,
-  } = useOverviewOptions();
   const [filters] = useEventQueryFilters();
+  const [chartType, setChartType] = useState<IChartType>('bar');
   const [widget, setWidget, widgets] = useOverviewWidget('ev', {
     all: {
       title: 'Top events',
@@ -60,7 +57,7 @@ export default function OverviewTopEvents({
             name: 'name',
           },
         ],
-        chartType: chartType,
+        chartType,
         lineType: 'monotone',
         interval: interval,
         name: 'Top sources',
@@ -99,7 +96,7 @@ export default function OverviewTopEvents({
             name: 'name',
           },
         ],
-        chartType: chartType,
+        chartType,
         lineType: 'monotone',
         interval: interval,
         name: 'Top sources',
@@ -116,7 +113,7 @@ export default function OverviewTopEvents({
         <WidgetHead>
           <div className="title">
             {widget.title}
-            <OverviewChartToggle />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
           </div>
           <WidgetButtons>
             {widgets

apps/dashboard/src/components/overview/overview-top-geo.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 OverviewTopGeoProps {
   projectId: string;
 }
 export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
-  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 isPageFilter = filters.find((filter) => filter.name === 'path');
   const [widget, setWidget, widgets] = useOverviewWidget('geo', {
@@ -117,7 +121,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
         <WidgetHead>
           <div className="title">
             {widget.title}
-            <OverviewChartToggle />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
           </div>
           <WidgetButtons>
             {widgets.map((w) => (

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

apps/dashboard/src/components/overview/overview-top-sources.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';
@@ -16,8 +19,9 @@ interface OverviewTopSourcesProps {
 export default function OverviewTopSources({
   projectId,
 }: OverviewTopSourcesProps) {
-  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 isPageFilter = filters.find((filter) => filter.name === 'path');
   const [widget, setWidget, widgets] = useOverviewWidget('sources', {
@@ -269,7 +273,7 @@ export default function OverviewTopSources({
         <WidgetHead>
           <div className="title">
             {widget.title}
-            <OverviewChartToggle />
+            <OverviewChartToggle {...{ chartType, setChartType }} />
           </div>
 
           <WidgetButtons>

apps/dashboard/src/components/overview/useOverviewOptions.ts

@@ -16,12 +16,6 @@ import { mapKeys } from '@openpanel/validation';
 const nuqsOptions = { history: 'push' } as const;
 
 export function useOverviewOptions() {
-  const [chartType, setChartType] = useQueryState(
-    'ct',
-    parseAsStringEnum(['bar', 'linear'])
-      .withDefault('bar')
-      .withOptions(nuqsOptions)
-  );
   const [previous, setPrevious] = useQueryState(
     'compare',
     parseAsBoolean.withDefault(true).withOptions(nuqsOptions)
@@ -74,9 +68,5 @@ export function useOverviewOptions() {
     // Toggles
     liveHistogram,
     setLiveHistogram,
-
-    // Other
-    chartType,
-    setChartType,
   };
 }