js4shiny/rstudio-conf-2020

Garrick Aden-Buie

@gadenbuie

dataIn <- tibble(
  labels = c("12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"),
  rstudio = seq(10, 80, 10),
  other = runif(8) * 40
)

type <- "line"

labels <- dataIn$labels

dataSeries <- dataIn[, setdiff(names(dataIn), "labels")]

datasets <- list()
for (column in names(dataSeries)) {
  datasets <- c(datasets, list(list(
    name = column,
    type = type,
    values = dataSeries[[column]]
  )))
}

processData <- function(dataIn, type = "line") {
  labels <- dataIn$labels

  dataSeries <- dataIn[, setdiff(names(dataIn), "labels")]

  datasets <- list()
  for (column in names(dataSeries)) {
    datasets <- c(datasets, list(list(
      name = column,
      type = type,
      values = dataSeries[[column]]
    )))
  }

  list(
    labels = labels,
    datasets = datasets
  )
}

Garrick Aden-Buie

@gadenbuie

# R/frappeChart.R
frappeChart <- function(data, type = "line", width = NULL, height = NULL, elementId = NULL) {

  # forward options using x
  x = list(
    data = processData(data, type)
  )

  # create widget
  htmlwidgets::createWidget(
    name = 'frappeChart',
    x,
    width = width,
    height = height,
    package = 'frappeCharts',
    elementId = elementId
  )
}

processData <- function(dataIn, type = "line") {
  labels <- dataIn$labels

  dataSeries <- dataIn[, setdiff(names(dataIn), "labels")]

  datasets <- list()
  for (column in names(dataSeries)) {
    datasets <- c(datasets, list(list(
      name = column,
      type = type,
      values = dataSeries[[column]]
    )))
  }

  list(
    labels = labels,
    datasets = datasets
  )
}

---
title: HTML Widgets Rock
output: js4shiny::html_document_plain
---

```{r, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{r}
data <- tibble::tibble(
  labels = c("12am-3am", "3am-6pm", "6am-9am", "9am-12am", "12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"),
  rstudio = seq(10, 80, 10),
  other = runif(8) * 40
)

frappeCharts::frappeChart(data)
```

renderValue: function(x) {

        console.log(el.id)

        // TODO: code to render the widget, e.g.
        let chart = new frappe.Chart(el, {
          title: 'rstudio::conf is the best',
          data: x.data,
          type: 'line',
          height: 250,
          width: 500
        })

      }

Garrick Aden-Buie

@gadenbuie

frappeChart <- function(data, type = "line", is_navigable = TRUE, width = NULL, height = NULL, elementId = NULL) {

  # forward options using x
  x = list(
    data = processData(data, type),
    isNavigable = is_navigable
  )

  # create widget
  htmlwidgets::createWidget(
    name = 'frappeChart',
    x,
    width = width,
    height = height,
    package = 'frappeCharts',
    elementId = elementId
  )
}

Garrick Aden-Buie

@gadenbuie

      renderValue: function(x) {

        console.log(el.id)

        // TODO: code to render the widget, e.g.
        let chart = new frappe.Chart(el, {
          title: 'rstudio::conf is the best',
          data: x.data,
          type: x.type,
          height: 250,
          width: 500,
          isNavigable: x.isNavigable
        })

      },

Connie - CEO of Aggregate Genius Inc.

@aggregategenius_twitter

is there somewhere we can grab the entire htmlwidget code, without all these pieces, so we can just continue from here if something is broken

I'm assuming we need this widget for the afternoon?

if not then no worries

ktanizar

@ktanizar

What is the shortcut that Garrick mentioned? The one with Option (in Mac) and Alt (in Windows)? What does it do?

Yue Jiang

@Yue-Jiang

second column, Alt + mouse drag for block uncommenting etc: https://rstudio.com/wp-content/uploads/2016/01/rstudio-IDE-cheatsheet.pdf. can't believe it's been around for so long and i'm only learning about it today...

Connie - CEO of Aggregate Genius Inc.

@aggregategenius_twitter

you aren't alone @Yue-Jiang - I learned about it a few years ago at this conference - it was my biggest time-saving takeaway from a conference of all time!

if we do need the widget for the afternoon, I've reinstalled it using devtools::install_github('gadenbuie/js4shiny-frappeCharts', repos = NULL)

ktanizar

@ktanizar

Thank you @Yue-Jiang and @aggregategenius_twitter !

Riinu Ots

@_Riinu__twitter

What's the framework/extension that makes the arrows proper again? And Garrick's syntax highlighting is popping too, how do I get my RStudio to look like this :D

Nick Strayer

@nstrayer

R2D3 Section links:

Slides: http://nickstrayer.me/js4shiny_r2d3/slides/
Repo: https://github.com/nstrayer/js4shiny_r2d3

Adrian Perez

@jesadrperez

It works for more than uncommenting! Like editing coped and pasted data from the web.

Josh Goldberg

@GoldbergData

Is @gadenbuie new code in the repo? What is the link?

Tiffany Pang

@tiffanyp03

@GoldbergData https://github.com/gadenbuie/js4shiny-frappeCharts

david🤓

@dwhdai_twitter

@cpsievert_twitter is plotly a big htmlwidget around the plotly.js package?

Garrick Aden-Buie

@gadenbuie

I put the project we built together in the workshop repo: https://github.com/rstudio-conf-2020/js-for-shiny/tree/master/materials/frappeCharts

@_Riinu__twitter I'm using the Hasklig font. You can download it here. It has quite a few cool characters in it https://github.com/i-tu/Hasklig/

And the RStudio theme I'm using is from {rsthemes} -- it's a package that I've written that has a few themes. The one I'm using here is "Github" because it's easier to see but my daily driver is "Oceanic Next" https://github.com/gadenbuie/rsthemes

Stephen Synchronicity

@yogat3ch

Is anyone else only getting 2-3 kb/s bandwidth right now?

Garrick Aden-Buie

@gadenbuie

https://github.com/colinfay/shinynotifyjs

Liz Roten

@eroten

you do need to install the golem package for the template to show up when creating a new project

Garrick Aden-Buie

@gadenbuie

download.file("https://rawgit.com/notifyjs/notifyjs/master/dist/notify.js", "inst/app/www/notify.js")

@eroten If you installed the js4shiny package with dependencies = TRUE, then it also installed golem for you

Adrian Perez

@jesadrperez

Can we use a JS library that is built with another framework other than JQuery?

Garrick Aden-Buie

@gadenbuie

But yes, you need to have golem installed for that option to appear

@jesadrperez Yes! Frappe Charts isn't based on jQuery, for example

@jesadrperez oh wait, I re-read your question ... and if you want to use other frameworks it's much more complicated

There is a really cool project to use React with R that's worth checking out: https://react-r.github.io/reactR/index.html

Adrian Perez

@jesadrperez

@gadenbuie I think your first answer was correct. I'm not interested in using something like React in shiny.

Hunter Glanz

@hglanz

will the content/history of this whole chat over these two days be accessible after the workshop or be stored and accessible somewhere after the workshop?

I would very much appreciate this ^ :)

Adrian Perez

@jesadrperez

To play off my last question, can we build widgets based on Bootstrap 4?

Garrick Aden-Buie

@gadenbuie

We're going to use a version of frappeCharts() that I've prepared in the next session, so please run this code ahead of time

devtools::install_github("gadenbuie/js4shiny-frappeCharts@pkg")

Leonardo Collado-Torres

@lcolladotor

@ColinFay I got lost at https://github.com/ColinFay/shinynotifyjs#calling-custom-handler Hm... were we supposed to edit the R/app_server.R file? I tried

#' @import shiny
app_server <- function(input, output,session) {
  # List the first level callModules here
    session$sendCustomMessage("fun", arg)
}

But that lead me to an error when running dev/run_dev.R(Error in writeImpl: Text to be written must be a length-one character vector)

Leonardo Collado-Torres

@lcolladotor

I see that it gets more complicated at https://github.com/ColinFay/notifyjsexample/blob/master/R/mod_my_first_module.R :P

Adrian Perez

@jesadrperez

in case you are lost

library(shiny)
library(htmltools)

typingSpeedInput <- function(inputId, label, placeholder = NULL) {
  div(
    class = "form-group typing-speed",
    tags$label(class = "control-label", `for` = inputId, label),
    tags$textarea(id = inputId, class = "form-control", placeholder = placeholder)
  )
}


ui <- fluidPage(
  typingSpeedInput("typing", "Type here ..."),
  verbatimTextOutput("debug")
)

server <- function(input, output, session) {
  output$debug <- renderPrint(input$typing)
}

shinyApp(ui, server)

Stephen Synchronicity

@yogat3ch

Anyone know why the snippet would not work (it is installed, and the file type is set to Javascript)

Nevermind, it doesn't prompt, and the expand shortcut is now Tab

(Rather than Shift+Tab)

Garrick Aden-Buie

@gadenbuie

bit.ly/js4shiny-checkbox

Garrick Aden-Buie

@gadenbuie

htmltools::htmlDependency(
      name = "typing-speed",
      version = "0.0.1",
      src = ".",
      script = "typing.js",
      all_files = FALSE
    )

Garrick Aden-Buie

@gadenbuie

let nWord = el.value.split(' ').length

Sean Raffuse

@raffscallion

Thanks!

Where communities thrive

People

Repo info

Activity

R2D3 Section links: