Fix for hidden crosshairs + new option + new feature

DESCRIPTION

@@ -13,6 +13,7 @@ Authors@R: c(
     person("Daniel", "Gromer", role = c("aut", "cph")),
     person("Benoit", "Thieurmel", role = c("aut", "cph")),
     person("Kent", "Laukhuf", role = "ctb"),
+    person("Jonathan", "Shore", role = "ctb"),
     person(family = "jQuery Foundation", role = "cph",
            comment = "jQuery library"),
     person(family = "jQuery contributors", role = c("ctb", "cph"),
@@ -37,4 +38,4 @@ Imports:
 Suggests:
     testthat
 Enhances: rmarkdown (>= 0.3.3), shiny (>= 0.10.2.1)
-RoxygenNote: 6.0.1
+RoxygenNote: 6.1.0

NAMESPACE

@@ -40,6 +40,7 @@ export(dyStackedLineGroup)
 export(dyStackedRibbonGroup)
 export(dyStemSeries)
 export(dyUnzoom)
+export(dyUpdate)
 export(dygraph)
 export(dygraphOutput)
 export(renderDygraph)

R/plugins.R

@@ -29,6 +29,7 @@ dyUnzoom <-function(dygraph) {
 #' @param dygraph Dygraph to add plugin to
 #' @param direction Crosshair direction. Valid options are: "both", "horizontal",
 #' "vertical"
+#' @param color Crosshair color in RGB form ("#ff0088" or rgb(255,0,136)), default black and 0.3 alpha.
 #'
 #' @return Dygraph with Crosshair plugin enabled
 #'
@@ -39,12 +40,12 @@ dyUnzoom <-function(dygraph) {
 #'   dyCrosshair(direction = "vertical")
 #'
 #' @export
-dyCrosshair <- function(dygraph, direction = c("both", "horizontal", "vertical")) {
+dyCrosshair <- function(dygraph, direction = c("both", "horizontal", "vertical"), color=rgb(0,0,0,0.3)) {
   dyPlugin(
     dygraph = dygraph,
     name = "Crosshair",
     path = system.file("plugins/crosshair.js", package = "dygraphs"),
-    options = list(direction = match.arg(direction))
+    options = list(direction = match.arg(direction), color=color)
   )
 }
 

R/update.R

@@ -0,0 +1,63 @@
+#' dyUpdate allows in-situ replacement of the rendered timeseries in dygraph within shiny, rather than
+#' rerendering the widget on each data change.  This can be used for "real-time" update changes in
+#' sampling, etc.
+#'  
+#' @param session shiny session
+#' @param id graph identifier (refers to the dygraph elementId parameter)
+#' @param data the latest data set to be rendered (must have the same number of columns as the original data set)
+#'   
+#' @note
+#' See the \href{https://rstudio.github.io/dygraphs/}{online documentation} for
+#' additional details and examples.
+#' 
+#' @examples 
+#' require(shiny)
+#' require(dygraphs)
+#'
+#' app = function () {
+#'    newdata <- function(n = 1000) {
+#'       vclose <- cumsum(rnorm(n,sd=0.25))
+#'       vlow <- vclose - abs(rnorm(n,sd=0.25))
+#'       vhigh <- vclose + abs(rnorm(n,sd=0.25))
+#'       vopen <- c(vlow[1], vclose[1:(NROW(vclose)-1)])
+#'       times <- as.POSIXct((1:n)*5, origin='2018-1-1 00:00:00', tz='UTC')
+#'       data.frame(open=vopen, high=vhigh, low=vlow, close=vclose, row.names = times)
+#'    }
+#'    graph = function() {
+#'       bars <- newdata()
+#'       v1 <- dygraph(bars, height=650, width='100%', elementId='graph1') %>% 
+#'          dyCandlestick() %>% 
+#'          dyOptions(labelsUTC = TRUE)
+#'       htmltools::browsable(v1)
+#'    }
+#'
+#'    ui <- fluidPage(
+#'       sidebarLayout(sidebarPanel(actionButton("button", "regenerate")),
+#'       mainPanel(graph())))
+#'        
+#'    events <- function (input, output, session) {
+#'       observeEvent(input$button, {
+#'          bars <- newdata()
+#'          dyUpdate (session, 'graph1', bars)
+#'       })
+#'    }
+#'
+#'    shinyApp(ui = ui, server = events, options=list(port=5432, host="127.0.0.1"))
+#' }
+#'
+#' app()
+#' 
+#' @export
+dyUpdate <- function(session, id, data) {
+    if (!xts::is.xts(data))
+        data <- xts::as.xts(data)
+
+    times <- as.POSIXct(time(data), origin='2010-1-1 00:00:00', tz='UTC')
+    data <- zoo::coredata(data)
+
+    # create matrix of time and data columns (time in epoch time seconds)
+    mat <- cbind(as.numeric(times), data)
+
+    # send data and target graph ID to browser
+    session$sendCustomMessage(type='dygraph:newdata', list(id=id, data=mat))
+}

docs/gallery-plugins.Rmd

@@ -39,17 +39,18 @@ Try zooming the dygraph and note that a "Reset Zoom" button now appears when the
 
 #### Plugin Options
 
-The dyCrosshair plugin draws a crosshair line over the point closest to the mouse when the user hovers over the graph (see the JavaScript source code for the plugin here: <https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js>). The plugin includes a "direction" option that is provided as an argument to the R wrapper function and then forwarded to the plugin using the "options" argument to `dyPlugin`.
+The dyCrosshair plugin draws a crosshair line over the point closest to the mouse when the user hovers over the graph (see the JavaScript source code for the plugin here: <https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js>). The plugin includes a "direction" and "color" option that is provided as an argument to the R wrapper function and then forwarded to the plugin using the "options" argument to `dyPlugin`.
 
 ```{r}
 dyCrosshair <- function(dygraph, 
-                        direction = c("both", "horizontal", "vertical")) {
+                        direction = c("both", "horizontal", "vertical"),
+                        color = rgb(0,0,0,0.3) {
   dyPlugin(
     dygraph = dygraph,
     name = "Crosshair",
     path = system.file("plugins/crosshair.js", 
                        package = "dygraphs"),
-    options = list(direction = match.arg(direction))
+    options = list(direction = match.arg(direction), color=color)
   )
 }
 ```
@@ -60,7 +61,7 @@ The plugin can now be used just like any other dygraphs function and can even be
 dygraph(ldeaths) %>% 
   dyRangeSelector() %>% 
   dyUnzoom() %>% 
-  dyCrosshair(direction = "vertical")
+  dyCrosshair(direction = "vertical", color="#ff00004d")
 ```
 
 If you hover over the graph you'll see a vertical crosshair drawn at the current position of the mouse.

docs/gallery-plugins.html

@@ -198,22 +198,23 @@ <h4>Simple Example</h4>
 </div>
 <div id="plugin-options" class="section level4">
 <h4>Plugin Options</h4>
-<p>The dyCrosshair plugin draws a crosshair line over the point closest to the mouse when the user hovers over the graph (see the JavaScript source code for the plugin here: <a href="https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js" class="uri">https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js</a>). The plugin includes a “direction” option that is provided as an argument to the R wrapper function and then forwarded to the plugin using the “options” argument to <code>dyPlugin</code>.</p>
+<p>The dyCrosshair plugin draws a crosshair line over the point closest to the mouse when the user hovers over the graph (see the JavaScript source code for the plugin here: <a href="https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js" class="uri">https://github.com/rstudio/dygraphs/blob/master/inst/plugins/crosshair.js</a>). The plugin includes a “direction” and "color" option that is provided as an argument to the R wrapper function and then forwarded to the plugin using the “options” argument to <code>dyPlugin</code>.</p>
 <pre class="r"><code>dyCrosshair &lt;- function(dygraph, 
-                        direction = c(&quot;both&quot;, &quot;horizontal&quot;, &quot;vertical&quot;)) {
+                        direction = c(&quot;both&quot;, &quot;horizontal&quot;, &quot;vertical&quot;),
+                        color = rgb(0,0,0,0.3)) {
   dyPlugin(
     dygraph = dygraph,
     name = &quot;Crosshair&quot;,
     path = system.file(&quot;plugins/crosshair.js&quot;, 
                        package = &quot;dygraphs&quot;),
-    options = list(direction = match.arg(direction))
+    options = list(direction = match.arg(direction), color=color)
   )
 }</code></pre>
 <p>The plugin can now be used just like any other dygraphs function and can even be composed with other plugins:</p>
 <pre class="r"><code>dygraph(ldeaths) %&gt;% 
   dyRangeSelector() %&gt;% 
   dyUnzoom() %&gt;% 
-  dyCrosshair(direction = &quot;vertical&quot;)</code></pre>
+  dyCrosshair(direction = &quot;vertical&quot;, color=&quot;#ff00004d&quot;)</code></pre>
 <div id="htmlwidget-b72292100e3295b0b80d" style="width:624px;height:336px;" class="dygraphs html-widget"></div>
 <script type="application/json" data-for="htmlwidget-b72292100e3295b0b80d">{"x":{"attrs":{"labels":["month","V1"],"legend":"auto","retainDateWindow":false,"axes":{"x":{"pixelsPerLabel":60}},"showRangeSelector":true,"rangeSelectorHeight":40,"rangeSelectorPlotFillColor":" #A7B1C4","rangeSelectorPlotStrokeColor":"#808FAB","interactionModel":"Dygraph.Interaction.defaultModel"},"scale":"monthly","annotations":[],"shadings":[],"events":[],"format":"date","data":[["1974-01-01T00:00:00.000Z","1974-02-01T00:00:00.000Z","1974-03-01T00:00:00.000Z","1974-04-01T00:00:00.000Z","1974-05-01T00:00:00.000Z","1974-06-01T00:00:00.000Z","1974-07-01T00:00:00.000Z","1974-08-01T00:00:00.000Z","1974-09-01T00:00:00.000Z","1974-10-01T00:00:00.000Z","1974-11-01T00:00:00.000Z","1974-12-01T00:00:00.000Z","1975-01-01T00:00:00.000Z","1975-02-01T00:00:00.000Z","1975-03-01T00:00:00.000Z","1975-04-01T00:00:00.000Z","1975-05-01T00:00:00.000Z","1975-06-01T00:00:00.000Z","1975-07-01T00:00:00.000Z","1975-08-01T00:00:00.000Z","1975-09-01T00:00:00.000Z","1975-10-01T00:00:00.000Z","1975-11-01T00:00:00.000Z","1975-12-01T00:00:00.000Z","1976-01-01T00:00:00.000Z","1976-02-01T00:00:00.000Z","1976-03-01T00:00:00.000Z","1976-04-01T00:00:00.000Z","1976-05-01T00:00:00.000Z","1976-06-01T00:00:00.000Z","1976-07-01T00:00:00.000Z","1976-08-01T00:00:00.000Z","1976-09-01T00:00:00.000Z","1976-10-01T00:00:00.000Z","1976-11-01T00:00:00.000Z","1976-12-01T00:00:00.000Z","1977-01-01T00:00:00.000Z","1977-02-01T00:00:00.000Z","1977-03-01T00:00:00.000Z","1977-04-01T00:00:00.000Z","1977-05-01T00:00:00.000Z","1977-06-01T00:00:00.000Z","1977-07-01T00:00:00.000Z","1977-08-01T00:00:00.000Z","1977-09-01T00:00:00.000Z","1977-10-01T00:00:00.000Z","1977-11-01T00:00:00.000Z","1977-12-01T00:00:00.000Z","1978-01-01T00:00:00.000Z","1978-02-01T00:00:00.000Z","1978-03-01T00:00:00.000Z","1978-04-01T00:00:00.000Z","1978-05-01T00:00:00.000Z","1978-06-01T00:00:00.000Z","1978-07-01T00:00:00.000Z","1978-08-01T00:00:00.000Z","1978-09-01T00:00:00.000Z","1978-10-01T00:00:00.000Z","1978-11-01T00:00:00.000Z","1978-12-01T00:00:00.000Z","1979-01-01T00:00:00.000Z","1979-02-01T00:00:00.000Z","1979-03-01T00:00:00.000Z","1979-04-01T00:00:00.000Z","1979-05-01T00:00:00.000Z","1979-06-01T00:00:00.000Z","1979-07-01T00:00:00.000Z","1979-08-01T00:00:00.000Z","1979-09-01T00:00:00.000Z","1979-10-01T00:00:00.000Z","1979-11-01T00:00:00.000Z","1979-12-01T00:00:00.000Z"],[3035,2552,2704,2554,2014,1655,1721,1524,1596,2074,2199,2512,2933,2889,2938,2497,1870,1726,1607,1545,1396,1787,2076,2837,2787,3891,3179,2011,1636,1580,1489,1300,1356,1653,2013,2823,3102,2294,2385,2444,1748,1554,1498,1361,1346,1564,1640,2293,2815,3137,2679,1969,1870,1633,1529,1366,1357,1570,1535,2491,3084,2605,2573,2143,1693,1504,1461,1354,1333,1492,1781,1915]],"plugins":{"Unzoom":"{}","Crosshair":{"direction":"vertical"}}},"evals":["attrs.interactionModel","plugins.Unzoom"],"jsHooks":[]}</script>
 <p>If you hover over the graph you’ll see a vertical crosshair drawn at the current position of the mouse.</p>

inst/htmlwidgets/dygraphs.js

@@ -20,6 +20,30 @@ if (!Array.prototype.indexOf) {
   };
 }
 
+// Add Shiny hook for data update if shiny running
+if (HTMLWidgets.shinyMode) {
+    Shiny.addCustomMessageHandler("dygraph:newdata", function(msg) {
+        var id = msg.id;
+        var data = msg.data;
+        var container = document.getElementById(id);
+        var widget = container.htmlwidget_data_init_result.dygraph;
+
+	var existingdata = widget.file_;
+	var isDate = existingdata.length > 0 && (existingdata[0][0] instanceof Date);
+
+	if (isDate) {
+	    // convert epoch time in seconds (from R) into javascript Date for each row
+            for (var i = 0; i < data.length ; i++) {
+		var seconds = data[i][0]
+		var date = new Date(seconds * 1000);
+		data[i][0] = date;
+            }
+	}
+
+        widget.updateOptions( { 'file': data } );
+    });
+}
+
 HTMLWidgets.widget({
 
   name: "dygraphs",

inst/plugins/crosshair.js

@@ -17,8 +17,13 @@ Dygraph.Plugins.Crosshair = (function() {
 
   var crosshair = function(opt_options) {
     this.canvas_ = document.createElement("canvas");
+    this.canvas_.style.zIndex = 1;
+    this.canvas_.style.position = "absolute";
+    this.canvas_.style.pointerEvents = "none";
+
     opt_options = opt_options || {};
     this.direction_ = opt_options.direction || null;
+    this.color_ = opt_options.color || "rgba(0, 0, 0,0.3)"
   };
 
   crosshair.prototype.toString = function() {
@@ -52,7 +57,7 @@ Dygraph.Plugins.Crosshair = (function() {
 
     var ctx = this.canvas_.getContext("2d");
     ctx.clearRect(0, 0, width, height);
-    ctx.strokeStyle = "rgba(0, 0, 0,0.3)";
+    ctx.strokeStyle = this.color_;
     ctx.beginPath();
 
     var canvasx = Math.floor(e.dygraph.selPoints_[0].canvasx) + 0.5; // crisper rendering