refactor(trends): extract buildDerivedConfigs + computeDashedFromIndex

Move the per-feature derived-config construction out of the four
`useMemo` blocks in TrendsLineChart.tsx and into a pure
buildDerivedConfigs(results, opts) helper in trendsChartTransforms.ts.
Component shrinks; the helper is testable without rendering.

New shared helper computeDashedFromIndex(r, opts) keeps the in-progress
dashed-tail boundary in one place — read by both buildMainTrendsSeries
(for stroke.partial.fromIndex) and buildDerivedConfigs (for the
trendline fitUpTo). Earlier they each computed it independently and
could drift.

buildMainTrendsSeries simplifies: it now returns Series<M> directly
instead of a BuiltTrendsSeries<M> wrapper, and stops dimming
compare-prev colours — the library's applyComparisonDimming pass picks
that up via the new comparisonOf entries that buildDerivedConfigs
emits. The wrapper shape only existed to feed the now-deleted
buildDerivedTrendsSeries.

TrendsLineChart polish:
- Hoist TOOLTIP_CONFIG to module scope; the chartConfig memo no longer
  re-creates the tooltip object every render.
- Replace O(n²) indexOf-per-call in TrendsAlertOverlays' getYAxisId
  callback with a precomputed Map lookup.

Tests:
- 25 new trendsChartTransforms.test.ts cases for buildDerivedConfigs
  (composition, MA-trendline gating, fitUpTo derivation, compare-prev
  mapping) and computeDashedFromIndex.
- buildTrendsYAxisConfig log10/showGrid/format-passthrough tests.
- schemaGoalLinesToConfigs null/empty/non-empty tests.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: sampennington

frontend/src/scenes/trends/viz/trends-line-chart/TrendsLineChart.tsx

@@ -4,16 +4,7 @@ import { useCallback, useMemo, type ErrorInfo } from 'react'
 
 import { buildTheme } from 'lib/charts/utils/theme'
 import { createXAxisTickCallback, DEFAULT_Y_AXIS_ID, TimeSeriesLineChart } from 'lib/hog-charts'
-import type {
-    ConfidenceIntervalConfig,
-    MovingAverageConfig,
-    PointClickData,
-    Series,
-    TimeSeriesLineChartConfig,
-    TooltipContext,
-    TrendLineConfig,
-} from 'lib/hog-charts'
-import { ciRanges } from 'lib/statistics'
+import type { PointClickData, Series, TimeSeriesLineChartConfig, TooltipConfig, TooltipContext } from 'lib/hog-charts'
 import { formatPercentStackAxisValue } from 'scenes/insights/aggregationAxisFormat'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import type { SeriesDatum } from 'scenes/insights/InsightTooltip/insightTooltipUtils'
@@ -33,7 +24,7 @@ import { AnnotationsLayer } from './AnnotationsLayer'
 import { schemaGoalLinesToConfigs } from './goalLinesAdapter'
 import { TrendsAlertOverlays } from './TrendsAlertOverlays'
 import { buildTrendsYAxisConfig } from './trendsAxisFormat'
-import { buildTrendsSeries } from './trendsChartTransforms'
+import { buildDerivedConfigs, buildTrendsSeries } from './trendsChartTransforms'
 import type { TrendsSeriesMeta } from './trendsSeriesMeta'
 import { TrendsTooltip } from './TrendsTooltip'
 
@@ -42,6 +33,8 @@ interface TrendsLineChartProps {
     inSharedMode?: boolean
 }
 
+const TOOLTIP_CONFIG: TooltipConfig = { pinnable: true, placement: 'top' }
+
 const handleChartError = (error: Error, info: ErrorInfo): void => {
     posthog.captureException(error, {
         feature: 'trends-line-chart',
@@ -130,6 +123,9 @@ export function TrendsLineChart({ context, inSharedMode = false }: TrendsLineCha
         ]
     )
 
+    // Built here (not via `config.xAxis.{timezone,interval,allDays}`) so the same instance
+    // can be threaded into <AnnotationsLayer> below — its visible-tick computation has to
+    // match what the chart actually draws.
     const xTickFormatter = useMemo(
         () =>
             createXAxisTickCallback({
@@ -156,97 +152,67 @@ export function TrendsLineChart({ context, inSharedMode = false }: TrendsLineCha
         [trendsFilter, isPercentStackView, baseCurrency]
     )
 
-    const confidenceIntervals: ConfidenceIntervalConfig[] | undefined = useMemo(() => {
-        if (!showConfidenceIntervals || !indexedResults?.length) {
-            return undefined
-        }
-        const ci = (confidenceLevel ?? 95) / 100
-        return indexedResults.map((r) => {
-            const [lower, upper] = ciRanges(r.data, ci)
-            return { seriesKey: String(r.id), lower, upper }
-        })
-    }, [showConfidenceIntervals, confidenceLevel, indexedResults])
-
-    const movingAverage: MovingAverageConfig[] | undefined = useMemo(() => {
-        if (!showMovingAverage || movingAverageIntervals === undefined || !indexedResults?.length) {
-            return undefined
-        }
-        return indexedResults
-            .filter((r) => r.data.length >= movingAverageIntervals)
-            .map((r) => ({ seriesKey: String(r.id), window: movingAverageIntervals }))
-    }, [showMovingAverage, movingAverageIntervals, indexedResults])
-
-    const trendLines: TrendLineConfig[] | undefined = useMemo(() => {
-        if (!showTrendLines || !indexedResults?.length) {
-            return undefined
-        }
-        const out: TrendLineConfig[] = []
-        const includeMa = showMovingAverage && movingAverageIntervals !== undefined
-        for (const r of indexedResults) {
-            if (getTrendsHidden(r)) {
-                continue
-            }
-            const isActiveSeries = !r.compare || r.compare_label !== 'previous'
-            const isInProgress =
-                !isStickiness && incompletenessOffsetFromEnd !== undefined && incompletenessOffsetFromEnd < 0
-            const fitUpTo = isInProgress && isActiveSeries ? r.data.length + incompletenessOffsetFromEnd : undefined
-            out.push({ seriesKey: String(r.id), kind: 'linear', fitUpTo })
-            if (includeMa && r.data.length >= movingAverageIntervals) {
-                out.push({
-                    seriesKey: `${r.id}-ma`,
-                    kind: 'linear',
-                    label: `${r.label ?? ''} (Moving avg)`,
-                })
-            }
-        }
-        return out.length ? out : undefined
-    }, [
-        showTrendLines,
-        showMovingAverage,
-        movingAverageIntervals,
-        indexedResults,
-        getTrendsHidden,
-        isStickiness,
-        incompletenessOffsetFromEnd,
-    ])
+    const derivedConfigs = useMemo(
+        () =>
+            buildDerivedConfigs(indexedResults ?? [], {
+                showConfidenceIntervals,
+                confidenceLevel,
+                showMovingAverage,
+                movingAverageIntervals,
+                showTrendLines,
+                isStickiness,
+                incompletenessOffsetFromEnd,
+                getHidden: getTrendsHidden,
+            }),
+        [
+            indexedResults,
+            showConfidenceIntervals,
+            confidenceLevel,
+            showMovingAverage,
+            movingAverageIntervals,
+            showTrendLines,
+            isStickiness,
+            incompletenessOffsetFromEnd,
+            getTrendsHidden,
+        ]
+    )
 
-    // Compare-previous dimming flows through `buildMainTrendsSeries` for now; a
-    // follow-up PR (the buildDerivedConfigs extraction) moves it to the library's
-    // `comparisonOf` pass. Visual parity preserved either way.
     const chartConfig: TimeSeriesLineChartConfig = useMemo(
         () => ({
-            xAxis: {
-                tickFormatter: xTickFormatter,
-            },
+            xAxis: { tickFormatter: xTickFormatter },
             yAxis: yAxisConfig,
             valueLabels: showValuesOnSeries ? { formatter: valueLabelFormatter } : false,
             goalLines: goalLineConfigs,
-            confidenceIntervals,
-            movingAverage,
-            trendLines,
+            ...derivedConfigs,
             percentStackView: isPercentStackView,
             showCrosshair: true,
-            tooltip: { pinnable: true, placement: 'top' },
+            tooltip: TOOLTIP_CONFIG,
         }),
         [
             xTickFormatter,
             yAxisConfig,
             showValuesOnSeries,
             valueLabelFormatter,
             goalLineConfigs,
-            confidenceIntervals,
-            movingAverage,
-            trendLines,
+            derivedConfigs,
             isPercentStackView,
         ]
     )
 
+    // O(1) result→index lookup for the alert overlay's getYAxisId callback. indexOf-per-call
+    // would be O(n²) over indexedResults.
+    const indexByResult = useMemo(() => {
+        const m = new Map<IndexedTrendResult, number>()
+        ;(indexedResults ?? []).forEach((r, i) => m.set(r, i))
+        return m
+    }, [indexedResults])
+
     const getYAxisId = useCallback(
         (r: IndexedTrendResult) => {
-            const idx = (indexedResults ?? []).indexOf(r)
+            const idx = indexByResult.get(r) ?? 0
             return showMultipleYAxes && idx > 0 ? `y${idx}` : DEFAULT_Y_AXIS_ID
         },
-        [indexedResults, showMultipleYAxes]
+        [indexByResult, showMultipleYAxes]
     )
 
     const canHandleClick = !!context?.onDataPointClick || !!hasPersonsModal

frontend/src/scenes/trends/viz/trends-line-chart/goalLinesAdapter.test.ts

@@ -3,7 +3,11 @@ import type { Series } from 'lib/hog-charts'
 
 import type { GoalLine as SchemaGoalLine } from '~/queries/schema/schema-general'
 
-import { alertThresholdsToReferenceLines, goalLinesToReferenceLines } from './goalLinesAdapter'
+import {
+    alertThresholdsToReferenceLines,
+    goalLinesToReferenceLines,
+    schemaGoalLinesToConfigs,
+} from './goalLinesAdapter'
 
 const makeSeries = (data: number[], overrides: Partial<Series> = {}): Series => ({
     key: 'a',
@@ -120,4 +124,46 @@ describe('goalLinesAdapter', () => {
             expect(alertThresholdsToReferenceLines(lines).map((r) => r.label)).toEqual(['Crossed', 'Above'])
         })
     })
+
+    describe('schemaGoalLinesToConfigs', () => {
+        it.each<[string, SchemaGoalLine[] | null | undefined]>([
+            ['null', null],
+            ['undefined', undefined],
+            ['empty array', []],
+        ])('returns undefined for %s input', (_, input) => {
+            expect(schemaGoalLinesToConfigs(input)).toBeUndefined()
+        })
+
+        it('produces one GoalLineConfig per schema goal line, mapping every field', () => {
+            const lines: SchemaGoalLine[] = [
+                {
+                    label: 'Target',
+                    value: 100,
+                    displayLabel: true,
+                    borderColor: '#ff0000',
+                    position: 'end',
+                    displayIfCrossed: true,
+                },
+                { label: 'Floor', value: 10 },
+            ]
+            expect(schemaGoalLinesToConfigs(lines)).toEqual([
+                {
+                    label: 'Target',
+                    value: 100,
+                    displayLabel: true,
+                    color: '#ff0000',
+                    labelPosition: 'end',
+                    displayIfCrossed: true,
+                },
+                {
+                    label: 'Floor',
+                    value: 10,
+                    displayLabel: undefined,
+                    color: undefined,
+                    labelPosition: undefined,
+                    displayIfCrossed: undefined,
+                },
+            ])
+        })
+    })
 })

frontend/src/scenes/trends/viz/trends-line-chart/trendsAxisFormat.test.ts

@@ -3,7 +3,7 @@ import { AggregationAxisFormat } from 'scenes/insights/aggregationAxisFormat'
 
 import { CurrencyCode, TrendsFilter } from '~/queries/schema/schema-general'
 
-import { trendsFilterToYFormatterConfig } from './trendsAxisFormat'
+import { buildTrendsYAxisConfig, trendsFilterToYFormatterConfig } from './trendsAxisFormat'
 
 const NBSP = ' '
 
@@ -75,3 +75,35 @@ describe('trends y-tick formatter end-to-end', () => {
         expect(fmt(50)).toBe('50%')
     })
 })
+
+describe('buildTrendsYAxisConfig', () => {
+    it.each([
+        ['log10', 'log'],
+        ['linear', 'linear'],
+        ['auto', 'linear'],
+        [undefined, 'linear'],
+        [null, 'linear'],
+    ] as const)('translates yAxisScaleType "%s" to scale "%s"', (input, expected) => {
+        expect(buildTrendsYAxisConfig(null, false, undefined, { yAxisScaleType: input }).scale).toBe(expected)
+    })
+
+    it('passes showGrid through from extras', () => {
+        expect(buildTrendsYAxisConfig(null, false, undefined, { showGrid: true }).showGrid).toBe(true)
+        expect(buildTrendsYAxisConfig(null, false, undefined, {}).showGrid).toBeUndefined()
+    })
+
+    it('spreads the formatter config from trendsFilterToYFormatterConfig', () => {
+        const trendsFilter: TrendsFilter = {
+            aggregationAxisFormat: 'duration',
+            aggregationAxisPrefix: '~',
+            decimalPlaces: 2,
+        }
+        const cfg = buildTrendsYAxisConfig(trendsFilter, false, 'USD' as CurrencyCode)
+        expect(cfg).toMatchObject({ format: 'duration', prefix: '~', decimalPlaces: 2, currency: 'USD' })
+    })
+
+    it('forces percentage format when isPercentStackView is true', () => {
+        const trendsFilter: TrendsFilter = { aggregationAxisFormat: 'currency', aggregationAxisPrefix: '$' }
+        expect(buildTrendsYAxisConfig(trendsFilter, true, 'USD' as CurrencyCode).format).toBe('percentage')
+    })
+})