Hide Element in Shiny RMarkdown - shiny

I was wondering wether it was possible to hide a element in shiny rmarkdown from the user and still get the reactive value.
---
title: "My Title"
author: "My Name"
date: "Today"
output:
rmdformats::html_clean:
highlight: kate
runtime: shiny
---
```{r knitr_init, echo=FALSE, cache=FALSE}
library(knitr)
library(rmdformats)
## Global options
options(max.print="75")
opts_chunk$set(echo=FALSE,
cache=TRUE,
prompt=FALSE,
tidy=TRUE,
comment=NA,
message=FALSE,
warning=FALSE)
opts_knit$set(width=75)
```
```{r setup, include=FALSE}
library(tidyverse)
library(shinyjs)
```
```{r name, echo=FALSE, cache=FALSE}
inputPanel(
selectizeInput(inputId = "Name", label = "Choose Name", choices=c("Rachel","Mike"), selected="Mike"),
numericInput(inputId = "Cluster", label = "Choose Cluster", min = 1, max=10, value = 1 ,step = 1)
)
renderText(paste("Hallo:",input$Cluster))
```
What I got is this rmarkdown: Picture 1
See Hallo: 1, what shows, that renderText get the reactive value from input$Cluster. Is it possible to somehow hide this numericInput, that it looks like this: Picture 2
I've tried shinyjs with different settings but it was no good.

At least two options here:
1. Use plain CSS
<style>
#Cluster {
display :none;
}
</style>
This way you will have to delete the label for the numericInput.
2. Use jQuery to select the parent div containing label and input field
<script>
$(document).ready(function() {
$('#Cluster').parent('div').css('display', 'none');
});
</script>
Here we just hide the whole container.
Put either of those right underneath your YAML header.

Related

Is there a way to add color to a bulleted list?

I would like to add color to a bulleted list within a text portion of an RMarkdown script intended for HTML. I've tried many different things that all seem to work for a single line of text, but not for multiple lines. Here is an example. The first line "I am red text" ends up rendering in red, but the bulleted list do not:
<span style="color: red;"> I am red text </span>
<span style="color: red;">
* bullet1
* bullet2
* bullet3
</span>
EDIT
Following a new information in the comments by the OP, here is a solution for multi colored bullet lists:
---
title: "Red bullets"
author: bttomio
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
<font color='red'>
* bullet1
* bullet2
* bullet3
</font>
* bullet1
* bullet2
* bullet3
-output
You can change the CSS to change the color. I just modified the code here, adding color: red;.
Here is a simple ```.Rmd
---
title: "Red bullets"
author: bttomio
output: html_document
---
```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```
```{css, echo = F}
ul {
color: red;
}
```
* bullet1
* bullet2
* bullet3
Output:

fonts to html output Rmarkdown

When I used \textsf{what} in the following document, "what" disappears in the output file. What should I do to prevent the problem while changing the font of "what"? Thanks!
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
\textsf{what}
If you want to change the font when rendering to html output you colud use some inline CSS e.g.
<p style = "font-family: Times New Roman; color: red;">what</p>
will print "what" in red using Times New Roman.
I believe \textsf{what} is latex syntax, which is for PDF output. You are rendering to HTML in your example.
as the #stefan suggested inline CSS in your Rmarkdown it would look like this
---
title: "test"
author: test
date: 11/23/2020
link-citations: yes
output:
bookdown::html_document2: default
---
<style>
body, p {
background-color: lightgray;
color: black;
font-family: Arial Black;
}
</style>
what
I used Arial Black for the example to showcase the effects below.

how to correctly implement a Button to hide R code in RMarkdown/html

I am doing some exercises for my students using RMarkdown and a piece of code I was using begore, from Ronak Bhatt, but it is not working corretly anymore. Instead R code in correct format, I am having ```r ... like a text output.
Below I am posting all setting to have a button that hide/unhide the code in html. I really appreciate any help.
Thanks!
In the R Markdown yaml I have:
---
title: "Test"
author: "..."
date: "`r Sys.Date()`"
output:
html_document:
includes:
in_header: scripts/uncover.html
...
---
In knitr setup I have:
```{r setup, include=FALSE}
uncover <- function(before, options, envir) {
if (before) {
id <- options$id
button_string <- paste0("<button onclick=\"uncover('",
id,
"')\">Solução</button>")
div_string <- paste0("<div id = '", id,
"', style = 'display:none'>")
paste(button_string, div_string, sep= "\n")
}
else {
"</div><br>"
}
}
And in script uncover.html I have:
<script>
function uncover(id) {
var x = document.getElementById(id);
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
Found a solution here. RMarkdown is friendly with HTML and will allow raw HTML in Rmarkdown as long as it's used properly. I didn't use your uncover.html file, because I used other HTML code directly inside Rmarkdown.
---
title: "Test"
author: "..."
date: "`r Sys.Date()`"
output:
html_document:
includes:
in_header: uncover.html
---
<button class="btn btn-primary" data-toggle="collapse" data-target="#BlockName"> Show/Hide </button>
<div id="BlockName" class="collapse">
```{r}
uncover <- function(before, options, envir) {
if (before) {
id <- options$id
button_string <- paste0("<button onclick=\"uncover('",
id,
"')\">Solução</button>")
div_string <- paste0("<div id = '", id,
"', style = 'display:none'>")
paste(button_string, div_string, sep= "\n")
}
else {
"</div><br>"
}
}
```
</div>
I know it has been quite some time, but as I stumbled upon the excellent answer from Daniel when I tried to solve the same problem, I wanted to contribute my adapted solution.
By adding the following code to a code chunk at the beginning of the R markdown document, a new code chunk option called button is added. If it is set, the code chunk is hidden behind a button with a name equal to the value of the button code chunk option.
local({
hook_chunk <- knitr::knit_hooks$get('chunk')
knitr::knit_hooks$set(chunk = function(x, options) {
if (!is.null(options$button)) {
rnd_id <- substr(tempfile("b", "", ""), 2, 9)
paste0(
'<button class="btn btn-primary" data-toggle="collapse" data-target="#',
rnd_id, '">',
options$button, '</button> <div id="',
rnd_id, '" class="collapse">',
x, '</div>')
} else {
x
}
})
})
NAME is the name of the button and ID needs to be a unique identifier. The function therefor generates a random ID for every individual code chunk. I know that this is by no means a good solution… but it works.
The function is a modification of a function in the R Markdown Cookbook section 12.1 Redact Source Code. To achieve the desired effect, the knitr chunk hook is redefined to paste the necessary raw HTML code above and below the actual code chunk if the button option is set.

highlight active menuItem in the sidebar of shinydashboard

My question is exactly the same as what Maxime asked in r studio community. I have run into a similar issue with my work.
Since there was no response in that community, I'll repost Maxime's question here.
Hello R users,
I have a lot of hidden menuItems when I launch my shiny App. Some of
them are going to be shown when some buttons are clicked and some
other conditions met.
Everything ran as expected but I would like that the active menuItem
is highlighted on the sidebar. This is the case with the home page
that is never hidden but with all the hidden (from shinyjs package)
menuItems, once I show them, the menuItem is not highlighted when it
is active.
Anyone has a relatively easy solution for that?
Example of what the sidebar codes can look like:
in the UI for the sidebar:
sidebarMenu(id = "tabs",
shinyjs::useShinyjs(),
menuItem("Product Selection", tabName = "product_selection", icon = icon("dashboard")),
shinyjs::hidden(
div(id="Test",
menuItem("Test", tabName = "Test", icon = icon("chart-line"))))
)
in the server for the sidebar action:
observeEvent(input$look, {ID = someID shinyjs::show(id= ID,anim = TRUE)
updateTabItems(session, "tabs", ID) })
Have a nice day,
Maxime

get ID of element under cursor in shiny

In my Shiny app, the user mouses over some HTML output which consists of several spans, like this:
<div id="mydiv">
<span id="span1">foo</span>
<span id="span2">bar</span>
</div>
I want to get the ID of the span which the user is currently mousing over as a shiny input$...
I know there are lots of js ways to do it, jquery get element where the cursor is, but I don't know how to integrate with Shiny, e.g. by using shinyjs https://deanattali.com/shinyjs/extend.
Like this, if I correctly understand:
library(shiny)
js <- "
$(document).ready(function(){
$('span').on('mouseover', function(evt){
Shiny.setInputValue('span', evt.target.id);
});
})
"
ui <- basicPage(
tags$head(tags$script(HTML(js))),
tags$div(
tags$span(id = "span1", "foo"),
tags$span(id = "span2", "bar")
),
br(),
verbatimTextOutput("span")
)
server <- function(input, output){
output[["span"]] <- renderPrint({
input[["span"]]
})
}
shinyApp(ui, server)