A more complex value box for displaying multiple related metrics in finance

finance_vbox(
  toplot = c(1, 2, 19, 20, 90, 100, 50, 200),
  label = "label",
  textid = "textOutput_here",
  col = "rgba(0,0,0,0.6)"
)

Arguments

toplot: A numeric vector for the sparklines
label: A character vector for length one for the box name
textid: A character vector for the currency value.
col: A character of length one that takes names, rgb or rgba character vectors of the box background

Value

A tagList of the div tree to be rendered to the shiny ui

Examples

finance_vbox(label = 'Important metric',textid = '$463')
#> <div style="padding:20px;&#10;            border-style :solid;&#10;            border-color:transparent;&#10;            border-radius:25px;&#10;            margin: 0px;&#10;            width:200px;&#10;            color:black;&#10;            line-height:8px;&#10;                  font-weight: 200;&#10;                  font-size:13px;&#10;                  transform: scale(1, 1.1);&#10;                  text-align:middle;&#10;                  font-family:helvetica;&#10;                  background-color:rgba(0,0,0,0.6);">
#>   <h6 style="padding:0px,;margin:0px;color:white;">Important metric</h6>
#>   <div style="display:inline-block;vertical-align:top;">
#>     <h4 style="display:inline-block;vertical-align:bottom;color:white;float:middle;">
#>       <i class="fa fa-arrow-up" role="presentation" aria-label="arrow-up icon" style="font-size:20px;padding:0px;display:inline-block;vertical-align:bottom;color:lightgreen;"></i>
#>       $463
#>     </h4>
#>   </div>
#>   <br/>
#>   <br/>
#>   <span class="badge badge-success" style="color:white;font-weight:bold;padding:5px;">199</span>
#>   <span class="badge badge-success" style="color:white;font-weight:bold;padding:5px;margin:5px;">19900 %</span>
#>   <div class="flexfill-container flexfill-container-row" style="display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:10px;"></div>
#>   <span id="htmlwidget-a7172f592471ffc8ab8c" class="sparklines html-widget"></span>
#>   <script type="application/json" data-for="htmlwidget-a7172f592471ffc8ab8c">{"x":{"values":[1,2,19,20,90,100,50,200],"config":{"type":"line","width":"100%","height":20,"fillColor":"white","spotColor":"white","lineColor":"white","lineWidth":4,"minSpotColor":"#f3172d","maxSpotColor":"#76ff03","spotRadius":"3"},"height":20,"width":"100%"},"evals":[],"jsHooks":[]}</script>
#> </div>