---
title: "Opciones configuración cuadro de mandos"
output: flexdashboard::flex_dashboard
runtime: shiny
---

Ejemplo página html
=======================================================================


```{r}
# Construimos una página html de ejemplo 
shiny::renderUI({
  div(
    tags$h1("Mi título página", style = "font-size: 36px; font-weight: bold; text-align: center; margin-bottom: 20px;"),
    tags$p("Mi primer párrafo ....", style = "font-size: 18px; margin-bottom: 30px; text-align: justify;"),
    tags$h2("Sección 1 ", style = "font-size: 24px; font-weight: bold; margin-bottom: 20px;"),
    tags$p("Mi segundo párrafo", style = "font-size: 18px; margin-bottom: 20px; text-align: justify;"),
    div(
      style = "display: flex; justify-content: space-around; margin-bottom: 20px;",
      div(
        style = "border: 2px solid #006899; border-radius: 10px; padding: 20px; width: 45%;",
        tags$h3("Bloque 1", style = "font-size: 20px; font-weight: bold; margin-bottom: 10px;"),
        tags$p("texto bloque 1", style = "font-size: 16px; margin-bottom: 10px;"),
      ),
      div(
        style = "border: 2px solid #006899; border-radius: 10px; padding: 20px; width: 45%;",
        tags$h3("Bloque 2", style = " font-size: 20px; font-weight: bold; margin-bottom: 10px;"),
        tags$p("Texto bloque 2", style = "font-size: 16px; margin-bottom: 10px;"),
      )
      
    ),
    tags$h2("Sección 2", style = "font-size: 24px; font-weight: bold; margin-bottom: 20px;"),
    div(
      style = "border: 2px solid #006899; border-radius: 10px; padding: 20px; margin-bottom: 30px;",
      tags$p("Texto bloque 3", style = "font-size: 16px; text-align: justify;")
    )
  )
})

```

Formato Inputs
=======================================================================

Column {.sidebar data-width=300}
--------------------------------------------------
```{r}
shiny::selectInput(
  "valor.desplegable",
  label = "Seleccionar una opción con un desplegable",
  choices = c("Africa","Asia","Europe"),
  selected = "Europe"
)
```

```{r}
shiny::selectInput(
  "valores.desplegable",
  label = "Seleccionar varias opciones con un solo desplegable",
  choices = c("Africa","Asia","Europe"),
  selected = c("Africa","Europe"),
  multiple = TRUE
)
```

```{r}
shiny::sliderInput(
  "valor.slider",
  label = "Seleccionar número con un slider",
  min = 2,
  max= 10,
  value=5
)
```

```{r}
shiny::textInput(
  "valor.text",
  label = "Excribir texto libre",
  value="Mi.Texto"
)
```

```{r}
shiny::numericInput(
  "valor.numero",
  label = "Escribir/Seleccionar número en un rango",
  value=5,
  min=2,
  max=10,
  step=0.1
)
```

```{r}
shiny::checkboxInput(
  "valor.checkbox",
  label = "Seleccionar un checkbox",
  value=TRUE
)
```

```{r}
shiny::dateInput(
  "valor.date",
  label = "Seleccionar fecha en un rango",
  value="2024-07-14",
  min="2000-01-01",
  max="2030-12-31"
)
```

```{r}
shiny::dateRangeInput(
  "valor.rango.fechas",
  label = "Seleccionar un rango de fechas",
  start="2024-01-01",
  end="2024-12-31",
  min="2000-01-01",
  max="2030-12-31"
)
```


```{r}
shiny::radioButtons(
  inputId = "option.buttom",
  label = "Seleccionar una opción:",
  choices = c("Opción A", "Opción B","Opción C"),
  selected = "Opción A"
)
```

```{r}
# actionButton que afecta a todos los inputs de esta página: mientras no se
# pulsa, cambiar cualquier campo de la izquierda no actualiza los textos
shiny::actionButton("mostrar", "Mostrar valores")
```

```{r}
# eventReactive solo se recalcula al pulsar "mostrar"; empaqueta en una
# lista el valor de todos los inputs de la página en ese momento
seleccion <- shiny::eventReactive(input$mostrar, {
  list(
    desplegable  = input$valor.desplegable,
    desplegables = input$valores.desplegable,
    slider       = input$valor.slider,
    texto        = input$valor.text,
    numero       = input$valor.numero,
    checkbox     = input$valor.checkbox,
    fecha        = input$valor.date,
    rango.fechas = input$valor.rango.fechas,
    opcion       = input$option.buttom
  )
})
```


Column
-----------------------------------------------------------------------
### selectInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El valor del desplegable elegido por el usuario es : ",datos$desplegable)
})
```

### selectInput eligiendo varias opciones desde un único desplegable

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("Nº opciones elegidas por el usuario :",length(datos$desplegables), "opción 1:",datos$desplegables[1],", opción 2:",datos$desplegables[2])
})
```

### sliderInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El valor del slider elegido por el usuario es : ",datos$slider)
})
```

### textInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El texto libre elegido por el usuario es : ",datos$texto)
})
```

### numericInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El número elegido por el usuario es : ",datos$numero)
})
```

### checkboxInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El valor del checkbox elegido por el usuario es : ",datos$checkbox)
})
```

### dateInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("La fecha elegida por el usuario es : ",datos$fecha)
})
```

### dateRangeInput

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("El rango de fechas elegido por el usuario es : del",datos$rango.fechas[1],"al",datos$rango.fechas[2])
})
```


### radioButtons

```{r}
shiny::renderText({
  datos <- seleccion()
  paste("La opción elegida por el usuario es : ",datos$opcion)
})
```


Página con pestañas
=======================================================================

Column {.tabset data-width=650}
-----------------------

### Tabla 1

```{r}
shiny::renderTable({
   data.frame(
     isla=c("Lanzarote","La Gomera"),
     provincia=c("Las Palmas","S.C. de Tenerife")
   )
})
```

### Tabla 2

```{r}
shiny::renderTable({
   data.frame(
     isla=c("Fuerteventura","La Palma"),
     provincia=c("Las Palmas","S.C. de Tenerife")
   )
})
```