diff --git a/frontend/src/lib/components/icons.scss b/frontend/src/lib/components/icons.scss index 1ef9c0f97ff..f2a7896b9b9 100644 --- a/frontend/src/lib/components/icons.scss +++ b/frontend/src/lib/components/icons.scss @@ -1,8 +1,6 @@ // Antd arrows rotated at convenient angles .anticon-wraper-arrow { - margin: 0 -0.25em; - &.topLeft { svg { transform: rotate(-45deg); diff --git a/frontend/src/scenes/funnels/Funnel.scss b/frontend/src/scenes/funnels/Funnel.scss index d4ff419fffb..5ba42bf04e7 100644 --- a/frontend/src/scenes/funnels/Funnel.scss +++ b/frontend/src/scenes/funnels/Funnel.scss @@ -61,7 +61,7 @@ flex-direction: column; .funnel-options-conversion-window-label { - padding: 4px 0; + padding: 4px 2px; .info-indicator { vertical-align: middle; @@ -69,7 +69,7 @@ } .funnel-options-conversion-window-inputs { - padding: 4px 0; + padding: 4px 2px; .time-value-input { flex-grow: 1; diff --git a/frontend/src/scenes/funnels/FunnelBarGraph.scss b/frontend/src/scenes/funnels/FunnelBarGraph.scss index 098215c03b6..795bf0d4a23 100644 --- a/frontend/src/scenes/funnels/FunnelBarGraph.scss +++ b/frontend/src/scenes/funnels/FunnelBarGraph.scss @@ -251,7 +251,7 @@ $funnel_canvas_background: #fafafa; .value-inspector-button-icon { background-color: $funnel_canvas_background; // Ensures the series line gets cut off padding: 4px 0; - margin-right: 12px; + margin-right: 1rem; } } @@ -268,6 +268,7 @@ $funnel_canvas_background: #fafafa; .ant-btn.funnel-inspect-button { padding: 0; height: unset; + padding-right: 0.25rem; } } @@ -328,18 +329,24 @@ $funnel_canvas_background: #fafafa; &.horizontal { .funnel-step { + .step-stat { + display: flex; + align-items: baseline; + } + .funnel-conversion-metadata { display: flex; align-items: center; + justify-content: space-between; .funnel-inspect-button { - padding: 0; + padding: 0 4px 0 0; .value-inspector-button-icon { padding-right: 8px; } } .conversion-metadata-caption { - padding-left: 4px; + padding-left: 3px; } } } diff --git a/frontend/src/scenes/funnels/FunnelBarGraph.tsx b/frontend/src/scenes/funnels/FunnelBarGraph.tsx index 33b0e5ae672..fa4aaefd0b8 100644 --- a/frontend/src/scenes/funnels/FunnelBarGraph.tsx +++ b/frontend/src/scenes/funnels/FunnelBarGraph.tsx @@ -312,11 +312,11 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om className={`funnel-bar-graph ${layout}${color && color !== 'white' ? ' colored' : ''} ${color}`} style={dashboardItemId ? {} : { minHeight: 450 }} > - {steps.map((step, i) => { - const basisStep = getReferenceStep(steps, stepReference, i) - const previousStep = getReferenceStep(steps, FunnelStepReference.previous, i) - const showLineBefore = layout === FunnelLayout.horizontal && i > 0 - const showLineAfter = layout === FunnelLayout.vertical || i < steps.length - 1 + {steps.map((step, stepIndex) => { + const basisStep = getReferenceStep(steps, stepReference, stepIndex) + const previousStep = getReferenceStep(steps, FunnelStepReference.previous, stepIndex) + const showLineBefore = layout === FunnelLayout.horizontal && stepIndex > 0 + const showLineAfter = layout === FunnelLayout.vertical || stepIndex < steps.length - 1 const breakdownMaxIndex = getBreakdownMaxIndex( Array.isArray(step.nested_breakdown) ? step.nested_breakdown : undefined ) @@ -336,9 +336,9 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om
- {clickhouseFeaturesEnabled && i > 0 && step.action_id === steps[i - 1].action_id && ( - - )} + {clickhouseFeaturesEnabled && + stepIndex > 0 && + step.action_id === steps[stepIndex - 1].action_id && }
{step.average_conversion_time && step.average_conversion_time >= 0 + Number.EPSILON ? ( @@ -370,7 +370,7 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om percentage={barSizePercentage} name={breakdown.name} onBarClick={() => - openPersonsModal(step, i + 1, breakdown.breakdown_value) + openPersonsModal(step, stepIndex + 1, breakdown.breakdown_value) } disabled={!!dashboardItemId} layout={layout} @@ -438,7 +438,7 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om onClick={() => clickhouseFeaturesEnabled && !dashboardItemId && - openPersonsModal(step, -(i + 1)) + openPersonsModal(step, -(stepIndex + 1)) } // dropoff value for steps is negative style={{ flex: `${1 - breakdownSum / basisStep.count} 1 0`, @@ -453,7 +453,7 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om openPersonsModal(step, i + 1)} + onBarClick={() => openPersonsModal(step, stepIndex + 1)} disabled={!!dashboardItemId} layout={layout} popoverTitle={} @@ -501,7 +501,7 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om onClick={() => clickhouseFeaturesEnabled && !dashboardItemId && - openPersonsModal(step, -(i + 1)) + openPersonsModal(step, -(stepIndex + 1)) } // dropoff value for steps is negative style={{ flex: `${1 - step.conversionRates.fromBasisStep} 1 0`, @@ -514,53 +514,62 @@ export function FunnelBarGraph({ filters, dashboardItemId, color = 'white' }: Om )}
-
- openPersonsModal(step, i + 1)} - disabled={!clickhouseFeaturesEnabled || !!dashboardItemId} - > - - +
+
+ openPersonsModal(step, stepIndex + 1)} + disabled={!clickhouseFeaturesEnabled || !!dashboardItemId} + > + + + + {humanizeStepCount(step.count)} + + + ( + {formatDisplayPercentage( + step.order > 0 ? step.count / steps[stepIndex - 1].count : 1 + )} + %) - {humanizeStepCount(step.count)} - - - ({formatDisplayPercentage(step.order > 0 ? step.count / steps[i - 1].count : 1)} - %) - +
+
+ completed step +
- completed step -
-
- openPersonsModal(step, -(i + 1))} // dropoff value from step 1 to 2 is -2, 2 to 3 is -3 - disabled={!clickhouseFeaturesEnabled || !!dashboardItemId} - style={{ paddingRight: '0.25em' }} - > - + openPersonsModal(step, -(stepIndex + 1))} // dropoff value from step 1 to 2 is -2, 2 to 3 is -3 + disabled={!clickhouseFeaturesEnabled || !!dashboardItemId} > - + + + + + {humanizeStepCount( + step.order > 0 ? steps[stepIndex - 1].count - step.count : 0 + )} + + + + ( + {formatDisplayPercentage( + step.order > 0 ? 1 - step.count / steps[stepIndex - 1].count : 0 + )} + %) - {humanizeStepCount(step.order > 0 ? steps[i - 1].count - step.count : 0)} - - - ( - {formatDisplayPercentage( - step.order > 0 ? 1 - step.count / steps[i - 1].count : 0 - )} - %) - +
+
dropped off
-
dropped off