├── .gitignore
├── www
    ├── alert.js
    ├── simple.css
    ├── hidden_mode.js
    └── custom.css
├── 01_01_structure.R
├── conference-workshop.Rproj
├── 00_installation.R
├── 01_02_sidebar_layout.R
├── 05_02_css.R
├── 05_03_js.R
├── 01_04_observers.R
├── 05_01_rest_api.R
├── 03_02_dynamic_ui.R
├── 02_00_app.R
├── 01_03_input_controllers.R
├── 02_02_validation.R
├── 03_01_modal.R
├── 02_01_renders.R
├── 02_04_hiding_content.R
├── 02_03_reactive_value.R
├── 03_00_app.R
├── 01_99_exercise.R
├── 02_99_exercise.R
├── 05_00_app.R
├── 04_99_exercise.R
├── 04_01_modules.R
├── 04_00_app.R
├── 06_00_app.R
├── app.R
├── 04_02_modules_communication.R
├── 03_99_exercise.R
├── 05_99_exercise.R
└── tools.R


/.gitignore:
--------------------------------------------------------------------------------
1 | .Rproj.user
2 | .Rhistory
3 | .RData
4 | .Ruserdata
5 | rsconnect
6 | 


--------------------------------------------------------------------------------
/www/alert.js:
--------------------------------------------------------------------------------
1 | $(document).on("click", "button", function() {
2 |   alert("You've clicked me!");
3 | });
4 | 


--------------------------------------------------------------------------------
/01_01_structure.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   
 5 | )
 6 | 
 7 | server <- function(input, output, session) {
 8 |   
 9 | }
10 | 
11 | shinyApp(ui, server)
12 | 


--------------------------------------------------------------------------------
/www/simple.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #f0f8ff;
 3 | }
 4 | 
 5 | form.well {
 6 |   background-color: #a2d3ff;
 7 | }
 8 | 
 9 | div.well {
10 |   background-color: #e6f3ff;
11 |   border-radius: 20px;
12 | }
13 | 
14 | .well button {
15 |   border-radius: 20px;
16 | }
17 | 


--------------------------------------------------------------------------------
/conference-workshop.Rproj:
--------------------------------------------------------------------------------
 1 | Version: 1.0
 2 | 
 3 | RestoreWorkspace: Default
 4 | SaveWorkspace: Default
 5 | AlwaysSaveHistory: Default
 6 | 
 7 | EnableCodeIndexing: Yes
 8 | UseSpacesForTab: Yes
 9 | NumSpacesForTab: 2
10 | Encoding: UTF-8
11 | 
12 | RnwWeave: Sweave
13 | LaTeX: pdfLaTeX
14 | 


--------------------------------------------------------------------------------
/00_installation.R:
--------------------------------------------------------------------------------
 1 | install.packages("magrittr")
 2 | install.packages("shiny")
 3 | install.packages("DT")
 4 | install.packages("remotes")
 5 | install.packages("httr")
 6 | install.packages("glue")
 7 | install.packages("dplyr")
 8 | install.packages("purrr")
 9 | remotes::install_github("r-world-devs/shinyGizmo", ref = "dev")
10 | 


--------------------------------------------------------------------------------
/01_02_sidebar_layout.R:
--------------------------------------------------------------------------------
 1 | # https://shiny.rstudio.com/articles/layout-guide.html
 2 | library(shiny)
 3 | 
 4 | ui <- fluidPage(
 5 |   sidebarLayout(
 6 |     sidebarPanel(
 7 |       h3("Sidebar Title"),
 8 |       "Sidebar"
 9 |     ),
10 |     mainPanel(
11 |       div("I'm in the main panel"),
12 |       "I'm here as well"
13 |     )
14 |   )
15 | )
16 | 
17 | server <- function(input, output, session) {
18 |   
19 | }
20 | 
21 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/www/hidden_mode.js:
--------------------------------------------------------------------------------
 1 | var keysdown = '';
 2 | 
 3 | check_sequence = function(e) {
 4 |   keysdown += e.key; 
 5 |   if (/shiny$/.test(keysdown)) {
 6 |     Shiny.setInputValue('hidden_mode', true);
 7 |   }
 8 |   if (/modeoff$/.test(keysdown)) {
 9 |     Shiny.setInputValue('hidden_mode', false);
10 |   }
11 |   if (!/s$|h$|i$|n$|y$|m$|o$|d$|e$|f$/.test(keysdown)) {
12 |     keysdown = '';
13 |   }
14 | };
15 | 
16 | document.addEventListener('keydown', check_sequence);
17 | 


--------------------------------------------------------------------------------
/05_02_css.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   tags$head(
 5 |     tags$link(rel = "stylesheet", type = "text/css", href = "simple.css")
 6 |   ),
 7 |   sidebarLayout(
 8 |     sidebarPanel(
 9 |       wellPanel(
10 |         actionButton("run", "Click Me!")
11 |       ),
12 |       wellPanel(
13 |         actionButton("play", "Click Me!")
14 |       )
15 |     ),
16 |     mainPanel()
17 |   )
18 | )
19 | 
20 | server <- function(input, output, session) {
21 |   
22 | }
23 | 
24 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/05_03_js.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   tags$head(
 5 |     tags$link(rel = "stylesheet", type = "text/css", href = "simple.css"),
 6 |     tags$script(type = "text/javascript", src = "alert.js")
 7 |   ),
 8 |   sidebarLayout(
 9 |     sidebarPanel(
10 |       wellPanel(
11 |         actionButton("run", "Click Me!")
12 |       ),
13 |       wellPanel(
14 |         actionButton("play", "Click Me!")
15 |       )
16 |     ),
17 |     mainPanel()
18 |   )
19 | )
20 | 
21 | server <- function(input, output, session) {
22 |   
23 | }
24 | 
25 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/01_04_observers.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   sliderInput(
 5 |     inputId = "my_slider_one", label = "Select number here", value = 1, min = 1, max = 10, step = 1
 6 |   ),
 7 |   actionButton(
 8 |     inputId = "my_button", label = "Click Me!"
 9 |   )
10 | )
11 | 
12 | server <- function(input, output, session) {
13 |   observeEvent(input$my_slider_one, {
14 |     print("Slider changed")
15 |     print(input[["my_slider_one"]])
16 |   })
17 |   
18 |   observeEvent(input$my_button, {
19 |     updateSliderInput(session, "my_slider_one", value = sample(1:10, 1))
20 |   })
21 | }
22 | 
23 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/05_01_rest_api.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(httr)
 3 | 
 4 | # number <- 10
 5 | # res <- httr::GET(glue("http://numbersapi.com/{number}"))
 6 | # res$status_code
 7 | # httr::content(res)
 8 | 
 9 | ui <- fluidPage(
10 |   numericInput("number", "Select number", value = 1, min = 0, step = 1),
11 |   textOutput("fact")
12 | )
13 | 
14 | server <- function(input, output, session) {
15 |   output$fact <- renderText({
16 |     res <- httr::GET(glue("http://numbersapi.com/{input$number}"))
17 |     if (res$status_code == 200) {
18 |       fact <- httr::content(res)
19 |     } else {
20 |       fact <- "No response"
21 |     }
22 |     fact
23 |   })
24 | }
25 | 
26 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/03_02_dynamic_ui.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(glue)
 3 | 
 4 | ui <- fluidPage(
 5 |   actionButton("add", "Add"),
 6 |   numericInput("which", "Which to remove?", value = 1),
 7 |   actionButton("remove", "Remove"),
 8 |   div(id = "variables")
 9 | )
10 | 
11 | server <- function(input, output, session) {
12 |   observeEvent(input$add, {
13 |     insertUI(
14 |       selector = "#variables",
15 |       where = "beforeEnd",
16 |       ui = wellPanel(id = input$add, input$add),
17 |       immediate = TRUE
18 |     )
19 |   })
20 |   
21 |   observeEvent(input$remove, {
22 |     removeUI(
23 |       selector = glue("#{input$which}"),
24 |     )
25 |   })
26 | }
27 | 
28 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/02_00_app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   sidebarLayout(
 5 |     sidebarPanel(
 6 |       h3("Table Generator"),
 7 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
 8 |       div(id = "variables"),
 9 |       div(
10 |         id = "define-vars",
11 |         textInput("name", "Column name"),
12 |         actionButton("new", NULL, icon = icon("plus"), width = "100%") 
13 |       ),
14 |       actionButton("run", "Generate", width = "100%")
15 |     ),
16 |     mainPanel()
17 |   )
18 | )
19 | 
20 | server <- function(input, output, session) {
21 | 
22 |   observeEvent(input$new, {
23 |     print("new clicked")
24 |     print(input$new)
25 |   })
26 |   
27 |   observeEvent(input$run, {
28 |     print("run clicked")
29 |   })
30 | }
31 | 
32 | shinyApp(ui, server)
33 | 


--------------------------------------------------------------------------------
/01_03_input_controllers.R:
--------------------------------------------------------------------------------
 1 | # https://shiny.rstudio.com/gallery/widget-gallery.html
 2 | 
 3 | library(shiny)
 4 | 
 5 | ui <- fluidPage(
 6 |   actionButton(
 7 |     inputId = "my_button", label = "Click Me"
 8 |   ),
 9 |   numericInput(
10 |     inputId = "my_number", label = "Place number here", value = 1, min = 1, max = 10, step = 1
11 |   ),
12 |   textInput(
13 |     "my_text", label = "Place text here", value = "Default text"
14 |   ),
15 |   sliderInput(
16 |     inputId = "my_slider_one", label = "Select number here", value = 1, min = 1, max = 10, step = 1
17 |   ),
18 |   sliderInput(
19 |     inputId = "my_slider_two", label = "Select range here", value = c(5, 6), min = 1, max = 10, step = 1
20 |   ),
21 |   selectInput(
22 |     inputId = "my_dropdown", label = "Choose a letter", choices = letters
23 |   )
24 | )
25 | 
26 | server <- function(input, output, session) {
27 | 
28 | }
29 | 
30 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/02_02_validation.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   sidebarLayout(
 5 |     sidebarPanel(
 6 |       numericInput("x_max", "Maximum x axis value", value = 10)
 7 |     ),
 8 |     mainPanel(
 9 |       plotOutput("sine"),
10 |       tableOutput("plot_table")
11 |     )
12 |   )
13 | )
14 | 
15 | server <- function(input, output, session) {
16 |   output$sine <- renderPlot({
17 |     validate(need(input$x_max > 0, message = "No valid data"))
18 |     plot_data <- data.frame(
19 |       x = seq(0, input$x_max, by = 0.1),
20 |       y = sin(seq(0, input$x_max, by = 0.1))
21 |     )
22 |     plot(plot_data$x, plot_data$y, type = "l")
23 |   })
24 |   
25 |   output$plot_table <- renderTable({
26 |     req(input$x_max > 0)
27 |     plot_data <- data.frame(
28 |       x = seq(0, input$x_max, by = 0.1),
29 |       y = sin(seq(0, input$x_max, by = 0.1))
30 |     )
31 |     plot_data
32 |   })
33 | }
34 | 
35 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/03_01_modal.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | 
 4 | ui <- fluidPage(
 5 |   modalDialogUI(
 6 |     modalId = "my_modal",
 7 |     "Modal content"
 8 |   ),
 9 |   actionButton("open_second", "Open 2nd modal", icon = icon("pen")),
10 |   modalDialogUI(
11 |     modalId = "my_modal_2",
12 |     textInput("my_text_2", "Place text here"),
13 |     textOutput("my_text_2_out"),
14 |     button = NULL
15 |   ),
16 |   modalDialogUI(
17 |     modalId = "my_modal_3",
18 |     textInput("my_text_3", "Place text here"),
19 |     footer = actionButton("close", "Close", icon = icon("times"), `data-dismiss` = "modal")
20 |   ),
21 |   textOutput("my_text_3_out")
22 | )
23 | 
24 | server <- function(input, output, session) {
25 |   
26 |   observeEvent(input$open_second, {
27 |     showModalUI("my_modal_2")
28 |   })
29 |   
30 |   output$my_text_2_out <- renderText({
31 |     input$my_text_2
32 |   })
33 |   
34 |   output$my_text_3_out <- renderText({
35 |     input$my_text_3
36 |   })
37 |   
38 |   observeEvent(input$close, {
39 |     print("modal closed")
40 |   })
41 | }
42 | 
43 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/02_01_renders.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(glue)
 3 | 
 4 | ui <- fluidPage(
 5 |   sidebarLayout(
 6 |     sidebarPanel(
 7 |       textInput("title", "Title"),
 8 |       numericInput("x_max", "Maximum x axis value", value = 10, min = 1),
 9 |       textInput("generated_by", "Generated by:")
10 |     ),
11 |     mainPanel(
12 |       plotOutput("sine"),
13 |       tableOutput("plot_table"),
14 |       textOutput("gen_by")
15 |     )
16 |   )
17 | )
18 | 
19 | server <- function(input, output, session) {
20 |   output$sine <- renderPlot({
21 |     plot_data <- data.frame(
22 |       x = seq(0, input$x_max, by = 0.1),
23 |       y = sin(seq(0, input$x_max, by = 0.1))
24 |     )
25 |     plot(plot_data$x, plot_data$y, main = input$title, type = "l")
26 |   })
27 |   
28 |   output$plot_table <- renderTable({
29 |     plot_data <- data.frame(
30 |       x = seq(0, input$x_max, by = 0.1),
31 |       y = sin(seq(0, input$x_max, by = 0.1))
32 |     )
33 |     plot_data
34 |   })
35 |   
36 |   output$gen_by <- renderText({
37 |     glue("Chart generated by {input$generated_by}")
38 |   })
39 | }
40 | 
41 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/02_04_hiding_content.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | 
 3 | ui <- fluidPage(
 4 |   sidebarLayout(
 5 |     sidebarPanel(
 6 |       numericInput("x_max", "Maximum x axis value", value = 10),
 7 |       conditionalPanel(
 8 |         "input.x_max > 0",
 9 |         textInput("title", "Title")
10 |       )
11 |     ),
12 |     mainPanel(
13 |       plotOutput("sine"),
14 |       tableOutput("plot_table")
15 |     )
16 |   )
17 | )
18 | 
19 | server <- function(input, output, session) {
20 |   plot_data <- reactiveVal(NULL)
21 |   
22 |   observeEvent(input$x_max, {
23 |     if (identical(input$x_max > 0, TRUE)) {
24 |       x <- seq(0, input$x_max, by = 0.1)
25 |       plot_data(data.frame(x = x, y = sin(x)))
26 |     } else {
27 |       plot_data(NULL)
28 |     }
29 |   })
30 |   
31 |   output$sine <- renderPlot({
32 |     validate(need(!is.null(plot_data()), message = "No valid data"))
33 |     plot(plot_data()$x, plot_data()$y, main = input$title, type = "l")
34 |   })
35 |   
36 |   output$plot_table <- renderTable({
37 |     validate(need(!is.null(plot_data()), message = "No valid data"))
38 |     plot_data()
39 |   })
40 | }
41 | 
42 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/02_03_reactive_value.R:
--------------------------------------------------------------------------------
 1 | # Rule:
 2 | # rval <- reactiveVal(<initial-value>)  - initializing
 3 | # rval() - taking the value
 4 | # rval(<new-value>) - reassigning
 5 | 
 6 | library(shiny)
 7 | 
 8 | ui <- fluidPage(
 9 |   sidebarLayout(
10 |     sidebarPanel(
11 |       numericInput("x_max", "Maximum x axis value", value = 10),
12 |       textInput("title", "Title")
13 |     ),
14 |     mainPanel(
15 |       plotOutput("sine"),
16 |       tableOutput("plot_table")
17 |     )
18 |   )
19 | )
20 | 
21 | server <- function(input, output, session) {
22 |   plot_data <- reactiveVal(NULL)
23 |   
24 |   observeEvent(input$x_max, {
25 |     if (identical(input$x_max > 0, TRUE)) {
26 |       x <- seq(0, input$x_max, by = 0.1)
27 |       df <- data.frame(x = x, y = sin(x))
28 |       plot_data(df)
29 |     } else {
30 |       plot_data(NULL)
31 |     }
32 |   })
33 |   
34 |   output$sine <- renderPlot({
35 |     validate(need(!is.null(plot_data()), message = "No valid data"))
36 |     plot(plot_data()$x, plot_data()$y, main = input$title, type = "l")
37 |   })
38 |   
39 |   output$plot_table <- renderTable({
40 |     validate(need(!is.null(plot_data()), message = "No valid data"))
41 |     plot_data()
42 |   })
43 | }
44 | 
45 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/03_00_app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(DT)
 3 | 
 4 | ui <- fluidPage(
 5 |   sidebarLayout(
 6 |     sidebarPanel(
 7 |       h3("Table Generator"),
 8 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
 9 |       div(id = "variables"),
10 |       div(
11 |         id = "define-vars",
12 |         textInput("name", "Column name"),
13 |         conditionalPanel(
14 |           "input.name != ''",
15 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
16 |         )
17 |       ),
18 |       conditionalPanel(
19 |         "input.nrow > 0",
20 |         actionButton("run", "Generate", width = "100%")
21 |       )
22 |     ),
23 |     mainPanel(
24 |       dataTableOutput("table")
25 |     )
26 |   )
27 | )
28 | 
29 | server <- function(input, output, session) {
30 |   my_table <- reactiveVal(NULL)
31 |   
32 |   observeEvent(input$new, {
33 |     print("new clicked")
34 |   })
35 |   
36 |   observeEvent(input$run, {
37 |     my_table(iris[1:input$nrow, ])
38 |   })
39 |   
40 |   output$table <- renderDataTable({
41 |     validate(need(!is.null(my_table()), message = "No table created."))
42 |     my_table()
43 |   }, options = list(
44 |     paging = TRUE,
45 |     pageLength = 10,
46 |     searching = FALSE
47 |   ))
48 | }
49 | 
50 | shinyApp(ui, server)
51 | 


--------------------------------------------------------------------------------
/01_99_exercise.R:
--------------------------------------------------------------------------------
 1 | # In the below app:
 2 | # 1. Modify numericInput in line 20 so that:
 3 | # - its value can be accessible by input$nrow
 4 | # - its initial value equals 50
 5 | # 2. Create actionButton (in line 27) so that:
 6 | # - its value can be accessible by input$run,
 7 | # - it displays "Generate" label,
 8 | # - it covers full width of its container.
 9 | # Use actionButton in line 25 as an example.
10 | # 3. Create an observer (in line 40) that listens to the above button changes.
11 | # Make the observer callback print "run clicked" in the console.
12 | # 4. Run app and test it out.
13 | 
14 | library(shiny)
15 | 
16 | ui <- fluidPage(
17 |   sidebarLayout(
18 |     sidebarPanel(
19 |       h3("Table Generator"),
20 |       numericInput(inputId = "my_number", label = "Number of rows", value = 1, min = 1, max = 150, step = 1),
21 |       div(id = "variables"),
22 |       div(
23 |         id = "define-vars",
24 |         textInput("name", "Column name"),
25 |         actionButton("new", NULL, icon = icon("plus"), width = "100%")
26 |       ),
27 |       # <button>
28 |     ),
29 |     mainPanel()
30 |   )
31 | )
32 | 
33 | server <- function(input, output, session) {
34 |   
35 |   observeEvent(input$new, {
36 |     print("new clicked")
37 |     print(input$name)
38 |   })
39 |   
40 |   # <run_button_observer>
41 |   
42 | }
43 | 
44 | shinyApp(ui, server)
45 | 


--------------------------------------------------------------------------------
/02_99_exercise.R:
--------------------------------------------------------------------------------
 1 | # In the below app:
 2 | # 1. Wrap "run" button into conditionalPanel.
 3 | # Make sure the condition checks if number of rows input (nrow) is positive.
 4 | # 2. Replace tableOutput with dataTableOutput, and renderTable with renderDataTable.
 5 | # What effect does the change have on the resulted table?
 6 | # 3. Make sure the table is rendered only when it's not NULL.
 7 | # To do so, please replace 'TRUE' in line 46 with proper condition.
 8 | 
 9 | library(shiny)
10 | library(DT)
11 | 
12 | ui <- fluidPage(
13 |   sidebarLayout(
14 |     sidebarPanel(
15 |       h3("Table Generator"),
16 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
17 |       div(id = "variables"),
18 |       div(
19 |         id = "define-vars",
20 |         textInput("name", "Column name"),
21 |         conditionalPanel(
22 |           "input.name != ''",
23 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
24 |         )
25 |       ),
26 |       actionButton("run", "Generate", width = "100%")  
27 |     ),
28 |     mainPanel(
29 |       tableOutput("table")
30 |     )
31 |   )
32 | )
33 | 
34 | server <- function(input, output, session) {
35 |   my_table <- reactiveVal(NULL)
36 |   
37 |   observeEvent(input$new, {
38 |     print("new clicked")
39 |   })
40 |   
41 |   observeEvent(input$run, {
42 |     my_table(iris[1:input$nrow, ])
43 |   })
44 |   
45 |   output$table <- renderTable({
46 |     validate(need(TRUE, message = "No table created."))
47 |     my_table()
48 |   }, options = list(
49 |     paging = TRUE,
50 |     pageLength = 10,
51 |     searching = FALSE
52 |   ))
53 | }
54 | 
55 | shinyApp(ui, server)
56 | 


--------------------------------------------------------------------------------
/05_00_app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | library(magrittr)
 4 | library(glue)
 5 | 
 6 | source("tools.R")
 7 | 
 8 | ui <- fluidPage(
 9 |   sidebarLayout(
10 |     sidebarPanel(
11 |       h3("Table Generator"),
12 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
13 |       div(id = "variables"),
14 |       div(
15 |         id = "define-vars",
16 |         textInput("name", "Column name"),
17 |         conditionalPanel(
18 |           "input.name != ''",
19 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
20 |         )
21 |       ),
22 |       conditionalPanel(
23 |         "input.nrow > 0 & $('#variables > div').length > 0",
24 |         actionButton("run", "Generate", width = "100%")  
25 |       ),
26 |       width = 2
27 |     ),
28 |     mainPanel(
29 |       DT::dataTableOutput("table"),
30 |       width = 10
31 |     )
32 |   )
33 | )
34 | 
35 | server <- function(input, output, session) {
36 |   session$userData$vars <- list()
37 |   session$userData$clear <- reactiveVal(1)
38 |   res_table <- reactiveVal(NULL)
39 |   
40 |   observeEvent(input$new, {
41 |     id <- genid()
42 |     insertUI(
43 |       "#variables",
44 |       where = "beforeEnd",
45 |       edit_panel_ui(id, input$name),
46 |       immediate = TRUE
47 |     )
48 |     edit_panel_server(id)
49 |   })
50 |   
51 |   observeEvent(input$run, {
52 |     req(length(session$userData$vars) > 0)
53 |     res_table(gen_table(session$userData$vars, input$nrow))
54 |   })
55 |   
56 |   output$table <- DT::renderDataTable({
57 |     validate(need(
58 |       !is.null(res_table()),
59 |       "No table created."
60 |     ))
61 |     res_table()
62 |   }, options = list(
63 |     paging = TRUE,
64 |     pageLength = 10,
65 |     searching = FALSE
66 |   ))
67 |   
68 |   observeEvent(session$userData$clear(), {
69 |     updateTextInput(inputId = "name", value = "")
70 |   })
71 | }
72 | 
73 | shinyApp(ui, server)


--------------------------------------------------------------------------------
/04_99_exercise.R:
--------------------------------------------------------------------------------
 1 | # gen_table function from tools.R is responsible for generating the target table.
 2 | # It takes two arguments:
 3 | # - states - list storing columns configuration
 4 | # - n_rows - number of rows to generate
 5 | #
 6 | # Using gen_table function and proper application objects in "run" observer (line 62):
 7 | # 1. Generate target application table.
 8 | # 2. Update res_table reactive value with the created table.
 9 | 
10 | library(shiny)
11 | library(shinyGizmo)
12 | library(magrittr)
13 | library(glue)
14 | 
15 | source("tools.R")
16 | 
17 | ui <- fluidPage(
18 |   sidebarLayout(
19 |     sidebarPanel(
20 |       h3("Table Generator"),
21 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
22 |       div(id = "variables"),
23 |       div(
24 |         id = "define-vars",
25 |         textInput("name", "Column name"),
26 |         conditionalPanel(
27 |           "input.name != ''",
28 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
29 |         )
30 |       ),
31 |       conditionalPanel(
32 |         "input.nrow > 0 & $('#variables > div').length > 0",
33 |         actionButton("run", "Generate", width = "100%")  
34 |       ),
35 |       width = 2
36 |     ),
37 |     mainPanel(
38 |       DT::dataTableOutput("table"),
39 |       width = 10
40 |     )
41 |   )
42 | )
43 | 
44 | server <- function(input, output, session) {
45 |   session$userData$vars <- list()
46 |   session$userData$clear <- reactiveVal(1)
47 |   res_table <- reactiveVal(NULL)
48 |   
49 |   observeEvent(input$new, {
50 |     id <- genid()
51 |     insertUI(
52 |       "#variables",
53 |       where = "beforeEnd",
54 |       edit_panel_ui(id, input$name),
55 |       immediate = TRUE
56 |     )
57 |     edit_panel_server(id)
58 |   })
59 |   
60 |   observeEvent(input$run, {
61 |     req(length(session$userData$vars) > 0)
62 |     
63 |   })
64 |   
65 |   output$table <- DT::renderDataTable({
66 |     validate(need(
67 |       !is.null(res_table()),
68 |       "No table created."
69 |     ))
70 |     res_table()
71 |   }, options = list(
72 |     paging = TRUE,
73 |     pageLength = 10,
74 |     searching = FALSE
75 |   ))
76 |   
77 |   observeEvent(session$userData$clear(), {
78 |     updateTextInput(inputId = "name", value = "")
79 |   })
80 | }
81 | 
82 | shinyApp(ui, server)
83 | 


--------------------------------------------------------------------------------
/04_01_modules.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | library(glue)
 4 | 
 5 | source("tools.R")
 6 | 
 7 | column_ui <- function(id, name) {
 8 |   ns <- NS(id)
 9 |   wellPanel(
10 |     id = id,
11 |     modalDialogUI(
12 |       ns("modal"), 
13 |       textInput(ns("name"), "Name", value = name),
14 |       footer = actionButton(ns("confirm"), "Confirm", `data-dismiss` = "modal")
15 |     ),
16 |     actionButton(ns("delete"), NULL, icon("trash-alt")),
17 |     textOutput(ns("outname"), inline = TRUE)
18 |   )
19 | }
20 | 
21 | column_server <- function(id) {
22 |   moduleServer(id, function(input, output, session) {
23 |     showModalUI("modal")
24 |     
25 |     observeEvent(input[["delete"]], {
26 |       removeUI(glue("#{id}"))
27 |     })
28 |     
29 |     observeEvent(input[["confirm"]], {
30 |       print(reactiveValuesToList(input))
31 |       print("modal closed")
32 |     })
33 |     
34 |     output[["outname"]] <- renderText({
35 |       input[["name"]]
36 |     })
37 |   })
38 | }
39 | 
40 | ui <- fluidPage(
41 |   sidebarLayout(
42 |     sidebarPanel(
43 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
44 |       textOutput("number_facts"),
45 |       div(id = "variables"),
46 |       textInput("name", "Column name"),
47 |       conditionalPanel(
48 |         "input.name != ''",
49 |         actionButton("new", NULL, icon = icon("plus"), width = "100%")  
50 |       ),
51 |       conditionalPanel(
52 |         "input.nrow > 0 & $('#variables > div').length > 0",
53 |         actionButton("run", NULL, icon = icon("play"), width = "100%")  
54 |       )
55 |     ),
56 |     mainPanel(
57 |       DT::dataTableOutput("table")
58 |     )
59 |   )
60 | )
61 | 
62 | server <- function(input, output, session) {
63 |   
64 |   my_table <- reactiveVal(NULL)
65 |   
66 |   observeEvent(input$new, {
67 |     id <- genid()
68 |     insertUI(
69 |       "#variables",
70 |       where = "beforeEnd",
71 |       ui = column_ui(id, input$name),
72 |       immediate = TRUE
73 |     )
74 |     column_server(id)
75 |   })
76 |   
77 |   observeEvent(input$run, {
78 |     my_table(iris[1:input$nrow, ])
79 |   })
80 |   
81 |   output$table <- DT::renderDataTable({
82 |     validate(need(
83 |       !is.null(my_table()),
84 |       "No table created."
85 |     ))
86 |     my_table()
87 |   }, options = list(
88 |     paging = TRUE,
89 |     pageLength = 10
90 |   ))
91 | }
92 | 
93 | shinyApp(ui, server)
94 | 


--------------------------------------------------------------------------------
/04_00_app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | library(glue)
 4 | library(magrittr)
 5 | 
 6 | source("tools.R")
 7 | 
 8 | column_ui <- function(id, name) {
 9 |   wellPanel(
10 |     id = id,
11 |     modalDialogUI(
12 |       glue("{id}_modal"), 
13 |       textInput(glue("{id}_name"), "Name", value = name),
14 |       footer = actionButton(glue("{id}_confirm"), "Confirm", `data-dismiss` = "modal")
15 |     ),
16 |     actionButton(glue("{id}_delete"), NULL, icon("trash-alt")),
17 |     textOutput(glue("{id}_outname"), inline = TRUE)
18 |   )
19 | }
20 | 
21 | column_server <- function(id, input, output, session) {
22 |   observeEvent(input[[glue("{id}_delete")]], {
23 |     removeUI(glue("#{id}"))
24 |   })
25 |   
26 |   observeEvent(input[[glue("{id}_confirm")]], {
27 |     print("modal closed")
28 |   })
29 |   
30 |   output[[glue("{id}_outname")]] <- renderText({
31 |     input[[glue("{id}_name")]]
32 |   })
33 | }
34 | 
35 | ui <- fluidPage(
36 |   sidebarLayout(
37 |     sidebarPanel(
38 |       h3("Table Generator"),
39 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
40 |       textOutput("number_facts"),
41 |       div(id = "variables"),
42 |       div(
43 |         id = "define-vars",
44 |         textInput("name", "Column name"),
45 |         conditionalPanel(
46 |           "input.name != ''",
47 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
48 |         )
49 |       ),
50 |       conditionalPanel(
51 |         "input.nrow > 0 & $('#variables > div').length > 0",
52 |         actionButton("run", "Generate", width = "100%")  
53 |       )
54 |     ),
55 |     mainPanel(
56 |       DT::dataTableOutput("table")
57 |     )
58 |   )
59 | )
60 | 
61 | server <- function(input, output, session) {
62 |   
63 |   my_table <- reactiveVal(NULL)
64 |   
65 |   observeEvent(input$new, {
66 |     id <- genid()
67 |     insertUI(
68 |       "#variables",
69 |       where = "beforeEnd",
70 |       column_ui(id, input$name),
71 |       immediate = TRUE
72 |     )
73 |     column_server(id, input, output, session)
74 |   })
75 |   
76 |   observeEvent(input$run, {
77 |     my_table(iris[1:input$nrow, ])
78 |   })
79 |   
80 |   output$table <- DT::renderDataTable({
81 |     validate(need(
82 |       !is.null(my_table()),
83 |       "No table created."
84 |     ))
85 |     my_table()
86 |   }, options = list(
87 |     paging = TRUE,
88 |     pageLength = 10,
89 |     searching = FALSE
90 |   ))
91 | }
92 | 
93 | shinyApp(ui, server)
94 | 


--------------------------------------------------------------------------------
/06_00_app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | library(magrittr)
 4 | library(glue)
 5 | 
 6 | source("tools.R")
 7 | 
 8 | ui <- fluidPage(
 9 |   tags$head(
10 |     shiny::tags$script(type = "text/javascript", src = "hidden_mode.js")
11 |   ),
12 |   sidebarLayout(
13 |     sidebarPanel(
14 |       h3("Table Generator"),
15 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
16 |       textOutput("number_facts"),
17 |       div(id = "variables"),
18 |       div(
19 |         id = "define-vars",
20 |         textInput("name", "Column name"),
21 |         conditionalPanel(
22 |           "input.name != ''",
23 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
24 |         )
25 |       ),
26 |       conditionalPanel(
27 |         "input.nrow > 0 & $('#variables > div').length > 0",
28 |         actionButton("run", "Generate", width = "100%")  
29 |       ),
30 |       width = 2
31 |     ),
32 |     mainPanel(
33 |       DT::dataTableOutput("table"),
34 |       width = 10
35 |     )
36 |   )
37 | )
38 | 
39 | server <- function(input, output, session) {
40 |   session$userData$vars <- list()
41 |   session$userData$clear <- reactiveVal(1)
42 |   res_table <- reactiveVal(NULL)
43 |   
44 |   observeEvent(input$new, {
45 |     id <- genid()
46 |     insertUI(
47 |       "#variables",
48 |       where = "beforeEnd",
49 |       edit_panel_ui(id, input$name),
50 |       immediate = TRUE
51 |     )
52 |     edit_panel_server(id)
53 |   })
54 |   
55 |   observeEvent(input$run, {
56 |     req(!is.null(session$userData$vars))
57 |     res_table(gen_table(session$userData$vars, input$nrow))
58 |   })
59 |   
60 |   output$table <- DT::renderDataTable({
61 |     validate(need(
62 |       !is.null(res_table()),
63 |       "No table created."
64 |     ))
65 |     res_table()
66 |   }, options = list(
67 |     paging = TRUE,
68 |     pageLength = 10,
69 |     searching = FALSE
70 |   ))
71 |   
72 |   observeEvent(session$userData$clear(), {
73 |     updateTextInput(inputId = "name", value = "")
74 |   }, ignoreInit = TRUE)
75 |   
76 |   observeEvent(input$hidden_mode, {
77 |     print(input$hidden_mode)
78 |   })
79 |   
80 |   output$number_facts <- renderText({
81 |     req(input$hidden_mode)
82 |     
83 |     res <- httr::GET(glue("http://numbersapi.com/{input$nrow}"))
84 |     if (res$status_code == 200) {
85 |       fact <- httr::content(res)
86 |     } else {
87 |       fact <- "No response"
88 |     }
89 |     fact
90 |   })
91 | }
92 | 
93 | shinyApp(ui, server)
94 | 


--------------------------------------------------------------------------------
/app.R:
--------------------------------------------------------------------------------
 1 | library(shiny)
 2 | library(shinyGizmo)
 3 | library(magrittr)
 4 | library(glue)
 5 | 
 6 | source("tools.R")
 7 | 
 8 | ui <- fluidPage(
 9 |   tags$head(
10 |     shiny::tags$script(type = "text/javascript", src = "hidden_mode.js"),
11 |     tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
12 |   ),
13 |   sidebarLayout(
14 |     sidebarPanel(
15 |       h3("Table Generator"),
16 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
17 |       textOutput("number_facts"),
18 |       div(id = "variables"),
19 |       div(
20 |         id = "define-var",
21 |         textInput("name", "Column name"),
22 |         conditionalPanel(
23 |           "input.name != ''",
24 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
25 |         )
26 |       ),
27 |       conditionalPanel(
28 |         "input.nrow > 0 & $('#variables > div').length > 0",
29 |         actionButton("run", "Generate", width = "100%")  
30 |       ),
31 |       width = 2
32 |     ),
33 |     mainPanel(
34 |       downloadButton("downloadData", NULL),
35 |       DT::dataTableOutput("table"),
36 |       width = 10
37 |     )
38 |   )
39 | )
40 | 
41 | server <- function(input, output, session) {
42 |   session$userData$vars <- list()
43 |   session$userData$clear <- reactiveVal(1)
44 |   res_table <- reactiveVal(NULL)
45 |   
46 |   observeEvent(input$new, {
47 |     id <- genid()
48 |     insertUI(
49 |       "#variables",
50 |       where = "beforeEnd",
51 |       edit_panel_ui(id, input$name),
52 |       immediate = TRUE
53 |     )
54 |     edit_panel_server(id)
55 |   })
56 |   
57 |   observeEvent(input$run, {
58 |     req(!is.null(session$userData$vars))
59 |     res_table(gen_table(session$userData$vars, input$nrow))
60 |   })
61 |   
62 |   output$table <- DT::renderDataTable({
63 |     validate(need(
64 |       !is.null(res_table()),
65 |       "No table created."
66 |     ))
67 |     res_table()
68 |   }, options = list(
69 |     paging = TRUE,
70 |     pageLength = 10,
71 |     searching = FALSE
72 |   ))
73 |   
74 |   observeEvent(session$userData$clear(), {
75 |     updateTextInput(inputId = "name", value = "")
76 |   }, ignoreInit = TRUE)
77 |   
78 |   output$number_facts <- renderText({
79 |     req(input$hidden_mode)
80 |     httr::content(
81 |       httr::GET(glue("http://numbersapi.com/{input$nrow}"))
82 |     )
83 |   })
84 |   
85 |   output$downloadData <- downloadHandler(
86 |     filename = function() {
87 |       paste("data-", Sys.Date(), ".csv", sep = "")
88 |     },
89 |     content = function(file) {
90 |       write.csv(res_table(), file)
91 |     }
92 |   )
93 | }
94 | 
95 | shinyApp(ui, server)
96 | 


--------------------------------------------------------------------------------
/04_02_modules_communication.R:
--------------------------------------------------------------------------------
  1 | library(shiny)
  2 | library(shinyGizmo)
  3 | library(glue)
  4 | library(magrittr)
  5 | 
  6 | source("tools.R")
  7 | 
  8 | column_ui <- function(id, name) {
  9 |   ns <- NS(id)
 10 |   wellPanel(
 11 |     id = id,
 12 |     modalDialogUI(
 13 |       ns("modal"), 
 14 |       textInput(ns("name"), "Name", value = name),
 15 |       footer = actionButton(ns("confirm"), "Confirm", `data-dismiss` = "modal")
 16 |     ),
 17 |     actionButton(ns("delete"), NULL, icon("trash-alt")),
 18 |     textOutput(ns("outname"), inline = TRUE)
 19 |   )
 20 | }
 21 | 
 22 | column_server <- function(id) {
 23 |   moduleServer(id, function(input, output, session) {
 24 |     ns <- session$ns
 25 |     
 26 |     showModalUI("modal")
 27 |     
 28 |     observeEvent(input[["delete"]], {
 29 |       removeUI(glue("#{id}"))
 30 |     })
 31 |     
 32 |     observeEvent(input[["confirm"]], {
 33 |       prev_val <- session$userData$modal_closed()
 34 |       session$userData$modal_closed(prev_val + 1)
 35 |     })
 36 |     
 37 |     output[["outname"]] <- renderText({
 38 |       input[["name"]]
 39 |     })
 40 |   })
 41 | }
 42 | 
 43 | ui <- fluidPage(
 44 |   sidebarLayout(
 45 |     sidebarPanel(
 46 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
 47 |       textOutput("number_facts"),
 48 |       div(id = "variables"),
 49 |       textInput("name", "Column name"),
 50 |       conditionalPanel(
 51 |         "input.name != ''",
 52 |         actionButton("new", NULL, icon = icon("plus"), width = "100%")  
 53 |       ),
 54 |       conditionalPanel(
 55 |         "input.nrow > 0 & $('#variables > div').length > 0",
 56 |         actionButton("run", NULL, icon = icon("play"), width = "100%")  
 57 |       )
 58 |     ),
 59 |     mainPanel(
 60 |       DT::dataTableOutput("table")
 61 |     )
 62 |   )
 63 | )
 64 | 
 65 | server <- function(input, output, session) {
 66 |   
 67 |   my_table <- reactiveVal(NULL)
 68 |   session$userData$modal_closed <- reactiveVal(1)
 69 |   
 70 |   observeEvent(input$new, {
 71 |     id <- genid()
 72 |     insertUI(
 73 |       "#variables",
 74 |       where = "beforeEnd",
 75 |       column_ui(id, input$name),
 76 |       immediate = TRUE
 77 |     )
 78 |     column_server(id)
 79 |   })
 80 |   
 81 |   observeEvent(input$run, {
 82 |     my_table(iris[1:input$nrow, ])
 83 |   })
 84 |   
 85 |   observeEvent(session$userData$modal_closed(), {
 86 |     updateTextInput(session, inputId = "name", value = "")
 87 |   })
 88 |   
 89 |   output$table <- DT::renderDataTable({
 90 |     validate(need(
 91 |       !is.null(my_table()),
 92 |       "No table created."
 93 |     ))
 94 |     my_table()
 95 |   }, options = list(
 96 |     paging = TRUE,
 97 |     pageLength = 10
 98 |   ))
 99 | }
100 | 
101 | shinyApp(ui, server)
102 | 


--------------------------------------------------------------------------------
/03_99_exercise.R:
--------------------------------------------------------------------------------
  1 | # In the below app:
  2 | # 1. Make sure (modifying observer callback in line 29) 
  3 | # that clicking delete button removes wellPanel created in column_ui.
  4 | # 2. Replace "run" button conditionalPanel with condition 
  5 | # "input.nrow > 0 & $('#variables > div').length > 0".
  6 | # Can you guess what effect does it have in the application?
  7 | 
  8 | library(shiny)
  9 | library(shinyGizmo)
 10 | library(glue)
 11 | 
 12 | source("tools.R")
 13 | 
 14 | column_ui <- function(id, name) {
 15 |   wellPanel(
 16 |     id = id,
 17 |     modalDialogUI(
 18 |       glue("{id}_modal"), 
 19 |       textInput(glue("{id}_name"), "Name", value = name),
 20 |       footer = actionButton(glue("{id}_confirm"), "Confirm", `data-dismiss` = "modal")
 21 |     ),
 22 |     actionButton(glue("{id}_delete"), NULL, icon("trash-alt")),
 23 |     textOutput(glue("{id}_outname"), inline = TRUE)
 24 |   )
 25 | }
 26 | 
 27 | column_server <- function(id, input, output, session) {
 28 |   observeEvent(input[[glue("{id}_delete")]], {
 29 |     
 30 |   })
 31 |   
 32 |   observeEvent(input[["{id}_confirm"]], {
 33 |     print("modal closed")
 34 |   })
 35 |   
 36 |   output[[glue("{id}_outname")]] <- renderText({
 37 |     input[[glue("{id}_name")]]
 38 |   })
 39 | }
 40 | 
 41 | ui <- fluidPage(
 42 |   sidebarLayout(
 43 |     sidebarPanel(
 44 |       h3("Table Generator"),
 45 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
 46 |       textOutput("number_facts"),
 47 |       div(id = "variables"),
 48 |       div(
 49 |         id = "define-vars",
 50 |         textInput("name", "Column name"),
 51 |         conditionalPanel(
 52 |           "input.name != ''",
 53 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
 54 |         )
 55 |       ),
 56 |       conditionalPanel(
 57 |         "input.nrow > 0",
 58 |         actionButton("run", "Generate", width = "100%")  
 59 |       )
 60 |     ),
 61 |     mainPanel(
 62 |       DT::dataTableOutput("table")
 63 |     )
 64 |   )
 65 | )
 66 | 
 67 | server <- function(input, output, session) {
 68 |   
 69 |   my_table <- reactiveVal(NULL)
 70 |   
 71 |   observeEvent(input$new, {
 72 |     id <- genid()
 73 |     insertUI(
 74 |       "#variables",
 75 |       where = "beforeEnd",
 76 |       ui = column_ui(id, input$name),
 77 |       immediate = TRUE
 78 |     )
 79 |     column_server(id, input, output, session)
 80 |   })
 81 | 
 82 |   observeEvent(input$run, {
 83 |     my_table(iris[1:input$nrow, ])
 84 |   })
 85 |   
 86 |   output$table <- DT::renderDataTable({
 87 |     validate(need(
 88 |       !is.null(my_table()),
 89 |       "No table created."
 90 |     ))
 91 |     my_table()
 92 |   }, options = list(
 93 |     paging = TRUE,
 94 |     pageLength = 10,
 95 |     searching = FALSE
 96 |   ))
 97 | }
 98 | 
 99 | shinyApp(ui, server)
100 | 


--------------------------------------------------------------------------------
/05_99_exercise.R:
--------------------------------------------------------------------------------
  1 | # In the below application:
  2 | # 1. Attach 'hidden_mode.js' JS script.
  3 | # Then run the application and type 'shiny' having the application open.
  4 | # Please try to analyze 'hidden_mode.js' to find out how to revert the above effect.
  5 | # 
  6 | # 2. Attach 'custom.css' CSS file.
  7 | # Run the application and check its new styling.
  8 | # Try to play with modifying 
  9 | # :root {
 10 | #   --bright: #d5ecff;
 11 | #   --middle: #699EB5;
 12 | #   --dark: #377290;
 13 | #   --darker: #3D6B82;
 14 | # }
 15 | # values in 'custom.css' to apply custom colouring.
 16 | 
 17 | library(shiny)
 18 | library(shinyGizmo)
 19 | library(magrittr)
 20 | library(glue)
 21 | 
 22 | source("tools.R")
 23 | 
 24 | ui <- fluidPage(
 25 |   tags$head(
 26 |     
 27 |   ),
 28 |   sidebarLayout(
 29 |     sidebarPanel(
 30 |       h3("Table Generator"),
 31 |       numericInput("nrow", "Number of rows", value = 50, min = 1, max = 1000, step = 1),
 32 |       textOutput("number_facts"),
 33 |       div(id = "variables"),
 34 |       div(
 35 |         id = "define-vars",
 36 |         textInput("name", "Column name"),
 37 |         conditionalPanel(
 38 |           "input.name != ''",
 39 |           actionButton("new", NULL, icon = icon("plus"), width = "100%")  
 40 |         )
 41 |       ),
 42 |       conditionalPanel(
 43 |         "input.nrow > 0 & $('#variables > div').length > 0",
 44 |         actionButton("run", "Generate", width = "100%")  
 45 |       ),
 46 |       width = 2
 47 |     ),
 48 |     mainPanel(
 49 |       DT::dataTableOutput("table"),
 50 |       width = 10
 51 |     )
 52 |   )
 53 | )
 54 | 
 55 | server <- function(input, output, session) {
 56 |   session$userData$vars <- list()
 57 |   session$userData$clear <- reactiveVal(1)
 58 |   res_table <- reactiveVal(NULL)
 59 |   
 60 |   observeEvent(input$new, {
 61 |     id <- genid()
 62 |     insertUI(
 63 |       "#variables",
 64 |       where = "beforeEnd",
 65 |       edit_panel_ui(id, input$name),
 66 |       immediate = TRUE
 67 |     )
 68 |     edit_panel_server(id)
 69 |   })
 70 |   
 71 |   observeEvent(input$run, {
 72 |     req(!is.null(session$userData$vars))
 73 |     res_table(gen_table(session$userData$vars, input$nrow))
 74 |   })
 75 |   
 76 |   output$table <- DT::renderDataTable({
 77 |     validate(need(
 78 |       !is.null(res_table()),
 79 |       "No table created."
 80 |     ))
 81 |     res_table()
 82 |   }, options = list(
 83 |     paging = TRUE,
 84 |     pageLength = 10,
 85 |     searching = FALSE
 86 |   ))
 87 |   
 88 |   observeEvent(session$userData$clear(), {
 89 |     updateTextInput(inputId = "name", value = "")
 90 |   }, ignoreInit = TRUE)
 91 |   
 92 |   observeEvent(input$hidden_mode, {
 93 |     print(input$hidden_mode)
 94 |   })
 95 |   
 96 |   output$number_facts <- renderText({
 97 |     req(input$hidden_mode)
 98 |     res <- httr::GET(glue("http://numbersapi.com/{input$nrow}"))
 99 |     if (res$status_code == 200) {
100 |       fact <- httr::content(res)
101 |     } else {
102 |       fact <- "No response"
103 |     }
104 |     fact
105 |   })
106 | }
107 | 
108 | shinyApp(ui, server)
109 | 


--------------------------------------------------------------------------------
/tools.R:
--------------------------------------------------------------------------------
  1 | library(dplyr)
  2 | 
  3 | genid <- function() {
  4 |   paste(sample(letters, 5), collapse = "")
  5 | }
  6 | 
  7 | get_state <- function(input) {
  8 |   state <- reactiveValuesToList(input)
  9 |   return(
 10 |     state[setdiff(names(state), c("confirm", "delete"))] 
 11 |   )
 12 | }
 13 | 
 14 | gen_col_character <- function(state, n_rows) {
 15 |   if (state$charminmax[1] == state$charminmax[2]) {
 16 |     nchars <- state$charminmax[1]
 17 |   } else {
 18 |     nchars <- sample(state$charminmax[1]:state$charminmax[2], n_rows, replace = TRUE)
 19 |   }
 20 |   return(
 21 |     stringi::stri_rand_strings(n_rows, nchars, state$charpattern) 
 22 |   )
 23 | }
 24 | 
 25 | gen_col_numeric <- function(state, n_rows) {
 26 |   if (state$numtype == "numrange") {
 27 |     res <- runif(n_rows, min = state$numminmax[1], max = state$numminmax[2])
 28 |   }
 29 |   if (state$numtype == "numdistro") {
 30 |     res <- switch(
 31 |       state$numdistro,
 32 |       "normal" = rnorm(n_rows, mean = state$normal_mean, sd = state$normal_sd),
 33 |       "exponential" = rexp(n_rows, rate = state$exponential_rate)
 34 |     )
 35 |   }
 36 |   return(res)
 37 | }
 38 | 
 39 | gen_col_integer <- function(state, n_rows) {
 40 |   if (state$inttype == "intrange") {
 41 |     res <- sample(state$intminmax[1]:state$intminmax[2], n_rows, replace = TRUE)
 42 |   }
 43 |   if (state$inttype == "intdistro") {
 44 |     if (state$intdistro == "binomial") {
 45 |       res <- rbinom(n_rows, size = state$binomial_size, prob = state$binomial_prob)
 46 |     }
 47 |     if (state$intdistro == "poisson") {
 48 |       res <- rpois(n_rows, lambda = state$poisson_lambda)
 49 |     }
 50 |   }
 51 |   return(res)
 52 | }
 53 |  
 54 | gen_col_custom <- function(state, n_rows) {
 55 |   eval(parse(text = state$customcode))
 56 | }
 57 | 
 58 | gen_column <- function(state, n_rows) {
 59 |   method <- switch(
 60 |     state$type,
 61 |     "numeric" = gen_col_numeric,
 62 |     "integer" = gen_col_integer,
 63 |     "character" = gen_col_character,
 64 |     "custom" = gen_col_custom
 65 |   )
 66 |   res <- list(method(state, n_rows))
 67 |   names(res) <- state$name
 68 |   return(res)
 69 | }
 70 | 
 71 | gen_table <- function(states, n_rows) {
 72 |   purrr::map_dfc(unname(states), gen_column, n_rows = n_rows)
 73 | }
 74 | 
 75 | edit_panel_ui <- function(id, name) {
 76 |   ns <- NS(id)
 77 |   
 78 |   wellPanel(
 79 |     id = id,
 80 |     modalDialogUI(
 81 |       modalId = ns("modal"),
 82 |       textInput(ns("name"), "Column name", name),
 83 |       selectInput(
 84 |         ns("type"), "Column type", 
 85 |         choices = c("numeric", "integer", "character", "custom"),
 86 |         selected = "numeric"
 87 |       ),
 88 |       conditionalPanel(
 89 |         "input.type == 'numeric'", 
 90 |         ns = ns,
 91 |         tabsetPanel(
 92 |           id = ns("numtype"),
 93 |           tabPanel(
 94 |             "Range", 
 95 |             value = "numrange",
 96 |             sliderInput(ns("numminmax"), "Column range", min = 1, max = 20, value = c(5, 10), step = 1)    
 97 |           ),
 98 |           tabPanel(
 99 |             "Distribution",
100 |             value = "numdistro",
101 |             selectInput(ns("numdistro"), "Distribution", choices = c("normal", "exponential"), selected = "normal"),
102 |             conditionalPanel(
103 |               "input.numdistro == 'normal'", ns = ns, 
104 |               numericInput(ns("normal_mean"), "Mean", value = 0),
105 |               numericInput(ns("normal_sd"), "SD", value = 1, min = 0)
106 |             ),
107 |             conditionalPanel(
108 |               "input.numdistro == 'exponential'", ns = ns, 
109 |               numericInput(ns("exponential_lambda"), "Lambda", value = 0)
110 |             )
111 |           )
112 |         )
113 |       ),
114 |       conditionalPanel(
115 |         "input.type == 'character'", 
116 |         ns = ns,
117 |         sliderInput(ns("charminmax"), "Number of characters", min = 1, max = 20, value = c(5, 10), step = 1),
118 |         selectInput(ns("charpattern"), "Pattern", choices = c("[[a-z][A-Z]]", "[a-z]", "[A-Z]", "[a-zA-Z0-9]"))
119 |       ),
120 |       conditionalPanel(
121 |         "input.type == 'integer'",
122 |         ns = ns,
123 |         tabsetPanel(
124 |           id = ns("inttype"),
125 |           tabPanel(
126 |             "Range", 
127 |             value = "intrange",
128 |             sliderInput(ns("intminmax"), "Column range", min = 1, max = 20, value = c(5, 10), step = 1)    
129 |           ),
130 |           tabPanel(
131 |             "Distribution",
132 |             value = "intdistro",
133 |             selectInput(ns("intdistro"), "Distribution", choices = c("binomial", "poisson"), selected = "binomial"),
134 |             conditionalPanel(
135 |               "input.intdistro == 'binomial'", ns = ns, 
136 |               numericInput(ns("binomial_size"), "Size", value = 10, min = 0, step = 1),
137 |               numericInput(ns("binomial_prob"), "Prob", value = 0.5, min = 0, max = 1)
138 |             ),
139 |             conditionalPanel(
140 |               "input.intdistro == 'poisson'", ns = ns, 
141 |               numericInput(ns("poisson_lambda"), "Lambda", value = 1, min = 0.1)
142 |             )   
143 |           )
144 |         )
145 |       ),
146 |       conditionalPanel(
147 |         "input.type == 'custom'",
148 |         ns = ns,
149 |         textInput(ns("customcode"), "Custom code")
150 |       ),
151 |       button = modalButtonUI(ns("modal"), NULL, icon = icon("pen")),
152 |       footer = actionButton(ns("confirm"), "Confirm", `data-dismiss` = "modal")
153 |     ),
154 |     actionButton(ns("delete"), NULL, icon = icon("trash-alt")),
155 |     textOutput(ns("name"), inline = TRUE)
156 |   )
157 | }
158 | 
159 | edit_panel_server <- function(id) {
160 |   moduleServer(
161 |     id, 
162 |     function(input, output, session) {
163 |       state <- reactiveVal(NULL)
164 |       showModalUI("modal")
165 |       
166 |       observeEvent(input$confirm, {
167 |         state(get_state(input))
168 |         session$userData$vars[[id]] <- state()
169 |         session$userData$clear(session$userData$clear() + 1)
170 |       })
171 |       
172 |       output$name <- renderText({
173 |         state()$name
174 |       })
175 |       
176 |       observeEvent(input$delete, {
177 |         session$userData$vars[[id]] <- NULL
178 |         removeUI(glue("#{id}"))
179 |       })
180 |     }
181 |   )
182 | }
183 | 


--------------------------------------------------------------------------------
/www/custom.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');
  2 | 
  3 | :root {
  4 |   --bright: #d5ecff;
  5 |   --middle: #699EB5;
  6 |   --dark: #377290;
  7 |   --darker: #3D6B82;
  8 | }
  9 | 
 10 | body {
 11 |   font-family: Poppins, sans-serif;
 12 |   color: var(--bright);
 13 |   height: 100vh;
 14 |   overflow: hidden;
 15 |   background-color: var(--bright);
 16 | }
 17 | 
 18 | form.well {
 19 |   background-color: var(--dark);
 20 |   height: 100%;
 21 |   box-shadow: inset -30px 0 30px rgb(0, 0, 0, 0.2);
 22 |   margin: 0;
 23 |   border-radius: 0;
 24 |   border: none;
 25 | }
 26 | 
 27 | #variables .well {
 28 |     display: flex;
 29 |     width: 100%;
 30 |     align-items: center;
 31 |     padding: 20px 0;
 32 |     border: none;
 33 |     border-radius: 0;
 34 |     border-bottom: 1px solid var(--bright);
 35 |     background: none;
 36 | }
 37 | 
 38 | #variables .well .shiny-text-output {
 39 |     order: -1;
 40 |     width: 100%;
 41 |     font-size: 18px;
 42 | }
 43 | 
 44 | #variables .well > button {
 45 |     width: 30px;
 46 |     height: 30px;
 47 |     display: flex;
 48 |     align-items: center;
 49 |     justify-content: center;
 50 |     border: none;
 51 |     border-radius: 50%;
 52 |     margin: 0 3px 0 3px;
 53 | }
 54 | 
 55 | div.container-fluid {
 56 |   height: 100%;
 57 | }
 58 | 
 59 | div.row {
 60 |   height: 100%;
 61 | }
 62 | 
 63 | .container-fluid > div.row > div:first-child {
 64 |     height: 100%;
 65 |     overflow: auto;
 66 |     padding: 0;
 67 | }
 68 | 
 69 | .container-fluid > div.row > div:nth-child(2) {
 70 |     height: 100%;
 71 |     overflow: auto;
 72 |     padding: 10px;
 73 | }
 74 | 
 75 | .container-fluid h3 {
 76 |   margin: 0 0 20px;
 77 |   font-size: 36px;
 78 | }
 79 | 
 80 | .container-fluid button {
 81 |   border: none;
 82 |   background-color: var(--bright);
 83 |   color: var(--dark);
 84 | }
 85 | 
 86 | .container-fluid button:hover, 
 87 | .container-fluid button:focus,
 88 | .container-fluid button:active{
 89 |   border: none;
 90 |   background-color: var(--middle);
 91 |   color: var(--bright);
 92 | }
 93 | 
 94 | #downloadData:focus, #downloadData:hover {
 95 |   border: 1px solid;
 96 |   background-color: var(--bright);
 97 |   color: var(--middle);
 98 | }
 99 | 
100 | #downloadData, #downloadData {
101 |   border: none;
102 |   background-color: var(--dark);
103 |   color: var(--bright);
104 |   position: fixed; 
105 |   bottom: 3px; 
106 |   right: 3px;
107 | }
108 | 
109 | .container-fluid input {
110 |   border: none;
111 |   background-color: var(--bright);
112 |   color: var(--dark);
113 | }
114 | 
115 | .container-fluid input:focus, .container-fluid input:hover {
116 |   border: none;
117 |   background-color: var(--middle);
118 |   color: var(--bright);
119 |   box-shadow: none;
120 | }
121 | 
122 | .modal-content {
123 |   background-color: var(--dark);
124 |   padding: 20px;
125 | }
126 | 
127 | .container-fluid .selectize-input:hover, 
128 | .container-fluid .selectize-control.single .selectize-input.full:hover,
129 | .container-fluid .selectize-dropdown:hover {
130 |   border: none;
131 |   background-color: var(--middle);
132 |   color: var(--bright);
133 | }
134 | 
135 | .container-fluid .selectize-input, 
136 | .container-fluid .selectize-control.single .selectize-input.full,
137 | .container-fluid .selectize-dropdown {
138 |   border: none;
139 |   background-color: var(--bright);
140 |   color: var(--dark);
141 | }
142 | 
143 | .container-fluid .selectize-dropdown .active {
144 |   border: none;
145 |   background-color: var(--bright);
146 |   color: var(--dark);
147 | }
148 | 
149 | #variables .tabbable li.active a, #variables .tabbable li.active a:hover {
150 |     border: none;
151 |     background: none;
152 |     color: var(--bright);
153 |     border-bottom: 4px solid;
154 |     font-weight: 600;
155 | }
156 | 
157 | #variables .tabbable li a, #variables .tabbable li a:hover {
158 |     border: none;
159 |     background: none;
160 |     color: var(--bright);
161 | }
162 | 
163 | #variables .tab-content {
164 |   padding-top: 10px;
165 | }
166 | 
167 | .container-fluid .irs--shiny .irs-bar {
168 |   border-top: 1px solid var(--middle);
169 |   border-bottom: 1px solid var(--middle);
170 |   background: var(--middle);
171 | }
172 | 
173 | .container-fluid .irs--shiny .irs-from, 
174 | .container-fluid .irs--shiny .irs-to, 
175 | .container-fluid .irs--shiny .irs-single {
176 |   color: var(--darker);
177 |   background-color: var(--bright);
178 | }
179 | 
180 | .container-fluid .irs--shiny .irs-min, 
181 | .container-fluid .irs--shiny .irs-max {
182 |   border: 1px solid;
183 | }
184 | 
185 | #define-var {
186 |   display: flex;
187 |   align-items: end;
188 | }
189 | 
190 | #define-var div:first-child {
191 |   width: 100%;
192 |   margin-bottom: 0;
193 | }
194 | 
195 | #new {
196 |   margin-left: 1px;
197 |   height: 34px;
198 | }
199 | 
200 | #run {
201 |   margin-top: 20px;
202 |   font-weight: 600;
203 | }
204 | 
205 | .container-fluid label {
206 |   font-weight: 400;
207 | }
208 | 
209 | /* auto generated by https://datatables.net/manual/styling/theme-creator */
210 | 
211 | .container-fluid .datatables,
212 | .container-fluid .dataTables_wrapper .dataTables_length, 
213 | .container-fluid .dataTables_wrapper .dataTables_filter, 
214 | .container-fluid .dataTables_wrapper .dataTables_info, 
215 | .container-fluid .dataTables_wrapper .dataTables_processing, 
216 | .container-fluid .dataTables_wrapper .dataTables_paginate {
217 |     color: var(--dark);
218 | }
219 | 
220 | .container-fluid table.dataTable th.dt-left,
221 | .container-fluid table.dataTable td.dt-left {
222 |   text-align: left;
223 | }
224 | .container-fluid table.dataTable th.dt-center,
225 | .container-fluid table.dataTable td.dt-center,
226 | .container-fluid table.dataTable td.dataTables_empty {
227 |   text-align: center;
228 | }
229 | .container-fluid table.dataTable th.dt-right,
230 | .container-fluid table.dataTable td.dt-right {
231 |   text-align: right;
232 | }
233 | .container-fluid table.dataTable th.dt-justify,
234 | .container-fluid table.dataTable td.dt-justify {
235 |   text-align: justify;
236 | }
237 | .container-fluid table.dataTable th.dt-nowrap,
238 | .container-fluid table.dataTable td.dt-nowrap {
239 |   white-space: nowrap;
240 | }
241 | .container-fluid table.dataTable thead th.dt-head-left,
242 | .container-fluid table.dataTable thead td.dt-head-left,
243 | .container-fluid table.dataTable tfoot th.dt-head-left,
244 | .container-fluid table.dataTable tfoot td.dt-head-left {
245 |   text-align: left;
246 | }
247 | .container-fluid table.dataTable thead th.dt-head-center,
248 | .container-fluid table.dataTable thead td.dt-head-center,
249 | .container-fluid table.dataTable tfoot th.dt-head-center,
250 | .container-fluid table.dataTable tfoot td.dt-head-center {
251 |   text-align: center;
252 | }
253 | .container-fluid table.dataTable thead th.dt-head-right,
254 | .container-fluid table.dataTable thead td.dt-head-right,
255 | .container-fluid table.dataTable tfoot th.dt-head-right,
256 | .container-fluid table.dataTable tfoot td.dt-head-right {
257 |   text-align: right;
258 | }
259 | .container-fluid table.dataTable thead th.dt-head-justify,
260 | .container-fluid table.dataTable thead td.dt-head-justify,
261 | .container-fluid table.dataTable tfoot th.dt-head-justify,
262 | .container-fluid table.dataTable tfoot td.dt-head-justify {
263 |   text-align: justify;
264 | }
265 | .container-fluid table.dataTable thead th.dt-head-nowrap,
266 | .container-fluid table.dataTable thead td.dt-head-nowrap,
267 | .container-fluid table.dataTable tfoot th.dt-head-nowrap,
268 | .container-fluid table.dataTable tfoot td.dt-head-nowrap {
269 |   white-space: nowrap;
270 | }
271 | .container-fluid table.dataTable tbody th.dt-body-left,
272 | .container-fluid table.dataTable tbody td.dt-body-left {
273 |   text-align: left;
274 | }
275 | .container-fluid table.dataTable tbody th.dt-body-center,
276 | .container-fluid table.dataTable tbody td.dt-body-center {
277 |   text-align: center;
278 | }
279 | .container-fluid table.dataTable tbody th.dt-body-right,
280 | .container-fluid table.dataTable tbody td.dt-body-right {
281 |   text-align: right;
282 | }
283 | .container-fluid table.dataTable tbody th.dt-body-justify,
284 | .container-fluid table.dataTable tbody td.dt-body-justify {
285 |   text-align: justify;
286 | }
287 | .container-fluid table.dataTable tbody th.dt-body-nowrap,
288 | .container-fluid table.dataTable tbody td.dt-body-nowrap {
289 |   white-space: nowrap;
290 | }
291 | .container-fluid table.dataTable td.dt-control {
292 |   text-align: center;
293 |   cursor: pointer;
294 | }
295 | .container-fluid table.dataTable td.dt-control:before {
296 |   height: 1em;
297 |   width: 1em;
298 |   margin-top: -9px;
299 |   display: inline-block;
300 |   color: white;
301 |   border: 0.15em solid white;
302 |   border-radius: 1em;
303 |   box-shadow: 0 0 0.2em #444;
304 |   box-sizing: content-box;
305 |   text-align: center;
306 |   text-indent: 0 !important;
307 |   font-family: "Courier New", Courier, monospace;
308 |   line-height: 1em;
309 |   content: "+";
310 |   background-color: #31b131;
311 | }
312 | .container-fluid table.dataTable tr.dt-hasChild td.dt-control:before {
313 |   content: "-";
314 |   background-color: #d33333;
315 | }
316 |  
317 | /*
318 |  * Table styles
319 |  */
320 | .container-fluid table.dataTable {
321 |   width: 100%;
322 |   margin: 0 auto;
323 |   clear: both;
324 |   border-collapse: separate;
325 |   border-spacing: 0;
326 |   /*
327 |    * Header and footer styles
328 |    */
329 |   /*
330 |    * Body styles
331 |    */
332 | }
333 | .container-fluid table.dataTable thead th,
334 | .container-fluid table.dataTable tfoot th {
335 |   font-weight: bold;
336 | }
337 | .container-fluid table.dataTable thead th,
338 | .container-fluid table.dataTable thead td {
339 |   padding: 10px 18px;
340 |   border-bottom: 0px none #111111;
341 | }
342 | .container-fluid table.dataTable thead th:active,
343 | .container-fluid table.dataTable thead td:active {
344 |   outline: none;
345 | }
346 | .container-fluid table.dataTable tfoot th,
347 | .container-fluid table.dataTable tfoot td {
348 |   padding: 10px 18px 6px 18px;
349 |   border-top: 0px none #111111;
350 | }
351 | .container-fluid table.dataTable thead .sorting,
352 | .container-fluid table.dataTable thead .sorting_asc,
353 | .container-fluid table.dataTable thead .sorting_desc,
354 | .container-fluid table.dataTable thead .sorting_asc_disabled,
355 | .container-fluid table.dataTable thead .sorting_desc_disabled {
356 |   cursor: pointer;
357 |   *cursor: hand;
358 |   background-repeat: no-repeat;
359 |   background-position: center right;
360 | }
361 | .container-fluid table.dataTable thead .sorting {
362 |   background-image: url("../images/sort_both.png");
363 | }
364 | .container-fluid table.dataTable thead .sorting_asc {
365 |   background-image: url("../images/sort_asc.png") !important;
366 | }
367 | .container-fluid table.dataTable thead .sorting_desc {
368 |   background-image: url("../images/sort_desc.png") !important;
369 | }
370 | .container-fluid table.dataTable thead .sorting_asc_disabled {
371 |   background-image: url("../images/sort_asc_disabled.png");
372 | }
373 | .container-fluid table.dataTable thead .sorting_desc_disabled {
374 |   background-image: url("../images/sort_desc_disabled.png");
375 | }
376 | .container-fluid table.dataTable tbody tr {
377 |   background-color: var(--bright);
378 | }
379 | .container-fluid table.dataTable tbody tr.selected {
380 |   background-color: #699eb5;
381 | }
382 | .container-fluid table.dataTable tbody th,
383 | .container-fluid table.dataTable tbody td {
384 |   padding: 8px 10px;
385 | }
386 | .container-fluid table.dataTable.row-border tbody th, .container-fluid table.dataTable.row-border tbody td, .container-fluid table.dataTable.display tbody th, .container-fluid table.dataTable.display tbody td {
387 |   border-top: 1px solidvar(--dark);
388 | }
389 | .container-fluid table.dataTable.row-border tbody tr:first-child th,
390 | .container-fluid table.dataTable.row-border tbody tr:first-child td, .container-fluid table.dataTable.display tbody tr:first-child th,
391 | .container-fluid table.dataTable.display tbody tr:first-child td {
392 |   border-top: none;
393 | }
394 | .container-fluid table.dataTable.cell-border tbody th, .container-fluid table.dataTable.cell-border tbody td {
395 |   border-top: 1px solidvar(--dark);
396 |   border-right: 1px solidvar(--dark);
397 | }
398 | .container-fluid table.dataTable.cell-border tbody tr th:first-child,
399 | .container-fluid table.dataTable.cell-border tbody tr td:first-child {
400 |   border-left: 1px solidvar(--dark);
401 | }
402 | .container-fluid table.dataTable.cell-border tbody tr:first-child th,
403 | .container-fluid table.dataTable.cell-border tbody tr:first-child td {
404 |   border-top: none;
405 | }
406 | .container-fluid table.dataTable.stripe tbody tr.odd, .container-fluid table.dataTable.display tbody tr.odd {
407 |   background-color: #d0e6f9;
408 | }
409 | .container-fluid table.dataTable.stripe tbody tr.odd.selected, .container-fluid table.dataTable.display tbody tr.odd.selected {
410 |   background-color: #679ab1;
411 | }
412 | .container-fluid table.dataTable.hover tbody tr:hover, .container-fluid table.dataTable.display tbody tr:hover {
413 |   background-color: #cde4f6;
414 | }
415 | .container-fluid table.dataTable.hover tbody tr:hover.selected, .container-fluid table.dataTable.display tbody tr:hover.selected {
416 |   background-color: #6598ae;
417 | }
418 | .container-fluid table.dataTable.order-column tbody tr > .sorting_1,
419 | .container-fluid table.dataTable.order-column tbody tr > .sorting_2,
420 | .container-fluid table.dataTable.order-column tbody tr > .sorting_3, .container-fluid table.dataTable.display tbody tr > .sorting_1,
421 | .container-fluid table.dataTable.display tbody tr > .sorting_2,
422 | .container-fluid table.dataTable.display tbody tr > .sorting_3 {
423 |   background-color: #d1e7fa;
424 | }
425 | .container-fluid table.dataTable.order-column tbody tr.selected > .sorting_1,
426 | .container-fluid table.dataTable.order-column tbody tr.selected > .sorting_2,
427 | .container-fluid table.dataTable.order-column tbody tr.selected > .sorting_3, .container-fluid table.dataTable.display tbody tr.selected > .sorting_1,
428 | .container-fluid table.dataTable.display tbody tr.selected > .sorting_2,
429 | .container-fluid table.dataTable.display tbody tr.selected > .sorting_3 {
430 |   background-color: #679bb1;
431 | }
432 | .container-fluid table.dataTable.display tbody tr.odd > .sorting_1, .container-fluid table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
433 |   background-color: #c9dff1;
434 | }
435 | .container-fluid table.dataTable.display tbody tr.odd > .sorting_2, .container-fluid table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
436 |   background-color: #cbe1f3;
437 | }
438 | .container-fluid table.dataTable.display tbody tr.odd > .sorting_3, .container-fluid table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
439 |   background-color: #cde3f5;
440 | }
441 | .container-fluid table.dataTable.display tbody tr.odd.selected > .sorting_1, .container-fluid table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
442 |   background-color: #6395ab;
443 | }
444 | .container-fluid table.dataTable.display tbody tr.odd.selected > .sorting_2, .container-fluid table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
445 |   background-color: #6497ac;
446 | }
447 | .container-fluid table.dataTable.display tbody tr.odd.selected > .sorting_3, .container-fluid table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
448 |   background-color: #6598ae;
449 | }
450 | .container-fluid table.dataTable.display tbody tr.even > .sorting_1, .container-fluid table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
451 |   background-color: #d1e7fa;
452 | }
453 | .container-fluid table.dataTable.display tbody tr.even > .sorting_2, .container-fluid table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
454 |   background-color: #d2e9fc;
455 | }
456 | .container-fluid table.dataTable.display tbody tr.even > .sorting_3, .container-fluid table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
457 |   background-color: #d4ebfe;
458 | }
459 | .container-fluid table.dataTable.display tbody tr.even.selected > .sorting_1, .container-fluid table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
460 |   background-color: #679bb1;
461 | }
462 | .container-fluid table.dataTable.display tbody tr.even.selected > .sorting_2, .container-fluid table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
463 |   background-color: #689cb3;
464 | }
465 | .container-fluid table.dataTable.display tbody tr.even.selected > .sorting_3, .container-fluid table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
466 |   background-color: #699db4;
467 | }
468 | .container-fluid table.dataTable.display tbody tr:hover > .sorting_1, .container-fluid table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
469 |   background-color: #c4d9ea;
470 | }
471 | .container-fluid table.dataTable.display tbody tr:hover > .sorting_2, .container-fluid table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
472 |   background-color: #c5daec;
473 | }
474 | .container-fluid table.dataTable.display tbody tr:hover > .sorting_3, .container-fluid table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
475 |   background-color: #c8ddef;
476 | }
477 | .container-fluid table.dataTable.display tbody tr:hover.selected > .sorting_1, .container-fluid table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
478 |   background-color: #6091a6;
479 | }
480 | .container-fluid table.dataTable.display tbody tr:hover.selected > .sorting_2, .container-fluid table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
481 |   background-color: #6192a7;
482 | }
483 | .container-fluid table.dataTable.display tbody tr:hover.selected > .sorting_3, .container-fluid table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
484 |   background-color: #6294aa;
485 | }
486 | .container-fluid table.dataTable.no-footer {
487 |   border-bottom: 0px none #111111;
488 | }
489 | .container-fluid table.dataTable.nowrap th, .container-fluid table.dataTable.nowrap td {
490 |   white-space: nowrap;
491 | }
492 | .container-fluid table.dataTable.compact thead th,
493 | .container-fluid table.dataTable.compact thead td {
494 |   padding: 4px 17px;
495 | }
496 | .container-fluid table.dataTable.compact tfoot th,
497 | .container-fluid table.dataTable.compact tfoot td {
498 |   padding: 4px;
499 | }
500 | .container-fluid table.dataTable.compact tbody th,
501 | .container-fluid table.dataTable.compact tbody td {
502 |   padding: 4px;
503 | }
504 |  
505 | .container-fluid table.dataTable th,
506 | .container-fluid table.dataTable td {
507 |   box-sizing: content-box;
508 | }
509 |  
510 | /*
511 |  * Control feature layout
512 |  */
513 | .container-fluid .dataTables_wrapper {
514 |   position: relative;
515 |   clear: both;
516 | }
517 | .container-fluid .dataTables_wrapper .dataTables_length {
518 |   float: left;
519 | }
520 | .container-fluid .dataTables_wrapper .dataTables_length select {
521 |   border: 1px solid #aaa;
522 |   border-radius: 3px;
523 |   padding: 5px;
524 |   background-color: transparent;
525 |   padding: 4px;
526 | }
527 | .container-fluid .dataTables_wrapper .dataTables_filter {
528 |   float: right;
529 |   text-align: right;
530 | }
531 | .container-fluid .dataTables_wrapper .dataTables_filter input {
532 |   border: 1px solid #aaa;
533 |   border-radius: 3px;
534 |   padding: 5px;
535 |   background-color: transparent;
536 |   margin-left: 3px;
537 | }
538 | .container-fluid .dataTables_wrapper .dataTables_info {
539 |   clear: both;
540 |   float: left;
541 |   padding-top: 0.755em;
542 | }
543 | .container-fluid .dataTables_wrapper .dataTables_paginate {
544 |   float: right;
545 |   text-align: right;
546 |   padding-top: 0.25em;
547 | }
548 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button {
549 |   box-sizing: border-box;
550 |   display: inline-block;
551 |   min-width: 1.5em;
552 |   padding: 0.5em 1em;
553 |   margin-left: 2px;
554 |   text-align: center;
555 |   text-decoration: none !important;
556 |   cursor: pointer;
557 |   *cursor: hand;
558 |   color:var(--dark) !important;
559 |   border: 1px solid transparent;
560 |   border-radius: 2px;
561 | }
562 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button.current, 
563 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
564 |   color:var(--dark) !important;
565 |   border: 1px solid #315463;
566 |   background-color: #c9dce4;
567 |   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c9dce4), color-stop(100%, #699eb5));
568 |   /* Chrome,Safari4+ */
569 |   background: -webkit-linear-gradient(top, #c9dce4 0%, #699eb5 100%);
570 |   /* Chrome10+,Safari5.1+ */
571 |   background: -moz-linear-gradient(top, #c9dce4 0%, #699eb5 100%);
572 |   /* FF3.6+ */
573 |   background: -ms-linear-gradient(top, #c9dce4 0%, #699eb5 100%);
574 |   /* IE10+ */
575 |   background: -o-linear-gradient(top, #c9dce4 0%, #699eb5 100%);
576 |   /* Opera 11.10+ */
577 |   background: linear-gradient(to bottom, #c9dce4 0%, #699eb5 100%);
578 |   /* W3C */
579 | }
580 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, 
581 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, 
582 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
583 |   cursor: default;
584 |   color: #666 !important;
585 |   border: 1px solid transparent;
586 |   background: transparent;
587 |   box-shadow: none;
588 | }
589 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
590 |   color: white !important;
591 |   border: 1px solidvar(--dark);
592 |   background-color: #85b7d1;
593 |   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #85b7d1), color-stop(100%,var(--dark)));
594 |   /* Chrome,Safari4+ */
595 |   background: -webkit-linear-gradient(top, #85b7d1 0%,var(--dark) 100%);
596 |   /* Chrome10+,Safari5.1+ */
597 |   background: -moz-linear-gradient(top, #85b7d1 0%,var(--dark) 100%);
598 |   /* FF3.6+ */
599 |   background: -ms-linear-gradient(top, #85b7d1 0%,var(--dark) 100%);
600 |   /* IE10+ */
601 |   background: -o-linear-gradient(top, #85b7d1 0%,var(--dark) 100%);
602 |   /* Opera 11.10+ */
603 |   background: linear-gradient(to bottom, #85b7d1 0%,var(--dark) 100%);
604 |   /* W3C */
605 | }
606 | .container-fluid .dataTables_wrapper .dataTables_paginate .paginate_button:active {
607 |   outline: none;
608 |   background-color: #458fb5;
609 |   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #458fb5), color-stop(100%, #346c89));
610 |   /* Chrome,Safari4+ */
611 |   background: -webkit-linear-gradient(top, #458fb5 0%, #346c89 100%);
612 |   /* Chrome10+,Safari5.1+ */
613 |   background: -moz-linear-gradient(top, #458fb5 0%, #346c89 100%);
614 |   /* FF3.6+ */
615 |   background: -ms-linear-gradient(top, #458fb5 0%, #346c89 100%);
616 |   /* IE10+ */
617 |   background: -o-linear-gradient(top, #458fb5 0%, #346c89 100%);
618 |   /* Opera 11.10+ */
619 |   background: linear-gradient(to bottom, #458fb5 0%, #346c89 100%);
620 |   /* W3C */
621 |   box-shadow: inset 0 0 3px #111;
622 | }
623 | .container-fluid .dataTables_wrapper .dataTables_paginate .ellipsis {
624 |   padding: 0 1em;
625 | }
626 | .container-fluid .dataTables_wrapper .dataTables_processing {
627 |   position: absolute;
628 |   top: 50%;
629 |   left: 50%;
630 |   width: 100%;
631 |   height: 40px;
632 |   margin-left: -50%;
633 |   margin-top: -25px;
634 |   padding-top: 20px;
635 |   text-align: center;
636 |   font-size: 1.2em;
637 |   background-color: white;
638 |   background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(213, 236, 255, 0)), color-stop(25%, rgba(213, 236, 255, 0.9)), color-stop(75%, rgba(213, 236, 255, 0.9)), color-stop(100%, rgba(255, 255, 255, 0)));
639 |   background: -webkit-linear-gradient(left, rgba(213, 236, 255, 0) 0%, rgba(213, 236, 255, 0.9) 25%, rgba(213, 236, 255, 0.9) 75%, rgba(213, 236, 255, 0) 100%);
640 |   background: -moz-linear-gradient(left, rgba(213, 236, 255, 0) 0%, rgba(213, 236, 255, 0.9) 25%, rgba(213, 236, 255, 0.9) 75%, rgba(213, 236, 255, 0) 100%);
641 |   background: -ms-linear-gradient(left, rgba(213, 236, 255, 0) 0%, rgba(213, 236, 255, 0.9) 25%, rgba(213, 236, 255, 0.9) 75%, rgba(213, 236, 255, 0) 100%);
642 |   background: -o-linear-gradient(left, rgba(213, 236, 255, 0) 0%, rgba(213, 236, 255, 0.9) 25%, rgba(213, 236, 255, 0.9) 75%, rgba(213, 236, 255, 0) 100%);
643 |   background: linear-gradient(to right, rgba(213, 236, 255, 0) 0%, rgba(213, 236, 255, 0.9) 25%, rgba(213, 236, 255, 0.9) 75%, rgba(213, 236, 255, 0) 100%);
644 | }
645 | .container-fluid .dataTables_wrapper .dataTables_length,
646 | .container-fluid .dataTables_wrapper .dataTables_filter,
647 | .container-fluid .dataTables_wrapper .dataTables_info,
648 | .container-fluid .dataTables_wrapper .dataTables_processing,
649 | .container-fluid .dataTables_wrapper .dataTables_paginate {
650 |   color:var(--dark);
651 | }
652 | .container-fluid .dataTables_wrapper .dataTables_scroll {
653 |   clear: both;
654 | }
655 | .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody {
656 |   *margin-top: -1px;
657 |   -webkit-overflow-scrolling: touch;
658 | }
659 | .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th, .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td, .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th, .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td {
660 |   vertical-align: middle;
661 | }
662 | .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > th > div.dataTables_sizing,
663 | .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > thead > tr > td > div.dataTables_sizing, .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > th > div.dataTables_sizing,
664 | .container-fluid .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody > table > tbody > tr > td > div.dataTables_sizing {
665 |   height: 0;
666 |   overflow: hidden;
667 |   margin: 0 !important;
668 |   padding: 0 !important;
669 | }
670 | .container-fluid .dataTables_wrapper.no-footer .dataTables_scrollBody {
671 |   border-bottom: 0px none #111111;
672 | }
673 | .container-fluid .dataTables_wrapper.no-footer div.dataTables_scrollHead table.dataTable,
674 | .container-fluid .dataTables_wrapper.no-footer div.dataTables_scrollBody > table {
675 |   border-bottom: none;
676 | }
677 | .container-fluid .dataTables_wrapper:after {
678 |   visibility: hidden;
679 |   display: block;
680 |   content: "";
681 |   clear: both;
682 |   height: 0;
683 | }
684 |  
685 | @media screen and (max-width: 767px) {
686 |   .container-fluid .dataTables_wrapper .dataTables_info,
687 | .container-fluid .dataTables_wrapper .dataTables_paginate {
688 |     float: none;
689 |     text-align: center;
690 |   }
691 |   .container-fluid .dataTables_wrapper .dataTables_paginate {
692 |     margin-top: 0.5em;
693 |   }
694 | }
695 | @media screen and (max-width: 640px) {
696 |   .container-fluid .dataTables_wrapper .dataTables_length,
697 | .container-fluid .dataTables_wrapper .dataTables_filter {
698 |     float: none;
699 |     text-align: center;
700 |   }
701 |   .container-fluid .dataTables_wrapper .dataTables_filter {
702 |     margin-top: 0.5em;
703 |   }
704 | }
705 | 


--------------------------------------------------------------------------------