Open timelyportfolio opened 3 years ago
nice!
I thought it would be fun to use a Vuetify v-select
component to control crosstalk. Here is my first approach.
library(crosstalk)
library(plotly)
library(vueR)
library(htmltools)
mh <- mtcars %>% highlight_key(~cyl)
pl <- mh %>%
plot_ly(
x = ~wt, y = ~mpg, text = ~cyl, mode = "markers+text",
textposition = "top", hoverinfo = "x+y"
) %>%
highlight(on = "plotly_hover", off = "plotly_doubleclick")
browsable(
tagList(
vueR::html_dependency_vue(minified = FALSE),
tags$head(
tags$link(href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css", rel="stylesheet"),
tags$link( href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900", rel="stylesheet"),
tags$link(href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css", rel="stylesheet"),
tags$script(src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js")
),
tag(
"v-app",
list(
id = "app",
tags$div(HTML("<v-select :items = 'cyl' @change = 'updateSelected' v-model= 'selected' multiple chips/>")),
pl,
tags$h3("Filter Handle"),
"{{ filter.filteredKeys ? filter.filteredKeys : 'nothing filtered' }}",
tags$h3("Selection Handle"),
"{{ selection.value ? selection.value : 'nothing selected' }}"
)
),
tags$script(HTML(
sprintf(
"
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
filter: new crosstalk.FilterHandle('%1$s'),
selection: new crosstalk.SelectionHandle('%1$s'),
cyl: %2$s.map(d => d.toString()) // crosstalk keys are strings
}
},
computed: {
selected: function() {return this.selection.value}
},
methods: {
updateSelected: function(val) {
this.selection.set(Array.isArray(val) ? val : [val])
}
}
})
",
mh$groupName(),
jsonlite::toJSON(sort(unique(mh$data()$cyl)),auto_unbox=TRUE)
)
))
)
)
Playing around and here is a quick example. In reality, crosstalk can be subsumed by
Vue
as simply a shared, reactive state mechanism.with crosstalk api
with crosstalk api and plotly
direct (unadvisable)