MyRepotTest.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"> 
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Local HTML Report</title>
  <link rel="stylesheet" href="css/jquery-ui.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap-theme.min.css" type="text/css">
  <link rel="stylesheet" href="css/nv.d3.css" type="text/css">
  <link rel="stylesheet" href="css/bootstrap-select.min.css" type="text/css">
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/jquery-ui.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/bootstrap-select.min.js"></script>
  <script src="js/d3.v3.js"></script>
  <script src="js/nv.d3.js"></script>
  <script src="js/d3.layout.cloud.js"></script>
</head>
<body><div class="container">

<script>
</script>
<div class="page-wrapper">
  <div class="doc-wrapper">
    <div class="container">
    <div class="doc-body">
      <div class="doc-sidebar hidden-xs">
        <nav id="doc-nav">
          <ul id="doc-menu" class="nav doc-menu" data-apy="affix">
<li><a href="title_10">Test Report Header</a></li>
</ul></nav></div>
<H1 id="title_19">Youpi</H1>
</div></div></div></div>
<div class="dropdown" id="dropDown_0">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Super<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#A">a</a></li>
  <li><a href="#B">b</a></li>
</ul>
</div>
<div class="input-group">
  <textarea class="form-control custom-control" rows="3" style="resize:none" id="textarea_1"></textarea>
  <span class="input-group-btn"><button class="btn btn-primary" id="textarea_1_button"><span>Send</span></button></span>)
</div>
<div id="dropZone_2">Drop files here</div><output id="list"></output>
<select class="selectpicker" id="select_3">
  <optgroup label="Node">
    <option>GBC</option>
    <option>BNPPAR</option>
  </optgroup>
</select>
<div id="div_4">Olivier</div>
<a href="MyRepotTestChild.html">Great link to a new page</a>
<a href="MyRepotTestChild3.html">Great link to a new page, Again and Again</a>
<div id="grid_9" class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
    <ul class="list-group">
  <li class="list-group-item">test<span class="badge">1</span></li>
  <li class="list-group-item">Aurelie<span class="badge">12</span></li>
</ul>
    </div>
    <div class="col-lg-6">
    <table class="table">
  <thead><tr>
    <th>Olivier</th>
    <th>Aurelie</th>
    <th>Youpi</th>
  </tr></thead>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>super</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>encore</td>
  </tr>
</table>
    </div>
  </div>
</div>
<H1 id="title_10">Test Report Header</H1>
<button id="button_11" type="button" class="btn btn-success">Youpi Test</button>
<input id="input_12" type="text" name="test" value="Encore">
<p id="paragraph_14">Voici mon result <font id="text_13" class="font-weight-bold">YYYYYYYYYYYYYYYYYYYYYYYYYYYYYOUPI</font></p>
<div id="grid_17" class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
    <div id="chart15" class="None">
<svg width="960" height="500"></svg>
</div>

    </div>
    <div class="col-lg-6">
    <div id="chart16" class="None">
<svg width="960" height="500"></svg>
</div>

    </div>
  </div>
</div>
<div id="chart18" class="None"></div>

<script>
$("#dropDown_0 .dropdown-menu li").click(function(){
alert($(this).text()) ; 
});

$("#textarea_1_button").click(function(){
alert($("#textarea_1").val()) ; 
});

$("#dropZone_2").bind("dragover", function (event){

                          event.originalEvent.stopPropagation();
							            event.originalEvent.preventDefault();
                          event.originalEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
                          
});

$("#dropZone_2").bind("drop", function (event){

                          event.originalEvent.stopPropagation();
						              event.originalEvent.preventDefault();
                          var files = event.originalEvent.dataTransfer.files; // FileList object.

                          //files is a FileList of File objects. List some properties.
                          var output = [];
                          for (var i = 0, f; f = files[i]; i++) {
                             output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                                        f.size, ' bytes, last modified: ',
                                        f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                                        '</li>');
                          }
                          $('#list').html('<ul>' + output.join('') + '</ul>');

                      
});

$("#select_3").change(function(){
alert($(this).val()) ; 
});

$("#button_11").click(function(){
 $("#text_13").html($("#input_12").val());
});

$("#input_12").blur(function(){
alert("I can update the DB") ;
});

nv.addGraph(function() {

var fill = d3.scale.category20();
  var data_15 = [{'size': 10, 'text': 'Super'}, {'size': 20, 'text': 'Olivier'}, {'size': 20, 'text': 'Aurelie'}] ;

          d3.layout.cloud().size([960, 600])
            .words(data_15) // Refer to the data variable
            .rotate(function() { return ~~(Math.random() * 2) * 90; })
            .font("Impact")
            .fontSize(function(d) {  return d.size; })
            .on("end", draw)
            .start()
          ;

          function draw(words) {
            d3.select("#chart15 svg") // Refer to the chart variable
              .append("g")
              .attr("transform", "translate(150,150)")
              .selectAll("text")
              .data(words)
              .enter().append("text")
              .style("font-size", function(d) { return d.size + "px"; })
              .style("font-family", "Impact")
              .style("fill", function(d, i) {  return fill(i); })
              .attr("text-anchor", "middle")
              .attr("transform", function(d) {  return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; })
              .text(function(d) {  return d.text; });
          }
          ;

          
          // words should be the javascript version of the data set expected by the graph
          // Should be the select to the svg component
          function drawCloudUpdate(words, jsGraphRef){
             d3.layout.cloud().size([500, 500])
                .words(words)
                .padding(5)
                .rotate(function() { return ~~(Math.random() * 2) * 90; })
                .font("Impact")
                .fontSize(function(d) { return d.size; })
                .start();

             jsGraphRef
                .selectAll("g").attr("transform", "translate(150,150)")
                .selectAll("text")
                  .data(words).enter().append("text")
                  .style("font-size", function(d) { return d.size + "px"; })
                  .style("font-family", "Impact")
                  .style("fill", function(d, i) { return fill(i); })
                  .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";  })
                  .text(function(d) { return d.text; });
          };
          
        



  var chart_16 = nv.models.pieChart()
                .x(function(d){ return d.label })
                .y(function(d){ return d.value })
                .showLabels(1)
                .labelThreshold(.05)
                .labelType("percent")
                .donut(true)
                .donutRatio(0.35);


// Data section for chart_16
  var data_16 = [{'value': 29.765957771107, 'label': 'One'}, {'value': 32.807804682612, 'label': 'Two'}] ;

  d3.select("#chart16 svg")
                      .datum(data_16).transition()
                      .duration(350)
                      .call(chart_16);
                



  var chart_18 = nv.models.indentedTree()
                .tableClass('table table-striped') //for bootstrap styling
                .columns([
                  {
                    key: 'key',
                    label: 'Name',
                    showCount: true,
                    type: 'text',
                    classes: function(d) { return d.url ? 'clickable name' : 'name' },
                    click: function(d) {if (d.url) window.location.href = d.url; }
                  },

                  // Section dedicated to the columns definition
                  {
                    key: 'type',
                    label: 'Type',
                    width: '25%',
                    type: 'text'
                  }

                ]);


// Data section for chart_18
  var data_18 = [{'key': 'NVD3', 'values': [{'key': 'Charts', '_values': [{'key': 'Simple Line', 'type': 'Historical', 'url': 'http://novus.github.com/nvd3/ghpages/line.html'}]}], 'url': 'http://novus.github.com/nvd3'}] ;

  d3.select("#chart18")
                      .datum(data_18).transition()
                      .duration(350)
                      .call(chart_18);
                



});

</script>

</div>
</body>
</html>