dashboard: update event and profile list

2024-03-18 09:08:02 +01:00
parent 2057fe083b
commit 3a8404f704
34 changed files with 942 additions and 318 deletions
--- a/apps/dashboard/src/components/overview/overview-chart-toggle.tsx
+++ b/apps/dashboard/src/components/overview/overview-chart-toggle.tsx
@@ -0,0 +1,23 @@
+import { BarChartIcon, LineChartIcon } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { useOverviewOptions } from './useOverviewOptions';
+
+export function OverviewChartToggle() {
+  const { chartType, setChartType } = useOverviewOptions();
+  return (
+    <Button
+      size={'icon'}
+      variant={'outline'}
+      onClick={() => {
+        setChartType((p) => (p === 'linear' ? 'bar' : 'linear'));
+      }}
+    >
+      {chartType === 'bar' ? (
+        <LineChartIcon size={16} />
+      ) : (
+        <BarChartIcon size={16} />
+      )}
+    </Button>
+  );
+}
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -5,6 +5,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';

 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';
@@ -15,7 +16,7 @@ interface OverviewTopDevicesProps {
 export default function OverviewTopDevices({
  projectId,
 }: OverviewTopDevicesProps) {
-  const { interval, range, previous, startDate, endDate } =
+  const { interval, range, previous, startDate, endDate, chartType } =
    useOverviewOptions();
  const [filters, setFilter] = useEventQueryFilters();
  const isPageFilter = filters.find((filter) => filter.name === 'path');
@@ -41,7 +42,7 @@ export default function OverviewTopDevices({
            name: 'device',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -71,7 +72,7 @@ export default function OverviewTopDevices({
            name: 'browser',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -101,7 +102,7 @@ export default function OverviewTopDevices({
            name: 'browser_version',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -131,7 +132,7 @@ export default function OverviewTopDevices({
            name: 'os',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -161,7 +162,7 @@ export default function OverviewTopDevices({
            name: 'os_version',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -176,7 +177,10 @@ export default function OverviewTopDevices({
    <>
      <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.map((w) => (
              <button
--- a/apps/dashboard/src/components/overview/overview-top-events/overview-top-events.tsx
+++ b/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)
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -5,6 +5,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';

 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';
@@ -13,7 +14,7 @@ interface OverviewTopGeoProps {
  projectId: string;
 }
 export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
-  const { interval, range, previous, startDate, endDate } =
+  const { interval, range, previous, startDate, endDate, chartType } =
    useOverviewOptions();
  const [filters, setFilter] = useEventQueryFilters();
  const isPageFilter = filters.find((filter) => filter.name === 'path');
@@ -39,7 +40,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
            name: 'country',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -69,7 +70,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
            name: 'region',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -99,7 +100,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
            name: 'city',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -114,7 +115,10 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
    <>
      <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.map((w) => (
              <button
--- a/apps/dashboard/src/components/overview/overview-top-pages.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-pages.tsx
@@ -5,6 +5,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';

 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';
@@ -13,7 +14,7 @@ interface OverviewTopPagesProps {
  projectId: string;
 }
 export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
-  const { interval, range, previous, startDate, endDate } =
+  const { interval, range, previous, startDate, endDate, chartType } =
    useOverviewOptions();
  const [filters, setFilter] = useEventQueryFilters();
  const [widget, setWidget, widgets] = useOverviewWidget('pages', {
@@ -38,7 +39,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
            name: 'path',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval,
        name: 'Top sources',
@@ -68,7 +69,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
            name: 'path',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval,
        name: 'Top sources',
@@ -98,7 +99,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
            name: 'path',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval,
        name: 'Top sources',
@@ -113,7 +114,10 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
    <>
      <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.map((w) => (
              <button
--- a/apps/dashboard/src/components/overview/overview-top-sources.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-sources.tsx
@@ -5,6 +5,7 @@ import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';

 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';
@@ -15,7 +16,7 @@ interface OverviewTopSourcesProps {
 export default function OverviewTopSources({
  projectId,
 }: OverviewTopSourcesProps) {
-  const { interval, range, previous, startDate, endDate } =
+  const { interval, range, previous, startDate, endDate, chartType } =
    useOverviewOptions();
  const [filters, setFilter] = useEventQueryFilters();
  const isPageFilter = filters.find((filter) => filter.name === 'path');
@@ -41,7 +42,7 @@ export default function OverviewTopSources({
            name: 'referrer_name',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top groups',
@@ -71,7 +72,7 @@ export default function OverviewTopSources({
            name: 'referrer',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -101,7 +102,7 @@ export default function OverviewTopSources({
            name: 'referrer_type',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top types',
@@ -131,7 +132,7 @@ export default function OverviewTopSources({
            name: 'properties.query.utm_source',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -161,7 +162,7 @@ export default function OverviewTopSources({
            name: 'properties.query.utm_medium',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -191,7 +192,7 @@ export default function OverviewTopSources({
            name: 'properties.query.utm_campaign',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -221,7 +222,7 @@ export default function OverviewTopSources({
            name: 'properties.query.utm_term',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -251,7 +252,7 @@ export default function OverviewTopSources({
            name: 'properties.query.utm_content',
          },
        ],
-        chartType: 'bar',
+        chartType,
        lineType: 'monotone',
        interval: interval,
        name: 'Top sources',
@@ -266,7 +267,11 @@ export default function OverviewTopSources({
    <>
      <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.map((w) => (
              <button
--- a/apps/dashboard/src/components/overview/overview-widget.tsx
+++ b/apps/dashboard/src/components/overview/overview-widget.tsx
@@ -19,7 +19,10 @@ import { WidgetHead as WidgetHeadBase } from '../Widget';
 export function WidgetHead({ className, ...props }: WidgetHeadProps) {
  return (
    <WidgetHeadBase
-      className={cn('flex flex-col p-0 [&_.title]:p-4', className)}
+      className={cn(
+        'flex flex-col p-0 [&_.title]:p-4 [&_.title]:flex [&_.title]:justify-between [&_.title]:items-center',
+        className
+      )}
      {...props}
    />
  );
--- a/apps/dashboard/src/components/overview/useOverviewOptions.ts
+++ b/apps/dashboard/src/components/overview/useOverviewOptions.ts
@@ -16,6 +16,12 @@ 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)
@@ -68,5 +74,9 @@ export function useOverviewOptions() {
    // Toggles
    liveHistogram,
    setLiveHistogram,
+
+    // Other
+    chartType,
+    setChartType,
  };
 }