Merge pull request #54 from dgets/develop

Develop; SVG graphs complete in our current dataview.

Author: dgets

dataview/templates/dataview/data_summary.html

@@ -80,30 +80,83 @@ <h4>Administration Time and Dosage</h4>
    <script>
     let json_src = '{% url 'dataview:dump_dose_graph_data' sub_id %}';
 
-    fetch(json_src)
-      .then(res => res.json())
-      .then((out) => {
-        //debugging schitt
-        //out = [ 7, 15, 2, 12, 13 ];
-        console.log(out);
-
-        var data = [];
-        for (var ouah in out.dosages) {
-          data.push(out.dosages[ouah]);
-        }
-
-        var x = d3.scale.linear()
-            .domain([0, d3.max(data)])
-            .range([0, d3.max(data)]);
-
-        d3.select(".dose_chart")
-          .selectAll("div")
-            .data(data)
-          .enter().append("div")
-            .style("width", function(d) { return x(d) + "px"; })
-            .text(function(d) { return (d / out.scale_factor); });
-      })
-      .catch(err => { throw err });
+        var margin = {top: 20, right: 20, bottom: 70, left: 40},
+        width = 600 - margin.left - margin.right,
+        height = 300 - margin.top - margin.bottom;
+
+        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
+        var y = d3.scale.linear().range([height, 0]);
+
+        var xAxis = d3.svg.axis()
+            .scale(x)
+            .orient("bottom")
+            .ticks(5);
+
+        var yAxis = d3.svg.axis()
+            .scale(y)
+            .orient("left")
+            .ticks(10);
+
+        var svg = d3.select("body").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 + ")");
+
+        d3.json(json_src, function(error, data) {
+          var ouah = []
+          var ouah2 = []
+          var ouah3 = []
+          for (var cntr = 0; cntr < data.dosages.length; cntr++) {
+            ouah[cntr] = {}
+            ouah2[cntr] = (cntr + 1);
+            ouah3[cntr] = data.dosages[cntr];
+            ouah[cntr].date = ouah2[cntr]
+            ouah[cntr].value = ouah3[cntr]
+          }
+
+          console.log(ouah);
+
+          ouah.forEach(function(d) {
+              d.date = d.date;
+              d.value = +d.value;
+          });
+
+          x.domain(ouah.map(function(d) { return d.date; }));
+          y.domain([0, d3.max(ouah3)]);
+
+          svg.append("g")
+              .attr("class", "x axis")
+              .attr("transform", "translate(0," + height + ")")
+              .call(xAxis)
+            .selectAll("text")
+              .style("text-anchor", "end")
+              .attr("dx", "-.8em")
+              .attr("dy", "-.55em")
+              .attr("transform", "rotate(-90)" );
+
+          svg.append("g")
+              .attr("class", "y axis")
+              .call(yAxis)
+            .append("text")
+              .attr("transform", "rotate(-90)")
+              .attr("y", 6)
+              .attr("dy", ".71em")
+              .style("text-anchor", "end")
+              .text("Dosage");
+
+          svg.selectAll("bar")
+              .data(ouah)
+            .enter().append("rect")
+              .style("fill", "steelblue")
+              .attr("x", function(d) { return x(d.date); })
+              .attr("width", x.rangeBand())
+              .attr("y", function(d) { return y(d.value); })
+              .attr("height", function(d) { return height - y(d.value); });
+
+        });
+
      </script>
 
   {% else %}
@@ -128,27 +181,82 @@ <h4>Time Between Subsequent Administrations</h4>
    <div class="interval_chart"></div>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script>
-    let json_src2 = '{% url 'dataview:dump_interval_graph_data' sub_id %}';
-
-    fetch(json_src2)
-      .then(res => res.json())
-      .then((out) => {
-        //debugging schitt
-        //out = [ 7, 15, 2, 12, 13 ];
-        console.log(out);
-
-        var x = d3.scale.linear()
-            .domain([0, d3.max(out.timespans)])
-            .range([0, d3.max(out.timespans)]);
-
-        d3.select(".interval_chart")
-          .selectAll("div")
-            .data(out.timespans)
-          .enter().append("div")
-            .style("width", function(d) { return x(d) + "px"; })
-            .text(function(d) { return (secondsToHms(d / out.scale_factor)); });
-      })
-      .catch(err => { throw err });
+let json_src2 = '{% url 'dataview:dump_interval_graph_data' sub_id %}';
+
+var margin = {top: 20, right: 20, bottom: 70, left: 40},
+    width = 600 - margin.left - margin.right,
+    height = 300 - margin.top - margin.bottom;
+
+var x2 = d3.scale.ordinal().rangeRoundBands([0, width], .05);
+var y2 = d3.scale.linear().range([height, 0]);
+
+var xAxis2 = d3.svg.axis()
+    .scale(x2)
+    .orient("bottom")
+    .ticks(10);
+
+var yAxis2 = d3.svg.axis()
+    .scale(y2)
+    .orient("left")
+    .ticks(10);
+
+var svg2 = d3.select("body").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 + ")");
+
+d3.json(json_src2, function(error, data) {
+
+    var ouah_interval = [];
+    for (var cntr = 0; cntr < data.timespans.length; cntr++) {
+        ouah_interval[cntr] = {}
+        ouah_interval[cntr].num = cntr + 1;
+        ouah_interval[cntr].value = data.timespans[cntr];
+    };
+
+    ouah_interval.forEach(function(d) {
+        d.num = d.num;
+        d.value = +d.value;
+    });
+
+    //debugging
+    //console.log(ouah_interval);
+
+  x2.domain(ouah_interval.map(function(d) { return d.num; }));
+  y2.domain([0, d3.max(ouah_interval, function(d) { return d.value; })]);
+
+  svg2.append("g")
+      .attr("class", "x axis")
+      .attr("transform", "translate(0," + height + ")")
+      .call(xAxis2)
+    .selectAll("text")
+      .style("text-anchor", "end")
+      .attr("dx", "-.8em")
+      .attr("dy", "-.55em")
+      .attr("transform", "rotate(-90)" );
+
+  svg2.append("g")
+      .attr("class", "y axis")
+      .call(yAxis2)
+    .append("text")
+      .attr("transform", "rotate(-90)")
+      .attr("y2", 6)
+      .attr("dy", ".71em")
+      .style("text-anchor", "end")
+      .text("Timespan");
+
+  svg2.selectAll("bar")
+      .data(ouah_interval)
+    .enter().append("rect")
+      .style("fill", "steelblue")
+      .attr("x", function(d) { return x2(d.num); })
+      .attr("width", x2.rangeBand())
+      .attr("y", function(d) { return y2(d.value); })
+      .attr("height", function(d) { return height - y2(d.value); });
+
+});
      </script>
 
   {% else %}

dataview/views.py

@@ -53,8 +53,6 @@ class is to provide a view of the data (averages, then eventually plasma
     model = Usage   # should've said all generic views need to know
     template_name = 'dataview/data_summary.html'  # needed to avoid using the default
 
-    # TODO: add calculation of the amount of time between dosages (plus avg)
-
     def get_context_data(self, **kwargs):
         usages = Usage.objects.filter(sub=self.kwargs['pk'])
         usage_count = len(usages)
@@ -146,13 +144,21 @@ def dump_dose_graph_data(request, sub_id):
     # finish this quick; I'll fix it later
     # TODO: fix the gross 2 for loops issue
     for use in usages:
-        dosage_graph_data.append(float(use.dosage * scale_factor))
+        dosage_graph_data.append(float(use.dosage))
 
     return HttpResponse(json.dumps({'scale_factor': float(scale_factor), 'dosages': dosage_graph_data}),
                         content_type='application/json')
 
 
 def dump_interval_graph_data(request, sub_id):
+    """
+    View does the same as the above one, except for the intervals between
+    administrations data subset.
+
+    :param request:
+    :param sub_id:
+    :return:
+    """
     usages = Usage.objects.filter(sub=sub_id)[:20]
 
     timespans = []
@@ -171,8 +177,9 @@ def dump_interval_graph_data(request, sub_id):
         prev_time = use.timestamp
 
     scale_factor = get_graph_normalization_divisor(max_span.total_seconds(), 300)
+    # convert this to minutes
     for cntr in range(0, len(timespans)):
-        timespans[cntr] = timespans[cntr] * scale_factor
+        timespans[cntr] = timespans[cntr] / (60 ** 2)
 
     return HttpResponse(json.dumps({'scale_factor': scale_factor, 'timespans': timespans}),
                         content_type='application/json')