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 171 </div>
172 172  
173 173 <div class="row" style="padding-left: 10px;">
174   - <div class="col-md-7" >
  174 + <div class="col-md-2" >
175 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 187 </div>
178 188 </div>
179 189 <div class="col-md-5">
... ... @@ -441,11 +451,11 @@
441 451 var ind06 = [{valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}];
442 452  
443 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 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 460 // Definindo a área em que o gráfico será construído dentro da área de desenho
451 461 var width = w - margin.left - margin.right;
... ... @@ -492,15 +502,17 @@
492 502  
493 503  
494 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 509 // Definindo um objeto SVG agrupado
498 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 517 // Definindo o objeto tooltip
506 518 var tooltip = d3.select("body").append("div").attr("class", "toolTip");
... ...