diff --git a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx index e78be299f..248558397 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/DashboardList.tsx @@ -17,7 +17,6 @@ function DashboardList({ history, siteId }: { history: any; siteId: string }) { const { dashboardStore } = useStore(); const list = dashboardStore.filteredList; const dashboardsSearch = dashboardStore.filter.query; - const lenth = list.length; const tableConfig: TableColumnsType = [ @@ -72,7 +71,7 @@ function DashboardList({ history, siteId }: { history: any; siteId: string }) { ]; return ( diff --git a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx index ef92298dc..afc478e49 100644 --- a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx +++ b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx @@ -1,25 +1,41 @@ +import { PlusOutlined } from '@ant-design/icons'; +import { Button } from 'antd'; +import { observer } from 'mobx-react-lite'; import React from 'react'; -import { PageTitle } from 'UI'; -import DashboardSearch from './DashboardSearch'; + import { useStore } from 'App/mstore'; -import { observer, useObserver } from 'mobx-react-lite'; import { withSiteId } from 'App/routes'; -import { Button } from 'antd' -import { PlusOutlined } from "@ant-design/icons"; +import { PageTitle } from 'UI'; + +import DashboardSearch from './DashboardSearch'; +import NewDashboardModal from './NewDashModal'; function Header({ history, siteId }: { history: any; siteId: string }) { + const [showModal, setShowModal] = React.useState(false); const { dashboardStore } = useStore(); - const sort = useObserver(() => dashboardStore.sort); + + const onSaveDashboard = () => { + dashboardStore.initDashboard(); + dashboardStore + .save(dashboardStore.dashboardInstance) + .then(async (syncedDashboard) => { + dashboardStore.selectDashboardById(syncedDashboard.dashboardId); + history.push( + withSiteId(`/dashboard/${syncedDashboard.dashboardId}`, siteId) + ); + }); + }; const onAddDashboardClick = () => { - dashboardStore.initDashboard(); - dashboardStore.save(dashboardStore.dashboardInstance).then(async (syncedDashboard) => { - dashboardStore.selectDashboardById(syncedDashboard.dashboardId); - history.push(withSiteId(`/dashboard/${syncedDashboard.dashboardId}`, siteId)); - }); + setShowModal(true); + }; + + const onClose = () => { + setShowModal(false); }; return ( + <>
@@ -27,7 +43,9 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
@@ -35,17 +53,9 @@ function Header({ history, siteId }: { history: any; siteId: string }) {
- {/* dashboardStore.updateKey('sort', { by: value.value })}*/} - {/*/>*/}
- + + ); } diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx new file mode 100644 index 000000000..4fa482592 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Count.tsx @@ -0,0 +1,143 @@ +import { Angry, ArrowDownUp, Mouse, MousePointerClick, Unlink } from 'lucide-react'; +import React from 'react'; + + + +import ExCard from './ExCard'; + + +function ExampleCount() { + return + + ; +} + +function Frustrations() { + const rows = [ + { + label: 'Rage Clicks', + progress: 25, + value: 100, + icon: , + }, + { + label: 'Dead Clicks', + progress: 75, + value: 75, + icon: , + }, + { + label: '4XX Pages', + progress: 50, + value: 50, + icon: , + }, + { + label: 'Mouse Trashing', + progress: 10, + value: 25, + icon: , + }, + { + label: 'Excessive Scrolling', + progress: 10, + value: 10, + icon: , + }, + ]; + + return ( +
+ {rows.map((r) => ( +
+ {r.icon} +
{r.label}
+
+
+
+
+
{r.value}
+
+ ))} +
+ ); +} + +function Errors() { + const rows = [ + { + label: 'HTTP response status code (404 Not Found)', + value: 500, + progress: 90, + icon:
4XX
, + }, + { + label: 'Cross-origin request blocked', + value: 300, + progress: 60, + icon:
CROS
, + }, + { + label: 'Reference error', + value: 200, + progress: 40, + icon:
RE
, + }, + { + label: 'Unhandled Promise Rejection', + value: 50, + progress: 20, + icon:
NULL
, + }, + { + label: 'Failed Network Request', + value: 10, + progress: 5, + icon:
XHR
, + }, + ]; +} + +function Circle({ + children, + badgeType, +}: { + children: React.ReactNode; + badgeType: 0 | 1 | 2; +}) { + const colors = { + 0: '#FFFBE6', + 1: '#FFF1F0', + 2: '#EBF4F5', + }; + + return ( +
+ {children} +
+ ); +} + + +export default ExampleCount \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx new file mode 100644 index 000000000..b93dcb374 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx @@ -0,0 +1,21 @@ +import React from 'react' + +function ExCard({ + title, + children, +}: { + title: React.ReactNode; + children: React.ReactNode; +}) { + return ( +
+
{title}
+
{children}
+
+ ); +} + +export default ExCard \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx new file mode 100644 index 000000000..e3989fb9c --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx @@ -0,0 +1,51 @@ +import { ArrowRight } from 'lucide-react'; +import React from 'react'; + +import ExCard from './ExCard'; + +function ExampleFunnel() { + const steps = [ + { + progress: 500, + }, + { + progress: 250, + }, + { + progress: 100, + }, + ]; + return ( + + <> + {steps.map((step, index) => ( +
+
Step {index + 1}
+
+
+
+
+
+ +
{step.progress}
+
+
+ ))} + + + ); +} + +export default ExampleFunnel; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx new file mode 100644 index 000000000..7c7669532 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Path.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import { ResponsiveContainer, Sankey } from 'recharts'; + +import CustomLink from 'App/components/shared/Insights/SankeyChart/CustomLink'; +import CustomNode from 'App/components/shared/Insights/SankeyChart/CustomNode'; + +import ExCard from './ExCard'; + +function ExamplePath() { + const data = { + nodes: [ + { idd: 0, name: 'Home' }, + { idd: 1, name: 'Google' }, + { idd: 2, name: 'Facebook' }, + { idd: 3, name: 'Search' }, + { idd: 4, name: 'Product' }, + { idd: 5, name: 'Chart' }, + ], + links: [ + { source: 0, target: 3, value: 40 }, + { source: 0, target: 4, value: 60 }, + + { source: 1, target: 3, value: 100 }, + { source: 2, target: 3, value: 100 }, + + { source: 3, target: 4, value: 50 }, + { source: 3, target: 5, value: 50 }, + + { source: 4, target: 5, value: 15 }, + ], + }; + return ( + + + } + link={(linkProps) => } + data={data} + > + + + + + + + + + + ); +} + +export default ExamplePath \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx new file mode 100644 index 000000000..cc14f6ea8 --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Trend.tsx @@ -0,0 +1,90 @@ +import { Segmented } from 'antd'; +import React from 'react'; + +import ExCard from './ExCard'; + +function ExampleTrend() { + const rows = [50, 40, 30, 20, 10]; + const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May']; + + const [isMulti, setIsMulti] = React.useState(false); + return ( + +
Trend
+ setIsMulti(v === 'multi')} + /> +
+ } + > +
+
+ {rows.map((r) => ( +
+
{r}K
+
+
+ ))} +
+
+ {months.map((m) => ( +
{m}
+ ))} +
+ +
+ + + +
+ {isMulti ? ( +
+ + + +
+ ) : null} +
+
+
+
+
CTA 1
+
+
+
+
CTA 2
+
+
+ + ); +} + +export default ExampleTrend; diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx new file mode 100644 index 000000000..bf82d7cec --- /dev/null +++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/index.tsx @@ -0,0 +1,80 @@ +import { Segmented } from 'antd'; +import { Activity, BarChart, TableCellsMerge, TrendingUp } from 'lucide-react'; +import React from 'react'; + +import { Modal } from 'UI'; +import ExampleCount from "./Examples/Count"; + +import ExampleFunnel from './Examples/Funnel'; +import ExamplePath from './Examples/Path'; +import ExampleTrend from './Examples/Trend'; + +function NewDashboardModal(props: { onClose: () => void; open: boolean }) { + return ( + + +
+
+
+ Select your first card type to add to the dashboard +
+
+ Close +
+
+
+ + +
Product Analytics
+
+ ), + value: 'product-analytics', + }, + { + label: ( +
+ +
Performance Monitoring
+
+ ), + value: 'performance-monitoring', + }, + { + label: ( +
+ +
Web Analytics
+
+ ), + value: 'web-analytics', + }, + { + label: ( +
+ +
Core Web Vitals
+
+ ), + value: 'core-web-vitals', + }, + ]} + /> + +
+ + + + +
+
+
+ + + ); +} + +export default NewDashboardModal; diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx deleted file mode 100644 index f85110edb..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionList/SessionList.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import SessionListItem from '../SessionListItem'; - -function SessionList(props) { - return ( -
- Session list - -
- ); -} - -export default SessionList; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts deleted file mode 100644 index 779c9df2a..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionList/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SessionList'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx deleted file mode 100644 index 898d2d341..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/SessionListItem.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; - -interface Props { - session: any; -} -function SessionListItem(props: Props) { - return ( -
- Session list item -
- ); -} - -export default SessionListItem; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts deleted file mode 100644 index 1c2791143..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionListItem/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SessionListItem'; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx deleted file mode 100644 index 0eb5ca1a5..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/SessionWidget.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import SessionList from '../SessionList'; - -function SessionWidget(props) { - return ( -
- -
- ); -} - -export default SessionWidget; \ No newline at end of file diff --git a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts b/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts deleted file mode 100644 index 64b9563f5..000000000 --- a/frontend/app/components/Dashboard/components/Sessions/SessionWidget/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from './SessionWidget'; \ No newline at end of file diff --git a/frontend/app/components/shared/Insights/SankeyChart/CustomLink.tsx b/frontend/app/components/shared/Insights/SankeyChart/CustomLink.tsx index 7749fa1f6..12392af53 100644 --- a/frontend/app/components/shared/Insights/SankeyChart/CustomLink.tsx +++ b/frontend/app/components/shared/Insights/SankeyChart/CustomLink.tsx @@ -34,9 +34,11 @@ const CustomLink: React.FC = (props) => { targetControlX, linkWidth, index, - } = props; - const isActive = activeLinks.length > 0 && activeLinks.includes(payload.id); - const isHover = hoveredLinks.length > 0 && hoveredLinks.includes(payload.id); + activeLink + } = + props; + const isActive = activeLinks?.length > 0 && activeLinks.includes(payload.id); + const isHover = hoveredLinks?.length > 0 && hoveredLinks.includes(payload.id); const onClick = () => { if (props.onClick) { diff --git a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx index 330753d3f..aa0797838 100644 --- a/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx +++ b/frontend/app/components/shared/Insights/SankeyChart/CustomNode.tsx @@ -17,19 +17,40 @@ const CustomNode: React.FC = (props) => { const { x, y, width, height, index, payload, containerWidth } = props; const isOut = x + width + 6 > containerWidth; - return ( - - - - - - - ); -}; + return ( + + + + {/**/} + {/* */} + {/**/} + + {!isDemo ? ( + + + + ) : ( + +
{payload.name}
+ + )} + + ); +} export default CustomNode; diff --git a/frontend/app/components/ui/Modal/Modal.tsx b/frontend/app/components/ui/Modal/Modal.tsx index c489aa216..8c1701fe6 100644 --- a/frontend/app/components/ui/Modal/Modal.tsx +++ b/frontend/app/components/ui/Modal/Modal.tsx @@ -4,7 +4,7 @@ import cn from 'classnames'; interface Props { children: React.ReactNode; open?: boolean; - size ?: 'tiny' | 'small' | 'large' | 'fullscreen'; + size ?: 'tiny' | 'small' | 'large' | 'fullscreen' | 'xlarge'; onClose?: () => void; } function Modal(props: Props) { @@ -20,14 +20,22 @@ function Modal(props: Props) { }, [open]); const style: any = {}; - if (size === 'tiny') { - style.width = '300px'; - } else if (size === 'small') { - style.width = '400px'; - } else if (size === 'large') { - style.width = '700px'; - } else if (size === 'fullscreen') { - style.width = '100%'; + switch (size) { + case 'tiny': + style.width = '300px'; + break; + case 'small': + style.width = '400px'; + break; + case 'large': + style.width = '700px'; + break; + case 'xlarge': + style.width = '846px'; + break; + case 'fullscreen': + style.width = '100%'; + break; } const handleClose = (e: React.MouseEvent) => {