activity: Make frontend to display data

Make activity/index.html to display the data, and static/charts.js for constructing the charts. Uses scraped file `static/activity-data.json`. Closes #25
coala · Dec 9, 2017 · 6b69490 · 6b69490
1 parent 51769df
commit 6b69490
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 0 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -19,4 +19,6 @@ after_success:
   - python activity/scraper.py
   - python manage.py collectstatic --noinput
   - python manage.py distill-local public --force
+  - mkdir public/activity
+  - cp activity/index.html public/activity/
   - ./.ci/deploy.sh
diff --git a/activity/index.html b/activity/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Community Activity</title>
+    <style>
+    canvas {
+        -moz-user-select: none;
+        -webkit-user-select: none;
+        -ms-user-select: none;
+    }
+    </style>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+</head>
+
+<body>
+    <h1>Community Activity</h1>
+    <br>
+    <br>
+    <div style="width:75%;">
+        <canvas id="canvas"></canvas>
+    </div>
+    <select id="chartType">
+        <option value="Month">Year</option>
+        <option value="Week">Month</option>
+        <option value="Day">Week</option>
+    </select>
+    <br>
+    <br>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="/static/charts.js"></script>
+    <script>
+    $('#chartType').on('change', function(){
+        updateChart($('#chartType').val())
+    });
+    updateChart($('#chartType').val());
+    </script>
+</body>
+
+</html>
diff --git a/static/charts.js b/static/charts.js
@@ -0,0 +1,86 @@
+/* globals $, Chart */
+var curChart;
+
+function setChart(labels, openedData, closedData, type) {
+  var ctx = document.getElementById("canvas");
+
+  curChart = new Chart(ctx, {
+    type: 'line',
+    data: {
+      labels: labels,
+      datasets: [{
+        label: "Issues Opened",
+        backgroundColor: "RGBA(33, 150, 243, 0.2)",
+        borderColor: "RGBA(33, 150, 243, 1)",
+        data: openedData,
+        fill: true,
+      }, {
+        label: "Issues Closed",
+        backgroundColor: "RGBA(244, 67, 54, 0.2)",
+        borderColor: "RGBA(244, 67, 54, 1)",
+        data: closedData,
+        fill: true,
+      }]
+    },
+    options: {
+      responsive: true,
+      title: {
+        display: true,
+        text: 'Community Activity'
+      },
+      tooltips: {
+        mode: 'index',
+        intersect: false,
+      },
+      hover: {
+        mode: 'nearest',
+        intersect: true
+      },
+      scales: {
+        xAxes: [{
+          display: true,
+          scaleLabel: {
+            display: true,
+            labelString: type
+          }
+        }],
+        yAxes: [{
+          display: true,
+          scaleLabel: {
+            display: true,
+            labelString: 'Number'
+          }
+        }]
+      }
+    }
+  });
+}
+
+function updateChart(type) {
+  if(curChart){ curChart.destroy(); }
+
+  $.getJSON("/static/activity-data.json",
+    function(data) {
+      var labels, openedData, closedData;
+      if(type === "Month") {
+        labels = data.year.labels;
+        openedData = data.year.opened;
+        closedData = data.year.closed;
+      }
+      else if(type === "Week") {
+        labels = data.month.labels;
+        openedData = data.month.opened;
+        closedData = data.month.closed;
+      }
+      else {
+        labels = data.week.labels;
+        openedData = data.week.opened;
+        closedData = data.week.closed;
+      }
+      setChart(labels, openedData, closedData, type);
+  })
+  .fail(function(data, textStatus, error) {
+    var err = textStatus + ", " + error;
+    console.error("Request Failed: " + err);
+  });
+}