Skip to content

Commit

Permalink
Fixed path counts. Updated number display.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikecao
mikecao committed Jun 19, 2024
1 parent 45d6b16 commit f56849a
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 81 deletions.
2 changes: 2 additions & 0 deletions src/app/(main)/reports/[reportId]/ReportMenu.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
.menu {
position: relative;
width: 300px;
padding-top: 20px;
padding-inline-end: 20px;
border-inline-end: 1px solid var(--base300);
grid-row: 2 / 3;
Expand All @@ -9,6 +10,7 @@

.button {
position: absolute;
top: 0;
right: 0;
display: flex;
place-content: center;
Expand Down
40 changes: 15 additions & 25 deletions src/app/(main)/reports/journey/JourneyView.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
padding-bottom: 10px;
}

.item {
.node {
position: relative;
cursor: pointer;
padding: 10px 20px;
Expand All @@ -89,37 +89,35 @@
display: flex;
align-items: center;
justify-content: space-between;
min-width: 300px;
width: 300px;
max-width: 300px;
min-height: 60px;
height: 60px;
max-height: 60px;
}

.item:hover:not(.selected) {
.node:hover:not(.selected) {
color: var(--base900);
background: var(--base100);
}

.item.selected {
.node.selected {
color: var(--base75);
background: var(--base900);
font-weight: 400;
}

.item.active {
.node.active {
color: var(--light50);
background: var(--primary400);
}

.behind {
color: var(--base400);
}

.ahead {
color: var(--base400);
.node.selected .count {
color: var(--base50);
background: var(--base800);
}

.current {
color: var(--base500);
.node.selected.active .count {
background: var(--primary600);
}

.name {
Expand All @@ -132,20 +130,12 @@
background: var(--base200);
}

.item.selected .count {
color: var(--base50);
background: var(--base800);
}

.item.selected.active .count {
background: var(--primary600);
}

.line {
position: absolute;
bottom: 0;
left: -100px;
width: 100px;
pointer-events: none;
}

.line.up {
Expand Down Expand Up @@ -230,8 +220,8 @@
border-radius: 100%;
border: 3px solid var(--journey-line-color);
background: var(--light50);
width: 13px;
height: 13px;
width: 14px;
height: 14px;
}

.line:not(.active) .start:before,
Expand Down
106 changes: 50 additions & 56 deletions src/app/(main)/reports/journey/JourneyView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import classNames from 'classnames';
import { useEscapeKey, useMessages } from 'components/hooks';
import { objectToArray } from 'lib/data';
import { ReportContext } from '../[reportId]/Report';
// eslint-disable-next-line css-modules/no-unused-class
import styles from './JourneyView.module.css';
import { formatLongNumber } from 'lib/format';

const NODE_HEIGHT = 60;
const NODE_GAP = 10;
Expand Down Expand Up @@ -37,27 +37,11 @@ export default function JourneyView() {
const name = items[columnIndex];

if (name) {
const selected = !!selectedPaths.find(path => path.items[columnIndex] === name);
const active = selected && !!activePaths.find(path => path.items[columnIndex] === name);
const selected = !!selectedPaths.find(({ items }) => items[columnIndex] === name);
const active = selected && !!activePaths.find(({ items }) => items[columnIndex] === name);

if (!nodes[name]) {
const paths = data.filter(d => d.items[columnIndex] === name);

const from =
columnIndex > 0 &&
selected &&
paths.reduce((obj, path) => {
const { items, count } = path;
const name = items[columnIndex - 1];

if (!obj[name]) {
obj[name] = { name, count };
} else {
obj[name].count += count;
}

return obj;
}, {});
const paths = data.filter(({ items }) => items[columnIndex] === name);

nodes[name] = {
name,
Expand All @@ -68,7 +52,9 @@ export default function JourneyView() {
selected,
active,
paths,
from: objectToArray(from),
pathMap: paths.map(({ items, count }) => ({
[`${columnIndex}:${items.join(':')}`]: count,
})),
};
} else {
nodes[name].totalCount += count;
Expand All @@ -82,43 +68,45 @@ export default function JourneyView() {
}

columns.forEach((column, columnIndex) => {
const nodes = column.nodes.map((node, nodeIndex) => {
const { from, totalCount } = node;
const nodes = column.nodes.map((currentNode, currentNodeIndex) => {
const previousNodes = columns[columnIndex - 1]?.nodes;
let selectedCount = from?.length ? 0 : totalCount;
let selectedCount = previousNodes ? 0 : currentNode.totalCount;
let activeCount = selectedCount;

const lines = from?.reduce((arr: any[][], { name, count }: any) => {
const fromIndex = previousNodes.findIndex((node: { name: any; selected: any }) => {
return node.name === name && node.selected;
});

if (fromIndex > -1) {
arr.push([fromIndex, nodeIndex]);
selectedCount += count;
}

if (
previousNodes.findIndex(node => {
return node.name === name && node.active;
}) > -1
) {
activeCount += count;
}

return arr;
}, []);

return { ...node, selectedCount, activeCount, lines };
const lines =
previousNodes?.reduce((arr: any[][], previousNode: any, previousNodeIndex: number) => {
const fromCount = selectedNode?.paths.reduce((sum, path) => {
if (
previousNode.name === path.items[columnIndex - 1] &&
currentNode.name === path.items[columnIndex]
) {
sum += path.count;
}
return sum;
}, 0);

if (currentNode.selected && previousNode.selected && fromCount) {
arr.push([previousNodeIndex, currentNodeIndex]);
selectedCount += fromCount;

if (previousNode.active) {
activeCount += fromCount;
}
}

return arr;
}, []) || [];

return { ...currentNode, selectedCount, activeCount, lines };
});

const visitorCount = nodes.reduce(
(sum: number, { selected, selectedCount, active, activeCount, totalCount }) => {
if (!selectedNode) {
sum += totalCount;
} else if (!activeNode && selected) {
} else if (!activeNode && selectedNode && selected) {
sum += selectedCount;
} else if (active) {
} else if (activeNode && active) {
sum += activeCount;
}
return sum;
Expand All @@ -136,9 +124,9 @@ export default function JourneyView() {
return columns;
}, [data, selectedNode, activeNode]);

const handleClick = (name: string, index: number, paths: any[]) => {
if (name !== selectedNode?.name || index !== selectedNode?.index) {
setSelectedNode({ name, index, paths });
const handleClick = (name: string, columnIndex: number, paths: any[]) => {
if (name !== selectedNode?.name || columnIndex !== selectedNode?.columnIndex) {
setSelectedNode({ name, columnIndex, paths });
} else {
setSelectedNode(null);
}
Expand All @@ -165,8 +153,8 @@ export default function JourneyView() {
<div className={styles.header}>
<div className={styles.num}>{columnIndex + 1}</div>
<div className={styles.stats}>
<div className={styles.visitors}>
{column.visitorCount} {formatMessage(labels.visitors)}
<div className={styles.visitors} title={column.visitorCount}>
{formatLongNumber(column.visitorCount)} {formatMessage(labels.visitors)}
</div>
{columnIndex > 0 && <div className={styles.dropoff}>{dropOffPercent}</div>}
</div>
Expand All @@ -183,6 +171,12 @@ export default function JourneyView() {
selectedCount,
lines,
}) => {
const nodeCount = selected
? active
? activeCount
: selectedCount
: totalCount;

return (
<div
key={name}
Expand All @@ -191,16 +185,16 @@ export default function JourneyView() {
onMouseLeave={() => selected && setActiveNode(null)}
>
<div
className={classNames(styles.item, {
className={classNames(styles.node, {
[styles.selected]: selected,
[styles.active]: active,
})}
onClick={() => handleClick(name, columnIndex, paths)}
>
<div className={styles.name}>{name}</div>
<TooltipPopup label={dropOffPercent} disabled={!selected}>
<div className={styles.count}>
{selected ? (active ? activeCount : selectedCount) : totalCount}
<div className={styles.count} title={nodeCount}>
{formatLongNumber(nodeCount)}
</div>
</TooltipPopup>
{columnIndex < columns.length &&
Expand Down

0 comments on commit f56849a

Please sign in to comment.