Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active November 14, 2018 01:05
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timelyportfolio/dd692b8ea8d7c45c1bb1a6fef2dbfc3c to your computer and use it in GitHub Desktop.
Save timelyportfolio/dd692b8ea8d7c45c1bb1a6fef2dbfc3c to your computer and use it in GitHub Desktop.
R Shiny + vuejs treeview

vuejs + Shiny

More Advanced Example

vuejs is beautiful and works extremely well with R, since vuejs does not require and all-in contract to use it. I have played quite a bit with R htmltools and vuejs, but until today, I have not explored Shiny with vuejs. This earlier gist R Shiny and Vue Simple Example offers a very simple illustration of how Shiny and vuejs can be best friends. Now, let's build from that example and get a TreeView of a Shiny plot brush.

Code

library(shiny)
library(vueR) #devtools::install_github("timelyportfolio/vueR")

ui <- tagList(
  tags$head(tags$script(src = "https://unpkg.com/vue-json-tree-view@2.0.6")),
  plotOutput("plot1", brush = brushOpts(id="plot_brush")),
  div(
    id = "app",
    tag("tree-view", list(":data"="plot_brush"))
  ),
  html_dependency_vue(),
  tags$script(
"
Vue.use(TreeView);

$(document).on('shiny:connected', function() {
  Shiny.shinyapp.$inputValues.plot_brush = {};
  var app = new Vue({
    el: '#app',
    data: Shiny.shinyapp.$inputValues
  });
})
"
  )
)

server <- function(input,output,session){
  session <<- session
  
  output$plot1 <- renderPlot({plot(1:10)})
}

shinyApp(ui,server)

Screenshot

vue-shiny2

@timelyportfolio
Copy link
Author

vue-shiny2

@obarisk
Copy link

obarisk commented Mar 5, 2018

Hi:
Is there document about Shiny.shinyapp.$inputValues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment