added draw_after argument to shinydrawr

DESCRIPTION

@@ -1,7 +1,7 @@
 Package: shinysense
 Type: Package
 Title: Lets Shiny Sense The World Around
-Version: 0.1.1
+Version: 0.1.5
 Author: Nick Strayer
 Maintainer: Nick Strayer <n.strayer@vanderbilt.edu>
 Description: shinysense is a collection of modules written for shiny that allows the easy addition of data collection to shiny apps.

R/shinydrawr.R

@@ -42,6 +42,7 @@ shinydrawrUI <- function(id, ...) {
 #' @param data dataframe containing data you want to plot in two of its columns
 #' @param draw_start position on the x-axis the true data is blocked off and the user is to draw from.
 #' @param raw_draw set to true if you want to not draw any line, just let the user draw everything. Auto sets draw_start to begining of data.
+#' @param draw_after set to true of you want the true data drawn after all points are drawn by the user.
 #' @param x_key name of the x column.
 #' @param y_key name of the y column.
 #' @param y_min value of the lowest possible value the user is allowed to draw, defaults to lowest seen in data.
@@ -61,21 +62,31 @@ shinydrawr <- function(input, output, session,
                        data,
                        draw_start,
                        raw_draw = FALSE,
+                       draw_after = TRUE,
                        x_key = "x",
                        y_key = "y",
                        y_min = NA,
                        y_max = NA){
 
   #set chart maximum y of the data's max y if nothing has been specified.
-  if(is.na(y_min)) y_min <- min(data[y_key])
-  if(is.na(y_max)) y_max <- max(data[y_key])
-  if(raw_draw) draw_start <- min(data[x_key])
+  if(is.na(y_min)) {
+    y_min <- min(data[y_key])
+  }
+  if(is.na(y_max)) {
+    y_max <- max(data[y_key])
+  }
+  if(raw_draw) {
+    draw_start <- min(data[x_key])
+  }
 
   data_jsonified <- jsonlite::toJSON(data)
 
   #the id of our given recorder button. We send this to javascript.
   chart_id <- gsub("-", "", session$ns(""))
 
+  x_is_date = is.Date(data[x_key])
+
+  data[x_key] = as.character(data[x_key])
   #Send over a message to the javascript with the id of the div we're placing this chart in along with the data we're placing in it.
   observe({ session$sendCustomMessage(
             type    = "initialize_chart",
@@ -84,9 +95,11 @@ shinydrawr <- function(input, output, session,
                            id            = chart_id,
                            reveal_extent = draw_start,
                            raw_draw      = raw_draw,
+                           draw_after    = draw_after,
                            x_key         = x_key,
                            y_key         = y_key,
-                           y_domain      = c(y_min,y_max)
+                           y_domain      = c(y_min,y_max),
+                           x_is_date     = x_is_date
                          )
             )
       })

R/shinymovr.R

@@ -34,8 +34,9 @@ shinymovrUI <- function(id) {
 #' @param output you can ignore this as it is taken care of by shiny
 #' @param session you can ignore this as it is taken care of by shiny
 #' @export
-#' @examples
-#'  movrData <- callModule(shinymovr)
+#' @examples \dontrun{
+#' movrData <- callModule(shinymovr)
+#' }
 shinymovr <- function(input, output, session){
 
 

demo/00Index

@@ -2,3 +2,5 @@ earr_demo    demo for earr
 swipr_demo    demo for swipr
 drawr_demo    demo for drawr
 popup_demo    demo for popup
+draw_distribution    demo for drawr with distribution
+movr_demo    demo with movr

inst/js/drawr.js

@@ -1,7 +1,8 @@
 //logic for returning to shiny goes here.
 const sendToShiny = (id) => {
   const send_dest = id + "-doneDragging";
-
+  console.log("send dest");
+  console.log(send_dest);
   return (data) => Shiny.onInputChange(send_dest, data.map(d=>d.y))
 
 };
@@ -15,6 +16,7 @@ $(document).on('shiny:connected', event => {
           params.dom_target = "#" + params.id + '-youDrawIt'; //where we place the chart
           params.on_done_drawing = sendToShiny(params.id);    //function that sends data back to shiny.
           const ourChart = new youDrawIt(params);             //initialize the chart itself.
+          console.log("sending params to shiny");
           console.log(params);
         }
     );

inst/js/libraries/youDrawIt.js

@@ -16893,11 +16893,22 @@ var makeScales = function makeScales(_ref3) {
   var data = _ref3.data,
       y_domain = _ref3.y_domain,
       height = _ref3.height,
-      width = _ref3.width;
-
-  var x = d3.scaleLinear().domain(d3.extent(data, function (d) {
-    return d.x;
-  })).range([0, width]);
+      width = _ref3.width,
+      x_is_date = _ref3.x_is_date; 
+  if (x_is_date) {
+    var formatter = d3.time.format("%Y-%m-%d").parse;
+    console.log("ScaleTime is running");
+    var x = d3.scaleTime()
+      .domain([new Date(2016, 0, 1), new Date(2018, 0, 1)])
+      .range([0, width]);
+    // var x = d3.scaleTime().domain(d3.extent(data, function (d) {
+    //   return formatter(d.x);
+    // }));
+  } else {
+    var x = d3.scaleLinear().domain(d3.extent(data, function (d) {
+      return d.x;
+    })).range([0, width]);
+  }
 
   var y = d3.scaleLinear().domain(y_domain).range([height, 0]);
 
@@ -16937,6 +16948,23 @@ var clamp = function clamp(a, b, c) {
   return Math.max(a, Math.min(b, c));
 };
 
+var makeSubData = function makeSubData(_ref7) {
+  var data = _ref7.data,
+      reveal_extent = _ref7.reveal_extent;
+  return data.map(function (d) {
+    return {
+      x: d.x,
+      y: d.y,
+      defined: d.x == reveal_extent
+    };
+  }).filter(function (d) {
+    return d.x <= reveal_extent;
+  }
+
+  //append invisible rectangle covering plot so d3drag can see what's going on
+  );
+};
+
 var makeUserData = function makeUserData(_ref7) {
   var data = _ref7.data,
       reveal_extent = _ref7.reveal_extent;
@@ -16956,6 +16984,7 @@ var makeUserData = function makeUserData(_ref7) {
   var svg = _ref8.svg,
       width = _ref8.width,
       height = _ref8.height;
+  console.log("Drawing a Rectangle");
   return svg.append('rect').attr("width", width).attr("height", height).attr("opacity", 0);
 };
 
@@ -17001,6 +17030,7 @@ module.exports = {
   makeClip: makeClip,
   drawAxes: drawAxes,
   makeUserData: makeUserData,
+  makeSubData: makeSubData,
   dragCanvas: dragCanvas,
   clamp: clamp,
   addToClosest: addToClosest,
@@ -17054,6 +17084,7 @@ var _require = require('./helpers'),
     drawAxes = _require.drawAxes,
     dragCanvas = _require.dragCanvas,
     makeUserData = _require.makeUserData,
+    makeSubData = _require.makeSubData,
     clamp = _require.clamp,
     addToClosest = _require.addToClosest,
     drawStartValue = _require.drawStartValue;
@@ -17071,12 +17102,16 @@ var drawIt = function drawIt(params) {
       total_height = _params$total_height === undefined ? 400 : _params$total_height,
       _params$raw_draw = params.raw_draw,
       raw_draw = _params$raw_draw === undefined ? false : _params$raw_draw,
+      _params$draw_after = params.draw_after,
+      draw_after = _params$draw_after === undefined ? false : _params$draw_after, 
+      _params$x_is_date = params.x_is_date,
+      x_is_date = _params$x_is_date === undefined ? false : _params$x_is_date,            
       _params$on_done_drawi = params.on_done_drawing,
       on_done_drawing = _params$on_done_drawi === undefined ? function (d) {
     return console.table(d);
   } : _params$on_done_drawi;
 
-  console.log("THis is working!");
+  console.log("This is working!");
 
   var sel = d3.select(dom_target).html(''),
       data = simplifyData({ fullData: fullData, x_key: x_key, y_key: y_key }),
@@ -17087,7 +17122,7 @@ var drawIt = function drawIt(params) {
       _y_domain = _slicedToArray(y_domain, 2),
       y_min = _y_domain[0],
       y_max = _y_domain[1],
-      scales = makeScales({ data: data, y_domain: y_domain, height: height, width: width, margin: margin }),
+      scales = makeScales({ data: data, y_domain: y_domain, height: height, width: width, margin: margin, x_is_date: x_is_date }),
       x_max = scales.x.domain()[1],
       line = makeLine({ scales: scales }),
       clipRect = makeClip({ svg: svg, scales: scales, reveal_extent: reveal_extent, height: height });
@@ -17102,9 +17137,13 @@ var drawIt = function drawIt(params) {
 
   var trueLine = svg.append('g').attr('clip-path', 'url(#clip)');
 
-  if (!raw_draw) {
+  if (!raw_draw & draw_after) {
     //Draw the data's true line.
     trueLine.append('path').attr("d", line(data)).style("stroke", "black").style("stroke-width", 3).style("fill", "none");
+  } 
+  if (!raw_draw & !draw_after) {
+    var usersData2 = makeSubData({ data: data, reveal_extent: reveal_extent });
+    trueLine.append('path').attr("d", line(usersData2)).style("stroke", "black").style("stroke-width", 3).style("fill", "none");
   }
 
   //plot the axes
@@ -17115,7 +17154,8 @@ var drawIt = function drawIt(params) {
   });var makeDragger = function makeDragger(_ref) {
     var scales = _ref.scales,
         reveal_extent = _ref.reveal_extent,
-        raw_draw = _ref.raw_draw;
+        raw_draw = _ref.raw_draw,
+        draw_after = _ref.draw_after;
     return d3.drag().on('drag', function () {
 
       var pos = d3.mouse(this); //current drag position
@@ -17137,17 +17177,20 @@ var drawIt = function drawIt(params) {
       })(usersData
 
       //if we've drawn for all the hidden datapoints, reveal them.
-      ));if (d3.mean(usersData, function (d) {
-        return d.defined;
-      }) === 1 && !this.raw_draw) {
-        clipRect.transition().duration(1000).attr('width', scales.x(x_max));
-      }
+      ));if (draw_after) {
+      		console.log("draw_after is TRUE here");
+	      	if (d3.mean(usersData, function (d) {
+	        return d.defined;
+	      }) === 1 && !this.raw_draw ) {
+	        clipRect.transition().duration(1000).attr('width', scales.x(x_max));
+	      }
+  		}
     }).on('end', function () {
       on_done_drawing(usersData);
     });
   };
 
-  var dragger = makeDragger({ scales: scales, reveal_extent: reveal_extent, raw_draw: raw_draw });
+  var dragger = makeDragger({ scales: scales, reveal_extent: reveal_extent, raw_draw: raw_draw, draw_after: draw_after });
   svg.call(dragger);
 };