Merge branch 'main' into cran_release_0.3.0

DESCRIPTION

@@ -56,10 +56,13 @@ Suggests:
     shinyjs,
     testthat (>= 3.1.7),
     timevis,
-    withr
+    withr,
+    knitr,
+    rmarkdown
 Config/testthat/edition: 3
 Encoding: UTF-8
 Language: en-US
 LazyData: true
 Roxygen: list(markdown = TRUE)
 RoxygenNote: 7.3.1
+VignetteBuilder: knitr

NEWS.md

@@ -14,6 +14,7 @@
 - Updates documentation to use markdown format (#153).
 - Improves SQL injection safeguards via `glue::glue_sql` to generated SQL queries (#34).
 - Show proper error message when no telemetry data is available (#177).
+- Adds how-to guides to site (#179 and #180)
 
 ### Bug Fixes
 

inst/WORDLIST

@@ -1,21 +1,22 @@
-analytics
+Analytics
 Appsilon
+CMD
+JSON
+Javascript
+Podman
+RStudio
+Rhinoverse
+SSL
+ShinyProxy
+UI
+analytics
 appsilon
-avaialable
 cloneable
-CMD
 customizable
 filesystem
 hostname
-INITDB
-Javascript
-mongo
-mongodb
 myreplicaset
 replicaSet
-Rhinoverse
-RStudio
-SSL
+scalable
 ssl
-UI
-URI
+tabset

inst/examples/mssql/README.md

@@ -0,0 +1,19 @@
+# Instrumented app with Microsoft SQL Server backend
+
+This example application uses MS SQL as a provider for data storage.
+
+It is bundled with an example docker container provided by `docker-compose.yml`.
+The database instance has to be running for the application and analytics dashboard to work.
+
+### Requirements
+
+The database needs to be created manually. Chunk below allows to create databse using the `sqlcmd` utility.
+
+```
+CREATE DATABSAE my_db
+GO
+```
+
+The Microsoft ODBC 18 driver has to be installed in the system to use this example.
+
+https://learn.microsoft.com/en-us/sql/connect/odbc/microsoft-odbc-driver-for-sql-server?view=sql-server-ver16&viewFallbackFrom=sql-server-ver18

inst/examples/mssql/docker-compose.yml

@@ -0,0 +1,12 @@
+# Use root/example as user/password credentials
+version: '3.1'
+
+services:
+  mssql:
+    image: mcr.microsoft.com/mssql/server
+    restart: always
+    environment:
+      ACCEPT_EULA: Y
+      MSSQL_SA_PASSWORD: 'my-Secr3t_Password'
+    ports:
+      - 1433:1433

inst/examples/mssql/mssql_analytics.R

@@ -0,0 +1,29 @@
+library(shiny)
+library(shiny.semantic)
+library(semantic.dashboard)
+library(shinyjs)
+library(tidyr)
+library(dplyr)
+library(purrr)
+library(plotly)
+library(timevis)
+library(ggplot2)
+library(mgcv)
+library(config)
+library(DT)
+
+# Please install shiny.telemetry with all dependencies
+library(shiny.telemetry)
+
+# Default storage backend using MariaDB
+data_storage <- DataStorageMSSQLServer$new(
+  user = "sa",
+  password = "my-Secr3t_Password",
+  hostname = "localhost",
+  port = 1433,
+  dbname = "my_db",
+  driver = "ODBC Driver 18 for SQL Server",
+  trust_server_certificate = "YES"
+)
+
+analytics_app(data_storage = data_storage)

inst/examples/mssql/mssql_app.R

@@ -0,0 +1,122 @@
+library(shiny)
+library(semantic.dashboard)
+library(shiny.semantic)
+library(shiny.telemetry)
+library(dplyr)
+library(config)
+
+counter_ui <- function(id, label = "Counter") {
+  ns <- NS(id)
+  div(
+    h2(class = "ui header primary", "Widgets tab content", style = "margin: 2rem"),
+    box(
+      title = label,
+      action_button(ns("button"), "Click me!", class = "red"),
+      verbatimTextOutput(ns("out")),
+      width = 4, color = "teal"
+    )
+  )
+}
+
+ui <- dashboardPage(
+  dashboardHeader(title = "Basic dashboard"),
+  dashboardSidebar(
+    sidebarMenu(
+      menuItem(tabName = "dashboard", text = "Home", icon = icon("home")),
+      menuItem(tabName = "widgets", text = "Another Tab", icon = icon("heart")),
+      menuItem(tabName = "another-widgets", text = "Yet Another Tab", icon = icon("heart")),
+      id = "uisidebar"
+    )
+  ),
+  dashboardBody(
+    use_telemetry(),
+    tabItems(
+      # First tab content
+      tabItem(
+        tabName = "dashboard",
+        box(
+          title = "Controls",
+          sliderInput("bins", "Number of observations:", 1, 50, 30),
+          action_button("apply_slider", "Apply", class = "green"),
+          width = 4, color = "teal"
+        ),
+        box(
+          title = "Old Faithful Geyser Histogram",
+          plotOutput("plot1", height = 400),
+          width = 11, color = "blue"
+        ),
+        segment(
+          class = "basic",
+          h3("Sample application instrumented by Shiny.telemetry"),
+          p(glue::glue("Note: using MariaDB as data backend.")),
+          p("Information logged:"),
+          tags$ul(
+            tags$li("Start of session"),
+            tags$li("Every time slider changes"),
+            tags$li("Click of 'Apply' button"),
+            tags$li("Tab navigation when clicking on the links in the left sidebar")
+          )
+        )
+      ),
+
+      # Second tab content
+      tabItem(
+        tabName = "widgets",
+        counter_ui("widgets", "Counter 1")
+      ),
+
+      # Third tab content
+      tabItem(
+        tabName = "another-widgets",
+        counter_ui("another-widgets", "Counter 2")
+      )
+    )
+  )
+)
+
+# Default Telemetry with data storage backend using MariaDB
+telemetry <- Telemetry$new(
+  app_name = "demo",
+  data_storage = DataStorageMSSQLServer$new(
+    user = "sa",
+    password = "my-Secr3t_Password",
+    hostname = "localhost",
+    port = 1433,
+    dbname = "my_db",
+    driver = "ODBC Driver 18 for SQL Server",
+    trust_server_certificate = "YES"
+  )
+)
+
+# Define the server logic for a module
+counter_server <- function(id) {
+  moduleServer(
+    id,
+    function(input, output, session) {
+      count <- reactiveVal(0)
+      observeEvent(input$button, {
+        count(count() + 1)
+      })
+      output$out <- renderText(count())
+      count
+    }
+  )
+}
+
+shinyApp(ui = ui, server = function(input, output, session) {
+  telemetry$start_session(
+    track_values = TRUE,
+    navigation_input_id = "uisidebar"
+  )
+
+  # server code
+  output$plot1 <- renderPlot({
+    input$apply_slider
+    x <- faithful[, 2]
+    bins <- seq(min(x), max(x), length.out = isolate(input$bins) + 1)
+    hist(x, breaks = bins, col = "#0099F9", border = "white")
+  })
+
+  counter_server("widgets")
+  counter_server("another-widgets")
+})

pkgdown/_pkgdown.yml

@@ -3,6 +3,8 @@ template:
   bootstrap: 5
   bootswatch: pulse
   bslib:
+    primary: "#4AB76C"
+    secondary-color: "#f00"
     pkgdown-nav-height: 100px
   includes:
     in_header: |
@@ -29,15 +31,25 @@ template:
 url: https://appsilon.github.io/shiny.telemetry/
 
 navbar:
+  type: light
   bg: primary
+  fg: "#262323"
   structure:
-    left: [home, reference, changelog]
+    left: [how-to-guides, reference, changelog]
     right: [search, github, twitter, mastodon]
   components:
-    home:
-      icon: fa-home
-      text: "Start"
-      href: index.html
+    how-to-guides:
+      text: "How-to Guides"
+      icon: fa-book-reader
+      menu:
+        - text: Setup shiny.telemetry in a Rhino application
+          href: articles/rhino.html
+        - text: Track a Subset of Inputs to Improve Performance
+          href: articles/tracking-specific-input-id.html
+        - text: Data Storage backends
+          navbar: Data Storage backends
+        - text: Use External Databases with shiny.telemetry
+          href: articles/databases.html
     reference:
       icon: fa-file-code-o
       text: "Reference"

pkgdown/extra.css

@@ -1,44 +1,37 @@
 :root {
   --primary-color: #4AB76C;
+  --bslib-color-bg: #4AB76C;
+  --navbar-color: #262323;
 }
 
-.navbar {
-  background-color: var(--primary-color) !important;
-}
-
-
-#navbar > ul.navbar-nav > li.nav-item > a {
-  color: rgba(255, 255, 255, 0.55);
-}
-
-.navbar-dark .navbar-nav .active > .nav-link {
-  background-color: var(--primary-color) !important;
-  color: #fff !important;
+.navbar-dark input[type="search"] {
+  background-color: #fff;
+  color: #444;
 }
 
-.navbar-brand {
-  color: #fff !important;
+.navbar-light .navbar-nav .active > .nav-link {
+  background-color: var(--primary-color);
+  color: var(--bs-navbar-brand-color);
 }
 
-#navbar > ul.navbar-nav > li.nav-item a:hover {
-  background-color: var(--primary-color) !important;
+.nav-link::after {
+  color: var(--bs-secondary-color);
 }
 
-.navbar-dark input[type="search"] {
-  background-color: #fff !important;
-  color: #444 !important;
+.nav-link:hover::after, .nav-link:focus::after, .nav-link:active::after {
+  color: var(--navbar-color);
 }
 
 nav .text-muted {
-  color: #d8d8d8 !important;
+  --bs-secondary-color: var(--navbar-color);
 }
 
 a {
   color: var(--primary-color);
 }
 
 a:hover {
-  color: #2c2b2b;
+  color: var(--navbar-color);
 }
 
 button.btn.btn-primary.btn-copy-ex {

vignettes/.gitignore

@@ -0,0 +1,2 @@
+*.html
+*.R