---
title: "Climate & Consumption"
subtitle: "lollipop-type chart with icons"
theme: flatly 
date: today
toc: true
format:
  html: 
    code-overflow: wrap
    toc: true
    toc-title: "Contents"
    code-link: true

execute:
  warning: false
  message: false
---
## Main Format

To create new a Shiny App in RStudio: Click: 

`File > New File > Shiny Web App ...`

After library call, there are **three main components** to every Shiny app.

1. `ui`: user interface

2. `server` the R-backend

3. `ShinyApp` function to connect them

```{r, eval=FALSE}
library(shiny)

# define how the page looks & interacts
ui <- fluidPage() # standard basic template 

# define server logic
server <- function(input,output){
  # R-code for data-wrangling & plotting
}

# Run the application 
shinyApp(ui = ui, server = server)
```

Below is a list of functions & packages used to create the user interface.

## User Interface Layout Options

| Option | Description | Key Use Case |
| :--- | :--- | :--- |
| **1. `fluidPage()`** (Base Shiny) | A simple page layout that automatically adjusts to the user's screen size (responsive design). | **Simple/Basic Apps:** Quickest way to build a functional, single-page app. |
| **2. `page_sidebar()`** / **`sidebarLayout()`** (Base Shiny/`bslib`) | Creates a two-panel layout: a narrow sidebar (often for inputs) and a main panel (for outputs). | **Data Exploration:** Classic layout for inputs on the left, main analysis/plots on the right. |
| **3. `page_navbar()`** (Base Shiny/`bslib`) | Provides a top-level **navigation bar** to create a multi-page application with tabs. | **Multi-Section Apps:** Organizes complex applications into distinct sections. |
| **4. `bslib` Package** | A modern package for unified theming and advanced layouts, including **Cards**, **Value Boxes**, and new layout functions. | **Modern Look & Feel:** Creating highly customizable, professional-looking dashboards. |
| **5. `shinydashboard` Package** | A dedicated package that provides a structured, fixed-style dashboard layout with a **Header**, **Sidebar Menu**, and **Body**. | **Traditional Dashboards:** Best for large-scale, enterprise-style monitoring and reporting applications. |
| **6. `bs4Dash` Package** | An evolution of `shinydashboard` that uses the more modern Bootstrap 4/AdminLTE 3 themes, offering more UI components. | **Feature-Rich Dashboards:** When `shinydashboard` isn't flexible enough and you need more modern widgets/styles. |
| **7. Multi-Column Layouts** | Using functions like `layout_columns()` (or `fluidRow`/`column`) to organize content into a **grid system** (typically 12 columns). | **Grid-Based Design:** Precise control over where elements are placed on the page for a clean, non-sidebar layout. |
| **8. `shinythemes` Package** | Offers a variety of pre-packaged **Bootstrap themes** (Bootswatch) that can be applied instantly to change the app's colors and fonts. | **Quick Styling:** Changing the entire app's look with a single line of code. |
| **9. `tabsetPanel()`** (Base Shiny) | Displays content in multiple **tabbed panels** within the main body of a page. | **Content Grouping:** Organizing related content (e.g., different charts) without changing the overall page structure. |
| **10. `shinyfluent` or other thematic packages** | Packages that wrap other popular design frameworks like Microsoft's **Fluent UI** or Material Design. | **Specific Design Systems:** Implementing a very specific, polished look and feel. |

## Options for Interactivity

| Option | Function | Description | Key Use Case |
| :--- | :--- | :--- | :--- |
| **1. Slider** | `sliderInput()` | A slider bar for selecting a single numeric value or a range of values. | **Tuning Parameters:** Setting a number of clusters in k-means, or choosing a confidence interval. |
| **2. Select Box** | `selectInput()` | A drop-down menu that lets the user choose one or multiple options from a predefined list. | **Choosing Variables:** Selecting which column in a dataset to plot on the X-axis. |
| **3. Action Button**| `actionButton()` or `actionLink()` | A simple clickable button that generates an event when pressed. | **Triggering Events:** Refreshing a dataset, running a time-consuming calculation, or downloading a report. |
| **4. Checkbox** | `checkboxInput()` | A single box that can be either checked (TRUE) or unchecked (FALSE). | **Toggling Features:** Showing or hiding a data trend line on a plot. |
| **5. Checkbox Group**| `checkboxGroupInput()` | A group of checkboxes allowing the user to select multiple options from a list. | **Filtering Data:** Selecting which categories (e.g., product lines) to include in an analysis. |
| **6. Radio Buttons** | `radioButtons()` | A set of circular buttons where the user can choose only one option from the group. | **Selecting Modes:** Choosing between "Raw Counts" or "Per Capita" for a visualization. |
| **7. Numeric Input** | `numericInput()` | A text box specifically for entering numeric values, with optional minimum, maximum, and step controls. | **Exact Entry:** Allowing the user to enter a precise value, like a sample size. |
| **8. Date Input** | `dateInput()` or `dateRangeInput()` | A pop-up calendar widget for selecting a single date or a date range. | **Time-Series Filtering:** Defining the start and end dates for data displayed on a chart. |
| **9. Text Input** | `textInput()` | A simple text box for users to type in a short string of text. | **Search/Labeling:** Entering a search term to filter results, or providing a plot title. |
| **10. File Upload** | `fileInput()` | A button that opens the user's file explorer, allowing them to upload a file (e.g., CSV, Excel) to the app. | **Custom Data:** Allowing users to analyze their own data files within the application. |

