I've created a dashboard using flexdashboard with row layout. My first row includes valueboxes and my second row is a leaflet map. How do I add a header above the 2nd row?
As in the code below, I used ### Map header under the 2nd row but that renders as a small title (shown in output). Is there a way to:
Add newlines between the 2 rows?
To format the header to be increase font size and bold?
title: "Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
smooth_scroll: true
---
<br><br><br>
```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)
```
Row
-----------------------------------------------------------------------
### Articles per Day
```{r}
valueBox("5 articles", icon = "fa-pencil")
```
### Comments per Day
```{r}
valueBox("10 comments", icon = "fa-comments")
```
Row
-----------------------------------------------------------------------
### Map
```{r}
m <- leaflet() %>%
addTiles() %>%
setView(lng=-77.030137, lat=38.902986, zoom = 16) %>%
addMarkers(lng=-77.030137, lat=38.902986, popup="<b>Hello</b><br><a href='https://www.washingtonpost.com'>-Me</a>")
m
```
Output:
You can increase font-size and bold the header ### Map specifically, you can target it by using a css class, say, .custom and apply the css rules for .chart-title class.
And to create space between value-boxes and the map, one option could be increasing the top margin.
---
title: "Dashboard"
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: scroll
smooth_scroll: true
---
<br><br><br>
```{css, echo=FALSE}
.custom {
margin-top: 30px;
}
.custom .chart-title{
font-size: 30px;
font-weight: bold;
}
```
```{r setup, include=FALSE}
library(flexdashboard)
library(leaflet)
```
Row
-----------------------------------------------------------------------
### Articles per Day
```{r}
valueBox("5 articles", icon = "fa-pencil")
```
### Comments per Day
```{r}
valueBox("10 comments", icon = "fa-comments")
```
Row
-----------------------------------------------------------------------
### Map {.custom}
```{r}
m <- leaflet() %>%
addTiles() %>%
setView(lng=-77.030137, lat=38.902986, zoom = 16) %>%
addMarkers(lng=-77.030137, lat=38.902986, popup="<b>Hello</b><br><a href='https://www.washingtonpost.com'>-Me</a>")
m
```
Related
I am trying to add a tabbed pillset within a Tab of a dropdwon menu in rmarkdown and flexdashboard. In the code below I would like two tabs one for the cars plot and one for the iris plot within the dropdown for A and Sub-Tab 1. My attempt below is stacking the plots instead of creating tabs. TIA
---
title: "Flex Template"
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(include = TRUE)
library(flexdashboard)
library(knitr)
library(tidyverse)
library(kableExtra)
```
# Tab1
Random Text
# Tab2
Random Text
# Tab3
```{r}
head(iris) %>% kable()
```
# A {data-navmenu="Dropdown"}
## Column {.tabset data-width="650"}
[**A**]{.underline} \
### Sub-Tab 0
```{r}
iris %>% kable()
```
### Sub-Tab 1 {.tabset .tabset-pills}
#### cars plot
```{r}
plot(mtcars)
```
#### Iris plot
```{r}
plot(iris$Petal.Length, iris$Petal.Width)
```
### Sub-Tab 2
```{r}
```
### Sub Tab 3
```{r}
```
# B {data-navmenu="Dropdown"}
# C {data-navmenu="Dropdown"}
below is my reprex. Post clicking the upload button, the text appears. Upon clicking the clear button the text should go off. Wanted to check the way to do this. Can anyone help me here
---
title: "Untitled"
runtime : shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
code <- "This is code"
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
actionButton("upload","Upload",width = 150)
actionButton("clear_upload","Clear",width = 150)
verbatimTextOutput("code")
get_code <- eventReactive(input$upload,{
code
})
output$code <- renderPrint(
get_code()
)
```
If I've correctly understood your problem, you may use the the observeEvent statement:
---
title: "Untitled"
runtime : shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
code <- "This is code"
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
actionButton("upload","Upload",width = 150)
actionButton("clear_upload","Clear",width = 150)
verbatimTextOutput("code")
get_code <- eventReactive(input$upload,{
code
})
observeEvent(input$upload, {output$code <- renderPrint(get_code())})
observeEvent(input$clear_upload, {output$code <- renderPrint("")})
```
I have a simple app. I have got both date and time in a column. So can we create multiple filters/Dropdowns for this column A
---
title: "Untitled"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: columns
vertical_layout: fill
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Column {data-width=650}
-----------------------------------------------------------------------
### Chart A
```{r}
df <- data.frame(A=c("2018-01-01 06:06:06","2018-01-02 06:06:01"),B=c("A","B"))
DT::dataTableOutput('a')
output$a <- DT::renderDataTable(
df)
```
I have the basic flexdashboard below. What I want is to change line after "hello" in order to place "world" below it,inside the renderText(). I have found that I can use htmlOutput() and verbatimTextOutput() but these are not used in flexdashboard.
---
title: "[School Name] Enrollment Projections for Fall 2019"
output:
flexdashboard::flex_dashboard:
orientation: rows
runtime: shiny
---
```{r setup, include = FALSE}
library(flexdashboard)
library(shiny)
```
Column {.sidebar }
-------------------------------------
### Menu
```{r}
renderText({
paste("hello", "world", sep="\n")
})
```
Row {data-height=400}
-------------------------------------
### Enrollments
```{r}
```
How can I put the figure on left and text on right and align it left (the text)?
---
title: "Untitled"
author: "George"
date: "12/3/2018"
output:
flexdashboard::flex_dashboard:
orientation: rows
runtime: shiny
---
```{r global, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(flexdashboard)
library(dplyr)
library(GGally)
x <- c(1,2,3)
y <- c(11,22,33)
z <- data.frame(x, y)
```
Introduction
=======================================================================
### General info
- A
- B
Corr
=======================================================================
### Correlation
Here is some text
- One
- Two
```{r}
renderPlot({
GGally::ggpairs(z)
})
```
try this, this layout fills the page completely and gives prominence to a single chart on the left where you can have your img and two secondary charts included to the right- where you can have your text
title: "Focal Chart (Left)"
output: flexdashboard::flex_dashboard
---
Column {data-width=600}
-------------------------------------
### Chart 1
```{r}
```
Column {data-width=400}
-------------------------------------
### Chart 2
```{r}
```
### Chart 3
```{r}
```