From 64a7e2ab26ebf88043b04ae0ac3f18aed5c2685f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Tue, 21 Jan 2025 15:21:24 +0000
Subject: [PATCH] improvements(dashboard): add headers to all overview tables
 to get a better understanding if its sessions or page views

---
 .../overview/overview-top-devices.tsx         | 15 ++++++
 .../overview-top-events.tsx                   |  2 +-
 .../components/overview/overview-top-geo.tsx  |  3 ++
 .../overview/overview-top-pages.tsx           |  3 ++
 .../overview/overview-top-sources.tsx         | 25 ++++++++++
 .../src/components/report-chart/bar/chart.tsx | 50 +++++++++++++++++--
 .../src/components/report-chart/context.tsx   |  1 +
 7 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/apps/dashboard/src/components/overview/overview-top-devices.tsx b/apps/dashboard/src/components/overview/overview-top-devices.tsx
index d05eef7a..7689b4f9 100644
--- 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;
           },
diff --git 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
index d291eb69..d44016ef 100644
--- 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,
diff --git a/apps/dashboard/src/components/overview/overview-top-geo.tsx b/apps/dashboard/src/components/overview/overview-top-geo.tsx
index a6fc5a45..d2cab25a 100644
--- 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;
           },
diff --git a/apps/dashboard/src/components/overview/overview-top-pages.tsx b/apps/dashboard/src/components/overview/overview-top-pages.tsx
index 85a2813f..25b070bd 100644
--- 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: {
diff --git a/apps/dashboard/src/components/overview/overview-top-sources.tsx b/apps/dashboard/src/components/overview/overview-top-sources.tsx
index 819c4322..a4816b9e 100644
--- 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) => {
diff --git a/apps/dashboard/src/components/report-chart/bar/chart.tsx b/apps/dashboard/src/components/report-chart/bar/chart.tsx
index 4a4f7392..7c020651 100644
--- 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
diff --git a/apps/dashboard/src/components/report-chart/context.tsx b/apps/dashboard/src/components/report-chart/context.tsx
index ad51537e..5499d9b9 100644
--- 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;