From 28ed2b168c0c7052f5b0bc037f6a226c6b995d64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= <raphael@vinot.info>
Date: Thu, 26 Nov 2020 22:26:22 +0100
Subject: [PATCH] chg: Use d3js instead of chart.js

---
 website/web/static/stats_graph.js | 64 ++++++++++++++++++++++++
 website/web/templates/main.html   |  9 ++--
 website/web/templates/stats.html  | 82 +++++--------------------------
 3 files changed, 79 insertions(+), 76 deletions(-)
 create mode 100644 website/web/static/stats_graph.js

diff --git a/website/web/static/stats_graph.js b/website/web/static/stats_graph.js
new file mode 100644
index 00000000..6ade081b
--- /dev/null
+++ b/website/web/static/stats_graph.js
@@ -0,0 +1,64 @@
+"use strict";
+var margin = {top: 50, right: 50, bottom: 50, left: 50};
+var width = 1000;
+var height = 100;
+
+var xScale = d3.scaleLinear()
+               .domain([0, 12])
+               .range([0, width]);
+
+d3.json('/json/stats').then(json => {
+    for (var year in json['years']) {
+        var dataset = [];
+        for (var month in json['years'][year]) {
+            var i_month = parseInt(month)
+            if (Number.isInteger(i_month)) {
+                dataset.push([month, json['years'][year][month]['analysis']]);
+                height = Math.max(json['years'][year][month]['analysis'] + 50, height);
+            };
+        };
+        var yScale = d3.scaleLinear()
+                       .domain([0, height])
+                       .range([height, 0]);
+
+        var line = d3.line()
+                     .x(d => { return xScale(d[0]); })
+                     .y(d => { return yScale(d[1]); })
+                     .curve(d3.curveMonotoneX)
+
+        var svg = d3.select(".graphs").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})`);
+
+        svg.append("text")
+             .attr("x", (width / 2))
+             .attr("y", 0 - (margin.top / 2))
+             .attr("text-anchor", "middle")
+             .style("font-size", "20px")
+             .text(year);
+
+        svg.append("g")
+             .attr("class", "x axis")
+             .attr("transform", `translate(0, ${height})`)
+             .call(d3.axisBottom(xScale));
+
+        svg.append("g")
+             .attr("class", "y axis")
+             .call(d3.axisLeft(yScale));
+
+        svg.append("path")
+             .datum(dataset)
+             .attr("class", "line")
+             .attr("d", line);
+
+        svg.selectAll(".dot")
+           .data(dataset)
+           .enter().append("circle")
+             .attr("class", "dot")
+             .attr("cx", d => { return xScale(d[0]) })
+             .attr("cy", d => { return yScale(d[1]) })
+             .attr("r", 5);
+    };
+});
diff --git a/website/web/templates/main.html b/website/web/templates/main.html
index e942df40..1cc43eca 100644
--- a/website/web/templates/main.html
+++ b/website/web/templates/main.html
@@ -12,11 +12,6 @@
     {{ bootstrap.load_css() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
     {% endblock %}
-    {% block scripts %}
-    <!-- Optional JavaScript -->
-    {{ bootstrap.load_js() }}
-    {% endblock %}
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
     <title>
         {% block title %}{% endblock%}
     </title>
@@ -28,5 +23,9 @@
       {% block content %}{% endblock%}
     </div>
 
+    {% block scripts %}
+    <!-- Optional JavaScript -->
+    {{ bootstrap.load_js() }}
+    {% endblock %}
   </body>
 </html>
diff --git a/website/web/templates/stats.html b/website/web/templates/stats.html
index 53a68b7e..bebcef89 100644
--- a/website/web/templates/stats.html
+++ b/website/web/templates/stats.html
@@ -2,9 +2,7 @@
 
 {% block title %}Statistics{% endblock %}
 
-
 {% block content %}
-
 <div>
 {% for weeks in stats['weeks'] %}
   <h2> Week: {{ weeks['week'] }}</h2>
@@ -15,8 +13,8 @@
       <th>Submissions</th>
       <th>Submissions with redirects</th>
       <th>Redirects</th>
-      <th>Uniq urls</th>
-      <th>Uniq domains</th>
+      <th>Unique urls (including redirects)</th>
+      <th>Unique domains (including redirects)</th>
     </tr>
     </thead>
     <tbody>
@@ -51,8 +49,8 @@
           <th>Submissions</th>
           <th>Submissions with redirects</th>
           <th>Redirects</th>
-          <th>Uniq urls</th>
-          <th>Uniq domains</th>
+          <th>Unique urls (including redirects)</th>
+          <th>Unique domains (including redirects)</th>
         </tr>
         </thead>
         <tbody>
@@ -72,69 +70,11 @@
 {% endfor %}
 </div>
 
-<div>
-{% for name, dict_ in stats['years'].items() %}
-    <h5>Total Submissions {{ name }}</h5>       
-    <canvas id="global_submissions{{ name }}" width="800" height="350"></canvas>
-    <script type="text/javascript">
-        $(document).ready(function() {    
-            new Chart(document.getElementById("global_submissions{{ name }}"), {
-                type: 'line',
-                data: {
-                    labels: [
-                        {% for monthnumber, month in dict_.items() %}
-                            {% if monthnumber is number %}
-                                "{{ month_name(monthnumber) }}",
-                            {% endif %}
-                        {% endfor %}  
-                    ],
-                    datasets: [{
-                        label: "{{ name }}",
-                        fill: false,
-                        backgroundColor:"#FE9700",
-                        borderColor:"#FE9700",
-                        data: [
-                            {% for monthnumber, month in dict_.items() %}
-                                {% if monthnumber is number %}
-                                    "{{ month['analysis'] }}",
-                                {% endif %}
-                            {% endfor %} 
-                        ]                    
-                    }]
-                },
-                options: {
-                    legend: {
-                        position: 'bottom'
-                    },
-                    title: {
-                        display: true,
-                        text: "Total Submissions {{ name }}"
-                    },                        
-                    hover: {
-                        animationDuration: 0
-                    },
-                    animation: {
-                        duration: 1,
-                        onComplete: function () {
-                            var chartInstance = this.chart,
-                            ctx = chartInstance.ctx;
-                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
-                            ctx.textAlign = 'center';
-                            ctx.textBaseline = 'bottom';
-                            this.data.datasets.forEach(function (dataset, i) {
-                                var meta = chartInstance.controller.getDatasetMeta(i);
-                                meta.data.forEach(function (bar, index) {
-                                    var data = dataset.data[index];
-                                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
-                                });
-                            });
-                        }
-                    },      
-                }                  
-            }); 
-        });             
-    </script>
-{% endfor %}
-</div>
-
+<div class='graphs'></div>
+{% endblock %}
+
+{% block scripts %}
+{{ super() }}
+<script src='{{ url_for('static', filename='d3.v6.min.js') }}'></script>
+<script src='{{ url_for('static', filename='stats_graph.js') }}'></script>
 {% endblock %}