From 02846d9459dcee4d7d1fa6dedd39b7cfedd68df9 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 27 Jul 2022 20:43:23 -0400 Subject: [PATCH 01/12] Initial component --- components/Timeline.tsx | 11 +++++++++++ components/TimelineSection.tsx | 5 +++++ 2 files changed, 16 insertions(+) create mode 100644 components/Timeline.tsx create mode 100644 components/TimelineSection.tsx diff --git a/components/Timeline.tsx b/components/Timeline.tsx new file mode 100644 index 0000000..709d0e3 --- /dev/null +++ b/components/Timeline.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +import TimelineSection from "./TimelineSection"; + +interface TimelineProps { + children: typeof TimelineSection; +} + +export default function Timeline(props: TimelineProps) { + return
; +} diff --git a/components/TimelineSection.tsx b/components/TimelineSection.tsx new file mode 100644 index 0000000..5fa1384 --- /dev/null +++ b/components/TimelineSection.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function TimelineSection() { + return
; +} -- 2.39.2 From 3f5439cb7d53088f0c3b4a4b07b82dfbe2f16a6c Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Tue, 9 Aug 2022 18:38:28 -0400 Subject: [PATCH 02/12] Add mock data --- components/Timeline.tsx | 22 +++++++++++++++++++--- components/TimelineSection.tsx | 5 ----- data/mocks.ts | 27 +++++++++++++++++++++++++++ pages/playground.tsx | 2 ++ 4 files changed, 48 insertions(+), 8 deletions(-) delete mode 100644 components/TimelineSection.tsx diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 709d0e3..1b37c64 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -1,11 +1,27 @@ import React from "react"; -import TimelineSection from "./TimelineSection"; +interface TimelineData { + time: string; + text: string; +} interface TimelineProps { - children: typeof TimelineSection; + data: TimelineData[]; + /** Distance between consecutive nodes on timeline, in pixels */ + nodeGap?: number; + /** Whether the time is transformed to uppercase */ + isTimeUppercase?: boolean; + className?: string; } -export default function Timeline(props: TimelineProps) { +export default function Timeline({ + data, + nodeGap = 40, + isTimeUppercase = true, +}: TimelineProps) { + return
; +} + +function TimelineSection() { return
; } diff --git a/components/TimelineSection.tsx b/components/TimelineSection.tsx deleted file mode 100644 index 5fa1384..0000000 --- a/components/TimelineSection.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from "react"; - -export default function TimelineSection() { - return
; -} diff --git a/data/mocks.ts b/data/mocks.ts index 162f5aa..971363a 100644 --- a/data/mocks.ts +++ b/data/mocks.ts @@ -64,3 +64,30 @@ export const moreMockCategoricalData = [ { key: "Ada", value: 2.21 }, { key: "Dart", value: 2.21 }, ]; + +export const mockTimelineData = [ + { + time: "Fall 2018", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", + }, + { + time: "Winter 2019", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia", + }, + { + time: "Spring 2019", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupta", + }, + { + time: "Fall 2020", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", + }, + { + time: "Winter 2020", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", + }, + { + time: "Spring 2020", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre", + }, +]; diff --git a/pages/playground.tsx b/pages/playground.tsx index 5707edb..58197f9 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -1,3 +1,4 @@ +import Timeline from "@/components/Timeline"; import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph"; import { mockCategoricalData, moreMockCategoricalData } from "data/mocks"; import React from "react"; @@ -59,6 +60,7 @@ export default function Home() { value: word.value, }))} /> + ); } -- 2.39.2 From 42638cbdb5d4002bfa373a76fcaa05e486205f21 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 17 Aug 2022 22:45:06 -0400 Subject: [PATCH 03/12] Add subject, label, annotation --- components/Timeline.module.css | 21 +++++ components/Timeline.tsx | 150 +++++++++++++++++++++++++++++++-- data/mocks.ts | 18 ++-- package-lock.json | 134 ++++++++++++++++++++++++++++- package.json | 3 +- pages/playground.tsx | 14 ++- 6 files changed, 320 insertions(+), 20 deletions(-) create mode 100644 components/Timeline.module.css diff --git a/components/Timeline.module.css b/components/Timeline.module.css new file mode 100644 index 0000000..0f3c12c --- /dev/null +++ b/components/Timeline.module.css @@ -0,0 +1,21 @@ +.timebox { + margin: 0; +} + +.timebox:hover { + background-color: blueviolet; +} + +.timeboxHover { + background-color: blue; +} + +.textbox { + background-color: maroon; + padding: 5px; +} + +.textboxText { + overflow-y: scroll; + word-break: break-all; +} \ No newline at end of file diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 1b37c64..6cc1d09 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -1,4 +1,14 @@ -import React from "react"; +import { + Connector, + CircleSubject, + Annotation, + HtmlLabel, +} from "@visx/annotation"; +import { Group } from "@visx/group"; +import { LinePath } from "@visx/shape"; +import React, { useState } from "react"; + +import styles from "./Timeline.module.css"; interface TimelineData { time: string; @@ -7,21 +17,149 @@ interface TimelineData { interface TimelineProps { data: TimelineData[]; - /** Distance between consecutive nodes on timeline, in pixels */ + /** Width of the entire timeline, in pixels. */ + width: number; + /** Height of the entire timeline, in pixels. */ + height: number; + /** Padding top and bottom, in pixels. */ + padding: number; + /** Location of timeline width-wise, in pixels. Default is width / 2. */ + timelinePosition?: number; + /** Distance between consecutive nodes on timeline, in pixels. Default is evenly spaced. padding is not calculated if user specifies this value. */ nodeGap?: number; /** Whether the time is transformed to uppercase */ isTimeUppercase?: boolean; + /** Offset between the line and the time label, in pixels (negative for left offset, positive for right offset). */ + timeXOffset?: number; + /** Width of time label, in pixels. */ + timeWidth?: number; + /** Offset between the line and the text label, in pixels (negative for left offset, positive for right offset). */ + textXOffset?: number; + /** Width of text label, in pixels. */ + textWidth?: number; + /** Height of text label, in pixels. */ + textHeight?: number; className?: string; } export default function Timeline({ data, - nodeGap = 40, + width, + height, + padding = 20, + timelinePosition = width / 2, + nodeGap = data.length > 1 + ? (height - 2 * padding) / (data.length - 1) + : height - 2 * padding, isTimeUppercase = true, + timeXOffset = -30, + timeWidth = 100, + textXOffset = 30, + textWidth = 100, + textHeight = 100, + className, }: TimelineProps) { - return
; + const dataWithPositions = data.map((data, i) => ({ + x: timelinePosition, + y: i * nodeGap + padding, + time: isTimeUppercase ? data.time.toUpperCase() : data.time, + text: data.text, + })); + + return ( + + [data.x, data.y])} + stroke="#fff" + strokeWidth={10} + /> + {dataWithPositions.map((data, i) => ( + + ))} + + ); } -function TimelineSection() { - return
; +interface TimelineAnnotationProps { + positionData: { + x: number; + y: number; + time: string; + text: string; + }; + timeXOffset: number; + timeWidth: number; + textXOffset: number; + textWidth: number; + textHeight: number; +} + +function TimelineAnnotation({ + positionData, + timeXOffset, + timeWidth, + textXOffset, + textWidth, + textHeight, +}: TimelineAnnotationProps) { + const [hover, setHover] = useState(false); + + function handleMouseEnter() { + setHover(true); + } + + function handleMouseLeave() { + setHover(false); + } + console.log(hover); + return ( + + + + +

+ {positionData.time} +

+ + + + + + + +
+

+ {positionData.text} +

+
+ + + + ); } diff --git a/data/mocks.ts b/data/mocks.ts index 971363a..3fdb9cc 100644 --- a/data/mocks.ts +++ b/data/mocks.ts @@ -67,20 +67,20 @@ export const moreMockCategoricalData = [ export const mockTimelineData = [ { - time: "Fall 2018", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", + time: "Problem 1", + text: "Overflow-y scroll text not supported by svg", }, { - time: "Winter 2019", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia", + time: "Problem 2", + text: "Hover effects don't seem to work with ", }, { - time: "Spring 2019", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volupta", + time: "Problem 3", + text: "Need to add a max-height to these boxes", }, { - time: "Fall 2020", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", + time: "Problem 4", + text: "Styling", }, { time: "Winter 2020", @@ -88,6 +88,6 @@ export const mockTimelineData = [ }, { time: "Spring 2020", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in repre", + text: "Lorem ipsum doldolor in repre", }, ]; diff --git a/package-lock.json b/package-lock.json index 7f2a1f1..f9a2aec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,9 +5,9 @@ "requires": true, "packages": { "": { - "name": "cs-2022-class-profile", "version": "0.1.0", "dependencies": { + "@visx/annotation": "^2.12.2", "@visx/axis": "^2.10.0", "@visx/event": "^2.6.0", "@visx/grid": "^2.10.0", @@ -886,6 +886,63 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@visx/annotation": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", + "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", + "dependencies": { + "@types/react": "*", + "@visx/drag": "2.10.0", + "@visx/group": "2.10.0", + "@visx/point": "2.6.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "peerDependencies": { + "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/annotation/node_modules/@visx/shape": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", + "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", + "dependencies": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "2.1.0", + "@visx/group": "2.10.0", + "@visx/scale": "2.2.2", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, + "node_modules/@visx/annotation/node_modules/@visx/text": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", + "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", + "dependencies": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "classnames": "^2.3.1", + "lodash": "^4.17.21", + "prop-types": "^15.7.2", + "reduce-css-calc": "^1.3.0" + }, + "peerDependencies": { + "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/axis": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", @@ -927,6 +984,20 @@ "d3-shape": "^1.0.6" } }, + "node_modules/@visx/drag": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", + "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", + "dependencies": { + "@types/react": "*", + "@visx/event": "2.6.0", + "@visx/point": "2.6.0", + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" + } + }, "node_modules/@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", @@ -4975,6 +5046,56 @@ "eslint-visitor-keys": "^3.3.0" } }, + "@visx/annotation": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", + "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", + "requires": { + "@types/react": "*", + "@visx/drag": "2.10.0", + "@visx/group": "2.10.0", + "@visx/point": "2.6.0", + "@visx/shape": "2.12.2", + "@visx/text": "2.12.2", + "classnames": "^2.3.1", + "prop-types": "^15.5.10", + "react-use-measure": "^2.0.4" + }, + "dependencies": { + "@visx/shape": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", + "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", + "requires": { + "@types/d3-path": "^1.0.8", + "@types/d3-shape": "^1.3.1", + "@types/lodash": "^4.14.172", + "@types/react": "*", + "@visx/curve": "2.1.0", + "@visx/group": "2.10.0", + "@visx/scale": "2.2.2", + "classnames": "^2.3.1", + "d3-path": "^1.0.5", + "d3-shape": "^1.2.0", + "lodash": "^4.17.21", + "prop-types": "^15.5.10" + } + }, + "@visx/text": { + "version": "2.12.2", + "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", + "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", + "requires": { + "@types/lodash": "^4.14.172", + "@types/react": "*", + "classnames": "^2.3.1", + "lodash": "^4.17.21", + "prop-types": "^15.7.2", + "reduce-css-calc": "^1.3.0" + } + } + } + }, "@visx/axis": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", @@ -5009,6 +5130,17 @@ "d3-shape": "^1.0.6" } }, + "@visx/drag": { + "version": "2.10.0", + "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", + "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", + "requires": { + "@types/react": "*", + "@visx/event": "2.6.0", + "@visx/point": "2.6.0", + "prop-types": "^15.5.10" + } + }, "@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", diff --git a/package.json b/package.json index 6358840..4dc64b2 100644 --- a/package.json +++ b/package.json @@ -15,15 +15,16 @@ "lint:fix": "eslint \"{pages,components}/**/*.{js,ts,tsx,jsx}\" --quiet --fix" }, "dependencies": { + "@visx/annotation": "^2.12.2", "@visx/axis": "^2.10.0", "@visx/event": "^2.6.0", "@visx/grid": "^2.10.0", "@visx/group": "^2.10.0", "@visx/scale": "^2.2.2", "@visx/shape": "^2.10.0", + "@visx/text": "^2.10.0", "@visx/tooltip": "^2.10.0", "@visx/wordcloud": "^2.10.0", - "@visx/text": "^2.10.0", "next": "12.1.6", "react": "18.1.0", "react-dom": "18.1.0" diff --git a/pages/playground.tsx b/pages/playground.tsx index 58197f9..0563c88 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -1,8 +1,13 @@ -import Timeline from "@/components/Timeline"; import { BarGraphHorizontal, BarGraphVertical } from "components/BarGraph"; -import { mockCategoricalData, moreMockCategoricalData } from "data/mocks"; +import { + mockCategoricalData, + moreMockCategoricalData, + mockTimelineData, +} from "data/mocks"; import React from "react"; +import Timeline from "@/components/Timeline"; + import { ColorPalette } from "../components/ColorPalette"; import { WordCloud } from "../components/WordCloud"; @@ -60,7 +65,10 @@ export default function Home() { value: word.value, }))} /> - +

+ {""} +

+ ); } -- 2.39.2 From c1b8ae469fb8836e5b6cd6a49ef5bd16d368e3ff Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Sun, 21 Aug 2022 05:58:48 -0400 Subject: [PATCH 04/12] Redo everything --- components/Timeline.module.css | 80 +++++++++++-- components/Timeline.tsx | 210 +++++++++++++++------------------ data/mocks.ts | 24 ++-- pages/playground.tsx | 2 +- 4 files changed, 174 insertions(+), 142 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index 0f3c12c..30b0d47 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -1,21 +1,79 @@ -.timebox { - margin: 0; +.wrapper { + position: relative; } -.timebox:hover { - background-color: blueviolet; +.line { + position: absolute; + width: 5px; + background-color: var(--secondary-accent); } -.timeboxHover { - background-color: blue; +.timelineSections { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 20px; } -.textbox { - background-color: maroon; +.timelineSection { + width: 100%; + height: inherit; + display: flex; + flex-direction: row; + justify-content: center; +} + +.time { + margin: 0px; + text-align: right; + font-size: 30px; + font-weight: 700; + color: var(--secondary-accent); + word-wrap: break-word; +} + +.timeHover { + color: var(--secondary-accent-light); +} + +.circle { + margin-left: 2px; + width: 30px; + height: 30px; + border-radius: 30px; + background-color: var(--secondary-accent); + box-shadow: 0px 0px 30px var(--secondary-accent); + display: flex; + justify-content: center; + align-items: center; +} + +.innerCircle { + width: 15px; + height: 15px; + border-radius: 15px; + background-color: var(--label); +} + +.text { + position: absolute; + margin: 0px; + font-size: 20px; + font-weight: 700; + color: var(--label); + background-color: var(--card-background); + position: relative; + height: fit-content; + word-wrap: break-word; + border-radius: 10px; padding: 5px; + box-sizing: border-box; } -.textboxText { - overflow-y: scroll; - word-break: break-all; +.textHover { + border: 2px solid var(--secondary-accent-light); + box-shadow: 0px 0px 20px var(--secondary-accent); } \ No newline at end of file diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 6cc1d09..b7a3082 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -1,11 +1,3 @@ -import { - Connector, - CircleSubject, - Annotation, - HtmlLabel, -} from "@visx/annotation"; -import { Group } from "@visx/group"; -import { LinePath } from "@visx/shape"; import React, { useState } from "react"; import styles from "./Timeline.module.css"; @@ -21,24 +13,14 @@ interface TimelineProps { width: number; /** Height of the entire timeline, in pixels. */ height: number; - /** Padding top and bottom, in pixels. */ - padding: number; - /** Location of timeline width-wise, in pixels. Default is width / 2. */ - timelinePosition?: number; - /** Distance between consecutive nodes on timeline, in pixels. Default is evenly spaced. padding is not calculated if user specifies this value. */ - nodeGap?: number; /** Whether the time is transformed to uppercase */ isTimeUppercase?: boolean; - /** Offset between the line and the time label, in pixels (negative for left offset, positive for right offset). */ - timeXOffset?: number; /** Width of time label, in pixels. */ timeWidth?: number; - /** Offset between the line and the text label, in pixels (negative for left offset, positive for right offset). */ - textXOffset?: number; /** Width of text label, in pixels. */ textWidth?: number; - /** Height of text label, in pixels. */ - textHeight?: number; + /** Distance between labels to middle line, in pixels. */ + labelsOffset?: number; className?: string; } @@ -46,120 +28,112 @@ export default function Timeline({ data, width, height, - padding = 20, - timelinePosition = width / 2, - nodeGap = data.length > 1 - ? (height - 2 * padding) / (data.length - 1) - : height - 2 * padding, isTimeUppercase = true, - timeXOffset = -30, - timeWidth = 100, - textXOffset = 30, - textWidth = 100, - textHeight = 100, + timeWidth = 200, + textWidth = 300, + labelsOffset = 50, className, }: TimelineProps) { - const dataWithPositions = data.map((data, i) => ({ - x: timelinePosition, - y: i * nodeGap + padding, - time: isTimeUppercase ? data.time.toUpperCase() : data.time, - text: data.text, - })); - return ( - - [data.x, data.y])} - stroke="#fff" - strokeWidth={10} - /> - {dataWithPositions.map((data, i) => ( - - ))} - +
+
+
+ {data.map((datum) => ( + + ))} +
+
); } -interface TimelineAnnotationProps { - positionData: { - x: number; - y: number; - time: string; - text: string; - }; - timeXOffset: number; +interface TimelineSectionProps { + datum: TimelineData; + width: number; + isTimeUppercase: boolean; timeWidth: number; - textXOffset: number; textWidth: number; - textHeight: number; + labelsOffset: number; } -function TimelineAnnotation({ - positionData, - timeXOffset, +function TimelineSection({ + datum, + width, + isTimeUppercase, timeWidth, - textXOffset, + textWidth, - textHeight, -}: TimelineAnnotationProps) { - const [hover, setHover] = useState(false); + labelsOffset, +}: TimelineSectionProps) { + const [onHover, setHover] = useState(false); - function handleMouseEnter() { + const handleMouseEnter = () => { setHover(true); - } + console.log(onHover); + }; + const handleMouseLeave = () => setHover(false); - function handleMouseLeave() { - setHover(false); - } - console.log(hover); + // divs for customizable margins are necessary, absolute positioning loses vertical flex-box functionality return ( - - - - -

- {positionData.time} -

- - - - - - - -
-

- {positionData.text} -

-
- - - +
+
+
+ {isTimeUppercase ? datum.time.toUpperCase() : datum.time} +
+
+
+
+
+
+
+ {datum.text} +
+
+
); } diff --git a/data/mocks.ts b/data/mocks.ts index 3fdb9cc..2d733dd 100644 --- a/data/mocks.ts +++ b/data/mocks.ts @@ -67,27 +67,27 @@ export const moreMockCategoricalData = [ export const mockTimelineData = [ { - time: "Problem 1", - text: "Overflow-y scroll text not supported by svg", + time: "Fall 2020", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", }, { - time: "Problem 2", - text: "Hover effects don't seem to work with ", + time: "Winter 2021", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad", }, { - time: "Problem 3", - text: "Need to add a max-height to these boxes", + time: "Spring 2021", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor i", }, { - time: "Problem 4", - text: "Styling", + time: "Fall 2021", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proid", }, { - time: "Winter 2020", - text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit,", + time: "Winter 2022", + text: "Lorem ipsum dolor sit amet, consectetur adipi", }, { - time: "Spring 2020", - text: "Lorem ipsum doldolor in repre", + time: "Spring 2022", + text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut en", }, ]; diff --git a/pages/playground.tsx b/pages/playground.tsx index 0563c88..87dc944 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -68,7 +68,7 @@ export default function Home() {

{""}

- + ); } -- 2.39.2 From 59b476cd5efcc6e58588dd3b83abc6c74caa015b Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Sun, 21 Aug 2022 06:02:57 -0400 Subject: [PATCH 05/12] CSS cleanup --- components/Timeline.module.css | 8 +++----- pages/playground.tsx | 2 +- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index 30b0d47..ab1ed8f 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -59,17 +59,15 @@ } .text { - position: absolute; + height: fit-content; margin: 0px; + padding: 5px; + border-radius: 10px; font-size: 20px; font-weight: 700; color: var(--label); background-color: var(--card-background); - position: relative; - height: fit-content; word-wrap: break-word; - border-radius: 10px; - padding: 5px; box-sizing: border-box; } diff --git a/pages/playground.tsx b/pages/playground.tsx index 87dc944..0221beb 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -68,7 +68,7 @@ export default function Home() {

{""}

- + ); } -- 2.39.2 From 5f86a6d74c462918a7496fee5b1bc615ccfebb71 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Sun, 21 Aug 2022 06:07:48 -0400 Subject: [PATCH 06/12] npm uninstall @visx/annotation --- package-lock.json | 133 ---------------------------------------------- package.json | 1 - 2 files changed, 134 deletions(-) diff --git a/package-lock.json b/package-lock.json index f9a2aec..d0d5fd0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,7 +7,6 @@ "": { "version": "0.1.0", "dependencies": { - "@visx/annotation": "^2.12.2", "@visx/axis": "^2.10.0", "@visx/event": "^2.6.0", "@visx/grid": "^2.10.0", @@ -886,63 +885,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@visx/annotation": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", - "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", - "dependencies": { - "@types/react": "*", - "@visx/drag": "2.10.0", - "@visx/group": "2.10.0", - "@visx/point": "2.6.0", - "@visx/shape": "2.12.2", - "@visx/text": "2.12.2", - "classnames": "^2.3.1", - "prop-types": "^15.5.10", - "react-use-measure": "^2.0.4" - }, - "peerDependencies": { - "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, - "node_modules/@visx/annotation/node_modules/@visx/shape": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", - "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", - "dependencies": { - "@types/d3-path": "^1.0.8", - "@types/d3-shape": "^1.3.1", - "@types/lodash": "^4.14.172", - "@types/react": "*", - "@visx/curve": "2.1.0", - "@visx/group": "2.10.0", - "@visx/scale": "2.2.2", - "classnames": "^2.3.1", - "d3-path": "^1.0.5", - "d3-shape": "^1.2.0", - "lodash": "^4.17.21", - "prop-types": "^15.5.10" - }, - "peerDependencies": { - "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, - "node_modules/@visx/annotation/node_modules/@visx/text": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", - "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", - "dependencies": { - "@types/lodash": "^4.14.172", - "@types/react": "*", - "classnames": "^2.3.1", - "lodash": "^4.17.21", - "prop-types": "^15.7.2", - "reduce-css-calc": "^1.3.0" - }, - "peerDependencies": { - "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, "node_modules/@visx/axis": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", @@ -984,20 +926,6 @@ "d3-shape": "^1.0.6" } }, - "node_modules/@visx/drag": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", - "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", - "dependencies": { - "@types/react": "*", - "@visx/event": "2.6.0", - "@visx/point": "2.6.0", - "prop-types": "^15.5.10" - }, - "peerDependencies": { - "react": "^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0" - } - }, "node_modules/@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", @@ -5046,56 +4974,6 @@ "eslint-visitor-keys": "^3.3.0" } }, - "@visx/annotation": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/annotation/-/annotation-2.12.2.tgz", - "integrity": "sha512-NhIexNL2QJKc5escOpCe5apNdqBUqmQzGLqc40L7GslYuS3KgxtMa4tdpI+WCct8b/EK3fyQmN9oqG0H5HTY9A==", - "requires": { - "@types/react": "*", - "@visx/drag": "2.10.0", - "@visx/group": "2.10.0", - "@visx/point": "2.6.0", - "@visx/shape": "2.12.2", - "@visx/text": "2.12.2", - "classnames": "^2.3.1", - "prop-types": "^15.5.10", - "react-use-measure": "^2.0.4" - }, - "dependencies": { - "@visx/shape": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/shape/-/shape-2.12.2.tgz", - "integrity": "sha512-4gN0fyHWYXiJ+Ck8VAazXX0i8TOnLJvOc5jZBnaJDVxgnSIfCjJn0+Nsy96l9Dy/bCMTh4DBYUBv9k+YICBUOA==", - "requires": { - "@types/d3-path": "^1.0.8", - "@types/d3-shape": "^1.3.1", - "@types/lodash": "^4.14.172", - "@types/react": "*", - "@visx/curve": "2.1.0", - "@visx/group": "2.10.0", - "@visx/scale": "2.2.2", - "classnames": "^2.3.1", - "d3-path": "^1.0.5", - "d3-shape": "^1.2.0", - "lodash": "^4.17.21", - "prop-types": "^15.5.10" - } - }, - "@visx/text": { - "version": "2.12.2", - "resolved": "https://registry.npmjs.org/@visx/text/-/text-2.12.2.tgz", - "integrity": "sha512-Sv9YEolggfv2Nf6+l28ESG3VXVR1+s4u/Cz17QpgOxygcbOM8LfLtriWtBsBMKdMbYKeUpoUro0clx55TUwzew==", - "requires": { - "@types/lodash": "^4.14.172", - "@types/react": "*", - "classnames": "^2.3.1", - "lodash": "^4.17.21", - "prop-types": "^15.7.2", - "reduce-css-calc": "^1.3.0" - } - } - } - }, "@visx/axis": { "version": "2.10.0", "resolved": "https://registry.npmjs.org/@visx/axis/-/axis-2.10.0.tgz", @@ -5130,17 +5008,6 @@ "d3-shape": "^1.0.6" } }, - "@visx/drag": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/@visx/drag/-/drag-2.10.0.tgz", - "integrity": "sha512-1G7ABfue8/Jn7tHxEPsDK+84Jbgej3Cqgi8FHaV15XlDRlaWs/fDNz4ECdJUGvhXuXLYCpaWFzhD1HaSEDJL1g==", - "requires": { - "@types/react": "*", - "@visx/event": "2.6.0", - "@visx/point": "2.6.0", - "prop-types": "^15.5.10" - } - }, "@visx/event": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz", diff --git a/package.json b/package.json index 4dc64b2..814c0d7 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,6 @@ "lint:fix": "eslint \"{pages,components}/**/*.{js,ts,tsx,jsx}\" --quiet --fix" }, "dependencies": { - "@visx/annotation": "^2.12.2", "@visx/axis": "^2.10.0", "@visx/event": "^2.6.0", "@visx/grid": "^2.10.0", -- 2.39.2 From 3de0f67ccb822f964deab0ad5b02b8bbc478ce33 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Thu, 25 Aug 2022 18:21:26 -0400 Subject: [PATCH 07/12] px -> rem --- components/Timeline.module.css | 36 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index ab1ed8f..ddf87a7 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -4,7 +4,7 @@ .line { position: absolute; - width: 5px; + width: calc(5rem / 16); background-color: var(--secondary-accent); } @@ -15,7 +15,7 @@ display: flex; flex-direction: column; justify-content: space-around; - gap: 20px; + gap: calc(20rem / 16); } .timelineSection { @@ -27,9 +27,9 @@ } .time { - margin: 0px; + margin: 0; text-align: right; - font-size: 30px; + font-size: calc(30rem / 16); font-weight: 700; color: var(--secondary-accent); word-wrap: break-word; @@ -40,30 +40,30 @@ } .circle { - margin-left: 2px; - width: 30px; - height: 30px; - border-radius: 30px; + margin-left: calc(2rem / 16); + width: calc(30rem / 16); + height: calc(30rem / 16); + border-radius: calc(30rem / 16); background-color: var(--secondary-accent); - box-shadow: 0px 0px 30px var(--secondary-accent); + box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent); display: flex; justify-content: center; align-items: center; } .innerCircle { - width: 15px; - height: 15px; - border-radius: 15px; + width: calc(15rem / 16); + height: calc(15rem / 16); + border-radius: calc(15rem / 16); background-color: var(--label); } .text { height: fit-content; - margin: 0px; - padding: 5px; - border-radius: 10px; - font-size: 20px; + margin: 0; + padding: calc(15rem / 16); + border-radius: calc(10rem / 16); + font-size: calc(20rem / 16); font-weight: 700; color: var(--label); background-color: var(--card-background); @@ -72,6 +72,6 @@ } .textHover { - border: 2px solid var(--secondary-accent-light); - box-shadow: 0px 0px 20px var(--secondary-accent); + border: calc(2rem / 16) solid var(--secondary-accent-light); + box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent); } \ No newline at end of file -- 2.39.2 From 4f6f3265fd538b0e957b91e3dfd96521e8d0fed2 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 31 Aug 2022 22:34:46 -0400 Subject: [PATCH 08/12] Code review fixes --- components/Timeline.module.css | 31 ++++++------ components/Timeline.tsx | 93 ++++++++++++++++++++++------------ pages/playground.tsx | 2 +- 3 files changed, 77 insertions(+), 49 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index ddf87a7..20f5bee 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -1,15 +1,17 @@ .wrapper { position: relative; + height: 100%; } .line { position: absolute; - width: calc(5rem / 16); + height: 100%; + border-radius: calc(10rem / 16); background-color: var(--secondary-accent); + z-index: -1; } .timelineSections { - position: absolute; width: 100%; height: 100%; display: flex; @@ -20,7 +22,7 @@ .timelineSection { width: 100%; - height: inherit; + height: 100%; display: flex; flex-direction: row; justify-content: center; @@ -35,15 +37,7 @@ word-wrap: break-word; } -.timeHover { - color: var(--secondary-accent-light); -} - .circle { - margin-left: calc(2rem / 16); - width: calc(30rem / 16); - height: calc(30rem / 16); - border-radius: calc(30rem / 16); background-color: var(--secondary-accent); box-shadow: calc(0rem / 16) calc(0rem / 16) calc(30rem / 16) var(--secondary-accent); display: flex; @@ -52,10 +46,8 @@ } .innerCircle { - width: calc(15rem / 16); - height: calc(15rem / 16); - border-radius: calc(15rem / 16); background-color: var(--label); + display: none; } .text { @@ -66,12 +58,21 @@ font-size: calc(20rem / 16); font-weight: 700; color: var(--label); + border: calc(2rem / 16) solid var(--card-background); background-color: var(--card-background); word-wrap: break-word; box-sizing: border-box; } -.textHover { +.timelineSection:hover .time { + color: var(--secondary-accent-light); +} + +.timelineSection:hover .innerCircle { + display: inline; +} + +.timelineSection:hover .text { border: calc(2rem / 16) solid var(--secondary-accent-light); box-shadow: calc(0rem / 16) calc(0rem / 16) calc(20rem / 16) var(--secondary-accent); } \ No newline at end of file diff --git a/components/Timeline.tsx b/components/Timeline.tsx index b7a3082..89ad303 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -11,50 +11,78 @@ interface TimelineProps { data: TimelineData[]; /** Width of the entire timeline, in pixels. */ width: number; - /** Height of the entire timeline, in pixels. */ - height: number; - /** Whether the time is transformed to uppercase */ + /** Whether the time is transformed to uppercase. */ isTimeUppercase?: boolean; + /** Width of the middle timeline line, in pixels */ + lineWidth?: number; + /** Width of the outer circles on the timeline, in pixels. */ + outerCircleWidth?: number; + /** Width of the inner circles on the timeline, in pixels. */ + innerCircleWidth?: number; /** Width of time label, in pixels. */ timeWidth?: number; /** Width of text label, in pixels. */ textWidth?: number; - /** Distance between labels to middle line, in pixels. */ - labelsOffset?: number; + /** Distance between the time label AND the text label to middle line, in pixels. */ + gap?: number; className?: string; } export default function Timeline({ data, width, - height, isTimeUppercase = true, + lineWidth = 5, + outerCircleWidth = 30, + innerCircleWidth = 15, timeWidth = 200, textWidth = 300, - labelsOffset = 50, + gap = 50, className, }: TimelineProps) { + const largerMiddleElemeent = + outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth; + const requestedWidth = + timeWidth + gap + largerMiddleElemeent + gap + textWidth; + if (requestedWidth > width) { + throw new Error( + ` - timeWidth + gap + ${ + outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth" + } + gap + textWidth (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})` + ); + } + if (innerCircleWidth > outerCircleWidth) { + throw new Error( + ` - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})` + ); + } + return (
-
+ style={{ + width: lineWidth, + left: width / 2 - lineWidth / 2, + }} + /> +
{data.map((datum) => ( ))}
@@ -66,74 +94,73 @@ interface TimelineSectionProps { datum: TimelineData; width: number; isTimeUppercase: boolean; + outerCircleWidth: number; + innerCircleWidth: number; timeWidth: number; textWidth: number; - labelsOffset: number; + gap: number; } function TimelineSection({ datum, width, isTimeUppercase, + outerCircleWidth, + innerCircleWidth, timeWidth, - textWidth, - labelsOffset, + gap, }: TimelineSectionProps) { const [onHover, setHover] = useState(false); const handleMouseEnter = () => { setHover(true); - console.log(onHover); }; const handleMouseLeave = () => setHover(false); - // divs for customizable margins are necessary, absolute positioning loses vertical flex-box functionality return ( -
-
+
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
-
+ style={{ + width: innerCircleWidth, + height: innerCircleWidth, + borderRadius: innerCircleWidth, + }} + />
-
{datum.text}
-
); } diff --git a/pages/playground.tsx b/pages/playground.tsx index 0221beb..895cbc3 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -68,7 +68,7 @@ export default function Home() {

{""}

- +
); } -- 2.39.2 From 22af99d7ffacf3e353373acd0ccb4b4c7ba7176c Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 7 Sep 2022 21:03:13 -0400 Subject: [PATCH 09/12] Some code review fixes --- components/Timeline.module.css | 2 -- components/Timeline.tsx | 19 +++---------------- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index 20f5bee..f3bb6ef 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -1,6 +1,5 @@ .wrapper { position: relative; - height: 100%; } .line { @@ -22,7 +21,6 @@ .timelineSection { width: 100%; - height: 100%; display: flex; flex-direction: row; justify-content: center; diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 89ad303..65e81ac 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React from "react"; import styles from "./Timeline.module.css"; @@ -111,30 +111,19 @@ function TimelineSection({ textWidth, gap, }: TimelineSectionProps) { - const [onHover, setHover] = useState(false); - - const handleMouseEnter = () => { - setHover(true); - }; - const handleMouseLeave = () => setHover(false); - return (
{isTimeUppercase ? datum.time.toUpperCase() : datum.time}
{datum.text}
-- 2.39.2 From 4b3829894a74ddd670f6ac9599a06d42b4c3b65c Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 7 Sep 2022 22:15:17 -0400 Subject: [PATCH 10/12] Code review fixes --- components/Timeline.module.css | 1 - components/Timeline.tsx | 15 ++------------- pages/playground.tsx | 2 +- 3 files changed, 3 insertions(+), 15 deletions(-) diff --git a/components/Timeline.module.css b/components/Timeline.module.css index f3bb6ef..6e46450 100644 --- a/components/Timeline.module.css +++ b/components/Timeline.module.css @@ -12,7 +12,6 @@ .timelineSections { width: 100%; - height: 100%; display: flex; flex-direction: column; justify-content: space-around; diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 65e81ac..8abc616 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -9,8 +9,6 @@ interface TimelineData { interface TimelineProps { data: TimelineData[]; - /** Width of the entire timeline, in pixels. */ - width: number; /** Whether the time is transformed to uppercase. */ isTimeUppercase?: boolean; /** Width of the middle timeline line, in pixels */ @@ -30,7 +28,6 @@ interface TimelineProps { export default function Timeline({ data, - width, isTimeUppercase = true, lineWidth = 5, outerCircleWidth = 30, @@ -40,17 +37,9 @@ export default function Timeline({ gap = 50, className, }: TimelineProps) { - const largerMiddleElemeent = + const largerMiddleElement = outerCircleWidth > lineWidth ? outerCircleWidth : lineWidth; - const requestedWidth = - timeWidth + gap + largerMiddleElemeent + gap + textWidth; - if (requestedWidth > width) { - throw new Error( - ` - timeWidth + gap + ${ - outerCircleWidth > lineWidth ? "outerCircleWidth" : "lineWidth" - } + gap + textWidth (${timeWidth} + ${gap} + ${largerMiddleElemeent} + ${gap} + ${textWidth} = ${requestedWidth}) is larger than width (${width})` - ); - } + const width = timeWidth + gap + largerMiddleElement + gap + textWidth; if (innerCircleWidth > outerCircleWidth) { throw new Error( ` - innerCircleWidth (${innerCircleWidth}) is larger than outerCircleWidth (${outerCircleWidth})` diff --git a/pages/playground.tsx b/pages/playground.tsx index 895cbc3..f4d8179 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -68,7 +68,7 @@ export default function Home() {

{""}

- +
); } -- 2.39.2 From b529a24587cee348063995bf3c348b25c19e0548 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 7 Sep 2022 23:07:16 -0400 Subject: [PATCH 11/12] Do not make Timeline default export --- components/Timeline.tsx | 2 +- pages/playground.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Timeline.tsx b/components/Timeline.tsx index 8abc616..643e835 100644 --- a/components/Timeline.tsx +++ b/components/Timeline.tsx @@ -26,7 +26,7 @@ interface TimelineProps { className?: string; } -export default function Timeline({ +export function Timeline({ data, isTimeUppercase = true, lineWidth = 5, diff --git a/pages/playground.tsx b/pages/playground.tsx index dc0cad8..c78c6e5 100644 --- a/pages/playground.tsx +++ b/pages/playground.tsx @@ -13,7 +13,7 @@ import React from "react"; import { PieChart } from "@/components/PieChart"; import { QuotationCarousel } from "@/components/QuotationCarousel"; -import Timeline from "@/components/Timeline"; +import { Timeline } from "@/components/Timeline"; import { ColorPalette } from "../components/ColorPalette"; import { WordCloud } from "../components/WordCloud"; -- 2.39.2 From 039a9fc77cf94734dac74f9ed3979b41a5225008 Mon Sep 17 00:00:00 2001 From: Jared He <66887902+jaredjhe@users.noreply.github.com> Date: Wed, 7 Sep 2022 23:21:17 -0400 Subject: [PATCH 12/12] Merge main --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index 735f3f0..f59b11a 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,7 @@ "@visx/mock-data": "^2.1.2", "@visx/scale": "^2.2.2", "@visx/shape": "^2.10.0", -<<<<<<< HEAD -======= "@visx/stats": "^2.10.0", ->>>>>>> main "@visx/text": "^2.10.0", "@visx/tooltip": "^2.10.0", "@visx/wordcloud": "^2.10.0", -- 2.39.2