Merge branch 'dashboards-redesign' of https://github.com/openreplay/openreplay into dashboards-redesign
This commit is contained in:
Sudheer Salavadi
commit
d2dfc2430c
7 changed files with 232 additions and 224 deletions
|
|
@ -1,38 +1,40 @@
|
|||
import React from 'react';
|
||||
import { NoContent } from 'UI';
|
||||
import { Icon, NoContent } from 'UI';
|
||||
import { Styles } from '../../common';
|
||||
import { numberWithCommas } from 'App/utils';
|
||||
import Bar from './Bar';
|
||||
import { NO_METRIC_DATA } from 'App/constants/messages'
|
||||
import { NO_METRIC_DATA } from 'App/constants/messages';
|
||||
import ListWithIcons from 'Components/Dashboard/Widgets/ListWithIcons';
|
||||
|
||||
interface Props {
|
||||
data: any
|
||||
data: any;
|
||||
}
|
||||
|
||||
function ErrorsPerDomain(props: Props) {
|
||||
const { data } = props;
|
||||
// const firstAvg = 10;
|
||||
const firstAvg = data.chart[0] && data.chart[0].errorsCount;
|
||||
return (
|
||||
<NoContent
|
||||
size="small"
|
||||
show={ data.chart.length === 0 }
|
||||
style={{ height: '240px'}}
|
||||
title={NO_METRIC_DATA}
|
||||
>
|
||||
<div className="w-full" style={{ height: '240px' }}>
|
||||
{data.chart.map((item, i) =>
|
||||
<Bar
|
||||
key={i}
|
||||
className="mb-2"
|
||||
avg={numberWithCommas(Math.round(item.errorsCount))}
|
||||
width={Math.round((item.errorsCount * 100) / firstAvg) - 10}
|
||||
domain={item.domain}
|
||||
color={Styles.colors[i]}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</NoContent>
|
||||
);
|
||||
const { data } = props;
|
||||
// const firstAvg = 10;
|
||||
// const firstAvg = data.chart[0] && data.chart[0].errorsCount;
|
||||
|
||||
const highest = data.chart[0] && data.chart[0].errorsCount;
|
||||
const list = data.chart.slice(0, 4).map((item: any) => ({
|
||||
name: item.domain,
|
||||
icon: <Icon name="link-45deg" size={24} />,
|
||||
value: Math.round(item.errorsCount),
|
||||
progress: Math.round((item.errorsCount * 100) / highest)
|
||||
}));
|
||||
|
||||
return (
|
||||
<NoContent
|
||||
size="small"
|
||||
show={data.chart.length === 0}
|
||||
style={{ height: '240px' }}
|
||||
title={NO_METRIC_DATA}
|
||||
>
|
||||
<div className="w-full" style={{ height: '240px' }}>
|
||||
<ListWithIcons list={list} />
|
||||
</div>
|
||||
</NoContent>
|
||||
);
|
||||
}
|
||||
|
||||
export default ErrorsPerDomain;
|
||||
|
|
|
|||
|
|
@ -41,10 +41,10 @@ function DashboardList({ siteId }: { siteId: string }) {
|
|||
render: (date) => checkForRecent(date, 'LLL dd, yyyy, hh:mm a'),
|
||||
},
|
||||
{
|
||||
title: 'Modified By',
|
||||
dataIndex: 'updatedBy',
|
||||
title: 'Owner',
|
||||
dataIndex: 'owner',
|
||||
width: '16.67%',
|
||||
sorter: (a, b) => a.updatedBy.localeCompare(b.updatedBy),
|
||||
sorter: (a, b) => a.owner.localeCompare(b.owner),
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
{
|
||||
|
|
@ -104,13 +104,13 @@ function DashboardList({ siteId }: { siteId: string }) {
|
|||
list.length === 0 && !dashboardStore.filter.showMine ? (
|
||||
<div className='flex justify-center text-center'>
|
||||
<Empty
|
||||
image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
|
||||
imageStyle={{
|
||||
width: imageDimensions.width,
|
||||
image={<AnimatedSVG name={emptyImage} size={imageDimensions.width} />}
|
||||
imageStyle={{
|
||||
width: imageDimensions.width,
|
||||
height: imageDimensions.height,
|
||||
margin: 'auto',
|
||||
padding: '2rem 0'
|
||||
}}
|
||||
}}
|
||||
description={emptyDescription}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
},
|
||||
|
|
@ -407,8 +410,8 @@ export const CARD_LIST: CardType[] = [
|
|||
cardType: ERRORS,
|
||||
metricOf: FilterKey.ERRORS_PER_DOMAINS,
|
||||
category: CARD_CATEGORIES[3].key,
|
||||
example: Bars,
|
||||
data: generateRandomBarsData(),
|
||||
example: SlowestDomains,
|
||||
// data: generateRandomBarsData(),
|
||||
},
|
||||
{
|
||||
title: 'Errors by Type',
|
||||
|
|
@ -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);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export default class Dashboard {
|
|||
currentWidget: Widget = new Widget()
|
||||
config: any = {}
|
||||
createdAt: number = new Date().getTime()
|
||||
owner: string = ""
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this)
|
||||
|
|
@ -65,6 +66,7 @@ export default class Dashboard {
|
|||
this.isPublic = json.isPublic
|
||||
this.key = json.dashboardId
|
||||
this.createdAt = DateTime.fromMillis(new Date(json.createdAt).getTime())
|
||||
this.owner = json.ownerName
|
||||
if (json.widgets) {
|
||||
const smallWidgets: any[] = json.widgets.filter(wi => wi.config.col === 1)
|
||||
const otherWidgets: any[] = json.widgets.filter(wi => wi.config.col !== 1)
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ export default class Widget {
|
|||
? json.series.map((series: any) => new FilterSeries().fromJson(series))
|
||||
: [new FilterSeries()];
|
||||
this.dashboards = json.dashboards || [];
|
||||
this.owner = json.ownerEmail;
|
||||
this.owner = json.ownerName;
|
||||
this.lastModified =
|
||||
json.editedAt || json.createdAt
|
||||
? DateTime.fromMillis(json.editedAt || json.createdAt)
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue