From 99b730006657cf5bab97a3a29dd097aad23f4c77 Mon Sep 17 00:00:00 2001
From: Phodal Huang <h@phodal.com>
Date: Fri, 5 Mar 2021 11:54:24 +0800
Subject: [PATCH] feat(explorer): make color works

---
 web/public/js/graph/git/file-explorer.js | 25 ++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/web/public/js/graph/git/file-explorer.js b/web/public/js/graph/git/file-explorer.js
index 70635d45..0756d2a1 100644
--- a/web/public/js/graph/git/file-explorer.js
+++ b/web/public/js/graph/git/file-explorer.js
@@ -24,12 +24,29 @@ function renderCodeExplorer(freedom, data, elementId) {
   const labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
   const pop_labels = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
+
+  const max = d3.quantile(allNodes, 0.9975, d => {
+    if (d.data.data && d.data.data.git && d.data.data.git.details.length) {
+      return Math.abs(d.data.data.git.details.length)
+    }
+    return 0;
+  });
+  let color = d3.scaleLinear()
+    .domain([0, +max])
+    .range(["#9be9a8", "#216e39"])
+
   voronoi.selectAll('path')
     .data(allNodes)
     .enter()
     .append('path')
     .attr('d', d => `${d3.line()(d.data.layout.polygon)}z`)
-    .style('fill', d => d.parent ? d.parent.color : d.color)
+    .style('fill', d => {
+      if (d.data.data && d.data.data.git && d.data.data.git.details.length) {
+        return color(d.data.data.git.details.length)
+      } else {
+        return color(0);
+      }
+    })
     .attr("stroke", "#F5F5F2")
     .on('mouseenter', d => {
       let label = labels.select(`.label-${d.id}`);
@@ -43,6 +60,7 @@ function renderCodeExplorer(freedom, data, elementId) {
     .transition()
     .duration(1000)
     .attr("stroke-width", d => {
+      if (d.data.layout.algorithm === "circlePack") return 0;
       return d.depth < 4 ? 4 - d.depth : 1;
     })
 
@@ -56,7 +74,10 @@ function renderCodeExplorer(freedom, data, elementId) {
       return "translate(" + [d.data.layout.center[0], d.data.layout.center[1] + 6] + ")"
     })
     .text(d => {
-      return d.data.path
+      if (d.data.data) {
+        return d.data.path + ":" + d.data.data.git.details.length
+      }
+      return d.data.path;
     })
     .attr('opacity', function (d) {