change(ui): sessions by user

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

@@ -25,6 +25,7 @@ import Trend from "./Examples/Trend";
 import Bars from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/Bars";
 import ByIssues from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByIssues";
 import InsightsExample from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/InsightsExample";
+import ByUser from "Components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser";
 
 // const TYPE = {
 //     FUNNEL: 'funnel',
@@ -247,7 +248,7 @@ export const CARD_LIST: CardType[] = [
         cardType: TABLE,
         metricOf: FilterKey.USERID,
         category: CARD_CATEGORIES[2].key,
-        example: ByBrowser,
+        example: ByUser,
     },
 
     {

frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { Icon } from 'UI';
+
+import ExCard from '../ExCard';
+import ByComponent from './Component';
+
+function ByUser(props: any) {
+  const rows = [
+    {
+      label: 'Demo User',
+      progress: 85,
+      value: '2.5K',
+      icon: <Icon name={'color/chrome'} size={26} />,
+    },
+    {
+      label: 'Admin User',
+      progress: 25,
+      value: '405',
+      icon: <Icon name={'color/edge'} size={26} />,
+    },
+    {
+      label: 'Management User',
+      progress: 5,
+      value: '302',
+      icon: <Icon name={'color/safari'} size={26} />,
+    },
+    {
+      label: 'Sales User',
+      progress: 3,
+      value: '194',
+      icon: <Icon name={'color/firefox'} size={26} />,
+    },
+    {
+      label: 'Marketing User',
+      progress: 1,
+      value: '57',
+      icon: <Icon name={'color/opera'} size={26} />,
+    },
+  ];
+
+  const lineWidth = 200;
+  return (
+    <ByComponent
+      {...props}
+      rows={rows}
+      lineWidth={lineWidth}
+    />
+  );
+}
+
+export default ByUser;

frontend/app/mstore/types/IconProvider.tsx

@@ -106,13 +106,20 @@ class OsIconProvider implements IconProvider {
     }
 }
 
+class UserIconProvider implements IconProvider {
+    getIcon(name: string): React.ReactNode {
+        return <Icon name="user" size={24}/>
+    }
+}
+
 export {
     BrowserIconProvider,
     CountryIconProvider,
     IssueIconProvider,
     UrlIconProvider,
     DeviceIconProvider,
-    OsIconProvider
+    OsIconProvider,
+    UserIconProvider
 };
 export type {IconProvider};
 

frontend/app/mstore/types/sessionsCardData.ts

@@ -5,7 +5,7 @@ import {
     CountryIconProvider, DeviceIconProvider,
     IconProvider,
     IssueIconProvider, OsIconProvider,
-    UrlIconProvider
+    UrlIconProvider, UserIconProvider
 } from "./IconProvider";
 
 interface NameFormatter {
@@ -68,6 +68,8 @@ export class SessionsByRow {
                 return {nameFormatter: new BaseFormatter(), iconProvider: new DeviceIconProvider()};
             case 'platform':
                 return {nameFormatter: new BaseFormatter(), iconProvider: new OsIconProvider()};
+            case 'userId':
+                return {nameFormatter: new BaseFormatter(), iconProvider: new UserIconProvider()};
             default:
                 return {nameFormatter: new BaseFormatter(), iconProvider: new DefaultIconProvider()};
         }