change(ui): funnel bar style changes
This commit is contained in:
Shekar Siri
parent
b3ee59c6e3
commit
caa55de1b6
3 changed files with 191 additions and 187 deletions
|
|
@ -235,14 +235,14 @@ export const CARD_LIST: CardType[] = [
|
|||
metricOf: FilterKey.PAGES_RESPONSE_TIME_DISTRIBUTION,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
data: {
|
||||
chart: generateAreaData(),
|
||||
label: "Page Response Time (ms)",
|
||||
chart: generateBarChartData(),
|
||||
label: "Number of Calls",
|
||||
unit: 'ms',
|
||||
namesMap: [
|
||||
"Series 1"
|
||||
]
|
||||
},
|
||||
example: AreaChartCard,
|
||||
example: BarChartCard,
|
||||
},
|
||||
|
||||
{
|
||||
|
|
@ -252,7 +252,7 @@ export const CARD_LIST: CardType[] = [
|
|||
metricOf: FilterKey.RESOURCES_VS_VISUALLY_COMPLETE,
|
||||
category: CARD_CATEGORIES[1].key,
|
||||
data: {
|
||||
chart: generateBarChartDate(),
|
||||
chart: generateBarChartData(),
|
||||
namesMap: [
|
||||
"Series 1"
|
||||
]
|
||||
|
|
@ -303,6 +303,8 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[1].key,
|
||||
data: {
|
||||
chart: generateAreaData(),
|
||||
label: "Time to Render (ms)",
|
||||
unit: 'ms',
|
||||
namesMap: [
|
||||
"Series 1"
|
||||
]
|
||||
|
|
@ -318,9 +320,10 @@ export const CARD_LIST: CardType[] = [
|
|||
category: CARD_CATEGORIES[1].key,
|
||||
data: {
|
||||
chart: generateAreaData(),
|
||||
label: "Number of Sessions",
|
||||
namesMap: [
|
||||
"Series 1"
|
||||
]
|
||||
],
|
||||
},
|
||||
example: AreaChartCard,
|
||||
},
|
||||
|
|
@ -386,7 +389,7 @@ export const CARD_LIST: CardType[] = [
|
|||
metricOf: FilterKey.IMPACTED_SESSIONS_BY_JS_ERRORS,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
data: {
|
||||
chart: generateBarChartDate(),
|
||||
chart: generateBarChartData(),
|
||||
},
|
||||
example: BarChartCard,
|
||||
},
|
||||
|
|
@ -397,7 +400,7 @@ export const CARD_LIST: CardType[] = [
|
|||
metricOf: FilterKey.RESOURCES_BY_PARTY,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
data: {
|
||||
chart: generateBarChartDate(),
|
||||
chart: generateBarChartData(),
|
||||
},
|
||||
example: BarChartCard,
|
||||
},
|
||||
|
|
@ -417,7 +420,7 @@ export const CARD_LIST: CardType[] = [
|
|||
metricOf: FilterKey.ERRORS_PER_TYPE,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
data: {
|
||||
chart: generateBarChartDate(),
|
||||
chart: generateBarChartData(),
|
||||
},
|
||||
example: BarChartCard,
|
||||
},
|
||||
|
|
@ -725,7 +728,7 @@ function generateRandomValue(min: number, max: number): number {
|
|||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
|
||||
function generateBarChartDate(): any[] {
|
||||
function generateBarChartData(): any[] {
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
|
||||
return months.map(month => ({
|
||||
time: month,
|
||||
|
|
|
|||
|
|
@ -1,70 +1,70 @@
|
|||
import {GitCommitHorizontal} from 'lucide-react';
|
||||
import { GitCommitHorizontal } from 'lucide-react';
|
||||
import React from 'react';
|
||||
|
||||
import ExCard from './ExCard';
|
||||
import {PERFORMANCE} from "App/constants/card";
|
||||
import {Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
|
||||
import {Styles} from "Components/Dashboard/Widgets/common";
|
||||
import { PERFORMANCE } from 'App/constants/card';
|
||||
import { Bar, BarChart, CartesianGrid, Legend, Rectangle, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
|
||||
import { Styles } from 'Components/Dashboard/Widgets/common';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
type: string;
|
||||
onCard: (card: string) => void;
|
||||
onClick?: any;
|
||||
data?: any,
|
||||
title: string;
|
||||
type: string;
|
||||
onCard: (card: string) => void;
|
||||
onClick?: any;
|
||||
data?: any,
|
||||
}
|
||||
|
||||
function BarChartCard(props: Props) {
|
||||
return (
|
||||
<ExCard
|
||||
{...props}
|
||||
return (
|
||||
<ExCard
|
||||
{...props}
|
||||
>
|
||||
{/*<ResponsiveContainer width="100%" height="100%">*/}
|
||||
{/* <BarChart*/}
|
||||
{/* width={400}*/}
|
||||
{/* height={280}*/}
|
||||
{/* data={_data}*/}
|
||||
{/* margin={Styles.chartMargins}*/}
|
||||
{/* >*/}
|
||||
{/* /!*<CartesianGrid strokeDasharray="3 3"/>*!/*/}
|
||||
{/* <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>*/}
|
||||
{/* <XAxis {...Styles.xaxis} dataKey="name"/>*/}
|
||||
{/* <YAxis {...Styles.yaxis} />*/}
|
||||
{/* <Tooltip/>*/}
|
||||
{/* <Legend/>*/}
|
||||
{/* <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue"/>}/>*/}
|
||||
{/* /!*<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>*!/*/}
|
||||
{/* </BarChart>*/}
|
||||
{/*</ResponsiveContainer>*/}
|
||||
|
||||
<ResponsiveContainer height={240} width="100%">
|
||||
<BarChart
|
||||
data={props.data?.chart}
|
||||
margin={Styles.chartMargins}
|
||||
>
|
||||
{/*<ResponsiveContainer width="100%" height="100%">*/}
|
||||
{/* <BarChart*/}
|
||||
{/* width={400}*/}
|
||||
{/* height={280}*/}
|
||||
{/* data={_data}*/}
|
||||
{/* margin={Styles.chartMargins}*/}
|
||||
{/* >*/}
|
||||
{/* /!*<CartesianGrid strokeDasharray="3 3"/>*!/*/}
|
||||
{/* <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>*/}
|
||||
{/* <XAxis {...Styles.xaxis} dataKey="name"/>*/}
|
||||
{/* <YAxis {...Styles.yaxis} />*/}
|
||||
{/* <Tooltip/>*/}
|
||||
{/* <Legend/>*/}
|
||||
{/* <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue"/>}/>*/}
|
||||
{/* /!*<Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple"/>}/>*!/*/}
|
||||
{/* </BarChart>*/}
|
||||
{/*</ResponsiveContainer>*/}
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE" />
|
||||
<XAxis
|
||||
{...Styles.xaxis}
|
||||
dataKey="time"
|
||||
// interval={21}
|
||||
/>
|
||||
<YAxis
|
||||
{...Styles.yaxis}
|
||||
tickFormatter={val => Styles.tickFormatter(val)}
|
||||
label={{ ...Styles.axisLabelLeft, value: props.data?.label || 'Number of Errors' }}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Legend />
|
||||
<Tooltip {...Styles.tooltip} />
|
||||
<Bar minPointSize={1} name={<span className="float">One</span>}
|
||||
dataKey="value" stackId="a" fill={Styles.colors[0]} />
|
||||
{/*<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a"*/}
|
||||
{/* fill={Styles.colors[2]}/>*/}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</ExCard>
|
||||
|
||||
<ResponsiveContainer height={240} width="100%">
|
||||
<BarChart
|
||||
data={props.data?.chart}
|
||||
margin={Styles.chartMargins}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#EEEEEE"/>
|
||||
<XAxis
|
||||
{...Styles.xaxis}
|
||||
dataKey="time"
|
||||
// interval={21}
|
||||
/>
|
||||
<YAxis
|
||||
{...Styles.yaxis}
|
||||
tickFormatter={val => Styles.tickFormatter(val)}
|
||||
label={{...Styles.axisLabelLeft, value: "Number of Errors"}}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Legend/>
|
||||
<Tooltip {...Styles.tooltip} />
|
||||
<Bar minPointSize={1} name={<span className="float">One</span>}
|
||||
dataKey="value" stackId="a" fill={Styles.colors[0]}/>
|
||||
{/*<Bar name={<span className="float">3<sup>rd</sup> Party</span>} dataKey="thirdParty" stackId="a"*/}
|
||||
{/* fill={Styles.colors[2]}/>*/}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</ExCard>
|
||||
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
export default BarChartCard;
|
||||
|
|
|
|||
|
|
@ -1,148 +1,149 @@
|
|||
import {durationFormatted} from 'App/date';
|
||||
import { durationFormatted } from 'App/date';
|
||||
import React from 'react';
|
||||
import FunnelStepText from './FunnelStepText';
|
||||
import {Icon} from 'UI';
|
||||
import {Space} from "antd";
|
||||
import { Icon } from 'UI';
|
||||
import { Space } from 'antd';
|
||||
import { Styles } from 'Components/Dashboard/Widgets/common';
|
||||
|
||||
interface Props {
|
||||
filter: any;
|
||||
index?: number;
|
||||
focusStage?: (index: number, isFocused: boolean) => void
|
||||
focusedFilter?: number | null
|
||||
filter: any;
|
||||
index?: number;
|
||||
focusStage?: (index: number, isFocused: boolean) => void;
|
||||
focusedFilter?: number | null;
|
||||
}
|
||||
|
||||
function FunnelBar(props: Props) {
|
||||
const {filter, index, focusStage, focusedFilter} = props;
|
||||
const { filter, index, focusStage, focusedFilter } = props;
|
||||
|
||||
const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<FunnelStepText filter={filter}/>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#394EFF',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{filter.completedPercentageTotal}%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: `${100.1 - filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#f5f5f5',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => focusStage?.(index! - 1, filter.isActive)}
|
||||
className={'hover:opacity-75'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green"/>
|
||||
<span className="mx-1 font-medium">{filter.sessionsCount} Sessions</span>
|
||||
<span className="color-gray-medium text-sm">
|
||||
const isFocused = focusedFilter && index ? focusedFilter === index - 1 : false;
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<FunnelStepText filter={filter} />
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: Styles.colors[0]
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{filter.completedPercentageTotal}%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
width: `${100.1 - filter.completedPercentageTotal}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: isFocused ? 'rgba(204, 0, 0, 0.3)' : '#fff0f0',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => focusStage?.(index! - 1, filter.isActive)}
|
||||
className={'hover:opacity-75'}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green" />
|
||||
<span className="mx-1 font-medium">{filter.sessionsCount} Sessions</span>
|
||||
<span className="color-gray-medium text-sm">
|
||||
({filter.completedPercentage}%) Completed
|
||||
</span>
|
||||
</div>
|
||||
<Space className="items-center">
|
||||
<Icon name="caret-down-fill" color={filter.droppedCount > 0 ? "red" : "gray-light"} size={16}/>
|
||||
<span
|
||||
className={"font-medium mx-1 " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
|
||||
<span
|
||||
className={"text-sm " + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<Space className="items-center">
|
||||
<Icon name="caret-down-fill" color={filter.droppedCount > 0 ? 'red' : 'gray-light'} size={16} />
|
||||
<span
|
||||
className={'font-medium mx-1 ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>{filter.droppedCount} Sessions</span>
|
||||
<span
|
||||
className={'text-sm ' + (filter.droppedCount > 0 ? 'color-red' : 'disabled')}>({filter.droppedPercentage}%) Dropped</span>
|
||||
</Space>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function UxTFunnelBar(props: Props) {
|
||||
const {filter} = props;
|
||||
const { filter } = props;
|
||||
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<div className={'font-medium'}>{filter.title}</div>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${(filter.completed / (filter.completed + filter.skipped)) * 100}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#00b5ad',
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className={'flex items-center gap-4'}>
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green"/>
|
||||
<span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
|
||||
</div>
|
||||
<div className={'flex items-center'}>
|
||||
<Icon name="clock" size="16"/>
|
||||
<span className="mx-1 font-medium">
|
||||
return (
|
||||
<div className="w-full mb-4">
|
||||
<div className={'font-medium'}>{filter.title}</div>
|
||||
<div
|
||||
style={{
|
||||
height: '25px',
|
||||
width: '100%',
|
||||
backgroundColor: '#f5f5f5',
|
||||
position: 'relative',
|
||||
borderRadius: '3px',
|
||||
overflow: 'hidden'
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="flex items-center"
|
||||
style={{
|
||||
width: `${(filter.completed / (filter.completed + filter.skipped)) * 100}%`,
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: '#00b5ad'
|
||||
}}
|
||||
>
|
||||
<div className="color-white absolute right-0 flex items-center font-medium mr-2 leading-3">
|
||||
{((filter.completed / (filter.completed + filter.skipped)) * 100).toFixed(1)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between py-2">
|
||||
{/* @ts-ignore */}
|
||||
<div className={'flex items-center gap-4'}>
|
||||
<div className="flex items-center">
|
||||
<Icon name="arrow-right-short" size="20" color="green" />
|
||||
<span className="mx-1 font-medium">{filter.completed}</span><span>completed this step</span>
|
||||
</div>
|
||||
<div className={'flex items-center'}>
|
||||
<Icon name="clock" size="16" />
|
||||
<span className="mx-1 font-medium">
|
||||
{durationFormatted(filter.avgCompletionTime)}
|
||||
</span>
|
||||
<span>
|
||||
<span>
|
||||
Avg. completion time
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="caret-down-fill" color="red" size={16}/>
|
||||
<span className="font-medium mx-1">{filter.skipped}</span><span> skipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{/* @ts-ignore */}
|
||||
<div className="flex items-center">
|
||||
<Icon name="caret-down-fill" color="red" size={16} />
|
||||
<span className="font-medium mx-1">{filter.skipped}</span><span> skipped</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default FunnelBar;
|
||||
|
||||
const calculatePercentage = (completed: number, dropped: number) => {
|
||||
const total = completed + dropped;
|
||||
if (dropped === 0) return 100;
|
||||
if (total === 0) return 0;
|
||||
const total = completed + dropped;
|
||||
if (dropped === 0) return 100;
|
||||
if (total === 0) return 0;
|
||||
|
||||
return Math.round((completed / dropped) * 100);
|
||||
return Math.round((completed / dropped) * 100);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue