### Default Color Picker with Callback

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/color-picker/r_dash-daq_colorpicker.html

This example shows a basic Color Picker setup with a callback to display the selected color. Ensure you have dash, dashDaq, and dashHtmlComponents libraries installed.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqColorPicker(id = 'my-color-picker',
                 label = 'Color Picker',
                 value = '#119DFF'),
  htmlDiv(id = 'color-picker-output')
)))

app$callback(
  output(id = 'color-picker-output', property = 'children'),
  params = list(input(id = 'my-color-picker', property = 'value')),

  update_output <- function(value) {
    return (sprintf('The selected color is %s.', value))
  }
)

app$run_server()
```

--------------------------------

### Default SequenceViewer with Callback

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_bio/sequenceviewer/r_dash-bio_sequenceviewer.html

Demonstrates a basic SequenceViewer setup with a callback to display mouse selection information. Ensure the 'readr' and 'dashBio' libraries are installed.

```R
app <- Dash$new()

library(readr)
library(dashBio)

fasta_str = "MALWMRLLPLLALLALWGPDPAAAFVNQHLCGSHLVEALYLVCGERGFFYTPKTRREAED
    LQVGQVELGGGPGAGSLQPLALEGSLQKRGIVEQCCTSICSLYQLENYCN"

app$layout(htmlDiv(list(
    dashbioSequenceViewer(
        id = 'default-sequence-viewer',
        sequence = fasta_str
    ),
    htmlDiv(id = 'default-sequence-viewer-output')
)))

app$callback(
    output(id = "default-sequence-viewer-output", property = "children"),
    params = list(
        input(id = 'default-sequence-viewer', property = "mouseSelection")
    ),
    update_output <- function(value) {
        if ((length(value) == 0)| is.null(value[[1]])) {
            return("There is no mouse selection.")
        }
        else{
            return(sprintf("The mouse selection is %s", value$selection))
        }
    }
)

app$run_server()
```

--------------------------------

### Default Power Button with Callback

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/power-button/r_dash-daq_powerbutton.html

Demonstrates a default power button setup with a Dash callback to update output based on the button's state. Ensure Dash, dashDaq, and dashHtmlComponents libraries are installed.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqPowerButton(id = 'my-power-button',
                 on = FALSE),
  htmlDiv(id = 'power-button-output')
)))

app$callback(
  output(id = "power-button-output", property = "children"),
  params = list(input(id = "my-power-button", property = "on")),

  update_output <- function(on) {
    return(sprintf("The button is %s", on))
  }
)

app$run_server()
```

--------------------------------

### Default Stop Button Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/stop-button/r_dash-daq_stopbutton.html

Demonstrates a basic Stop Button with default settings and a callback to update click counts. Ensure dash, dashDaq, and dashHtmlComponents libraries are installed.

```r
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqStopButton(
    id = 'my-stop-button',
    label = 'Default',
    n_clicks = 0
  ),
  htmlDiv(id = 'stop-button-output')
)))

app$callback(
  output(id = "stop-button-output", property = "children"),
  params = list(input(id = "my-stop-button", property = "n_clicks")),

  update_output <- function(n_clicks) {
    return(sprintf("The stop button has been clicked %s times.", n_clicks))
  }
)

app$run_server()
```

--------------------------------

### Simple Interactive Dash App with Callbacks (R)

Source: https://github.com/ayanke/dashr-documentation/blob/main/basic_callbacks/r_basic-callbacks.html

This example demonstrates a basic Dash app in R with a callback function. It takes input from a text field and displays it in an output div. Ensure the 'dash' and 'dashCoreComponents' libraries are installed.

```R
library(dash)
library(dashCoreComponents)

app <- dash_app()

app %>% set_layout(
  html$h6("Change the value in the text box to see callbacks in action!"),
  div(
    "Input: ",
    dccInput(id = 'my-input', value = 'initial value', type = 'text')
  ),
  br(),
  div(id = 'my-output')
)

app %>% add_callback(
  output(id = 'my-output', property = 'children'),
  input(id = 'my-input', property = 'value'),
  function(input_value) {
    sprintf("Output: \"%s\"", input_value)
  }
)

app %>% run_app()
```

--------------------------------

### Simple Example with ALL in DashR

Source: https://github.com/ayanke/dashr-documentation/blob/main/pattern_matching_callbacks/r_pattern-matching-callbacks.html

This example demonstrates how to dynamically add dcc.Dropdown components and update an output based on their values using the ALL pattern-matching selector. It utilizes dictionary-based IDs for dynamic components.

```r
library(dash)
library(dashCoreComponents)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  htmlButton("Add Filter", id="add-filter", n_clicks=0),
  htmlDiv(id="dropdown-container", children=list()),
  htmlDiv(id="dropdown-container-output")
)))


app$callback(
  output(id="dropdown-container", property = "children"),
  params = list(
    input(id = "add-filter", property = "n_clicks"),
    state(id = "dropdown-container", property = "children")
  ),
  display_dropdowns <- function(n_clicks, children){
    new_dropdown = dccDropdown(
      id=list(
        "index" = n_clicks,
        "type" = "filter-dropdown"
      ),
      options = lapply(c("NYC", "MTL", "LA", "TOKYO"), function(x){
        list("label" = x, "value" = x)
      })
    )
    children[[n_clicks + 1]] <- new_dropdown
    return(children)
  }
)


app$callback(
  output(id="dropdown-container-output", property="children"),
  params = list(
    input(id=list("index" = ALL, "type" = "filter-dropdown"), property= "value")
  ),
  display_output <- function(test){
    ctx <- app$callback_context()
    return(htmlDiv(
      lapply(seq_along(test), function(x){
        return(htmlDiv(sprintf("Dropdown %s = %s", x, test[[x]])))
      })
    ))
  }
)


app$run_server()
```

--------------------------------

### Start the Application Server

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Starts the Fiery web server to serve the Dash app locally. By default, it runs on `127.0.0.1:8050`. Customization options for host, port, and debug mode are available.

```APIDOC
## `run_app()` / `app$run_server()` — Start the Application Server

Starts the Fiery web server and serves the Dash app locally. By default runs on `127.0.0.1:8050`. Accepts `host`, `port`, `debug`, and other arguments.

```r
library(dash)

app <- dash_app()
app %>% set_layout(div("Hello, World!"))

# Default: http://127.0.0.1:8050
app %>% run_app()

# Custom host and port
app %>% run_app(host = "0.0.0.0", port = 8080)

# R6 style
app$run_server(debug = TRUE)
```
```

--------------------------------

### Simple `ALL` Example with Partial Updates

Source: https://github.com/ayanke/dashr-documentation/blob/main/pattern_matching_callbacks/index.md

This example demonstrates using `ALL` to match multiple `dcc.Dropdown` components. It utilizes partial property updates to append new dropdowns dynamically. IDs can be dictionaries for pattern matching.

```python
from dash import Dash, dcc, html, Input, Output, State, Patch

app = Dash(__name__)

app.layout = html.Div([
    html.H1('Pattern Matching Callbacks Example'),
    html.Button('Add Dropdown', id='add-dropdown-button', n_clicks=0),
    html.Div(id='dropdown-container-div'),
    html.Hr(),
    html.Div(id='output-container')
])


@app.callback(
    Output('dropdown-container-div', 'children', allow_duplicate=True),
    Input('add-dropdown-button', 'n_clicks'),
    State('dropdown-container-div', 'children'),
    prevent_initial_call=True
)
def add_dropdown(n_clicks, children):
    if children is None:
        children = []
    
    # Create a new dropdown with a dictionary ID
    new_dropdown = dcc.Dropdown(
        id={'type': 'city-filter-dropdown', 'index': n_clicks},
        options=[{'label': f'City {i}', 'value': f'City {i}'} for i in range(10)],
        value=f'City {n_clicks}',
        clearable=False
    )
    children.append(new_dropdown)
    return children


@app.callback(
    Output('output-container', 'children'),
    Input({'type': 'city-filter-dropdown', 'index': ALL}, 'value')
)
def display_values(values):
    # The `values` argument is a list of the values from all dropdowns
    # that match the pattern.
    # For example: ['City 0', 'City 1', 'City 2']
    
    # If no dropdowns are present, `values` will be an empty list.
    if not values:
        return 'No dropdowns selected.'
    
    # Use Patch to update the children property of the output div
    # This is a partial update, so we don't need to return the whole component.
    # We are just appending the selected values to the output div.
    patched_div = Patch()
    patched_div.append(html.P(f'Selected values: {values}'))
    return patched_div

if __name__ == '__main__':
    app.run_server(debug=True)

```

--------------------------------

### Default Dark Theme Provider Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/dark-theme-provider/r_dash-daq_darkthemeprovider.html

Demonstrates the basic usage of the DarkThemeProvider with default settings. This example includes various DAQ components styled by the provider.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

theme <- list(
  'dark' = TRUE,
  'detail' = '#007439',
  'primary' = '#00EA64',
  'secondary' = '#6E6E6E'
)

rootLayout <- htmlDiv(list(
  daqBooleanSwitch(
    on = TRUE,
    id = 'darktheme-daq-booleanswitch',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqToggleSwitch(
    id = 'darktheme-daq-toggleswitch',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqColorPicker(
    value = 17,
    id = 'darktheme-daq-colorpicker',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqGauge(
    min = 0,
    max = 10,
    value = 6,
    color = theme[['primary']],
    id = 'darktheme-daq-gauge',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqGraduatedBar(
    value = 4,
    color = theme[['primary']],
    id = 'darktheme-daq-graduatedbar',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqIndicator(
    value = TRUE,
    color = theme[['primary']],
    id = 'darktheme-daq-indicator',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqKnob(
    min = 0,
    max = 10,
    value = 6,
    color = theme[['primary']],
    id = 'darktheme-daq-knob',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqLEDDisplay(
    value = "3.14159",
    color = theme[['primary']],
    id = 'darktheme-daq-leddisplay',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqNumericInput(
    min = 0,
    max = 10,
    value = 4,
    id = 'darktheme-daq-numericinput',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqPowerButton(
    on = TRUE,
    color = theme[['primary']],
    id = 'darktheme-daq-powerbutton',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqPrecisionInput(
    precision = 4,
    value = 299792458,
    id = 'darktheme-daq-precisioninput',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqStopButton(
    id = 'darktheme-daq-stopbutton',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqSlider(
    min = 0,
    max = 100,
    value = 30,
    targets = list("25" = list("label" = "TARGET")),
    color = theme[['primary']],
    id = 'darktheme-daq-slider',
    className = 'dark-theme-control'
  ), htmlBr(),
  daqTank(
    min = 0,
    max = 10,
    value = 5,
    id='dark-theme-tank',
    color = theme[['primary']],
    className = 'dark-theme-control'
  ), htmlBr(),
  daqThermometer(
    min = 95,
    max = 105,
    value = 98.6,
    id = 'darktheme-daq-thermometer',
    className = 'dark-theme-control',
    color = theme[['primary']],
  ), htmlBr()
))

app$layout(htmlDiv(
  id = 'dark-theme-container',
  style = list('padding' = '50px'),
  children = list(
    daqToggleSwitch(
      id = 'toggle-theme',
      label = list('Light', 'Dark'),
      value = TRUE
    ),
    htmlBr(),
    htmlDiv(
      id = 'theme-colors',
      children = list(
        daqColorPicker(
          id = 'primary-color',
          label = 'Primary color',
          value = list(hex = '#00EA64')
        ),
        daqColorPicker(
          id = 'secondary-color',
          label = 'Accent color',
          value = list(hex = '#6E6E6E')
        ),
        daqColorPicker(
          id = 'detail-color',
          label = 'Detail color',
          value = list(hex = '#007439')
        )
      )
    ),
    htmlDiv(
      id = 'dark-theme-components',
      children = list(daqDarkThemeProvider(theme = theme,
                                               children = rootLayout)),
      style = list(
        'border' = 'solid 1px #A2B1C6',
        'border-radius' = '5px',
        'padding' = '50px',
        'marginTop' = '20px'
      )
    )
  )
))

app$callback(
  output(id = "dark-theme-components", property = "children"),
  params = list(input(id = "toggle-theme", property = "value"),
                    input(id = "primary-color", property = "value"),
                    input(id = "secondary-color", property = "value"),
                    input(id = "detail-color", property = "value")
                    ),

      turn_dark <- function(dark, p, s, d) {
        if (dark) {
          theme[['dark']] <- TRUE
        } else {
          theme[['dark']] <- FALSE
        }

        if (length(p) > 0) {
          theme[['primary']] <- p$hex
        }

        if (length(s) > 0) {
          theme[['secondary']] <- s$hex
        }

        if (length(d) > 0) {
          theme[['detail']] <- d$hex
        }

        return(daqDarkThemeProvider(theme = theme, children = rootLayout))
      }
)

app$run_server(debug = TRUE)

```

--------------------------------

### Simple `ALL` Example Without Partial Updates

Source: https://github.com/ayanke/dashr-documentation/blob/main/pattern_matching_callbacks/index.md

This example demonstrates using `ALL` to match multiple `dcc.Dropdown` components without using partial property updates. It uses `State` to manage the list of dropdowns and returns the updated list as the output.

```python
from dash import Dash, dcc, html, Input, Output, State

app = Dash(__name__)

app.layout = html.Div([
    html.H1('Pattern Matching Callbacks Example (No Partial Updates)'),
    html.Button('Add Dropdown', id='add-dropdown-button', n_clicks=0),
    html.Div(id='dropdown-container-div'),
    html.Hr(),
    html.Div(id='output-container')
])


@app.callback(
    Output('dropdown-container-div', 'children'),
    Input('add-dropdown-button', 'n_clicks'),
    State('dropdown-container-div', 'children')
)
def add_dropdown(n_clicks, children):
    if children is None:
        children = []
    
    # Create a new dropdown with a dictionary ID
    new_dropdown = dcc.Dropdown(
        id={'type': 'city-filter-dropdown', 'index': n_clicks},
        options=[{'label': f'City {i}', 'value': f'City {i}'} for i in range(10)],
        value=f'City {n_clicks}',
        clearable=False
    )
    children.append(new_dropdown)
    return children


@app.callback(
    Output('output-container', 'children'),
    Input({'type': 'city-filter-dropdown', 'index': ALL}, 'value')
)
def display_values(values):
    # The `values` argument is a list of the values from all dropdowns
    # that match the pattern.
    # For example: ['City 0', 'City 1', 'City 2']
    
    # If no dropdowns are present, `values` will be an empty list.
    if not values:
        return 'No dropdowns selected.'
    
    return f'Selected values: {values}'

if __name__ == '__main__':
    app.run_server(debug=True)

```

--------------------------------

### Install and Load Dash Bio in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_bio/index.md

To install Dash Bio, run the provided commands in your R Console. This snippet shows the installation command and how to load the library.

```r
>remotes::install_github("plotly/dash-bio")
>library(dashBio)
```

--------------------------------

### Default Joystick Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/joystick/r_dash-daq_joystick.html

An example of a default Joystick without any extra properties, demonstrating its basic usage and callback integration.

```APIDOC
## Default Joystick Example

### Description
This example shows a basic `daqJoystick` component integrated into a Dash app. It demonstrates how to set up the joystick and use its `angle` and `force` properties in a callback to update an output element.

### Method
Dash Callback

### Endpoint
N/A (Client-side component)

### Parameters
#### Input Parameters (Callback)
- **`id`** (string) - The ID of the joystick component.
- **`property`** (string) - The property of the joystick to monitor (e.g., 'angle', 'force').

#### Output Parameters (Callback)
- **`id`** (string) - The ID of the output component to update.
- **`property`** (string) - The property of the output component to update (e.g., 'children').

### Request Example
```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqJoystick(id = 'my-joystick',
               label = 'Default',
               angle = 0),
  htmlDiv(id = 'joystick-output')
)))

app$callback(
  output(id = "joystick-output", property = "children"),
  params = list(
    input(id = "my-joystick", property = "angle"),
    input(id = "my-joystick", property = "force")
  ),

  update_output <- function(angle, force) {
    return(list(
      sprintf('Angle is %s', angle),
      htmlBr(),
      sprintf('Force is %s', force)
    ))
  }
)

app$run_server()
```

### Response
#### Success Response (Callback Update)
- **`children`** (list) - A list containing strings and HTML elements to display the current angle and force of the joystick.
```

--------------------------------

### Install dash.testing

Source: https://github.com/ayanke/dashr-documentation/blob/main/testing/r_testing.html

Install the dash.testing package using pip. For some shells like Zsh, you may need to escape the opening bracket.

```bash
python -m pip install dash[testing]
```

```bash
python -m pip install dash\[testing]
```

--------------------------------

### Start the Dash Application Server

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Start the Fiery web server to serve the Dash app locally using `run_app()` or `app$run_server()`. By default, it runs on `127.0.0.1:8050`. Custom hosts, ports, and debug modes can be specified.

```r
library(dash)

app <- dash_app()
app %>% set_layout(div("Hello, World!"))

# Default: http://127.0.0.1:8050
app %>% run_app()

# Custom host and port
app %>% run_app(host = "0.0.0.0", port = 8080)

# R6 style
app$run_server(debug = TRUE)
```

--------------------------------

### Install dash-canvas with remotes

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_canvas/index.md

Install the dash-canvas package from GitHub using the remotes package.

```r
remotes::install_github('plotly/dash-canvas')
```

--------------------------------

### Python Example: Simple ALL Without Partial Updates

Source: https://github.com/ayanke/dashr-documentation/blob/main/pattern_matching_callbacks/r_pattern-matching-callbacks.html

This Python example demonstrates a similar functionality to the R example but without using partial property updates. It uses State to access the list of dropdowns and appends new ones.

```python
from dash import Dash, dcc, html, Input, Output, State, ALL, callback

app = Dash(__name__, suppress_callback_exceptions=True)

app.layout = html.Div([
    html.Button("Add Filter", id="add-filter", n_clicks=0),

```

--------------------------------

### Install Dash R Development Version

Source: https://github.com/ayanke/dashr-documentation/blob/main/README.md

Installs development versions of Dash R and its component libraries from GitHub. Includes installation of core dependencies.

```r
install.packages(c("fiery", "routr", "reqres", "htmltools", "base64enc", "plotly", "mime", "crayon", "devtools"))

# installs dash, which includes dashHtmlComponents, dashCoreComponents, and dashTable
# and will update the component libraries when a new package is released
devtools::install_github("plotly/dashR", ref="dev", upgrade = TRUE)
```

--------------------------------

### Install DashR from GitHub

Source: https://github.com/ayanke/dashr-documentation/blob/main/installation/index.md

Use this command to install the DashR package and its dependencies from GitHub. It is recommended to upgrade frequently as the package is under active development. Ensure you have R version 3.0.2 or higher.

```r
install.packages("remotes")
remotes::install_github("plotly/dashR", upgrade = "always")
```

--------------------------------

### Add External CSS and JavaScript to Dash App (Python Example)

Source: https://github.com/ayanke/dashr-documentation/blob/main/external_resources/r_external-resources.html

Demonstrates how to include external JavaScript and CSS files in your Dash application by providing lists of URLs or dictionaries with file details to the Dash constructor. Note: This example is in Python as the R equivalent is not provided.

```Python
from dash import Dash, html


# external JavaScript files
external_scripts = [
    'https://www.google-analytics.com/analytics.js',
    {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
    {
        'src': 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js',
        'integrity': 'sha256-Qqd/EfdABZUcAxjOkMi8eGEivtdTkh3b65xCZL4qAQA=',
        'crossorigin': 'anonymous'
    }
]

# external CSS stylesheets
external_stylesheets = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',
        'crossorigin': 'anonymous'
    }
]


app = Dash(__name__,
                external_scripts=external_scripts,
                external_stylesheets=external_stylesheets)

app.layout = html.Div()

if __name__ == '__main__':
    app.run(debug=True)
```

--------------------------------

### Basic Alignment Chart Example in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_bio/alignment-chart/r_dash-bio_alignmentchart.html

This example demonstrates how to create a basic Alignment Chart using R. It reads data from a URL and sets the `showconsensus` property to FALSE.

```R
library(dashBio)
library(readr)

app <- Dash$new()

data = read_file("https://git.io/alignment_viewer_p53.fasta")

app$layout(htmlDiv(list(
    dashbioAlignmentChart(
        data = data,
        showconsensus = FALSE
    )
)))

app$run_server()
```

--------------------------------

### Default Slider Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/slider/index.md

A basic Dash DAQ Slider with default settings.

```python
dcc.Slider(id='default-slider')

```

--------------------------------

### Dash App Setup with Multiple Inputs

Source: https://github.com/ayanke/dashr-documentation/blob/main/basic_callbacks/r_basic-callbacks.html

Initializes a Dash app and loads data. Sets up the layout with dropdowns, radio items, a graph, and a slider, defining their properties and initial values.

```R
library(dash)
library(dashCoreComponents)
library(dplyr)

app <- dash_app()

df <- read.csv(
  file = 'https://gist.githubusercontent.com/chriddyp/cb5392c35661370d95f300086accea51/raw/8e0768211f6b747c0db42a9ce9a0937dafcbd8b2/indicators.csv',
  stringsAsFactor = FALSE
)

available_indicators <- unique(df$Indicator.Name)
years <- unique(df$Year)
num_years <- length(years)

option_indicator <- lapply(
  available_indicators,
  function(available_indicator) {
    list(label = available_indicator,
         value = available_indicator)
  }
)

app %>% set_layout(
  div(
    dccDropdown(
      id = 'xaxis-column',
      options = option_indicator,
      value = 'Fertility rate, total (births per woman)'
    ),
    dccRadioItems(
      id = 'xaxis-type',
      options = list(list(label = 'Linear', value = 'linear'),
                     list(label = 'Log', value = 'log')),
      value = 'linear',
      labelStyle = list(display = 'inline-block')
    ),
    style = list(width = '48%', display = 'inline-block')
  ),
  div(
    dccDropdown(
      id = 'yaxis-column',
      options = option_indicator,
      value = 'Life expectancy at birth, total (years)'
    ),
    dccRadioItems(
      id = 'yaxis-type',
      options = list(list(label = 'Linear', value = 'linear'),
                     list(label = 'Log', value = 'log')),
      value = 'linear',
      labelStyle = list(display = 'inline-block')
    ),
    style = list(width = '48%', float = 'right', display = 'inline-block')
  ),
  dccGraph(id = 'indicator-graphic'),
  dccSlider(
    id = 'year--slider',
    min = 0,
    max = num_years - 1,
    marks = years,
    value = num_years - 1
  )
)
```

--------------------------------

### Configure Knob Scale

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/knob/r_dash-daq_knob.html

Adjust the scale interval, label interval, and start of the scale using the `scale` property. This example sets a custom start value, label interval, and scale interval.

```R
library(dashDaq)

daqKnob(
    value = 7,
    max = 18,
    scale = list("start" = 0, "labelInterval" = 3, "interval" = 3)
)
```

--------------------------------

### Dash App with Basic Callbacks

Source: https://github.com/ayanke/dashr-documentation/blob/main/basic_callbacks/r_basic-callbacks.html

This example demonstrates a basic Dash app where callbacks are triggered immediately upon input changes. It sets up two input fields and an output that displays their current values.

```R
library(dash)
library(dashCoreComponents)

app <- dash_app()

app %>% set_layout(
  dccInput(id = 'input-1', type = 'text', value = 'Montreal'),
  dccInput(id = 'input-2', type = 'text', value = 'Canada'),
  div(id = 'output_keywords')
)

app %>% add_callback(
  output('output_keywords', 'children'),
  list(
    input('input-1', 'value'),
    input('input-2', 'value')
  ),
  function(input1, input2) {
    sprintf("Input 1 is \"%s\" and Input 2 is \"%s\"", input1, input2)
  }
)

app %>% run_app()
```

--------------------------------

### Configure Gauge Scale Properties

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/gauge/r_dash-daq_gauge.html

Customize the gauge's scale by modifying the start value, interval, and label interval. This example sets the scale to start at 0, with an interval of 3 and labels every 2 units.

```R
library(dashDaq)

daqGauge(
    label = "Scale",
    scale = list("start" = 0, "interval" = 3, "labelInterval" = 2),
    value = 3,
    min=0,
    max=24
)
```

--------------------------------

### Basic Button Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_html_components/Button/index.md

Renders a default button. The `n_clicks` property tracks the number of times the button has been clicked, starting from None.

```python
html.Button('Click Me!', id='click-button', n_clicks=0)
```

--------------------------------

### Default Circos Layout

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_bio/circos/index.md

An example of a default Circos layout with heatmap or chords tracks. This serves as a starting point for creating Circos visualizations.

```python
import dash_bio

def defaultCircos():
    return dash_bio.Circos(
        tracks = [
            {
                "type": "CHORDS",
                "data": [
                    {
                        "source": {"id": "chr1", "start": 100, "end": 200},
                        "target": {"id": "chr2", "start": 300, "end": 400}
                    }
                ]
            }
        ]
    )

```

--------------------------------

### Basic Dash App with External Stylesheet

Source: https://github.com/ayanke/dashr-documentation/blob/main/external_resources/r_external-resources.html

A simple Dash application setup that includes an external CSS stylesheet. This is a foundational example for styling Dash apps.

```R
app = Dash(__name__, external_stylesheets=external_stylesheets)

app.renderer = 'var renderer = new DashRenderer();'

app.layout = html.Div('Simple Dash App')

if __name__ == '__main__':
    app.run(debug=True)
```

--------------------------------

### Configure Dash App with External CSS and Assets

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Shows how to initialize a Dash app with external stylesheets, scripts, and meta tags, and how to serve static assets like CSS, JS, and images from an 'assets/' folder. This setup is crucial for customizing the app's appearance and functionality.

```r
library(dash)

# Directory structure:
# app.R
# assets/
#   typography.css
#   custom-script.js
#   logo.png

app <- Dash$new(
  external_stylesheets = list(
    "https://codepen.io/chriddyp/pen/bWLwgP.css"
  ),
  external_scripts = list(
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"
  ),
  meta_tags = list(
    list(name = "description", content = "My Dash App"),
    list(name = "viewport",    content = "width=device-width, initial-scale=1")
  )
)

# Serve asset files from a custom path (default is /assets)
# app <- Dash$new(assets_url_path = "/static")

app$layout(
  htmlDiv(list(
    htmlImg(src = "/assets/logo.png", style = list(height = "60px")),
    htmlH1("Styled App"),
    htmlP("This app uses custom CSS from the assets folder.")
  ))
)

app$run_server()
```

--------------------------------

### Default Numeric Input with Callback

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/numeric-input/r_dash-daq_numericinput.html

A basic example of a `daqNumericInput` component integrated into a Dash app with a callback to display the input's value. Ensure `dash`, `dashDaq`, and `dashHtmlComponents` libraries are installed.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqNumericInput(id = 'my-numeric-input',
                  value = 0),
  htmlDiv(id = 'numeric-input-output')
)))

app$callback(
  output(id = "numeric-input-output", property = "children"),
  params = list(input(id = "my-numeric-input", property = "value")),

  update_output <- function(value) {
    return(sprintf("The value is %s", value))
  }
)

app$run_server()
```

--------------------------------

### Initialize Dash App and Layout in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/graph_crossfiltering/r_interactive-graphing.html

Initializes a Dash application and sets up the basic layout with three graphs. Includes adding a stylesheet for basic styling.

```r
library(dash)

app <- dash_app()
app %>% add_stylesheet('https://codepen.io/chriddyp/pen/bWLwgP.css')

df <- as.data.frame(matrix(rnorm(180, seq(0, 50, 10), 0.1), ncol=6, byrow = TRUE))
colnames(df) <- paste("Column", 1:6)

app %>% set_layout(
  div(
    div(
      dccGraph(
        id = 'graph1',
        config = list(displayModeBar = FALSE)
      ),
      className = 'four columns'
    ),
    div(
      dccGraph(
        id = 'graph2',
        config = list(displayModeBar = FALSE)
      ),
      className='four columns'
    ),
    div(
      dccGraph(
        id = 'graph3',
        config = list(displayModeBar = FALSE)
      ),
      className = 'four columns'
    )
  )
)
```

--------------------------------

### Thermometer with Custom Scale

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/thermometer/r_dash-daq_thermometer.html

Configure custom intervals and labels for the thermometer's scale using the `scale` property. This example sets a custom start, interval, label interval, and specific labels for values 2 and 5.

```R
library(dashDaq)

daqThermometer(
  id = "my-daq-tscales",
  value = 5,
  scale = list(
    "start" = 2,
    "interval" = 3,
    "labelInterval" = 2,
    "custom" = list("2" = "ideal temperature",
                    "5" = "projected temperature")
  )
)
```

--------------------------------

### Create Manhattan and Volcano Plots with dashBio

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Utilizes the dashBio package to generate a Manhattan Plot for visualizing Genome-Wide Association Study (GWAS) results and a Volcano Plot for identifying significant markers. Requires installing the dash-bio package and provides examples of how to map data columns to plot properties.

```r
library(dash)
library(dashBio)

app <- dash_app()

# Manhattan Plot — visualize GWAS results
app %>% set_layout(
  dashbioManhattanPlot(
    id        = "manhattan-plot",
    dataframe = read.csv(
      "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/manhattan_data.csv"
    ),
    chrm       = "CHR",
    bp         = "BP",
    p          = "P",
    snp        = "SNP",
    gene       = "GENE",
    logpmin    = 3,
    logpmax    = 6,
    title      = "GWAS Manhattan Plot"
  ),

  # Volcano Plot — identify significant markers
  dashbioVolcanoPlot(
    id           = "volcano-plot",
    dataframe    = read.csv(
      "https://raw.githubusercontent.com/plotly/dash-bio-docs-files/master/volcano_data1.csv"
    ),
    effect_size  = "EFFECTSIZE",
    p            = "P",
    snp          = "SNP",
    gene         = "GENE",
    xlabel       = "Effect Size",
    title        = "Volcano Plot"
  )
)

app %>% run_app()
```

--------------------------------

### Simple ALLSMALLER Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/pattern_matching_callbacks/index.md

Demonstrates using `ALLSMALLER` to pass values from dropdowns with smaller indices to update divs. This simplifies logic by automatically filtering inputs based on their index.

```python
app.layout = html.Div([
    html.Div(id='output-divs-ex3'),
    dcc.Dropdown(id={'index': 0, 'type': 'filter-dropdown-ex3'}, options=[{'label': i, 'value': i} for i in ['A', 'B', 'C']], value='A'),
    html.Hr(),
    dcc.Dropdown(id={'index': 1, 'type': 'filter-dropdown-ex3'}, options=[{'label': i, 'value': i} for i in ['A', 'B', 'C']], value='A'),
    html.Hr(),
    html.Div(id={'index': 0, 'type': 'output-div-ex3'})
])


@app.callback(Output({'index': MATCH, 'type': 'output-div-ex3'}, 'children'),
              Input({'index': ALLSMALLER, 'type': 'filter-dropdown-ex3'}, 'value'))
def display_output(all_smaller_values):
    return f"All smaller values: {all_smaller_values}"

```

--------------------------------

### Create a Dash Application

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Initialize a new Dash application using either the pipe-style API (`dash_app()`) or the R6 method style (`Dash$new()`). Both return an R6 `Dash` object.

```r
library(dash)

# Pipe-style API (recommended)
app <- dash_app()

# Equivalent R6 method style
app <- Dash$new()
```

--------------------------------

### Color Gradient Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/graduated-bar/r_dash-daq_graduatedbar.html

Example of how to set a color gradient for the GraduatedBar.

```APIDOC
## Color Gradient

Set a color gradient with:

```R
color = list(
    'gradient' = TRUE,
    'ranges' = list(
        '<color>' = list(<value>, <value>),
        '<color>' = list(<value>, <value>),
        '<color>' = list(<value>, <value>)
    )
)

library(dashDaq)

daqGraduatedBar(
  color = list(
    "gradient" = TRUE,
    "ranges" = list(
      "green" = list(0, 4),
      "yellow" = list(4, 7),
      "red" = list(7, 10)
    )
  ),
  showCurrentValue = TRUE,
  value = 10
)
```
```

--------------------------------

### Create a Dash Application

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Initializes a new Dash application using either the pipe-style `dash_app()` or the R6 method `Dash$new()`. Returns an R6 `Dash` object that can be used to chain further configurations.

```APIDOC
## `dash_app()` / `Dash$new()` — Create a Dash Application

Initializes a new Dash application. Returns an R6 `Dash` object. Use the pipe operator (`%>%`) to chain calls to `set_layout()`, `add_callback()`, and `run_app()`, or call these as methods on the R6 object.

```r
library(dash)

# Pipe-style API (recommended)
app <- dash_app()

# Equivalent R6 method style
app <- Dash$new()
```
```

--------------------------------

### Default VolcanoPlot Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_bio/volcanoplot/index.md

A basic example of the VolcanoPlot component with default settings. No specific imports are required beyond the component itself.

```python
import dash_bio

app.layout = dash_bio.VolcanoPlot(
    # No specific properties are set here,
    # so the component will render with default values.
)
```

--------------------------------

### Alternative Dash App Initialization and Layout in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/getting_started/r_layout.html

Demonstrates alternative syntax for initializing and setting the layout of a Dash app using the pipe operator for a more functional programming style. This is functionally equivalent to the previous example.

```r
dash_app() %>%
  set_layout(...)

  run_app()
```

--------------------------------

### Implement Data Acquisition Control Components with dashDaq

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Demonstrates the use of dashDaq components for industrial-style control and monitoring, including a Gauge, Boolean Switch, LED Display, and Thermometer. Shows how to configure their properties and link a boolean switch to update a text output via a callback.

```r
library(dash)
library(dashDaq)

app <- dash_app()

app %>% set_layout(
  div(
    style = list(display = "flex", gap = "30px", padding = "20px"),

    # Gauge
    daqGauge(
      id    = "speed-gauge",
      label = "Speed (mph)",
      value = 60,
      min   = 0,
      max   = 120,
      color = list(gradient = TRUE,
                   ranges   = list(green  = list(0, 40),
                                   yellow = list(40, 80),
                                   red    = list(80, 120)))
    ),

    # Boolean Switch
    daqBooleanSwitch(id = "power-switch", on = TRUE, label = "Power"),

    # LED Display
    daqLEDDisplay(id = "led-display", value = "3.14159", label = "Pi"),

    # Thermometer
    daqThermometer(
      id    = "thermometer",
      value = 72,
      min   = 0,
      max   = 100,
      label = "Temperature (°F)"
    )
  ),
  div(id = "daq-output")
)

app %>% add_callback(
  output("daq-output", "children"),
  input("power-switch", "on"),
  function(is_on) {
    if (is_on) "System is ON" else "System is OFF"
  }
)

app %>% run_app()
```

--------------------------------

### Install Dash R Package

Source: https://github.com/ayanke/dashr-documentation/blob/main/README.md

Installs the Dash R package and its dependencies from CRAN. Ensure you have R version 3.0.2 or higher.

```r
install.packages("dash")
```

--------------------------------

### Default Gauge Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/gauge/r_dash-daq_gauge.html

A basic example of a default Gauge component with a slider to control its value. Requires dash, dashDaq, dashHtmlComponents, and dashCoreComponents libraries.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)
library(dashCoreComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqGauge(id = 'my-gauge',
         label = 'Default',
         value = 6),
  dccSlider(
    id = 'my-gauge-slider',
    min = 0,
    max = 10,
    step = 1,
    value = 5
  )
)))

app$callback(
  output(id = "my-gauge", property = "value"),
  params = list(input(id = "my-gauge-slider", property = "value")),

  update_output <- function(value) {
    return(value)
  }
)

app$run_server()
```

--------------------------------

### Install Dash for R

Source: https://context7.com/ayanke/dashr-documentation/llms.txt

Install the Dash for R package from CRAN for the stable release or from GitHub for the development version. Load the package using `library(dash)`.

```r
# From CRAN (stable release)
install.packages("dash")

# From GitHub (development version)
install.packages("remotes")
remotes::install_github("plotly/dashR", upgrade = "always")

# Load the package
library(dash)
```

--------------------------------

### Default Joystick with Callback

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/joystick/r_dash-daq_joystick.html

Demonstrates a default Joystick with a callback to display its angle and force. Ensure 'dash', 'dashDaq', and 'dashHtmlComponents' libraries are installed.

```R
library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqJoystick(id = 'my-joystick',
               label = 'Default',
               angle = 0),
  htmlDiv(id = 'joystick-output')
)))

app$callback(
  output(id = "joystick-output", property = "children"),
  params = list(
    input(id = "my-joystick", property = "angle"),
    input(id = "my-joystick", property = "force")
  ),

  update_output <- function(angle, force) {
    return(list(
      sprintf('Angle is %s', angle),
      htmlBr(),
      sprintf('Force is %s', force)
    ))
  }
)

app$run_server()
```

--------------------------------

### Initialize Dash App in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/README.md

Initializes a new Dash application instance using the R6 class `Dash`.

```r
library(dash)

app <- Dash$new()
```

--------------------------------

### Create a Basic Dash App Layout in R

Source: https://github.com/ayanke/dashr-documentation/blob/main/getting_started/r_layout.html

This snippet shows how to initialize a Dash app, define its layout with HTML components and a dccGraph, and then run the app. It requires the 'dash' and 'dashCoreComponents' libraries.

```r
library(dash)
library(dashCoreComponents)

# Create a Dash app
app <- dash_app()

# Set the layout of the app
app %>% set_layout(
  h1('Hello Dash'),
  div("Dash: A web application framework for your data."),
  dccGraph(
    figure = list(
      data = list(
        list(
          x = list(1, 2, 3),
          y = list(4, 1, 2),
          type = 'bar',
          name = 'SF'
        ),
        list(
          x = list(1, 2, 3),
          y = list(2, 4, 5),
          type = 'bar',
          name = 'Montréal'
        )
      ),
      layout = list(title = 'Dash Data Visualization')
    )
  )
)

# Run the app
app %>% run_app()
```

--------------------------------

### Knob Scale

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_daq/knob/index.md

Adjust the scale properties of the knob, including the interval between scale marks (`'interval'`), the interval for labels (`'label'`), and the starting point of the scale (`'start'`).

```r
library(dash)
library(dashDAQ)

app <- dash_app()

app %>%
    add_layout(
        dash_daq(
            id = "knob",
            scale = list(
                'interval' = 5,
                'label' = 10,
                'start' = 0
                )
            )
        )
    )

app %>%
    run_server()

```

--------------------------------

### Simple DatePickerRange Example

Source: https://github.com/ayanke/dashr-documentation/blob/main/dash_core_components/DatePickerRange/index.md

A basic example of dcc.DatePickerRange. The min_date_ الميلاد and max_date_ الميلاد properties define the selectable date range, while initial_visible_month sets the initially displayed month.

```python
dcc.DatePickerRange(
    id='date-picker-range',
    min_date_ الميلاد=dt(2020, 1, 1),
    max_date_ الميلاد=dt(2021, 12, 31),
    initial_visible_month=dt(2021, 1, 1),
    end_date=dt(2021, 5, 15),
    start_date=dt(2021, 4, 15)
)
```