Search code examples
rdataframereactable

How to introduce non-numeric arguments in the same vector with numeric arguments for a reactable?


and thanks for reading me again

I am working with a table in which in the "Valor" column I have a vector with numbers from 0 to 1 for bars with percentages as seen in the following image:

Table image

But I would like that in the fields where there is a value of "0%" instead of having the progress bar it would simply have the text "nd". Is there a way to do that? The code used is the following:

library(dplyr)
library(reactable)
library(htmltools)
# df for the table
Objetivo_1 <- data.frame(
  Estrategia = c("1.1", "1.2", "1.3", "1.4", "1.5", "1.6"),
  `Nombre del indicador` = c("Porcentaje de indicadores de la estrategia 1.1 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior",
                             "Porcentaje de indicadores de la estrategia 1.2 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior",
                             "Porcentaje de indicadores de la estrategia 1.3 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior",
                             "Porcentaje de indicadores de la estrategia 1.4 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior",
                             "Porcentaje de indicadores de la estrategia 1.5 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior",
                             "Porcentaje de indicadores de la estrategia 1.6 
                             que cumplen con la tendencia esperada entre el periodo 
                             actual y el periodo inmediato anterior"
                             ),
  Valor = round(c(0.111,0.4111,0.25,0,0.2,432), digits = 2),
  `Método de cálculo` = c("Número de indicadores que cumplen/Total de indicadores de la estrategia 1.1",
                          "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.2",
                          "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.3",
                          "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.4",
                          "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.5",
                          "Número de indicadores que cumplen/Total de indicadores de la estrategia 1.6"))


# Function for barchart

bar_chart <- function(label, width = "100%", height = "14px", fill = "#00bfc4", background = NULL) {
  bar <- div(style = list(background = fill, width = width, height = height))
  chart <- div(style = list(flexGrow = 1, marginLeft = "6px", background = background), bar)
  div(style = list(display = "flex", alignItems = "center"), label, chart)
}

###table

reactable(
  Objetivo_1,
  bordered = TRUE,
  searchable = TRUE,
  language = reactableLang(
    searchPlaceholder = "Busqueda",
    noData = "Sin coincidencias",
    pageInfo = "{rowStart} a {rowEnd} de {rows} entries",
    pagePrevious = "\u276e",
    pageNext = "\u276f",
    
    # Accessible labels for assistive technologies such as screen readers.
    # These are already set by default, but don't forget to update them when
    # changing visible text.
    pagePreviousLabel = "Página anterior",
    pageNextLabel = "Siguiente página"
  ),
  defaultSorted = "Valor",
  columns = list(
    Nombre.del.indicador = colDef(
      name = "Nombre del indicador"
    ),
    Método.de.cálculo = colDef(
      name = "Método de cálculo"
    ),
    
    Valor = colDef(
      name = " Valor",
      defaultSortOrder = "desc",
      # Render the bar charts using a custom cell render function
      cell = function(value) {
        # Format as percentages with 1 decimal place
        value <- paste0(format(value * 100, nsmall = 1), "%")
        bar_chart(value, width = value, fill = "#822b2b", background = "#e1e1e1")
      },
      # And left-align the columns
      align = "left"
    )
  )
)

Solution

  • By changing bar_chart slightly,

    bar_chart <- function(label, width = "100%", height = "14px", fill = "#00bfc4", background = NULL) {
      if (label == "0.0%"){
        div('nd')
      } else{
        bar <- div(style = list(background = fill, width = width, height = height))
        chart <- div(style = list(flexGrow = 1, marginLeft = "6px", background = background), bar)
        div(style = list(display = "flex", alignItems = "center"), label, chart)
      }
      
    }
    

    You may get nd instead of bar