From 215e766c5faeaeb9d5f8c1e575ff2c7ab89509b0 Mon Sep 17 00:00:00 2001 From: muschellij2 Date: Fri, 7 Jul 2017 12:41:55 -0400 Subject: [PATCH 1/3] added draw_after argument to shinydrawr --- DESCRIPTION | 2 +- R/shinydrawr.R | 3 +++ inst/js/libraries/youDrawIt.js | 9 ++++++--- man/shinydrawr.Rd | 8 ++++++-- 4 files changed, 16 insertions(+), 6 deletions(-) diff --git a/DESCRIPTION b/DESCRIPTION index 7c0e865..7e7551a 100644 --- a/DESCRIPTION +++ b/DESCRIPTION @@ -1,7 +1,7 @@ Package: shinysense Type: Package Title: Lets Shiny Sense The World Around -Version: 0.1.1 +Version: 0.1.2 Author: Nick Strayer Maintainer: Nick Strayer Description: shinysense is a collection of modules written for shiny that allows the easy addition of data collection to shiny apps. diff --git a/R/shinydrawr.R b/R/shinydrawr.R index 047bca0..81b5c5e 100644 --- a/R/shinydrawr.R +++ b/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,6 +62,7 @@ shinydrawr <- function(input, output, session, data, draw_start, raw_draw = FALSE, + draw_after = TRUE, x_key = "x", y_key = "y", y_min = NA, @@ -84,6 +86,7 @@ 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) diff --git a/inst/js/libraries/youDrawIt.js b/inst/js/libraries/youDrawIt.js index d37a403..7ee4878 100644 --- a/inst/js/libraries/youDrawIt.js +++ b/inst/js/libraries/youDrawIt.js @@ -17071,6 +17071,8 @@ 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$on_done_drawi = params.on_done_drawing, on_done_drawing = _params$on_done_drawi === undefined ? function (d) { return console.table(d); @@ -17115,7 +17117,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 @@ -17139,7 +17142,7 @@ var drawIt = function drawIt(params) { //if we've drawn for all the hidden datapoints, reveal them. ));if (d3.mean(usersData, function (d) { return d.defined; - }) === 1 && !this.raw_draw) { + }) === 1 && !this.raw_draw && this.draw_after) { clipRect.transition().duration(1000).attr('width', scales.x(x_max)); } }).on('end', function () { @@ -17147,7 +17150,7 @@ var drawIt = function drawIt(params) { }); }; - 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); }; diff --git a/man/shinydrawr.Rd b/man/shinydrawr.Rd index b04837d..a3b31ce 100644 --- a/man/shinydrawr.Rd +++ b/man/shinydrawr.Rd @@ -4,8 +4,8 @@ \alias{shinydrawr} \title{Gather recorded data from UI.} \usage{ -shinydrawr(input, output, session, data, draw_start, x_key = "x", - y_key = "y", y_min = NA, y_max = NA) +shinydrawr(input, output, session, data, draw_start, raw_draw = FALSE, + draw_after = TRUE, x_key = "x", y_key = "y", y_min = NA, y_max = NA) } \arguments{ \item{input}{you can ignore this as it is taken care of by shiny} @@ -18,6 +18,10 @@ shinydrawr(input, output, session, data, draw_start, x_key = "x", \item{draw_start}{position on the x-axis the true data is blocked off and the user is to draw from.} +\item{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.} + +\item{draw_after}{set to true of you want the true data drawn after all points are drawn by the user.} + \item{x_key}{name of the x column.} \item{y_key}{name of the y column.} From 710bfe1c8fd4bf08afebe6748b849d41fa1e852c Mon Sep 17 00:00:00 2001 From: muschellij2 Date: Fri, 7 Jul 2017 13:00:55 -0400 Subject: [PATCH 2/3] added the corect roxygen and removed failing examples and added to demo index --- R/shinymovr.R | 5 +++-- demo/00Index | 2 ++ man/shinymovr.Rd | 4 +++- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/R/shinymovr.R b/R/shinymovr.R index 5841fea..392de99 100644 --- a/R/shinymovr.R +++ b/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){ diff --git a/demo/00Index b/demo/00Index index 3d71859..6608f9e 100644 --- a/demo/00Index +++ b/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 diff --git a/man/shinymovr.Rd b/man/shinymovr.Rd index 35de514..e09df6f 100644 --- a/man/shinymovr.Rd +++ b/man/shinymovr.Rd @@ -17,5 +17,7 @@ shinymovr(input, output, session) Contains a reactive variable that will update as new data comes in. } \examples{ - movrData <- callModule(shinymovr) +\dontrun{ +movrData <- callModule(shinymovr) +} } From 913661320aeef72c459c26597059a320a4a0a0ec Mon Sep 17 00:00:00 2001 From: muschellij2 Date: Tue, 18 Jul 2017 18:25:58 -0400 Subject: [PATCH 3/3] udpated to gh --- .DS_Store | Bin 6148 -> 10244 bytes DESCRIPTION | 2 +- R/shinydrawr.R | 18 +++++++-- inst/.DS_Store | Bin 6148 -> 10244 bytes inst/js/drawr.js | 4 +- inst/js/libraries/youDrawIt.js | 68 ++++++++++++++++++++++++++------- 6 files changed, 72 insertions(+), 20 deletions(-) diff --git a/.DS_Store b/.DS_Store index b83da9bed25074cbb3d768b7d95efeb67fbea256..53718d6772178dc551aebcb303df9c06eb71b6a9 100644 GIT binary patch literal 10244 zcmeHMYit}>6+YkEac1fv9w%w@*zR^4E5=Qn#CGC34QaEsH?kAEjftJud9=LDQG|#j{t2lne7Q&wdhuIO0!~W21WTq3}nEs9iYOaJOez>k0*0XG67KScN^WYm$f zwzN_QU#u+v%W7`63fEOpVHt5`)RD8cWDOVCrYvn!I9m+Z=G-1}`b8Z%YfIal;A}qN z%nWCT0&8|2KVo$!L~ZF`{RsFGSQr7Zcdw?+G)6k*%l7ZJ%R*k=xDkt`3i%|_`MaMg zS_8Ru<3?&xUG{|MOyH^(VOY!a?WZi|$e`P~ULcb+%9YJt^ADbBv7R1ZCbLT|UltkD zb?}5S zF_@3%3uae5cf`8WQ(D5Q4;e<CDqyY?)71=xeu5!lj#JzD70>4+54cW(`7od*lkB7@MI|>KPyEhdB#?7nPXH!|iyEoZVERqIR+*Pf)28OUiuKdROz>GYs} zQZt8>M!GPbF-7lW&Pb;R3{w}w92&`MlX=l+fokNiY2@lZsVCCffeAg8KXE8-CbdjT&x{@B zmzl}y$8{|y*W-dbl!=dPb1UkXt83N1}*5qt)Z;40Nm5tQ?Km3i~;=9I)U1iS6;Ph^|g%~HgDa2W0(8ZE8cS%6us!PAZKIB!deMS zHoh6#SBJt%WU;T}0Hafzlmx`orE^yAhR}M6QKd@Ot`HgNhqnxkJa zM*jw2DdTe`V{;wjvIRRVT*j~)Js4nY4q^xgF^XeIFh0{5XMAQcg_F1wGk709>|pdh zJb(xBFg}G(<1svrC-HfF0Z-#uJddw1X1{|M@xuy~_LcByOZ>!(QV-FcI$W@NxCr)8 z+X7t~nIR$!UAy97E|WGgW85ablxima3=?qvf0yK(2Q1?=dC58N!>8x@?8QaWL0^C0 z&B{KPLH=VLcF~07=4Ol5BI~cSvO&+kN^ACaAFd?9QW{uDch{~9FG6>X>%w7g!g2U! z!^Ut0-EC>9q`PhHO1OgVZrGuOODW2wyPI|?VK?#3(_MEg9Ii-%F5UIASC^(cD>2Hd z*q4T=k+xGm4bgF4vED`Z&?8KCU!${hjzki9g?>rDr9abO=uIn`T){NAmQ%?_Y{F)2 z!FDT=^kNT_+-+7G(X9k>2XdIkEZ&a~;DbzXAIJSnau47%p5VlB#!4M$@eOI2AMxt!H}ofZlbNrE*JUdZ;T2gcI(RkKgI@HZAGcr_ zBRGsBxE04S1|7FE^A&hiHp$F4&44|H4>9xI&9ME11>1+L)!FBm`JTX2_!6FB-h0l0 zuVB8H@QRI07p#>lv{$`g^>Ux~yk+SE*~@*Ex-#yQPYXlWu7dljcykvg-e=A4ew?N< zuAs;i58`Mp;+Cs%cfqF|ryNb0OJunO+V7o~Z_B6bdyS{$R_}Dq3czZepK89fe43B( z0GBRRwmKrt|93C`|No^2@wI*g{0RJ4M*!8a!B`hRLTTq*`849JJ;J|Z{1Zj=o3*87 z!WZi}o~3mh&o|;Y-a0tow$ibIu#0lLkh8Yr8kc|np8 Description: shinysense is a collection of modules written for shiny that allows the easy addition of data collection to shiny apps. diff --git a/R/shinydrawr.R b/R/shinydrawr.R index 81b5c5e..684e6df 100644 --- a/R/shinydrawr.R +++ b/R/shinydrawr.R @@ -69,15 +69,24 @@ shinydrawr <- function(input, output, session, 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", @@ -89,7 +98,8 @@ shinydrawr <- function(input, output, session, 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 ) ) }) diff --git a/inst/.DS_Store b/inst/.DS_Store index ba3b77f6a8c3248a9cea646d67980a85d45fcca5..4cbe4e13108aea51609a77a3abbb456a71a62d39 100644 GIT binary patch literal 10244 zcmeHNU2GIp6uxI$$_yRpEd}}QW}u1tPF*m$bD-8d_*6KV^4k+78anEIYH? zLanI^(HMPFH29*?XpHb;6!k@n8WRnM2dyCrXyTJGJ}FTXH1XV@ExW}=o(z(?$=oyd zo}YWqneX1yd$)uTXwDdQgy@721s_JKhSfh5#%IqhB_w+&Qb2v;rQ)_5$JXcZ)Gg9M zM-YJ^0zm|V2m}!bB5)@}0CP4gN~xeh9Yi3AKoEhc2(bM@$A{5~q!WVjtph851VCDh z-MrvCI}R`%UDAl86M`ZK3kX%DLKWl@1B5#E>ryTv>4cy{oq#-ifE*d*2?hA*XkX{z z1R{b4br69d0=GthEtevaARh7JBl+id+w%O{+RG3sDxOs`TTzr!<(|?*-NWukw;%H} zUUMvcfVV8ejLY{P*R`kKWAS~KIWj=!x44cUvm7&>Cw{QkatwE*+08hH$L(~*{9)8p zRaH?3=%TT)jSUSo`o_lk@fv-sv9Y#Buitdv__(4hTv@lR{YdioiLr;rA2}mD0=X-Y zvS}W^c+)+5sIEKVCgsJ1b}^6RWn09>Md(sIB^>`Y=eRnjRMX~mbaw30cK2Bc*Xg!S zm;wfYevyBnwrN(+nr)&ynSZcLs}K76>h8Q*|J6Y%GK*P zZQj=0I!VjtRcH&eg}qtJv*Nb7cf>OM;r%f$VLFE84E5uub9`&iGSg}~TvvOXSkj!V zSiEHEvdVCHx^&J;UnXuH%UJ$#TBRtH73K5j@)cq2pn=odVILC-5H=Txrl?K2UON^yZEC1uoGn|maBo)lOgm)f z_8nTd55H>?UGd7HMs~ME!{NhhhVcKjSqS2Afk=4m4GfRpOOT zPNggwchy{|E7!qd;WrZ7cN>}y|%Vt>yGFY0H%HNeC+XWDiFnymO~OpeF1zY z#R|~$9OS1jg}n$=b5vnyqqBu{Rpm+r0Y(+kTvfS7!Bs#*ys53L+@K=XX_4S=)an&P zHJv56joKC!aZif{_kL}=g7Bs#lgpMYT^woBG)ma=RE6}a%2rjOFcWD11+rg~E958g z8@Yi{ErGdE0XnRPI%tF@4$}_kga@G)`k)^Uz#$lfAq4DEupt9k7=_~q+LLe!o`5Ie zDFp3v9JFWP6?he1gVzzfZ^7H}F1!ctOYnXQm*6s7m5|IqwX+baaP1~klWsI>Wc&mn zUynNHxSRxW(lut_q=xf1cfK7;oosj7v0Y~f?Xa;!9}(Rc~1GNBIh*j06~@u zvK%3IW0n)h4{{v)qbkU8cW{p5K+Vf=r}{HI!^!@s{8rFkkloY>Q{eK`avL`kR6zu8 zGXh0IPG|T3J7@m=|2C}!VnGCg2>c%-0L9VnXfw_{cQ~8w1iNe3@i~GID@<-eP_BYi z!4Co0VAt{dG6i|^c8cpou%GEq2+Gy5&DD|qM?VIzo2KCWADsXBf2!R*H{IeClz-1X H^ZEa81c`F) delta 137 zcmZn(XfcprU|?W$DortDU=RQ@Ie-{MGpJ516gFZ6GME^$7>ZMhlXH^t^K(D~P{0JG zK|(+*zyOxtSU8P+VuQ$Hb`B0fW{3&_ZXoRn#Ht$$zcWwfS5ahSoNTIM#0s*SVRJms G9A*GK%oM5s diff --git a/inst/js/drawr.js b/inst/js/drawr.js index f0a5ca9..1b506e8 100644 --- a/inst/js/drawr.js +++ b/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); } ); diff --git a/inst/js/libraries/youDrawIt.js b/inst/js/libraries/youDrawIt.js index 7ee4878..c767f65 100644 --- a/inst/js/libraries/youDrawIt.js +++ b/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; @@ -17072,13 +17103,15 @@ var drawIt = function drawIt(params) { _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, + 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 }), @@ -17089,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 }); @@ -17104,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 @@ -17140,11 +17177,14 @@ 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 && this.draw_after) { - 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); });