From a6aa8bd5e17f9a91c80884c8c3e8d979887cb09e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Thu, 23 Nov 2023 12:55:11 +0100
Subject: [PATCH] refactor

---
 .../funnels/FunnelBarChart/FunnelBarChart.tsx | 23 ++++++++-----------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx
index 6c9fc11d623a86..99be1979046da1 100644
--- a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx
+++ b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx
@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { useValues } from 'kea'
 import { useResizeObserver } from 'lib/hooks/useResizeObserver'
 import { useScrollable } from 'lib/hooks/useScrollable'
-import { useLayoutEffect, useMemo, useState } from 'react'
+import { useLayoutEffect, useState } from 'react'
 import { insightLogic } from 'scenes/insights/insightLogic'
 
 import { ChartParams } from '~/types'
@@ -29,8 +29,8 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true }
     const vizRef = useFunnelTooltip(showPersonsModal)
 
     const [scrollRef, [isScrollableLeft, isScrollableRight]] = useScrollable()
-    const { height } = useResizeObserver({ ref: vizRef })
-    const [scrollbarAdjustment, setScrollbarAdjustment] = useState(0)
+    const { height: availableHeight } = useResizeObserver({ ref: vizRef })
+    const [scrollbarHeightPx, setScrollbarHeightPx] = useState(0)
 
     const seriesCount = visibleStepsWithConversionMetrics[0]?.nested_breakdown?.length ?? 0
     const barWidthPx =
@@ -58,27 +58,22 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true }
 
     useLayoutEffect(() => {
         if (scrollRef.current) {
-            setScrollbarAdjustment(scrollRef.current.offsetHeight - scrollRef.current.clientHeight)
+            setScrollbarHeightPx(scrollRef.current.offsetHeight - scrollRef.current.clientHeight)
         }
-    }, [height])
+    }, [availableHeight])
 
     /** Average conversion time is only shown if it's known for at least one step. */
     // != is intentional to catch undefined too
     const showTime = visibleStepsWithConversionMetrics.some((step) => step.average_conversion_time != null)
 
     const stepLegendRows = showTime ? 4 : 3
-    const stepLegendRowHeightRem = 1.5
-    const stepLegendRowGapRem = 0.25
-    const stepLegendPaddingRem = 2 * 0.75
-    const stepLegendHeightRem =
-        stepLegendRows * (stepLegendRowHeightRem + stepLegendRowGapRem) - stepLegendRowGapRem + stepLegendPaddingRem
 
-    const availableHeight = height
+    // rows * (row height + gap between rows) - gap for first row + padding top and bottom
+    const stepLegendHeightRem = stepLegendRows * (1.5 + 0.25) - 0.25 + 2 * 0.75
     const borderHeightPx = 1
 
-    const scrollbarHeightPx = scrollbarAdjustment
-
-    const barRowHeight = `calc(${availableHeight}px - ${stepLegendHeightRem}rem - ${borderHeightPx}px - ${scrollbarHeightPx}px)`
+    // available height - border - legend - (maybe) scrollbar
+    const barRowHeight = `calc(${availableHeight}px - ${borderHeightPx}px - ${stepLegendHeightRem}rem  - ${scrollbarHeightPx}px)`
 
     return (
         <div