This article describes how to format an R calculation, including the coloring, placement of text, and the icon using code. You will need to learn some HTML if you want to format objects like this beyond the example provided below.
Requirements
A Displayr document.
Method
- From the toolbar, go to Calculation
> Custom Code.
- Click onto the page to place the custom calculation.
- In the R Code editor, paste the following code and click Calculate in the Object Inspector:
library(rhtmlMetro)
number <- 45
icon <- '
<div style="flex: 1 1 30%; display: flex; align-items: center;"><font color="red" style="font-size: 48pt"><i class="fas fa-ambulance"></i></font></div>
'
description <- 'Injuries per day'
text_wrapper <- paste('
<div style="flex: 1 1 50%; color: white; display: flex; flex-direction: column; padding: 12pt">
<div style="font-size: 32pt; font-weight: bold">', toString(number), '</div>
<div>', description, '</div>
</div>
')
box_color <- '#61A1E9'
box_html <- paste('
<div style="height:100%;', 'background:', box_color, ';display:flex">', text_wrapper, icon, '</div>
')
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
html <- paste(fontawesome_css, box_html)
Box(text = html, text.as.html = TRUE)
You are able to change the color, shape format, and icon by modifying the code above using HTML.
You can read more about adding icons to dashboards here: Adding Icons to Dashboards Using Font Awesome