fix(experiments): Fix timeseries tooltip (#42486)

Author: jurajmajerik

frontend/src/scenes/experiments/MetricsView/new/TimeseriesModal.tsx

@@ -8,7 +8,7 @@ import { dayjs } from 'lib/dayjs'
 import { More } from 'lib/lemon-ui/LemonButton/More'
 import { Spinner } from 'lib/lemon-ui/Spinner'
 
-import { ExperimentMetric } from '~/queries/schema/schema-general'
+import { ExperimentMetric, isExperimentRatioMetric } from '~/queries/schema/schema-general'
 import type { Experiment } from '~/types'
 
 import { VariantTag } from '../../ExperimentView/components'
@@ -165,7 +165,10 @@ export function TimeseriesModal({
                         </div>
                         {hasTimeseriesData ? (
                             processedChartData ? (
-                                <VariantTimeseriesChart chartData={processedChartData} />
+                                <VariantTimeseriesChart
+                                    chartData={processedChartData}
+                                    isRatioMetric={isExperimentRatioMetric(metric)}
+                                />
                             ) : (
                                 <div className="p-10 text-center text-muted">
                                     No timeseries data available for this variant

frontend/src/scenes/experiments/MetricsView/new/VariantTimeseriesChart.tsx

@@ -7,9 +7,13 @@ import { useChartColors } from '../shared/colors'
 
 interface VariantTimeseriesChartProps {
     chartData: ProcessedChartData
+    isRatioMetric?: boolean
 }
 
-export function VariantTimeseriesChart({ chartData: data }: VariantTimeseriesChartProps): JSX.Element {
+export function VariantTimeseriesChart({
+    chartData: data,
+    isRatioMetric = false,
+}: VariantTimeseriesChartProps): JSX.Element {
     const canvasRef = useRef<HTMLCanvasElement>(null)
     const chartRef = useRef<Chart | null>(null)
     const colors = useChartColors()
@@ -101,8 +105,20 @@ export function VariantTimeseriesChart({ chartData: data }: VariantTimeseriesCha
                                             lines.push('⚠️ Data pending - showing last known value')
                                         }
 
-                                        if (dataPoint && dataPoint.number_of_samples) {
-                                            lines.push(`Samples: ${dataPoint.number_of_samples.toLocaleString()}`)
+                                        if (dataPoint) {
+                                            if (isRatioMetric) {
+                                                if (dataPoint.denominator_sum) {
+                                                    lines.push(
+                                                        `Denominator: ${dataPoint.denominator_sum.toLocaleString()}`
+                                                    )
+                                                }
+                                            } else {
+                                                if (dataPoint.number_of_samples) {
+                                                    lines.push(
+                                                        `Exposures: ${dataPoint.number_of_samples.toLocaleString()}`
+                                                    )
+                                                }
+                                            }
                                         }
                                         if (dataPoint && dataPoint.significant !== undefined) {
                                             lines.push(`Significant: ${dataPoint.significant ? 'Yes' : 'No'}`)
@@ -132,7 +148,7 @@ export function VariantTimeseriesChart({ chartData: data }: VariantTimeseriesCha
                 chartRef.current = null
             }
         }
-    }, [data, colors.EXPOSURES_AXIS_LINES])
+    }, [data, colors.EXPOSURES_AXIS_LINES, isRatioMetric])
 
     return (
         <div className="relative h-[224px]">

frontend/src/scenes/experiments/experimentTimeseriesLogic.ts

@@ -28,6 +28,7 @@ export interface ProcessedTimeseriesDataPoint {
     lower_bound: number | null
     hasRealData: boolean
     number_of_samples?: number
+    denominator_sum?: number
     significant?: boolean
 }
 
@@ -173,6 +174,7 @@ export const experimentTimeseriesLogic = kea<experimentTimeseriesLogicType>([
                                     lower_bound: lower,
                                     hasRealData: true,
                                     number_of_samples: variant.number_of_samples || 0,
+                                    denominator_sum: variant.denominator_sum || 0,
                                     significant: variant.significant ?? false,
                                 }
 
@@ -198,6 +200,7 @@ export const experimentTimeseriesLogic = kea<experimentTimeseriesLogicType>([
                             lower_bound: 0,
                             hasRealData: false,
                             number_of_samples: 0,
+                            denominator_sum: 0,
                             significant: false,
                         }
                     })