Collapsible box not responding in navbarPage

49 Views Asked by At

enter image description hereI'm currently developing a compact R Shiny application, but I've encountered an issue where the collapsible boxes fail to collapse upon clicking. Despite attempting different solutions, the problem persists. I would greatly appreciate assistance in resolving this matter.

Furthermore, I'm interested in learning how to customize the visual appearance of these boxes (the solidHeader and Collapsible parameters); Specifically, I'd like the boxes of my navbarPage ("Comparizon table" and "Closing price chart") to collapse when clicking the '-' button.

Below is a minimal example for reference:

library(shinydashboard)
library(shinyWidgets)
library(shiny)
library(quantmod)
library(DT)
library(highcharter)
library(shinyjs)
library(shinythemes)  

# I using getSymbols to retrieve data
the_data <- getSymbols("AAPL", src = "yahoo", from = "2018-11-07", to = Sys.Date(), auto.assign = FALSE)
# The keep only the "Adjusted Close" as time serie
Prix_de_cloture <- Cl(the_data)

#My UI part
ui <- fluidPage(
  titlePanel(""),
  navbarPage(
    "Clusters de Volatilité",
    header = tagList(
      useShinydashboard()
    ),
    inverse = TRUE,
    theme = shinytheme("cerulean"),
    shinyjs::useShinyjs(),
    shinyjs::inlineCSS(
      ".main-sidebar { background-color: #f8f9fa; }"
    ),
    tabPanel("Analyses primaires",
             sidebarLayout(
               sidebarPanel(align = "center",
                            selectInput("ticker", "Choisir un Ticker :", c("AAPL", "MSFT", "GOOGL", "AMZN")),
                            dateRangeInput("date", strong("Choisir les dates"),
                                           start = "2020-01-06", end = (Sys.Date()-1))
               ),
               mainPanel(
                 fluidRow(
                   # DT Table
                   box(title = "Comparizon table",
                       status = "primary",
                       solidHeader = TRUE,
                       collapsible = TRUE,
                       DTOutput("Comparizontable"),
                       width = 12,
                       height = 'auto'),
                   br(), br(),

                   # Highchart
                   box(title = "Closing price chart",
                       status = "primary",
                       solidHeader = TRUE,
                       collapsible = TRUE,
                       highchartOutput("closing_price"),
                       width = 12,
                       height = 'auto')
                 )
               )
             )
    )
  ))

The server part

server <- function(input, output) {
  output$Comparizontable <- renderDataTable({
    info.mat <- structure(c(9.342, 9.354, 9.342, 9.347, 9.344, 9.36, 9.344, 9.35,
                            9.349, 9.369, 9.349, 9.356, 9.37, 9.39, 9.37, 9.378, 9.345, 9.365,
                            9.345, 9.353), dim = 4:5, dimnames = list(c("Akaike", "Bayes",
                                                                        "Shibata", "Hannan-Quinn"), c("Arch(1,1)", "GARCH(1,1)", "TGARCH(1,1)",
                                                                                                      "EGARCH(1,1)", "GJR-GARCH(1,1)")))
    datatable(info.mat, escape = FALSE)
  })

  output$closing_price <- renderHighchart({
    # Trying to plot the graph
    hchart(the_data)
  })
}

# Run the application
shinyApp(ui, server)

Shiny output

0

There are 0 best solutions below