improvements(dashboard): add headers to all overview tables to get a better understanding if its sessions or page views

2025-01-21 15:21:24 +00:00
parent b38f3913c3
commit 64a7e2ab26
7 changed files with 93 additions and 6 deletions
--- a/apps/dashboard/src/components/overview/overview-top-devices.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-devices.tsx
@@ -31,6 +31,9 @@ export default function OverviewTopDevices({
      title: 'Top devices',
      btn: 'Devices',
      chart: {
+        options: {
+          columns: ['Device', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -64,6 +67,9 @@ export default function OverviewTopDevices({
      title: 'Top browser',
      btn: 'Browser',
      chart: {
+        options: {
+          columns: ['Browser', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -98,6 +104,7 @@ export default function OverviewTopDevices({
      btn: 'Browser Version',
      chart: {
        options: {
+          columns: ['Version', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return name[1] || NOT_SET_VALUE;
          },
@@ -139,6 +146,9 @@ export default function OverviewTopDevices({
      title: 'Top OS',
      btn: 'OS',
      chart: {
+        options: {
+          columns: ['OS', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -173,6 +183,7 @@ export default function OverviewTopDevices({
      btn: 'OS Version',
      chart: {
        options: {
+          columns: ['Version', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return name[1] || NOT_SET_VALUE;
          },
@@ -214,6 +225,9 @@ export default function OverviewTopDevices({
      title: 'Top Brands',
      btn: 'Brands',
      chart: {
+        options: {
+          columns: ['Brand', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -248,6 +262,7 @@ export default function OverviewTopDevices({
      btn: 'Models',
      chart: {
        options: {
+          columns: ['Model', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return name[1] || NOT_SET_VALUE;
          },
--- 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
@@ -167,7 +167,7 @@ export default function OverviewTopEvents({
        </WidgetHead>
        <WidgetBody>
          <ReportChart
-            options={{ hideID: true }}
+            options={{ hideID: true, columns: ['Event', 'Count'] }}
            report={{
              ...widget.chart.report,
              previous: false,
--- a/apps/dashboard/src/components/overview/overview-top-geo.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-geo.tsx
@@ -31,6 +31,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      btn: 'Countries',
      chart: {
        options: {
+          columns: ['Country', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return getCountry(name[0]) || NOT_SET_VALUE;
          },
@@ -69,6 +70,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      btn: 'Regions',
      chart: {
        options: {
+          columns: ['Region', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return name[1] || NOT_SET_VALUE;
          },
@@ -111,6 +113,7 @@ export default function OverviewTopGeo({ projectId }: OverviewTopGeoProps) {
      btn: 'Cities',
      chart: {
        options: {
+          columns: ['City', isPageFilter ? 'Views' : 'Sessions'],
          renderSerieName(name) {
            return name[1] || NOT_SET_VALUE;
          },
--- a/apps/dashboard/src/components/overview/overview-top-pages.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-pages.tsx
@@ -50,6 +50,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      chart: {
        options: {
          renderSerieName,
+          columns: ['URL', 'Views'],
        },
        report: {
          limit: 10,
@@ -89,6 +90,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      btn: 'Entries',
      chart: {
        options: {
+          columns: ['URL', 'Sessions'],
          renderSerieName,
        },
        report: {
@@ -129,6 +131,7 @@ export default function OverviewTopPages({ projectId }: OverviewTopPagesProps) {
      btn: 'Exits',
      chart: {
        options: {
+          columns: ['URL', 'Sessions'],
          renderSerieName,
        },
        report: {
--- a/apps/dashboard/src/components/overview/overview-top-sources.tsx
+++ b/apps/dashboard/src/components/overview/overview-top-sources.tsx
@@ -31,6 +31,9 @@ export default function OverviewTopSources({
      title: 'Top sources',
      btn: 'All',
      chart: {
+        options: {
+          columns: ['Source', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -64,6 +67,9 @@ export default function OverviewTopSources({
      title: 'Top urls',
      btn: 'URLs',
      chart: {
+        options: {
+          columns: ['URL', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -97,6 +103,9 @@ export default function OverviewTopSources({
      title: 'Top types',
      btn: 'Types',
      chart: {
+        options: {
+          columns: ['Type', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -130,6 +139,9 @@ export default function OverviewTopSources({
      title: 'UTM Source',
      btn: 'Source',
      chart: {
+        options: {
+          columns: ['Utm Source', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -163,6 +175,9 @@ export default function OverviewTopSources({
      title: 'UTM Medium',
      btn: 'Medium',
      chart: {
+        options: {
+          columns: ['Utm Medium', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -196,6 +211,9 @@ export default function OverviewTopSources({
      title: 'UTM Campaign',
      btn: 'Campaign',
      chart: {
+        options: {
+          columns: ['Utm Campaign', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -229,6 +247,9 @@ export default function OverviewTopSources({
      title: 'UTM Term',
      btn: 'Term',
      chart: {
+        options: {
+          columns: ['Utm Term', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -262,6 +283,9 @@ export default function OverviewTopSources({
      title: 'UTM Content',
      btn: 'Content',
      chart: {
+        options: {
+          columns: ['Utm Content', isPageFilter ? 'Views' : 'Sessions'],
+        },
        report: {
          limit: 10,
          projectId,
@@ -319,6 +343,7 @@ export default function OverviewTopSources({
              previous: false,
            }}
            options={{
+              ...widget.chart.options,
              renderSerieName: (name) =>
                name[0] === NOT_SET_VALUE ? 'Direct / Not set' : name[0],
              onClick: (item) => {
--- a/apps/dashboard/src/components/report-chart/bar/chart.tsx
+++ b/apps/dashboard/src/components/report-chart/bar/chart.tsx
@@ -10,7 +10,7 @@ import { useNumber } from '@/hooks/useNumerFormatter';
 import type { IChartData } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { DropdownMenuPortal } from '@radix-ui/react-dropdown-menu';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';

 import { round } from '@openpanel/common';
 import { NOT_SET_VALUE } from '@openpanel/constants';
@@ -25,10 +25,11 @@ interface Props {
 }

 export function Chart({ data }: Props) {
+  const [isOpen, setOpen] = useState<string | null>(null);
  const {
    isEditMode,
    report: { metric, limit },
-    options: { onClick, dropdownMenuContent },
+    options: { onClick, dropdownMenuContent, columns },
  } = useReportChartContext();
  const number = useNumber();
  const series = useMemo(
@@ -44,6 +45,24 @@ export function Chart({ data }: Props) {
        isEditMode ? 'card gap-2 p-4 text-base' : '-m-3 gap-1',
      )}
    >
+      {columns && columns.length > 0 && (
+        <div className="relative z-10 flex w-full flex-1 items-center gap-4 overflow-hidden px-3 pt-2 pb-1">
+          {columns.map((column, index) => {
+            const isLast = columns.length - 1 <= index;
+            return (
+              <div
+                key={column?.toString()}
+                className={cn(
+                  'flex flex-1 items-center gap-2 break-all font-medium',
+                  isLast && 'justify-end text-right',
+                )}
+              >
+                {column}
+              </div>
+            );
+          })}
+        </div>
+      )}
      {series.map((serie) => {
        const isClickable = !serie.names.includes(NOT_SET_VALUE) && onClick;
        const isDropDownEnabled =
@@ -51,15 +70,36 @@ export function Chart({ data }: Props) {
          (dropdownMenuContent?.(serie) || []).length > 0;

        return (
-          <DropdownMenu key={serie.id}>
-            <DropdownMenuTrigger asChild disabled={!isDropDownEnabled}>
+          <DropdownMenu
+            key={serie.id}
+            onOpenChange={() =>
+              setOpen((p) => (p === serie.id ? null : serie.id))
+            }
+            open={isOpen === serie.id}
+          >
+            <DropdownMenuTrigger
+              asChild
+              disabled={!isDropDownEnabled}
+              {...(isDropDownEnabled
+                ? {
+                    // We need to disable onPointerDown event to prevent the
+                    // dropdown from opening when the user is scrolling (mobile/tablet).
+                    // We also need to handle open/closed state and chnage this
+                    // when onClick happens
+                    onPointerDown: (e) => e.preventDefault(),
+                    onClick: () => setOpen(serie.id),
+                  }
+                : {})}
+            >
              <div
                className={cn(
                  'relative',
                  (isClickable || isDropDownEnabled) && 'cursor-pointer',
                )}
                {...(isClickable && !isDropDownEnabled
-                  ? { onClick: () => onClick?.(serie) }
+                  ? {
+                      onClick: () => onClick(serie),
+                    }
                  : {})}
              >
                <div
--- a/apps/dashboard/src/components/report-chart/context.tsx
+++ b/apps/dashboard/src/components/report-chart/context.tsx
@@ -10,6 +10,7 @@ import type {

 export type ReportChartContextType = {
  options: Partial<{
+    columns: React.ReactNode[];
    hideID: boolean;
    hideLegend: boolean;
    hideXAxis: boolean;