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()}; }