Add a frappeChart of typing speed

inst/shiny-input-app/app.R

@@ -1,4 +1,5 @@
 library(shiny)
+library(frappeCharts)
 
 options(scipen = 1e3)
 
@@ -28,7 +29,8 @@ ui <- fluidPage(
   # textAreaInput("typing", "Type here..."),
   typingSpeedInput("typing", "Type here..."),
   actionButton("reset", "Reset"),
-  verbatimTextOutput("debug")
+  frappeCharts::frappeChartOutput("chart_typing_speed")
+  # verbatimTextOutput("debug")
 )
 
 server <- function(input, output, session) {
@@ -39,6 +41,31 @@ server <- function(input, output, session) {
   observeEvent(input$reset, {
     resetTypingSpeed("typing")
   })
+
+  wpm <- reactiveValues(time = c(), wpm = c())
+
+  observeEvent(input$typing_reset, {
+    wpm$time <- c()
+    wpm$wpm <- c()
+  })
+
+  observeEvent(input$typing, {
+    req(input$typing)
+    wpm$time <- c(wpm$time, input$typing$time)
+    wpm$wpm <- c(wpm$wpm, input$typing$wpm)
+  })
+
+  output$chart_typing_speed <- frappeCharts::renderFrappeChart({
+    frappeCharts::frappeChart(
+      data.frame(time = wpm$time, wpm = wpm$wpm),
+      type = "line",
+      title = "Your Typing Speed",
+      is_navigable = FALSE,
+      axisOptions = list(xIsSeries = TRUE),
+      lineOptions = list(regionFill = TRUE)
+    )
+  })
+
 }
 
 shinyApp(ui, server)

inst/shiny-input-app/dev-shiny-input.Rmd

@@ -500,3 +500,64 @@ that sends the current time
 to the input ID `{inputId}_reset`
 when the `this._timing` property is reset.
 Also, update the `debug` output to monitor `input$typing_reset` as well.
+
+`r github_sha_link("ccc35d6978dabf4a709a795f89719cc353ac72bd ")`
+
+## Use our frappeChart widget to show speed over time
+
+We're going to drop-in our `frappeChart` package to add a dynamic plot
+showing typing speed over time.
+
+If you didn't complete the `frappeChart` project earlier in the workshop,
+you can run the code below to install the package
+in the state I hope it's in by the time we finish that section.
+
+```r
+devtools::install_github("gadenbuie/js4shiny-frappeCharts@pkg")
+```
+
+Our first pass is going to add a chart,
+but it's not going to look super great.
+
+To get setup, 
+we're going to cache the `time` and `wpm` sent from the browser
+in a `reactiveValues` object that we can coerce into a `data.frame`.
+
+```r
+# server
+wpm <- reactiveValues(time = c(), wpm = c())
+
+observeEvent(input$typing_reset, {
+  wpm$time <- c()
+  wpm$wpm <- c()
+})
+
+observeEvent(input$typing, {
+  req(input$typing)
+  wpm$time <- c(wpm$time, input$typing$time)
+  wpm$wpm <- c(wpm$wpm, input$typing$wpm)
+})
+```
+
+We add the `frappeCharts` output to our UI
+
+```r
+# ui
+frappeCharts::frappeChartOutput("chart_typing_speed")
+```
+
+and use the following settings to render the `wpm` in "real time"
+
+```r
+# server
+output$chart_typing_speed <- frappeCharts::renderFrappeChart({
+  frappeCharts::frappeChart(
+    data.frame(time = wpm$time, wpm = wpm$wpm),
+    type = "line",
+    title = "Your Typing Speed",
+    is_navigable = FALSE,
+    axisOptions = list(xIsSeries = TRUE),
+    lineOptions = list(regionFill = TRUE)
+  )
+})
+```