---
title: "Álvaro Alonso Fernández"
output: 
  flexdashboard::flex_dashboard:
    navbar:
      - { title: "MiWeb", href: "https://sites.google.com/view/webalvaro/", align: left }
      - { title: "MiBlog", href: "http://ecotoxicologiayecologia.blogspot.com/", align: left }
    orientation: columns ##por defecto en columnas
    vertical_layout:  ##se llena el ancho de página con 'fill'
    source_code: embed ##permite descargar el código
---

```{r setup, include=FALSE}
library(flexdashboard)
#Fijamos el directorio de trabajo
setwd(dir = "F:/R/FLEXDASHBOARD/Prueba")
########################################
#####Datos generales a utilizar#########
########################################
datos<-read.csv("prueba.csv", sep=";")
datos
summary(datos)
ciudades<-datos$Ciudad
porcentaje<-datos$Porcentaje
library(rio)
library(here)
library(tidyverse)
library(flexdashboard)
library(flextable)
library(incidence2)
library(epicontacts)
library(DT)
library(janitor)
library(leaflet)

```


Nuestros datos
=======================================================================


Column {data-width=450}
-----------------------------------------------------------------------

### **Introducción** 

Autor: Álvaro Alonso Fernández. Departamento de Ciencias de la Vida, Universidad de Alcalá\
Esto es un ejemplo de la utilidad de **FlexDashboard** para la presentación de resultados en un formato visual ordenado y similar a una Web.\ En este caso se presentan figuras y tablas en dos páginas (arriba en el menu azul se puede navegar a través de ellas).\
Trabajaremos con los datos brutos mostrados en el panel superior derecho de esta página.

### **Paquetes Requeridos**

Se requieren numerosos paquetes para que funcione FlexDashboard. Aquí la lista (ni están todos los que son ni son todos los que están.....):

```{r, eval=F, echo=T}
library(rio)
library(here)
library(tidyverse)
library(flexdashboard)
library(flextable)
library(incidence2)
library(epicontacts)
library(DT)
library(janitor)
library(leaflet)
```

### **Código para elaborar la tabla** 

```{r, eval=F, echo=T}
datos<-read.csv("prueba.csv", sep=";")#cargamos nuestros datos
datos
summary(datos)

DT::datatable(datos, options = list( #con la función DT::datatable
  #generamos nuestra tabla dinámica)
  bPaginate = FALSE
))
```




Column {data-width=550}
-----------------------------------------------------------------------

### **Datos Brutos**

```{r}
datos
```

### **Tabla elaborada**

```{r}
DT::datatable(datos, options = list(
  bPaginate = FALSE
))
```

Figuras
=======================================================================


Column {data-width=550}
-----------------------------------------------------------------------

### **Figura A**

```{r}
p<-ggplot(data=datos, aes(x=Ciudad, y=Porcentaje)) +
   geom_bar(stat="identity", fill="steelblue")+
  theme_minimal()+
  geom_text(aes(label=Porcentaje), vjust=1.6, color="white", size=2)+
  theme(axis.text.x = element_text(angle = 90, vjust = 0.5, hjust=1))
p
```

> Porcentaje marcado para cada una de las ciudades. Se puede observar como nuestro gráfico indica el máximo valor para Vitigudino. Esto demuestra que no siemre lo más poblado es lo mejor. A pesar de ello, entre las otras ciudades también se aprecian diferencias marcadas. En cualquier caso no llegan al nivel de Vitigudino.

Column {data-width=450}
-----------------------------------------------------------------------

### **Figura B**

```{r}
p<-ggplot(data=datos, aes(x=Ciudad, y=Coste)) +
   geom_bar(stat="identity", fill="darkgreen")+
  theme_minimal()+
  theme(axis.text.x = element_text(vjust = 0.5, hjust=1))
p+ coord_flip()
```

> Coste marcado para cada una de las ciudades

### **Figura C**

```{r}
p<-ggplot(data=datos, aes(x=Ciudad, y=Rentabilidad)) +
   geom_bar(stat="identity", fill="darkred")+
  theme_minimal()+
  theme(axis.text.x = element_text(vjust = 0.5, hjust=1))
p+ coord_flip()
```

> Rentabilidad marcada para cada una de las ciudades

Tablas
=======================================================================


Column {data-width=550}
-----------------------------------------------------------------------

### **Tabla 1 Dinámica**

```{r}
DT::datatable(datos, options = list(
  bPaginate = FALSE
))
```

Column {data-width=550}
-----------------------------------------------------------------------

### **Tabla 2 Estática**

```{r}
knitr::kable(datos)
```


Tabset
=================================

Row {.tabset}
---------------------------------

### **Tabla 1**
    ```{r }
DT::datatable(datos, options = list(
  bPaginate = FALSE
))
```

### **Tabla 2**
```{r}
DT::datatable(datos, options = list(
  bPaginate = TRUE
))
```

### **Tabla 3**
```{r}
knitr::kable(datos)
```

### **Tabla 4**
```{r}


```


### **Figura 1**
```{r}
p
```

### **Figura 2**
```{r}
ggplot(data=datos, aes(x=Ciudad, y=Rentabilidad)) +
   geom_bar(stat="identity", fill="darkred")+
  theme_minimal()+
  theme(axis.text.x = element_text(angle = 90, vjust = 0.5, hjust=1))
```

Iconos
=======================================================================


Columns
-----------------------------------------------------------------------

### Totales

```{r}
suma <- 35+62
valueBox(suma, icon = "fa-pencil")
```

### Papelera

```{r}
suma <- 3+9+6
valueBox(suma, icon = "fa-trash",
         color = ifelse(suma > 10, "warning", "primary"))
```

### Linked Value Box

```{r}
valueBox(42, icon = "fa-pencil", href="#Nuestros datos",color="darkred")
```


### **Código para elaborar iconos** 

```{r, eval=F, echo=T}
#icono
suma <- 35+62
valueBox(suma, icon = "fa-pencil")
#icono
suma <- 3+9+6
valueBox(suma, icon = "fa-trash",
         color = ifelse(suma > 10, "warning", "primary"))
#link
valueBox(42, icon = "fa-pencil", href="#Nuestros datos",color="darkred")#nombre de la página dentro del flexdashboard

##más iconos en https://ionic.io/ionicons
```


Gauges{data-orientation=columns} 
=======================================================================

Columns
-----------------------------------------------------------------------
### **Códigos**

```{r, eval=F, echo=T}
rate <- 10
gauge(rate, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))

rating <- 45
gauge(rating, min = 0, max = 100, gaugeSectors(
  success = c(50, 100), warning = c(25, 49), danger = c(0, 25)
))

probabilidad <- 55
gauge(probabilidad, min = 0, max = 100, gaugeSectors(
  success = c(0, 50), warning = c(50, 70), danger = c(70, 100)
))
```

Columns
-----------------------------------------------------------------------

### **Porcentaje de éxito**

```{r}
rate <- 10
gauge(rate, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
```

Columns{data-width=350}
-----------------------------------------------------------------------
### **Valor promedio** 

```{r}
rating <- 45
gauge(rating, min = 0, max = 100, gaugeSectors(
  success = c(50, 100), warning = c(25, 49), danger = c(0, 25)
))
```

Columns{data-width=250}
-----------------------------------------------------------------------
### **Probabilidad**

```{r}
probabilidad <- 55
gauge(probabilidad, min = 0, max = 100, gaugeSectors(
  success = c(0, 50), warning = c(50, 70), danger = c(70, 100)
))
```


Storyboard {.storyboard}
=======================================================================


### La figura que habíamos crado al principio de la página la volvemos a poner aquí

```{r}
p

```

***
Los comentarios a este Storyboard se ponen detrás de las tres estrellitas.Los comentarios a este Storyboard se ponen detrás de las tres estrellitas.Los comentarios a este Storyboard se ponen detrás de las tres estrellitas.Los comentarios a este Storyboard se ponen detrás de las tres estrellitas.Los comentarios a este Storyboard se ponen detrás de las tres estrellitas.

### Ahora mostramos de nuevo los datos originales para construir la figura{data-commentary-width=300}

```{r}
DT::datatable(datos, options = list(
  bPaginate = FALSE
))
```

***
De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.De nuevo.

### Otra de las figuras creadas en este ejemplo{data-commentary-width=350}

```{r}
rating <- 65
gauge(rating, min = 0, max = 100, gaugeSectors(
  success = c(50, 100), warning = c(25, 49), danger = c(0, 25)
))
```

***
Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.Cualquier texto vale para poner aquí las veces que haga falta.

### Se puede incluso insertar un mapa{data-commentary-width=350} 

```{r}
m <- leaflet()
m <- addTiles(m)
m <- addMarkers(m, lng=174.768, lat=-36.852, popup="The birthplace of R")
m
```

***
Leaflet es un complemneto de JavaScript library para la creación de mapas dinámicos. Se puede hacer zoom, señalar localizaciones, anotaciones, etc. https://rstudio.github.io/leaflet/

Créditos
=======================================================================



[Álvaro Alonso Fernández](https://sites.google.com/view/webalvaro/p%C3%A1gina-principal)

Departamento de Ciencias de la Vida

Universidad de Alcalá (España)

[![](blogger.png)](https://ecotoxicologiayecologia.blogspot.com/)

[![](ccnocomercial.png)](https://creativecommons.org/licenses/by-nc-sa/4.0/legalcode)


```