add input that returns visible items; fixes #22

NEWS.md

@@ -3,6 +3,7 @@
 - **BREAKING CHANGE** API functions now work in shiny modules without having to specify the namespace. This means that if you previously explicitly used a namespace when calling API functions, you need to remove the namespace function (#90)
 - Add `timezone` parameter to `timevis()` - supports showing the timeline in a different timezone than your local machine (#67)
 - Add `setCustomTime()` and `setCurrentTime()` functions (#20)
+- Add `<timeline>_visible` Shiny input that sends the items that are currently visible in the timeline to Shiny as an input (#22)
 - Fixed bug: using `setSelection()` did not trigger the Shiny selected input (#82)
 - Add documentation about how to add custom style to timevis (#45)
 - Add documentation about how to use BCE dates (#99)

R/timevis.R

@@ -156,6 +156,8 @@
 #'   containing the minimum and maximum dates currently visible in the timeline.
 #'   The input is updated every time the viewable window of dates is updated
 #'   (by zooming or moving the window).
+#'   \item{\strong{\code{input$mytime_visible}}} - will return a list of IDs of items currently
+#'   visible in the timeline.
 #' }
 #' All four inputs will return a value upon initialization of the timeline and
 #' every time the corresponding value is updated.

README.md

@@ -273,6 +273,8 @@ input variables will be available:
     the minimum and maximum dates currently visible in the timeline. The
     input is updated every time the viewable window of dates is updated
     (by zooming or moving the window).
+  - **input$mytime\_visible** - will return a list of IDs of items
+    currently visible in the timeline.
 
 <h2 id="sponsors">
 

inst/example/server.R

@@ -35,6 +35,9 @@ function(input, output, session) {
     timevis(dataBasic, options = config)
   })
 
+  output$visible <- renderText(
+    paste(input$timelineInteractive_visible, collapse = " ")
+  )
   output$selected <- renderText(
     paste(input$timelineInteractive_selected, collapse = " ")
   )

inst/example/ui.R

@@ -147,7 +147,9 @@ fluidPage(
              div(tags$strong("Visible window:"),
                  textOutput("window", inline = TRUE)),
              div(tags$strong("Selected items:"),
-                 textOutput("selected", inline = TRUE))
+                 textOutput("selected", inline = TRUE)),
+             div(tags$strong("Visible items:"),
+                 textOutput("visible", inline = TRUE)),
            )
         )
       )

inst/example/www/help.md

@@ -226,6 +226,8 @@ input variables will be available:
     the minimum and maximum dates currently visible in the timeline. The
     input is updated every time the viewable window of dates is updated
     (by zooming or moving the window).
+  - **input$mytime\_visible** - will return a list of IDs of items currently
+    visible in the timeline.
 
 <h2 id="sponsors">
 

inst/htmlwidgets/timevis.js

@@ -92,6 +92,18 @@ HTMLWidgets.widget({
               elementId + "_ids",
               timeline.itemsData.getIds()
             );
+
+            // Visible items have changed
+            var sendShinyVisible = function() {
+              Shiny.onInputChange(
+                elementId + "_visible",
+                timeline.getVisibleItems()
+              );
+            };
+            timeline.on('rangechanged', sendShinyVisible);
+            timeline.itemsData.on('add', sendShinyVisible);
+            timeline.itemsData.on('remove', sendShinyVisible);
+            setTimeout(sendShinyVisible, 0);
           }
         }
 

vignettes/timevis.Rmd

@@ -188,6 +188,7 @@ It is possible to retrieve data from a timeline in a Shiny app. When a timeline
 - **input$mytime_ids** - will return the IDs (a vector) of all the items in the timeline. The input is updated every time an item is added or removed from the timeline.
 - **input$mytime_selected** - will return the IDs (a vector) of the selected items in the timeline. The input is updated every time an item is selected or unselected by the user. Note that this will not get updated if an item is selected programmatically using the API functions.
 - **input$mytime_window** - will return a 2-element vector containing the minimum and maximum dates currently visible in the timeline. The input is updated every time the viewable window of dates is updated (by zooming or moving the window).
+- **input$mytime_visible** - will return a list of IDs of items currently visible in the timeline.
 
 <h2 id="sponsors">Sponsors 🏆</h2>