mirror of
https://github.com/PostHog/posthog.git
synced 2024-12-01 12:21:02 +01:00
Hide irrelevant numbers for the initial funnel step and clean styling up (#5645)
* Hide "Dropped off" for the initial funnel step * Clean funnels styling up * Fix horizontal bars mode styling * Adjust for #5605 * Show "completed step" percentage for all steps again
This commit is contained in:
Michael Matloka
GitHub
parent
d225d6ef8e
commit
52d3ed7599
@ -1,8 +1,6 @@
|
||||
// Antd arrows rotated at convenient angles
|
||||
|
||||
.anticon-wraper-arrow {
|
||||
margin: 0 -0.25em;
|
||||
|
||||
&.topLeft {
|
||||
svg {
|
||||
transform: rotate(-45deg);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
<div className="funnel-step-title">
|
||||
<PropertyKeyInfo value={step.name} style={{ maxWidth: '100%' }} />
|
||||
</div>
|
||||
{clickhouseFeaturesEnabled && i > 0 && step.action_id === steps[i - 1].action_id && (
|
||||
<DuplicateStepIndicator />
|
||||
)}
|
||||
{clickhouseFeaturesEnabled &&
|
||||
stepIndex > 0 &&
|
||||
step.action_id === steps[stepIndex - 1].action_id && <DuplicateStepIndicator />}
|
||||
</div>
|
||||
<div className={`funnel-step-metadata funnel-time-metadata ${layout}`}>
|
||||
{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
|
||||
<Bar
|
||||
percentage={step.conversionRates.fromBasisStep}
|
||||
name={step.name}
|
||||
onBarClick={() => openPersonsModal(step, i + 1)}
|
||||
onBarClick={() => openPersonsModal(step, stepIndex + 1)}
|
||||
disabled={!!dashboardItemId}
|
||||
layout={layout}
|
||||
popoverTitle={<PropertyKeyInfo value={step.name} />}
|
||||
@ -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
|
||||
)}
|
||||
</div>
|
||||
<div className="funnel-conversion-metadata funnel-step-metadata">
|
||||
<div className="center-flex">
|
||||
<ValueInspectorButton
|
||||
onClick={() => openPersonsModal(step, i + 1)}
|
||||
disabled={!clickhouseFeaturesEnabled || !!dashboardItemId}
|
||||
>
|
||||
<span className="value-inspector-button-icon">
|
||||
<ArrowRightOutlined style={{ color: 'var(--success)' }} />
|
||||
<div className="step-stat">
|
||||
<div className="center-flex">
|
||||
<ValueInspectorButton
|
||||
onClick={() => openPersonsModal(step, stepIndex + 1)}
|
||||
disabled={!clickhouseFeaturesEnabled || !!dashboardItemId}
|
||||
>
|
||||
<span className="value-inspector-button-icon">
|
||||
<ArrowRightOutlined style={{ color: 'var(--success)' }} />
|
||||
</span>
|
||||
<b>{humanizeStepCount(step.count)}</b>
|
||||
</ValueInspectorButton>
|
||||
<span className="text-muted-alt">
|
||||
(
|
||||
{formatDisplayPercentage(
|
||||
step.order > 0 ? step.count / steps[stepIndex - 1].count : 1
|
||||
)}
|
||||
%)
|
||||
</span>
|
||||
<b>{humanizeStepCount(step.count)}</b>
|
||||
</ValueInspectorButton>
|
||||
<span className="text-muted-alt">
|
||||
({formatDisplayPercentage(step.order > 0 ? step.count / steps[i - 1].count : 1)}
|
||||
%)
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="text-muted-alt conversion-metadata-caption"
|
||||
style={
|
||||
layout === FunnelLayout.horizontal ? { flexGrow: 1 } : { marginBottom: 8 }
|
||||
}
|
||||
>
|
||||
completed step
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-muted-alt conversion-metadata-caption"
|
||||
style={layout === FunnelLayout.horizontal ? { flexGrow: 1 } : { marginBottom: 8 }}
|
||||
className="step-stat"
|
||||
style={stepIndex === 0 ? { visibility: 'hidden' } : undefined}
|
||||
>
|
||||
completed step
|
||||
</div>
|
||||
<div className="center-flex">
|
||||
<ValueInspectorButton
|
||||
onClick={() => 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' }}
|
||||
>
|
||||
<span
|
||||
className="value-inspector-button-icon"
|
||||
style={{
|
||||
padding: '4px 6px',
|
||||
marginRight: layout === FunnelLayout.horizontal ? 2 : 10,
|
||||
}} // This custom icon requires special handling
|
||||
<div className="center-flex">
|
||||
<ValueInspectorButton
|
||||
onClick={() => openPersonsModal(step, -(stepIndex + 1))} // dropoff value from step 1 to 2 is -2, 2 to 3 is -3
|
||||
disabled={!clickhouseFeaturesEnabled || !!dashboardItemId}
|
||||
>
|
||||
<ArrowBottomRightOutlined style={{ color: 'var(--danger)' }} />
|
||||
<span className="value-inspector-button-icon">
|
||||
<ArrowBottomRightOutlined style={{ color: 'var(--danger)' }} />
|
||||
</span>
|
||||
<b>
|
||||
{humanizeStepCount(
|
||||
step.order > 0 ? steps[stepIndex - 1].count - step.count : 0
|
||||
)}
|
||||
</b>
|
||||
</ValueInspectorButton>
|
||||
<span className="text-muted-alt">
|
||||
(
|
||||
{formatDisplayPercentage(
|
||||
step.order > 0 ? 1 - step.count / steps[stepIndex - 1].count : 0
|
||||
)}
|
||||
%)
|
||||
</span>
|
||||
<b>{humanizeStepCount(step.order > 0 ? steps[i - 1].count - step.count : 0)}</b>
|
||||
</ValueInspectorButton>
|
||||
<span className="text-muted-alt">
|
||||
(
|
||||
{formatDisplayPercentage(
|
||||
step.order > 0 ? 1 - step.count / steps[i - 1].count : 0
|
||||
)}
|
||||
%)
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-muted-alt conversion-metadata-caption">dropped off</div>
|
||||
</div>
|
||||
<div className="text-muted-alt conversion-metadata-caption">dropped off</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user