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,
category: CARD_CATEGORIES[0].key,
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',
@ -95,7 +121,7 @@ export const CARD_LIST: CardType[] = [
example: ExamplePath,
},
{
title: 'Trend',
title: 'Sessions Trend',
key: TIMESERIES,
cardType: TIMESERIES,
metricOf: 'sessionCount',

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

@ -16,11 +16,11 @@ function ExCard({
return (
<div
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={'flex flex-col gap-2 mt-2 cursor-pointer'}
style={{height: height ? height - 50 : 236,}}
<div className={'flex flex-col gap-2 mt-2 cursor-pointer'}
style={{minHeight: height ? height - 50 : 236,}}
onClick={() => onCard(type)}>{children}</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 ExCard from './ExCard';
import {FUNNEL} from "App/constants/card";
import FunnelWidget from "Components/Funnels/FunnelWidget/FunnelWidget";
import Funnel from "App/mstore/types/funnel";
function ExampleFunnel(props: any) {
const steps = [
{
progress: 500,
},
{
progress: 250,
},
{
progress: 100,
},
];
return (
<ExCard
{...props}
>
<>
{steps.map((step, index) => (
<div key={index}>
<div>Step {index + 1}</div>
<div className={'rounded flex items-center w-full overflow-hidden'}>
<div
style={{
backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',
width: `${(step.progress / 500) * 100}%`,
height: 30,
}}
/>
<div
style={{
width: `${((500 - step.progress) / 500) * 100}%`,
height: 30,
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>
);
interface Props {
title: string;
type: string;
onCard: (card: string) => void;
data?: any,
}
function ExampleFunnel(props: Props) {
// const steps = [
// {
// progress: 500,
// },
// {
// progress: 250,
// },
// {
// progress: 100,
// },
// ];
const _data = {
funnel: new Funnel().fromJSON(props.data)
}
return (
<ExCard
{...props}
>
<FunnelWidget data={_data} isWidget={true}/>
{/*<>*/}
{/* {steps.map((step, index) => (*/}
{/* <div key={index}>*/}
{/* <div>Step {index + 1}</div>*/}
{/* <div className={'rounded flex items-center w-full overflow-hidden'}>*/}
{/* <div*/}
{/* style={{*/}
{/* backgroundColor: step.progress <= 100 ? '#394EFF' : '#E2E4F6',*/}
{/* width: `${(step.progress / 500) * 100}%`,*/}
{/* height: 30,*/}
{/* }}*/}
{/* />*/}
{/* <div*/}
{/* style={{*/}
{/* width: `${((500 - step.progress) / 500) * 100}%`,*/}
{/* height: 30,*/}
{/* 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;

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

@ -35,7 +35,7 @@ function FunnelBar(props: Props) {
top: 0,
left: 0,
bottom: 0,
backgroundColor: '#00b5ad',
backgroundColor: '#394EFF',
}}
>
<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';
interface Props {
metric: Widget;
metric?: Widget;
isWidget?: boolean;
data: any;
}