I want put multiple line breaks in my shiny app.
Instead of
br(),
br(),
br(),
...
is there any more convenient way of doing it?Thanks.
I have no idea if that's convenient for you, but it saves you some typing.
linebreaks(n) repeats <br/> n times and parses it as HTML.
library(shiny)
linebreaks <- function(n){HTML(strrep(br(), n))}
ui <- fluidPage(
titlePanel(
p(
h1("first sentence", align = "center"),
linebreaks(10),
h3("second sentence", align = "center")
)
)
)
Related
I'm building out a datatable in R Shiny and part of it will include tooltips unique to each cell. I've accomplished that, however, I seem to be unable to insert HTML content into the tooltip itself. In the example below, I'm inserting HTML content into a cell in the datatable, and then aim to insert that same content into a tooltip, but the HTML only renders in the datatable, and not in the tooltip.
I've played around with a few ideas but can't find any that work. I can get the HTML to appear (as text) in the tooltip by removing the HTML function, but then, obviously, it's escaped and is just text. I am able to bold text within the tooltip using tags$b(), however, I am hoping for a solution more similar to my example below as I have more complex HTML content I would like add to the tooltip beyond just text.
Any ideas? Thanks very much!
library(shiny)
library(shinyBS)
library(DT)
ui <- fluidPage(
bsTooltip('tbutton',''),
mainPanel(dataTableOutput('df'))
)
server <- function(input, output) {
df <- data.frame(A = c(1:5), B = c(LETTERS[1:5]))
output$df <- renderDataTable({
cell <- paste0('<svg width="30" height="30">',
'<text x="1%" y="75%" font-weight="bold" font-size="16" >B</text>',
'</svg>')
df[2,2] <- as.character(popify(tags$div(HTML(cell)),
title = 'Tooltip:',
placement = 'left',
content = paste0(tags$div(HTML(cell))),
trigger = c('hover', 'click')))
datatable(df, escape=FALSE)
})
}
shinyApp(ui = ui, server = server)
To attach a popover to a cell, you can use bsPopover if this cell has an id. To set an id to the cells, you can use the datatables option createdCell.
Then the HTML code works in the popover content, but not the SVG (or at least I didn't manage to make it work).
library(shiny)
library(shinyBS)
library(DT)
df <- data.frame(A = 1:5, B = LETTERS[1:5])
css <- "
.red {color: red;}
"
ui <- fluidPage(
tags$head(tags$style(HTML(css))),
mainPanel(
DTOutput('df'),
bsPopover(
id = "id2",
title = "test",
content = '<p class="red">TEST</p>'
)
)
)
server <- function(input, output) {
output$df <- renderDT({
datatable(
df,
options = list(
columnDefs = list(
list(
targets = 2,
createdCell = JS(
"function (td, cellData, rowData, row, col) {",
" $(td).attr('id', 'id' + (row+1));",
"}"
)
)
)
)
)
})
}
shinyApp(ui = ui, server = server)
So I have a simple shiny app that takes text as an input and outputs it.
But my goal is to make it easier for my users to be able to customize the font and formatting of this text in an easy to use way.
Here is a screenshot of the app (below). I can enter HTML code to change the formatting but my users do not know HTML or CSS.
Is there an easy way for my users to be able to have a little UI with basic formatting that can be passed through the input? Kind of like this?
Here is my app code:
library(shiny)
ui <- fluidPage(
sidebarLayout(
textAreaInput("text", label = HTML(paste0("Enter Text Here")), value = HTML(paste0("HTML ELEMENTS CAN BE USED"))),
mainPanel(
uiOutput("value"))
)
)
server <- function(input, output) {
output$value <- reactive({
shiny::HTML(paste0(input$text))
})
}
shinyApp(ui, server)
You can use the JavaScript library SunEditor
library(shiny)
js <- '
$(document).ready(function(){
const editor = SUNEDITOR.create(document.getElementById("editor"), {});
});
'
ui <- fluidPage(
tags$head(
tags$link(rel="stylesheet", href = "https://cdn.jsdelivr.net/npm/suneditor#latest/dist/css/suneditor.min.css"),
tags$script(src = "https://cdn.jsdelivr.net/npm/suneditor#latest/dist/suneditor.min.js"),
tags$script(HTML(js))
),
br(),
tags$textarea(id = "editor", class = "sun-editor-editable", cols = 80)
)
server <- function(input, output, session){
}
shinyApp(ui, server)
I have a shiny app, and I want to add a small line break in between 2 objects--is it possible to specify that you want br() to be half it's regular size? I know if I wanted it to be double the size, I'd do br(), br(), but I don't know how to make it smaller.
Instead of br() you can add a margin to the bottom of the element of any size.
library(shiny)
ui <- fluidPage(
p("Line 1"),
br(),
p("Line 2", style = "margin-bottom: 0px;"),
p("Line 3", style = "margin-bottom: -10px;"),
p("Line 4")
)
server <- function(input, output) {
}
shinyApp(ui = ui, server = server)
uiOutput('myTable') followed by p("Here is some text....") puts the text next to uioutput display, but I like to print the text in a new line starting from left side of the page. Adding br() is simply adding empty space equivalent to screen width, therefore, text starts from a new line but not from from the left side of the page. Interestingly, adding any control widget, e.g., dateInput displays the widget in a new line. In my case, uioutput input comes from map [ package purrr]. I combined map output and HTML("<br>") via list, but no solution. Here is reproducible code:
library(shiny)
ui <- fluidPage(
tabPanel("Test",
numericInput("samsize","specify sample size",4,1,52),
uiOutput('myTable'),
#dateInput("date", label = "Today's Date")
#br(""),
p("Here is some text...")
))
server <- function(input, output) {
data <- reactive({
alphabets <- c(letters,LETTERS)
Index <- seq(1,length(alphabets),1)
names(Index) <- alphabets
# Notice I don't put the vector in a one row matrix as in you example
sample(Index,input$samsize)
})
library(purrr) # map is a nice alternative to lapply
output$myTable <- renderUI(map(names(data()),~div(strong(.),
div(data()[.]),
style="float:left;padding:10px 20px;")))
}
shinyApp(ui, server)
Here is screen shot. As it is seen, Here is some text is next to uioutput display, which I want to be in a new line below the display
After using div with style float:left, you need to clear the floating, for example with clear:left:
ui <- fluidPage(
tabPanel("Test",
numericInput("samsize","specify sample size",4,1,52),
uiOutput('myTable'),
div("Here is some text...", style="clear:left;"),
dateInput("date", label = "Today's Date")
))
You will find more info about floating div here
Strangely enough I am getting a scrollbar on the right side of the page when I run the below shiny app:
shinyUI(
fluidPage(
tabsetPanel(
tabPanel("Plot", htmlOutput("test")),
tabPanel("Summary"),
tabPanel("Table")
)
)
)
library(googleVis)
library(shiny)
shinyServer(function(input, output, session) {
output$test <- renderGvis({
gvisBubbleChart(Fruits, idvar="Fruit",
xvar="Sales", yvar="Expenses",
colorvar="Year", sizevar="Profit",
options=list(
hAxis='{minValue:75, maxValue:125}',
vAxis='{minValue:0, maxValue:250}'
,height=600,width=600)
)
})
})
If I change from tabsetPanel layout to a pageWithSidebar layout the plot appears normally without the scrollbars.
On a seperate note, if I do not specify the width and height in the options list I am getting two scrollbars, one vertical and one horizontal.
Is it possible to use googleVis charts within tabsetPanels without the scrollbars?
You can set the overflow to hidden by adding a style argument to the tabPanel call:
library(googleVis)
library(shiny)
runApp(
list(ui = fluidPage(
tabsetPanel(
tabPanel("Plot", htmlOutput("test"), style = "overflow:hidden;"),
tabPanel("Summary"),
tabPanel("Table")
)
)
, server = function(input, output, session) {
output$test <- renderGvis({
gvisBubbleChart(Fruits, idvar="Fruit",
xvar="Sales", yvar="Expenses",
colorvar="Year", sizevar="Profit",
options=list(
hAxis='{minValue:75, maxValue:125}',
vAxis='{minValue:0, maxValue:250}'
,height=600,width=600)
)
})
})
)