Last active
January 31, 2024 00:00
-
-
Save cpsievert/04bedbe9af652fab8c24a5e5eee0d721 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| title: "Flexdashboard theming demo" | |
| runtime: shiny | |
| output: | |
| flexdashboard::flex_dashboard: | |
| theme: | |
| bg: "#101010" | |
| fg: "#FDF7F7" | |
| primary: "#ED79F9" | |
| base_font: !expr bslib::font_google("Prompt") | |
| code_font: !expr bslib::font_google("JetBrains Mono") | |
| orientation: rows | |
| 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) | |
| library(ggplot2) | |
| bslib::bs_themer() | |
| thematic::thematic_rmd( | |
| font = "auto", | |
| # To get the dark bg on the geom_raster() | |
| sequential = thematic::sequential_gradient(fg_low = FALSE, fg_weight = 0, bg_weight = 1) | |
| ) | |
| theme_set(theme_bw(base_size = 20)) | |
| ``` | |
| 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( | |
| input$contact_rate, 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 | |
| ```{r} | |
| DT::datatable(mtcars, fillContainer = TRUE) | |
| ``` | |
| Storyboard {.storyboard} | |
| ========================================= | |
| ### Static Plots | |
| ```{r} | |
| p <- ggplot(faithfuld, aes(waiting, eruptions, z = density)) + | |
| geom_raster(aes(fill = density)) + | |
| geom_contour() + | |
| ggtitle("2d density estimate of Old Faithful data") | |
| renderPlot(p) | |
| ``` | |
| *** | |
| Put `thematic_rmd()` for auto-plot theming! | |
| ### Interactive Plots | |
| ```{r} | |
| library(plotly) | |
| plotlyOutput("plotly") | |
| ``` | |
| ```{r} | |
| output$plotly <- renderPlotly({ | |
| cd <- session$clientData | |
| ggplotly(p, height = cd$output_plotly_height, width = cd$output_plotly_width) | |
| }) | |
| ``` | |
| *** | |
| `thematic_rmd()` also works with `ggplotly()`! | |
| ### Learn more | |
| https://rstudio.github.io/thematic/ | |
| 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 {.bg-primary} | |
| This 'card' has a `.bg-primary` class. | |
| ### Secondary background {.bg-secondary} | |
| This 'card' has a `.bg-secondary` class (only supported in BS4+). | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment