jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui) - errors details modal

Browse source
This commit is contained in:
Shekar Siri 2022-06-21 11:02:32 +02:00
parent b848b89536
commit c5cc24fc52
3 changed files with 14 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/app/components/Errors/Error/ErrorInfo.js
View file

@ -77,7 +77,7 @@ export default class ErrorInfo extends React.PureComponent {
// animatedIcon="no-results"
show={ !loading && errorIdInStore == null }
>
<div className="w-9/12 mb-4 flex justify-between">
{/* <div className="w-9/12 mb-4 flex justify-between">
<BackLink to={ errorsRoute() } label="Back" />
<div className="flex items-center">
<Popup
@ -110,7 +110,7 @@ export default class ErrorInfo extends React.PureComponent {
/>
</Popup>
</div>
</div>
</div> */}
<div className="flex" >
<Loader loading={ loading } className="w-9/12">
<MainSection className="w-9/12" />

11
frontend/app/components/Funnels/FunnelWidget/FunnelWidget.tsx
View file

@ -18,6 +18,7 @@ function FunnelWidget(props: Props) {
const stages = isWidget ? [...funnel.stages.slice(0, 1), funnel.stages[funnel.stages.length - 1]] : funnel.stages;
const hasMoreSteps = funnel.stages.length > 2;
const lastStage = funnel.stages[funnel.stages.length - 1];
const remainingSteps = totalSteps - 2;
return useObserver(() => (
<NoContent show={!stages || stages.length === 0}>
@ -34,7 +35,7 @@ function FunnelWidget(props: Props) {
{ hasMoreSteps && (
<>
<EmptyStage total={totalSteps} />
<EmptyStage total={remainingSteps} />
</>
)}
@ -77,14 +78,16 @@ function EmptyStage({ total }: any) {
return useObserver( () => (
<div className={cn("flex items-center mb-4 pb-3", stl.step)}>
<IndexNumber index={0} />
<div className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal" style={{ width: '100px'}}>+{total} steps</div>
<div className="w-fit px-2 border border-teal py-1 text-center justify-center bg-teal-lightest flex items-center rounded-full color-teal" style={{ width: '100px'}}>
{`+${total} ${total > 1 ? 'steps' : 'step'}`}
</div>
<div className="border-b w-full border-dotted"></div>
</div>
))
}
function Stage({ stage, index, isWidget }: any) {
return useObserver(() => stage && (
return useObserver(() => stage ? (
<div className={cn("flex items-start", stl.step, { [stl['step-disabled']] : !stage.isActive })}>
<IndexNumber index={index } />
<Funnelbar filter={stage} />
@ -92,7 +95,7 @@ function Stage({ stage, index, isWidget }: any) {
<BarActions bar={stage} />
)}
</div>
))
) : <></>)
}
function IndexNumber({ index }: any) {

8
frontend/app/mstore/types/funnel.ts
View file

@ -1,5 +1,4 @@
import FunnelStage from './funnelStage'
// import { makeAutoObservable, runInAction, observable, action, reaction } from "mobx"
export interface IFunnel {
affectedUsers: number;
@ -36,10 +35,13 @@ export default class Funnel implements IFunnel {
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.lostConversionsPercentage = Math.round(this.lostConversions / firstStage.sessionsCount * 100) || 0
this.totalConversions = lastStage.sessionsCount
this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100)
this.totalConversionsPercentage = Math.round(this.totalConversions / firstStage.sessionsCount * 100) || 0
this.conversionImpact = this.lostConversions ? Math.round((this.lostConversions / firstStage.sessionsCount) * 100) : 0;
this.affectedUsers = firstStage.usersCount ? firstStage.usersCount - lastStage.usersCount : 0;
}