mirrors/posthog
0
0
Fork 0
mirror of https://github.com/PostHog/posthog.git synced 2024-11-24 00:47:50 +01:00
Code Issues Releases Activity

fix(experiments): some UI polish (#21815)

Browse Source 
init
This commit is contained in:
Juraj Majerik 2024-04-25 07:24:31 +02:00 committed by GitHub
parent a851ace789
commit db0aef207c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/scenes/experiments/ExperimentForm.tsx
View File

@ -48,8 +48,8 @@ const StepInfo = (): JSX.Element => {
</LemonField>
</div>
<div className="mt-10">
<h3>Variants</h3>
<div>Add up to 9 variants to test against your control.</div>
<h3 className="mb-1">Variants</h3>
<div className="text-xs text-muted">Add up to 9 variants to test against your control.</div>
<LemonDivider />
<div className="grid grid-cols-2 gap-4 max-w-160">
<div className="max-w-60">
@ -163,8 +163,8 @@ const StepGoal = (): JSX.Element => {
<div className="space-y-8">
{groupTypes.size > 0 && (
<div>
<h3>Participant type</h3>
<div>
<h3 className="mb-1">Participant type</h3>
<div className="text-xs text-muted">
The type on which to aggregate metrics. You can change this at any time during the
experiment.
</div>
@ -239,8 +239,8 @@ const StepGoal = (): JSX.Element => {
/>
</div>
<div>
<h3>Goal criteria</h3>
<div>
<h3 className="mb-1">Goal criteria</h3>
<div className="text-xs text-muted">
{experimentInsightType === InsightType.FUNNELS
? 'Create the funnel you want to measure.'
: 'Select a single metric to track.'}

25
frontend/src/scenes/experiments/ExperimentView/Goal.tsx
View File

@ -210,16 +210,27 @@ export function Goal(): JSX.Element {
return (
<div>
<h2 className="font-semibold text-lg mb-0">Experiment goal</h2>
<div className="text-muted text-xs">
This <b>{experimentInsightType === InsightType.FUNNELS ? 'funnel' : 'trend'}</b>{' '}
{experimentInsightType === InsightType.FUNNELS
? 'experiment measures conversion at each stage.'
: 'experiment tracks the count of a single metric.'}
<div>
<div className="inline-flex space-x-2">
<h2 className="font-semibold text-lg mb-0">Experiment goal</h2>
<Tooltip
title={
<>
{' '}
This <b>{experimentInsightType === InsightType.FUNNELS ? 'funnel' : 'trend'}</b>{' '}
{experimentInsightType === InsightType.FUNNELS
? 'experiment measures conversion at each stage.'
: 'experiment tracks the count of a single metric.'}
</>
}
>
<IconInfo className="text-muted-alt text-base" />
</Tooltip>
</div>
</div>
<div className="inline-flex space-x-6">
<div>
<div className="card-secondary mb-2 mt-4">
<div className="card-secondary mb-2 mt-2">
{experimentInsightType === InsightType.FUNNELS ? 'Conversion goal steps' : 'Trend goal'}
</div>
<MetricDisplay filters={experiment.filters} />

18
frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
View File

@ -31,12 +31,16 @@ export function ProgressBar(): JSX.Element {
return (
<div>
<h2 className="font-semibold text-lg mb-0">Data collection</h2>
<div className="text-muted text-xs">
Estimated target for the number of participants. Actual data may reveal significance earlier or later
than predicted.
<div className="inline-flex space-x-2">
<h2 className="font-semibold text-lg mb-0">Data collection</h2>
<Tooltip
title="Estimated target for the number of participants. Actual data may reveal significance earlier or later
than predicted."
>
<IconInfo className="text-muted-alt text-base" />
</Tooltip>
</div>
<div className="mt-4 mb-1 font-semibold">{`${
<div className="mt-2 mb-1 font-semibold">{`${
experimentProgressPercent > 100 ? 100 : experimentProgressPercent.toFixed(2)
}% complete`}</div>
<LemonProgress
@ -46,7 +50,7 @@ export function ProgressBar(): JSX.Element {
percent={experimentProgressPercent}
/>
{experimentInsightType === InsightType.TRENDS && (
<div className="flex justify-between mt-2">
<div className="flex justify-between mt-0">
{experiment.end_date ? (
<div>
Ran for <b>{actualRunningTime}</b> {formatUnitByQuantity(actualRunningTime, 'day')}
@ -80,7 +84,7 @@ export function ProgressBar(): JSX.Element {
</div>
)}
{experimentInsightType === InsightType.FUNNELS && (
<div className="flex justify-between mt-2">
<div className="flex justify-between mt-0">
{experiment.end_date ? (
<div>
Saw <b>{humanFriendlyNumber(funnelResultsPersonsTotal)}</b>{' '}

18
frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
View File

@ -1,7 +1,7 @@
import '../Experiment.scss'
import { IconPencil, IconPlus } from '@posthog/icons'
import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns } from '@posthog/lemon-ui'
import { IconInfo, IconPencil, IconPlus } from '@posthog/icons'
import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns, Tooltip } from '@posthog/lemon-ui'
import { Empty } from 'antd'
import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
@ -286,11 +286,15 @@ export function SecondaryMetricsTable({
<>
<div>
<div className="flex">
<div className="w-1/2">
<h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
{metrics.length > 0 && (
<div className="text-muted text-xs mb-2">Monitor side effects of your experiment.</div>
)}
<div className="w-1/2 pt-5">
<div className="inline-flex space-x-2 mb-0">
<h2 className="mb-0 font-semibold text-lg">Secondary metrics</h2>
{metrics.length > 0 && (
<Tooltip title="Monitor side effects of your experiment.">
<IconInfo className="text-muted-alt text-base" />
</Tooltip>
)}
</div>
</div>
<div className="w-1/2 flex flex-col justify-end">