From 36a0fad5b43032707f67cf19433b5aca3d37aae1 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 10 Feb 2025 17:23:23 +0100 Subject: [PATCH] ui: funnel view type --- .../AddCardSection/AddCardSection.tsx | 99 +++++++++---------- .../components/WidgetView/WidgetView.tsx | 3 +- 2 files changed, 49 insertions(+), 53 deletions(-) diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx index 4ceecc846..751d7505d 100644 --- a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx +++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx @@ -13,23 +13,17 @@ import { Users, Sparkles, Globe, - MonitorSmartphone + MonitorSmartphone, } from 'lucide-react'; import { Icon } from 'UI'; -import FilterSeries from 'App/mstore/types/filterSeries'; import { useModal } from 'App/components/Modal'; -import { - CARD_LIST, - CardType -} from '../DashboardList/NewDashModal/ExampleCards'; import { useStore } from 'App/mstore'; import { HEATMAP, FUNNEL, - TABLE, TIMESERIES, USER_PATH, - CATEGORIES + CATEGORIES, } from 'App/constants/card'; import { useHistory } from 'react-router-dom'; import { dashboardMetricCreate, withSiteId, metricCreate } from 'App/routes'; @@ -50,13 +44,13 @@ export const tabItems: Record = { icon: , title: 'Trends', type: TIMESERIES, - description: 'Track session and user trends over time.' + description: 'Track session and user trends over time.', }, { icon: , title: 'Funnels', type: FUNNEL, - description: 'Visualize user progression through critical steps.' + description: 'Visualize user progression through critical steps.', }, { icon: ( @@ -64,14 +58,14 @@ export const tabItems: Record = { ), title: 'Journeys', type: USER_PATH, - description: 'Understand the paths users take through your product.' + description: 'Understand the paths users take through your product.', }, { icon: , title: 'Heatmaps', type: HEATMAP, - description: 'Visualize user interaction patterns on your pages.' - } + description: 'Visualize user interaction patterns on your pages.', + }, ], [CATEGORIES.monitors]: [ { @@ -80,67 +74,65 @@ export const tabItems: Record = { ), title: 'JS Errors', type: FilterKey.ERRORS, - description: 'Monitor JS errors affecting user experience.' + description: 'Monitor JS errors affecting user experience.', }, { icon: , title: 'Top Network Requests', type: FilterKey.FETCH, - description: 'Identify the most frequent network requests.' + description: 'Identify the most frequent network requests.', }, { icon: , title: '4xx/5xx Requests', type: TIMESERIES + '_4xx_requests', - description: 'Track client and server errors for performance issues.' + description: 'Track client and server errors for performance issues.', }, { icon: , title: 'Slow Network Requests', type: TIMESERIES + '_slow_network_requests', - description: 'Pinpoint the slowest network requests causing delays.' - } + description: 'Pinpoint the slowest network requests causing delays.', + }, ], [CATEGORIES.web_analytics]: [ { icon: , title: 'Top Pages', type: FilterKey.LOCATION, - description: 'Discover the most visited pages on your site.' + description: 'Discover the most visited pages on your site.', }, { icon: , title: 'Top Browsers', type: FilterKey.USER_BROWSER, - description: 'Analyze the browsers your visitors are using the most.' + description: 'Analyze the browsers your visitors are using the most.', }, { icon: , title: 'Top Referrer', type: FilterKey.REFERRER, - description: 'See where your traffic is coming from.' + description: 'See where your traffic is coming from.', }, { icon: , title: 'Top Users', type: FilterKey.USERID, - description: 'Identify the users with the most interactions.' + description: 'Identify the users with the most interactions.', }, { icon: , title: 'Top Countries', type: FilterKey.USER_COUNTRY, - description: 'Track the geographical distribution of your audience.' + description: 'Track the geographical distribution of your audience.', }, { icon: , title: 'Top Devices', type: FilterKey.USER_DEVICE, - description: 'Explore the devices used by your users.' - } - - - ] + description: 'Explore the devices used by your users.', + }, + ], }; export const mobileTabItems: Record = { @@ -163,41 +155,42 @@ export const mobileTabItems: Record = { icon: , title: 'Top Users', type: FilterKey.USERID, - description: 'Identify the users with the most interactions.' + description: 'Identify the users with the most interactions.', }, { icon: , title: 'Top Countries', type: FilterKey.USER_COUNTRY, - description: 'Track the geographical distribution of your audience.' + description: 'Track the geographical distribution of your audience.', }, { icon: , title: 'Top Devices', type: FilterKey.USER_DEVICE, - description: 'Explore the devices used by your users.' - } - ] + description: 'Explore the devices used by your users.', + }, + ], }; function CategoryTab({ - tab, - inCards, - isMobile - }: { + tab, + inCards, + isMobile, +}: { tab: string; isMobile?: boolean; inCards?: boolean; }) { const items = isMobile ? mobileTabItems[tab] : tabItems[tab]; - const { metricStore, projectsStore, dashboardStore } = useStore(); + const { projectsStore, dashboardStore } = useStore(); const history = useHistory(); const handleCardSelection = (card: string) => { - // metricStore.init(); if (projectsStore.activeSiteId) { if (inCards) { - history.push(withSiteId(metricCreate(), projectsStore.activeSiteId) + `?mk=${card}`); + history.push( + withSiteId(metricCreate(), projectsStore.activeSiteId) + `?mk=${card}` + ); } else if (dashboardStore.selectedDashboard) { history.push( withSiteId( @@ -235,27 +228,29 @@ function CategoryTab({ const AddCardSection = observer( ({ - inCards, - handleOpenChange - }: { + 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(isMobile ? 'web_analytics' : 'product_analytics'); + const [tab, setTab] = React.useState( + isMobile ? 'web_analytics' : 'product_analytics' + ); const options = isMobile ? [ - // { label: 'Product Analytics', value: 'product_analytics' }, - { label: 'Mobile Analytics', value: 'web_analytics' } - ] + // { label: 'Product Analytics', value: 'product_analytics' }, + { label: 'Mobile Analytics', value: 'web_analytics' }, + ] : [ - { label: 'Product Analytics', value: 'product_analytics' }, - { label: 'Monitors', value: 'monitors' }, - { 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); @@ -269,7 +264,7 @@ const AddCardSection = observer( width: 800, onClose: () => { metricStore.updateKey('metricsSearch', ''); - } + }, } ); handleOpenChange?.(false); diff --git a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx index f477b0754..ec486925d 100644 --- a/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx +++ b/frontend/app/components/Dashboard/components/WidgetView/WidgetView.tsx @@ -67,7 +67,8 @@ function WidgetView({ match: { params: { siteId, dashboardId, metricId } } }: Pr metricType: selectedCard.cardType, name: selectedCard.title, metricOf: selectedCard.metricOf, - category: mk + category: mk, + viewType: selectedCard.cardType === FUNNEL ? 'chart' : 'lineChart', }; if (selectedCard.filters) { cardData.series = [