From d0607303a112a074a4ef48f1dd7c39ab6dd0be54 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Tue, 4 Jun 2024 19:53:49 -0700 Subject: [PATCH] Journey view update. --- .../reports/[reportId]/Report.module.css | 1 + .../reports/[reportId]/ReportBody.module.css | 2 +- .../(main)/reports/[reportId]/ReportBody.tsx | 2 +- .../reports/journey/JourneyView.module.css | 21 +++++-- .../(main)/reports/journey/JourneyView.tsx | 60 ++++++++++--------- src/components/layout/Page.module.css | 1 + 6 files changed, 51 insertions(+), 36 deletions(-) diff --git a/src/app/(main)/reports/[reportId]/Report.module.css b/src/app/(main)/reports/[reportId]/Report.module.css index be5bb815..db65d001 100644 --- a/src/app/(main)/reports/[reportId]/Report.module.css +++ b/src/app/(main)/reports/[reportId]/Report.module.css @@ -3,4 +3,5 @@ grid-template-rows: max-content 1fr; grid-template-columns: max-content 1fr; margin-bottom: 60px; + height: 100%; } diff --git a/src/app/(main)/reports/[reportId]/ReportBody.module.css b/src/app/(main)/reports/[reportId]/ReportBody.module.css index 5fb4259a..9af1070a 100644 --- a/src/app/(main)/reports/[reportId]/ReportBody.module.css +++ b/src/app/(main)/reports/[reportId]/ReportBody.module.css @@ -1,5 +1,5 @@ .body { padding-inline-start: 20px; - grid-row: 2/3; + grid-row: 2 / 3; grid-column: 2 / 3; } diff --git a/src/app/(main)/reports/[reportId]/ReportBody.tsx b/src/app/(main)/reports/[reportId]/ReportBody.tsx index 6f4627f6..9a740c5e 100644 --- a/src/app/(main)/reports/[reportId]/ReportBody.tsx +++ b/src/app/(main)/reports/[reportId]/ReportBody.tsx @@ -1,6 +1,6 @@ -import styles from './ReportBody.module.css'; import { useContext } from 'react'; import { ReportContext } from './Report'; +import styles from './ReportBody.module.css'; export function ReportBody({ children }) { const { report } = useContext(ReportContext); diff --git a/src/app/(main)/reports/journey/JourneyView.module.css b/src/app/(main)/reports/journey/JourneyView.module.css index 4d5a96a4..29ebb800 100644 --- a/src/app/(main)/reports/journey/JourneyView.module.css +++ b/src/app/(main)/reports/journey/JourneyView.module.css @@ -1,5 +1,6 @@ .container { - height: 900px; + width: 100%; + height: 100%; position: relative; } @@ -12,13 +13,13 @@ display: flex; flex-direction: row; flex-wrap: nowrap; - gap: 60px; overflow: auto; + gap: 100px; } .header { display: flex; - margin-bottom: 20px; + min-height: 70px; } .num { @@ -37,7 +38,11 @@ } .column { - min-width: 300px; + display: flex; + flex-direction: column; +} + +.nodes { display: flex; flex-direction: column; gap: 10px; @@ -48,14 +53,18 @@ padding: 10px 20px; background: var(--base75); border-radius: 5px; + display: flex; + align-items: center; + min-width: 300px; + min-height: 60px; } -.item:hover:not(.highlight) { +.item:hover:not(.selected) { color: var(--base900); background: var(--base100); } -.highlight { +.selected { color: var(--base75); background: var(--base900); font-weight: 400; diff --git a/src/app/(main)/reports/journey/JourneyView.tsx b/src/app/(main)/reports/journey/JourneyView.tsx index 921d82dd..00172f37 100644 --- a/src/app/(main)/reports/journey/JourneyView.tsx +++ b/src/app/(main)/reports/journey/JourneyView.tsx @@ -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 (
- {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 (
{index + 1}
- {column.map(({ item, total, paths }) => { - const highlight = selected?.paths.find(arr => { - return arr.find(a => a.items[index] === item); - }); - - return ( -
handleClick(item, index, paths)} - > - {item} ({total}) -
- ); - })} +
+ {nodes.map(({ item, total, selected, paths }, i) => { + return ( +
handleClick(item, index, paths)} + > + {item} ({total}) +
+ ); + })} +
); })} diff --git a/src/components/layout/Page.module.css b/src/components/layout/Page.module.css index 52893157..d1498122 100644 --- a/src/components/layout/Page.module.css +++ b/src/components/layout/Page.module.css @@ -4,6 +4,7 @@ flex-direction: column; position: relative; width: 100%; + height: 100%; max-width: 1320px; margin: 0 auto; padding: 0 20px;