rstudio / sortable

R htmlwidget for Sortable.js
https://rstudio.github.io/sortable/
Other
130 stars 30 forks source link

Make dynamic UI from data import #50

Closed DrRoad closed 4 years ago

DrRoad commented 4 years ago

Hi, I need some of your help to build dynamic UI from data import in my Shiny App. I am looking at to modify your drag_vars_to_plot example for taking new data from csv file import so that the variables input can react dynamically for any data I import into the App. However, after I tried it and met a problem that the variables in the UI cannot be seperated to individual ones. 2020-03-06_131140

below is my code:

---- shiny-drag-vars-to-plot -------------------------------------------

Example shiny app to create a plot from sortable inputs

library(shiny) library(htmlwidgets) library(sortable)

Must be executed BEFORE rgl is loaded on headless devices.

options(rgl.useNULL=TRUE)

colnames_to_tags <- function(df){ lapply( colnames(df), function(co) { tag( "p", list( class = class(df[, co]), tags$span(class = "glyphicon glyphicon-move"), tags$strong(co) ) ) } ) }

ui <- fluidPage( fluidRow( class = "panel panel-heading", div( class = "panel-heading", h3("3D Data Visualiser"),

  # Input: Select a file ----
  fileInput("file1", "Data Import",
            multiple = FALSE,
            accept = c("text/csv",
                       "text/comma-separated-values,text/plain",
                       ".csv"))
),
fluidRow(
  class = "panel-body",
  column(
    width = 3,

    htmlOutput("sort1")

  ),
  column(
    width = 3,
    # analyse as x
    tags$div(
      class = "panel panel-default",
      tags$div(
        class = "panel-heading",
        tags$span(class = "glyphicon glyphicon-stats"),
        "Analyze as x (drag here)"
      ),
      tags$div(
        class = "panel-body",
        id = "sort2"
      )
    ),
    # analyse as y
    tags$div(
      class = "panel panel-default",
      tags$div(
        class = "panel-heading",
        tags$span(class = "glyphicon glyphicon-stats"),
        "Analyze as y (drag here)"
      ),
      tags$div(
        class = "panel-body",
        id = "sort3"
      )
    ),

    # analyse as z
    tags$div(
      class = "panel panel-default",
      tags$div(
        class = "panel-heading",
        tags$span(class = "glyphicon glyphicon-stats"),
        "Analyze as z (drag here)"
      ),
      tags$div(
        class = "panel-body",
        id = "sort4"
      )
    )

  ),
  column(
    width = 6,
    plotOutput("plot")

  )
)

), sortable_js( "sort1", options = sortable_options( group = list( name = "sortGroup1", put = TRUE ), swap = TRUE, swapClass = "sortable-swap-highlight", sort = FALSE, onSort = sortable_js_capture_input("sort_vars") ) ), sortable_js( "sort2", options = sortable_options( group = list( group = "sortGroup1", put = htmlwidgets::JS("function (to) { return to.el.children.length < 1; }"), pull = TRUE ), swap = TRUE, swapClass = "sortable-swap-highlight", onSort = sortable_js_capture_input("sort_x") ) ), sortable_js( "sort3", options = sortable_options( group = list( group = "sortGroup1", put = htmlwidgets::JS("function (to) { return to.el.children.length < 1; }"), pull = TRUE ), swap = TRUE, swapClass = "sortable-swap-highlight", onSort = sortable_js_capture_input("sort_y") ) ),

sortable_js( "sort4", options = sortable_options( group = list( group = "sortGroup1", put = htmlwidgets::JS("function (to) { return to.el.children.length < 1; }"), pull = TRUE ), swap = TRUE, swapClass = "sortable-swap-highlight", onSort = sortable_js_capture_input("sort_z") ) ) )

server <- function(input, output) {

data <- reactive({

progress <- shiny::Progress$new()
# Make sure it closes when we exit this reactive, even if there's an error
on.exit(progress$close())

progress$set(message = "Dataset Loading..Kindly wait")

S <- input$file1

if (is.null(S))
  return(NULL)

temp = read.csv (S$datapath)

})

output$sort1 <- renderUI({

tags$div( class = "panel panel-default", tags$div(class = "panel-heading", "Variables"), tags$div( class = "panel-body", id = "sort1", colnames_to_tags(data()) ) )

})

output$variables <- renderPrint(input[["sort_vars"]]) output$analyse_x <- renderPrint(input[["sort_x"]]) output$analyse_y <- renderPrint(input[["sort_y"]]) output$analyse_z <- renderPrint(input[["sort_z"]])

x <- reactive({ x <- input$sort_x if (is.character(x)) x %>% trimws() })

y <- reactive({ input$sort_y %>% trimws() })

z <- reactive({ input$sort_z %>% trimws() })

output$plot <- renderPlot({ validate( need(x(), "Drag a variable to x"), need(y(), "Drag a variable to y"), need(z(), "Drag a variable to z") ) dat <- mtcars[, c(x(), y(),z())] names(dat) <- c("x", "y","z") plot(dat) })

} shinyApp(ui, server)

andrie commented 4 years ago

This doesn't look like an issue on sortable, but a coding question on creating dynamic UI using shiny. I suggest you ask this question at a Q&A site, e.g. stackoverflow or community.rstudio.com