diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx index 6c3244ce7..d47e4b321 100644 --- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx +++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricTableErrors/CustomMetricTableErrors.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from 'react'; -import { Pagination } from 'UI'; +import { Pagination, NoContent } from 'UI'; import ErrorListItem from '../../../components/Errors/ErrorListItem'; import { withRouter, RouteComponentProps } from 'react-router-dom'; import { useModal } from 'App/components/Modal'; @@ -30,7 +30,7 @@ function CustomMetricTableErrors(props: RouteComponentProps) { }, [errorId]) return ( -
+ {metric.data.errors && metric.data.errors.map((error: any, index: any) => ( onErrorClick(error)} /> ))} @@ -50,7 +50,7 @@ function CustomMetricTableErrors(props: RouteComponentProps) { {!isEdit && ( )} -
+ ); } diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx index 4d945b483..b84fff021 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx @@ -1,6 +1,6 @@ import React from 'react'; import FunnelStepText from './FunnelStepText'; -import { Icon } from 'UI'; +import { Icon, Popup } from 'UI'; interface Props { filter: any; @@ -32,6 +32,28 @@ function FunnelBar(props: Props) { }}>
{filter.completedPercentage}%
+ {filter.dropDueToIssues > 0 && ( +
+ +
{filter.dropDueToIssuesPercentage}%
+
+
+ + )}
diff --git a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx index 039de28ac..8371fea8b 100644 --- a/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx +++ b/frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import Widget from 'App/mstore/types/widget'; import Funnelbar from './FunnelBar'; import cn from 'classnames'; @@ -84,7 +84,7 @@ function EmptyStage({ total }: any) { } function Stage({ stage, index, isWidget }: any) { - return useObserver( () => ( + return useObserver(() => stage && (
diff --git a/frontend/app/mstore/dashboardStore.ts b/frontend/app/mstore/dashboardStore.ts index 4bd18035c..67a7eb644 100644 --- a/frontend/app/mstore/dashboardStore.ts +++ b/frontend/app/mstore/dashboardStore.ts @@ -138,7 +138,7 @@ export default class DashboardStore implements IDashboardSotre { fetchMetricChartData: action }) - this.drillDownPeriod = Period({ rangeName: LAST_24_HOURS }); + this.drillDownPeriod = Period({ rangeName: LAST_30_DAYS }); const timeStamps = this.drillDownPeriod.toTimestamps(); this.drillDownFilter.updateKey('startTimestamp', timeStamps.startTimestamp) this.drillDownFilter.updateKey('endTimestamp', timeStamps.endTimestamp) diff --git a/frontend/app/mstore/types/funnel.ts b/frontend/app/mstore/types/funnel.ts index 52b702d55..e88062b5b 100644 --- a/frontend/app/mstore/types/funnel.ts +++ b/frontend/app/mstore/types/funnel.ts @@ -1,4 +1,5 @@ import FunnelStage from './funnelStage' +// import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx" export interface IFunnel { affectedUsers: number; @@ -9,8 +10,6 @@ export interface IFunnel { lostConversionsPercentage: number isPublic: boolean fromJSON: (json: any) => void - toJSON: () => any - exists: () => boolean } export default class Funnel implements IFunnel { @@ -22,20 +21,26 @@ export default class Funnel implements IFunnel { totalConversionsPercentage: number = 0 isPublic: boolean = false stages: FunnelStage[] = [] + raw: any = null constructor() { } fromJSON(json: any) { + if (!this.raw) { + this.raw = json + } + if (json.stages.length >= 1) { const firstStage = json.stages[0] - const lastStage = json.stages[json.stages.length - 1] + this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.sessionsCount, index > 0 ? json.stages[index - 1].sessionsCount : stage.sessionsCount)) : [] + const filteredStages = this.stages.filter((stage: any) => stage.isActive) + const lastStage = filteredStages[filteredStages.length - 1] this.lostConversions = firstStage.sessionsCount - lastStage.sessionsCount this.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.sessionsCount * 100) this.totalConversions = lastStage.sessionsCount this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100) this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.sessionsCount) * 100) : 0; - this.stages = json.stages ? json.stages.map((stage: any, index: number) => new FunnelStage().fromJSON(stage, firstStage.sessionsCount, index > 0 ? json.stages[index - 1].sessionsCount : stage.sessionsCount)) : [] this.affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0; } diff --git a/frontend/app/mstore/types/funnelStage.ts b/frontend/app/mstore/types/funnelStage.ts index 40d79a344..c1a98035f 100644 --- a/frontend/app/mstore/types/funnelStage.ts +++ b/frontend/app/mstore/types/funnelStage.ts @@ -2,6 +2,7 @@ import { makeAutoObservable, observable, action } from "mobx" import { filterLabelMap } from 'Types/filter/newFilter'; export default class FunnelStage { dropDueToIssues: number = 0; + dropDueToIssuesPercentage: number = 0; dropPct: number = 0; operator: string = ""; sessionsCount: number = 0; @@ -30,6 +31,7 @@ export default class FunnelStage { this.type = json.type; this.label = filterLabelMap[json.type] || json.type; this.completedPercentage = total ? Math.round((this.sessionsCount / total) * 100) : 0; + this.dropDueToIssuesPercentage = total ? Math.round((this.dropDueToIssues / total) * 100) : 0; this.droppedCount = previousSessionCount - this.sessionsCount; return this; }