watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-24 14:35:35 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Journey view update.

Browse source
This commit is contained in:
Mike Cao 2024-06-04 19:53:49 -07:00
parent 0333bec986
commit d0607303a1
6 changed files with 51 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

60
src/app/(main)/reports/journey/JourneyView.tsx
View file

@ -1,15 +1,17 @@
import { useContext, useMemo, useState } from 'react';
import { ReportContext } from '../[reportId]/Report';
import { firstBy } from 'thenby';
import styles from './JourneyView.module.css';
import classNames from 'classnames';
import { useEscapeKey } from 'components/hooks';
import styles from './JourneyView.module.css';
export default function JourneyView() {
const [selected, setSelected] = useState(null);
const [selectedNode, setSelectedNode] = useState(null);
const { report } = useContext(ReportContext);
const { data, parameters } = report || {};
useEscapeKey(() => setSelected(null));
useEscapeKey(() => setSelectedNode(null));
const columns = useMemo(() => {
if (!data) {
return [];
@ -26,6 +28,9 @@ export default function JourneyView() {
item,
total: +count,
index,
selected: !!selectedNode?.paths.find(arr => {
return arr.find(a => a.items[index] === item);
}),
paths: [
data.filter((d, i) => {
return d.items[index] === item && i !== index;
@ -42,13 +47,13 @@ export default function JourneyView() {
.map(key => col[key])
.sort(firstBy('total', -1));
});
}, [data]);
}, [data, selectedNode]);
const handleClick = (item: string, index: number, paths: any[]) => {
if (item !== selected?.item || index !== selected?.index) {
setSelected({ item, index, paths });
if (item !== selectedNode?.item || index !== selectedNode?.index) {
setSelectedNode({ item, index, paths });
} else {
setSelected(null);
setSelectedNode(null);
}
};
@ -59,10 +64,10 @@ export default function JourneyView() {
return (
<div className={styles.container}>
<div className={styles.view}>
{columns.map((column, index) => {
const current = index === selected?.index;
const behind = index <= selected?.index - 1;
const ahead = index > selected?.index;
{columns.map((nodes, index) => {
const current = index === selectedNode?.index;
const behind = index <= selectedNode?.index - 1;
const ahead = index > selectedNode?.index;
return (
<div
@ -76,23 +81,22 @@ export default function JourneyView() {
<div className={styles.header}>
<div className={styles.num}>{index + 1}</div>
</div>
{column.map(({ item, total, paths }) => {
const highlight = selected?.paths.find(arr => {
return arr.find(a => a.items[index] === item);
});
return (
<div
key={item}
className={classNames(styles.item, {
[styles.highlight]: highlight,
})}
onClick={() => handleClick(item, index, paths)}
>
{item} ({total})
</div>
);
})}
<div className={styles.nodes}>
{nodes.map(({ item, total, selected, paths }, i) => {
return (
<div
id={`node_${index}_${i}`}
key={item}
className={classNames(styles.item, {
[styles.selected]: selected,
})}
onClick={() => handleClick(item, index, paths)}
>
{item} ({total})
</div>
);
})}
</div>
</div>
);
})}