diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
index 8313b8920..f77e18343 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
+++ b/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,
},
{
diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/SessionsBy/ByUser.tsx
new file mode 100644
index 000000000..fd18227f0
--- /dev/null
+++ b/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: ,
+ },
+ {
+ label: 'Admin User',
+ progress: 25,
+ value: '405',
+ icon: ,
+ },
+ {
+ label: 'Management User',
+ progress: 5,
+ value: '302',
+ icon: ,
+ },
+ {
+ label: 'Sales User',
+ progress: 3,
+ value: '194',
+ icon: ,
+ },
+ {
+ label: 'Marketing User',
+ progress: 1,
+ value: '57',
+ icon: ,
+ },
+ ];
+
+ const lineWidth = 200;
+ return (
+
+ );
+}
+
+export default ByUser;
diff --git a/frontend/app/mstore/types/IconProvider.tsx b/frontend/app/mstore/types/IconProvider.tsx
index e792fd87f..d2d371879 100644
--- a/frontend/app/mstore/types/IconProvider.tsx
+++ b/frontend/app/mstore/types/IconProvider.tsx
@@ -106,13 +106,20 @@ class OsIconProvider implements IconProvider {
}
}
+class UserIconProvider implements IconProvider {
+ getIcon(name: string): React.ReactNode {
+ return
+ }
+}
+
export {
BrowserIconProvider,
CountryIconProvider,
IssueIconProvider,
UrlIconProvider,
DeviceIconProvider,
- OsIconProvider
+ OsIconProvider,
+ UserIconProvider
};
export type {IconProvider};
diff --git a/frontend/app/mstore/types/sessionsCardData.ts b/frontend/app/mstore/types/sessionsCardData.ts
index 23c8b2306..459ecd3c3 100644
--- a/frontend/app/mstore/types/sessionsCardData.ts
+++ b/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()};
}