chg: make stats graph more generic

website/web/static/stats.css

@@ -1,20 +0,0 @@
-.line {
-    fill: none;
-    stroke: #ffab00;
-    stroke-width: 3;
-}
-
-.overlay {
-  fill: none;
-  pointer-events: all;
-}
-
-.dot {
-    fill: #ffab00;
-    stroke: #fff;
-}
-
-  .focus circle {
-  fill: none;
-  stroke: steelblue;
-}

website/web/static/stats_graph.js

@@ -1,61 +1,67 @@
 "use strict";
-var margin = {top: 50, right: 50, bottom: 50, left: 50};
+var margin = {top: 50, right: 150, bottom: 50, left: 50};
 var width = 1000;
-var height = 100;
+var height = 800;
 
-var xScale = d3.scaleLinear()
-               .domain([0, 12])
-               .range([0, width]);
 
 d3.json('/json/stats').then(json => {
-    json['years'].forEach(year => {
+    var datasets = []
-        var dataset = [];
+    json.years.forEach(year => {
-        year['months'].forEach(month => {
+        var data_year = { label: `Analysis ${year.year}`, x: [], y: [] }
-            dataset.push([month['month_number'], month['analysis']]);
+        year.months.forEach(month => {
-            height = Math.max(month['analysis'] + 50, height);
+            data_year.x.push(month.month_number)
+            data_year.y.push(month.analysis)
         });
-        var yScale = d3.scaleLinear()
+        datasets.push(data_year)
-                       .domain([0, height])
+    });
+
+    var x_scale = d3.scaleLinear()
+                    .domain([0, 12])
+                    .range([0, width]);
+    var y_scale = d3.scaleLinear()
+                    .domain([ 0,
+                              d3.max(datasets, function(d) { return d3.max(d.y); })
+                            ])
                     .range([height, 0]);
 
+    var x_axis = d3.axisBottom(x_scale);
+    var y_axis = d3.axisLeft(y_scale);
     var line = d3.line()
-                     .x(d => { return xScale(d[0]); })
+                 .x(d => { return x_scale(d[0]); })
-                     .y(d => { return yScale(d[1]); })
+                 .y(d => { return y_scale(d[1]); });
-                     .curve(d3.curveMonotoneX)
 
     var svg = d3.select(".graphs").append("svg")
-                    .attr("width", width + margin.left + margin.right)
+                .attr("width", width + margin.right + margin.left)
                 .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['year']);
-
     svg.append("g")
         .attr("class", "x axis")
         .attr("transform", `translate(0, ${height})`)
-             .call(d3.axisBottom(xScale));
+        .call(x_axis);
 
     svg.append("g")
         .attr("class", "y axis")
-             .call(d3.axisLeft(yScale));
+        .call(y_axis);
 
-        svg.append("path")
+    var data_lines = svg.selectAll(".d3_xy_chart_line")
-             .datum(dataset)
+                        .data(datasets.map(d => {return d3.zip(d.x, d.y);}))
+                        .enter().append("g")
+                        .attr("class", "d3_xy_chart_line") ;
+
+    data_lines.append("path")
               .attr("class", "line")
-             .attr("d", line);
+              .attr("d", line)
+              .attr("stroke", (_, i) => {return d3.schemeCategory10[i];});
+
+    data_lines.append("text")
+               .datum((d, i) => { return {name: datasets[i].label, final: d[d.length-1]}; })
+               .attr("transform", d => {
+                   return ( `translate(${x_scale(d.final[0])}, ${y_scale(d.final[1])})` ) ; })
+               .attr("x", 3)
+               .attr("dy", ".35em")
+               .attr("fill", (_, i) =>{ return d3.schemeCategory10[i]; })
+               .text(d => { return d.name; }) ;
 
-        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/stats.html

@@ -76,8 +76,3 @@
 <script src='{{ url_for('static', filename='d3.v6.min.js') }}'></script>
 <script src='{{ url_for('static', filename='stats_graph.js') }}'></script>
 {% endblock %}
-
-{% block styles %}
-{{ super() }}
-<link rel="stylesheet" href="{{ url_for('static', filename='stats.css') }}">
-{% endblock %}