Registerkarte spezifische Sidebar in Shinydashboard

Question

Ich verwende das shinyjs-Paket in R, um für onclick Typ Ereignisse zu ermöglichen, zwischen Tabs in einem Tabset zu navigieren. Jede Registerkarte verfügt über eine bestimmte Seitenleiste und es gibt mehrere (zwei) Möglichkeiten, zwischen den einzelnen Registerkarten zu wechseln (z. B. durch Klicken auf die Registerkarte selbst oder durch Klicken auf die Wertfelder). Ich möchte sicherstellen, dass unabhängig davon, wie Sie zu einer bestimmten Registerkarte gelangen, die richtigen Seitenleisten geladen werden.

# load libraries 
require(shiny) 
require(shinydashboard) 
require(shinyjs) 

# create a simple app 
ui <- dashboardPage(
    title='Loading graphs', 
    dashboardHeader(
    title = 'Loading Graphs' 
), 
    dashboardSidebar(
    div(id='tab1_sidebar', 
     sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)), 
    shinyjs::hidden(
     div(id='tab2_sidebar', 
      sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2)) 
    ) 
), 
    dashboardBody(
    useShinyjs(), 
    tabsetPanel(
     id = "navbar", 
     tabPanel(title="tab1 title",id="tab1",value='tab1_val', 
       valueBoxOutput('tab1_valuebox')), 
     tabPanel(title="tab2 title",id="tab2",value='tab2_val', 
       valueBoxOutput('tab2_valuebox')) 
    ) 
) 
) 

server <- shinyServer(function(input, output, session) { 

    output$tab1_valuebox <- renderValueBox({ 
    valueBox('1000',subtitle = "blah blah",icon = icon("car"), 
      color = "blue" 
    ) 
    }) 

    output$tab2_valuebox <- renderValueBox({ 
    valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"), 
      color = "red" 
    ) 
    }) 



    # on click of a tab1 valuebox 
    shinyjs::onclick('tab1_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab2_val') 
    # update the sidebar to match the tab 
    toggle('tab1_sidebar') 
    toggle('tab2_sidebar') 
    }) 

    # on click of a tab2 valuebox 
    shinyjs::onclick('tab2_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab1_val') 
    # update the sidebar to match the tab 
    toggle('tab1_sidebar') 
    toggle('tab2_sidebar') 
    }) 
}) 

shinyApp(ui=ui,server=server) 

In dem obigen Code, wenn die Seitenleiste ändert sich nicht auf die Registerkarte klicken, aber wenn ich den folgenden Code in den Server-Komponente enthalten für das Klicken auf den Reiter zu nehmen erlauben es scheint nicht richtig zu justieren

...

# change sidebar based on navbar value.... 
observeEvent(input$navbar,{ 
    if(input$navbar=='tab1_val'){ 
     toggle('tab1_sidebar') 
     toggle('tab2_sidebar') 
    } else if(input$navbar=='tab2_val'){ 
     toggle('tab1_sidebar') 
     toggle('tab2_sidebar') 
    } 
}) 

jede Hilfe zu dieser wäre sehr willkommen ....

Answer 1

im Moment sieht es nicht wie Sie jede Logik in Ihrem Code haben, der den Schieber sagt zu aktualisieren, wenn Sie wechseln Tabs, nur wenn der WertBox angeklickt wird.

Es gibt verschiedene Ansätze, die Sie dazu verwenden können.

Option 1: Hören, wenn die navbar Änderungen und mit toggle() mit einem condition

Dies, um Ihren Code sehr ähnlich ist, aber stattdessen die toggle() Funktion aufruft, wann immer es einen Klick ist alles, was ich Onclick tun ist Ändern Sie die ausgewählte Registerkarte. Wenn sich der Tab-Wert ändert (entweder durch Klicken auf ein Value-Feld oder durch Klicken auf ein Tab), rufen Sie die Funktion toggle() auf. Kleiner aber wichtiger Unterschied.

# load libraries 
require(shiny) 
require(shinydashboard) 
require(shinyjs) 

# create a simple app 
ui <- dashboardPage(
    title='Loading graphs', 
    dashboardHeader(
    title = 'Loading Graphs' 
), 
    dashboardSidebar(
    div(id='tab1_sidebar', 
     sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)), 
    shinyjs::hidden(
     div(id='tab2_sidebar', 
      sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2)) 
    ) 
), 
    dashboardBody(
    useShinyjs(), 
    tabsetPanel(
     id = "navbar", 
     tabPanel(title="tab1 title",id="tab1",value='tab1_val', 
       valueBoxOutput('tab1_valuebox')), 
     tabPanel(title="tab2 title",id="tab2",value='tab2_val', 
       valueBoxOutput('tab2_valuebox')) 
    ) 
) 
) 

server <- shinyServer(function(input, output, session) { 

    values <- reactiveValues(selectedTab = 1) 

    observeEvent(input$navbar, { 
    toggle("tab1_sidebar", condition = input$navbar == "tab1_val") 
    toggle("tab2_sidebar", condition = input$navbar == "tab2_val") 
    }) 

    output$tab1_valuebox <- renderValueBox({ 
    valueBox('1000',subtitle = "blah blah",icon = icon("car"), 
      color = "blue" 
    ) 
    }) 

    output$tab2_valuebox <- renderValueBox({ 
    valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"), 
      color = "red" 
    ) 
    }) 



    # on click of a tab1 valuebox 
    shinyjs::onclick('tab1_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab2_val') 
    }) 

    # on click of a tab2 valuebox 
    shinyjs::onclick('tab2_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab1_val') 
    }) 
}) 

shinyApp(ui=ui,server=server) 

Option 2: conditionalPanel()

Als Autor shinyjs Ich liebe die toggle Funktion, aber in diesem Fall ist es nicht unbedingt erforderlich, könnten Sie weg mit nur mit conditionalPanel() verwenden. Hier ist der Code, den ich denke, dass Sie wollen:

# load libraries 
require(shiny) 
require(shinydashboard) 
require(shinyjs) 

# create a simple app 
ui <- dashboardPage(
    title='Loading graphs', 
    dashboardHeader(
    title = 'Loading Graphs' 
), 
    dashboardSidebar(
    conditionalPanel("input.navbar == 'tab1_val'", 
     div(id='tab1_sidebar', 
      sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)) 
    ), 
    conditionalPanel("input.navbar == 'tab2_val'", 
     div(id='tab2_sidebar', 
      sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2)) 
    ) 
), 
    dashboardBody(
    useShinyjs(), 
    tabsetPanel(
     id = "navbar", 
     tabPanel(title="tab1 title",id="tab1",value='tab1_val', 
       valueBoxOutput('tab1_valuebox')), 
     tabPanel(title="tab2 title",id="tab2",value='tab2_val', 
       valueBoxOutput('tab2_valuebox')) 
    ) 
) 
) 

server <- shinyServer(function(input, output, session) { 

    output$tab1_valuebox <- renderValueBox({ 
    valueBox('1000',subtitle = "blah blah",icon = icon("car"), 
      color = "blue" 
    ) 
    }) 

    output$tab2_valuebox <- renderValueBox({ 
    valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"), 
      color = "red" 
    ) 
    }) 



    # on click of a tab1 valuebox 
    shinyjs::onclick('tab1_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab2_val') 
    }) 

    # on click of a tab2 valuebox 
    shinyjs::onclick('tab2_valuebox',expr={ 
    # move to tab2 
    updateTabsetPanel(session, "navbar", 'tab1_val') 
    }) 
}) 

shinyApp(ui=ui,server=server)