Skip to content

Commit 7b47773

Browse files
author
geekshe
committed
Cosmetic updates to calls.html. Enclosing pie charts in boxes.
1 parent 4b6ae66 commit 7b47773

File tree

1 file changed

+114
-69
lines changed

1 file changed

+114
-69
lines changed

‎templates/calls.html

+114-69
Original file line numberDiff line numberDiff line change
@@ -29,81 +29,126 @@ <h3 class="panel-title">API Calls by Volume (Production)</h3>
2929

3030
<!-- Identify where the chart should be drawn. -->
3131
<h2>Email API (Production)</h2>
32-
<div id="ProdPieChart" style="width:400, height:300" class="PieChart"></div>
33-
34-
<script type="text/javascript">
35-
google.charts.load('current', {packages: ['corechart']});
36-
google.charts.setOnLoadCallback(drawChart);
37-
38-
39-
function drawChart() {
40-
// Define the chart to be drawn.
41-
var data = new google.visualization.DataTable();
42-
data.addColumn('string', 'Call');
43-
data.addColumn('number', 'Percent Volume');
44-
data.addRows([
45-
{% for agg_request in prod_agg_requests %}
46-
['{{agg_request.call_code}}', {{agg_request.success_count / prod_total}}],
47-
{% endfor %}
48-
]);
49-
50-
// Instantiate and draw the chart.
51-
var chart = new google.visualization.PieChart(document.getElementById('ProdPieChart'));
52-
chart.draw(data, null);
53-
}
54-
</script>
32+
33+
<div class="row">
34+
<div class="col-lg-4">
35+
<div class="panel panel-primary">
36+
<div class="panel-heading">
37+
<h3 class="panel-title">API Calls by Volume (Production)</h3>
38+
</div>
39+
<div class="panel-body">
40+
<div id="ProdPieChart" style="width:400, height:300" class="PieChart"></div>
41+
42+
<script type="text/javascript">
43+
google.charts.load('current', {packages: ['corechart']});
44+
google.charts.setOnLoadCallback(drawChart);
45+
46+
47+
function drawChart() {
48+
// Define the chart to be drawn.
49+
var data = new google.visualization.DataTable();
50+
data.addColumn('string', 'Call');
51+
data.addColumn('number', 'Percent Volume');
52+
data.addRows([
53+
{% for agg_request in prod_agg_requests %}
54+
['{{agg_request.call_code}}', {{agg_request.success_count / prod_total}}],
55+
{% endfor %}
56+
]);
57+
58+
// Instantiate and draw the chart.
59+
var chart = new google.visualization.PieChart(document.getElementById('ProdPieChart'));
60+
chart.draw(data, null);
61+
}
62+
</script>
63+
64+
<div class="text-right">
65+
<a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
5571

5672
<!-- Identify where the chart should be drawn. -->
5773
<h2>Email API (Staging)</h2>
58-
<div id="StagePieChart" style="width:400, height:300" class="PieChart"></div>
59-
60-
<script type="text/javascript">
61-
google.charts.load('current', {packages: ['corechart']});
62-
google.charts.setOnLoadCallback(drawChart);
63-
64-
65-
function drawChart() {
66-
// Define the chart to be drawn.
67-
var data = new google.visualization.DataTable();
68-
data.addColumn('string', 'Call');
69-
data.addColumn('number', 'Percent Volume');
70-
data.addRows([
71-
{% for agg_request in stage_agg_requests %}
72-
['{{agg_request.call_code}}', {{agg_request.success_count / stage_total}}],
73-
{% endfor %}
74-
]);
75-
76-
// Instantiate and draw the chart.
77-
var chart = new google.visualization.PieChart(document.getElementById('StagePieChart'));
78-
chart.draw(data, null);
79-
}
80-
</script>
74+
<div class="row">
75+
<div class="col-lg-4">
76+
<div class="panel panel-primary">
77+
<div class="panel-heading">
78+
<h3 class="panel-title">API Calls by Volume (Staging)</h3>
79+
</div>
80+
<div class="panel-body">
81+
82+
<div id="StagePieChart" style="width:400, height:300" class="PieChart"></div>
83+
84+
<script type="text/javascript">
85+
google.charts.load('current', {packages: ['corechart']});
86+
google.charts.setOnLoadCallback(drawChart);
87+
88+
89+
function drawChart() {
90+
// Define the chart to be drawn.
91+
var data = new google.visualization.DataTable();
92+
data.addColumn('string', 'Call');
93+
data.addColumn('number', 'Percent Volume');
94+
data.addRows([
95+
{% for agg_request in stage_agg_requests %}
96+
['{{agg_request.call_code}}', {{agg_request.success_count / stage_total}}],
97+
{% endfor %}
98+
]);
99+
100+
// Instantiate and draw the chart.
101+
var chart = new google.visualization.PieChart(document.getElementById('StagePieChart'));
102+
chart.draw(data, null);
103+
}
104+
</script>
105+
<div class="text-right">
106+
<a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
107+
</div>
108+
</div>
109+
</div>
110+
</div>
111+
</div>
81112

82113
<!-- Identify where the chart should be drawn. -->
83114
<h2>Email API (Internal)</h2>
84-
<div id="InternalPieChart" style="width:400, height:300" class="PieChart"></div>
85-
86-
<script type="text/javascript">
87-
google.charts.load('current', {packages: ['corechart']});
88-
google.charts.setOnLoadCallback(drawChart);
89-
90-
91-
function drawChart() {
92-
// Define the chart to be drawn.
93-
var data = new google.visualization.DataTable();
94-
data.addColumn('string', 'Call');
95-
data.addColumn('number', 'Percent Volume');
96-
data.addRows([
97-
{% for agg_request in internal_agg_requests %}
98-
['{{agg_request.call_code}}', {{agg_request.success_count / internal_total}}],
99-
{% endfor %}
100-
]);
101-
102-
// Instantiate and draw the chart.
103-
var chart = new google.visualization.PieChart(document.getElementById('InternalPieChart'));
104-
chart.draw(data, null);
105-
}
106-
</script>
115+
<div class="row">
116+
<div class="col-lg-4">
117+
<div class="panel panel-primary">
118+
<div class="panel-heading">
119+
<h3 class="panel-title">API Calls by Volume (Internal)</h3>
120+
</div>
121+
<div class="panel-body">
122+
<div id="InternalPieChart" style="width:400, height:300" class="PieChart"></div>
123+
124+
<script type="text/javascript">
125+
google.charts.load('current', {packages: ['corechart']});
126+
google.charts.setOnLoadCallback(drawChart);
127+
128+
129+
function drawChart() {
130+
// Define the chart to be drawn.
131+
var data = new google.visualization.DataTable();
132+
data.addColumn('string', 'Call');
133+
data.addColumn('number', 'Percent Volume');
134+
data.addRows([
135+
{% for agg_request in internal_agg_requests %}
136+
['{{agg_request.call_code}}', {{agg_request.success_count / internal_total}}],
137+
{% endfor %}
138+
]);
139+
140+
// Instantiate and draw the chart.
141+
var chart = new google.visualization.PieChart(document.getElementById('InternalPieChart'));
142+
chart.draw(data, null);
143+
}
144+
</script>
145+
<div class="text-right">
146+
<a href="#">View Details <i class="fa fa-arrow-circle-right"></i></a>
147+
</div>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
107152

108153
<!-- Morris Charts JavaScript -->
109154
<script src="/static/js/plugins/morris/raphael.min.js"></script>

0 commit comments

Comments
 (0)