diff --git a/frontend/__snapshots__/components-cards-insight-card--insight-card.png b/frontend/__snapshots__/components-cards-insight-card--insight-card.png index febbc6faf33b6..0a38b26952afc 100644 Binary files a/frontend/__snapshots__/components-cards-insight-card--insight-card.png and b/frontend/__snapshots__/components-cards-insight-card--insight-card.png differ diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png index e7268e9e53d57..310cd26b65415 100644 Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-breakdown-insight.png differ diff --git a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png index dd65298c2ff8f..d4c096567c39b 100644 Binary files a/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png and b/frontend/__snapshots__/exporter-exporter--funnel-left-to-right-insight.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--edit.png b/frontend/__snapshots__/scenes-app-dashboards--edit.png index b7fe0d4edb8c0..89cb4fa56f224 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--edit.png and b/frontend/__snapshots__/scenes-app-dashboards--edit.png differ diff --git a/frontend/__snapshots__/scenes-app-dashboards--show.png b/frontend/__snapshots__/scenes-app-dashboards--show.png index 432321bdd4a81..11b82f1a6edce 100644 Binary files a/frontend/__snapshots__/scenes-app-dashboards--show.png and b/frontend/__snapshots__/scenes-app-dashboards--show.png differ diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png index 5f7c428ad21dd..3831be858dd60 100644 Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png index f62fd32d947ea..336a737d983af 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png index 9dd59f171f782..b22467c95b46c 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png index a290aabaf2c89..8bcadaeddb713 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png index 61758c0e5908a..48c95635cae74 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png index f0f18dad2910e..3f300c2fb4964 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-breakdown.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png index 0e7909e11f451..9a4387639a76b 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit--webkit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png index 9e9adda1263cd..ad2443cc98efa 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right-edit.png differ diff --git a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png index 74c7c60a50e11..f437b0531a705 100644 Binary files a/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png and b/frontend/__snapshots__/scenes-app-insights--funnel-left-to-right.png differ diff --git a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png index 774aa3c97a3e1..e68bb4406ab67 100644 Binary files a/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png and b/frontend/__snapshots__/scenes-app-project-homepage--project-homepage.png differ diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss index b4a3090c12a25..6b1aea45485cc 100644 --- a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss +++ b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.scss @@ -10,6 +10,8 @@ table { --bar-width: 0.5rem; // This should be overriden from React --bar-row-height: 18rem; + --bar-padding-top: 1rem; + --bar-padding-bottom: 1.5rem; width: 100%; height: 100%; @@ -20,8 +22,8 @@ border-bottom: 1px solid var(--border); > td { - padding: 1.5rem 0; - padding-top: 1rem; + padding-top: var(--bar-padding-top); + padding-bottom: var(--bar-padding-bottom); } } @@ -40,7 +42,7 @@ } .StepBarLabels { - height: calc(var(--bar-row-height) - 3rem); + height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom)); display: flex; flex-direction: column-reverse; align-items: flex-end; @@ -68,7 +70,7 @@ align-items: flex-end; gap: 0.125rem; border-bottom: 1px solid var(--border); - height: calc(var(--bar-row-height) - 3rem); + height: calc(var(--bar-row-height) - var(--bar-padding-top) - var(--bar-padding-bottom)); padding: 0 1rem; &:not(.StepBars--first) { diff --git a/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx b/frontend/src/scenes/funnels/FunnelBarChart/FunnelBarChart.tsx index db04937511c85..bd18eb7fdcbad 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 { useMemo } from 'react' +import { useLayoutEffect, useState } from 'react' import { insightLogic } from 'scenes/insights/insightLogic' import { ChartParams } from '~/types' @@ -29,7 +29,8 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true } const vizRef = useFunnelTooltip(showPersonsModal) const [scrollRef, [isScrollableLeft, isScrollableRight]] = useScrollable() - const { height } = useResizeObserver({ ref: vizRef }) + const { height: availableHeight } = useResizeObserver({ ref: vizRef }) + const [scrollbarHeightPx, setScrollbarHeightPx] = useState(0) const seriesCount = visibleStepsWithConversionMetrics[0]?.nested_breakdown?.length ?? 0 const barWidthPx = @@ -55,57 +56,24 @@ export function FunnelBarChart({ showPersonsModal: showPersonsModalProp = true } ? 96 : 192 - const table = useMemo(() => { - /** 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 barRowHeight = `calc(${height}px - 17px - 3rem - (1.75rem * ${showTime ? 3 : 2}) - 1px)` + useLayoutEffect(() => { + if (scrollRef.current) { + setScrollbarHeightPx(scrollRef.current.offsetHeight - scrollRef.current.clientHeight) + } + }, [availableHeight]) - return ( - - - {visibleStepsWithConversionMetrics.map((_, i) => ( - - ))} - - {/* The last column is meant to fill up leftover space. */} - - - - - {visibleStepsWithConversionMetrics.map((step, stepIndex) => ( - - ))} - - - - ))} - - -
- - - -
- {visibleStepsWithConversionMetrics.map((step, stepIndex) => ( - - -
- ) - }, [visibleStepsWithConversionMetrics, height]) + /** 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 + + // rows * (row height + gap between rows) - no gap for first row + padding top and bottom + const stepLegendHeightRem = stepLegendRows * (1.5 + 0.25) - 0.25 + 2 * 0.75 + const borderHeightPx = 1 + + // available height - border - legend - (maybe) scrollbar + const barRowHeight = `calc(${availableHeight}px - ${borderHeightPx}px - ${stepLegendHeightRem}rem - ${scrollbarHeightPx}px)` return (
- {table} + + + {visibleStepsWithConversionMetrics.map((_, i) => ( + + ))} + + {/* The last column is meant to fill up leftover space. */} + + + + + {visibleStepsWithConversionMetrics.map((step, stepIndex) => ( + + ))} + + + + ))} + + +
+ + + +
+ {visibleStepsWithConversionMetrics.map((step, stepIndex) => ( + + +
)