No se puede agregar cuadros de texto encima de valueBox() en r flexdashboard.
A veces es difícil entender cómo se puede utilizar flexdashboard para sacarle el máximo provecho. Dado que no hay muchos documentos disponibles, a veces busco ayuda de otros.
Tengo un diseño de flexdashboard como se muestra en el código a continuación:
title: “Mi Diseño”
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
runtime: shiny
“`{css}
.value-box {
height: 110px;
}
<pre><code><br />“`{r global, echo=FALSE}
library(shiny)
library(flexdashboard)
vb1 <- valueBox(
value = tags$p(paste(100, “%”), style=”font-size: 140%;”),
caption = tags$div(
tags$p(“My Value Box 1″,
style=”background-color:rgba(39, 128, 227, 0.0);
border-color:rgba(39, 128, 227, 0.0);
position: absolute;
overflow: hidden;
left: 5%; top: 1px;
right: 0px;
bottom: 0px; width:100%”),
tags$textarea(“”, placeholder=”Escribe aquí…”, style=”border: none; background-color: #121212; color:white; width:100%; height: 35px; text-align:center;”),
style=”position:relative;”),
icon = “fa-thumbs-up”,
color = “success”
)
vb2 <- valueBox(
value = tags$p(paste(50, “%”), style=”font-size: 140%;”),
caption = tags$div(
tags$p(“My Value Box 2″,
style=”background-color:rgba(39, 128, 227, 0.0);
border-color:rgba(39, 128, 227, 0.0);
position: absolute;
overflow: hidden;
left: 5%; top: 1px;
right: 0px;
bottom: 0px; width:100%”),
tags$textarea(“”, placeholder=”Escribe aquí…”, style=”border: none; background-color: #121212; color:white; width:100%; height: 35px; text-align:center;”),
style=”position:relative;”),
icon = “fa-hourglass-end”,
color = “danger”
)
vb3 <- valueBox(
value = tags$p(paste(80, “%”), style=”font-size: 140%;”),
caption = tags$div(
tags$p(“My Value Box 3″,
style=”background-color:rgba(39, 128, 227, 0.0);
border-color:rgba(39, 128, 227, 0.0);
position: absolute;
overflow: hidden;
left: 5%; top: 1px;
right: 0px;
bottom: 0px; width:100%”),
tags$textarea(“”, placeholder=”Escribe aquí…”, style=”border: none; background-color: #121212; color:white; width:100%; height: 35px; text-align:center;”),
style=”position:relative;”),
icon = “fa-eur”,
color = “warning”
)
vb4 <- valueBox(
value = tags$p(paste(100, “%”), style=”font-size: 140%;”),
caption = tags$div(
tags$p(“My Value Box 4″,
style=”background-color:rgba(39, 128, 227, 0.0);
border-color:rgba(39, 128, 227, 0.0);
position: absolute;
overflow: hidden;
left: 5%; top: 1px;
right: 0px;
bottom: 0px; width:100%”),
tags$textarea(“”, placeholder=”Escribe aquí…”, style=”border: none; background-color: #121212; color:white; width:100%; height: 35px; text-align:center;”),
style=”position:relative;”),
icon = “fa-clock”,
color = “success”
)
Mi Panel Principal {data-icon=”fa-search”}
Fila {.sidebar data-width=280 data-padding=10}
“`{r}
tags$h4('Mi Barra Lateral')
tags$hr()
<pre><code><br />Fila
———————————————————————–
### {.value-box}
“`{r}
renderValueBox(vb1)
{.value-box}
“`{r}
renderValueBox(vb2)
<pre><code><br />### {.value-box}
“`{r}
renderValueBox(vb3)
{.value-box}
{r}
renderValueBox(vb4)
Quiero agregar cuadros de texto en las cajas de valores (como se muestra en negro en la imagen a continuación).
¿Cómo se puede hacer esto?
davy.ai
Para agregar cuadros de texto encima de los cuadros de valor en flexdashboard, puedes modificar el argumento
caption
en la funciónvalueBox()
para incluir un elementodiv()
con el texto deseado.Por ejemplo, para agregar un cuadro de texto encima de
vb1
, puedes modificar el argumentocaption
de la siguiente manera:Aquí, el argumento
caption
incluye un elementodiv()
con un argumentostyle
para colocarlo encima del cuadro de valor. Dentro de estediv()
, hay otro elementodiv()
que incluye el texto deseado. El argumentostyle
en este segundodiv()
controla el tamaño de fuente y el margen.Puedes repetir este proceso para los demás cuadros de valor para agregar cuadros de texto encima de ellos también.