vue tree with d3horizon in R

advanced (probably improper and not best practice) code to combine vuejs Element tree with R/d3.js htmlwidget d3horizonR

differs from previous example since horizon rendered at each depth

Code

library(htmltools)
library(vueR)
library(d3horizonR)
library(d3r)
library(dplyr)
library(tibble)

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

#make some random treemap data
rhd <- treemap::random.hierarchical.data()

rhd_tree <- rhd %>%
  treemap::treemap(
    index = c("index1", "index2", "index3"),
    vSize = "x"
  ) %>%
  {tbl_df(.$tm)} %>%
  mutate(dat = lapply(index1, function(x) {cumprod(1 + runif(365, -0.05, 0.05)) - 1}))

tl_tree <- tagList(
  tags$div(
    id = "app",
    tag(
      "el-tree",
      list(
        "ref" = "mytree",
        ":data" = "data.children",
        ":props" = "defaultProps",
        "show-checkbox" = NA,
        ":render-content" = "renderContent"
      )
    )
  ),
  tags$script(HTML(
    sprintf(
"
function makeHorizon() {
  var hzw = HTMLWidgets.widgets.filter(function(w) {return w.name === 'd3horizon'})[0];
  Array.prototype.forEach.call(
    this.$el.querySelectorAll('.horizoncontainer'),
    function(d) {
      var instance = hzw.initialize(d);
      if(d.__data__) {
        instance.renderValue({data: d.__data__, options:{width:200, height:35}});
        d.querySelector('.horizon').style.display = 'inherit';
        d.querySelector('canvas').style.verticalAlign = 'middle';
      }
    }
  )
}
var app = new Vue({
  el: '#app',
  data: {
    data:%s,
    defaultProps: {
    'children': 'children',
    'label': 'name'
    }
  },
  methods: {
    renderContent: function (createElement, x) {
      return createElement('div',
        {style: {display: 'inline'}},
        [
          createElement('span', {style: {borderColor: x.data.color, borderStyle: 'solid', borderWidth: '0px 0px 0px 10px'}}, x.data.name),
          createElement('div', {class: 'horizoncontainer', style: {display:'inline'}, domProps: {'__data__': [x.data.dat]}} )
        ]
      )
    }
  },
  mounted: makeHorizon,
  watch: {
    data: {
      handler: function(newVal, oldVal) {
        this.$nextTick(makeHorizon);
      },
      deep: true
    }
  }
})
",
rhd_tree %>%
  select(index1:index3, vSize, color, dat) %>%
  rename(size = vSize) %>%
  d3_nest(
    value_cols = c("size", "color", "dat")
  )
)
  )),
  html_dependency_vue(),
  element,
  htmlwidgets::getDependency("d3horizon", "d3horizonR")
)

browsable(
  tl_tree
)