add shiny example

.gitignore

@@ -328,5 +328,6 @@ $RECYCLE.BIN/
 
 _output/
 .quarto/
+/*.html
 
 /.quarto/

.vscode/settings.json

@@ -50,6 +50,14 @@
     "editor.insertSpaces": true,
     "editor.tabSize": 4
   },
+  "[r]": {
+    "editor.defaultFormatter": "REditorSupport.r",
+    "editor.formatOnSave": false,
+    "editor.indentSize": 2,
+    "editor.insertSpaces": true,
+    "editor.tabSize": 2,
+    "files.eol": "\n"
+  },
   "[snippets]": {
     "editor.defaultFormatter": "vscode.json-language-features",
     "editor.formatOnSave": true,

README.md

@@ -25,6 +25,8 @@
 1. `install.packages("shiny")`
 1. Any other packages you need for the code you're using. This example repo needs the following.
    - `install.packages("ggplot2")`
+1. Use `quarto serve shiny.rmd` to run the Shiny example.
+    - Theming currently does not work
 
 ### VSCode Integration
 

shiny.qmd

+---
+title: Shiny Example
+server: shiny # necessary for shiny interactive elements
+format:
+  revealjs:
+    # CREATION METADATA
+    author:
+      name: Research Computing
+      affilitation: UAB
+    copyright: "© University of Alabama at Birmingham"
+    date: today # default date
+    date-format: YYYY-MM-DD
+    # OPTIONS - CONTROLS
+    controls: true
+    controls-layout: bottom-right
+    controls-back-arrows: faded
+    # OPTIONS - FEATURES
+    code-annotation: select
+    title-slide-attributes:
+      data-align: left
+    #
+    # DEVELOPER ONLY
+    width: 1280
+    height: 720
+    auto-stretch: false
+    history: true
+    menu: false
+    progress: true
+    revealjs-plugins:
+      - rStackFix
+    # DEVELOPER ONLY - STYLE AND THEME
+    highlight-style: runtime/theme/uab-rc.theme # code highlighting
+    css:
+      - runtime/theme/uab-rc.css # uab theming
+      - runtime/theme/fix-r-stack-hack.css # fixes r-stack div
+    include-in-header:
+      - runtime/includes/head.html
+    include-after-body:
+      - runtime/includes/footer.html
+---
+
+## Direct Code Example - R
+
+```{r}
+print("Hello World!")
+```
+
+## Included Code Example - R
+
+```{r}
+{{< include src/code-example.R >}}
+```
+
+## Interactive Iris Dataset - Shiny
+
+<!-- UI Sidebar -->
+
+```{r}
+#| panel: sidebar
+{{< include src/shiny-ui-sidebar.R >}}
+```
+
+<!-- UI Plot -->
+
+```{r}
+#| panel: fill
+{{< include src/shiny-ui-plot.R >}}
+```
+
+<!-- Local server backend code-->
+
+```{r}
+#| context: server
+{{< include src/shiny-ui-server.R >}}
+```

src/code-example.R

+library(ggplot2)
+
+x <- 10
+y <- 5
+z <- x + y
+mean_value <- mean(c(x, y, z))
+
+person <- setRefClass("Person",
+  fields = list(name = "character"),
+  methods = list(
+    greet = function() paste("Hello, my name is", name)
+  )
+)
+john <- person$new(name = "John")
+greeting <- john$greet()
+
+add_numbers <- function(a, b) a + b
+sum_result <- add_numbers(x, y)

src/shiny-ui-plot.R

+plotOutput("plot1")

src/shiny-ui-server.R

+selected_data <- reactive({
+  iris[, c(input$xcol, input$ycol)]
+})
+
+clusters <- reactive({
+  kmeans(selected_data(), input$clusters)
+})
+
+output$plot1 <- renderPlot({
+  palette(c(
+    "#E41A1C", "#377EB8", "#4DAF4A", "#984EA3",
+    "#FF7F00", "#FFFF33", "#A65628", "#F781BF", "#999999"
+  ))
+
+  par(mar = c(5.1, 4.1, 0, 1))
+  plot(selected_data(),
+    col = clusters()$cluster,
+    pch = 20, cex = 3
+  )
+  points(clusters()$centers, pch = 4, cex = 4, lwd = 4)
+})

src/shiny-ui-sidebar.R

+vars <- setdiff(names(iris), "Species")
+selectInput("xcol", "X Variable", vars)
+selectInput("ycol", "Y Variable", vars, selected = vars[[2]])
+numericInput("clusters", "Cluster count", 3, min = 1, max = 9)