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 (
+
+ );
}
-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}
+
+
+ {""}
+
+
);
}