distil-ui/distil_ui/content/billing/templates/billing/index.html

267 lines
10 KiB
HTML

{% extends 'base.html' %}
{% load compress %}
{% load i18n %}
{% load i18n sizeformat %}
{% block title %}{% trans "Usage Costs" %}{% endblock %}
{% block css %}
{% include "_stylesheets.html" %}
<link href="{{ STATIC_URL }}catalystdashboard/nv.d3.min.css" rel="stylesheet" type="text/css">
<link href='{{ STATIC_URL }}catalystdashboard/scss/style.css' type='text/css' rel='stylesheet'>
{% endblock %}
{% block page_header %}
{% include "horizon/common/_page_header.html" with title=_("Usage Costs") %}
{% endblock page_header %}
{% block main %}
<p>Disclaimer: This is an estimate for your usage cross <b>ALL regions</b>, not your final invoice. It includes the free router and network discount. All costs are in New Zealand dollars and are exclusive of GST.</p>
<div class="row-fluid">
<div id="credits_div" class="list-group">
<h4 class="quota-heading dot_line">{% trans "Credits" %}</h4>
<ul id="credits_list" class="fa-ul" style="margin-left: 1.7em">
</ul>
</div>
<div>
<h4 class="quota-heading dot_line">{% trans "Usage Cost History" %}
</h4>
<div id="line_chart">
<svg class="line"></svg>
</div>
</div>
<div>
<h4 id="monthly_title" class="quota-heading dot_line">{% trans "Monthly Cost Break Down" %}</h4>
<div class="col-md-4" style="padding:0px;">
<div id="pie_chart">
<select id="month_select" class="form-control" style="width:95%;"></select>
<svg class="pie"></svg>
</div>
</div>
<div class="col-md-8" style="padding:0px;">
<table id="month_details" class="table table-striped">
<thead>
<tr>
<th>Product Name</th>
<th>Resource Name/ID</th>
<th>Quantity</th>
<th>Unit</th>
<th>Rate</th>
<th>Cost</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Product Name</th>
<th>Resource Name/ID</th>
<th>Quantity</th>
<th>Unit</th>
<th>Rate</th>
<th>Cost</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Current d3 version is 3.4.1 -->
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/nv.d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="{{ STATIC_URL }}catalystdashboard/jquery.simplePagination.js" charset="utf-8"></script>
<script type="text/javascript">
var LINE_CHART_DATA = {{line_chart_data | safe}};
var PIE_CHART_DATA = {{pie_chart_data | safe}};
var MONTH_DETAILS = {{month_details | safe}};
var MONTHS = {{x_axis_line_chart | safe}};
var CREDITS = {{credits | safe}};
function draw_pie(where, source){
var h = 500;
var r = h/2;
var arc = d3.svg.arc().outerRadius(r) /2 ;
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.key })
.y(function(d) { return d.value })
.margin({left: 0, right: 50})
.showLabels(true)
.labelType("percent")
.labelThreshold(.05)
.donut(true).donutRatio(0.35);
d3.select("#pie_chart svg")
.datum(source)
.transition().duration(1200)
.call(chart);
return chart;
});
}
function draw_line(where, source){
nv.addGraph(function() {
d3.select(source).remove();
var chart = nv.models.lineChart()
.margin({left: 75, right: 50})
.size(100);
chart.tooltipContent(function(key, x, y, graph) {
pay_status = "";
if (key == "Cost"){
status = LINE_CHART_DATA[0].values[MONTHS.indexOf(x)].p;
pay_status = "<br/>which is a quotation";
switch(status) {
case "paid":
pay_status = "<br/>which has been paid";
break;
case "open":
pay_status = '<br/>which has <strong style="color: #E6550D;">NOT</strong> been paid';
break;
default:
text = "<br/>which is a quotation";
}
}
return '<h3>' + key + '</h3>' + '<span style=\'padding:8px\'>$' + y + ' at ' + x + pay_status + '</span>'
});
chart.legend
.radioButtonMode(true);
chart.xAxis.axisLabel("Cost per Month")
.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11])
.tickFormat(function(m){return MONTHS[m]});
chart.yAxis
.axisLabel("Cost (NZD) excl. GST")
.tickFormat(d3.format(',.2f'));
d3.select(where).select('.nv-interactive').selectAll("circle").remove();
d3.select(where)
.datum(source)
.transition()
.duration(500)
.call(chart)
.each("end", function(){
var svg = d3.select(this);
var data = LINE_CHART_DATA;
var unpaid = svg.select('.nv-interactive').selectAll("circle")
.data(data[0].values.filter(function (d) {
return d.p == 'open';
}))
.enter().append("circle")
.attr("class", "unpaid")
.style("fill", "#E6550D")
.attr("r", 6)
.attr("cx", function(d) {
return chart.xAxis.scale()(d.x);
})
.attr("cy", function(d) {
return chart.yAxis.scale()(d.y);
});
// .on("click", function(d) {
// showMonthlyCost(d["x"]);
//});
current_month = LINE_CHART_DATA[0].values[11];
var current = svg.select('.nv-interactive')
.append("circle")
.attr("class", "mycircle")
.style("fill", "#31A354")
.attr("r", 6)
.attr("cx", function(d) {return chart.xAxis.scale()(current_month.x);})
.attr("cy", function(d) {return chart.yAxis.scale()(current_month.y);});
});
nv.utils.windowResize(chart.update);
return chart;
});
}
function showMonthlyCost(monthIndex){
// Build the details table
var link_mapping = {"c1": "/project/instances/",
"b1": "/project/volumes/"}
$('#month_details tbody').empty();
if (MONTH_DETAILS.length == 0) {return}
month_detail = MONTH_DETAILS[monthIndex]
for(i = 0; i < month_detail.length; i++) {
var resource_id = ""
var resource_url = "#";
if (month_detail[i]['resource_id'] != null && month_detail[i]['resource_id'] != "") {
resource_id = "(" + month_detail[i]['resource_id']+")"
var resource_type = month_detail[i]["product"].split(".")[1];
var product_name = month_detail[i]["product"].split(".")[2];
if (resource_type in link_mapping){
resource_url = link_mapping[resource_type] + month_detail[i]['resource_id'];
}
if (resource_type == 'n1'){
if (product_name == 'network'){
resource_url = '/project/networks/'+ month_detail[i]['resource_id'] +'/detail';
}
if (product_name == 'router'){
resource_url = '/project/routers/'+ month_detail[i]['resource_id'];
}
if (product_name == 'vpn'){
resource_url = '/project/vpn/vpnservice/'+ month_detail[i]['resource_id'];
}
}
}
resource = resource_id == ""? month_detail[i]['resource_name']+resource_id : "<a href="+ resource_url +">" + month_detail[i]['resource_name'] + resource_id + "</a>"
$('#month_details tbody').append('<tr><td>' + month_detail[i]['product'] + '</td><td>' + resource +'</td><td>'+month_detail[i]['quantity']+'</td><td>'+month_detail[i]['unit']+'</td><td>'+month_detail[i]['rate']+'</td><td>$'+month_detail[i]['cost']+'</td></tr>');
}
$("#month_details").simplePagination({
perPage: 10,
});
// Refresh the pie chart
draw_pie("#pie_chart .pie", function(){
return PIE_CHART_DATA[monthIndex];
});
}
$(document).ready(function(){
draw_line("#line_chart .line", function(){
return LINE_CHART_DATA;
});
$(window).resize(function(){
draw_line("#line_chart .line", function(){
return LINE_CHART_DATA;
});
});
for(i = MONTHS.length -1 ; i >= 0; i--) {
amount = LINE_CHART_DATA[0].values[i]["y"]
$("#month_select").append('<option value="'+ i.toString() +'">'+MONTHS[i] + ': $' + amount +'</option>');
}
$("#month_select").change(function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
showMonthlyCost(this.value);
});
showMonthlyCost(11);
if (CREDITS["credits"].length == 0) {
$("#credits_div").hide();
} else {
$("#credits_div").show();
for(i=0;i<CREDITS["credits"].length;i++){
$("#credits_list").append('<li><i class="fa-li fa fa-credit-card"></i> Balance of ' + CREDITS["credits"][i].type + ' is $' + CREDITS["credits"][i].balance + '. This will expire on ' + CREDITS["credits"][i].expiry_date + '</li>');
}
}
});
</script>
{% endblock %}