Replace chartselector by Bootstrap's tab.

js/bootstrap-patch.css is copied from the following answer on SO :
http://stackoverflow.com/a/23267110/2132223

6 files changed, 56 insertions, 96 deletions

diff --git a/csv/benchmark-silesia-1000mbps-offline-compression.csv b/csv/benchmark-silesia-1000mbps-offline-compression.csv
index e2df4ca..323bca6 100644
--- a/csv/benchmark-silesia-1000mbps-offline-compression.csv
+++ b/csv/benchmark-silesia-1000mbps-offline-compression.csv
@@ -1,4 +1,4 @@
-"Compressor:string"	,"Compression:number"	,"Decompression:number"	,"Transfer:number"

+"Compressor:string"	,"Compression:number"	,"Decompression:number"	,"Transfer:number"

 LZ4 (r101) -1		, 0.0000		, 0.1165		, 1.0170

 LZO-2.06		, 0.0000		, 0.3532		, 1.0064

 QuickLZ 1.5.1b6		, 0.0000		, 0.5046		, 0.94743

diff --git a/csv/benchmark-silesia-1000mbps.csv b/csv/benchmark-silesia-1000mbps.csv
index 28926f5..265beb2 100644
--- a/csv/benchmark-silesia-1000mbps.csv
+++ b/csv/benchmark-silesia-1000mbps.csv
@@ -1,4 +1,4 @@
-"Compressor:string","Compression:number","Decompression:number","Transfer:number"

+"Compressor:string","Compression:number","Decompression:number","Transfer:number"

 LZ4 (r101) -1		, 0.5022	, 0.1165	, 1.0170

 LZO-2.06		, 0.5119	, 0.3532	, 1.0064

 QuickLZ 1.5.1b6		, 0.5682	, 0.5046	, 0.94743

diff --git a/js/bootstrap-patch.css b/js/bootstrap-patch.css
new file mode 100644
index 0000000..db40801
--- /dev/null
+++ b/js/bootstrap-patch.css
@@ -0,0 +1,13 @@
+/* bootstrap hack: fix content width inside hidden tabs

+   http://stackoverflow.com/a/23267110/2132223

+ */

+.tab-content > .tab-pane,

+.pill-content > .pill-pane {

+    display: block !important; /* undo display:none          */

+    height: 0;                 /* height:0 is also invisible */ 

+    overflow-y: hidden;        /* no-overflow                */

+}

+.tab-content > .active,

+.pill-content > .active {

+    height: auto;              /* let the content decide it  */

+} /* bootstrap hack end */

diff --git a/js/chartselector.js b/js/chartselector.js
deleted file mode 100644
index 67c81aa..0000000
--- a/js/chartselector.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/*

-Usage:

-

-Add data-chartselector-chart-id="YOUR-CHART-ID" as buttons attibute.

-

-  <button data-chartselector-chart-id="my-chart-1" type="button" class="btn btn-primary">Test Chart #1</button>

-          ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~

-  

-  <button data-chartselector-chart-id="my-chart-2" type="button" class="btn btn-primary">Test Chart #2</button>

-          ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ~~~~~~~~~~~~

-

-Create parent <div> as chart group and child <div> as chart entity.

-

-  <div id="my-chart-group-1" class="chartselector-group">

-                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^

-    <div id="my-chart-1" class="chartselector-chart" data-csv-props='{...}'></div>

-            ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^

-    <div id="my-chart-2" class="chartselector-chart" data-csv-props='{...}'></div>

-            ~~~~~~~~~~~~ ^^^^^^^^^^^^^^^^^^^^^^^^^^^

-  </div>

-*/

-(function($) {

-  $(document).ready(function() {

-    $("button[data-chartselector-chart-id]").click(function() {

-      var chartId = $(this).attr("data-chartselector-chart-id");

-      showChart(chartId);

-    });

-  });

-

-  function showChart(chartId) {

-    var e = $("#" + chartId);

-    var p = e.closest(".chartselector-group");

-    var divs = p.children(".chartselector-chart");

-    divs.each(function() {

-      if(this.id == chartId) {

-        $(this).css("display", "block");

-        $(this).css("visibility", "visible");

-      } else {

-        $(this).css("display", "none");

-      }

-    });

-  }

-

-  var cssStyleText = '\

-    .chartselector-group {  \

-      position: relative;   \

-    }                       \

-                            \

-    .chartselector-chart {  \

-      position: absolute;   \

-      width: 100%;          \

-      height: 100%;         \

-    }                       \

-  ';

-

-  $("<style>").prop("type", "text/css").html(cssStyleText).appendTo("head");

-})(jQuery);

diff --git a/js/rendercharts.js b/js/rendercharts.js
index 1fd3373..24bce90 100644
--- a/js/rendercharts.js
+++ b/js/rendercharts.js
@@ -109,7 +109,7 @@
   };

   // end of http://code.google.com/p/csv-to-array/

 

-  var drawTable = function (gvCtor, gvOptions, csvUrl, tableEl) {

+  var drawTable = function (gvCtor, gvOptions, csvUrl, csvEl) {

     var r = new XMLHttpRequest();

     r.open("GET", csvUrl, true);

     r.onreadystatechange = function() {

@@ -140,7 +140,7 @@
         }

         gvdt.addRows(csvAsArray);

         var ctor = getNestedObjectByName(gvCtor);

-        var table = new ctor (tableEl);

+        var table = new ctor (csvEl);

         table.draw(gvdt, gvOptions);

       }

     }

diff --git a/test.html b/test.html
index 5742f0b..9f719f4 100644
--- a/test.html
+++ b/test.html
@@ -17,6 +17,8 @@
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
+
+    <link rel="stylesheet" href="js/bootstrap-patch.css">
   </head>
   <body style="padding-top:0; padding-bottom:0; ">
     <nav class="navbar navbar-default">
@@ -58,16 +60,16 @@
     <a name="summary"></a>
     <div class="container">
       <div class="page-header jumbotron" style="padding-top:1em;padding-bottom:2em;">
-        <h1>LZ4 - Extremely fast compression</h1>
-        <b>LZ4</b> is lossless compression algorithm, providing compression speed
-        at 400 MB/s per core (0.16 Byte/cycle), scalable with multi-cores CPU.
-        It also features an extremely fast decoder, with speed in multiple
-        GB/s per core (0.71 Byte/cycle), typically reaching RAM speed limits on multi-core systems.
-        A high compression derivative, called <b>LZ4_HC</b>, is also provided.
+        <h1>LZ4</h1>
+        LZ4 is lossless compression algorithm, providing compression speed at 400 MB/s per core (0.16 Bytes/cycle).
+        It also features an extremely fast decoder, with speed in multiple GB/s per core (0.71 Bytes/cycle).
+        A high compression derivative, called LZ4_HC, is also provided.
         It trades CPU time for compression ratio.
       </div>
     </div>
 
+
+
 <xmp theme="sandstone" style="display:none;">
 <a name="benchmarks"></a>
 Benchmarks
@@ -79,34 +81,37 @@ The benchmark uses the
 The reference system uses a Core i5-3340M @2.7GHz.
 Benchmark evaluates the compression of reference [Silesia Corpus](http://sun.aei.polsl.pl/~sdeor/index.php?page=silesia) in single-thread mode.
 
-<div class="btn-group" role="group">
-  <button data-chartselector-chart-id="my-chart-1" type="button" class="btn btn-primary">Offline Compression@1000Mbps</button>
-  <button data-chartselector-chart-id="my-chart-2" type="button" class="btn btn-primary">Online Compression@1000Mbps</button>
+<div>
+  <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
+    <li class="active"><a href="#tab-1" data-toggle="tab">Transfer + Decompression Time<br/>@1000Mbps</a></li>
+    <li               ><a href="#tab-2" data-toggle="tab">Compression + Transfer + Decompression Time<br/>@1000Mbps</a></li>
+  </ul>
+  <div id="my-tab-content" class="tab-content">
+    <div id="tab-1" class="tab-pane active">
+      <div style="height:30em;"
+           data-csv-props='{
+             "csvSrc": "csv/benchmark-silesia-1000mbps-offline-compression.csv",
+             "csvGvType": "google.visualization.ColumnChart",
+             "csvGvPackage": "corechart",
+             "isStacked": "true",
+             "title": "Transfer + Decompression Time | [SMALLER IS BETTER]"
+           }'
+      ></div>
+    </div>
+    <div id="tab-2" class="tab-pane">
+      <div style="height:30em;"
+           data-csv-props='{
+             "csvSrc": "csv/benchmark-silesia-1000mbps.csv",
+             "csvGvType": "google.visualization.ColumnChart",
+             "csvGvPackage": "corechart",
+             "isStacked": "true",
+             "title": "Compression + Transfer + Decompression Time | [SMALLER IS BETTER]"
+           }'
+      ></div>
+    </div>
+  </div>
 </div>
 
-<div class="chartselector-group" style="height:30em;">
-  <div id="my-chart-1"
-       class="chartselector-chart"
-       data-csv-props='{
-         "csvSrc": "csv/benchmark-silesia-1000mbps-offline-compression.csv",
-         "csvGvType": "google.visualization.ColumnChart",
-         "csvGvPackage": "corechart",
-         "isStacked": "true",
-         "title": "Round Trip Time - offline compression - Silesia Corpus(212MB)@1000Mbit/s | [SMALLER IS BETTER]"
-       }'
-  ></div>
-
-  <div id="my-chart-2"
-       class="chartselector-chart"
-       data-csv-props='{
-         "csvSrc": "csv/benchmark-silesia-1000mbps.csv",
-         "csvGvType": "google.visualization.ColumnChart",
-         "csvGvPackage": "corechart",
-         "isStacked": "true",
-         "title": "Round Trip Time - Silesia Corpus(212MB)@1000Mbit/s | [SMALLER IS BETTER]"
-       }'
-  ></div>
-</div>
 
 <br/>
 <a name="interoperable-lz4"></a>
@@ -178,8 +183,7 @@ The following versions compress data blocks using LZ4 compression algorithm in m
     <script src="strapdown/v/0.2/strapdown.js"></script>
 
     <!-- Chart -->
-    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
-    <script type="text/javascript" src="js/rendercharts.js"></script>
-    <script src="js/chartselector.js"></script>
+    <script src="https://www.google.com/jsapi"></script>
+    <script src="js/rendercharts.js"></script>
   </body>
 </html>