layout ggplots in a table

.gitignore

@@ -10,3 +10,4 @@
 *ANIMINT_TEST_FOO
 *pids.txt
 *~
+test-renderer1-knit-print.R

R/theme-elements.r

@@ -282,7 +282,10 @@ el_def <- function(class = NULL, inherit = NULL, description = NULL) {
   plot.caption        = el_def("element_text", "title"),
   plot.margin         = el_def("margin"),
 
-  aspect.ratio        = el_def("character")
+  aspect.ratio        = el_def("character"),
+
+  row                 = el_def("character"),
+  col                 = el_def("character")
 )
 
 
@@ -297,6 +300,8 @@ el_def <- function(class = NULL, inherit = NULL, description = NULL) {
 # @param el an element
 # @param elname the name of the element
 validate_element <- function(el, elname) {
+  #print(el)
+  #print(elname)
   eldef <- .element_tree[[elname]]
 
   if (is.null(eldef)) {

R/z_animint.R

@@ -37,7 +37,7 @@ parsePlot <- function(meta, plot, plot.name){
   ## Now ggplot specifies panel.margin in 'pt' instead of 'lines'
   plot.info$panel_margin_lines <- pt.to.lines(theme.pars$panel.margin)
 
-  ## No legend if theme(legend.postion="none").
+  ## No legend if theme(legend.position="none").
   plot.info$legend <- if(theme.pars$legend.position != "none"){
     getLegendList(built)
   }
@@ -103,7 +103,9 @@ parsePlot <- function(meta, plot, plot.name){
   # extract minor grid lines
   plot.info$grid_minor <- get_grid(theme.pars$panel.grid.minor, theme.pars,
                                    plot.info, meta, built, major = F)
-
+  theme <- plot_theme(built$plot)
+  plot.info$row <-theme$row
+  plot.info$col <-theme$col
   ## Flip labels if coords are flipped - transform does not take care
   ## of this. Do this BEFORE checking if it is blank or not, so that
   ## individual axes can be hidden appropriately, e.g. #1.
@@ -249,6 +251,7 @@ storeLayer <- function(meta, g, g.data.varied){
 animint2dir <- function(plot.list, out.dir = NULL,
                         json.file = "plot.json", open.browser = interactive(),
                         css.file = "") {
+
   if(is.null(out.dir)){
     out.dir <- tempfile()
   }
@@ -359,6 +362,7 @@ animint2dir <- function(plot.list, out.dir = NULL,
     if(is.ggplot(p)){
       ## If plot is correct, save to meta for further processing
       parsed_info <- parsePlot(meta, p, list.name) # calls ggplot_build.
+      #print(parsed_info$plot.info)
       AllPlotsInfo[[list.name]] <- parsed_info$plot.info
       ggplot.list[[list.name]]$ggplot <- parsed_info$ggplot
       ggplot.list[[list.name]]$built <- parsed_info$built
@@ -638,7 +642,7 @@ animint2dir <- function(plot.list, out.dir = NULL,
       stop("missing first selector variable")
     }
   }
-
+  
   meta$plots <- AllPlotsInfo
   meta$time <- AnimationInfo$time
   meta$timeValues <- AnimationInfo$timeValues
@@ -690,6 +694,7 @@ getLegendList <- function(plistextra){
   position <- theme$legend.position
   text <- theme$legend.text
   title <- theme$legend.title
+  #print(theme$row)
   # by default, guide boxes are vertically aligned
   if(is.null(theme$legend.box)) theme$legend.box <- "vertical" else theme$legend.box
 

helper-functions2.R

@@ -0,0 +1,19 @@
+sendKey <- function(key, code, keyCode) {
+  remDr$Input$dispatchKeyEvent(type = "keyDown", key = key, code = code, windowsVirtualKeyCode = keyCode, nativeVirtualKeyCode = keyCode)
+  remDr$Input$dispatchKeyEvent(type = "keyUp", key = key, code = code, windowsVirtualKeyCode = keyCode, nativeVirtualKeyCode = keyCode)
+}
+
+clickID <- function(...){
+  v <- c(...)
+  stopifnot(length(v) == 1)
+  runtime_evaluate(script=sprintf("document.getElementById('%s').dispatchEvent(new CustomEvent('click'))", as.character(v)))
+}
+
+runtime_evaluate <- function(script=NULL,return.value=FALSE){
+  eval.result<- remDr$Runtime$evaluate(script,returnByValue = TRUE)
+  if (return.value){
+    eval.result$result$value
+  }else{
+    eval.result
+  }
+}

inst/htmljs/animint.js

@@ -4,8 +4,15 @@
 //   var plot = new animint("#plot","path/to/plot.json");
 // </script>
 // Constructor for animint Object.
-var animint = function (to_select, json_file) {
 
+var animint = function (to_select, json_file) {
+  //console.log(json_file)
+  fetch(json_file)
+  .then(response => response.json())
+  .then(data => {
+    console.log(data); // Prints the entire JSON data
+  })
+  .catch(error => console.error('Error fetching the JSON file:', error));
   var default_axis_px = 16;
 
    function wait_until_then(timeout, condFun, readyFun) {
@@ -214,11 +221,14 @@ var animint = function (to_select, json_file) {
     // Save this geom and load it!
     update_geom(g_name, null);
   };
-  var add_plot = function (p_name, p_info) {
+
+
+  var add_plot = function (p_name, p_info,outer_table) {
     // Each plot may have one or more legends. To make space for the
     // legends, we put each plot in a table with one row and two
     // columns: tdLeft and tdRight.
-    var plot_table = element.append("table").style("display", "inline-block");
+
+    var plot_table = outer_table.append("table").style("display", "inline-block");
     var plot_tr = plot_table.append("tr");
     var tdLeft = plot_tr.append("td");
     var tdRight = plot_tr.append("td").attr("class", p_name+"_legend");
@@ -1066,6 +1076,7 @@ var animint = function (to_select, json_file) {
     }else{
       get_stroke_width = function(d){
 	return stroke_width;
+
       };
     }
 
@@ -2019,13 +2030,107 @@ var animint = function (to_select, json_file) {
       d3.select("title").text(response.title);
     }
     // Add plots.
+
+
+  var check_svg = function (row_number,col_number) {
+    var id="#row"+row_number+"col"+col_number
+    var parentElement= d3.select(id)
+    if (!parentElement.select('svg').empty()) {
+      return true
+    }else{
+      return false
+    }
+  }
+
+
+  for (var p_name in response.plots) {
+    if ('row' in response.plots[p_name] && 'col' in response.plots[p_name]) {
+      user_defined_layout= true
+}
+if ('row' in response.plots[p_name] && !('col' in response.plots[p_name])){
+  throw new Error("You forgot to add column in "+response.plots[p_name].title+" plot.");
+}
+if ('col' in response.plots[p_name] && !('row'in response.plots[p_name])){
+  throw new Error("You forgot to add row in "+response.plots[p_name].title+" plot.");
+}
+  }
+
+  var maximum_row= 0
+  var maximum_column= 0
+  var construct_outer_table = function () {
+  var count=0
+
+  var find_maximum_dimensions = function () {
+
+
     for (var p_name in response.plots) {
-      add_plot(p_name, response.plots[p_name]);
+      count=count+1
+    if (response.plots[p_name].row>maximum_row){
+      maximum_row=response.plots[p_name].row
+    }
+    if (response.plots[p_name].col>maximum_column){
+      maximum_column=response.plots[p_name].col
+    }
+  }
+   }
+  find_maximum_dimensions()
+    var count_dimensions = Math.ceil(Math.sqrt(count))-1;
+    var outer_table = element.append("table").attr("id", "outerTable").style("width", "1500px").style("border", "1px solid white");
+    maximum_row=Math.max(maximum_row,count_dimensions)
+    maximum_column=Math.max(maximum_column,count_dimensions)
+    //console.log(maximum_row)
+    //console.log(maximum_column)
+    for (var i = 0; i <=maximum_row; i++) {
+        var current_row = outer_table.append("tr").style("border", "1px solid white").style("height", "500px");
+        for (var j = 0; j <=maximum_column; j++){
+            current_row.append("td").attr("id", "row"+i+"col"+j).style("border", "1px solid white").style("width", "500px");
+        }
+    }
+
+  return outer_table;
+  }
+  var outer_table=construct_outer_table();
+
+  for (var p_name in response.plots) {
+    if ('row' in response.plots[p_name] && 'col' in response.plots[p_name]) {
+      var id= "#row"+response.plots[p_name].row+"col"+response.plots[p_name].col
+      var cell= d3.select(id);
+
+      add_plot(p_name, response.plots[p_name],cell);
       add_legend(p_name, response.plots[p_name]);
       // Append style sheet to document head.
       css.appendChild(document.createTextNode(styles.join(" ")));
       document.head.appendChild(css);
     }
+  }
+      var pointer_row=0
+      var pointer_column=0
+      for (var p_name in response.plots) {
+        if (!('row' in response.plots[p_name])){
+          while (check_svg(pointer_row,pointer_column)) {
+            pointer_column=pointer_column+1
+            if (pointer_column>maximum_column){
+              pointer_column=0
+              pointer_row=pointer_row+1
+            }
+            }
+      var id= "#row"+pointer_row+"col"+pointer_column
+      //console.log(id)
+      var cell= d3.select(id);
+
+      add_plot(p_name, response.plots[p_name],cell);
+      add_legend(p_name, response.plots[p_name]);
+      // Append style sheet to document head.
+      css.appendChild(document.createTextNode(styles.join(" ")));
+      document.head.appendChild(css);
+
+}
+ }
+
+
+
+
+
     // Then add selectors and start downloading the first data subset.
     for (var s_name in response.selectors) {
       add_selector(s_name, response.selectors[s_name]);