feat(visual): add first version tag history

inherd · Feb 9, 2021 · 1558e85 · 1558e85
1 parent ae9f0c2
commit 1558e85
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/web/index.html b/web/index.html
@@ -89,12 +89,14 @@
 </head>
 <body>
 <h1>Coco Reporter</h1>
-<h2>Learning Curve</h2>
+<h2>Branches History</h2>
+<div id="branch-timeline"></div>
+<h2>Tags History</h2>
+<div id="tags-timeline"></div>
 
+<h2>Learning Curve</h2>
 <div id="learning-curve"></div>
 
-<h2>Branch History</h2>
-<div id="branch-timeline"></div>
 <h2>Package by Size 1</h2>
 <div id="circle-packing"></div>
 <h2>Package by Size 2</h2>
@@ -133,11 +135,13 @@ <h2>Commits Tree</h2>
 
 <script src="public/js/graph/cloc/circle-packing.js"></script>
 <script src="public/js/graph/cloc/nested-treemap.js"></script>
+
 <script src="public/js/graph/git/branch-timeline.js"></script>
 <script src="public/js/graph/git/commits-tree.js"></script>
 <script src="public/js/graph/git/hour-heatmap.js"></script>
 <script src="public/js/graph/git/members-lifecycle.js"></script>
 <script src="public/js/graph/git/learning-curve.js"></script>
+<script src="public/js/graph/git/tags-timeline.js"></script>
 
 <script src="public/js/index.js"></script>
 </body>

diff --git a/web/public/js/graph/git/tags-timeline.js b/web/public/js/graph/git/tags-timeline.js
@@ -0,0 +1,49 @@
+function renderTagsTimeline(data) {
+  data = data.reverse();
+
+  let i = 0;
+  data.forEach(function (d) {
+    d.index = i;
+    i++;
+  });
+
+  let margin = {top: 20, right: 20, bottom: 30, left: 50},
+    width = GraphConfig.width - margin.left - margin.right,
+    height = 500 - margin.top - margin.bottom;
+
+  let svg = d3.select("#tags-timeline").append("svg")
+    .attr("width", width + margin.left + margin.right)
+    .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+    .attr("transform",
+      "translate(" + margin.left + "," + margin.top + ")");
+
+  let x = d3.scaleLinear()
+    .domain([0, data.length])
+    .range([0, width]);
+
+  svg.append("g")
+    .attr("transform", "translate(0," + height + ")")
+    .call(d3.axisBottom(x));
+
+  let y = d3.scaleTime()
+    .domain([data[0].date * 1000, Date.now()])
+    .range([height, 0]);
+
+  svg.append("g")
+    .call(d3.axisLeft(y));
+
+  svg.append('g')
+    .selectAll("dot")
+    .data(data)
+    .enter()
+    .append("circle")
+    .attr("cx", function (d) {
+      return x(d.index);
+    })
+    .attr("cy", function (d) {
+      return y(d.date * 1000);
+    })
+    .attr("r", 3)
+    .style("fill", "#69b3a2")
+}
diff --git a/web/public/js/index.js b/web/public/js/index.js
@@ -32,7 +32,7 @@ d3.json("data/git.json").then(function (json) {
 });
 
 d3.json("data/git-tags.json").then(function (json) {
-  console.log(json);
+  renderTagsTimeline(json);
 });
 
 d3.json("data/git-commits.json").then(function (data) {