Release 0.15.0-alpha #43
@@ -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
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
Reference in New Issue
Block a user