vue element components (tree) in R

• built in R with htmltools and vueR
• using Vue with element components
• assembled with blockbuilder.org

Just to make sure vueR gets equal treatment with reactR (see example) I thought I should post this quick example of using the very nice element components. vueR is still in its infancy, but I think I am starting to settle on a pattern. Vuejs actually seems to work better than React in my R toolchain/workflow.

example

bl.ock

code

library(htmltools)

#devtools::install_github("timelyportfolio/vueR")
library(vueR)

element <- htmlDependency(
  name = "element",
  version = "1.0.3",
  src = c(href="https://unpkg.com/element-ui/lib"),
  script = "index.js",
  stylesheet = "theme-default/index.css"
)


rhd <- treemap::random.hierarchical.data()
tl_tree <- tagList(
  tags$div(
    id = "app",
    tag(
      "el-tree",
      list(
        ":data" = "data",
        ":props" = "defaultProps",
        "@node-click" = "handleNodeClick"
      )
    )
  ),
  vue(
    list(
      el="#app",
      data = list(
        data = d3r::d3_nest(
          rhd,
          value_cols="x"
        ),
        defaultProps = list(
          'children' = 'children',
          'label' = 'id'
        )
      ),
      methods = list( handleNodeClick = htmlwidgets::JS("function(data){console.log(data)}" ) )
    )
  )
)

browsable(
  attachDependencies(
    tl_tree,
    list(
      element
    )
  )
)