Merge branch 'FafnerKeyZee-patch-1' into main

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);
+    };
+});

website/web/templates/main.html

@@ -12,7 +12,6 @@
     {{ bootstrap.load_css() }}
     <link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
     {% endblock %}
-
     <title>
         {% block title %}{% endblock%}
     </title>

website/web/templates/stats.html

@@ -2,7 +2,6 @@
 
 {% block title %}Statistics{% endblock %}
 
-
 {% block content %}
 <div>
 {% for weeks in stats['weeks'] %}
@@ -14,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>
@@ -50,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>
@@ -71,4 +70,11 @@
 {% 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 %}