flexdb-bslib.Rmd

---
title: "Flexdashboard theming demo"
runtime: shiny
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    theme: 
      version: 4
    social: menu
    source_code: embed
    navbar:
      - { title: "About", href: "https://google.com", align: right, icon: glyphicon-time}
      - { title: "Home", href: "https://google.com", align: right, icon: fa-facebook }
---


```{r, include=FALSE}
library(flexdashboard)
bslib::bs_themer()
thematic::thematic_rmd(font = "auto")
```


Components
===================================== 

Sidebar {.sidebar}
-------------------------------------

```{r}
sliderInput("contact_rate", "Set contact rate", value = 91, min = 0, max = 100)
```

```{r}
selectInput("dummy", "Choose a state", choices = state.abb)
```

```{r}
dateRangeInput("date", "Choose a date")
```

Value Boxes {data-width=200}
-------------------------------------

### Primary

```{r}
valueBox(1, caption = "primary", icon = "fa-github")
```

### Info

```{r}
valueBox(2, caption = "info", color = "info", icon = "fa-twitter")
```

### Success

```{r}
valueBox(3, caption = "success", color = "success", icon = "glyphicon-time")
```

### Warning

```{r}
valueBox(4, caption = "warning", color = "warning", icon = "fa-facebook")
```

### Danger

```{r}
valueBox(5, caption = "danger", color = "danger", icon = "fa-facebook")
```

### Custom

```{r}
# TODO: why is there a linked value here?
valueBox(
  6, caption = "custom", color = "lightgray",
  icon = "fab fa-r-project"
)
```

Gauges {data-width=200}
-------------------------------------

### Success Rate

```{r}
renderGauge({
  gauge(
    91, min = 0, max = 100, symbol = '%', 
    sectors = gaugeSectors(
      danger = c(0, 20),
      warning = c(20, 80),
      success = c(80, 100)
    )
  )  
})
```

### Warning metric

```{r}
renderGauge({
  gauge(
    3.4, min = 0, max = 5, 
    sectors = gaugeSectors(
      danger = c(1, 2),
      warning = c(3, 4),
      success = c(5, 5)
    )
  )
})
```

### Danger!

```{r}
renderGauge({
  gauge(
    7, min = 0, max = 10, 
    sectors = gaugeSectors(
      danger = c(7, 10),
      warning = c(3, 7),
      success = c(1, 2)
    )
  )
})
```

    
3rd Party Outputs {.tabset}
-------------------------------------

### Basic Table
    
```{r}
knitr::kable(mtcars)
```

### Interactive Table {.active}
    
```{r}
DT::datatable(mtcars, fillContainer = TRUE)
```

### Static Plots

```{r}
p <- ggplot(diamonds[sample(nrow(diamonds), 1000), ], aes(carat, price)) +
    geom_point(alpha = 0.2) +
    geom_smooth() +
    facet_wrap(~cut) + ggtitle("Diamond price by carat and cut")
p
```

> Some text 

### Interactive Plots

```{r}
plotly::ggplotly(p)
```


Cards
=====================================     
   
Row {data-height=300}
-------------------------------------

### Basic card

Some descriptive text here.


### 

No header should appear above. Content should be overflowing

```{r, echo = TRUE}
# Some pretty R code
str(mtcars)
```




Row
-------------------------------------
   
### Primary background with white text {.bg-primary}

This 'card' has a `.bg-primary` class.

### Secondary background {.bg-secondary}

This 'card' has a `.bg-secondary` class (only supported in BS4+).