Description Usage Arguments Details Value Examples
This function crafts a solo_box tile displaying a red orange green color. The color is defined by the value of the target compared to the thresholds.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
value |
The numeric value you want to highlight (the main enchilada) |
txt |
Optional subtext that should appear under the value |
former |
The last value that should be used as information in the chevron, or for relative mode |
size |
Optional size specified in the bootstrap css classes: "xs","sm","md","lg") |
icon |
Optional glyphicon that should be displayed from https://getbootstrap.com/docs/3.3/components/ you need only supply the name of thing you want, like "check"... not the full "gyphicon-check" |
target |
Optional target that the value should be compared against. Use with thresholdHigh and thresholdLow. Note, 'target' is ignored in relative mode, and you might want to change the thresholdHigh to 105 and threholdLow to 95 (to trigger red/green if +/- 5% outside the margins) |
thresholdHigh |
Optional edge between "green" and "orange" from 0-100 as a percent of target. IE, this value represents the RATIO of the VALUE to the target that, if above or equal to the thresholdHigh will show as green, and if not, as orange. Use w/ target and thresholdLow. |
thresholdLow |
Optional border between "orange" and "red" from 0-100 as a percent of target. IE, this value represents the RATIO of the VALUE to the target that, if above or equal to the thresholdLow will show as orange, and if not, as red. Use w/ target and thresholdHigh. |
relative |
Alternate mode where the 'value' is compared against 'former' rather than 'target'. This mode is suitable to change the color of the button based on previous values rather than comparison to a standard. |
link |
Optional hyperlink that should be followed on click |
units |
Optional units that should be displayed after Value |
hover |
Optional tooltip, or text that will show up when a user rests their mouse over the tile. |
hide_value |
Optionally and paradoxically hide value. Normally FALSE, change this value to TRUE in order to suppress the large number, but still take advantage of the conditional formatting. |
textModifier |
Optional css category of "large" text. In this case, the icon, value and unit. Default=h1 |
revert |
Invert colorbox. Green become red and red become green. |
pretty |
Optionally allow numbers to become embellished. Accepted values are NULL (default), or the desired divider (",", ".", " "). If this option is not left as FALSE, rounding is automatically implemented. |
... |
Optional additional html elements. For example, if you would like two buttons to fit into a section in a flexdashboard, you could specify "style = 'width:100%;height:50%'" |
DETAILS
HTML code for a button with desired properties
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | g1 <- solo_gradient_box(value = 40)
g2 <- solo_gradient_box(
value = 40, target = 50,
thresholdHigh = 80, thresholdLow = 60
)
g3 <- solo_gradient_box(
value = 20, txt = "Test1", target = 50,
thresholdHigh = 80, thresholdLow = 60, hide_value = TRUE
)
g4 <- solo_gradient_box(
value = 35, txt = "Test2", target = 50,
thresholdHigh = 80, thresholdLow = 60, hide_value = TRUE
)
## This one shows relative and revert options. Since 29160
## is about 6\% higher than 27420, it is triggered by the "high"
## level, but since revert is TRUE, insteaad of showing as
## green, it's showing as red.
g5 <- solo_gradient_box(
value = 29160, former = 27420,
relative = TRUE, revert = TRUE,
thresholdHigh = 105, thresholdLow = 95
)
finisher(title = "Item", divs = div_maker(
subtitle = "subitems",
textModifier = "h1", g1, g2, g3, g4, g5
))
|
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.