68 lines
1.9 KiB
HTML
68 lines
1.9 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block extra_media %}
|
|
<script type="text/javascript" src="{% get_static_prefix %}js/Chart.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block title %}karma: {{ entry.key }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<h3>{{ entry.key }}</h3>
|
|
<canvas id="karma_history"></canvas>
|
|
<script type="text/javascript">
|
|
Chart.defaults.global.responsive = true;
|
|
Chart.defaults.global.maintainAspectRatio = true;
|
|
Chart.types.Line.extend({name : "AltLine",
|
|
initialize : function(data) {
|
|
Chart.types.Line.prototype.initialize.apply(this, arguments);
|
|
this.scale.draw = function() {
|
|
if (this.display && (this.xLabelRotation > 90)) {
|
|
this.endPoint = this.height - 5;
|
|
}
|
|
Chart.Scale.prototype.draw.apply(this, arguments);
|
|
};
|
|
}
|
|
});
|
|
var ctx = $("#karma_history").get(0).getContext("2d");
|
|
var data = {
|
|
labels: [{% for x in entry_history %}"{{ x.0 }}", {% endfor %}],
|
|
datasets: [
|
|
{
|
|
label: "{{ entry.key }}",
|
|
fillColor: "rgba(150,150,220,0.2)",
|
|
strokeColor: "rgba(100,100,220,1)",
|
|
pointColor: "rgba(50,50,220,1)",
|
|
pointStrokeColor: "#fff",
|
|
pointHighlightFill: "#fff",
|
|
pointHighlightStroke: "rgba(220,220,220,1)",
|
|
data: [{% for x in entry_history %}{{ x.2 }}, {% endfor %}]
|
|
}
|
|
]
|
|
};
|
|
var myLineChart = new Chart(ctx).AltLine(data, {
|
|
pointDot: false,
|
|
{% if entry_history|length > 100 %}
|
|
showTooltips: false,
|
|
scaleShowVerticalLines: false,
|
|
{% endif %}
|
|
tooltipEvents: ["click"]
|
|
});
|
|
</script>
|
|
<h5>Log</h5>
|
|
<table border="1px">
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Delta</th>
|
|
<th>Score</th>
|
|
</tr>
|
|
{% for delta in entry_history %}
|
|
<tr>
|
|
<td>{{ delta.0 }}</td>
|
|
<td>{{ delta.1 }}</td>
|
|
<td>{{ delta.2 }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% endblock %}
|