{' '}
{experimentInsightType === InsightType.FUNNELS
? 'experiment measures conversion through each step of the user journey.'
diff --git a/frontend/src/scenes/experiments/ExperimentView/NoResultsEmptyState.tsx b/frontend/src/scenes/experiments/ExperimentView/NoResultsEmptyState.tsx
deleted file mode 100644
index c4c021a3c382e..0000000000000
--- a/frontend/src/scenes/experiments/ExperimentView/NoResultsEmptyState.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import '../Experiment.scss'
-
-import { Empty } from 'antd'
-import { useValues } from 'kea'
-
-import { experimentLogic } from '../experimentLogic'
-
-export function NoResultsEmptyState(): JSX.Element {
- const { experimentResultsLoading, experimentResultCalculationError } = useValues(experimentLogic)
-
- if (experimentResultsLoading) {
- return <>
- }
-
- return (
-
- )
-}
diff --git a/frontend/src/scenes/experiments/ExperimentView/Overview.tsx b/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
index 76cc2136116d4..1b6bef968971a 100644
--- a/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/Overview.tsx
@@ -1,95 +1,87 @@
import '../Experiment.scss'
-import { LemonDivider } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-import { getSeriesColor } from 'lib/colors'
-import { capitalizeFirstLetter } from 'lib/utils'
import { InsightType } from '~/types'
import { experimentLogic } from '../experimentLogic'
+import { VariantTag } from './components'
export function Overview(): JSX.Element {
const {
experimentResults,
getIndexForVariant,
experimentInsightType,
- sortedConversionRates,
- highestProbabilityVariant,
+ getHighestProbabilityVariant,
areResultsSignificant,
+ conversionRateForVariant,
} = useValues(experimentLogic)
- function SignificanceText(): JSX.Element {
- return (
- <>
-
-
- )
- }
+ function WinningVariantText(): JSX.Element {
+ const winningVariant = getHighestProbabilityVariant(experimentResults)
- if (experimentInsightType === InsightType.FUNNELS) {
- const winningVariant = sortedConversionRates[0]
- const secondBestVariant = sortedConversionRates[1]
- const difference = winningVariant.conversionRate - secondBestVariant.conversionRate
+ if (experimentInsightType === InsightType.FUNNELS) {
+ const winningConversionRate = conversionRateForVariant(experimentResults, winningVariant || '')
+ const controlConversionRate = conversionRateForVariant(experimentResults, 'control')
+ const difference = parseFloat(winningConversionRate) - parseFloat(controlConversionRate)
- return (
-
- )
- }
+ )
+ }
- const index = getIndexForVariant(experimentResults, highestProbabilityVariant || '')
- if (highestProbabilityVariant && index !== null && experimentResults) {
- const { probability } = experimentResults
+ const index = getIndexForVariant(experimentResults, winningVariant || '')
+ if (winningVariant && index !== null && experimentResults) {
+ const { probability } = experimentResults
- return (
-
-
Overview
-
-
-
-
{capitalizeFirstLetter(highestProbabilityVariant)}
+ return (
+
+
is winning with a
- {`${(probability[highestProbabilityVariant] * 100).toFixed(2)}% probability`}
+ {`${(probability[winningVariant] * 100).toFixed(2)}% probability`}
of being best.
-
+ )
+ }
+
+ return <>
+ }
+
+ function SignificanceText(): JSX.Element {
+ return (
+
+ Your results are
+ {`${areResultsSignificant ? 'significant' : 'not significant'}`}.
)
}
- return <>
+ return (
+
+ )
}
diff --git a/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx b/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
index 1cedbcf500d6c..229003ead99ac 100644
--- a/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/ProgressBar.tsx
@@ -30,7 +30,12 @@ export function ProgressBar(): JSX.Element {
return (
-
{`${
+
Data collection
+
+ Estimated target for the number of participants. Actual data may reveal significance earlier or later
+ than predicted.
+
+
{`${
experimentProgressPercent > 100 ? 100 : experimentProgressPercent.toFixed(2)
}% complete`}
-
+
)
}
diff --git a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
index ea9c7befcdd7f..069531e45ff96 100644
--- a/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/SecondaryMetricsTable.tsx
@@ -1,12 +1,13 @@
import '../Experiment.scss'
-import { IconPlus } from '@posthog/icons'
+import { IconPencil, IconPlus } from '@posthog/icons'
import { LemonButton, LemonInput, LemonModal, LemonTable, LemonTableColumns } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { Form } from 'kea-forms'
+import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
import { IconAreaChart } from 'lib/lemon-ui/icons'
import { LemonField } from 'lib/lemon-ui/LemonField'
-import { capitalizeFirstLetter, humanFriendlyNumber } from 'lib/utils'
+import { capitalizeFirstLetter } from 'lib/utils'
import { InsightType } from '~/types'
@@ -14,100 +15,46 @@ import { SECONDARY_METRIC_INSIGHT_ID } from '../constants'
import { experimentLogic, TabularSecondaryMetricResults } from '../experimentLogic'
import { MetricSelector } from '../MetricSelector'
import { secondaryMetricsLogic, SecondaryMetricsProps } from '../secondaryMetricsLogic'
-import { getExperimentInsightColour } from '../utils'
+import { ResultsQuery, VariantTag } from './components'
-export function SecondaryMetricsTable({
+export function SecondaryMetricsModal({
onMetricsChange,
initialMetrics,
experimentId,
defaultAggregationType,
}: SecondaryMetricsProps): JSX.Element {
const logic = secondaryMetricsLogic({ onMetricsChange, initialMetrics, experimentId, defaultAggregationType })
- const { metrics, isModalOpen, isSecondaryMetricModalSubmitting, existingModalSecondaryMetric, metricIdx } =
- useValues(logic)
-
const {
- deleteMetric,
- openModalToCreateSecondaryMetric,
- openModalToEditSecondaryMetric,
- closeModal,
- saveSecondaryMetric,
- setPreviewInsight,
- } = useActions(logic)
+ secondaryMetricModal,
+ isModalOpen,
+ showResults,
+ isSecondaryMetricModalSubmitting,
+ existingModalSecondaryMetric,
+ metricIdx,
+ } = useValues(logic)
- const {
- secondaryMetricResultsLoading,
- isExperimentRunning,
- getIndexForVariant,
- experiment,
- experimentResults,
- tabularSecondaryMetricResults,
- } = useValues(experimentLogic({ experimentId }))
-
- const columns: LemonTableColumns
= [
- {
- key: 'variant',
- title: 'Variant',
- render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
- return (
-
-
-
{capitalizeFirstLetter(item.variant)}
-
- {item.results?.[idx].result ? (
- item.results[idx].insightType === InsightType.FUNNELS ? (
- <>{((item.results[idx].result as number) * 100).toFixed(1)}%
- ) : (
- <>{humanFriendlyNumber(item.results[idx].result as number)}
- )
- ) : (
- <>--
- )}
-
- )
- },
- })
- })
+ const { deleteMetric, closeModal, saveSecondaryMetric, setPreviewInsight } = useActions(logic)
+ const { secondaryMetricResults, isExperimentRunning } = useValues(experimentLogic({ experimentId }))
+ const targetResults = secondaryMetricResults && secondaryMetricResults[metricIdx]
return (
- <>
-
+ Close
+
+ ) : (
<>
{existingModalSecondaryMetric && (
- }
- >
+ )
+ }
+ >
+ {showResults && targetResults ? (
+
+
+
+ ) : (
-
+ )}
+
+ )
+}
+
+export function SecondaryMetricsTable({
+ onMetricsChange,
+ initialMetrics,
+ experimentId,
+ defaultAggregationType,
+}: SecondaryMetricsProps): JSX.Element {
+ const logic = secondaryMetricsLogic({ onMetricsChange, initialMetrics, experimentId, defaultAggregationType })
+ const { metrics } = useValues(logic)
+
+ const { openModalToCreateSecondaryMetric, openModalToEditSecondaryMetric } = useActions(logic)
+
+ const {
+ secondaryMetricResultsLoading,
+ isExperimentRunning,
+ experiment,
+ secondaryMetricResults,
+ tabularSecondaryMetricResults,
+ countDataForVariant,
+ exposureCountDataForVariant,
+ conversionRateForVariant,
+ experimentMathAggregationForTrends,
+ getHighestProbabilityVariant,
+ } = useValues(experimentLogic({ experimentId }))
+
+ const columns: LemonTableColumns
= [
+ {
+ children: [
+ {
+ title: Variant
,
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ return (
+
+
+
+ )
+ },
+ },
+ ],
+ },
+ ]
+
+ experiment.secondary_metrics?.forEach((metric, idx) => {
+ const Header = (): JSX.Element => (
+
+
+
{capitalizeFirstLetter(metric.name)}
+
+
+ }
+ onClick={() => openModalToEditSecondaryMetric(metric, idx, true)}
+ />
+ }
+ onClick={() => openModalToEditSecondaryMetric(metric, idx, false)}
+ />
+
+
+
+
+ [
+ {targetResults &&
+ targetResults.insight?.[0] &&
+ 'action' in targetResults.insight[0] && (
+
+ )}
+ ]
+
+ {experimentMathAggregationForTrends(targetResultFilters) ? 'metric' : 'count'}
+
+
+ ),
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ const { variant } = item
+ return {targetResults ? countDataForVariant(targetResults, variant) : '--'}
+ },
+ },
+ {
+ title: 'Exposure',
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ const { variant } = item
+ return (
+ {targetResults ? exposureCountDataForVariant(targetResults, variant) : '--'}
+ )
+ },
+ },
+ {
+ title: 'Win probability',
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ const { variant } = item
+ return (
+
+
+ {targetResults?.probability?.[variant] != undefined
+ ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
+ : '--'}
+
+
+ )
+ },
+ },
+ ],
+ })
+ } else {
+ columns.push({
+ title: ,
+ children: [
+ {
+ title: 'Conversion rate',
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ const { variant } = item
+ const conversionRate = conversionRateForVariant(targetResults || null, variant)
+ return {conversionRate === '--' ? conversionRate : `${conversionRate}%`}
+ },
+ },
+ {
+ title: 'Win probability',
+ render: function Key(_, item: TabularSecondaryMetricResults): JSX.Element {
+ const { variant } = item
+ return (
+
+
+ {targetResults?.probability?.[variant] != undefined
+ ? `${(targetResults.probability?.[variant] * 100).toFixed(1)}%`
+ : '--'}
+
+
+ )
+ },
+ },
+ ],
+ })
+ }
+ })
+
+ return (
+ <>
Secondary metrics
{metrics.length > 0 && (
-
Click a metric name to compare variants on a graph.
+
Monitor side effects of your experiment.
)}
@@ -183,6 +296,7 @@ export function SecondaryMetricsTable({
{metrics && metrics.length > 0 ? (
)}
+
)
}
diff --git a/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx b/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
index b6d4b95674c2c..010ddf19db616 100644
--- a/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/SummaryTable.tsx
@@ -3,14 +3,13 @@ import '../Experiment.scss'
import { IconInfo } from '@posthog/icons'
import { LemonTable, LemonTableColumns, Tooltip } from '@posthog/lemon-ui'
import { useValues } from 'kea'
-import { getSeriesColor } from 'lib/colors'
import { EntityFilterInfo } from 'lib/components/EntityFilterInfo'
import { LemonProgress } from 'lib/lemon-ui/LemonProgress'
-import { capitalizeFirstLetter } from 'lib/utils'
import { FunnelExperimentVariant, InsightType, TrendExperimentVariant } from '~/types'
import { experimentLogic } from '../experimentLogic'
+import { VariantTag } from './components'
export function SummaryTable(): JSX.Element {
const {
@@ -18,29 +17,26 @@ export function SummaryTable(): JSX.Element {
experimentInsightType,
exposureCountDataForVariant,
conversionRateForVariant,
- sortedConversionRates,
experimentMathAggregationForTrends,
countDataForVariant,
areTrendResultsConfusing,
+ getHighestProbabilityVariant,
} = useValues(experimentLogic)
if (!experimentResults) {
return <>
}
+ const winningVariant = getHighestProbabilityVariant(experimentResults)
+
const columns: LemonTableColumns = [
{
key: 'variants',
title: 'Variant',
- render: function Key(_, item, index): JSX.Element {
+ render: function Key(_, item): JSX.Element {
return (
-
-
{capitalizeFirstLetter(item.key)}
+
{`${conversionRateForVariant(
- experimentResults,
- item.key
- )}%`}
+ {`${conversionRateForVariant(experimentResults, item.key)}%`}
)
},
})
@@ -105,16 +97,20 @@ export function SummaryTable(): JSX.Element {
key: 'winProbability',
title: 'Win probability',
render: function Key(_, item): JSX.Element {
+ const variantKey = item.key
const percentage =
- experimentResults?.probability?.[item.key] != undefined &&
- experimentResults.probability?.[item.key] * 100
+ experimentResults?.probability?.[variantKey] != undefined &&
+ experimentResults.probability?.[variantKey] * 100
+ const isWinning = variantKey === winningVariant
return (
<>
{percentage ? (
- {percentage.toFixed(2)}%
+
+ {percentage.toFixed(2)}%
+
) : (
'--'
diff --git a/frontend/src/scenes/experiments/ExperimentView/components.tsx b/frontend/src/scenes/experiments/ExperimentView/components.tsx
index 1a22957925e68..97378f917c1bd 100644
--- a/frontend/src/scenes/experiments/ExperimentView/components.tsx
+++ b/frontend/src/scenes/experiments/ExperimentView/components.tsx
@@ -1,16 +1,41 @@
import '../Experiment.scss'
import { LemonButton, LemonDivider, LemonTable, LemonTag, LemonTagType } from '@posthog/lemon-ui'
+import { Empty } from 'antd'
import { useActions, useValues } from 'kea'
import { AnimationType } from 'lib/animations/animations'
import { Animation } from 'lib/components/Animation/Animation'
import { PageHeader } from 'lib/components/PageHeader'
import { dayjs } from 'lib/dayjs'
import { More } from 'lib/lemon-ui/LemonButton/More'
+import { capitalizeFirstLetter } from 'lib/utils'
import { useEffect, useState } from 'react'
+import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
+import { Query } from '~/queries/Query/Query'
+import { NodeKind } from '~/queries/schema'
+import { ExperimentResults, InsightShortId } from '~/types'
+
import { ResetButton } from '../Experiment'
import { experimentLogic } from '../experimentLogic'
+import { getExperimentInsightColour, transformResultFilters } from '../utils'
+
+export function VariantTag({ variantKey }: { variantKey: string }): JSX.Element {
+ const { experimentResults, getIndexForVariant } = useValues(experimentLogic)
+
+ return (
+
+
+ {capitalizeFirstLetter(variantKey)}
+
+ )
+}
export function ResultsTag(): JSX.Element {
const { areResultsSignificant } = useValues(experimentLogic)
@@ -41,6 +66,67 @@ export function ExperimentLoader(): JSX.Element {
)
}
+export function ResultsQuery({
+ targetResults,
+ showTable,
+}: {
+ targetResults: ExperimentResults['result'] | null
+ showTable: boolean
+}): JSX.Element {
+ return (
+
+ )
+}
+
+export function NoResultsEmptyState(): JSX.Element {
+ const { experimentResultsLoading, experimentResultCalculationError } = useValues(experimentLogic)
+
+ if (experimentResultsLoading) {
+ return <>
+ }
+
+ return (
+
+
Results
+
+
+
+
There are no experiment results yet
+ {!!experimentResultCalculationError && (
+
{experimentResultCalculationError}
+ )}
+
+ Wait a bit longer for your users to be exposed to the experiment. Double check your feature flag
+ implementation if you're still not seeing results.
+
+
+
+