Add spec_tooltip & spec_popover; Update documentation
diff --git a/docs/awesome_table_in_html.html b/docs/awesome_table_in_html.html
index 98b43a6..34e2be4 100644
--- a/docs/awesome_table_in_html.html
+++ b/docs/awesome_table_in_html.html
@@ -11,7 +11,7 @@
<meta name="author" content="Hao Zhu" />
-<meta name="date" content="2017-10-12" />
+<meta name="date" content="2017-10-23" />
<title>Create Awesome HTML Table with knitr::kable and kableExtra</title>
@@ -217,16 +217,11 @@
<h1 class="title toc-ignore">Create Awesome HTML Table with knitr::kable and kableExtra</h1>
<h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-12</em></h4>
+<h4 class="date"><em>2017-10-23</em></h4>
</div>
-<script>
-$(document).ready(function(){
- $('[data-toggle="tooltip"]').tooltip();
-});
-</script>
<blockquote>
<p>Please see the package <a href="http://haozhu233.github.io/kableExtra/">documentation site</a> for how to use this package in LaTeX.</p>
</blockquote>
@@ -1801,48 +1796,179 @@
</tbody>
</table>
</div>
-</div>
-<div id="cell-specification" class="section level1">
-<h1>Cell Specification</h1>
-<p><code>cell_spec</code> is different from the rest. You should use it before you pipe the table into the <code>kable</code> function. It is designed in such a way that you can easily use it inside a <code>dplyr::mutate()</code> together with conditional logic like <code>ifelse</code>. Since everything happens before <code>kable</code>, you have to tell this function which format you want to go to, <code>html</code> or <code>latex</code>. To reduce unnecessary finger typing, I linked the <code>format</code> argument here with <code>knitr::kable</code>’s global format option <code>knitr.table.format</code>. If you have defined this option to be <code>html</code> at the beginning of your document (as suggested earlier), it is not necessary for you to define format again for every <code>cell_spec</code>.</p>
-<pre class="r"><code>library(dplyr)</code></pre>
-<pre><code>## Warning: package 'dplyr' was built under R version 3.4.2</code></pre>
-<pre class="r"><code>mtcars[1:5, 1:3] %>%
- mutate(
- car = row.names(.),
- mpg = ifelse(mpg > 20,
- cell_spec(mpg, "html", font_size = 18), mpg),
- cyl = cell_spec(cyl, "html", angle = (1:5)*60, hover_message = mpg,
- background = "red", color = "white", align = "center"),
- disp = ifelse(disp > 200,
- cell_spec(disp, "html", color = "red", bold = T),
- cell_spec(disp, "html", color = "green", italic = T)),
- fancy = c(12, 14, 16, 18, 20),
- fancy = cell_spec(fancy, "html", font_size = fancy,
- color = viridisLite::inferno(length(fancy), end = 0.8)),
- car = cell_spec(car, "html", bold = T,
- color = viridisLite::inferno(length(fancy), end = 0.8))
- ) %>%
- select(car, everything()) %>%
- kable("html", escape = F) %>%
- kable_styling("hover", full_width = F) %>%
- add_header_above(c(" ", "Hello" = 2, "World" = 2)) </code></pre>
-<table class="table table-hover" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<div id="header-rows" class="section level2">
+<h2>Header Rows</h2>
+<p>One special case of <code>row_spec</code> is that you can specify the format of the header row via <code>row_spec(row = 0, ...)</code>.</p>
+<pre class="r"><code>kable(dt, format = "html") %>%
+ kable_styling("striped", full_width = F) %>%
+ row_spec(0, angle = -45)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
<thead>
<tr>
-<th style="border-bottom:hidden">
+<th style="text-align:left;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
</th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-Hello
-</div>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+mpg
</th>
-<th style="text-align:center; border-bottom:hidden; padding-bottom:0; padding-left:3px;padding-right:3px;" colspan="2">
-<div style="border-bottom: 1px solid #ddd; padding-bottom: 5px;">
-World
-</div>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+cyl
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+disp
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+hp
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+drat
+</th>
+<th style="text-align:right;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);">
+wt
</th>
</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+Mazda RX4
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.620
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Mazda RX4 Wag
+</td>
+<td style="text-align:right;">
+21.0
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+160
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.90
+</td>
+<td style="text-align:right;">
+2.875
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Datsun 710
+</td>
+<td style="text-align:right;">
+22.8
+</td>
+<td style="text-align:right;">
+4
+</td>
+<td style="text-align:right;">
+108
+</td>
+<td style="text-align:right;">
+93
+</td>
+<td style="text-align:right;">
+3.85
+</td>
+<td style="text-align:right;">
+2.320
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet 4 Drive
+</td>
+<td style="text-align:right;">
+21.4
+</td>
+<td style="text-align:right;">
+6
+</td>
+<td style="text-align:right;">
+258
+</td>
+<td style="text-align:right;">
+110
+</td>
+<td style="text-align:right;">
+3.08
+</td>
+<td style="text-align:right;">
+3.215
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet Sportabout
+</td>
+<td style="text-align:right;">
+18.7
+</td>
+<td style="text-align:right;">
+8
+</td>
+<td style="text-align:right;">
+360
+</td>
+<td style="text-align:right;">
+175
+</td>
+<td style="text-align:right;">
+3.15
+</td>
+<td style="text-align:right;">
+3.440
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+<div id="celltext-specification" class="section level1">
+<h1>Cell/Text Specification</h1>
+<p>Function <code>cell_spec</code> is introduced in version 0.6.0 of <code>kableExtra</code>. Unlike <code>column_spec</code> and <code>row_spec</code>, <strong>this function is designed to be used before the data.frame gets into the <code>kable</code> function</strong>. Comparing with figuring out a list of 2 dimentional index for targeted cells, this design is way easier to learn and use and it fits perfectly well with <code>dplyr</code>’s <code>mutate</code> and <code>summarize</code> functions. With this design, there are two things to be noted: * Since <code>cell_spec</code> generates raw <code>HTML</code> or <code>LaTeX</code> code, make sure you remember to put <code>escape = FALSE</code> in <code>kable</code>. At the same time, you have to escape special symbols including <code>%</code> manually by yourself * <code>cell_spec</code> needs a way to know whether you want <code>html</code> or <code>latex</code>. You can specify it locally in function or globally via the <code>options(knitr.table.format = "latex")</code> method as suggested at the beginning. If you don’t provide anything, this function will output as HTML by default.</p>
+<p>Currently, <code>cell_spec</code> supports features including bold, italic, monospace, text color, background color, align, font size & rotation angle. More features may be added in the future. Please see function documentations as reference.</p>
+<div id="conditional-logic" class="section level2">
+<h2>Conditional logic</h2>
+<p>It is very easy to use <code>cell_spec</code> with conditional logic. Here is an example.</p>
+<pre class="r"><code>library(dplyr)
+mtcars[1:10, 1:2] %>%
+ mutate(
+ car = row.names(.),
+ # You don't need format = "html" if you have ever defined options(knitr.table.format)
+ mpg = cell_spec(mpg, "html", color = ifelse(mpg > 20, "red", "blue")),
+ cyl = cell_spec(cyl, "html", color = "white", align = "c", angle = 45,
+ background = factor(cyl, c(4, 6, 8),
+ c("#666666", "#999999", "#BBBBBB")))
+ ) %>%
+ select(car, mpg, cyl) %>%
+ kable("html", escape = F) %>%
+ kable_styling("striped", full_width = F)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
<tr>
<th style="text-align:left;">
car
@@ -1853,152 +1979,435 @@
<th style="text-align:left;">
cyl
</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:left;">
+Mazda RX4
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Mazda RX4 Wag
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Datsun 710
+</td>
+<td style="text-align:left;">
+<span style="color: red;">22.8</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet 4 Drive
+</td>
+<td style="text-align:left;">
+<span style="color: red;">21.4</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Hornet Sportabout
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">18.7</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Valiant
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">18.1</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Duster 360
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">14.3</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #BBBBBB;text-align: c;">8</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 240D
+</td>
+<td style="text-align:left;">
+<span style="color: red;">24.4</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 230
+</td>
+<td style="text-align:left;">
+<span style="color: red;">22.8</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #666666;text-align: c;">4</span></span>
+</td>
+</tr>
+<tr>
+<td style="text-align:left;">
+Merc 280
+</td>
+<td style="text-align:left;">
+<span style="color: blue;">19.2</span>
+</td>
+<td style="text-align:left;">
+<span style="-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; "><span style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: #999999;text-align: c;">6</span></span>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+<div id="visualize-data-with-viridis-color" class="section level2">
+<h2>Visualize data with Viridis Color</h2>
+<p>This package also comes with a few helper functions, including <code>spec_color</code>, <code>spec_font_size</code> & <code>spec_angle</code>. These functions can rescale continuous variables to certain scales. For example, function <code>spec_color</code> would map a continuous variable to any <a href="https://cran.r-project.org/web/packages/viridis/vignettes/intro-to-viridis.html">viridis color palettes</a>. It offers a very visually impactful representation in a tabular format.</p>
+<pre class="r"><code>iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x) {
+ cell_spec(x, "html", bold = T, color = spec_color(x, end = 0.9),
+ font_size = spec_font_size(x))
+ }) %>%
+ mutate(Species = cell_spec(
+ Species, "html", color = "white", bold = T,
+ background = spec_color(1:10, end = 0.9, option = "A", direction = -1)
+ )) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling("striped", full_width = F)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
+<th style="text-align:center;">
+Sepal.Length
+</th>
+<th style="text-align:center;">
+Sepal.Width
+</th>
+<th style="text-align:center;">
+Petal.Length
+</th>
+<th style="text-align:center;">
+Petal.Width
+</th>
+<th style="text-align:center;">
+Species
+</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(40, 174, 128, 1);font-size: 14px;">5.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">3.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 206, 145, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(72, 34, 116, 1);font-size: 9px;">3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(254, 160, 109, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(57, 87, 140, 1);font-size: 10px;">4.7</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(56, 88, 140, 1);font-size: 10px;">3.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">1.3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(246, 110, 92, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(222, 73, 104, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(41, 175, 127, 1);font-size: 14px;">3.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(183, 55, 121, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">5.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">3.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">1.7</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(187, 223, 39, 1);font-size: 16px;">0.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(140, 41, 129, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">4.6</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 13px;">0.3</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(100, 26, 128, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(31, 154, 138, 1);font-size: 13px;">5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">3.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(60, 15, 112, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">4.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">2.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(62, 75, 138, 1);font-size: 10px;">1.4</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(53, 96, 141, 1);font-size: 11px;">0.2</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(20, 14, 54, 1);">setosa</span>
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">4.9</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(67, 62, 133, 1);font-size: 10px;">3.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(37, 131, 142, 1);font-size: 12px;">1.5</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 8px;">0.1</span>
+</td>
+<td style="text-align:center;">
+<span style=" font-weight: bold;color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: rgba(0, 0, 4, 1);">setosa</span>
+</td>
+</tr>
+</tbody>
+</table>
+<p>In the example above, I’m using the <code>mutate</code> functions from <code>dplyr</code>. You don’t have to use it. Base R solutions like <code>iris$Species <- cell_spec(iris$Species, color = "red")</code> also works.</p>
+</div>
+<div id="text-specification" class="section level2">
+<h2>Text Specification</h2>
+<p>If you check the results of <code>cell_spec</code>, you will find that this function does nothing more than wrapping the text with appropriate HTML/LaTeX formatting syntax. The result of this function is just a vector of character strings. As a result, when you are writing a <code>rmarkdown</code> document or write some text in shiny apps, if you need extra markups other than <strong>bold</strong> or <em>italic</em>, you may use this function to <span style="color: red;">color</span>, <span style="font-size: 16px;">change font size </span> or <span style="-webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); display: inline-block; "><span style>rotate</span></span> your text.</p>
+<p>An aliased function <code>text_spec</code> is also provided for a more literal writing experience. In HTML, there is no difference between these two functions.</p>
+<pre class="r"><code>sometext <- strsplit(paste0(
+ "You can even try do do some crazy things like this paragraph. ",
+ "It seems to be a useless feature at this moment but who cares. ",
+ "It is so fun to play with color that I can't stop. ;)"
+), " ")[[1]]
+text_formatted <- paste(
+ text_spec(sometext, "html", color = spec_color(1:length(sometext), end = 0.9),
+ font_size = spec_font_size(1:length(sometext), begin = 5, end = 20)),
+ collapse = " ")
+
+# To display the text, type `r text_formatted` outside of the chunk</code></pre>
+<p><span style="color: rgba(68, 1, 84, 1);font-size: 5px;">You</span> <span style="color: rgba(70, 10, 93, 1);font-size: 5px;">can</span> <span style="color: rgba(72, 20, 102, 1);font-size: 6px;">even</span> <span style="color: rgba(72, 28, 110, 1);font-size: 6px;">try</span> <span style="color: rgba(72, 36, 117, 1);font-size: 7px;">do</span> <span style="color: rgba(71, 43, 122, 1);font-size: 7px;">do</span> <span style="color: rgba(70, 51, 127, 1);font-size: 7px;">some</span> <span style="color: rgba(68, 58, 131, 1);font-size: 8px;">crazy</span> <span style="color: rgba(65, 65, 134, 1);font-size: 8px;">things</span> <span style="color: rgba(62, 73, 137, 1);font-size: 9px;">like</span> <span style="color: rgba(60, 80, 139, 1);font-size: 9px;">this</span> <span style="color: rgba(57, 87, 140, 1);font-size: 9px;">paragraph.</span> <span style="color: rgba(53, 94, 141, 1);font-size: 10px;">It</span> <span style="color: rgba(50, 100, 142, 1);font-size: 10px;">seems</span> <span style="color: rgba(48, 105, 142, 1);font-size: 11px;">to</span> <span style="color: rgba(45, 112, 142, 1);font-size: 11px;">be</span> <span style="color: rgba(43, 117, 142, 1);font-size: 11px;">a</span> <span style="color: rgba(41, 123, 142, 1);font-size: 12px;">useless</span> <span style="color: rgba(38, 130, 142, 1);font-size: 12px;">feature</span> <span style="color: rgba(36, 135, 142, 1);font-size: 13px;">at</span> <span style="color: rgba(34, 141, 141, 1);font-size: 13px;">this</span> <span style="color: rgba(32, 146, 140, 1);font-size: 14px;">moment</span> <span style="color: rgba(31, 153, 138, 1);font-size: 14px;">but</span> <span style="color: rgba(31, 159, 136, 1);font-size: 14px;">who</span> <span style="color: rgba(32, 163, 134, 1);font-size: 15px;">cares.</span> <span style="color: rgba(36, 170, 131, 1);font-size: 15px;">It</span> <span style="color: rgba(41, 175, 127, 1);font-size: 16px;">is</span> <span style="color: rgba(49, 181, 123, 1);font-size: 16px;">so</span> <span style="color: rgba(59, 187, 117, 1);font-size: 16px;">fun</span> <span style="color: rgba(70, 192, 111, 1);font-size: 17px;">to</span> <span style="color: rgba(83, 197, 105, 1);font-size: 17px;">play</span> <span style="color: rgba(95, 202, 97, 1);font-size: 18px;">with</span> <span style="color: rgba(110, 206, 88, 1);font-size: 18px;">color</span> <span style="color: rgba(123, 209, 81, 1);font-size: 18px;">that</span> <span style="color: rgba(138, 214, 71, 1);font-size: 19px;">I</span> <span style="color: rgba(155, 217, 60, 1);font-size: 19px;">can’t</span> <span style="color: rgba(171, 220, 50, 1);font-size: 20px;">stop.</span> <span style="color: rgba(187, 223, 39, 1);font-size: 20px;">;)</span></p>
+</div>
+<div id="tooltip" class="section level2">
+<h2>Tooltip</h2>
+<p>It’s very easy to add a tooltip to text via <code>cell_spec</code>. For example, <code>text_spec("tooltip", color = "red", tooltip = "Hello World")</code> will give you something like <span style="color: red;" data-toggle="tooltip" data-placement="right" title="Hello World">Hover over me</span> (you need to wait for a few seconds before your browser renders it).</p>
+<p>Note that the original browser-based tooltip is slow. If you want to have a faster response, you may want to initialize bootstrap’s tooltip by putting the following HTML code on the page.</p>
+<pre><code><script>
+$(document).ready(function(){
+ $('[data-toggle="tooltip"]').tooltip();
+});
+</script></code></pre>
+<p>In a rmarkdown document, you can just drop it outside of any R chunks. Unfortunately however, for rmarkdown pages with a <strong>floating TOC</strong> (like this page), you can’t use bootstrap tooltips because there is a conflict in namespace between Bootstrap and JQueryUI (tocify.js). As a result, I can’t provide a live demo here. If you want to have a tooltip together with a floating TOC, you should use <code>popover</code> which has a very similar effect.</p>
+</div>
+<div id="popover-message" class="section level2">
+<h2>Popover Message</h2>
+<p>The popover message looks very similar with tooltip but it can hold more contents. Unlike tooltip which can minimally work without you manually enable that module, you <strong>have to</strong> enable the <code>popover</code> module to get it work. The upper side is that there is no conflict between Bootstrap & JQueryUI this time, you can use it without any concern.</p>
+<pre><code><script>
+$(document).ready(function(){
+ $('[data-toggle="popover"]').popover();
+});
+</script></code></pre>
+<script>
+$(document).ready(function(){
+ $('[data-toggle="popover"]').popover();
+});
+</script>
+<pre class="r"><code>popover_dt <- data.frame(
+ position = c("top", "bottom", "right", "left"),
+ stringsAsFactors = FALSE
+)
+popover_dt$`Hover over these items` <- cell_spec(
+ paste("Message on", popover_dt$position), # Cell texts
+ popover = spec_popover(
+ content = popover_dt$position,
+ title = NULL, # title will add a Title Panel on top
+ position = popover_dt$position
+ ))
+kable(popover_dt, "html", escape = FALSE) %>%
+ kable_styling("striped", full_width = FALSE)</code></pre>
+<table class="table table-striped" style="width: auto !important; margin-left: auto; margin-right: auto;">
+<thead>
+<tr>
<th style="text-align:left;">
-disp
+position
</th>
<th style="text-align:left;">
-fancy
+Hover over these items
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: #000004FF;">
-Mazda RX4
-</div>
+top
</td>
<td style="text-align:left;">
-<div style="font-size: 18px;">
-21
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg);" data-toggle="tooltip" title="<div style="font-size: 18px;">21</div>">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #000004FF;font-size: 12px;">
-12
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="top" data-content="top">Message on top</span>
</td>
</tr>
<tr>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: #420A68FF;">
-Mazda RX4 Wag
-</div>
+bottom
</td>
<td style="text-align:left;">
-<div style="font-size: 18px;">
-21
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg);" data-toggle="tooltip" title="<div style="font-size: 18px;">21</div>">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-160
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #420A68FF;font-size: 14px;">
-14
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="bottom" data-content="bottom">Message on bottom</span>
</td>
</tr>
<tr>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: #932667FF;">
-Datsun 710
-</div>
+right
</td>
<td style="text-align:left;">
-<div style="font-size: 18px;">
-22.8
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);" data-toggle="tooltip" title="<div style="font-size: 18px;">22.8</div>">
-4
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-style: italic;color: green;">
-108
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #932667FF;font-size: 16px;">
-16
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="right" data-content="right">Message on right</span>
</td>
</tr>
<tr>
<td style="text-align:left;">
-<div style=" font-weight: bold;color: #DD513AFF;">
-Hornet 4 Drive
-</div>
+left
</td>
<td style="text-align:left;">
-<div style="font-size: 18px;">
-21.4
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg);" data-toggle="tooltip" title="<div style="font-size: 18px;">21.4</div>">
-6
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-258
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #DD513AFF;font-size: 18px;">
-18
-</div>
-</td>
-</tr>
-<tr>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: #FCA50AFF;">
-Hornet Sportabout
-</div>
-</td>
-<td style="text-align:left;">
-18.7
-</td>
-<td style="text-align:left;">
-<div style="color: white;border-radius: 4px; padding-right: 2px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg);" data-toggle="tooltip" title="18.7">
-8
-</div>
-</td>
-<td style="text-align:left;">
-<div style=" font-weight: bold;color: red;">
-360
-</div>
-</td>
-<td style="text-align:left;">
-<div style="color: #FCA50AFF;font-size: 20px;">
-20
-</div>
+<span style data-toggle="popover" data-trigger="hover" data-placement="left" data-content="left">Message on left</span>
</td>
</tr>
</tbody>
</table>
-<div id="section" class="section level2">
-<h2></h2>
+</div>
+<div id="links" class="section level2">
+<h2>Links</h2>
+<p>You can add links to text via <code>text_spec("Google", link = "https://google.com")</code>: <a href="https://google.com" style>Google</a>. If you want your hover message to be more obvious, it might be a good idea to put a <code>#</code> in the <code>link</code> option. <code>text_spec("Hover on me", link = "#", popover = "Hello")</code>: <a href="#" style data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello">Hover on me</a></p>
</div>
</div>
<div id="grouped-columns-rows" class="section level1">
@@ -3005,7 +3414,7 @@
3
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3021,7 +3430,7 @@
5
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3029,7 +3438,7 @@
6
</td>
<td style="text-align:center;">
-1
+0
</td>
</tr>
<tr>
@@ -3086,7 +3495,7 @@
12
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>
@@ -3105,7 +3514,7 @@
14
</td>
<td style="text-align:center;">
-0
+1
</td>
</tr>
<tr>