class: center, middle, inverse, title-slide

.title[
# Semillero R
]
.subtitle[
## Sesión 6: Tableros de datos - <code>flexdashboard</code>
]
.institute[
### Universidad Nacional - Universidad de Antioquia
]
.date[
### 2021-05-24
]

---

class: inverse, center, middle

# [`flexdashboard`](https://rmarkdown.rstudio.com/flexdashboard/)

---
class: inverse, center, middle

# Diseños de múltiples páginas

---

# Más diseños...

.panelset[

.panel[.panel-name[Múltiples páginas]

]

.panel[.panel-name[Orientación]

]

.panel[.panel-name[Menú de navegación]

]

.panel[.panel-name[Íconos]

- [Consultar íconos *Font Awesome 5*.](https://www.w3schools.com/icons/default.asp)
- [Consultar íconos *Font Awesome 6*.](https://fontawesome.com/icons)

]

---

# Componentes adicionales

.panelset[

.panel[.panel-name[Value Boxes]

```r
library(flexdashboard)
valueBox(
  value = 42,
  caption = "Texto...",
  icon = "fa-thumbs-down",
  color = "#7dcf9c"
)
```

]

.panel[.panel-name[Gauges]

```r
library(flexdashboard)
gauge(
  value = 80, min = 0, max = 100,
  label = "Rendimiento", symbol = "%",
  gaugeSectors(
    success = c(80, 100),
    warning = c(40, 79),
    danger = c(0, 39)
  )
)
```

]

.panel[.panel-name[Colores]

- `primary`
- `info`
- `success`
- `warning`
- `danger`
- Colores compatible con *CSS*. [Consultar colores hexadecimales.](https://www.w3schools.com/colors/colors_hexadecimal.asp)

]

---

# Storyboard - [ejemplo](https://beta.rstudioconnect.com/jjallaire/htmlwidgets-showcase-storyboard/htmlwidgets-showcase-storyboard.html)

.panelset[

.panel[.panel-name[Estructura general]

]

.panel[.panel-name[Storyboard + Comentarios]

]

.panel[.panel-name[Múltiples páginas]

]

---
class: inverse,  middle, center

# [R Markdown: The Definitive Guide - Chapter 5](https://bookdown.org/yihui/rmarkdown/dashboards.html)

---
class: inverse, center, middle

Notes for current slide

Notes for next slide

Semillero R
Sesión 6: Tableros de datos - flexdashboard
Universidad Nacional - Universidad de Antioquia
2021-05-24
1 / 8

`flexdashboard`

2 / 8

Diseños de múltiples páginas

3 / 8

Más diseños...

4 / 8

Componentes adicionalesValue Boxes
Gauges
Colores


library(flexdashboard)
valueBox(
  value = 42,
  caption = "Texto...",
  icon = "fa-thumbs-down",
  color = "#7dcf9c"
)


library(flexdashboard)
gauge(
  value = 80, min = 0, max = 100,
  label = "Rendimiento", symbol = "%",
  gaugeSectors(
    success = c(80, 100),
    warning = c(40, 79),
    danger = c(0, 39)
  )
)
primary
info
success
warning
danger
Colores compatible con CSS. Consultar colores hexadecimales.
5 / 8

Storyboard - ejemplo

6 / 8

R Markdown: The Definitive Guide - Chapter 5

7 / 8

8 / 8

`flexdashboard`

2 / 8

Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k	Go to previous slide
↓, →, Pg Dn, Space, j	Go to next slide
Home	Go to first slide
End	Go to last slide
Number + Return	Go to specific slide
b / m / f	Toggle blackout / mirrored / fullscreen mode
c	Clone slideshow
p	Toggle presenter mode
t	Restart the presentation timer
?, h	Toggle this help

Esc	Back to slideshow