feat: make select options circles

web/index.html

@@ -139,9 +139,13 @@
 <h1>Coco Reporter</h1>
 
 <h2>Code Explorer</h2>
-<div id="file-explorer">
-  <button id="play-button">Play</button>
-</div>
+<select id="file-history-select">
+  <option value="-" selected="selected">-</option>
+  <option value="circles">Circles</option>
+  <option value="normal">Normal</option>
+</select>
+<button id="play-button">Play</button>
+<div id="file-explorer"></div>
 
 <h1>Coding Skills</h1>
 <h2>Code Frequency</h2>

web/public/js/graph-config.js

@@ -1,5 +1,5 @@
 let GraphConfig = {
-  screen_width: window.innerWidth,
+  screen_width: window.innerWidth / 2,
   width: 1200,
   height: 900,
 }

web/public/js/graph/git/file-explorer.js

@@ -15,7 +15,6 @@ function renderCodeExplorer(data, elementId) {
       (d) => d.children === undefined || d.depth === maxDepth
     );
 
-
   let color = d3.scaleLinear()
     .domain([0, 1, 1])
     .range(['green', 'blue', 'red']);

web/public/js/index.js

@@ -71,9 +71,19 @@ d3.json("data/struct.json").then(function (data) {
 
 d3.json("data/git-file-history.json").then(function (data) {
   data.width = GraphConfig.width;
-  let layout = calculateCodeLayout(data);
+  d3.select("#file-history-select").on("change", function (d) {
+    let isCircles = false;
+    if (d.target.value === "-") {
+      return;
+    }
+    if (d.target.value === "circles") {
+      isCircles = true;
+    }
 
-  renderCodeExplorer(layout, '#file-explorer');
+    let layout = calculateCodeLayout(data, isCircles);
+    d3.select("#file-explorer").html("");
+    renderCodeExplorer(layout, '#file-explorer');
+  })
 });
 
 d3.json("data/pipeline.json").then(function (data) {

web/public/js/plugins/code-layout.js

@@ -216,8 +216,8 @@ function calculateVoronoi(
   }
 }
 
-function calculateCodeLayout(input) {
-  return codeLayout(input, 128, false);
+function calculateCodeLayout(input, circles) {
+  return codeLayout(input, 128, circles);
 }
 
 function codeLayout(input, points, circles) {