ui: funnel view type

frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx

@@ -13,23 +13,17 @@ import {
   Users,
   Sparkles,
   Globe,
-  MonitorSmartphone
+  MonitorSmartphone,
 } from 'lucide-react';
 import { Icon } from 'UI';
-import FilterSeries from 'App/mstore/types/filterSeries';
 import { useModal } from 'App/components/Modal';
-import {
-  CARD_LIST,
-  CardType
-} from '../DashboardList/NewDashModal/ExampleCards';
 import { useStore } from 'App/mstore';
 import {
   HEATMAP,
   FUNNEL,
-  TABLE,
   TIMESERIES,
   USER_PATH,
-  CATEGORIES
+  CATEGORIES,
 } from 'App/constants/card';
 import { useHistory } from 'react-router-dom';
 import { dashboardMetricCreate, withSiteId, metricCreate } from 'App/routes';
@@ -50,13 +44,13 @@ export const tabItems: Record<string, TabItem[]> = {
       icon: <LineChart width={16} />,
       title: 'Trends',
       type: TIMESERIES,
-      description: 'Track session and user trends over time.'
+      description: 'Track session and user trends over time.',
     },
     {
       icon: <Filter width={16} />,
       title: 'Funnels',
       type: FUNNEL,
-      description: 'Visualize user progression through critical steps.'
+      description: 'Visualize user progression through critical steps.',
     },
     {
       icon: (
@@ -64,14 +58,14 @@ export const tabItems: Record<string, TabItem[]> = {
       ),
       title: 'Journeys',
       type: USER_PATH,
-      description: 'Understand the paths users take through your product.'
+      description: 'Understand the paths users take through your product.',
     },
     {
       icon: <Icon name={'dashboards/heatmap-2'} color={'inherit'} size={16} />,
       title: 'Heatmaps',
       type: HEATMAP,
-      description: 'Visualize user interaction patterns on your pages.'
-    }
+      description: 'Visualize user interaction patterns on your pages.',
+    },
   ],
   [CATEGORIES.monitors]: [
     {
@@ -80,67 +74,65 @@ export const tabItems: Record<string, TabItem[]> = {
       ),
       title: 'JS Errors',
       type: FilterKey.ERRORS,
-      description: 'Monitor JS errors affecting user experience.'
+      description: 'Monitor JS errors affecting user experience.',
     },
     {
       icon: <ArrowUpDown width={16} />,
       title: 'Top Network Requests',
       type: FilterKey.FETCH,
-      description: 'Identify the most frequent network requests.'
+      description: 'Identify the most frequent network requests.',
     },
     {
       icon: <WifiOff width={16} />,
       title: '4xx/5xx Requests',
       type: TIMESERIES + '_4xx_requests',
-      description: 'Track client and server errors for performance issues.'
+      description: 'Track client and server errors for performance issues.',
     },
     {
       icon: <Turtle width={16} />,
       title: 'Slow Network Requests',
       type: TIMESERIES + '_slow_network_requests',
-      description: 'Pinpoint the slowest network requests causing delays.'
-    }
+      description: 'Pinpoint the slowest network requests causing delays.',
+    },
   ],
   [CATEGORIES.web_analytics]: [
     {
       icon: <FileStack width={16} />,
       title: 'Top Pages',
       type: FilterKey.LOCATION,
-      description: 'Discover the most visited pages on your site.'
+      description: 'Discover the most visited pages on your site.',
     },
     {
       icon: <AppWindow width={16} />,
       title: 'Top Browsers',
       type: FilterKey.USER_BROWSER,
-      description: 'Analyze the browsers your visitors are using the most.'
+      description: 'Analyze the browsers your visitors are using the most.',
     },
     {
       icon: <Combine width={16} />,
       title: 'Top Referrer',
       type: FilterKey.REFERRER,
-      description: 'See where your traffic is coming from.'
+      description: 'See where your traffic is coming from.',
     },
     {
       icon: <Users width={16} />,
       title: 'Top Users',
       type: FilterKey.USERID,
-      description: 'Identify the users with the most interactions.'
+      description: 'Identify the users with the most interactions.',
     },
     {
       icon: <Globe width={16} />,
       title: 'Top Countries',
       type: FilterKey.USER_COUNTRY,
-      description: 'Track the geographical distribution of your audience.'
+      description: 'Track the geographical distribution of your audience.',
     },
     {
       icon: <MonitorSmartphone width={16} />,
       title: 'Top Devices',
       type: FilterKey.USER_DEVICE,
-      description: 'Explore the devices used by your users.'
-    }
-
-
-  ]
+      description: 'Explore the devices used by your users.',
+    },
+  ],
 };
 
 export const mobileTabItems: Record<string, TabItem[]> = {
@@ -163,41 +155,42 @@ export const mobileTabItems: Record<string, TabItem[]> = {
       icon: <Users width={16} />,
       title: 'Top Users',
       type: FilterKey.USERID,
-      description: 'Identify the users with the most interactions.'
+      description: 'Identify the users with the most interactions.',
     },
     {
       icon: <Globe width={16} />,
       title: 'Top Countries',
       type: FilterKey.USER_COUNTRY,
-      description: 'Track the geographical distribution of your audience.'
+      description: 'Track the geographical distribution of your audience.',
     },
     {
       icon: <MonitorSmartphone width={16} />,
       title: 'Top Devices',
       type: FilterKey.USER_DEVICE,
-      description: 'Explore the devices used by your users.'
-    }
-  ]
+      description: 'Explore the devices used by your users.',
+    },
+  ],
 };
 
 function CategoryTab({
   tab,
   inCards,
-                       isMobile
+  isMobile,
 }: {
   tab: string;
   isMobile?: boolean;
   inCards?: boolean;
 }) {
   const items = isMobile ? mobileTabItems[tab] : tabItems[tab];
-  const { metricStore, projectsStore, dashboardStore } = useStore();
+  const { projectsStore, dashboardStore } = useStore();
   const history = useHistory();
 
   const handleCardSelection = (card: string) => {
-    // metricStore.init();
     if (projectsStore.activeSiteId) {
       if (inCards) {
-        history.push(withSiteId(metricCreate(), projectsStore.activeSiteId) + `?mk=${card}`);
+        history.push(
+          withSiteId(metricCreate(), projectsStore.activeSiteId) + `?mk=${card}`
+        );
       } else if (dashboardStore.selectedDashboard) {
         history.push(
           withSiteId(
@@ -236,7 +229,7 @@ function CategoryTab({
 const AddCardSection = observer(
   ({
     inCards,
-     handleOpenChange
+    handleOpenChange,
   }: {
     inCards?: boolean;
     handleOpenChange?: (isOpen: boolean) => void;
@@ -244,17 +237,19 @@ const AddCardSection = observer(
     const { showModal } = useModal();
     const { metricStore, dashboardStore, projectsStore } = useStore();
     const isMobile = projectsStore.isMobile;
-    const [tab, setTab] = React.useState(isMobile ? 'web_analytics' : 'product_analytics');
+    const [tab, setTab] = React.useState(
+      isMobile ? 'web_analytics' : 'product_analytics'
+    );
 
     const options = isMobile
       ? [
           // { label: 'Product Analytics', value: 'product_analytics' },
-        { label: 'Mobile Analytics', value: 'web_analytics' }
+          { label: 'Mobile Analytics', value: 'web_analytics' },
         ]
       : [
           { label: 'Product Analytics', value: 'product_analytics' },
           { label: 'Monitors', value: 'monitors' },
-        { label: 'Web Analytics', value: 'web_analytics' }
+          { label: 'Web Analytics', value: 'web_analytics' },
         ];
 
     const originStr = window.env.ORIGIN || window.location.origin;
@@ -269,7 +264,7 @@ const AddCardSection = observer(
           width: 800,
           onClose: () => {
             metricStore.updateKey('metricsSearch', '');
-          }
+          },
         }
       );
       handleOpenChange?.(false);

frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx

@@ -67,7 +67,8 @@ function WidgetView({ match: { params: { siteId, dashboardId, metricId } } }: Pr
             metricType: selectedCard.cardType,
             name: selectedCard.title,
             metricOf: selectedCard.metricOf,
-            category: mk
+            category: mk,
+            viewType: selectedCard.cardType === FUNNEL ? 'chart' : 'lineChart',
           };
           if (selectedCard.filters) {
             cardData.series = [