Shiny R scale down plotOutput - html

I'm trying to scale down a plotOutput with Shiny R.
I have this plot:
from this code:
#In ui:
fluidRow(
column(width = 12,
h4("Diagrama Persistencia"),
plotOutput("Diagrama")
)
)
#In server
output$Diagrama <- renderPlot({
F_PlotDiag(Diag = isolate(values$data), tipoPlot = input$radioPlot, tamEjeNom = input$sliderTamEjeNom)
}, height = input$sliderHeight, width = input$sliderWidth)
Notice the height and width params. This works because all is in an observeEvent context.
As you can see, the hole plot won't fit in the screen. The problem with reducing height and width is that it looks like this:
But actually, if I right click and save the FIRST image, it looks fine unlike the second image:
Is there a way to show the whole plot in the browser by scaling it down? So that I can see it as if I downloaded the image.
I really don't know much about CSS so I can't really provide any logical attempts, but this is what I've tried for my HTML:
tags$style(type="text/css", ".shiny-bound-output { transform: 'scale(.5)' }")
tags$style(type="text/css", ".shiny-plot-output { transform: 'scale(.5)' }")
tags$style(type="text/css", "#Diagrama { height: 20px }")
With no success.

Since you didn't provide a reproducible example, see if this example helps you. Based on https://stackoverflow.com/a/8839678/4190526
The key is the following line, which finds the image under the div with the id distPlot (i.e. the plot name in ui.R), and define the CSS with a max-height but otherwise auto.
tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),
Full code
library(shiny)
ui <- shinyUI(fluidPage(
tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),
titlePanel("Old Faithful Geyser Data"),
sidebarLayout(
sidebarPanel(
sliderInput("bins",
"Number of bins:",
min = 1,
max = 50,
value = 30)
),
mainPanel(
plotOutput("distPlot")
)
)
))
server <- shinyServer(function(input, output) {
output$distPlot <- renderPlot({
x <- faithful[, 2]
bins <- seq(min(x), max(x), length.out = input$bins + 1)
hist(x, breaks = bins, col = 'darkgray', border = 'white')
}, width=600, height=1200)
})
shinyApp(ui = ui, server = server)

Related

Centering Rmarkdown knitrbootstrap Report

Found this package called knitrBootstrap Which is to allow for Bootstrap style web pages when reporting in Rmarkdown.
Note: I am using the klippy, kableExtra, and knitrBootstrap
My issue is that when rendered is does not center the whole report, it is stuck to one side. And also the Title of the Document doesn't get displayed? Any suggestions to give this HTML page a more "fuller" feel? Because I can insert straight HTML code in Rmarkdown I added the HTML tag
---
output:
knitrBootstrap::bootstrap_document:
title: "Test file"
theme: united
highlight: sunburst
---
```{r}
library(kableExtra)
library(klippy)
library(knitrBootstrap)
```
```{r echo=FALSE, include=TRUE, out.width="100%"}
mpg_list <- split(mtcars$mpg, mtcars$cyl)
disp_list <- split(mtcars$disp, mtcars$cyl)
inline_plot <- data.frame(cyl = c(4, 6, 8), mpg_box = "", mpg_hist = "",
mpg_line1 = "", mpg_line2 = "",
mpg_points1 = "", mpg_points2 = "", mpg_poly = "")
inline_plot %>%
kbl(booktabs = TRUE) %>%
kable_paper(full_width = FALSE) %>%
column_spec(2, image = spec_boxplot(mpg_list)) %>%
column_spec(3, image = spec_hist(mpg_list)) %>%
column_spec(4, image = spec_plot(mpg_list, same_lim = TRUE)) %>%
column_spec(5, image = spec_plot(mpg_list, same_lim = FALSE)) %>%
column_spec(6, image = spec_plot(mpg_list, type = "p")) %>%
column_spec(7, image = spec_plot(mpg_list, disp_list, type = "p")) %>%
column_spec(8, image = spec_plot(mpg_list, polymin = 5))
```
I can't seem to find a ton of literature on the format you're using. However, I did notice that it doesn't change size when the screen size changes. It is all just set to one final size. That being said, the table thinks it is centered. In reality, it is formatted to 'fit' the contents, but the table is set to fill a space so that that outer space is centered in the body, but the table is left-aligned in that available space. On top of all that, the body is set to a max-width of 36em. That's why it looks left-aligned.
Clear as mud, I know. Sigh.
I can help make it better, but a different output format may be a better option. Almost any method I tried to make the table bigger destroyed the plots' SVG (distorted them).
This worked, but I don't know if the juice is worth the squeeze.
Add these styles between chunks and keep your code the same.
<style>
body {
max-width: 100%; // 36 em isn't working for me
}
table{
width: 924px !important;
height: auto;
}
tr {
height: 4em;
width: 924px !important; // 28 + (7*128) (for the 8 columns)
}
td {
vertical-align: middle !important;
padding-bottom: 0px !important;
}
svg {
width: 110%;
height: auto; // keep the aspect ratio
}
thead > tr *:not(:first-child) {
width: 128px; // only set here, if set to all td, it blows the svg
}
</style>
If you have any questions, let me know.
This centers, without centering, by filling the available space.

R: Using browsable() in leaflet resulting in a smaller screen height

I build a leaflet in R like this:
my_leaflet <- my_data %>%
leaflet (options = leafletOptions(
-
) %>^%
addProvidersTiles(
-
)
setView(
-
) %>%
addMarkers (
--
) %>%
addCircleMarkers(
-
) %>%
addLegend( .. )
I get "height: 100%" in this part of the generated html code:
without browseable()
But when i use browsable() :
browsable(
tagList(list(
tags$head(
tags$style(
".leaflet .legend i{
border-radius: 50%;
width:12px;
height: 12px;
margin-top: 4px;
}",
),
my_leaflet
))
))
then i get "height: 400px" inside the generated html code (see the picture below) and the leaflet map only shows the half of my screen.
with browsable()
Is there a way to get the html code to show a full screen height? i am not sure if the "height: 400px" is the cause of this. is there a way to get this height to 100% when using browsable() ?
Try vh unit. In your case modify my_leaflet with leaflet(height = '100vh', ...).

valueBox Shiny Dashboard: custom formatting

I am working on a Shiny dashboard and using valueBoxes to display current KPI's. What I am noticing though, is depending on how long some of the text is, it elongates the box to fit the text which then screws up the look.
How do I make it so the text is always only on it's 1 line (i.e. change the font to be the width of the box) no matter what the screen size is?
Also, if you have any HTML or CSS pointers to make the information in a better layout, let me know.
I have to display:
value
description of what the value represents
estimation of future
value
In my actual dashboard:
I have the box background color changed
rounded out the edges
Have the value font color change based on thresholds
Code:
ui <- dashboardPage(
dashboardHeader(title = "Dynamic boxes"),
dashboardSidebar(),
dashboardBody(
fluidRow(
valueBoxOutput("vbox", width = 2),
valueBoxOutput("vbox2", width = 2),
valueBoxOutput("vbox3", width = 2),
valueBoxOutput("vbox4", width = 2),
valueBoxOutput("vbox5", width = 2),
valueBoxOutput("vbox6", width = 2)
)
)
)
server <- function(input, output) {
output$vbox <- renderValueBox({
valueBox(
"55%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 98%")),
icon = icon("credit-card")
)
})
output$vbox2 <- renderValueBox({
valueBox(
"70%",
HTML(paste("this one is just as long, maybe even longer",br(),"Estimated: 100%")),
icon = icon("credit-card")
)
})
output$vbox3 <- renderValueBox({
valueBox(
"80%",
HTML(paste("this one is short",br(),"Estimated: 50%")),
icon = icon("credit-card")
)
})
output$vbox4 <- renderValueBox({
valueBox(
"100%",
HTML(paste("medium length like here",br(),"Estimated: 95%")),
icon = icon("credit-card")
)
})
output$vbox5 <- renderValueBox({
valueBox(
"90%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 80%")),
icon = icon("credit-card")
)
})
output$vbox6 <- renderValueBox({
valueBox(
"40%",
HTML(paste("test_value that is super long like this",br(),"Estimated: 70%")),
icon = icon("credit-card")
)
})
}
shinyApp(ui, server)
}

Aligning a text with variable length in the middle of dashboard header

I used shiny-dashboard package and the header needs to have a title, a text and a logo.
Title should be on the left side, text should be in the middle/center of the header and logo should be on the right side. Dashboard sidebar has also two filters (select inputs).The text in the middle is showing the user selections and therefore the length of the text is different based on various selections. I don't have a css background and not sure how to position the variable length text at the center of the header. Another problem is that when I minimize my screen, the text and logo stack on top of each other and don't stay in one line as shown below:
To simplify the code, I just used a simple text and I didn't show my server code here but "long text with variable length dependant on user selections" is basically a uiOutput and will be changed based on selections.
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = HTML(paste0("Dashboard example")) , titleWidth = 455,
tags$li(class="dropdown",
tags$table(style="80%;align:center;border-collapse:seperate;border-spacing:20px;",
tags$tr(
tags$td(h3("long text with variable length dependant on user selections")),
tags$td(
a(href='link',
img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg',
title= "image title", height = "50px"),
style = "display:block;position:absolute,width:50px; padding-top:10px; padding-bottom:10px;padding-right:10px;"),
class="dropdown"))))),
dashboardSidebar(),
dashboardBody(tags$head(
tags$style(HTML("
.my_class {
font-weight: bold;
color:white;
}"))
))),
server = function(input, output) { }
)
Minimizing the screen breaks the header as below
Using the code provided below, I get this.
Try something like this:
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(
title = "Dashboard example",
titleWidth = 455,
tags$li(
class = "dropdown",
fluidRow(
column(
width = 4,
offset = 4,
align = "center",
span("long text with variable length dependant on user selections")
),
column(
width = 4,
align = "right",
img(src = 'http://www.clipartbest.com/cliparts/nTX/8nj/nTX8njyEc.jpeg')
)
)
)
),
dashboardSidebar(width = 455),
dashboardBody(
tags$style(
".main-header .navbar-custom-menu {
width: calc(100% - 50px);
}
.main-header .navbar-nav,
.main-header .dropdown {
width: 100%;
}
.main-header img {
height: 50px
}"
)
)
),
server = function(input, output) {}
)

Set distance between widget and its title (text) in shiny

I have a simple shiny app which diplays three colourInput() buttons. I would to reduce the blank space between every button and its title in order to be closer to it.
#ui.r
library(shiny)
library(shinydashboard)
shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"
),
dashboardSidebar(
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left"), value = "#00B2EE")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap"), value = "#7CCD7C")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right"), value = "#FFFACD")),
),
dashboardBody()
))
#server.r
shinyServer(function(input, output) {
})
You have to change the div elements in which the titles are displayed. One way to do this is by adding the style argument to the h5 function. If you reduce the margin to 0 pixels by adding style='margin: 0px' you get the result that you want (you can also use: margin-top, margin-bottom, etc.).
If you want to adapt other Shiny widgets you can always wrap them in a div and adapt them with the style argument (example: div(style='margin: 0px; padding: 15px;', selectInput(...))). Information on other div arguments can be found here.
Your example
library(shiny)
library(shinydashboard)
library(colourpicker)
# Create ui
ui <- shinyUI( dashboardPage(
dashboardHeader(
title="Styling Download Button"),
dashboardSidebar(
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("rightcolor",h5("Left", style='margin: 0px;'), value = "#00B2EE")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("overlapcolor",h5("Overlap", style='margin: 0px;'), value = "#7CCD7C")),
div(style="display: inline-block;vertical-align:top; width: 115px;",colourInput("leftcolor",h5("Right", style='margin: 0px;'), value = "#FFFACD"))),
dashboardBody()
))
# Create Server
server <- shinyServer(function(input, output) {})
# Run app
shinyApp(ui, server)