ui: change card type selector, add automapping

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

@@ -27,6 +27,7 @@ import {
   TABLE,
   TIMESERIES,
   USER_PATH,
+  CATEGORIES,
 } from 'App/constants/card';
 import { useHistory } from 'react-router-dom';
 import { dashboardMetricCreate, withSiteId, metricCreate } from 'App/routes';
@@ -40,8 +41,8 @@ interface TabItem {
   description: string;
   type: string;
 }
-const tabItems: Record<string, TabItem[]> = {
-  product_analytics: [
+export const tabItems: Record<string, TabItem[]> = {
+  [CATEGORIES.product_analytics]: [
     {
       icon: <LineChart width={16} />,
       title: 'Trends',
@@ -75,7 +76,7 @@ const tabItems: Record<string, TabItem[]> = {
       description: 'Visualize user interaction patterns on your pages.',
     },
   ],
-  monitors: [
+  [CATEGORIES.monitors]: [
     {
       icon: (
         <Icon name={'dashboards/circle-alert'} color={'inherit'} size={16} />
@@ -103,7 +104,7 @@ const tabItems: Record<string, TabItem[]> = {
       description: 'Pinpoint the slowest network requests causing delays.',
     },
   ],
-  web_analytics: [
+  [CATEGORIES.web_analytics]: [
     {
       icon: <FileStack width={16} />,
       title: 'Top Pages',
@@ -168,6 +169,7 @@ function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) {
       cardData.series.filter = [];
     }
 
+    metricStore.setCardCategory(tab);
     metricStore.merge(cardData);
     metricStore.instance.resetDefaults();
 

frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx

@@ -33,13 +33,13 @@ function DashboardWidgetGrid(props: Props) {
         </div>
       ) : (
         <div
-          className="pb-10 px-4 pt-2 flex flex-col gap-2 rounded"
+          className="pb-10 px-4 pt-2 grid gap-2 rounded grid-cols-4 items-start "
           id={props.id}
         >
           {list?.map((item: any, index: any) => (
             <div
               key={item.widgetId}
-              className={cn('grid gap-4 grid-cols-4 items-start group relative px-6 py-2 hover:bg-active-blue w-full')}
+              className={cn('col-span-' + item.config.col, 'group relative px-6 py-2 hover:bg-active-blue w-full')}
             >
               <WidgetWrapperNew
                 index={index}

frontend/app/components/Dashboard/components/MetricTypeSelector.tsx

@@ -1,51 +1,27 @@
 import React from 'react';
 import { Segmented } from 'antd';
-import { LineChart, AlignStartVertical } from 'lucide-react';
-import { Icon } from 'UI'; //dashboards/user-journey , dashboards/heatmap-2, signpost-split
-import {
-  TIMESERIES,
-  FUNNEL,
-  USER_PATH,
-  HEATMAP,
-  RETENTION,
-} from 'App/constants/card';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
-
-const types = [
-  {
-    icon: <LineChart width={16} />,
-    value: TIMESERIES,
-  },
-  {
-    icon: <AlignStartVertical width={16} />,
-    value: FUNNEL,
-  },
-  {
-    icon: <Icon name={'dashboards/user-journey'} color={'inherit'} size={16} />,
-    value: USER_PATH,
-  },
-  {
-    icon: <Icon name={'dashboards/heatmap-2'} color={'inherit'} size={16} />,
-    value: HEATMAP,
-  },
-  {
-    icon: <Icon name={'signpost-split'} color={'inherit'} size={16} />,
-    value: RETENTION,
-  },
-];
+import { tabItems } from 'Components/Dashboard/components/AddCardSection/AddCardSection'
 
 function MetricTypeSelector() {
   const { metricStore } = useStore();
   const metric = metricStore.instance;
-
+  const cardCategory = metricStore.cardCategory;
+  if (!cardCategory) {
+    return null;
+  }
+  const options = tabItems[cardCategory].map(opt => ({
+    value: opt.type,
+    icon: opt.icon,
+  }))
   const onChange = (type: string) => {
     metricStore.changeType(type);
   };
 
-  const selected = types.find((i) => i.value === metric.metricType) || types[0];
+  const selected = options.find((i) => i.value === metric.metricType) || options[0];
   return (
-    <Segmented onChange={onChange} options={types} value={selected.value} />
+    <Segmented onChange={onChange} options={options} value={selected.value} />
   );
 }
 

frontend/app/components/Dashboard/components/WidgetWrapper/WidgetWrapperNew.tsx

@@ -97,8 +97,7 @@ function WidgetWrapperNew(props: Props & RouteComponentProps) {
   return (
     <Card
       className={cn(
-        'relative group rounded-lg hover:border-teal transition-all duration-200',
-        'col-span-' + widget.config.col,
+        'relative group rounded-lg hover:border-teal transition-all duration-200 w-full',
         { 'hover:shadow-sm': !isTemplate && isWidget },
       )}
       style={{

frontend/app/constants/card.ts

@@ -22,6 +22,13 @@ export const RETENTION = 'retention';
 export const INSIGHTS = 'insights'; // SaaS and EE
 export const PERFORMANCE = 'performance';
 
+export const CATEGORIES = {
+  product_analytics: 'product_analytics',
+  monitors: 'monitors',
+  web_analytics: 'web_analytics',
+}
+
+
 export interface Option {
   label: string;
   icon: string;

frontend/app/mstore/metricStore.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable } from 'mobx';
+import { makeAutoObservable, runInAction } from "mobx";
 import Widget from './types/widget';
 import { metricService, errorService } from 'App/services';
 import { toast } from 'react-toastify';
@@ -11,10 +11,34 @@ import {
   INSIGHTS,
   HEATMAP,
   USER_PATH,
-  RETENTION
+  RETENTION,
+  CATEGORIES,
 } from 'App/constants/card';
 import { clickmapFilter } from 'App/types/filter/newFilter';
 import { getRE } from 'App/utils';
+import { FilterKey } from 'Types/filter/filterType';
+
+const cardToCategory = (cardType: string) => {
+  switch (cardType) {
+    case TIMESERIES:
+    case FUNNEL:
+    case USER_PATH:
+    case HEATMAP:
+      return CATEGORIES.product_analytics;
+    case FilterKey.ERRORS:
+    case FilterKey.FETCH:
+    case TIMESERIES + '_4xx_requests':
+    case TIMESERIES + '_slow_network_requests':
+      return CATEGORIES.monitors;
+    case FilterKey.LOCATION:
+    case FilterKey.USER_BROWSER:
+    case FilterKey.REFERRER:
+    case FilterKey.USERID:
+      return CATEGORIES.web_analytics;
+    default:
+      return CATEGORIES.product_analytics;
+  }
+}
 
 interface MetricFilter {
   query?: string;
@@ -44,6 +68,8 @@ export default class MetricStore {
   clickMapSearch = '';
   clickMapLabel = '';
 
+  cardCategory: string | null = null;
+
   constructor() {
     makeAutoObservable(this);
   }
@@ -79,6 +105,10 @@ export default class MetricStore {
     this.instance.update(metric || new Widget());
   }
 
+  setCardCategory(category: string) {
+    this.cardCategory = category;
+  }
+
   updateKey(key: string, value: any) {
     // @ts-ignore
     this[key] = value;
@@ -283,7 +313,12 @@ export default class MetricStore {
     return metricService
       .getMetric(id)
       .then((metric: any) => {
-        return (this.instance = new Widget().fromJson(metric, period));
+        const inst = new Widget().fromJson(metric, period)
+        runInAction(() => {
+          this.instance = inst;
+          this.cardCategory = cardToCategory(inst.metricType);
+        })
+        return inst;
       })
       .finally(() => {
         this.setLoading(false);