From f1ebe2f75e3868c82454ece551234c2c7d40fbe7 Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Sat, 5 Mar 2016 07:47:45 -0600 Subject: [PATCH 1/4] namespace css --- inst/htmlwidgets/lib/radviz/radviz.css | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/inst/htmlwidgets/lib/radviz/radviz.css b/inst/htmlwidgets/lib/radviz/radviz.css index a990ea2..7154425 100644 --- a/inst/htmlwidgets/lib/radviz/radviz.css +++ b/inst/htmlwidgets/lib/radviz/radviz.css @@ -1,45 +1,42 @@ -body { - font-family: sans-serif; -} -.panel { +.radviz .panel { stroke: black; fill: white; } -.bg { +.radviz .bg { fill: white; } -.link { +.radviz .link { stroke: silver; stroke-opacity: 0.05 } -.dot { +.radviz dot { fill-opacity: 0.5; } -.label-node { +.radviz label-node { fill: silver; } -.active { +.radviz .active { stroke: black; } -.label { +.radviz .label { fill: gray; pointer-events: none; } -#tooltip { +.radviz-tooltip { font-size: 12px; margin-top: 22px; background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; } -#tooltip h1 { +.radviz-tooltip h1 { font-size: 14px; margin: 0; } \ No newline at end of file From eab225cf94a7fba3166a20b3cccac59672f0b465 Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Sat, 5 Mar 2016 07:48:10 -0600 Subject: [PATCH 2/4] change tooltip to class instead of id; will submit pull to source --- inst/htmlwidgets/lib/radviz/radviz-component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inst/htmlwidgets/lib/radviz/radviz-component.js b/inst/htmlwidgets/lib/radviz/radviz-component.js index 6c47de9..25b1af5 100644 --- a/inst/htmlwidgets/lib/radviz/radviz-component.js +++ b/inst/htmlwidgets/lib/radviz/radviz-component.js @@ -220,7 +220,7 @@ var radvizComponent = function() { var tooltipContainer = d3.select(config.el) .append('div') .attr({ - id: 'radviz-tooltip' + class: 'radviz-tooltip' }); var tooltip = tooltipComponent(tooltipContainer.node()); From 06998edd80ab3bd74bf439a2b493b079c02135c7 Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Sat, 5 Mar 2016 07:48:24 -0600 Subject: [PATCH 3/4] add test for multiple tooltips --- inst/examples/testmultiple_radviz.Rmd | 31 +++++ inst/examples/testmultiple_radviz.html | 123 ++++++++++++++++++ inst/examples/testmultiple_radviz_broken.html | 123 ++++++++++++++++++ 3 files changed, 277 insertions(+) create mode 100644 inst/examples/testmultiple_radviz.Rmd create mode 100644 inst/examples/testmultiple_radviz.html create mode 100644 inst/examples/testmultiple_radviz_broken.html diff --git a/inst/examples/testmultiple_radviz.Rmd b/inst/examples/testmultiple_radviz.Rmd new file mode 100644 index 0000000..c8766ee --- /dev/null +++ b/inst/examples/testmultiple_radviz.Rmd @@ -0,0 +1,31 @@ +--- +title: "radviz_testmultiple" +author: "Kent Russell" +date: "March 5, 2016" +output: html_document +--- + +```{r setup, include=FALSE} +knitr::opts_chunk$set(echo = TRUE) +``` + +```{r} +library(htmltools) +library(radviz) + +tagList( + lapply( + 1:2, + function(x){ + radviz(iris, diameter=600, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=600, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + } + ) +) +``` diff --git a/inst/examples/testmultiple_radviz.html b/inst/examples/testmultiple_radviz.html new file mode 100644 index 0000000..f3fbe18 --- /dev/null +++ b/inst/examples/testmultiple_radviz.html @@ -0,0 +1,123 @@ + + + + + + + + + + + + + +radviz_testmultiple + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
library(htmltools)
+
## Warning: package 'htmltools' was built under R version 3.2.3
+
library(radviz)
+
+tagList(
+  lapply(
+    1:2,
+    function(x){
+      radviz(iris, diameter=600, margin=100, 
+         use_repulsion=TRUE, draw_links=TRUE, 
+         width=600, height=500) %>% 
+    add_dimensions(c('Sepal.Length', 'Sepal.Width', 
+                     'Petal.Length', 'Petal.Width')) %>% 
+    add_color("Species") %>% 
+    add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }")
+    }
+  )
+)
+

+ +
+

+ + +
+ + + + + + + + diff --git a/inst/examples/testmultiple_radviz_broken.html b/inst/examples/testmultiple_radviz_broken.html new file mode 100644 index 0000000..3e7415b --- /dev/null +++ b/inst/examples/testmultiple_radviz_broken.html @@ -0,0 +1,123 @@ + + + + + + + + + + + + + +radviz_testmultiple + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +
library(htmltools)
+
## Warning: package 'htmltools' was built under R version 3.2.3
+
library(radviz)
+
+tagList(
+  lapply(
+    1:2,
+    function(x){
+      radviz(iris, diameter=600, margin=100, 
+         use_repulsion=TRUE, draw_links=TRUE, 
+         width=600, height=500) %>% 
+    add_dimensions(c('Sepal.Length', 'Sepal.Width', 
+                     'Petal.Length', 'Petal.Width')) %>% 
+    add_color("Species") %>% 
+    add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }")
+    }
+  )
+)
+

+ +
+

+ + +
+ + + + + + + + From f23597413f015b166f92f8288c6600ed9b8ac130 Mon Sep 17 00:00:00 2001 From: timelyportfolio Date: Sat, 5 Mar 2016 08:02:37 -0600 Subject: [PATCH 4/4] change position:relative for htmlwidget div container so tooltip work --- inst/examples/test_multiple_shiny.R | 44 +++++++ inst/examples/testmultiple_radviz.html | 23 ++-- inst/examples/testmultiple_radviz_broken.html | 123 ------------------ inst/htmlwidgets/radviz.js | 11 ++ 4 files changed, 67 insertions(+), 134 deletions(-) create mode 100644 inst/examples/test_multiple_shiny.R delete mode 100644 inst/examples/testmultiple_radviz_broken.html diff --git a/inst/examples/test_multiple_shiny.R b/inst/examples/test_multiple_shiny.R new file mode 100644 index 0000000..fbb4187 --- /dev/null +++ b/inst/examples/test_multiple_shiny.R @@ -0,0 +1,44 @@ +# silly test to check multiple radviz on a page +# and make sure tooltips work as expected + +library(shiny) +library(radviz) + +ui <- fluidPage( + fluidRow( + column( + width = 6, + radvizOutput("radviz1") + ), + column( + width = 6, + radvizOutput("radviz2") + ) + ) +) + +server <- function(input,output,session){ + output$radviz1 <- renderRadviz({ + radviz(iris, diameter=400, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=400, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + }) + + output$radviz2 <- renderRadviz({ + radviz(iris, diameter=400, margin=100, + use_repulsion=TRUE, draw_links=TRUE, + width=400, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + }) +} + +shinyApp(ui,server) diff --git a/inst/examples/testmultiple_radviz.html b/inst/examples/testmultiple_radviz.html index f3fbe18..a423091 100644 --- a/inst/examples/testmultiple_radviz.html +++ b/inst/examples/testmultiple_radviz.html @@ -21,11 +21,11 @@ - + - + @@ -84,18 +84,19 @@

March 5, 2016

function(x){ radviz(iris, diameter=600, margin=100, use_repulsion=TRUE, draw_links=TRUE, - width=600, height=500) %>% - add_dimensions(c('Sepal.Length', 'Sepal.Width', - 'Petal.Length', 'Petal.Width')) %>% - add_color("Species") %>% - add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") + width=600, height=500 + ) %>% + add_dimensions(c('Sepal.Length', 'Sepal.Width', + 'Petal.Length', 'Petal.Width')) %>% + add_color("Species") %>% + add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }") } ) ) -

- -
-

+

+ +
+

diff --git a/inst/examples/testmultiple_radviz_broken.html b/inst/examples/testmultiple_radviz_broken.html deleted file mode 100644 index 3e7415b..0000000 --- a/inst/examples/testmultiple_radviz_broken.html +++ /dev/null @@ -1,123 +0,0 @@ - - - - - - - - - - - - - -radviz_testmultiple - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - -
library(htmltools)
-
## Warning: package 'htmltools' was built under R version 3.2.3
-
library(radviz)
-
-tagList(
-  lapply(
-    1:2,
-    function(x){
-      radviz(iris, diameter=600, margin=100, 
-         use_repulsion=TRUE, draw_links=TRUE, 
-         width=600, height=500) %>% 
-    add_dimensions(c('Sepal.Length', 'Sepal.Width', 
-                     'Petal.Length', 'Petal.Width')) %>% 
-    add_color("Species") %>% 
-    add_tooltip("function(d){ return 'Petal width: ' + d['Petal.Length']; }")
-    }
-  )
-)
-

- -
-

- - -
- - - - - - - - diff --git a/inst/htmlwidgets/radviz.js b/inst/htmlwidgets/radviz.js index 0084bd4..68011c3 100644 --- a/inst/htmlwidgets/radviz.js +++ b/inst/htmlwidgets/radviz.js @@ -10,6 +10,17 @@ HTMLWidgets.widget({ return { renderValue: function(x) { + + /* fix multiple tooltip problem + for standalone we will need to explicitly + assign position : relative for our + htmlwidget container div + since radviz tooltip needs absolute positioning + + I tested in tagList, rmarkdown, and shiny + */ + el.style.position = "relative"; + var data = HTMLWidgets.dataframeToD3(x.data);