diff --git a/.ci/requirements.txt b/.ci/requirements.txt index 9c717358d40e1bfa65a49b66e4f4b8e23c435b50..de7d3a90aebbfb30c043492b7a6013e7b4a7685f 100644 --- a/.ci/requirements.txt +++ b/.ci/requirements.txt @@ -5,6 +5,7 @@ bioconductor-biocstyle r-htmltools r-flexdashboard r-glue +r-leaflet r-knitr r-magrittr r-stringi diff --git a/R/get_set.R b/R/get_set.R index 685f655185bcba960347cf7c44b2958a5cc5b6ce..4ffcf19fef0332b663b83dd1b82fa339580caef4 100644 --- a/R/get_set.R +++ b/R/get_set.R @@ -67,7 +67,7 @@ setMethod("source", "i2dashboard", function(dashboard) dashboard@source) #' @rdname i2dashboard-methods setMethod("source<-", "i2dashboard", function(dashboard, value) { - dashboard@source <- tolower(as.character(value)) + dashboard@source <- as.character(value) dashboard }) diff --git a/docs/articles/i2dash-intro.html b/docs/articles/i2dash-intro.html index 6fd792a67c0404edd45fd7db238cc80aa06c398a..2b62739e7b20ff467a31599019ac65712cf07232 100644 --- a/docs/articles/i2dash-intro.html +++ b/docs/articles/i2dash-intro.html @@ -88,7 +88,7 @@ <a class="author_email" href="mailto:#"></a><a href="mailto:arsenij.ustjanzew@mpi-bn.mpg.de" class="email">arsenij.ustjanzew@mpi-bn.mpg.de</a> - <h4 class="date">16 April 2020</h4> + <h4 class="date">22 April 2020</h4> <div class="hidden name"><code>i2dash-intro.Rmd</code></div> @@ -97,19 +97,8 @@ -<p>Vignette last complied on 2020-04-16. i2dash is licenced under MIT + file LICENSE.</p> -<script type="text/javascript"> -document.addEventListener("DOMContentLoaded", function() { - document.querySelector("h1").className = "title"; -}); -</script><script type="text/javascript"> -document.addEventListener("DOMContentLoaded", function() { - var links = document.links; - for (var i = 0, linksLength = links.length; i < linksLength; i++) - if (links[i].hostname != window.location.hostname) - links[i].target = '_blank'; -}); -</script><p><img src="images/i2dash_logo.png" align="center" width="150px"></p> +<p>Vignette last complied on 2020-04-22. i2dash is licenced under MIT + file LICENSE.</p> +<p><img src="images/i2dash_logo.png" align="center" width="150px"></p> <div id="introduction-and-scope" class="section level1"> <h1 class="hasAnchor"> <a href="#introduction-and-scope" class="anchor"></a>Introduction and scope</h1> @@ -156,10 +145,11 @@ document.addEventListener("DOMContentLoaded", function() { <span class="co">#> A flexdashboard with the title: Dashboard title</span> <span class="co">#> ... containing 1 pages:</span> <span class="co">#> ... the page 'default' with the title 'Default page' contains 0 components.</span></pre></body></html></div> -<p>Retrospectively, it is also possible to change the <code>interactive</code> slot of the <code>i2dashboard</code> object as follows:</p> +<p>With several accessor methods, it is also possible to change the slots <code>interactive</code>, <code>author</code>, <code>theme</code>, <code>datadir</code> and <code>title</code> of the <code>i2dashboard</code> object retrospectively:</p> <div class="sourceCode" id="cb5"><html><body><pre class="r"><span class="fu"><a href="../reference/i2dashboard-methods.html">interactivity</a></span>(<span class="no">dashboard</span>) <span class="kw"><-</span> <span class="fl">TRUE</span> -<span class="co"># or</span> -<span class="fu"><a href="../reference/i2dashboard-methods.html">interactivity</a></span>(<span class="no">dashboard</span>) <span class="kw"><-</span> <span class="fl">FALSE</span></pre></body></html></div> +<span class="fu"><a href="../reference/i2dashboard-methods.html">theme</a></span>(<span class="no">dashboard</span>) <span class="kw"><-</span> <span class="st">"cosmo"</span> +<span class="fu"><a href="../reference/i2dashboard-methods.html">author</a></span>(<span class="no">dashboard</span>) <span class="kw"><-</span> <span class="st">"John Doe, MaxMustermann"</span> +<span class="fu"><a href="../reference/i2dashboard-methods.html">title</a></span>(<span class="no">dashboard</span>) <span class="kw"><-</span> <span class="st">"New dashboard title"</span></pre></body></html></div> </div> <div id="adding-and-removing-pages" class="section level2"> <h2 class="hasAnchor"> @@ -272,18 +262,62 @@ Figure 4: The resulting page with content generated from a function. </p> </div> </div> +<div id="linking-components" class="section level3"> +<h3 class="hasAnchor"> +<a href="#linking-components" class="anchor"></a>Linking components</h3> +<p>The linking of several components enables an improvement in the communication of the structure of high-dimensional data. When linking several components, the data of the two visualizations are connected to each other by queries. Thus the interactive manipulation, e.g. selecting data points, of a component is transferred to the associated component.The package <code>plotly</code> enables us to link plotly charts in a client-side way (i.e., no special web server or callback to R is required). The following example demonstrates, how to link two plots together by using plotly. <a href="https://plotly-r.com/client-side-linking.html">Here</a> you can find a detailed explanation and further examples of the clint-sided linkink mechanism of <code>plotly</code>.</p> +<p>First, we load the data and create an object of class <code><a href="https://rdrr.io/pkg/crosstalk/man/SharedData.html">crosstalk::SharedData</a></code> with the function <code>highlight_key</code>. This enables to query the data.</p> +<div class="sourceCode" id="cb13"><html><body><pre class="r"><span class="co"># load the `txhousing` dataset</span> +<span class="fu"><a href="https://rdrr.io/r/utils/data.html">data</a></span>(<span class="no">txhousing</span>, <span class="kw">package</span> <span class="kw">=</span> <span class="st">"ggplot2"</span>) + +<span class="co"># declare `city` as the SQL 'query by' column</span> +<span class="no">tx</span> <span class="kw"><-</span> <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/highlight_key.html">highlight_key</a></span>(<span class="no">txhousing</span>, ~<span class="no">city</span>)</pre></body></html></div> +<p>Next, we initiate a plotly object (<code>base</code>) with the data object. And create two further plots (<code>time_series</code> and <code>dot_plot</code>) based on the new plotly object.</p> +<div class="sourceCode" id="cb14"><html><body><pre class="r"><span class="co"># initiate a plotly object</span> +<span class="no">base</span> <span class="kw"><-</span> <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/plot_ly.html">plot_ly</a></span>(<span class="no">tx</span>, <span class="kw">color</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/AsIs.html">I</a></span>(<span class="st">"black"</span>)) <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/reexports.html">group_by</a></span>(<span class="no">city</span>) + +<span class="co"># create a time series of median house price</span> +<span class="no">time_series</span> <span class="kw"><-</span> <span class="no">base</span> <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/reexports.html">group_by</a></span>(<span class="no">city</span>) <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/add_trace.html">add_lines</a></span>(<span class="kw">x</span> <span class="kw">=</span> ~<span class="no">date</span>, <span class="kw">y</span> <span class="kw">=</span> ~<span class="no">median</span>) + +<span class="no">dot_plot</span> <span class="kw"><-</span> <span class="no">base</span> <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/reexports.html">summarise</a></span>(<span class="kw">miss</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/sum.html">sum</a></span>(<span class="fu"><a href="https://rdrr.io/r/base/NA.html">is.na</a></span>(<span class="no">median</span>))) <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/reexports.html">filter</a></span>(<span class="no">miss</span> <span class="kw">></span> <span class="fl">0</span>) <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/add_trace.html">add_markers</a></span>( + <span class="kw">x</span> <span class="kw">=</span> ~<span class="no">miss</span>, + <span class="kw">y</span> <span class="kw">=</span> ~<span class="kw pkg">forcats</span><span class="kw ns">::</span><span class="fu">fct_reorder</span>(<span class="no">city</span>, <span class="no">miss</span>), + <span class="kw">hoverinfo</span> <span class="kw">=</span> <span class="st">"x+y"</span> + ) <span class="kw">%>%</span> + <span class="fu"><a href="https://rdrr.io/pkg/plotly/man/layout.html">layout</a></span>( + <span class="kw">xaxis</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="kw">title</span> <span class="kw">=</span> <span class="st">"Number of months missing"</span>), + <span class="kw">yaxis</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html">list</a></span>(<span class="kw">title</span> <span class="kw">=</span> <span class="st">""</span>) + )</pre></body></html></div> +<p>Finally, we add a new page to our dashboard, create two components and provide the <code>plotly</code> objects as input.</p> +<div class="sourceCode" id="cb15"><html><body><pre class="r"><span class="no">dashboard</span> <span class="kw">%<>%</span> + <span class="fu"><a href="../reference/i2dashboard-pages.html">add_page</a></span>(<span class="kw">page</span><span class="kw">=</span><span class="st">"page5"</span>, <span class="kw">layout</span><span class="kw">=</span><span class="st">"2x2_grid"</span>, <span class="kw">title</span> <span class="kw">=</span> <span class="st">"Linked components"</span>) <span class="kw">%>%</span> + <span class="fu"><a href="../reference/i2dashboard-content.html">add_component</a></span>(<span class="kw">page</span><span class="kw">=</span><span class="st">"page5"</span>, <span class="kw">component</span><span class="kw">=</span><span class="no">dot_plot</span>) <span class="kw">%>%</span> + <span class="fu"><a href="../reference/i2dashboard-content.html">add_component</a></span>(<span class="kw">page</span><span class="kw">=</span><span class="st">"page5"</span>, <span class="kw">component</span><span class="kw">=</span><span class="no">time_series</span>)</pre></body></html></div> +<p>This results in the following dashboard page. We can select a data point in the left component and the lines of the right plot will be colour highlightened according to the selection:</p> +<div class="figure"> +<img src="images/example_page5.png" alt="Figure 5: The resulting page with two linked components." width="960"><p class="caption"> +Figure 5: The resulting page with two linked components. +</p> +</div> +</div> </div> <div id="colormaps" class="section level2"> <h2 class="hasAnchor"> <a href="#colormaps" class="anchor"></a>Colormaps</h2> <p>Data analysis often have certain experimental factors (<em>e.g.</em> year or category) that are included repeatedly in figure scales. When communicating findings from such analysis, it would be desirable to have consitent representation (<em>e.g.</em> by color) of those factors across different figures. In i2dash, we solve this problem by introducing <strong>colormaps</strong>. Colormaps can be used by components to look up color scales for experimental factors. Here, we briefly introduce how colormaps are added to the dashboard, but refer to the development vignette for further information.</p> <p>Lets assume we have an experimental factor called year:</p> -<div class="sourceCode" id="cb13"><html><body><pre class="r"><span class="no">year</span> <span class="kw"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/factor.html">factor</a></span>(<span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">2014</span>, <span class="fl">2014</span>, <span class="fl">2015</span>, <span class="fl">2017</span>, <span class="fl">2019</span>, <span class="fl">2019</span>), <span class="kw">levels</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">2014</span>:<span class="fl">2021</span>))</pre></body></html></div> +<div class="sourceCode" id="cb16"><html><body><pre class="r"><span class="no">year</span> <span class="kw"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/factor.html">factor</a></span>(<span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">2014</span>, <span class="fl">2014</span>, <span class="fl">2015</span>, <span class="fl">2017</span>, <span class="fl">2019</span>, <span class="fl">2019</span>), <span class="kw">levels</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="fl">2014</span>:<span class="fl">2021</span>))</pre></body></html></div> <p>To assign each level a color from the <a href="http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=9">sequential greens</a> palette from the <em><a href="https://CRAN.R-project.org/package=RColorBrewer">RColorBrewer</a></em> package, we create a character vector with the colors and assign the levels as names.</p> -<div class="sourceCode" id="cb14"><html><body><pre class="r"><span class="no">colors</span> <span class="kw"><-</span> <span class="kw pkg">RColorBrewer</span><span class="kw ns">::</span><span class="fu"><a href="https://rdrr.io/pkg/RColorBrewer/man/ColorBrewer.html">brewer.pal</a></span>(<span class="fl">8</span>, <span class="st">"BuGn"</span>) +<div class="sourceCode" id="cb17"><html><body><pre class="r"><span class="no">colors</span> <span class="kw"><-</span> <span class="kw pkg">RColorBrewer</span><span class="kw ns">::</span><span class="fu"><a href="https://rdrr.io/pkg/RColorBrewer/man/ColorBrewer.html">brewer.pal</a></span>(<span class="fl">8</span>, <span class="st">"BuGn"</span>) <span class="fu"><a href="https://rdrr.io/r/base/names.html">names</a></span>(<span class="no">colors</span>) <span class="kw"><-</span> <span class="fu"><a href="https://rdrr.io/r/base/levels.html">levels</a></span>(<span class="no">year</span>)</pre></body></html></div> <p>The colormap can then be added to the dashboard. From there on, <strong>components</strong> can consume the colormap and use the desired colors for figure scales.</p> -<div class="sourceCode" id="cb15"><html><body><pre class="r"><span class="no">dashboard</span> <span class="kw">%<>%</span> +<div class="sourceCode" id="cb18"><html><body><pre class="r"><span class="no">dashboard</span> <span class="kw">%<>%</span> <span class="fu"><a href="../reference/i2dashboard-content.html">add_colormap</a></span>(<span class="kw">map</span> <span class="kw">=</span> <span class="no">colors</span>, <span class="kw">name</span> <span class="kw">=</span> <span class="st">"year"</span>)</pre></body></html></div> </div> @@ -291,15 +325,15 @@ Figure 4: The resulting page with content generated from a function. <h2 class="hasAnchor"> <a href="#dashboard-assembly" class="anchor"></a>Dashboard assembly</h2> <p>At any point in time, and particular when data analysis is finished, the <code>assemble</code> function can be used to generate representation of the dashboard in R markdown format. Using the <code>pages</code> parameter, we can define which pages will be included in the output.</p> -<div class="sourceCode" id="cb16"><html><body><pre class="r"><span class="no">dashboard</span> <span class="kw">%>%</span> - <span class="fu"><a href="../reference/assemble.html">assemble</a></span>(<span class="kw">pages</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="st">"page1"</span>, <span class="st">"page3"</span>, <span class="st">"page4"</span>))</pre></body></html></div> +<div class="sourceCode" id="cb19"><html><body><pre class="r"><span class="no">dashboard</span> <span class="kw">%>%</span> + <span class="fu"><a href="../reference/assemble.html">assemble</a></span>(<span class="kw">pages</span> <span class="kw">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html">c</a></span>(<span class="st">"page1"</span>, <span class="st">"page3"</span>, <span class="st">"page4"</span>, <span class="st">"page5"</span>))</pre></body></html></div> <p>The resulting R Markdown file can be run with <em><a href="https://CRAN.R-project.org/package=Shiny">Shiny</a></em> or rendered with <em><a href="https://CRAN.R-project.org/package=rmarkdown">rmarkdown</a></em>.</p> </div> </div> <div id="session-info" class="section level1 unnumbered"> <h1 class="hasAnchor"> <a href="#session-info" class="anchor"></a>Session Info</h1> -<div class="sourceCode" id="cb17"><html><body><pre class="r"><span class="fu"><a href="https://rdrr.io/r/utils/sessionInfo.html">sessionInfo</a></span>() +<div class="sourceCode" id="cb20"><html><body><pre class="r"><span class="fu"><a href="https://rdrr.io/r/utils/sessionInfo.html">sessionInfo</a></span>() <span class="co">#> R version 3.6.2 (2019-12-12)</span> <span class="co">#> Platform: x86_64-pc-linux-gnu (64-bit)</span> <span class="co">#> Running under: Debian GNU/Linux 10 (buster)</span> @@ -319,19 +353,30 @@ Figure 4: The resulting page with content generated from a function. <span class="co">#> [1] stats graphics grDevices utils datasets methods base </span> <span class="co">#> </span> <span class="co">#> other attached packages:</span> -<span class="co">#> [1] i2dash_0.2 magrittr_1.5 BiocStyle_2.14.4</span> +<span class="co">#> [1] plotly_4.9.2 ggplot2_3.3.0 leaflet_2.0.3 i2dash_0.2 </span> +<span class="co">#> [5] magrittr_1.5 BiocStyle_2.14.4</span> <span class="co">#> </span> <span class="co">#> loaded via a namespace (and not attached):</span> -<span class="co">#> [1] Rcpp_1.0.3 rstudioapi_0.11 knitr_1.28 </span> -<span class="co">#> [4] MASS_7.3-51.4 R6_2.4.1 rlang_0.4.5 </span> -<span class="co">#> [7] highr_0.8 stringr_1.4.0 tools_3.6.2 </span> -<span class="co">#> [10] xfun_0.12 png_0.1-7 htmltools_0.4.0 </span> -<span class="co">#> [13] yaml_2.2.1 assertthat_0.2.1 digest_0.6.25 </span> -<span class="co">#> [16] rprojroot_1.3-2 pkgdown_1.5.1 crayon_1.3.4 </span> -<span class="co">#> [19] BiocManager_1.30.10 fs_1.3.1 glue_1.3.1 </span> -<span class="co">#> [22] memoise_1.1.0 evaluate_0.14 rmarkdown_2.1 </span> -<span class="co">#> [25] stringi_1.4.6 compiler_3.6.2 desc_1.2.0 </span> -<span class="co">#> [28] backports_1.1.5</span></pre></body></html></div> +<span class="co">#> [1] tidyselect_1.0.0 xfun_0.13 purrr_0.3.4 </span> +<span class="co">#> [4] colorspace_1.4-1 vctrs_0.2.4 viridisLite_0.3.0 </span> +<span class="co">#> [7] htmltools_0.4.0 yaml_2.2.1 rlang_0.4.5 </span> +<span class="co">#> [10] pkgdown_1.5.1 later_1.0.0 pillar_1.4.3 </span> +<span class="co">#> [13] glue_1.4.0 withr_2.2.0 lifecycle_0.2.0 </span> +<span class="co">#> [16] stringr_1.4.0 munsell_0.5.0 gtable_0.3.0 </span> +<span class="co">#> [19] htmlwidgets_1.5.1 memoise_1.1.0 evaluate_0.14 </span> +<span class="co">#> [22] knitr_1.28 fastmap_1.0.1 httpuv_1.5.2 </span> +<span class="co">#> [25] crosstalk_1.0.0 highr_0.8 Rcpp_1.0.4.6 </span> +<span class="co">#> [28] xtable_1.8-4 promises_1.1.0 backports_1.1.6 </span> +<span class="co">#> [31] scales_1.1.0 BiocManager_1.30.10 desc_1.2.0 </span> +<span class="co">#> [34] jsonlite_1.6.1 mime_0.9 fs_1.4.1 </span> +<span class="co">#> [37] png_0.1-7 digest_0.6.25 stringi_1.4.6 </span> +<span class="co">#> [40] dplyr_0.8.4 shiny_1.4.0.2 rprojroot_1.3-2 </span> +<span class="co">#> [43] grid_3.6.2 tools_3.6.2 lazyeval_0.2.2 </span> +<span class="co">#> [46] tibble_3.0.1 tidyr_1.0.2 crayon_1.3.4 </span> +<span class="co">#> [49] pkgconfig_2.0.3 MASS_7.3-51.4 ellipsis_0.3.0 </span> +<span class="co">#> [52] data.table_1.12.8 httr_1.4.1 assertthat_0.2.1 </span> +<span class="co">#> [55] rmarkdown_2.1 rstudioapi_0.11 R6_2.4.1 </span> +<span class="co">#> [58] compiler_3.6.2</span></pre></body></html></div> </div> </div> diff --git a/docs/articles/images/example_page5.png b/docs/articles/images/example_page5.png new file mode 100644 index 0000000000000000000000000000000000000000..47cae6a0736897cfd66f0af5a597426bfe3b76be Binary files /dev/null and b/docs/articles/images/example_page5.png differ diff --git a/docs/pkgdown.yml b/docs/pkgdown.yml index 1c564381eb897155f77096e432a6c4effec5c301..52124d18b47aaf44f17dcafd4005f072b795db81 100644 --- a/docs/pkgdown.yml +++ b/docs/pkgdown.yml @@ -3,5 +3,5 @@ pkgdown: 1.5.1 pkgdown_sha: ~ articles: i2dash-intro: i2dash-intro.html -last_built: 2020-04-16T10:17Z +last_built: 2020-04-22T09:30Z diff --git a/docs/reference/i2dashboard-content.html b/docs/reference/i2dashboard-content.html index 2b1c5481e58ac29f7f7ef9df7dbafdc9549012fa..312fc8ef97e495e57724214a0756e60e415f128f 100644 --- a/docs/reference/i2dashboard-content.html +++ b/docs/reference/i2dashboard-content.html @@ -140,10 +140,10 @@ <span class='fu'>add_link</span>(<span class='no'>dashboard</span>, <span class='no'>...</span>) <span class='co'># S4 method for i2dashboard,character</span> -<span class='fu'>add_component</span>(<span class='no'>dashboard</span>, <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, <span class='no'>component</span>, <span class='kw'>copy</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>, <span class='no'>...</span>) +<span class='fu'>add_component</span>(<span class='no'>dashboard</span>, <span class='no'>component</span>, <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, <span class='kw'>copy</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>, <span class='no'>...</span>) <span class='co'># S4 method for i2dashboard,`function`</span> -<span class='fu'>add_component</span>(<span class='no'>dashboard</span>, <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, <span class='no'>component</span>, <span class='no'>...</span>) +<span class='fu'>add_component</span>(<span class='no'>dashboard</span>, <span class='no'>component</span>, <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, <span class='no'>...</span>) <span class='co'># S4 method for i2dashboard,gg</span> <span class='fu'>add_component</span>(<span class='no'>dashboard</span>, <span class='no'>component</span>, <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, <span class='no'>...</span>) @@ -173,7 +173,17 @@ <span class='co'># S4 method for i2dashboard</span> <span class='fu'>add_colormap</span>(<span class='no'>dashboard</span>, <span class='no'>map</span>, <span class='no'>name</span>) -<span class='co'># S4 method for i2dashboard</span> +<span class='co'># S4 method for i2dashboard,character</span> +<span class='fu'>add_to_sidebar</span>( + <span class='no'>dashboard</span>, + <span class='no'>component</span>, + <span class='kw'>page</span> <span class='kw'>=</span> <span class='st'>"default"</span>, + <span class='kw'>global</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>, + <span class='kw'>copy</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>, + <span class='no'>...</span> +) + +<span class='co'># S4 method for i2dashboard,`function`</span> <span class='fu'>add_to_sidebar</span>( <span class='no'>dashboard</span>, <span class='no'>component</span>, @@ -196,7 +206,7 @@ </tr> <tr> <th>...</th> - <td><p>Additional parameters passed to the components render function.</p></td> + <td><p>Additional parameters passed to the components render function. In case of an image, parameters <code>height</code> and <code>width</code> can be used to define the dimensions of the image with CSS or provide an alternative text with <code>image_alt_text</code>.</p></td> </tr> <tr> <th>page</th> diff --git a/docs/reference/render_image.html b/docs/reference/render_image.html index 86a9125af104af25188a101866711afb5982b615..099226f3e6f10b799304107c35c75532189c5911 100644 --- a/docs/reference/render_image.html +++ b/docs/reference/render_image.html @@ -131,7 +131,14 @@ <p>Method to embed an image file in a component</p> </div> - <pre class="usage"><span class='fu'>render_image</span>(<span class='no'>image</span>, <span class='kw'>image_alt_text</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, <span class='kw'>title</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, <span class='kw'>raw</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>)</pre> + <pre class="usage"><span class='fu'>render_image</span>( + <span class='no'>image</span>, + <span class='kw'>image_alt_text</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, + <span class='kw'>title</span> <span class='kw'>=</span> <span class='kw'>NULL</span>, + <span class='kw'>raw</span> <span class='kw'>=</span> <span class='fl'>FALSE</span>, + <span class='kw'>width</span> <span class='kw'>=</span> <span class='st'>"100%"</span>, + <span class='kw'>height</span> <span class='kw'>=</span> <span class='st'>"auto"</span> +)</pre> <h2 class="hasAnchor" id="arguments"><a class="anchor" href="#arguments"></a>Arguments</h2> <table class="ref-arguments"> @@ -152,6 +159,14 @@ <th>raw</th> <td><p>Whether or not to emit solely the markdown image code.</p></td> </tr> + <tr> + <th>width</th> + <td><p>Width defined with CSS in the HTML img-tag.</p></td> + </tr> + <tr> + <th>height</th> + <td><p>Height defined with CSS in the HTML img-tag.</p></td> + </tr> </table> <h2 class="hasAnchor" id="value"><a class="anchor" href="#value"></a>Value</h2>