커밋

[#254]
boostcampwm2023 · Dec 12, 2023 · ecfdba9 · ecfdba9
1 parent 67e5325
commit ecfdba9
Showing 1 changed file with 50 additions and 19 deletions.
diff --git a/packages/frontend/src/components/graph/Graph.tsx b/packages/frontend/src/components/graph/Graph.tsx
@@ -7,7 +7,7 @@ import { QuizGitGraphCommit } from "../../types/quiz";
 import fillColor from "./fillColor";
 import { InitialDataProps, parsingMultipleParents } from "./parsing";
 
-const { grey500 } = color.$scale;
+const { grey300, grey500 } = color.$scale;
 
 const DURATION = 200;
 
@@ -45,24 +45,6 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
   const treeData = treeLayout(rootNode);
   fillColor(treeData);
 
-  // Add text next to each node
-  svg
-    .select("#text")
-    .selectAll("text")
-    .data(treeData.descendants())
-    .join(
-      (enter) => enter.append("text").style("opacity", 0),
-      (update) => update,
-      (exit) =>
-        exit.transition().duration(DURATION).style("opacity", 0).remove(),
-    )
-    .text((d) => d.data.message)
-    .attr("x", (d) => d.x + 20)
-    .attr("y", (d) => d.y + 5)
-    .transition()
-    .duration(DURATION)
-    .style("opacity", 1);
-
   additionalLinks.forEach(({ id, parentId }) => {
     const sourceNode = treeData.descendants().filter((d) => d.id === id)[0];
     const targetNode = treeData
@@ -106,6 +88,55 @@ function renderD3(svgRef: RefObject<SVGGElement>, data: InitialDataProps[]) {
       (exit) =>
         exit.transition().duration(DURATION).style("opacity", 0).remove(),
     )
+    .on("mouseover", (event, d) => {
+      // Show tooltip on hover
+      const tooltip = svg
+        .append("g")
+        .attr("id", "tooltip")
+        .attr("transform", `translate(${d.x + 25},${d.y - 30})`);
+      // Add mouseover and mouseout events for the tooltip
+      tooltip
+        .append("rect")
+        .attr("width", 235)
+        .attr("height", 40)
+        .attr("rx", 5) // Set the x-axis radius for rounded corners
+        .attr("ry", 5) // Set the y-axis radius for rounded corners
+        .attr("fill", color.$semantic.bgDefault)
+        .attr("stroke", grey300);
+      tooltip
+        .append("text")
+        .attr("x", 0)
+        .attr("y", 16.5)
+        .selectAll("tspan")
+        .data([
+          {
+            text: "Commit Hash: ",
+            value: d.data.id.slice(0, 7),
+          },
+          {
+            text: "Commit Message: ",
+            value: d.data.message,
+          },
+        ])
+        .enter()
+        .append("tspan")
+        .attr("x", 6)
+        .attr("dy", (_, i) => i * 15) // Adjust the line height as needed
+        .text((tooltipData) => tooltipData.text)
+        .attr("fill", color.$scale.grey600)
+        .append("tspan")
+        .attr("fill", color.$scale.grey700)
+        .text((tooltipData) => tooltipData.value);
+      d3.select(event.currentTarget)
+        .attr("stroke", color.$scale.grey500)
+        .attr("stroke-width", 3);
+    })
+    .on("mouseout", (event) => {
+      svg.select("#tooltip").remove();
+      d3.select(event.currentTarget)
+        .attr("stroke", color.$scale.grey500)
+        .attr("stroke-width", 1);
+    })
     .attr("cx", (d) => d.x)
     .attr("cy", (d) => d.y)
     .attr("r", 13)