jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): funnel example

Browse source
This commit is contained in:
Shekar Siri 2024-06-27 13:52:28 +02:00
parent 67cb461020
commit 0880ce0e20
5 changed files with 91 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/ExampleCards.tsx
View file

@ -86,6 +86,32 @@ export const CARD_LIST: CardType[] = [
cardType: FUNNEL, cardType: FUNNEL,
category: CARD_CATEGORIES[0].key, category: CARD_CATEGORIES[0].key,
example: ExampleFunnel, example: ExampleFunnel,
width: 4,
data: {
stages: [
{
"value": [
"/sessions"
],
"type": "location",
"operator": "contains",
"sessionsCount": 1586,
"dropPct": null,
"usersCount": 470,
"dropDueToIssues": 0
},
{
"value": [],
"type": "click",
"operator": "onAny",
"sessionsCount": 1292,
"dropPct": 18,
"usersCount": 450,
"dropDueToIssues": 294
}
],
totalDropDueToIssues: 294
}
}, },
{ {
title: 'Path Finder', title: 'Path Finder',
@ -95,7 +121,7 @@ export const CARD_LIST: CardType[] = [
example: ExamplePath, example: ExamplePath,
}, },
{ {
title: 'Trend', title: 'Sessions Trend',
key: TIMESERIES, key: TIMESERIES,
cardType: TIMESERIES, cardType: TIMESERIES,
metricOf: 'sessionCount', metricOf: 'sessionCount',

6
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/ExCard.tsx
View file

@ -16,11 +16,11 @@ function ExCard({
return ( return (
<div <div
className={'rounded-lg overflow-hidden border border-transparent p-4 bg-white hover:border-blue hover:shadow-sm'} className={'rounded-lg overflow-hidden border border-transparent p-4 bg-white hover:border-blue hover:shadow-sm'}
style={{width: '100%', height: height || 286}} style={{width: '100%', minHeight: height || 286}}
> >
<div className={'font-medium text-lg'}>{title}</div> <div className={'font-medium text-lg'}>{title}</div>
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'} <div className={'flex flex-col gap-2 mt-2 cursor-pointer'}
style={{height: height ? height - 50 : 236,}} style={{minHeight: height ? height - 50 : 236,}}
onClick={() => onCard(type)}>{children}</div> onClick={() => onCard(type)}>{children}</div>
</div> </div>
); );

105
frontend/app/components/Dashboard/components/DashboardList/NewDashModal/Examples/Funnel.tsx
View file

@ -1,54 +1,67 @@
import { ArrowRight } from 'lucide-react'; import {ArrowRight} from 'lucide-react';
import React from 'react'; import React from 'react';
import ExCard from './ExCard'; import ExCard from './ExCard';
import {FUNNEL} from "App/constants/card"; import {FUNNEL} from "App/constants/card";
import FunnelWidget from "Components/Funnels/FunnelWidget/FunnelWidget";
import Funnel from "App/mstore/types/funnel";
function ExampleFunnel(props: any) { interface Props {
const steps = [ title: string;
{ type: string;
progress: 500, onCard: (card: string) => void;
}, data?: any,
{ }
progress: 250,
}, function ExampleFunnel(props: Props) {
{ // const steps = [
progress: 100, // {
}, // progress: 500,
]; // },
return ( // {
<ExCard // progress: 250,
{...props} // },
> // {
<> // progress: 100,
{steps.map((step, index) => ( // },
<div key={index}> // ];
<div>Step {index + 1}</div> const _data = {
<div className={'rounded flex items-center w-full overflow-hidden'}> funnel: new Funnel().fromJSON(props.data)
<div }
style={{ return (
backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6', <ExCard
width: `${(step.progress / 500) * 100}%`, {...props}
height: 30, >
}} <FunnelWidget data={_data} isWidget={true}/>
/> {/*<>*/}
<div {/* {steps.map((step, index) => (*/}
style={{ {/* <div key={index}>*/}
width: `${((500 - step.progress) / 500) * 100}%`, {/* <div>Step {index + 1}</div>*/}
height: 30, {/* <div className={'rounded flex items-center w-full overflow-hidden'}>*/}
background: '#FFF1F0', {/* <div*/}
}} {/* style={{*/}
/> {/* backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',*/}
</div> {/* width: `${(step.progress / 500) * 100}%`,*/}
<div className={'flex items-center gap-2'}> {/* height: 30,*/}
<ArrowRight size={14} color={'#8C8C8C'} strokeWidth={1} /> {/* }}*/}
<div className={'text-disabled-text'}>{step.progress}</div> {/* />*/}
</div> {/* <div*/}
</div> {/* style={{*/}
))} {/* width: `${((500 - step.progress) / 500) * 100}%`,*/}
</> {/* height: 30,*/}
</ExCard> {/* background: '#FFF1F0',*/}
); {/* }}*/}
{/* />*/}
{/* </div>*/}
{/* <div className={'flex items-center gap-2'}>*/}
{/* <ArrowRight size={14} color={'#8C8C8C'} strokeWidth={1}/>*/}
{/* <div className={'text-disabled-text'}>{step.progress}</div>*/}
{/* </div>*/}
{/* </div>*/}
{/* ))}*/}
{/*</>*/}
</ExCard>
);
} }
export default ExampleFunnel; export default ExampleFunnel;

2
frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx
View file

@ -35,7 +35,7 @@ function FunnelBar(props: Props) {
top: 0, top: 0,
left: 0, left: 0,
bottom: 0, bottom: 0,
backgroundColor: '#00b5ad', backgroundColor: '#394EFF',
}} }}
> >
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3"> <div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">

2
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -8,7 +8,7 @@ import { NoContent, Icon } from 'UI';
import { useModal } from 'App/components/Modal'; import { useModal } from 'App/components/Modal';
interface Props { interface Props {
metric: Widget; metric?: Widget;
isWidget?: boolean; isWidget?: boolean;
data: any; data: any;
} }