fix: depth default 3 max 5, min_sessions 2, 5 nodes per column, stricter labels

This commit is contained in:
Usman Baig
2026-03-12 23:58:56 +01:00
parent 063a21adeb
commit 0112004457
2 changed files with 8 additions and 8 deletions

View File

@@ -35,14 +35,14 @@ export default function JourneysPage() {
const [period, setPeriod] = useState('30') const [period, setPeriod] = useState('30')
const [dateRange, setDateRange] = useState(() => getDateRange(30)) const [dateRange, setDateRange] = useState(() => getDateRange(30))
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false) const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const [depth, setDepth] = useState(5) const [depth, setDepth] = useState(3)
const [entryPath, setEntryPath] = useState('') const [entryPath, setEntryPath] = useState('')
const { data: transitionsData, isLoading: transitionsLoading } = useJourneyTransitions( const { data: transitionsData, isLoading: transitionsLoading } = useJourneyTransitions(
siteId, dateRange.start, dateRange.end, depth, 1, entryPath || undefined siteId, dateRange.start, dateRange.end, depth, 2, entryPath || undefined
) )
const { data: topPaths, isLoading: topPathsLoading } = useJourneyTopPaths( const { data: topPaths, isLoading: topPathsLoading } = useJourneyTopPaths(
siteId, dateRange.start, dateRange.end, 20, 1, entryPath || undefined siteId, dateRange.start, dateRange.end, 20, 2, entryPath || undefined
) )
const { data: entryPoints } = useJourneyEntryPoints(siteId, dateRange.start, dateRange.end) const { data: entryPoints } = useJourneyEntryPoints(siteId, dateRange.start, dateRange.end)
const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end) const { data: dashboard } = useDashboard(siteId, dateRange.start, dateRange.end)
@@ -117,7 +117,7 @@ export default function JourneysPage() {
<input <input
type="range" type="range"
min={2} min={2}
max={10} max={5}
step={1} step={1}
value={depth} value={depth}
onChange={(e) => setDepth(Number(e.target.value))} onChange={(e) => setDepth(Number(e.target.value))}
@@ -134,9 +134,9 @@ export default function JourneysPage() {
options={entryPointOptions} options={entryPointOptions}
/> />
{(depth !== 5 || entryPath) && ( {(depth !== 3 || entryPath) && (
<button <button
onClick={() => { setDepth(5); setEntryPath('') }} onClick={() => { setDepth(3); setEntryPath('') }}
className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors" className="text-sm text-neutral-500 hover:text-neutral-900 dark:hover:text-white transition-colors"
> >
Reset Reset

View File

@@ -51,7 +51,7 @@ const COLUMN_COLORS = [
const EXIT_GREY = '#52525b' const EXIT_GREY = '#52525b'
const SVG_W = 1100 const SVG_W = 1100
const MARGIN = { top: 24, right: 140, bottom: 24, left: 10 } const MARGIN = { top: 24, right: 140, bottom: 24, left: 10 }
const MAX_NODES_PER_COLUMN = 8 const MAX_NODES_PER_COLUMN = 5
function colorForColumn(col: number): string { function colorForColumn(col: number): string {
return COLUMN_COLORS[col % COLUMN_COLORS.length] return COLUMN_COLORS[col % COLUMN_COLORS.length]
@@ -402,7 +402,7 @@ export default function SankeyDiagram({
const y0 = node.y0 ?? 0 const y0 = node.y0 ?? 0
const y1 = node.y1 ?? 0 const y1 = node.y1 ?? 0
const nodeH = y1 - y0 const nodeH = y1 - y0
if (nodeH < 22) return null // hide labels for tiny nodes if (nodeH < 36) return null // hide labels for small nodes — hover for details
const rawLabel = smartLabel(node.label) const rawLabel = smartLabel(node.label)
const label = truncateLabel(rawLabel, 24) const label = truncateLabel(rawLabel, 24)