Складные / Аккордеонное меню в уценке R с SharedData (график и DT) - PullRequest
Новая
       26

Складные / Аккордеонное меню в уценке R с SharedData (график и DT)

0 голосов
/ 24 января 2019

Я пытаюсь создать складное меню в r уценке. Я создал воспроизводимый пример с 5 аккордеонами. Внутри этих аккордеонов я хочу показать сюжет и таблицу данных, которые связаны объектом SharedData. Когда уценка связывает документ, объект с данными не виден.

Пример с меню исходит из: https://www.w3schools.com/howto/howto_js_accordion.asp

Есть ли способ построить вывод данных с данными? Проблема заключается в этой строке кода: 

    htmltools::tagList(list(table))," \n",

.Rmd 

---
title: "Collapsibles/Accordion Menu"
output: 
  html_document:
    css: stylesheet.css
editor_options: 
  chunk_output_type: console
---

```{r setup, include=FALSE, Options + Packages}
knitr::opts_chunk$set(echo = FALSE,
                  message = FALSE,
                  warning = FALSE,
                  error = TRUE,
                  fig.align = "center")
library(purrr)
library(tidyverse)
library(plotly)
library(pander)
library(crosstalk)
library(DT)
```

```{r, results='asis', Output}
print_accordion <- function(X) {
  df_plot <- tibble(x = rnorm(10000),
                    y = rnorm(10000),
                    cat = rep(1:10, length.out = 10000))

  sd_p <- SharedData$new(df_plot, 
                         ~cat, 
                         group = paste0("Group ", X))

  plot <- sd_p %>% 
    plot_ly() %>% 
    add_markers(x = ~x,
                y = ~y,
                color = ~cat) %>% 
    toWebGL()

  df_table <- df_plot %>% 
    group_by(cat) %>% 
    summarise(Mean = mean(x)) %>% 
    ungroup()

  sd_t <- SharedData$new(df_table, 
                         ~cat, 
                         group = paste0("Group ", X)) 


  table <- DT::datatable(sd_t) 

  cat(paste0("<button class='accordion'>Section ", X,"</button>\n",
             "<div class='panel'>\n",
             "<p>This is the text to Panel ", X,"</p>\n",
             htmltools::tagList(list(plot))," \n",
             htmltools::tagList(list(table))," \n",
             "</div>\n"
            )
      )
}

test <- tibble(x = 1:5) 

walk(test$x, print_accordion)

plotly_empty(height = "50px")
```

```{js, JavaScript part}
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
```

stylesheet.css 

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
   background-color: #bebebe;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   text-align: left;
   border: none;
   outline: none;
   transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the 
.active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
   background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}
...