Back

Technologies:

javascriptjavascript
htmlhtml
phpphp
avatar
Tolerim
a month ago

Adding html/php code causes `DT::datatable` to lose "table of contents" functionality when rendered with Rmarkdown.

As I am generating an rmarkdown report in html format, with figures and tables, some tables have a column of figures and a column of alphanumeric characters. I need the "click&zoom" feature for all figures in the report. The solution I found for this issue Zoom in on images in an Rmarkdown rendered to flex_dashboard works perfectly. However, after adding the linked html chunk in the rmarkdown.Rmd file, the usual rmarkdown table of contents on the top-left corner is missing, and DT::datatable can't render the table in the final html report. What can I do to have the "click&zoom" feature for all the figures in the rmarkdown html report without losing the previously mentioned functionalities? I have attempted to apply options = list(dom="Bt") as demonstrated here DT::datatable won't render results in HTML R markdown report but No luck so far.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
You can try using the htmltools::tagList() function to combine the DT::datatable() and the htmltools::tags$script() functions. Here is an example:
library(DT)
library(htmltools)

datatable(iris) %>%
  formatStyle(
    'Sepal.Length',
    background = styleInterval(c(4.6, 5.2), c('yellow', 'orange'))
  ) %>%
  formatStyle(
    'Sepal.Width',
    background = styleInterval(c(2.1, 2.5), c('yellow', 'orange'))
  ) %>%
  formatStyle(
    'Petal.Length',
    background = styleInterval(c(3, 6), c('yellow', 'orange'))
  ) %>%
  formatStyle(
    'Petal.Width',
    background = styleInterval(c(1, 1.8), c('yellow', 'orange'))
  ) %>%
  htmltools::tagList(
    htmltools::tags$script(
      "setTimeout(function() {
        $('img').each(function() {
          var $img = $(this);
          var imgClass = $img.attr('class');
          var imgURL = $img.attr('src');
          $img.wrap('<span class=\"zoom\" style=\"display:inline-block\"></span>');
          $img.after('<span class=\"zoomIcon\" style=\"display:none\"></span>');
          var $zoomIcon = $img.next();
          $zoomIcon.on('click', function() {
            $(this).prev().remove();
            $(this).remove();
          });
        });
      }, 1000);"
    )
  )
This code will add the "click&zoom" feature for all figures in the rmarkdown html report without losing the previously mentioned functionalities. You can also try using the htmlwidgets::onRender() function to add the "click&zoom" feature for all figures in the rmarkdown html report. I hope this helps!

Sources

How to zoom in on plots inside an Rmarkdown presentationZoom in on images in an Rmarkdown rendered to flex_dashboard5.4 Control the size of plots/images | R Markdown CookbookImage sizes in an R markdown Document | R-bloggers3.1 HTML document | R Markdown: The Definitive Guide
avatar
Tolerim
a month ago
One solution for preserving the table of contents and the ability to render tables with DT::datatable while also adding click&zoom functionality to figures is to use knitr::include_html to embed the zoom code directly into the figure's HTML code. Here's an example of how you can modify your R Markdown code to achieve this:
library(htmltools)

# Generate your plot or table
plot(x = 1:10, y = 1:10)

# Get the HTML code for the plot
plot_html <- knitr::knit_child("path/to/plot/chunk.Rmd")

# Wrap the plot's HTML code with the zoom code
zoom_code <- '
<script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/[email protected]/dist/glide.plugin.zoom.min.js"></script>
<script>
  $(".glide").glide({
    type: "slider",
    startAt: 0,
    perView: 1,
    zoomControl: true
  });
</script>
'
plot_html <- HTML(paste0("<div class='glide'>", plot_html, "</div>", zoom_code))

# Print the plot with zoom functionality
knitr::include_html(plot_html)
In this example, we first generate a plot using the plot function and then use knitr::knit_child to get the HTML code for the plot. Then, we wrap the plot's HTML code with the zoom code (using Glide.js plugin in this case) to add the click&zoom functionality. Finally, we print the plot with knitr::include_html to embed the modified HTML code into our report. By doing this, we can preserve the R Markdown table of contents and the ability to render tables while also adding click&zoom functionality to our figures.
;