multiple breakpoints

apps/dashboard/src/components/report/chart/ReportBarChart.tsx

@@ -1,9 +1,18 @@
 'use client';
 
 import { useMemo } from 'react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
 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 { ExternalLinkIcon, FilterIcon } from 'lucide-react';
 
 import { round } from '@openpanel/common';
 import { NOT_SET_VALUE } from '@openpanel/constants';
@@ -11,13 +20,15 @@ import { NOT_SET_VALUE } from '@openpanel/constants';
 import { PreviousDiffIndicatorText } from '../PreviousDiffIndicator';
 import { useChartContext } from './ChartProvider';
 import { SerieIcon } from './SerieIcon';
+import { SerieName } from './SerieName';
 
 interface ReportBarChartProps {
   data: IChartData;
 }
 
 export function ReportBarChart({ data }: ReportBarChartProps) {
-  const { editMode, metric, onClick, limit } = useChartContext();
+  const { editMode, metric, onClick, limit, dropdownMenuContent } =
+    useChartContext();
   const number = useNumber();
   const series = useMemo(
     () => (editMode ? data.series : data.series.slice(0, limit || 10)),
@@ -33,42 +44,64 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
       )}
     >
       {series.map((serie) => {
-        const isClickable = serie.name !== NOT_SET_VALUE && onClick;
+        const isClickable = !serie.names.includes(NOT_SET_VALUE) && onClick;
+        const isDropDownEnabled =
+          !serie.names.includes(NOT_SET_VALUE) &&
+          (dropdownMenuContent?.(serie) || []).length > 0;
+
         return (
-          <div
-            key={serie.name}
-            className={cn('relative', isClickable && 'cursor-pointer')}
-            {...(isClickable ? { onClick: () => onClick(serie) } : {})}
-          >
-            <div
-              className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
-              style={{
-                width: `${(serie.metrics.sum / maxCount) * 100}%`,
-              }}
-            />
-            <div className="relative z-10 flex w-full flex-1 items-center gap-4 overflow-hidden px-3 py-2">
-              <div className="flex flex-1 items-center gap-2 break-all font-medium">
-                <SerieIcon name={serie.name} />
-                {serie.name}
-              </div>
-              <div className="flex flex-shrink-0 items-center justify-end gap-4">
-                <PreviousDiffIndicatorText
-                  {...serie.metrics.previous?.[metric]}
-                  className="text-xs font-medium"
+          <DropdownMenu key={serie.id}>
+            <DropdownMenuTrigger asChild disabled={!isDropDownEnabled}>
+              <div
+                className={cn(
+                  'relative',
+                  (isClickable || isDropDownEnabled) && 'cursor-pointer'
+                )}
+                {...(isClickable && !isDropDownEnabled
+                  ? { onClick: () => onClick?.(serie) }
+                  : {})}
+              >
+                <div
+                  className="absolute bottom-0 left-0 top-0 rounded bg-def-200"
+                  style={{
+                    width: `${(serie.metrics.sum / maxCount) * 100}%`,
+                  }}
                 />
-                {serie.metrics.previous?.[metric]?.value}
-                <div className="text-muted-foreground">
-                  {number.format(
-                    round((serie.metrics.sum / data.metrics.sum) * 100, 2)
-                  )}
-                  %
-                </div>
-                <div className="font-bold">
-                  {number.format(serie.metrics.sum)}
+                <div className="relative z-10 flex w-full flex-1 items-center gap-4 overflow-hidden px-3 py-2">
+                  <div className="flex flex-1 items-center gap-2 break-all font-medium">
+                    <SerieIcon name={serie.names[0]} />
+                    <SerieName name={serie.names} />
+                  </div>
+                  <div className="flex flex-shrink-0 items-center justify-end gap-4">
+                    <PreviousDiffIndicatorText
+                      {...serie.metrics.previous?.[metric]}
+                      className="text-xs font-medium"
+                    />
+                    {serie.metrics.previous?.[metric]?.value}
+                    <div className="text-muted-foreground">
+                      {number.format(
+                        round((serie.metrics.sum / data.metrics.sum) * 100, 2)
+                      )}
+                      %
+                    </div>
+                    <div className="font-bold">
+                      {number.format(serie.metrics.sum)}
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </div>
+            </DropdownMenuTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuContent>
+                {dropdownMenuContent?.(serie).map((item) => (
+                  <DropdownMenuItem key={item.title} onClick={item.onClick}>
+                    {item.icon && <item.icon size={16} className="mr-2" />}
+                    {item.title}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenuPortal>
+          </DropdownMenu>
         );
       })}
     </div>