Download as
Browse Code »

Commit de4837489e4127005393431f941d0b60744cd8fd

Authored by Zambom
1 parent 9f9e46f0
Exists in master and in 2 other branches amadeus_univasf, refactoring

Spliting bulletin indicators graphic into three

Showing 1 changed file with 23 additions and 11 deletions   Show diff stats
bulletin/templates/bulletin/view.html
  Diff comments   View file @de48374
@@ -171,9 +171,19 @@ @@ -171,9 +171,19 @@
171 </div> 171 </div>
172 172
173 <div class="row" style="padding-left: 10px;"> 173 <div class="row" style="padding-left: 10px;">
174 - <div class="col-md-7" > 174 + <div class="col-md-2" >
175 <div class="row"> 175 <div class="row">
176 - <div id="bullet_chart"> </div> 176 + <div id="bullet_chart1" > </div>
  177 + </div>
  178 + </div>
  179 + <div class="col-md-2">
  180 + <div class="row">
  181 + <div id="bullet_chart2"> </div>
  182 + </div>
  183 + </div>
  184 + <div class="col-md-3">
  185 + <div class="row">
  186 + <div id="bullet_chart3"> </div>
177 </div> 187 </div>
178 </div> 188 </div>
179 <div class="col-md-5"> 189 <div class="col-md-5">
@@ -441,11 +451,11 @@ @@ -441,11 +451,11 @@
441 var ind06 = [{valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}]; 451 var ind06 = [{valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}];
442 452
443 // Variáveis de largura e altura da área de desenho do SVG 453 // Variáveis de largura e altura da área de desenho do SVG
444 - var w = 110;  
445 - var h = 350; 454 + var w = 100;
  455 + var h = 3*w;
446 456
447 // Margens 457 // Margens
448 - var margin = {top: 40,bottom: 40,left: 40,right: 10}; 458 + var margin = {top: w/3,bottom: w/3,left: w/3,right: w/12};
449 459
450 // Definindo a área em que o gráfico será construído dentro da área de desenho 460 // Definindo a área em que o gráfico será construído dentro da área de desenho
451 var width = w - margin.left - margin.right; 461 var width = w - margin.left - margin.right;
@@ -492,15 +502,17 @@ @@ -492,15 +502,17 @@
492 502
493 503
494 // Definindo o objeto SVG 504 // Definindo o objeto SVG
495 - var svg = d3.select("#bullet_chart").append("svg").attr("id", "bullet_chart1").attr("width", 6*w).attr("height", h); 505 + var svg = d3.select("#bullet_chart1").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
  506 + var svg2 = d3.select("#bullet_chart2").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
  507 + var svg3 = d3.select("#bullet_chart3").append("svg").attr("id", "bullet_chart").attr("width", 6*w).attr("height", h);
496 508
497 // Definindo um objeto SVG agrupado 509 // Definindo um objeto SVG agrupado
498 var bullet_chart = svg.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 510 var bullet_chart = svg.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")");
499 - var bullet_chart2 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+w) + "," + margin.top + ")");  
500 - var bullet_chart3 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+2*w) + "," + margin.top + ")");  
501 - var bullet_chart4 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+3*w) + "," + margin.top + ")");  
502 - var bullet_chart5 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+4*w) + "," + margin.top + ")");  
503 - var bullet_chart6 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+5*w) + "," + margin.top + ")"); 511 + var bullet_chart2 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left + w) + "," + margin.top + ")");
  512 + var bullet_chart3 = svg2.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  513 + var bullet_chart4 = svg2.append("g").classed("display", true).attr("transform", "translate(" + (margin.left + w) + "," + margin.top + ")");
  514 + var bullet_chart5 = svg3.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  515 + var bullet_chart6 = svg3.append("g").classed("display", true).attr("transform", "translate(" + (margin.left + w) + "," + margin.top + ")");
504 516
505 // Definindo o objeto tooltip 517 // Definindo o objeto tooltip
506 var tooltip = d3.select("body").append("div").attr("class", "toolTip"); 518 var tooltip = d3.select("body").append("div").attr("class", "toolTip");