es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede agregar cuadros de texto encima de valueBox() en r flexdashboard.

16 Jun, 2023 Programación

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).

View post on imgur.com

¿Cómo se puede hacer esto?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar cuadros de texto encima de los cuadros de valor en flexdashboard, puedes modificar el argumento caption en la función valueBox() para incluir un elemento div() con el texto deseado.

    Por ejemplo, para agregar un cuadro de texto encima de vb1, puedes modificar el argumento caption de la siguiente manera:

    vb1 <- valueBox(value = tags$p(paste(100, "%"), style = "font-size: 140%;"),
             caption = div(style = "position: absolute; top: 18px; left: 6%;",
                           "Mi Cuadro de Valor 1", 
                           div(style = "font-size: 12px; margin-top: 10px;",
                               "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero."),
                           ),
             icon = "fa-thumbs-up",
             color = "success" )

    Aquí, el argumento caption incluye un elemento div() con un argumento style para colocarlo encima del cuadro de valor. Dentro de este div(), hay otro elemento div() que incluye el texto deseado. El argumento style en este segundo div() 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.

Comments are closed.