fdTour: Create an interactive tour of a page.

In alteryx/flightdeck: Interactive Dashboards for Predictive Models

Description

This widget makes it easy to create an interactive tour of the various panels on a page of the dashboard. It relies on the http://introjs.com/.

Usage

fdTour(steps, options, button = NULL, width = 30, height = 10)

Arguments

steps	list of steps for the tour
options	options for the tour
button	boolean indicating if a tour button should be displayed
width	width of the tour button
height	height of the tour button

Examples

library(flightdeck)
library(htmltools)

#' Example 1
fit <- rpart::rpart(Species ~ ., data = iris)
actual <- iris$Species
predicted <- predict(fit, type = 'class')

## Clicking on the Alteryx title will trigger an interactive tour of the page.
tour = fdTour(list(
  list(intro = 'Decision Tree'),
  list(
    intro = "This panel displays class-wise performance metrics.",
    element = htmlwidgets::JS("document.querySelector('.box')"),
    numberPosition = "top-right",
    tooltipPosition = "right"
  )
), list(), '.logo-lg', width = 90, height = 30)


fdPanelClassificationMetrics(actual, predicted) %>%
  fdPreviewBoard(title = 'Classification Performance', tour, wrap = 'rowbox')

tourButton <- tags$li(
  tags$a(id = 'tour', href = "#", fdIcon('play'), 'Tour')
)

tour = fdTour(list(
  list(intro = 'Decision Tree'),
  list(
    intro = "This panel displays class-wise performance metrics.",
    element = htmlwidgets::JS("document.querySelector('.box')"),
    numberPosition = "top-right",
    tooltipPosition = "right"
  )
), list(), '#tour', width = 90, height = 30)

fdBoard(
  fdHeader(title = 'Decision Tree', tourButton), 
  fdSidebar(), 
  fdBody(
    fdRowBox(width = 12, fdPanelClassificationMetrics(actual, predicted)), 
    tour
  )
)

alteryx/flightdeck documentation built on May 12, 2019, 1:39 a.m.