don't require .value-box class for value boxes

NAMESPACE

@@ -7,10 +7,8 @@ export(gaugeSectors)
 export(renderGauge)
 export(renderValueBox)
 export(valueBox)
+export(valueBoxOutput)
+import(htmltools)
 import(rmarkdown)
-importFrom(htmltools,attachDependencies)
-importFrom(htmltools,htmlDependency)
-importFrom(htmltools,tags)
 importFrom(jsonlite,toJSON)
-importFrom(shiny,renderUI)
 importFrom(tools,file_path_sans_ext)

R/package.R

@@ -1,7 +1,6 @@
 
 #' @import rmarkdown
+#' @import htmltools
 #' @importFrom jsonlite toJSON
-#' @importFrom htmltools htmlDependency tags attachDependencies
 #' @importFrom tools file_path_sans_ext
-#' @importFrom shiny renderUI
 NULL

R/valuebox.R

@@ -9,10 +9,6 @@
 #' @param color Background color for the box. This can be one of the built-in
 #'   background colors ("primary", "info", "success", "warning", "danger") or
 #'   any valid CSS color value.
-#' @param expr An expression that generates a value box
-#' @param env The environment in which to evaluate \code{expr}.
-#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
-#'   is useful if you want to save an expression in a variable.
 #'
 #' @export
 valueBox <- function(value, caption = NULL, icon = NULL, color = NULL) {
@@ -46,10 +42,36 @@ valueBox <- function(value, caption = NULL, icon = NULL, color = NULL) {
   valueOutput
 }
 
-#' @rdname valueBox
+
+#' Shiny bindings for valueBox
+#'
+#' Output and render functions for using valueBox within Shiny
+#' applications and interactive Rmd documents.
+#'
+#' @param outputId output variable to read from
+#' @param width,height Must be a valid CSS unit (like \code{'100\%'},
+#'   \code{'400px'}, \code{'auto'}) or a number, which will be coerced to a
+#'   string and have \code{'px'} appended.
+#' @param expr An expression that generates a gauge
+#' @param env The environment in which to evaluate \code{expr}.
+#' @param quoted Is \code{expr} a quoted expression (with \code{quote()})? This
+#'   is useful if you want to save an expression in a variable.
+#'
+#' @name valueBox-shiny
+#'
+#' @export
+valueBoxOutput <- function(outputId, width = '100%', height = '160px') {
+  shiny::uiOutput(outputId, class = 'shiny-html-output shiny-valuebox-output',
+                  width = width, height = height)
+}
+
+
+#' @rdname valueBox-shiny
 #' @export
 renderValueBox <- function(expr, env = parent.frame(), quoted = FALSE) {
   if (!quoted) { expr <- substitute(expr) } # force quoted
-  renderUI(expr, env, quoted = TRUE)
+  renderFunc <- shiny::renderUI(expr, env, quoted = TRUE)
+  attr(renderFunc, "outputFunc") <- valueBoxOutput
+  renderFunc
 }
 

inst/rmarkdown/templates/flex_dashboard/resources/flexdashboard.js

@@ -9,7 +9,7 @@ var FlexDashboard = (function () {
 
     // default options
     _options = $.extend(_options, {
-      theme: "bootstrap",
+      theme: "cosmo",
       fillPage: false,
       orientation: 'columns',
       defaultFigWidth: 576,
@@ -1300,7 +1300,7 @@ window.FlexDashboardComponents.push({
   type: "custom",
 
   find: function(container) {
-    if (container.hasClass('value-box'))
+    if (container.find('span.value-output, .shiny-valuebox-output').length)
       return container;
     else
       return $();
@@ -1316,12 +1316,15 @@ window.FlexDashboardComponents.push({
     var chartTitle = title;
     var valueBox = element;
 
+    // add value-box class to container
+    container.addClass('value-box');
+
     // value paragraph
     var value = $('<p class="value"></p>');
 
     // if we have shiny-text-output then just move it in
     var valueOutputSpan = [];
-    var shinyOutput = valueBox.find('.shiny-text-output, .shiny-html-output').detach();
+    var shinyOutput = valueBox.find('.shiny-valuebox-output').detach();
     if (shinyOutput.length) {
       valueBox.children().remove();
       shinyOutput.html("&mdash;");