Shiny Visualizacion de datos con R Slides 2

.title[
# Shiny Visualizacion de datos con R Slides 2
]
.subtitle[
## Diplomado en Data Science, MatPUC
]
.author[
### Joshua Kunst Fuentes <a href="mailto:jbkunst@gmail.com" class="email">jbkunst@gmail.com</a>
]

---

# Shiny: Visualizacion de datos con R

## Version 2024

### Clases

* Lunes 4 de noviembre

* Miércoles 6 de Noviembre

---

# Programa

- [Slides 1](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-01.html)
  - Aplicación (web), ejemplos.
  - Introducción a shiny: Interfaz usuario y servidor
- [Slides 2](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-02.html)
  - Layouts  
  - Integración HTMLWidgets
- [Slides 3](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-03.html)
  - Temas, templates y diseño    
  - Compartir una app
  - Shiny en Python
- [Slides 4](https://jkunst.com/shiny-visualizacion-de-datos-con-R/slides-04.html)
  - Expresiones reactivas
  - Orden de ejecución  
  - Extensiones shiny

---

# Layouts

---

# Layouts

Laytous se refiere a la disposición de elementos -como inputs, textos,
outputs- en nuestra app. Dependiendo de las necesidades puede ser convenientes algunos
tipos de layuts sobre otros.

Como mencionamos anteriormente {shiny} utiliza boostrap 3, y seguirá usando 
esta versión para evitar problemas de compatibilidad con aplicaciones existentes y mantener la estabilidad en diseños desarrollados bajo esa versión.

Para usar versiones recientes de boostrap se debe utilizar el paquete {bslib} que
viene con otro contenedores (funciones) y nuevas funcionalidades, como _valueBox_es.

---

# {shiny} Tipos de Layouts

---

# {shiny} sidebarLayout

![](imgs/sidebar.png)

---

# {shiny} sidebarLayout - Estructura

Es una distribución simple donde lo primero en aparecer es los controles o
inputs.

Luego viene el panel principal el cual posee mayor espacio.

---

# {shiny} sidebarLayout - Ejemplo código

ui <- fluidPage(
 titlePanel("Hello Shiny!"),

sidebarLayout(
        sidebarPanel(
            sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30)
        ),
        mainPanel(
           plotOutput("distPlot")
        )
    )
)

server <- function(input, output) {

output$distPlot <- renderPlot({
 x <- faithful[, 2]
 bins <- seq(min(x), max(x), length.out = input$bins + 1)

hist(x, breaks = bins, col = 'skyblue', border = 'white',
             xlab = 'Waiting time to next eruption (in mins)',
             main = 'Histogram of waiting times')
    })
}

shinyApp(ui = ui, server = server)
```
]

---

# {shiny} Tipos de Paneles de Navegación

Es posible que nuestra aplicación vaya creciendo, en dicho caso, Los paneles 
nos permiten organizar distintas secciones de la aplicación.

---

# {shiny} tabsetPanel

Los tabs (`tabsetPanel`) son útiles para separar secciones _similares_ en nuestra app. A diferencia de por ejemplo `navbarPage`.

``` r
library(shiny)

ui <- fluidPage(
 titlePanel("Hello Shiny!"),
 sidebarLayout(
 sidebarPanel(
 sliderInput("obs", "Number of observations:", min = 0, max = 1000, value = 500)
 ),
 mainPanel(
 tabsetPanel(
 tabPanel("Plot", plotOutput("plot")),
 tabPanel("Summary", verbatimTextOutput("summary")),
 tabPanel("Table", tableOutput("tabla"))
 )
 )
 )
)

server <- function(input, output) {
 output$plot <- renderPlot({ hist(rnorm(input$obs)) })
 output$summary <- renderText({ input$obs })
 output$tabla <- renderTable({ data.frame(input$obs) })
}

shinyApp(ui, server)
```
]

---

# {shiny} tabsetPanel

Los tabs (`tabsetPanel`) son útiles para separar secciones _similares_ en nuestra app. A diferencia de por ejemplo `navbarPage`.

![](imgs/tabs.png)

---

# Ejercicio: Modificar la estructura de la aplicación

Nivel _fácil, para calentar las manos_: Para el ejemplo de `sidebarLayout`: Modifique la aplicación para que posea un layout de tipo `flowLayout`.

Nivel _entretenido_: Para el ejemplo de `tabsetPanel` agregue:
  - Un tab más con un gráfico de líneas.
  - Un tab que utilice la función `summary` para mostra resúmen de los datos.
  - Modifique la applicación para utilizar la función `navbarPage`.

---

# Solución 1

```r
library(shiny)

ui <- fluidPage(
 titlePanel("Hello Shiny!"),
 flowLayout(
 sliderInput("obs", 
 "Number of observations:",
 min = 0, 
 max = 1000, 
 value = 500),
 plotOutput("distPlot")
 )
 )

server <- function(input, output) {
 output$distPlot <- renderPlot({
 hist(rnorm(input$obs)) 
 })
}

shinyApp(ui, server)
```

---

# Solución 2

ui <- navbarPage(
 title = "Hello Shiny!",
 tabPanel("Plot",
 sliderInput("obs", 
 "Number of observations:", 
 min = 0, max = 1000, value = 500),
 plotOutput("plot")
 ),
 tabPanel("Línea", plotOutput("linea")),
 tabPanel("Summary", verbatimTextOutput("summary")),
 tabPanel("Table", tableOutput("tabla"))
)
```
]

.pull-right[
```r
server <- function(input, output) {
 output$plot <- renderPlot({
 hist(rnorm(input$obs))
 })
 output$summary <- renderPrint({
 summary(rnorm(input$obs))
 })
 output$tabla <- renderTable({ 
 data.frame(rnorm(input$obs)) 
 })
 output$linea <- renderPlot({
 x <- rnorm(input$obs)
 qplot(x = 1:input$obs, x, geom = "line")
 })
 
 
}

shinyApp(ui, server)
```
]

---

# {bslib} page_sidebar

![](imgs/page_sidebar.png)

---

# {bslib} page_sidebar

ui <- page_sidebar(

title = "Hello Shiny!",

sidebar = sidebar(
    sliderInput(
      "bins", label = "Number of bins:",
      min = 1, value = 30, max = 50
    )
  ),

plotOutput("distPlot")
)
```
https://shiny.posit.co/r/articles/build/layout-guide/
]

---

# {bslib} page_navbar

![](imgs/page_navbar.png)

.code70[
```r
ui <- page_navbar(
 title = "My App",
 bg = "#2D89C8",
 inverse = TRUE,
 nav_panel(title = "One", p("First page content.")),
 nav_panel(title = "Two", p("Second page content.")),
 nav_panel(title = "Three", p("Third page content.")),
 nav_spacer(),
 nav_menu(
 title = "Links",
 align = "right",
 nav_item(tags$a("Posit", href = "https://posit.co")),
 nav_item(tags$a("Shiny", href = "https://shiny.posit.co"))
 )
)
```
]

---

# HTMLWidgets

---

# HTMLWidgets

HTMLWidgets son un tipo de paquetes que nos permiten realizar visualizaciones en HTML
las cuales se pueden usar en (1) consola, (integrar) integrar con shiny y también (3) rmarkdown.

Existen una gran cantida de paquetes https://gallery.htmlwidgets.org/, y nos sirven 
para complementar nuestra aplicación.

Cada paquete HTMLWidget tiene su propio set de funciones, el código utilizado  para hacer un gráfico en plotly no es el mismo (pero generalmente muy similar)
al utilizado en highcharter, echarts4r:

- https://plotly.com/r/
- https://jkunst.com/highcharter/
- https://echarts4r.john-coene.com/
- https://rstudio.github.io/leaflet/
- https://rstudio.github.io/DT/

Ejemplo de uso de script https://github.com/jbkunst/shiny-visualizacion-de-datos-con-R/blob/master/R/script-htmlwidgets.R

---

``` r
*library(ggplot2)
```
]
 
.panel2-ggplot2-auto[

]