From f6d4445534b1fcb29fb9c6ff0ed06f60eca64c2c Mon Sep 17 00:00:00 2001
From: CHAE <dbscogus4467@naver.com>
Date: Wed, 13 Dec 2023 17:53:00 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20D3=20=ED=88=B4=ED=8C=81=20=EB=A0=8C?=
 =?UTF-8?q?=EB=8D=94=EB=A7=81=20=ED=95=A8=EC=88=98=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#254]
---
 .../src/components/graph/renderTooltip.ts     | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 packages/frontend/src/components/graph/renderTooltip.ts

diff --git a/packages/frontend/src/components/graph/renderTooltip.ts b/packages/frontend/src/components/graph/renderTooltip.ts
new file mode 100644
index 00000000..3bbe1a9e
--- /dev/null
+++ b/packages/frontend/src/components/graph/renderTooltip.ts
@@ -0,0 +1,83 @@
+import * as d3 from "d3";
+
+import color from "../../design-system/tokens/color";
+
+import { InitialDataProps } from "./parsing";
+
+interface TooltipProps {
+  text: string;
+  value: string;
+  id: string;
+}
+
+export default function renderTooltip(
+  svg,
+  d: d3.HierarchyPointNode<InitialDataProps>,
+) {
+  const tooltipStyle = {
+    width: 220,
+    height: 40,
+    borderRadius: 5,
+    position: `translate(${d.x - 110},${d.y - 60})`,
+  };
+
+  const transparentRectPosition = "translate(85, 40)";
+
+  const tooltipDataFormat = [
+    {
+      text: "Commit Hash: ",
+      value: d.data.id.slice(0, 7),
+      id: "text",
+    },
+    {
+      text: "Commit Message: ",
+      value: d.data.message,
+      id: "value",
+    },
+  ];
+
+  // hover 시 보이는 툴팁
+  const tooltip = svg
+    .select("#node")
+    .append("g")
+    .attr("id", "tooltip")
+    .attr("tabindex", 0)
+    .attr("transform", tooltipStyle.position);
+
+  tooltip
+    .append("rect")
+    .attr("width", tooltipStyle.width)
+    .attr("height", tooltipStyle.height)
+    .attr("rx", tooltipStyle.borderRadius)
+    .attr("ry", tooltipStyle.borderRadius)
+    .attr("fill", color.$semantic.bgDefault)
+    .attr("stroke", color.$scale.grey300);
+
+  // 투명한 네모를 위에 위치시키기
+  tooltip
+    .append("rect")
+    .attr("width", 30)
+    .attr("height", 30)
+    // 요기나
+    .attr("fill", "transparent")
+    // 요기 바꿔보심 돼여
+    // .attr("stroke", color.$scale.grey300)
+    .attr("transform", transparentRectPosition);
+
+  tooltip
+    .append("text")
+    .attr("x", 0)
+    .attr("y", 16.5)
+    .selectAll("tspan")
+    .data(tooltipDataFormat)
+    .enter()
+    .append("tspan")
+    .attr("x", 6)
+    .attr("dy", (_: TooltipProps, index: number) => index * 15) // Adjust the line height as needed
+    .text((tooltipData: TooltipProps) => tooltipData.text)
+    .attr("fill", color.$scale.grey600)
+    .append("tspan")
+    .attr("fill", color.$scale.grey700)
+    .text((tooltipData: TooltipProps) => tooltipData.value)
+    .attr("id", (tooltipData: TooltipProps) => tooltipData.id);
+}