Add rho as icon in valueBox - r

Can I add a rho (Greek letter small) as an icon to a value box in RShiny?
For example, with the following code snippet, I have created a value box that has the € symbol as an icon:
valueBox(winterMean, subtitle = "Mean Winter", color = "black", icon = icon("euro-sign"))
This gives the following value box:
How can I replace the € symbol by a small rho?

We can add custom Greek letters using Unicode Character "ρ" (U+03C1) through custom css, see example:
Using flexdashboard:
Our example rmd file:
---
title: "My Rho"
output:
flexdashboard::flex_dashboard:
css: styles.css
---
```{r}
library(flexdashboard)
valueBox(42, caption = "My Rho", icon = "fa-rho")
```
And additional styles.css file:
.fa-rho:before {
font-weight: 700;
content: '\03c1';
}
Output:
Note: For my test I kept css file in the same folder as rmd file, but it could be in any subfolder, then we need to define the full path in rmd, e.g.: resources/css/styles.css.
Using shinydashboard
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
includeCSS("styles.css"),
valueBox(42, "My Rho", icon = icon("rho")),
)
)
server <- function(input, output) { }
shinyApp(ui, server)
Output:

Related

Change the color for code embedded in markdown in shinydashboard shiny

I have a shiny (shinydashboard) app that contains embedded markdown with a code chunk which displays in red by default. How can I change the color?
Here is a demo app:
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
includeMarkdown("demo.md"),
)
)
server <- function(input, output) { }
shinyApp(ui, server)
The markdown file demo.md has this line:
This is a `code` example.
That word "code" renders with a red font. I would like to change the color.
I messed around with extra lines in the app:
tags$head(tags$style(HTML('
.code {
color: #000000;
}
')))
and
tags$style(
type = 'text/css',
'.code {color: black;}'
)
without success.
Can somebody tell me what I can add to the markdown or R file to change the color of the embedded code?
As per the shinydashboard documentation, we can either use an external CSS file or just include them in the UI code. So, your first attempt is quite close but you just need to use the correct CSS selector.
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
includeMarkdown("demo.md"),
tags$head(tags$style(HTML("
code {
color: blue;
}
")))
)
)
server <- function(input, output) { }
shinyApp(ui, server)

change CSS of single element from shinyWidgets in flexdashboard

Related to questions here and here, I would like to change the CSS of a pickerInput menu from ShinyWidgets. I am using flexdashboard and I would like the styling to match exactly that from the selectInput menu. I realize I can do this by setting the overall theme in the YAML to bootstrap, but I'd prefer not to use a global solution.
---
title: "Testing picker styles"
output:
flexdashboard::flex_dashboard
runtime: shiny
---
```{r setup, include=F}
library(shiny)
library(flexdashboard)
library(shinyWidgets)
```
Column
-----------------------------------------------------------------------
```{r}
selectInput(inputId = "id1", label = "Select input", choices = attr(UScitiesD, "Labels"))
pickerInput(inputId = "id2", label = "Picker input", choices = attr(UScitiesD, "Labels"))
```
pickerInput is styled like a Bootstrap button, and {flexdashboard} use Bootswatch's Cosmo theme (https://bootswatch.com/3/cosmo/) that's why it appears black.
You can change the class of the button with :
options = pickerOptions(style = "btn-link")
(in pickerInput arguments)
Or you can overwrite the base style like this :
options = list("style-base" = "form-control", style = "")

DownloadButton width in R Flexdashboard

I'm having problems to change my DownloadButton width, since he's different from actionButton (which have the width parameter).
Any easy ideas to solve it?
Here's my code (Just a simple download button):
Normalidade
=======================================================================
Inputs {.sidebar}
-----------------------------------------------------------------------
<h5>
```{r}
tags$hr()
downloadButton("downloadNormal",label = "Download seu teste", class = "butt1")
downloadHandler(
filename = "Resultados_Normal.csv",
content = function(file) {
write.csv(data, file)
}
)
tags$hr()
tags$br()
actionButton("AjudaNormal", label = " Ajuda", icon("question-circle"),
width = "100%",
onclick="window.open('http://google.com', '_blank')")
```
</h5>
Actually, after playing around with this I recommend to use uiOutput with renderUI.
Without using uiOutput the downloadButton function gets ignored (only the downloadHandler gets evaluated), that's why the width parameter was not set, and also you can't modify the label of the button.
There are all solved with using uiOutput.
---
title: "Full width downloadButton"
output:
flexdashboard::flex_dashboard:
css: styles.css
runtime: shiny
---
```{r setup, include=FALSE}
library(flexdashboard)
```
Inputs {.sidebar}
-----------------------------------------------------------------------
```{r}
# Create placeholder for the downloadButton
uiOutput("downloadUI")
```
```{r}
# Create the actual downloadButton
output$downloadUI <- renderUI( {
downloadButton("downBtn", "Download Iris data", style = "width:100%;")
})
# Add download handling
output$downBtn <- downloadHandler(
filename = function() {
"iris.csv"
},
content = function(file) {
write.csv(iris, file, row.names = FALSE)
}
)
```
I set the width using inlineCSS with the style argument, but you can (and should) use an external style sheet if you have multiple CSS rules.
Using an external stylesheet (CSS file)
An external CSS file can be used in Flexdashboard by adding css: path/filename.css to the YAML header.
---
title: "Full width downloadButton"
output:
flexdashboard::flex_dashboard:
css: styles.css
runtime: shiny
---
In this case the app tries to read a file called styles.css in the same folder as the Rmd.
Create the css file in the same folder and add the rule:
#downBtn {
width: 100%;
}
You can now remove style = "width:100%;" from the downloadButton and still get full width button.
Output:

How to make shinyAce app container background transparent

I created a shiny presentation using rmarkdown in which one of the slides includes a shinyAce editor (code below). The entire app seems to be inside a container which has a white background. I want to make the background of this container transparent using css, but has thus far I've been unable to find the right object name to apply the change to.
I've tried a simple par(bg = NA) and tooled around in the default css files in the rmarkdown, shiny, and shinyAce packages...but cant find the appropriate place to make the change.
Finally, I've included code in mainPanel to change the color of the background. However, this just seems to be an overlay on the white container because when I set body {background-color: transparent} the background remains white.
As always, any help is appreciated
---
title : "White Backgrounds are Ugly"
subtitle : "Help me make it go away"
author : "Me"
date : "Now"
output:
ioslides_presentation:
widescreen : true
runtime: shiny
---
## Basic R Plot with shinyAce
```{r, echo=FALSE}
library(shinyAce)
shinyApp(
shinyUI(
fluidPage(
sidebarLayout(
sidebarPanel(
aceEditor("code", mode="r",
value="plot(1:5, 1:5,\nxlab = 'This is side 1',\nylab = 'This is side 2',\nmain = 'This is side 3',\nsub = 'Subtitle or Caption',\naxes = TRUE,\ntype = 'p',\nlas = 0)"),
actionButton("eval", "Evaluate")),
mainPanel(list(tags$head(tags$style("body {background-color: rgba(255,130,255,1); }"))), plotOutput("output"))))),
shinyServer(function(input, output, session) {
output$output <- renderPlot({
par(bg = NA)
input$eval
return(isolate(eval(parse(text=input$code))))
})
})
)
```

Hide shiny output

How do you hide rendered shiny output? Specifically, I have some figures/tables generated by shiny and I have a button, that when clicked should hide the figures/tables, and when clicked again should show them.
This is what I have so far (below), and it works somewhat, but where it's supposed to hide the renderPlot output, there is a big blank space in the document that I am trying to make go away.
It should be possible to just copy and paste this code into Rstudio and hit run document (it's rmarkdown with shiny runtime).
---
runtime: shiny
---
```{r, echo=F}
actionButton("hide", "Hide")
dat <- data.frame(a=1:10, b=rexp(10, 1/10), c=letters[sample(1:24, 10)])
renderTable({
if (input$hide %% 2 == 1)
dat
})
```
lodi dodi
```{r, echo=F}
renderPlot({
if (input$hide %% 2 == 1)
plot(b ~ a, data=dat)
})
```
this text is separated by blank space, but it shouldn't be
You can use the shinyjs package to hide elements with the hide() function (or use the toggle() function to alternate between hiding and showing). Disclaimer: I wrote that package.
I've never used it in an rmarkdown before, so I'm just going to show how to use it in a normal shiny app and use the shinyApp() function to include a full shiny app inside an rmarkdown. You can read here about how to include shiny apps inside an rmarkdown doc.
---
runtime: shiny
---
```{r, echo=F}
suppressPackageStartupMessages(
library(shinyjs)
)
dat <- data.frame(a=1:10, b=rexp(10, 1/10), c=letters[sample(1:24, 10)])
shinyApp(
ui = fluidPage(
useShinyjs(),
actionButton("hide", "Hide"),
p("Text above plot"),
plotOutput("plot"),
p("Text below plot")
),
server = function(input, output, session) {
output$plot <- renderPlot({
plot(b ~ a, data=dat)
})
observeEvent(input$hide, {
hide("plot")
# toggle("plot") if you want to alternate between hiding and showing
})
},
options = list(height = 700)
)
```
In order to be able to use hide, I had to:
install and load shinyjs
add a call to useShinyjs() in the UI
call hide or toggle on the element that you want to hide/show
I hope this helps

Resources