From faf5d67b9046d1d52dac9873bdeed9ec961c085c Mon Sep 17 00:00:00 2001
From: Takayuki MATSUOKA <takayuki.matsuoka@gmail.com>
Date: Fri, 3 Apr 2015 06:17:29 +0900
Subject: Replace chartselector by Bootstrap's tab.

js/bootstrap-patch.css is copied from the following answer on SO :
http://stackoverflow.com/a/23267110/2132223
---
 ...chmark-silesia-1000mbps-offline-compression.csv |  2 +-
 csv/benchmark-silesia-1000mbps.csv                 |  2 +-
 js/bootstrap-patch.css                             | 13 ++++
 js/chartselector.js                                | 57 -----------------
 js/rendercharts.js                                 |  4 +-
 test.html                                          | 74 ++++++++++++----------
 6 files changed, 56 insertions(+), 96 deletions(-)
 create mode 100644 js/bootstrap-patch.css
 delete mode 100644 js/chartselector.js

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>
-- 
cgit v0.12