ui: fix dash list menu propagation

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomChartTooltip.tsx

@@ -13,9 +13,11 @@ interface Props {
   active: boolean;
   payload: PayloadItem[];
   label: string;
+  activeKey?: string;
 }
 
-function CustomTooltip({ active, payload, label }: Props) {
+function CustomTooltip(props: Props) {
+  const { active, payload, label, activeKey } = props;
   if (!active || !payload?.length) return null;
 
   const shownPayloads: PayloadItem[] = payload.filter((p) => !p.hide);
@@ -38,9 +40,13 @@ function CustomTooltip({ active, payload, label }: Props) {
       prevValue,
     };
   });
+
   const isHigher = (item: { value: number; prevValue: number }) => {
     return item.prevValue !== null && item.prevValue < item.value;
   };
+  const getPercentDelta = (val, prevVal) => {
+    return (((val - prevVal) / prevVal) * 100).toFixed(2);
+  };
   return (
     <div
       className={'flex flex-col gap-1 bg-white shadow border rounded p-2 z-30'}
@@ -63,12 +69,13 @@ function CustomTooltip({ active, payload, label }: Props) {
             <div className={'text-disabled-text text-sm'}>
               {label}, {formatTimeOrDate(p.payload.timestamp)}
             </div>
-            <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-1'}>
               <div className={'font-medium'}>{p.value}</div>
-              {p.prevValue !== null ? (
+              {p.prevValue ? (
                 <CompareTag
                   isHigher={isHigher(p)}
-                  prevValue={p.prevValue}
+                  absDelta={Math.abs(p.value - p.prevValue)}
+                  delta={getPercentDelta(p.value, p.prevValue)}
                 />
               ) : null}
             </div>
@@ -81,20 +88,23 @@ function CustomTooltip({ active, payload, label }: Props) {
 
 export function CompareTag({
   isHigher,
-  prevValue,
+  absDelta,
+  delta,
 }: {
   isHigher: boolean;
-  prevValue: number | string;
+  absDelta?: number | string;
+  delta?: string;
 }) {
   return (
     <div
       className={cn(
-        'px-2 py-1 rounded flex items-center gap-1',
+        'px-2 py-1 w-fit rounded flex items-center gap-1',
         isHigher ? 'bg-green2 text-xs' : 'bg-red2 text-xs'
       )}
     >
       {!isHigher ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
-      <div>{prevValue}</div>
+      <div>{absDelta}</div>
+      <div>({delta}%)</div>
     </div>
   );
 }

frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricLineChart/CustomMetricLineChart.tsx

@@ -82,9 +82,7 @@ function CustomMetricLineChart(props: Props) {
              strokeOpacity={key === 'Total' ? 0 : 0.6}
              legendType={key === 'Total' ? 'none' : 'line'}
              dot={false}
-             activeDot={{
-               fill: key === 'Total' ? 'transparent' : colors[index],
-             }}
+             activeDot={{ fill: colors[index]}}
            />
          ) : null)}
         {compData?.namesMap.map((key, i) => data.namesMap[i] ? (

frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx

@@ -20,7 +20,7 @@ import Dashboard from 'App/mstore/types/dashboard';
 import { dashboardSelected, withSiteId } from 'App/routes';
 import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton';
 import { Icon, confirm } from 'UI';
-import { EllipsisVertical } from "lucide-react";
+import { EllipsisVertical } from 'lucide-react';
 import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG';
 
 import DashboardEditModal from '../DashboardEditModal';
@@ -130,40 +130,38 @@ function DashboardList() {
       render: (id) => (
         <Dropdown
           arrow={false}
-          trigger={'click'}
+          trigger={['click']}
+          className={'ignore-prop-dp'}
           menu={{
             items: [
               {
                 icon: <Icon name={'pencil'} />,
                 key: 'rename',
                 label: 'Rename',
-                onClick: () => onEdit(id, true),
               },
               {
                 icon: <Icon name={'users'} />,
                 key: 'access',
                 label: 'Visibility & Access',
-                onClick: () => onEdit(id, false),
               },
               {
                 icon: <Icon name={'trash'} />,
                 key: 'delete',
                 label: 'Delete',
-                onClick: () => onDelete(id),
               },
             ],
-            onClick: ({ key }) => {
+            onClick: async ({ key }) => {
               if (key === 'rename') {
                 onEdit(id, true);
               } else if (key === 'access') {
                 onEdit(id, false);
               } else if (key === 'delete') {
-                void onDelete(id);
+                await onDelete(id);
               }
             },
           }}
         >
-          <Button ref={optionsRef} icon={<EllipsisVertical size={16} />} />
+          <Button id={'ignore-prop'} icon={<EllipsisVertical size={16} />} />
         </Dropdown>
       ),
     },
@@ -228,12 +226,13 @@ function DashboardList() {
         }}
         onRow={(record) => ({
           onClick: (e) => {
-            if (optionsRef.current) {
-              if (optionsRef.current.contains(e.target) || e.target === optionsRef.current) {
-                return;
-              }
-            }
-            if (e.target.classList.contains('lucide')) {
+            const possibleDropdown =
+              document.querySelector('.ant-dropdown-menu');
+            if (
+              e.target.classList.contains('lucide') ||
+              e.target.id === 'ignore-prop' ||
+              possibleDropdown?.contains(e.target)
+            ) {
               return;
             }
             dashboardStore.selectDashboardById(record.dashboardId);