diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx index 08b0cfb9f..62ae52853 100644 --- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx +++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx @@ -142,7 +142,7 @@ export const tabItems: Record = { title: 'Top Devices', type: FilterKey.USER_DEVICE, description: 'Explore the devices used by your users.', - } + }, // { TODO: 1.23+ maybe // icon: , // title: 'Speed Index by Country', @@ -152,8 +152,53 @@ export const tabItems: Record = { ], }; -function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) { - const items = tabItems[tab]; +export const mobileTabItems: Record = { + [CATEGORIES.product_analytics]: [ + { + icon: , + title: 'Trends', + type: TIMESERIES, + description: 'Track session trends over time.', + }, + { + icon: , + title: 'Funnels', + type: FUNNEL, + description: 'Visualize user progression through critical steps.', + }, + ], + [CATEGORIES.web_analytics]: [ + { + icon: , + title: 'Top Users', + type: FilterKey.USERID, + description: 'Identify the users with the most interactions.', + }, + { + icon: , + title: 'Top Countries', + type: FilterKey.USER_COUNTRY, + description: 'Track the geographical distribution of your audience.', + }, + { + icon: , + title: 'Top Devices', + type: FilterKey.USER_DEVICE, + description: 'Explore the devices used by your users.', + }, + ], +}; + +function CategoryTab({ + tab, + inCards, + isMobile, +}: { + tab: string; + isMobile?: boolean; + inCards?: boolean; +}) { + const items = isMobile ? mobileTabItems[tab] : tabItems[tab]; const { metricStore, projectsStore, dashboardStore } = useStore(); const history = useHistory(); @@ -216,7 +261,9 @@ function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) { {item.icon}
{item.title}
-
+
{item.description}
@@ -227,15 +274,28 @@ function CategoryTab({ tab, inCards }: { tab: string; inCards?: boolean }) { } const AddCardSection = observer( - ({ inCards, handleOpenChange }: { inCards?: boolean, handleOpenChange?: (isOpen: boolean) => void }) => { + ({ + inCards, + handleOpenChange, + }: { + inCards?: boolean; + handleOpenChange?: (isOpen: boolean) => void; + }) => { const { showModal } = useModal(); const { metricStore, dashboardStore, projectsStore } = useStore(); + const isMobile = projectsStore.isMobile; const [tab, setTab] = React.useState('product_analytics'); - const options = [ - { label: 'Product Analytics', value: 'product_analytics' }, - { label: 'Monitors', value: 'monitors' }, - { label: 'Web Analytics', value: 'web_analytics' }, - ]; + + const options = isMobile + ? [ + { label: 'Product Analytics', value: 'product_analytics' }, + { label: 'Web Analytics', value: 'web_analytics' }, + ] + : [ + { label: 'Product Analytics', value: 'product_analytics' }, + { label: 'Monitors', value: 'monitors' }, + { label: 'Web Analytics', value: 'web_analytics' }, + ]; const originStr = window.env.ORIGIN || window.location.origin; const isSaas = /api\.openreplay\.com/.test(originStr); @@ -282,9 +342,9 @@ const AddCardSection = observer(
- +
- {inCards ? null : + {inCards ? null : (
Add existing card
- } + )} ); }