Vignette shiny-fluent.html does not include required packages in documentation and leaflet code broken

[cddesja]

Code example

If a user of shiny.fluent works through the vignette here then they need to guess what the packages are that need to be installed to follow along with the vignette and will encounter code that needs to be updated in leaflet. At the top of the page, it mentions just two dependencies shiny and shiny.fluent, however, a user likely needs to install and load the following too:

install.packages(c("leaflet", "tibble", "glue", "plotly"))

library(leaflet)
library(tibble)
library(glue)
library(plotly)

This should be added to the top of the vignette to help novice users. A user may need to install $>$ from magrittr, but it looks like one comes with leaflet. It might be useful to update this to just using the native R pipe, |> as this works fine.

Also, this line:

addProviderTiles(providers$Stamen.TonerLite, options = providerTileOptions(noWrap = TRUE))

I believe needs to be updated to this:

addProviderTiles(providers$Stadia.StamenTonerLite, options = providerTileOptions(noWrap = TRUE))

Below is my complete R example that works.

library(shiny)
library(leaflet)
library(shiny.fluent)
library(tibble)
library(glue)
library(plotly)

filters <- Stack(
  tokens = list(childrenGap = 10),
  
  Stack(
    horizontal = TRUE,
    tokens = list(childrenGap = 10),
    DatePicker.shinyInput("fromDate", value = as.Date('2020/01/01'), label = "From date"),
    DatePicker.shinyInput("toDate", value = as.Date('2020/12/31'), label = "To date")
  ),

  Label("Filter by sales reps", className = "my_class"),
  
  NormalPeoplePicker.shinyInput(
    "selectedPeople",
    class = "my_class",
    options = fluentPeople,
    pickerSuggestionsProps = list(
      suggestionsHeaderText = 'Matching people',
      mostRecentlyUsedHeaderText = 'Sales reps',
      noResultsFoundText = 'No results found',
      showRemoveButtons = TRUE
    )
  ),
  Slider.shinyInput("slider",
    value = 0, min = 0, max = 1000000, step = 100000,
    label = "Minimum amount",
    valueFormat = JS("function(x) { return '$' + x}"),
    snapToStep = TRUE
  ),
  Toggle.shinyInput("closedOnly", value = TRUE, label = "Include closed deals only?")
)

details_list_columns <- tibble(
  fieldName = c("rep_name", "date", "deal_amount", "client_name", "city", "is_closed"),
  name = c("Sales rep", "Close date", "Amount", "Client", "City", "Is closed?"),
  key = fieldName)

makeCard <- function(title, content, size = 12, style = "") {
  div(
    class = glue("card ms-depth-8 ms-sm{size} ms-xl{size}"),
    style = style,
    Stack(
      tokens = list(childrenGap = 5),
      Text(variant = "large", title, block = TRUE),
      content
    )
  )
}

ui <- fluentPage(
  tags$style(".card { padding: 28px; margin-bottom: 28px; }"),
  makeCard("Filters", filters, size = 4, style = "max-height: 320px;"),
  makeCard("Deals count", plotlyOutput("plot"), size = 8, style = "max-height: 320px"),
  uiOutput("analysis")
)

server <- function(input, output, session) {

    filtered_deals <- reactive({
    req(input$fromDate)
    selectedPeople <- (
      if (length(input$selectedPeople) > 0) input$selectedPeople
      else fluentPeople$key
    )
    minClosedVal <- if (isTRUE(input$closedOnly)) 1 else 0


    filtered_deals <- fluentSalesDeals |> filter(
        rep_id %in% selectedPeople,
        date >= input$fromDate,
        date <= input$toDate,
        deal_amount >= input$slider,
        is_closed >= minClosedVal
    ) |>
        mutate(is_closed = ifelse(is_closed == 1, "Yes", "No"))

    })

    output$analysis <- renderUI({
        items_list <- if(nrow(filtered_deals()) > 0) {
            DetailsList(items = filtered_deals(), columns = details_list_columns)
        } else {
            p("No matching transactions.")
        }
    
        Stack(
            tokens = list(childrenGap = 10), horizontal = TRUE,
            makeCard("Top results", div(style="max-height: 500px; overflow: auto", items_list)),
            makeCard("Map", leafletOutput("map"))
        )
  })

  output$map <- renderLeaflet({
    points <- cbind(filtered_deals()$LONGITUDE, filtered_deals()$LATITUDE)
    leaflet() |>
      addProviderTiles(providers$Stadia.StamenTonerLite, options = providerTileOptions(noWrap = TRUE)) |>
      addMarkers(data = points)
  })
    
    

  output$plot <- renderPlotly({
    p <- ggplot(filtered_deals(), aes(x = rep_name)) +
      geom_bar(fill = unique(filtered_deals()$color)) +
      ylab("Number of deals") +
      xlab("Sales rep") +
      theme_light()
    ggplotly(p, height = 300)
  })
  
}

shinyApp(ui, server)

Bug description

Using the code as is from the vignette will not allow a user to create the shiny.fluent dashboard.

Expected behavior

A user should be able to copy/paste all code from the vignette to reproduce the final dashboard.

Comments

No response