feat(frequency): make basic works

web/public/js/graph/git/team-code-frequency.js

@@ -1,8 +1,8 @@
-// such as: https://github.com/inherd/coco/graphs/code-frequency
 function renderTeamFrequency(data) {
+  console.log(data);
   let margin = {top: 30, right: 30, bottom: 30, left: 60},
-    width = 460 - margin.left - margin.right,
-    height = 400 - margin.top - margin.bottom;
+    width = GraphConfig.width - margin.left - margin.right,
+    height = GraphConfig.height - margin.top - margin.bottom;
 
   let svg = d3.select("#code-frequency")
     .append("svg")
@@ -13,46 +13,36 @@ function renderTeamFrequency(data) {
 
 // add the x Axis
   let x = d3.scaleLinear()
-    .domain([-10, 15])
+    .domain([0, data.length])
     .range([0, width]);
+
   svg.append("g")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(x));
 
+  let max_added = d3.max(data, (d) => d.added);
+  let max_deleted = d3.max(data, (d) => d.deleted);
+
 // add the first y Axis
   let y1 = d3.scaleLinear()
     .range([height / 2, 0])
-    .domain([0, 0.12]);
+    .domain([0, max_added]);
   svg.append("g")
     .attr("transform", "translate(-20,0)")
-    .call(d3.axisLeft(y1).tickValues([0.05, 0.1]));
+    .call(d3.axisLeft(y1));
 
 // add the first y Axis
   let y2 = d3.scaleLinear()
     .range([height / 2, height])
-    .domain([0, 0.12]);
+    .domain([0, -max_deleted]);
   svg.append("g")
     .attr("transform", "translate(-20,0)")
-    .call(d3.axisLeft(y2).ticks(2).tickSizeOuter(0));
-
-// Compute kernel density estimation
-  let kde = kernelDensityEstimator(kernelEpanechnikov(7), x.ticks(60))
-  let density1 = kde(data.filter(function (d) {
-    return d.type === "variable 1"
-  }).map(function (d) {
-    return d.value;
-  }));
-
-  let density2 = kde(data.filter(function (d) {
-    return d.type === "variable 2"
-  }).map(function (d) {
-    return d.value;
-  }))
+    .call(d3.axisLeft(y2));
 
-// Plot the area
+  // Plot the area
   svg.append("path")
     .attr("class", "mypath")
-    .datum(density1)
+    .datum(data)
     .attr("fill", "#69b3a2")
     .attr("opacity", ".6")
     .attr("stroke", "#000")
@@ -61,17 +51,17 @@ function renderTeamFrequency(data) {
     .attr("d", d3.line()
       .curve(d3.curveBasis)
       .x(function (d) {
-        return x(d[0]);
+        return x(d.index);
       })
       .y(function (d) {
-        return y1(d[1]);
+        return y1(d.added);
       })
     );
 
 // Plot the area
   svg.append("path")
     .attr("class", "mypath")
-    .datum(density2)
+    .datum(data)
     .attr("fill", "#404080")
     .attr("opacity", ".6")
     .attr("stroke", "#000")
@@ -80,33 +70,16 @@ function renderTeamFrequency(data) {
     .attr("d", d3.line()
       .curve(d3.curveBasis)
       .x(function (d) {
-        return x(d[0]);
+        return x(d.index);
       })
       .y(function (d) {
-        return y2(d[1]);
+        return y2(-d.deleted);
       })
     );
 
   // Handmade legend
   svg.append("circle").attr("cx", 290).attr("cy", 30).attr("r", 6).style("fill", "#69b3a2")
   svg.append("circle").attr("cx", 290).attr("cy", 60).attr("r", 6).style("fill", "#404080")
-  svg.append("text").attr("x", 310).attr("y", 30).text("variable A").style("font-size", "15px").attr("alignment-baseline", "middle")
-  svg.append("text").attr("x", 310).attr("y", 60).text("variable B").style("font-size", "15px").attr("alignment-baseline", "middle")
-
-  // Function to compute density
-  function kernelDensityEstimator(kernel, X) {
-    return function (V) {
-      return X.map(function (x) {
-        return [x, d3.mean(V, function (v) {
-          return kernel(x - v);
-        })];
-      });
-    };
-  }
-
-  function kernelEpanechnikov(k) {
-    return function (v) {
-      return Math.abs(v /= k) <= 1 ? 0.75 * (1 - v * v) / k : 0;
-    };
-  }
+  svg.append("text").attr("x", 310).attr("y", 30).text("Added").style("font-size", "15px").attr("alignment-baseline", "middle")
+  svg.append("text").attr("x", 310).attr("y", 60).text("Deleted").style("font-size", "15px").attr("alignment-baseline", "middle")
 }

web/public/js/index.js

@@ -45,9 +45,9 @@ d3.json("data/git-commits.json").then(function (data) {
   renderHeatmapChart("#hour-heatmap-three-month", commit_to_hours_data(data, {before_month: 3}));
   renderLearningCurve(range_commits_by_users(data, 30));
 
+  renderTeamFrequency(commit_by_weeks(data));
+
+  // has reverse;
   renderTeamCommitCalendar(commit_by_days(data), "#commit-calendar");
 });
 
-d3.csv("data/demo.csv", {typed: true}).then(function (data) {
-  renderTeamFrequency(data);
-});

web/public/js/support/commit-convert.js

@@ -101,6 +101,47 @@ function commit_by_days(data) {
   return result;
 }
 
+function commit_by_weeks(data) {
+  let weekMap = {};
+  let reverse = data.reverse();
+
+  let start_date = reverse[0].date * 1000;
+  let range = reverse[0].date * 1000;
+  let last_date = reverse[reverse.length - 1].date * 1000;
+  let index = 1;
+  while (range <= last_date) {
+    range = range + 24 * 60 * 60 * 1000 * 7;
+    weekMap[index] = {
+      index: index,
+      added: 0,
+      deleted: 0
+    }
+
+    index++;
+  }
+
+  for (let datum of reverse) {
+    let week = Math.floor((datum.date * 1000 - start_date) / (24 * 60 * 60 * 1000 * 7)) + 1;
+    if (weekMap[week]) {
+      weekMap[week].added = weekMap[week].added + datum.total_added;
+      weekMap[week].deleted = weekMap[week].deleted + datum.total_deleted;
+    } else {
+      weekMap[week] = {
+        index: weekMap[week].index,
+        added: datum.total_added,
+        deleted: datum.total_deleted,
+      }
+    }
+  }
+
+  let result = [];
+  for (let key in weekMap) {
+    result.push(weekMap[key])
+  }
+
+  return result;
+}
+
 function range_commits_by_users(data, range) {
   let usermap = {};
   for (let datum of data.reverse()) {