change(ui): funnel example
This commit is contained in:
Shekar Siri
parent
67cb461020
commit
0880ce0e20
5 changed files with 91 additions and 52 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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,}}
|
||||
style={{minHeight: height ? height - 50 : 236,}}
|
||||
onClick={() => onCard(type)}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,52 +1,65 @@
|
|||
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,
|
||||
},
|
||||
];
|
||||
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}
|
||||
>
|
||||
<>
|
||||
{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>
|
||||
))}
|
||||
</>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue