('');
17 | const menuRef = useRef(null);
18 |
19 | // display or undisplay all menus
20 | const toggleMenus = () => {
21 | if (menuVisible) {
22 | setMainMenu('');
23 | }
24 | setMenuVisible(!menuVisible);
25 | };
26 |
27 | useClickAway(menuRef, () => {
28 | setMainMenu('');
29 | setMenuVisible(false);
30 | });
31 |
32 | return (
33 |
37 | {menuVisible && (
38 |
39 | {mainMenu && (
40 |
48 | )}
49 |
55 | {mainMenu == 'Time' ? (
56 |
57 | ) : (
58 |
63 | )}
64 |
65 |
66 | )}
67 |
68 |
75 |
115 |
222 |
51 |
66 |
67 |
68 |
69 |
70 | );
71 | };
72 |
73 | export default DesktopView;
74 |
--------------------------------------------------------------------------------
/src/components/Timeline/MobileView.tsx:
--------------------------------------------------------------------------------
1 | import Sankey from 'src/components/Sankey';
2 | import Years from 'src/components/Years';
3 | import { useMemo, useState } from 'react';
4 | import { useResizeDetector } from 'react-resize-detector';
5 | import { useSwipeable } from 'react-swipeable';
6 | import { LeftButton, RightButton } from './buttons';
7 | import { computeCanvasSize, computeStats } from './compute';
8 | import { TimelineProps } from 'src/@types/data';
9 |
10 | const MobileView = ({ data, visParams }: TimelineProps) => {
11 | const {
12 | yearStep,
13 | mobileYearHeight,
14 | nodeGap,
15 | nodeTitleGap,
16 | mobileNodeWidth,
17 | linkDefaultColor,
18 | crossLinkStrokeDashArray,
19 | crossLinkTriangleSize,
20 | gridGap
21 | } = visParams;
22 | const [viewCursor, setViewCursor] = useState(0);
23 | const { minYear, maxYear, canvasHeight } = computeCanvasSize(
24 | data,
25 | mobileYearHeight,
26 | yearStep
27 | );
28 | const stats = useMemo(() => computeStats(data), [data]);
29 | const views = [...Array.from(stats.columns)].sort();
30 |
31 | const { width, ref } = useResizeDetector({
32 | handleHeight: false
33 | });
34 |
35 | const slideLeft = () => {
36 | if (viewCursor >= views.length - 1) return;
37 | setViewCursor(viewCursor + 1);
38 | };
39 | const slideRight = () => {
40 | if (viewCursor <= 0) return;
41 | setViewCursor(viewCursor - 1);
42 | };
43 |
44 | const handlers = useSwipeable({
45 | onSwipedLeft: (e) => slideLeft(),
46 | onSwipedRight: (e) => slideRight(),
47 | // preventDefaultTouchmoveEvent: true,
48 | trackMouse: true
49 | });
50 |
51 | return (
52 | <>
53 |
59 |
87 |
88 | slideRight()} />
89 | {(views as any)[viewCursor]}
90 | slideLeft()} />
91 |
92 |
93 | );
94 | };
95 |
96 | export default MobileView;
97 |
--------------------------------------------------------------------------------
/src/components/Timeline/buttons.tsx:
--------------------------------------------------------------------------------
1 | export const LeftButton = (props: any) => (
2 |
14 | );
15 |
16 | export const RightButton = (props: any) => (
17 |
30 | );
31 |
--------------------------------------------------------------------------------
/src/components/Timeline/compute.ts:
--------------------------------------------------------------------------------
1 | import type { Data } from 'src/@types/data';
2 |
3 | /**
4 | * calculate year's range, return maxYear and minYear
5 | * @param data
6 | * @returns
7 | */
8 | export function yearRange(data: Data[]) {
9 | let minYear = Infinity;
10 | let maxYear = -Infinity;
11 | data.map((d: Data) => {
12 | if (minYear > d.year_start) minYear = d.year_start;
13 | if (maxYear < d.year_finish) maxYear = d.year_finish;
14 | });
15 |
16 | const currentYear = new Date().getFullYear();
17 | if (maxYear > currentYear) {
18 | maxYear = currentYear;
19 | }
20 |
21 | return { minYear, maxYear };
22 | }
23 |
24 | /**
25 | * compute the canvas height
26 | * @param { minYear, maxYear }
27 | * @returns
28 | */
29 | export function computeCanvasHeight({
30 | minYear,
31 | maxYear,
32 | yearHeight,
33 | yearStep
34 | }: {
35 | minYear: number;
36 | maxYear: number;
37 | yearHeight: number;
38 | yearStep: number;
39 | }): number {
40 | return ((maxYear - minYear) / yearStep + 1) * yearHeight;
41 | }
42 |
43 | export function computeCanvasSize(
44 | data: Data[],
45 | yearHeight: number,
46 | yearStep: number
47 | ) {
48 | if (!data || !data.length) {
49 | console.error('No data');
50 | }
51 |
52 | const { minYear, maxYear } = yearRange(data);
53 | const canvasHeight = computeCanvasHeight({
54 | minYear,
55 | maxYear,
56 | yearHeight,
57 | yearStep
58 | });
59 | return { minYear, maxYear, canvasHeight };
60 | }
61 |
62 | export function computeStats(data: Data[]) {
63 | const tags = new Set();
64 | const categories = new Set();
65 | const columns = new Set();
66 |
67 | data.map((d) => {
68 | d.tags.map((t) => tags.add(t.title));
69 | d.categories.map((t) => categories.add(t.title));
70 | columns.add(d.column.title);
71 | });
72 |
73 | return { tags, categories, columns };
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/Timeline/index.tsx:
--------------------------------------------------------------------------------
1 | import { TimelineProps } from 'src/@types/data';
2 | import DesktopView from './DesktopView';
3 | import MobileView from './MobileView';
4 |
5 | type Props = TimelineProps & {
6 | isMobile: boolean;
7 | };
8 |
9 | /**
10 | * ### Timeline visualization component
11 | */
12 | export function Timeline({ data, visParams, isMobile }: Props) {
13 | return (
14 |
15 | {isMobile ? (
16 |
17 | ) : (
18 |
19 | )}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/src/components/Years/index.tsx:
--------------------------------------------------------------------------------
1 | import range from 'lodash/range';
2 | import type { HTMLProps } from 'react';
3 |
4 | export type YearsProps = {
5 | yearHeight: number;
6 | minYear: number;
7 | maxYear: number;
8 | yearStep: number;
9 | } & HTMLProps;
10 |
11 | export default function Years({
12 | yearHeight,
13 | minYear,
14 | maxYear,
15 | yearStep,
16 | }: YearsProps) {
17 | const years = range(minYear, maxYear, yearStep).reverse();
18 |
19 | return (
20 |
21 | {years.map((y: any, i: number) => (
22 |
30 |
31 | {`${y}s`}
32 |
33 |
34 | ))}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/Zoom/index.tsx:
--------------------------------------------------------------------------------
1 | import { MAX_YEAR_HEIGHT, MIN_YEAR_HEIGHT } from 'src/lib/consts';
2 |
3 | export default function Zoom({ yearHeight, setYearHeight }: {
4 | yearHeight: number;
5 | setYearHeight: (yearHeight: number) => void;
6 | }) {
7 | const zoomOut = () => {
8 | if (yearHeight / 1.5 > MIN_YEAR_HEIGHT) setYearHeight(yearHeight / 1.5);
9 | };
10 |
11 | const zoomIn = () => {
12 | if (yearHeight * 1.5 < MAX_YEAR_HEIGHT) setYearHeight(yearHeight * 1.5);
13 | };
14 |
15 | return (
16 |
17 |
23 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/lib/consts.ts:
--------------------------------------------------------------------------------
1 | export const BREAKPOINTS = {
2 | sm: '640px',
3 | md: '768px',
4 | lg: '1024px',
5 | xl: '1280px',
6 | '2xl': '1536px',
7 | '3xl': '2000px'
8 | };
9 |
10 | export const MAX_YEAR_HEIGHT: number = 200; // max height of per year, for zoom function
11 | export const MIN_YEAR_HEIGHT: number = 40; // min height of per year, for zoom function
12 | export const YEAR_RANGE_KEY: string = 'yearRange';
13 |
14 | export const DIRECT_LINK_KEYS = {
15 | source: 'influenced',
16 | target: 'influenced_by'
17 | };
18 | export const CROSS_LINK_KEYS = {
19 | source: 'cross_influenced',
20 | target: 'cross_influenced_by'
21 | };
22 |
--------------------------------------------------------------------------------
/src/lib/dataGenerator.ts:
--------------------------------------------------------------------------------
1 | function getRandomInt(min: number, max: number): number {
2 | min = Math.ceil(min);
3 | max = Math.floor(max);
4 | return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
5 | }
6 |
7 | function randomLink(linkMaxCount: number, nodes: number[]) {
8 | const count = getRandomInt(0, linkMaxCount);
9 | return new Array(count).fill(0).map(() => ({
10 | id: nodes[getRandomInt(0, nodes.length)]
11 | }));
12 | }
13 |
14 | export default function dataGenerator(
15 | count: number,
16 | yearRange: number[],
17 | tagMaxCount: number,
18 | categoryMaxCount: number,
19 | columnCount: number,
20 | colors: string[],
21 | influencedMaxCount: number,
22 | influencedByMaxCount: number,
23 | crossInfluencedMaxCount: number,
24 | crossInfluencedByMaxCount: number
25 | ) {
26 | const data = [];
27 | const nodeIdsGroupByColumn = new Array(columnCount)
28 | .fill(0)
29 | .map((): number[] => []);
30 |
31 | for (let i = 0; i < count; i++) {
32 | const year1 = getRandomInt(yearRange[0], yearRange[1]);
33 | const year2 = getRandomInt(yearRange[0], yearRange[1]);
34 | const column = getRandomInt(0, columnCount);
35 | nodeIdsGroupByColumn[column].push(i);
36 | const tagCount = getRandomInt(0, tagMaxCount);
37 | const tags = new Array(tagCount).fill(0).map(() => ({
38 | title: `Tag ${getRandomInt(0, tagMaxCount)}`
39 | }));
40 | const categoryCount = getRandomInt(0, categoryMaxCount);
41 | const categories = new Array(categoryCount).fill(0).map(() => ({
42 | title: `Category ${getRandomInt(0, categoryMaxCount)}`
43 | }));
44 |
45 | data.push({
46 | id: i,
47 | name: `Node Name ${i}`,
48 | slug: `https://github.com/geekplux/timeline-sankey`,
49 | description: `Node description ${i}`,
50 | year_start: year1 < year2 ? year1 : year2,
51 | year_finish: year1 < year2 ? year2 : year1,
52 | column: {
53 | key: column,
54 | title: `Column Title ${column}`,
55 | color: colors[column]
56 | },
57 | tags,
58 | categories
59 | });
60 | }
61 |
62 | return data.map((d: any) => {
63 | const column = d.column.key;
64 | const sameColumnNodes = nodeIdsGroupByColumn[column];
65 | const otherColumnNodes = nodeIdsGroupByColumn
66 | .filter((_, index) => index !== column)
67 | .reduce((a, b) => a.concat(b), []);
68 |
69 | d.influenced = randomLink(influencedMaxCount, sameColumnNodes);
70 | d.influenced_by = randomLink(influencedByMaxCount, sameColumnNodes);
71 | d.cross_influenced = randomLink(crossInfluencedMaxCount, otherColumnNodes);
72 | d.cross_influenced_by = randomLink(
73 | crossInfluencedByMaxCount,
74 | otherColumnNodes
75 | );
76 | return d;
77 | });
78 | }
79 |
--------------------------------------------------------------------------------
/src/lib/hooks.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { useMediaQuery } from 'react-responsive';
3 |
4 | /**
5 | * Patched useMediaQuery for SSR
6 | * Until https://github.com/contra/react-responsive/issues/162 resolved
7 | */
8 | export function useBreakpoint(
9 | query: string,
10 | fallback = true,
11 | callback?: () => any
12 | ) {
13 | const [browserFlushed, setBrowserFlushed] = useState(false);
14 | const matched = useMediaQuery({ query }, undefined, callback);
15 | useEffect(() => setBrowserFlushed(true), []);
16 |
17 | if (typeof window !== 'undefined' && browserFlushed) {
18 | return matched;
19 | }
20 | return fallback;
21 | }
22 |
23 | /**
24 | * Set styles on a page and remove on dismount
25 | */
26 | export function usePageStyles(styles: object) {
27 | useEffect(() => {
28 | Object.keys(styles).forEach((style) => {
29 | document.body.style[style as any] = styles[style as keyof typeof styles];
30 | });
31 |
32 | return () =>
33 | Object.keys(styles).forEach((style) => {
34 | document.body.style.removeProperty(style);
35 | });
36 | }, [styles]);
37 | }
38 |
--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import type { KeyboardEvent } from 'react';
2 |
3 | /**
4 | * Simple fetch wrapper for JSON GETs
5 | */
6 | export function fetchJSON(url: string) {
7 | return fetch(url).then((res) => res.json());
8 | }
9 |
10 | /**
11 | * Call a funciton on enter/space
12 | */
13 | export const onKeyAction = (cb: () => void) => (e: KeyboardEvent) => {
14 | if (e.key === 'Enter' || e.key === ' ') {
15 | cb();
16 | }
17 | };
18 |
19 | /**
20 | * Naive utility to strip HTML tags from a string
21 | * @param html HTML string
22 | */
23 | export function plaintext(html: string) {
24 | return html?.replace(/<[^>]*>?/gm, '');
25 | }
26 |
27 | /**
28 | * Resole relative URLs against a source
29 | * @param link URL to resolve
30 | * @param source Source URL to resolve against
31 | */
32 | export function resolveUrl(link: string, source: string) {
33 | return !/^https?:\/\//i.test(link) ? new URL(link, source).href : link;
34 | }
35 |
36 | /**
37 | * Helper to update CSS variables
38 | * @param properties Object of CSS properties
39 | */
40 | export function setProperties(properties: any) {
41 | Object.keys(properties).forEach((property: string) =>
42 | document.documentElement.style.setProperty(property, properties[property])
43 | );
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import 'src/styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 |
4 | function MyApp({ Component, pageProps }: AppProps) {
5 | return
6 | }
7 |
8 | export default MyApp
9 |
--------------------------------------------------------------------------------
/src/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import { Timeline } from 'src/components/Timeline';
3 | import { Data } from 'src/@types/data';
4 | import { useControls } from 'leva';
5 | import dataGenerator from 'src/lib/dataGenerator';
6 | import { Leva } from 'leva';
7 | import { MAX_YEAR_HEIGHT, MIN_YEAR_HEIGHT } from 'src/lib/consts';
8 | import { BREAKPOINTS } from 'src/lib/consts';
9 | import { useBreakpoint } from 'src/lib/hooks';
10 |
11 | /**
12 | * Timeline page
13 | */
14 | export default function TimelinePage() {
15 | const [data, setData] = useState([]);
16 | const isMobile = useBreakpoint(`(max-width: ${BREAKPOINTS.lg})`);
17 | const visParams = useControls('Visualization Parameters', {
18 | yearStep: {
19 | value: 10,
20 | min: 5,
21 | max: 50,
22 | step: 5
23 | },
24 | yearHeight: {
25 | value: 60, // height of per year
26 | min: MIN_YEAR_HEIGHT,
27 | max: MAX_YEAR_HEIGHT,
28 | step: 10
29 | },
30 | nodeWidth: {
31 | value: 12,
32 | min: 5,
33 | max: 30,
34 | step: 1
35 | },
36 | linkDefaultColor: 'rgba(220, 220, 220, 1)',
37 | gridGap: {
38 | value: 80,
39 | min: 20,
40 | max: 200,
41 | step: 5
42 | },
43 | nodeGap: {
44 | value: 30, // the minimum gap height between nodes in each column. which is for the space of node title, unit: pixel
45 | min: 10,
46 | max: 60,
47 | step: 5
48 | },
49 | nodeTitleGap: {
50 | value: 30, // the vertical gap height between node and its title, unit: pixel
51 | min: 10,
52 | max: 50,
53 | step: 5
54 | },
55 | crossLinkStrokeDashArray: {
56 | value: 1,
57 | min: 1,
58 | max: 20,
59 | step: 1
60 | },
61 | crossLinkTriangleSize: {
62 | value: 7,
63 | min: 5,
64 | max: 20,
65 | step: 1
66 | },
67 | mobileYearHeight: {
68 | value: 50, // height of per year
69 | min: 20,
70 | max: 100,
71 | step: 5
72 | },
73 | mobileNodeWidth: {
74 | value: 8,
75 | min: 3,
76 | max: 30,
77 | step: 1
78 | }
79 | });
80 |
81 | const {
82 | nodeCount,
83 | yearRange,
84 | tagMaxCount,
85 | categoryMaxCount,
86 | columnCount,
87 | color1,
88 | color2,
89 | color3,
90 | color4,
91 | color5,
92 | influencedMaxCount,
93 | influencedByMaxCount,
94 | crossInfluencedMaxCount,
95 | crossInfluencedByMaxCount
96 | } = useControls(
97 | 'Random Data Generation Parameters',
98 | {
99 | nodeCount: {
100 | value: 40,
101 | min: 10,
102 | max: 100,
103 | step: 10
104 | },
105 | yearRange: {
106 | min: 1600,
107 | max: 2022,
108 | value: [1800, 2022]
109 | },
110 | columnCount: {
111 | value: 3,
112 | min: 2,
113 | max: 5,
114 | step: 1
115 | },
116 | tagMaxCount: 10,
117 | categoryMaxCount: 10,
118 | color1: { value: 'peru', render: (get) => get('columnCount') >= 1 },
119 | color2: { value: 'lightpink', render: (get) => get('columnCount') >= 2 },
120 | color3: { value: 'steelblue', render: (get) => get('columnCount') >= 3 },
121 | color4: { value: 'red', render: (get) => get('columnCount') >= 4 },
122 | color5: { value: 'limegreen', render: (get) => get('columnCount') >= 5 },
123 | influencedMaxCount: 3,
124 | influencedByMaxCount: 3,
125 | crossInfluencedMaxCount: 6,
126 | crossInfluencedByMaxCount: 6
127 | },
128 | {
129 | collapsed: true
130 | }
131 | );
132 |
133 | useEffect(() => {
134 | setData(
135 | dataGenerator(
136 | nodeCount,
137 | yearRange,
138 | tagMaxCount,
139 | categoryMaxCount,
140 | columnCount,
141 | [color1, color2, color3, color4, color5],
142 | influencedMaxCount,
143 | influencedByMaxCount,
144 | crossInfluencedMaxCount,
145 | crossInfluencedByMaxCount
146 | )
147 | );
148 | }, [
149 | nodeCount,
150 | yearRange,
151 | tagMaxCount,
152 | categoryMaxCount,
153 | columnCount,
154 | color1,
155 | color2,
156 | color3,
157 | color4,
158 | color5,
159 | influencedMaxCount,
160 | influencedByMaxCount,
161 | crossInfluencedMaxCount,
162 | crossInfluencedByMaxCount
163 | ]);
164 |
165 | return (
166 | <>
167 |
168 |
175 |
176 | );
177 | }
178 |
--------------------------------------------------------------------------------
/src/stores/useTimeline.ts:
--------------------------------------------------------------------------------
1 | import create from 'zustand';
2 |
3 | type Filters = {
4 | tags?: Set;
5 | categories?: Set;
6 | yearRange?: string[];
7 | };
8 | type UseTimeline = {
9 | filters: Filters;
10 | setFilters(filters: Filters): void;
11 | };
12 |
13 | export const useTimeline = create((set) => {
14 | return {
15 | filters: {},
16 | setFilters: (filters) => set({ filters })
17 | };
18 | });
19 |
--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body {
7 | padding: 0;
8 | margin: 0;
9 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
10 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
11 | }
12 |
13 | a {
14 | color: inherit;
15 | text-decoration: none;
16 | }
17 |
18 | * {
19 | box-sizing: border-box;
20 | }
21 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | content: [
3 | './src/pages/**/*.{js,ts,jsx,tsx}',
4 | './src/components/**/*.{js,ts,jsx,tsx}',
5 | ],
6 | theme: {
7 | extend: {},
8 | },
9 | plugins: [],
10 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "baseUrl": "."
18 | },
19 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src", "src/@types"],
20 | "exclude": ["node_modules"]
21 | }
22 |
--------------------------------------------------------------------------------
38 | 
39 |