add support for groups (will add documentation tomorrow); fixes #1

NAMESPACE

@@ -10,6 +10,7 @@ export(removeCustomTime)
 export(removeItem)
 export(renderTimevis)
 export(runExample)
+export(setGroups)
 export(setItems)
 export(setOptions)
 export(setSelection)

R/api.R

@@ -283,6 +283,39 @@ setItems <- function(id, data) {
   callJS(method)
 }
 
+#' Set the groups of a timeline
+#' @param id Timeline id
+#' @param data A dataframe containing the groups data to use.
+#' @examples
+#' if (interactive()) {
+#' library(shiny)
+#' shinyApp(
+#'   ui = fluidPage(
+#'     timevisOutput("timeline"),
+#'     actionButton("btn", "Change group names")
+#'   ),
+#'   server = function(input, output) {
+#'     output$timeline <- renderTimevis(
+#'       timevis(data = data.frame(start = c(Sys.Date(), Sys.Date() + 1),
+#'                          content = c("one", "two"),
+#'                          group = 1:2),
+#'               groups = data.frame(id = 1:2, content = c("G1", "G2")))
+#'
+#'     )
+#'     observeEvent(input$btn, {
+#'       setGroups("timeline",
+#'                data.frame(id = 1:2, content = c("Group 1", "Group 2")))
+#'     })
+#'   }
+#' )
+#' }
+#' @export
+setGroups <- function(id, data) {
+  method <- "setGroups"
+  data <- dataframeToD3(data)
+  callJS(method)
+}
+
 #' Update the configuration options of a timeline
 #' @param id Timeline id
 #' @param options A named list containing updated configuration options to use.

R/timevis.R

@@ -203,7 +203,7 @@
 #'
 #' @seealso \href{http://daattali.com/shiny/timevis-demo/}{Demo Shiny app}
 #' @export
-timevis <- function(data, showZoom = TRUE, zoomFactor = 0.5, fit = TRUE,
+timevis <- function(data, groups, showZoom = TRUE, zoomFactor = 0.5, fit = TRUE,
                     options, width = NULL, height = NULL, elementId = NULL) {
 
   # Validate the input data
@@ -219,6 +219,15 @@ timevis <- function(data, showZoom = TRUE, zoomFactor = 0.5, fit = TRUE,
     stop("timevis: 'data' must contain a 'start' date for each item",
          call. = FALSE)
   }
+  if (!missing(groups) && !is.data.frame(groups)) {
+    stop("timevis: 'groups' must be a data.frame",
+         call. = FALSE)
+  }
+  if (!missing(groups) && nrow(groups) > 0 &&
+      (!"id" %in% colnames(groups) || !"content" %in% colnames(groups) )) {
+    stop("timevis: 'groups' must contain a 'content' and 'id' variables",
+         call. = FALSE)
+  }
   if (!is.bool(showZoom)) {
     stop("timevis: 'showZoom' must be either 'TRUE' or 'FALSE'",
          call. = FALSE)
@@ -240,10 +249,16 @@ timevis <- function(data, showZoom = TRUE, zoomFactor = 0.5, fit = TRUE,
   }
 
   items <- dataframeToD3(data)
+  if (missing(groups)) {
+    groups <- NULL
+  } else {
+    groups <- dataframeToD3(groups)
+  }
 
   # forward options using x
   x = list(
     items = items,
+    groups = groups,
     showZoom = showZoom,
     zoomFactor = zoomFactor,
     fit = fit,

R/utils.R

@@ -14,7 +14,7 @@ is.bool <- function(x) {
 
 # Convert a data.frame to a list of lists (the data format that D3 uses)
 dataframeToD3 <- function(df) {
-  if (missing(df)) {
+  if (missing(df) || is.null(df)) {
     return(list())
   }
   apply(df, 1, function(row) as.list(row[!is.na(row)]))

inst/example/sampleData.R

@@ -50,3 +50,29 @@ dataWC <- data.frame(
     templateWC("final", "Germany", "Argentina", 1, 0)
   )
 )
+
+# Data for groups example
+dataGroups <- data.frame(
+  id = 1:11,
+  content = c("Open", "Open",
+              "Open", "Open", "Half price entry",
+              "Staff meeting", "Open", "Adults only", "Open", "Hot tub closes",
+              "Siesta"),
+  start = c("2016-05-01 07:30:00", "2016-05-01 14:00:00",
+            "2016-05-01 06:00:00", "2016-05-01 14:00:00", "2016-05-01 08:00:00",
+            "2016-05-01 08:00:00", "2016-05-01 08:30:00", "2016-05-01 14:00:00",
+            "2016-05-01 16:00:00", "2016-05-01 19:30:00",
+            "2016-05-01 12:00:00"),
+  end   = c("2016-05-01 12:00:00", "2016-05-01 20:00:00",
+            "2016-05-01 12:00:00", "2016-05-01 22:00:00", "2016-05-01 10:00:00",
+            "2016-05-01 08:30:00", "2016-05-01 12:00:00", "2016-05-01 16:00:00",
+            "2016-05-01 20:00:00", NA,
+            "2016-05-01 14:00:00"),
+  group = c(rep("lib", 2), rep("gym", 3), rep("pool", 5), NA),
+  type = c(rep("range", 9), "point", "background")
+)
+
+groups <- data.frame(
+  id = c("lib", "gym", "pool"),
+  content = c("Library", "Gym", "Pool")
+)

inst/example/server.R

@@ -12,6 +12,10 @@ function(input, output, session) {
     timevis(dataWC)
   })
 
+  output$timelineGroups <- renderTimevis({
+    timevis(data = dataGroups, groups = groups, options = list(editable = TRUE))
+  })
+
   output$timelineCustom <- renderTimevis({
     config <- list(
       editable = TRUE,

inst/example/ui.R

@@ -95,6 +95,16 @@ fluidPage(
       )
     ),
 
+    tabPanel(
+      div(icon("bars"), "Groups"),
+      timevisOutput("timelineGroups"),
+      div(class = "sourcecode",
+          "The exact code for all the timelines in this app is",
+          tags$a(href = "https://github.com/daattali/timevis/tree/master/inst/example",
+                 "on GitHub")
+      )
+    ),
+
     tabPanel(
       div(icon("sliders"), "Fully interactive"),
       fluidRow(

inst/example/www/style.css

@@ -70,6 +70,10 @@ body {
   padding-top: 40px;
 }
 
+.vis-item .vis-item-overflow {
+  overflow: visible;
+}
+
 #samplecode {
   margin: 50px -15px 0;
   padding: 20px 25px;

inst/htmlwidgets/timevis.js

@@ -95,9 +95,10 @@ HTMLWidgets.widget({
           }
         }
 
-        // set the data items
+        // set the data items and groups
         timeline.itemsData.clear();
         timeline.itemsData.add(x.items);
+        timeline.setGroups(x.groups);
 
         // fit the items on the timeline
         if (x.fit) {
@@ -251,6 +252,16 @@ if (HTMLWidgets.shinyMode){
       }
   });
 
+  Shiny.addCustomMessageHandler(
+    "timevis:setGroups", function(message) {
+      var el = document.getElementById(message.id);
+      if (el) {
+        el.timeline.groupsData.clear();
+        var items = message.data;
+        el.timeline.groupsData.add(items);
+      }
+  });
+
   Shiny.addCustomMessageHandler(
     "timevis:setOptions", function(message) {
       var el = document.getElementById(message.id);