3

I'm creating a KPIs in Rmd Flexdashboard (not Shiny) and would like to change a color of an icon in Valuebox based on a rule:

  • if value is higher than 0 then green arrow up
  • if value is lower than 0 red arrow down

I've figured out the rule, but I don't know how to change the color (tags$i doesn't work). Any help much appreciated.

valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

enter image description here

awoj
  • 133
  • 1
  • 10
  • The error says :Invalid color: Valid colors are: red, yellow, aqua, blue, light-blue, green, navy, teal, olive, lime, orange, fuchsia, purple, maroon, black. – ViviG Feb 02 '21 at 07:51
  • Box color is fine, although not listed, the white is working. I'm talking about icon color which by default is grey. I'd like to change it to green for value > 0, red for value < 0. – awoj Feb 02 '21 at 07:58

2 Answers2

2

Late answer, in case you haven't figure this out yet:

You can use css to change the color. Create a .css file. You might have to save it on a folder named www in the same directory. More info here: https://shiny.rstudio.com/articles/css.html. I did this on my example. If you right click on the arrow and choose inspect element, you will find the name of the style you are after. There you can test different colors. enter image description here

You can see in the image above that the style you are after is called .value-box .icon i. And on the top right of the image you see the type of icon. Then you add this style with your color of choice to your newly created .css like this:

/*arrow down*/
.value-box .icon i.fa.fa-angle-down{
    
    color: rgb(255, 0, 0); /*red*/
  
}
 
/*arrow up*/    
.value-box .icon i.fa.fa-angle-up{
  
    color: rgb(0, 153, 0); /*green*/
  
}

Add to the header the path to your .css file :

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: www/styles.css 

---

Here is the result:

#arrow down
library(flexdashboard)
rule = -3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

enter image description here

And arrow up:

library(flexdashboard)
rule = 3
valueBox(rule,  
         "Title + subtitle",
         icon = ifelse(rule >= 0, "fa-angle-up", "fa-angle-down"),
         color = "white")

enter image description here

ViviG
  • 1,613
  • 1
  • 9
  • 23
  • Hi, thank you very much. I think this is the best possible solution to obtain it, thanks! – awoj May 16 '21 at 04:12
1

Here's a simple shiny app that show up arrow in green color for positive values and red color with down arrow otherwise.

I get an error with color = "white" so I used color = "black" as color of valueBox.

library(shinydashboard)
library(shiny)

rule <- -100

up <- tags$i(
  class = "fa fa-angle-up", 
  style = "color: green"
)

down <- tags$i(
  class = "fa fa-angle-down", 
  style = "color: red"
)
ui <- dashboardPage(
  dashboardHeader(title = "Value boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      # A static valueBox
      valueBox(rule, 
               "Title + subtitle", 
               icon = if(rule > 0) up else down, 
               color = 'black')
      ),
    )
)

server <- function(input, output) {
}

shinyApp(ui, server)

enter image description here

With positive value :

rule <- 100

enter image description here

Ronak Shah
  • 377,200
  • 20
  • 156
  • 213
  • Hi, thanks, I don't want to change box color but only icon color (box will be always white), picture attached to main thread. – awoj Feb 02 '21 at 08:07
  • 1
    Thanks again but tags don't work in flexdashboard (not shiny), I get an error: object 'tags' not found. That is why I'm struggling to find a solution. – awoj Feb 02 '21 at 08:23