Criando label para var_explicada

Co-authored-by: Jefersonalves <ferreira.jefersonn@gmail.com> Criado campo de informações estatísticas avançadas que mostra a variância explicada pelos componentes Co-authored-by: Jeferson Alves <ferreira.jefersonn@gmail.com> Co-authored-by: Thiago Nogueira <thiagonf10@gmail.com>
radar-parlamentar · Apr 30, 2018 · cd12b4a · cd12b4a
1 parent 7c7349c
commit cd12b4a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/radar_parlamentar/radar_parlamentar/static/files/codes/js/radar_plot.js b/radar_parlamentar/radar_parlamentar/static/files/codes/js/radar_plot.js
@@ -173,7 +173,7 @@ Plot = (function ($) {
         // Creates the SVG container and sets the origin.
         var svg_base = d3.select("#animacao").append("svg")
             .attr("width", width + margin.left + margin.right)
-            .attr("height", height + margin.top + margin.bottom + space_between_graph_and_control)
+            .attr("height", height + margin.top + margin.bottom + space_between_graph_and_control + 50)
             .style("position", "relative");
 
         var grupo_controle_periodos = svg_base.append("g")
@@ -539,7 +539,7 @@ Plot = (function ($) {
             label_periodo.text(periodos[periodo_atual].nome);
             quantidade_votacoes = periodos[periodo_atual].nvotacoes;
             label_nvotacoes.text(quantidade_votacoes + " votações");
-
+            $("#varexp").html(periodos[periodo_atual].var_explicada)
             sortAll();
 
             if (periodo_para == periodo_max) mouseout_next();

diff --git a/radar_parlamentar/radar_parlamentar/templates/analise.html b/radar_parlamentar/radar_parlamentar/templates/analise.html
@@ -76,6 +76,25 @@ <h3> {{casa_legislativa.nome}}</h3>
             <input type="submit" value="Buscar">
         </form>
 
+
+        <div style="width: 40%">
+            <p style="background: none;border: none; color: #1292db; font-weight:bold;cursor:pointer; font-size: 15px;"
+            onmouseover="this.style.color='#555';"
+            onmouseout="this.style.color='#1292db';"
+            onclick="mostrarDadosAvancados();"
+            id="botao_dados_avancados">  &rarr; Informações estatísticas avançadas</p>
+        </div>
+
+        <div style="display: none" id="dadosAvancados">
+          <li>
+            <ul>
+              <p style="background: none;border: none; color: #1292db; font-weight:bold; cursor:pointer; font-size: 15px;">
+             Variância explicada pelos componentes principais: <span id="varexp"> </span>
+              </p>
+            </ul>
+          </li>
+        </div>
+
         <!-- Popup windows content -->
         <div id="popup-content">
             <div class="row">
@@ -150,6 +169,17 @@ <h4>Entenda o gráfico</h4>
             }
         }
 
+        function mostrarDadosAvancados(){
+            var visibilidade = document.getElementById("dadosAvancados").style.display;
+            if(visibilidade == 'none'){
+                document.getElementById("dadosAvancados").style.display = 'block';
+                document.getElementById("botao_dados_avancados").innerHTML = "&darr; Informações estatísticas avançadas";
+            }else{
+                document.getElementById("dadosAvancados").style.display = 'none';
+                document.getElementById("botao_dados_avancados").innerHTML = "&rarr; Informações estatísticas avançadas";
+            }
+        }
+
     </script>
 {% endblock extrajsend %}