Skip to content

Commit

Permalink
Merge pull request #54 from dgets/develop
Browse files Browse the repository at this point in the history 
Develop; SVG graphs complete in our current dataview.
  • Loading branch information
@dgets
dgets committed Jan 9, 2019
2 parents 98c71f7 + bd1b22e commit 0305b7b
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 49 deletions.
198 changes: 153 additions & 45 deletions dataview/templates/dataview/data_summary.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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 %}
Expand Down
15 changes: 11 additions & 4 deletions dataview/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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 = []
Expand All @@ -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')
Expand Down

0 comments on commit 0305b7b

Please sign in to comment.