shiny dashboard: jump to specific element in app by clicking infoBox - html

In my shiny app I want to add an option to let users jump to a specific element in the app (a table, a plot, just anything with an id), on current or different tab, by clicking on infoBox (or any other object I want).
My solution was to surround infoBox with div and add thehref=#id_of_element attribute. Unfortunately this solution works only for tabs with an extra "data-toggle" = "tab" attribute (it also does not change the opened tab to active), but that's not what I want.
My question is: how can I add the mentioned option and why this solution isn't working? Here is a small example what I want to do:
UI
library(shiny)
library(shinydashboard)
shinyUI(
dashboardPage(
skin = "blue",
dashboardHeader(title = "Example"),
dashboardSidebar(
sidebarMenu(id = "sidebarmenu",
menuItem("Tab1", icon = icon("line-chart"),
menuSubItem("SubTab1", tabName = "sub1", icon = icon("bar-chart")),
menuSubItem("SubTab2", tabName = "sub2", icon = icon("database"))),
menuItem("Tab2", tabName = "tab2", icon = icon("users"))
)
),
dashboardBody(
tabItems(
tabItem(tabName = "sub1",
tags$div(href="#s2t2",
infoBox(value = "Go to table 2 in SubTab2 (not working)",title = "Click me")),
tags$div(href="#shiny-tab-tab2", "data-toggle" = "tab",
infoBox(value = "Go to Tab2 (this works)",title = "Click me"))
),
tabItem(tabName = "sub2",
tableOutput("s2t1"),
tableOutput("s2t2")
),
tabItem(tabName = "tab2",
tableOutput("t2t1"),
tableOutput("t2t2")
)
)
)
)
)
SERVER:
shinyServer(function(input, output,session) {
output$s2t1<- renderTable(mtcars)
output$s2t2<- renderTable(mtcars)
output$t2t1<- renderTable(mtcars)
output$t2t2<- renderTable(mtcars)
} )

I found my answer:
$(document).ready(function() {
$("#div1").click(function() {
$(".sidebar-menu a[href=\'#shiny-tab-tab2\']").tab("show");
setTimeout(function(){
var top = $("#t2t2").position().top;
$(window).scrollTop( top );
}, 300);
});
});
where div1 is div around infoBox

Related

How to change the default "angle-left icon" on the sidebar menu in R Shiny to an "angle-right icon"?

I would like to change the default arrow direction (as in the attached pic), so it will point to the right.
this is the current code:
sidebarMenu(
menuItem("Market data", tabName = "market data", icon = icon("users"), startExpanded = TRUE,
menuSubItem("Performance", tabName = "history", icon = icon("calendar-day")),
menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
),
menuItem("Consumer 1", tabName = "consumer1", icon = icon("user"), startExpanded = FALSE,
menuSubItem("Consumption", tabName = "consumption", icon = icon("history")),
menuSubItem("Profile", tabName = "profile", icon = icon("poll-h")),
menuSubItem("Forecast engine", tabName = "forecast", icon = icon("brain"))
)
Thanks in advance
General
In general, to change the defaults in shinydashboard you need to find the correct CSS tags for these elements and then add your own custom CSS file to overwrite the default.
If you plan on making a lot of these changes, the shinydashboard framework might not be right for you.
Specific solution to your question
With some poking around in the browser, you'll see that the tag for these arrows are .fa-angle-left:before. The symbol showed is defined with the following CSS:
.fa-angle-left:before{content:"\f104"}
To change it to a right arrow we need to change \f104 to \f105:
As noted in the documentation, you can add your own CSS-file as such:
Add the file www/custom.css to the same folder as your Shiny dashboard is located.
Add the following code to it:
.fa-angle-left:before{content:"\f105"}
If you want the arrow to still point down after you click it you also need to add
.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
transform: rotate(90deg);
}
When this is done, you need to add the following code to your sidebarMenu:
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
)
Working example
app.R
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
dashboardSidebar(
sidebarMenu(
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
),
menuItem(
"Market data",
tabName = "market data",
icon = icon("users"),
menuSubItem("SMP", tabName = "SMP", icon = icon("dollar-sign"))
)
)
)
),
dashboardBody()
)
server <- function(input, output) {}
shinyApp(ui, server)
www/custom.css
.fa-angle-left:before{content:"\f105"}
.sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
transform: rotate(90deg);
}

info icon next to label of a selectInput in Shiny

I'm developing a shiny app and I want to add an "infobox" next to a selectInput(). Basically I want to add a small "info" icon to the selectInput() label and when a user move the mouse hover the info icon, a box with some text appears. I've found here on stackedoverflow a solution with tags$span and tags$i and if I add only text it works fine, but if I want to add an html link, or simply another tags (like tags$strong), it doesn't work. Here a reproducible example.
library(shiny)
shinyApp(
ui = fluidPage(
br(),
selectInput("works",
label = tags$span(
"This works",
tags$i(
class = "glyphicon glyphicon-info-sign",
style = "color:#0072B2;",
title = "Further information "
)),
choices = c("a","b")),
selectInput("notwork",
label = tags$span(
"This not works",
tags$i(
class = "glyphicon glyphicon-info-sign",
style = "color:#0072B2;",
title = list("Further information ",
tags$a(href = "https://www.google.com", "here", .noWS = "after"))
)),
choices = c("a","b")),
selectInput("notwork2",
label = tags$span(
"Neither this",
tags$i(
class = "glyphicon glyphicon-info-sign",
style = "color:#0072B2;",
title = p("Further information ",
strong("here"))
)),
choices = c("a","b")),
),
server = function(input, output) {
}
)
It looks I can't pass any other html tags to that value.
You try to put HTML in a normal HTML title attribute, which is never supported. what you need is some sort of Tooltip. You can use bsButton in combination with bsPopover from the ShinyBS package. I did not bother for the styling, but I am pretty sure you can get it done from here.
library(shiny)
library(ShinyBS)
shinyApp(
ui = fluidPage(
br(),
selectInput("works",
label = tags$span(
"This works",
tags$i(
class = "glyphicon glyphicon-info-sign",
style = "color:#0072B2;",
title = "Further information "
)),
choices = c("a","b")),
selectInput("worksnow",
label = tags$span("This works now too", bsButton("thisworks", label = "", icon = icon("info"), style = "info", size = "extra-small")),
choices = c("a","b")
),
bsPopover(
id = "thisworks",
title = "More information",
content = paste0(
"Any HTML can be here ",
a("ShinyBS", href = "https://ebailey78.github.io/shinyBS/index.html", target="_blank")
),
placement = "right",
trigger = "hover",
options = list(container = "body")
)
),
server = function(input, output) {
}
)

Cannot get the faded floating ui dialog box; does not show in Shiny

I am trying to fix my width on my R Shiny map. Also, I am not succeeding in making the panel faded. The width and faded panel I want to replicate is here at this link:
https://shiny.rstudio.com/gallery/superzip-example.html
I am using their style css file, this link: https://github.com/rstudio/shiny-examples/blob/master/063-superzip-example/styles.css
I have written my code:
library(shiny)
library(tidyverse)
library(leaflet.extras)
library(leaflet)
library(RColorBrewer)
library(scales)
library(lattice)
library(dplyr)
fake_data <- read.csv("https://raw.githubusercontent.com/gabrielburcea/stackoverflow_fake_data/master/gather_divided.csv")
# Define UI for application that draws a histogram
ui <- fluidPage(
navbarPage("Covid-19 Symptom Tracker", id = "nav",
tabPanel("Interactive map",
div(class = "outer",
tags$head(
tags$link(rel = "stylesheet", type = "text/css", href = "style.css")
),
leafletOutput("map", width = "100%", height = "96vh"), #height = "99vh"
#Floating panel
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
draggable = TRUE, top = 60, left = "auto", right = 20, bottom = "auto",
width = 330, height = "auto",
h4("SARS-Covid-19 symptoms"),
selectInput("symptom", "Select symptom", c("Chills",
"Cough", "Diarrhoea",
"Fatigue",
"Headache",
"Loss of smell and taste",
"Muscle ache",
"Nasal congestion",
"Nausea and vomiting",
"Shortness of breath",
"Sore throat",
"Sputum",
"Temperature")
),
tags$div(id="cite",
'Data provided by Your.md'
)
)))
)
)
server <- function(input, output) {
filtered_data <- reactive({
fake_data %>%
dplyr::filter(Symptom %in% input$symptom)
})
output$map <- renderLeaflet({
leaflet() %>%
addTiles(urlTemplate = "//{s}.tiles.mapbox.com/v3/jcheng.map-5ebohr46/{z}/{x}/{y}.png",
attribution = 'Maps by Mapbox') %>%
addMarkers(data = filtered_data(), clusterOptions = markerClusterOptions())
})
}
# Run the application
shinyApp(ui = ui, server = server)
And the css style I am using (just the same as theirs) is here:
https://github.com/gabrielburcea/stackoverflow_fake_data/blob/master/style.css
The panel I have is this which is obviously different than the one in the link I provided:
I get the following output:
when I run your code. I like the floating dialog box which fades. There is some white space along the title, and some more when I zoom out completely. It looks fine to me. Also, I saved the CSS file via Notepad. I don't think that should make any difference if you saved it via RStudio.

R Shiny - Right-aligning action button in collapsible menuItem causing ghosting effect?

I have a shinydashboard with three collapsible menu items in the sidebar menu. The first menu item contains an action button that I am trying to right-align. When the menu item is expanded, the button is visible but overflows onto the label of the second menu item:
What's causing this effect and how can I go about fixing it?
Here is the code to reproduce the app:
library("shiny")
library("shinydashboard")
header = dashboardHeader()
sidebar = dashboardSidebar(
sidebarMenu(
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
tags$div(class = "pull-right",
actionButton("clickme", label = "Click me", style = "primary")
)
),
menuItem("Item 2"),
menuItem("Item 3")
)
)
body = dashboardBody()
ui = dashboardPage(header, sidebar, body)
server = function(input,output,session){}
shinyApp(ui, server)
Replacing class = "pull-right" with style = "float:right;" has the same effect.
Adding this style:
.skin-blue .sidebar-menu>li>.treeview-menu {
overflow: auto;
}
seems to get rid of the ghosting problem but adds a scroll to the overflow portion of the selectInput dropdown, which I don't want:
To align the action button to the right we can do CSS similar to here
sidebar = dashboardSidebar(
sidebarMenu(
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
actionButton("clickme", label = "Click me", style = "primary"),
tags$style(type='text/css', "button#clickme {margin-left: 60%;}")),
menuItem("Item 2"),
menuItem("Item 3")
)
)
Alternatively
menuItem("Item 1", tabName = "item1",
selectInput("letters", "Letters:", choices = LETTERS),
div(style="display:inline-block;margin-left: 52%;padding-bottom: 10px;",
actionButton("clickme", label = "Click me", style = "primary"))

shiny R app menuitem inside conditional panel deformed

I have this shiny app with 4 menuItem. One is named "Login" and tabA, tabB, and tabC are under a conditionalPanel and only appear when a login is successfully done.
Can someone give a hint on why the UI has changed? Because all 4 tabs should look exactly as the first one.
ui.R code:
menuItem('Login', tabName = 'Login', icon = icon('fa fa-address-book')),
conditionalPanel(" 'TRUE' === 'TRUE' ",
menuItem("tabA", tabName = "tabA", icon = icon("fa fa-book")),
menuItem("tabB", tabName = "tabB", icon = icon("fa fa-line-chart")),
menuItem("tabC", icon = icon("fa fa-database")))
Thank you in advance
One option should be to wrap with sidebarMenu
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(
title = "Shiny"
),
dashboardSidebar(
sidebarMenu(id="menu",
menuItem('Login', tabName = 'Login', icon = icon('user-o')),
conditionalPanel(" 'TRUE' === 'TRUE' ",
sidebarMenu(menuItem("tabA", tabName = "tabA", icon = icon("quora")),
menuItem("tabB", tabName = "tabB", icon = icon("superpowers")),
menuItem("tabC", tabName = "tabC", icon = icon("podcast"))))
)
),
dashboardBody(
tabItems(
tabItem("Login",h1("login")),
tabItem("tabA",h1("a")),
tabItem("tabB",h1("b")),
tabItem("tabC", h1("c"))
)
)
)
server <- function(input, output) {
observe(print(input$menu))
}
shinyApp(ui,server)
giving output