From b36875492ec48085174f3ed98a6e7f75d4039614 Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Tue, 29 Oct 2024 14:39:50 +0100 Subject: [PATCH 1/3] ui: start new dashboard redesign --- .../AddCardSection/AddCardSection.tsx | 157 ++++++++++++++++++ .../DashboardHeader/DashboardHeader.tsx | 89 ++++------ .../DashboardView/DashboardView.tsx | 2 +- .../DashboardWidgetGrid.tsx | 2 +- .../shared/Breadcrumb/BackButton.tsx | 10 +- .../ui/Icons/dashboards_circle_alert.tsx | 19 +++ .../ui/Icons/dashboards_cohort_chart.tsx | 19 +++ .../ui/Icons/dashboards_heatmap_2.tsx | 19 +++ .../ui/Icons/dashboards_user_journey.tsx | 19 +++ frontend/app/components/ui/Icons/index.ts | 4 + .../app/svg/icons/dashboards/circle-alert.svg | 18 ++ .../app/svg/icons/dashboards/cohort-chart.svg | 12 ++ .../app/svg/icons/dashboards/heatmap-2.svg | 14 ++ .../app/svg/icons/dashboards/user-journey.svg | 11 ++ frontend/app/theme/colors.js | 1 + frontend/package.json | 2 +- frontend/yarn.lock | 12 +- 17 files changed, 339 insertions(+), 71 deletions(-) create mode 100644 frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx create mode 100644 frontend/app/components/ui/Icons/dashboards_circle_alert.tsx create mode 100644 frontend/app/components/ui/Icons/dashboards_cohort_chart.tsx create mode 100644 frontend/app/components/ui/Icons/dashboards_heatmap_2.tsx create mode 100644 frontend/app/components/ui/Icons/dashboards_user_journey.tsx create mode 100644 frontend/app/svg/icons/dashboards/circle-alert.svg create mode 100644 frontend/app/svg/icons/dashboards/cohort-chart.svg create mode 100644 frontend/app/svg/icons/dashboards/heatmap-2.svg create mode 100644 frontend/app/svg/icons/dashboards/user-journey.svg diff --git a/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx new file mode 100644 index 000000000..5fc55b0fd --- /dev/null +++ b/frontend/app/components/Dashboard/components/AddCardSection/AddCardSection.tsx @@ -0,0 +1,157 @@ +import React from 'react'; +import { FolderOutlined } from '@ant-design/icons'; +import { Segmented } from 'antd'; +import { + LineChart, + AlignStartVertical, + ArrowUpDown, + WifiOff, + Turtle, + FileStack, + AppWindow, + Earth, + Combine, + Users, + ArrowDown10, +} from 'lucide-react'; +import { Icon } from 'UI'; + +interface TabItem { + icon: React.ReactNode; + title: string; + description: string; +} +const tabItems: Record = { + product_analytics: [ + { + icon: , + title: 'Trends', + description: 'Track session trends over time.', + }, + { + icon: , + title: 'Funnel', + description: 'Visualize user progression through critical steps.', + }, + { + icon: , + title: 'Journeys', + description: 'Understand the paths users take through your product.', + }, + { + icon: , + title: 'Retention', + description: 'Analyze user retention over specific time periods.', + }, + { + icon: , + title: 'Heatmaps', + description: 'Generate a report using by asking AI.', + }, + ], + monitors: [ + { + icon: , + title: 'JS Errors', + description: 'Monitor JS errors affecting user experience.', + }, + { + icon: , + title: 'Top Network Requests', + description: 'Identify the most frequent network requests.', + }, + { + icon: , + title: '4xx/5xx Requests', + description: 'Track client and server errors for performance issues.', + }, + { + icon: , + title: 'Slow Network Requests', + description: 'Pinpoint the slowest network requests causing delays.', + }, + ], + web_analytics: [ + { + icon: , + title: 'Top Pages', + description: 'Discover the most visited pages on your site.', + }, + { + icon: , + title: 'Top Browsers', + description: 'Analyze the browsers your visitors are using the most.', + }, + { + icon: , + title: 'Top Referrer', + description: 'See where your traffic is coming from.', + }, + { + icon: , + title: 'Top Users', + description: 'Identify the users with the most interactions.', + }, + { + icon: , + title: 'Speed Index by Country', + description: 'Measure performance across different regions.', + }, + ], +}; + +function CategoryTab({ tab }: { tab: string }) { + const items = tabItems[tab]; + return ( +
+ {items.map((item, index) => ( +
+ {item.icon} +
+
{item.title}
+
{item.description}
+
+
+ ))} +
+ ) +} + +function AddCardSection() { + 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' }, + ]; + return ( +
+
+
Add a card to dashboard
+
Ask AI
+
+
+ setTab(value)} + /> +
+ +
+ +
Add existing card
+
+
+ ); +} + +export default AddCardSection; diff --git a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx index 09f2348f6..793a858fc 100644 --- a/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/frontend/app/components/Dashboard/components/DashboardHeader/DashboardHeader.tsx @@ -1,5 +1,4 @@ import React from 'react'; -//import {Breadcrumb} from 'Shared/Breadcrumb'; import BackButton from '../../../shared/Breadcrumb/BackButton'; import { withSiteId } from 'App/routes'; import { withRouter, RouteComponentProps } from 'react-router-dom'; @@ -11,8 +10,6 @@ import DashboardOptions from '../DashboardOptions'; import withModal from 'App/components/Modal/withModal'; import { observer } from 'mobx-react-lite'; import DashboardEditModal from '../DashboardEditModal'; -import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton'; -import CreateCard from 'Components/Dashboard/components/DashboardList/NewDashModal/CreateCard'; import CreateCardButton from 'Components/Dashboard/components/CreateCardButton'; interface IProps { @@ -21,14 +18,12 @@ interface IProps { renderReport?: any; } - type Props = IProps & RouteComponentProps; const MAX_CARDS = 29; function DashboardHeader(props: Props) { - const { siteId, dashboardId } = props; + const { siteId } = props; const { dashboardStore } = useStore(); - const { showModal } = useModal(); const [focusTitle, setFocusedInput] = React.useState(true); const [showEditModal, setShowEditModal] = React.useState(false); const period = dashboardStore.period; @@ -47,7 +42,7 @@ function DashboardHeader(props: Props) { await confirm({ header: 'Delete Dashboard', confirmButton: 'Yes, delete', - confirmation: `Are you sure you want to permanently delete this Dashboard?` + confirmation: `Are you sure you want to permanently delete this Dashboard?`, }) ) { dashboardStore.deleteDashboard(dashboard).then(() => { @@ -56,32 +51,25 @@ function DashboardHeader(props: Props) { } }; return ( -
+ <> setShowEditModal(false)} focusTitle={focusTitle} /> -
-
- - - - {/* */} +
+
+ + {dashboard?.name} } @@ -89,45 +77,28 @@ function DashboardHeader(props: Props) { className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dashed hover:border-gray-medium cursor-pointer" />
-
- +
+ dashboardStore.setPeriod(period)} + right={true} + isAnt={true} + useButtonStyle={true} + /> -
- dashboardStore.setPeriod(period)} - right={true} - isAnt={true} - useButtonStyle={true} - /> -
- -
- -
+
-
- {/* @ts-ignore */} - -

onEdit(false)} - > - {/* {dashboard?.description || 'Describe the purpose of this dashboard'} */} -

- -
-
+ ); } diff --git a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx index 35672205f..d4b410900 100644 --- a/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx +++ b/frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx @@ -98,7 +98,7 @@ function DashboardView(props: Props) { const isSaas = /app\.openreplay\.com/.test(originStr); return ( -
+
{/* @ts-ignore */} {isSaas ? : null} diff --git a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx index 7720101c0..792369104 100644 --- a/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx +++ b/frontend/app/components/Dashboard/components/DashboardWidgetGrid/DashboardWidgetGrid.tsx @@ -24,7 +24,7 @@ function DashboardWidgetGrid(props: Props) { { list?.length === 0 ? ( -
+
{ history.push(`/${siteId}/dashboard`); }; - + if (compact) { + return ( +