112 lines
2.6 KiB
HTML
112 lines
2.6 KiB
HTML
{% load i18n %}
|
|
{% load l10n %}
|
|
{% load static %}
|
|
<script src='{% static "cloudkitty/js/d3.min.js" %}' type='text/javascript' charset='utf-8'></script>
|
|
<script src='{% static "cloudkitty/js/d3pie.min.js" %}' type='text/javascript' charset='utf-8'></script>
|
|
<script src='{% static "cloudkitty/js/rickshaw.min.js" %}' type='text/javascript' charset='utf-8'></script>
|
|
|
|
<div class="col-md-6">
|
|
<h4>{% trans "Cumulative Cost Repartition" %}</h4>
|
|
<div id="repartition_cumulated"></div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var cumulated = new d3pie("repartition_cumulated", {
|
|
"size": {
|
|
"canvasHeight": 300,
|
|
"canvasWidth": 500
|
|
},
|
|
"labels": {
|
|
"outer": {
|
|
"pieDistance": 20
|
|
},
|
|
"inner": {
|
|
"hideWhenLessThanPercentage": 3
|
|
},
|
|
"mainLabel": {
|
|
"fontSize": 11
|
|
},
|
|
"percentage": {
|
|
"color": "#ffffff",
|
|
"decimalPlaces": 0
|
|
},
|
|
"value": {
|
|
"color": "#adadad",
|
|
"fontSize": 11
|
|
},
|
|
"lines": {
|
|
"enabled": true
|
|
}
|
|
},
|
|
"effects": {
|
|
"pullOutSegmentOnClick": {
|
|
"effect": "linear",
|
|
"speed": 400,
|
|
"size": 8
|
|
}
|
|
},
|
|
"misc": {
|
|
"gradient": {
|
|
"enabled": true,
|
|
"percentage": 100
|
|
}
|
|
},
|
|
"data": {
|
|
"sortOrder": "value-desc",
|
|
"content": [
|
|
{% for service, data in repartition_data.items %}
|
|
{"label": "{{ service }}",
|
|
"value": {{ data.cumulated|unlocalize }}
|
|
},
|
|
{% endfor %}
|
|
]}});
|
|
</script>
|
|
|
|
<div class="col-md-6">
|
|
<h4>{% trans "Cost Per Service Per Hour" %}</h4>
|
|
<div id="cost_progress"></div>
|
|
<div id="cost_progress_legend"></div>
|
|
</div>
|
|
|
|
<script>
|
|
var palette = new Rickshaw.Color.Palette();
|
|
var graph = new Rickshaw.Graph({
|
|
element: document.querySelector('#cost_progress'),
|
|
width: 500,
|
|
height: 300,
|
|
interpolation: 'linear',
|
|
onComplete: function(w) {
|
|
var legend = new Rickshaw.Graph.Legend({
|
|
element: document.querySelector('#cost_progress_legend'),
|
|
graph: w.graph
|
|
});
|
|
},
|
|
series: [
|
|
{% for service, data in repartition_data.items %}
|
|
{
|
|
color: palette.color(),
|
|
name: "{{ service }}",
|
|
data: [
|
|
{% for timestamp, rating in data.hourly.items %}{x: {{ timestamp }}, y: {{ rating|unlocalize }}},{% endfor %}
|
|
]
|
|
},
|
|
{% endfor %}
|
|
]
|
|
});
|
|
graph.render();
|
|
|
|
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
|
|
graph: graph
|
|
} );
|
|
|
|
var yAxis = new Rickshaw.Graph.Axis.Y({
|
|
graph: graph,
|
|
});
|
|
yAxis.render();
|
|
|
|
var xAxis = new Rickshaw.Graph.Axis.Time({
|
|
graph: graph
|
|
});
|
|
xAxis.render();
|
|
</script>
|