From 4ca5ce2cf207b990b62a2b875405ed31f11f11bc Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Wed, 3 Mar 2021 21:41:34 +0800
Subject: [PATCH] feat(codeflower): add tooltip

---
 web/index.html                          |  4 ++++
 web/public/js/graph/cloc/code-flower.js | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/web/index.html b/web/index.html
index b33ec6ba..bc981e1e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -35,6 +35,10 @@
       font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     }
 
+    .nodetext {
+      z-index: 999;
+    }
+
     #commits-tree text {
       font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
     }
diff --git a/web/public/js/graph/cloc/code-flower.js b/web/public/js/graph/cloc/code-flower.js
index abbe81df..9f9b0590 100644
--- a/web/public/js/graph/cloc/code-flower.js
+++ b/web/public/js/graph/cloc/code-flower.js
@@ -9,6 +9,7 @@ function renderCodeFlower(originData, selector) {
     }
   }
 
+  console.log(dMap);
   let jdata = Object.values(dMap)
   let data = CodeSupport.hierarchy(jdata);
 
@@ -63,6 +64,13 @@ function renderCodeFlower(originData, selector) {
 
     node.exit().remove()
 
+
+    let text = svg.append('svg:text')
+      .attr('class', 'nodetext')
+      .attr('dy', 0)
+      .attr('dx', 0)
+      .attr('text-anchor', 'middle');
+
     const nodeEnter = node
       .enter()
       .append('g')
@@ -76,6 +84,14 @@ function renderCodeFlower(originData, selector) {
         .on('start', dragstarted)
         .on('drag', dragged)
         .on('end', dragended))
+      .on("mouseover", function (event, d) {
+        text.attr('transform', 'translate(' + d.x + ',' + d.y + ')')
+          .text(d.data.name + ": " + d.data.size + " loc")
+          .style('display', 'block');
+      })
+      .on("mouseout", function (d) {
+        text.style('display', 'none');
+      });
 
     nodeEnter.append('circle')
       .attr("r", function (d) {
@@ -135,7 +151,6 @@ function renderCodeFlower(originData, selector) {
   }
 
   function clicked(event, d) {
-    console.log(d);
     if (!event.defaultPrevented) {
       if (d.children) {
         d._children = d.children;