improve color code setting
diff --git a/docs/use_kableExtra_with_formattable.html b/docs/use_kableExtra_with_formattable.html
index 31148f0..d0b54d4 100644
--- a/docs/use_kableExtra_with_formattable.html
+++ b/docs/use_kableExtra_with_formattable.html
@@ -11,7 +11,7 @@
<meta name="author" content="Hao Zhu" />
-<meta name="date" content="2017-10-11" />
+<meta name="date" content="2017-10-14" />
<title>Use kableExtra with formattable</title>
@@ -119,7 +119,7 @@
<h1 class="title toc-ignore">Use kableExtra with formattable</h1>
<h4 class="author"><em>Hao Zhu</em></h4>
-<h4 class="date"><em>2017-10-11</em></h4>
+<h4 class="date"><em>2017-10-14</em></h4>
</div>
@@ -188,16 +188,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
160
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -209,16 +209,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffcc6f">21.0</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg); -ms-transform: rotate(120deg); -o-transform: rotate(120deg); transform: rotate(120deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
160
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -230,16 +230,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffa500">22.8</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);">
4
</div>
</td>
<td style="text-align:left;">
-<div style=" font-style: italic; color: green;">
+<div style=" font-style: italic;color: green;">
108
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 53.14%">93</span>
</td>
</tr>
@@ -251,16 +251,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffc357">21.4</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); -ms-transform: rotate(240deg); -o-transform: rotate(240deg); transform: rotate(240deg);">
6
</div>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
258
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 62.86%">110</span>
</td>
</tr>
@@ -272,16 +272,16 @@
<span style="display: block; padding: 0 4px; border-radius: 4px; background-color: #ffffff">18.7</span>
</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);">
+<div style="color: white;border-radius: 4px; padding-right: 4px; padding-left: 4px; background-color: red;text-align: center;-webkit-transform: rotate(300deg); -moz-transform: rotate(300deg); -ms-transform: rotate(300deg); -o-transform: rotate(300deg); transform: rotate(300deg);">
8
</div>
</td>
<td style="text-align:left;">
-<div style=" font-weight: bold; color: red;">
+<div style=" font-weight: bold;color: red;">
360
</div>
</td>
-<td style="text-align:left;width: 3cm; ">
+<td style="text-align:left;width: 3cm; display: inline-block; ">
<span style="display: inline-block; direction: rtl; border-radius: 4px; padding-right: 2px; background-color: lightgreen; width: 100.00%">175</span>
</td>
</tr>
@@ -290,6 +290,287 @@
<p>Here is a little bit more explanation. Both <code>formattable::color_tile</code> and <code>formattable::color_bar</code> returns a function object which can take a numeric vector. That’s why you can put things like <code>(mpg)</code> after <code>color_tile("white", "orange")</code> as you can see in the <code>mutate</code> function. This way of using the function may look a little odd but is totally valid (, I think :P).</p>
<p>Also, if you are using it in this way, make sure you put <code>escape = F</code> in <code>kable</code>.</p>
<p>On the other hand, <code>cell_spec()</code> is a new function in <code>kableExtra()</code> to format cells <em><strong>before you pipe the table into <code>kable</code></strong></em>. Note that you can either specify format (<code>html</code> or <code>latex</code>) in function or do that via <code>options(knitr.table.format)</code> so you don’t need to do it everytime.</p>
+<hr />
+<p>I also added a few helper functions to use together with cell_spec. One good example is <code>spec_color</code>, which gives you the ability to use viridis color map in your table. Others include <code>spec_font_size</code> and <code>spec_angle</code>.</p>
+<pre class="r"><code>iris[1:10, ] %>%
+ mutate_if(is.numeric, function(x){
+ cell_spec(x, "html", bold = T, color = spec_color(x), font_size = spec_font_size(x))
+ }) %>%
+ kable("html", escape = F, align = "c") %>%
+ kable_styling(full_width = F)</code></pre>
+<table class="table" 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;">
+<div style=" font-weight: bold;color: rgba(66, 190, 113, 1);font-size: 17px;">
+5.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+3.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(72, 37, 118, 1);font-size: 11px;">
+3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 95, 141, 1);font-size: 13px;">
+4.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(52, 96, 141, 1);font-size: 13px;">
+3.2
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+1.3
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 191, 112, 1);font-size: 17px;">
+3.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+5.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+3.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+1.7
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(253, 231, 37, 1);font-size: 20px;">
+0.4
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+4.6
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(53, 183, 121, 1);font-size: 17px;">
+0.3
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(34, 168, 132, 1);font-size: 16px;">
+5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+3.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+4.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+2.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(59, 82, 139, 1);font-size: 12px;">
+1.4
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(49, 104, 142, 1);font-size: 13px;">
+0.2
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+<tr>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+4.9
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(65, 68, 135, 1);font-size: 12px;">
+3.1
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(33, 144, 141, 1);font-size: 15px;">
+1.5
+</div>
+</td>
+<td style="text-align:center;">
+<div style=" font-weight: bold;color: rgba(68, 1, 84, 1);font-size: 10px;">
+0.1
+</div>
+</td>
+<td style="text-align:center;">
+setosa
+</td>
+</tr>
+</tbody>
+</table>