jpmarindiaz / isotope

13 stars 4 forks source link

Idea #3

Open jbkunst opened 7 years ago

jbkunst commented 7 years ago

Hi @jpmarindiaz

First I want to know if you have time to maintain this widget :D.

If the answer is yes I came with an idea: How a about to make isotope2 widget to allow: htmlwidgets inside, fluid behavior, for example I have the idea would be change the type of template argument, use a function using tags (htmltools package) instead of text. For example:

library(htmltools)

# auxiliar functions
div <- tags$div()
p <- tags$p()

# template
tmp <- function(row) {

  div(
    style = "border: 1px solid grey; margin:5px; padding:5px",
    div(
      class = "container",
      img(
        style = "width:125px; height: 125px; margin:auto",
        src = row$foto
        ),
      p("Profesion:", row$profesiones, ", Genero: ", row$genero)
      )
    )
}

d <- read.csv(system.file("data/candidatos.csv",package="isotope"), stringsAsFactors = FALSE)

library(purrr)

# auxiliar/internal function, put in a div all divs 
# and then send to the html.
get_divs <- function(.d, .f) {
  div(class = "divcontainer", tagList(by_row(.d, .f)$.out))
}

get_divs(d, tmp)

# An think with some code this could work

library(highcharter)
d2 <- data_frame(name = letters[1:10]) %>% 
  group_by(name) %>% 
  do(chart = hcspark(runif(100))) %>% 
  ungroup() %>% 
  mutate(value_to_order = runif(10))

# the charts
# d2$chart

tmp2 <- function(row) {
  div(
    class = "container",
    tags$h3(row$name),
    row$chart,
    p(row$value_to_order)
  )
}
get_divs(d2, tmp2)

Then:

iso <- isotope2(d, tmp = tmp, ..., etc)

Then add dependencies using htmlDependencies, etc.

jbkunst commented 7 years ago

To get something like this https://wpivis.github.io/hindsight/demos/metafilter/

jpmarindiaz commented 7 years ago

Great idea. I will get back to work on this widget in about two weeks and try to move forward with hte html templates you propose. It would be great to implement it with crosstalk https://github.com/rstudio/crosstalk to accomplish the hovering effect