Input UI components for the AreaPlot module
Source:R/plotthis_AreaPlot_module_ui.R
plotthis_AreaPlotInputsUI.RdThis should be placed in the UI where the inputs should be shown, with an id
that matches the id used in the plotthis_AreaPlotServer() and plotthis_AreaPlotOutputUI() functions.
Details
The user inputs for this module are separated from the outputs to allow for more flexible UI design.
The inputs will automatically be organized into a grid layout via the organize_inputs() function,
with columns controlling the number of columns in the grid.
Defaults can be set for each input by providing a named list of values to the defaults argument.
Nearly all parameters for plotthis::AreaPlot() can be set via these inputs, so see the help
for that function for an exhaustive list.
Plot parameters not implemented or with altered functionality
The following plotthis::AreaPlot() parameters are not available via UI inputs:
xlab- X-axis label (plotly allows interactive editing)ylab- Y-axis label (plotly allows interactive editing)title- Plot title (plotly allows interactive editing)subtitle- Plot subtitle (not supported in plotly)aspect.ratio- Aspect ratio control (handled by plotly layout)legend.position- Legend positioning (plotly allows interactive repositioning)split_by- Split variable (returns a patchwork object, not supported in plotly), usefacet_byinsteaddesign- Only applies ifsplit_byis usedsplit_by_sep- Only applies ifsplit_byis usedaxes- Only applies ifsplit_byis usedaxis_titles- Only applies ifsplit_byis usedguides- Only applies ifsplit_byis usedbyrow- Only applies ifsplit_byis usednrow- Only applies ifsplit_byis usedncol- Only applies ifsplit_byis usedpalette- Managed internally via the palette selection UIlegend_direction- Managed position of legend however this can be handled via plotly
Plot parameters and defaults
The following plotthis::AreaPlot() parameters can be accessed via UI inputs and/or the defaults argument:
x- X-axis variable (UI: "X values", default: 2nd categorical variable)y- Y-axis variable (UI: "Y values", default: 2nd numeric variable)group_by- Grouping variable for area fill (UI: "Group by", default: 3rd categorical variable or "")facet_by- Faceting variable (UI: "Facet by", default: "")facet_scales- Facet scale behavior (UI: "Facet scale", default: "fixed")facet_ncol- Number of facet columns (UI: "Facet number of columns", default: NULL)facet_nrow- Number of facet rows (UI: "Facet number of rows", default: NULL)facet_byrow- Facet ordering direction (UI: "Facet by row", default: TRUE)palcolor- Custom color values (UI: palette picker, derived from palette)alpha- Area fill transparency (UI: "Alpha", default: 1)scale_y- Scale y-axis by total (UI: "Scale y-axis by total", default: FALSE)
Parameters controlling additional functionality
The following parameters implementing new functionality or controlling plotly-specific features are also available:
title.font.size- Plot title font size (UI: "Title Size", default: 26)title.font.family- Font family for title text (UI: "Title Font", default: "Arial")title.font.color- Color for plot title (UI: "Title Color", default: "#000000")axis.title.font.size- Axis title font size (UI: "Axis Title Size", default: 18)axis.title.font.color- Axis title font color (UI: "Axis Title Color", default: "#000000")axis.title.font.family- Axis title font family (UI: "Axis Title Font", default: "Arial")axis.showline- Show axis border lines (UI: "Show axis lines", default: TRUE)axis.mirror- Mirror axis lines on opposite side (UI: "Mirror axis lines", default: TRUE)show.grid.x- Show X-axis major gridlines (UI: "Show X major gridlines", default: TRUE)show.grid.y- Show Y-axis major gridlines (UI: "Show Y major gridlines", default: TRUE)axis.linecolor- Color of axis lines (UI: "Axis line color", default: "black")axis.linewidth- Width of axis lines (UI: "Axis line width", default: 0.5)axis.tickfont.size- Size of tick labels (UI: "Tick label size", default: 12)axis.tickfont.color- Color of tick labels (UI: "Tick label color", default: "black")axis.tickfont.family- Font family for tick labels (UI: "Tick label font", default: "Arial")axis.tickangle.x- Rotation angle for X-axis tick labels (UI: "X-axis tick label angle", default: 0)axis.tickangle.y- Rotation angle for Y-axis tick labels (UI: "Y-axis tick label angle", default: 0)axis.ticks- Position of tick marks (UI: "Tick position", default: "outside")axis.tickcolor- Color of tick marks (UI: "Tick mark color", default: "black")axis.ticklen- Length of tick marks (UI: "Tick mark length", default: 5)axis.tickwidth- Width of tick marks (UI: "Tick mark width", default: 1)hline.intercepts- Y-coordinates for horizontal reference lines (UI: "Y-intercepts", default: "")hline.colors- Colors for horizontal lines (UI: "Colors", default: "#000000")hline.widths- Widths for horizontal lines (UI: "Widths", default: "1")hline.linetypes- Line types for horizontal lines (UI: "Line types", default: "dashed")hline.opacities- Opacities for horizontal lines (UI: "Opacities (0-1)", default: "1")vline.intercepts- X-coordinates for vertical reference lines (UI: "X-intercepts", default: "")vline.colors- Colors for vertical lines (UI: "Colors", default: "#000000")vline.widths- Widths for vertical lines (UI: "Widths", default: "1")vline.linetypes- Line types for vertical lines (UI: "Line types", default: "dashed")vline.opacities- Opacities for vertical lines (UI: "Opacities (0-1)", default: "1")abline.slopes- Slopes for diagonal reference lines (UI: "Slopes", default: "")abline.intercepts- Y-intercepts for diagonal lines (UI: "Y-intercepts", default: "")abline.colors- Colors for diagonal lines (UI: "Colors", default: "#000000")abline.widths- Widths for diagonal lines (UI: "Widths", default: "1")abline.linetypes- Line types for diagonal lines (UI: "Line types", default: "dashed")abline.opacities- Opacities for diagonal lines (UI: "Opacities (0-1)", default: "1")
Examples
library(VizModules)
# Needs at least 2 categorical variables for grouping and x-axis
mtcars$cyl <- as.factor(mtcars$cyl)
mtcars$gear <- as.factor(mtcars$gear)
plotthis_AreaPlotInputsUI("areaPlot", mtcars)
#> <div class="tabbable">
#> <ul class="nav nav-tabs shiny-tab-input" id="areaPlot-AreaPlotTabsetPanel" data-tabsetid="6320">
#> <li class="active">
#> <a href="#tab-6320-1" data-toggle="tab" data-bs-toggle="tab" data-value="Data">Data</a>
#> </li>
#> <li>
#> <a href="#tab-6320-2" data-toggle="tab" data-bs-toggle="tab" data-value="Facet">Facet</a>
#> </li>
#> <li>
#> <a href="#tab-6320-3" data-toggle="tab" data-bs-toggle="tab" data-value="Aesthetics">Aesthetics</a>
#> </li>
#> <li>
#> <a href="#tab-6320-4" data-toggle="tab" data-bs-toggle="tab" data-value="Plotly">Plotly</a>
#> </li>
#> <li>
#> <a href="#tab-6320-5" data-toggle="tab" data-bs-toggle="tab" data-value="Axes">Axes</a>
#> </li>
#> <li>
#> <a href="#tab-6320-6" data-toggle="tab" data-bs-toggle="tab" data-value="Lines">Lines</a>
#> </li>
#> </ul>
#> <div class="tab-content" data-tabsetid="6320">
#> <div class="tab-pane active" data-value="Data" id="tab-6320-1">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify9068794">
#> <label class="control-label" id="areaPlot-x.data-label" for="areaPlot-x.data">X Values</label>
#> <div>
#> <select id="areaPlot-x.data" class="shiny-input-select"><option value=""></option>
#> <option value="cyl" selected>cyl</option>
#> <option value="gear">gear</option></select>
#> <script type="application/json" data-for="areaPlot-x.data">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9068794', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A character string specifying the column name of the data frame to plot for the x-axis.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify359099">
#> <label class="control-label" id="areaPlot-y.data-label" for="areaPlot-y.data">Y Values</label>
#> <div>
#> <select id="areaPlot-y.data" class="shiny-input-select"><option value=""></option>
#> <option value="mpg" selected>mpg</option>
#> <option value="disp">disp</option>
#> <option value="hp">hp</option>
#> <option value="drat">drat</option>
#> <option value="wt">wt</option>
#> <option value="qsec">qsec</option>
#> <option value="vs">vs</option>
#> <option value="am">am</option>
#> <option value="carb">carb</option></select>
#> <script type="application/json" data-for="areaPlot-y.data">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify359099', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A character string specifying the column name of the data frame to plot for the y-axis.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1314185">
#> <label class="control-label" id="areaPlot-group.by-label" for="areaPlot-group.by">Group By</label>
#> <div>
#> <select id="areaPlot-group.by" class="shiny-input-select"><option value=""></option>
#> <option value=""></option>
#> <option value="gear" selected>gear</option></select>
#> <script type="application/json" data-for="areaPlot-group.by">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1314185', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Columns to group the data for plotting For those plotting functions that do not support multiple groups, They will be concatenated into one column, using `group_by_sep` as the separator'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify940304">
#> <div class="material-switch">
#> <label for="areaPlot-scale.y" style="padding-right: 10px;">Scale Y-Axis by Total</label>
#> <input id="areaPlot-scale.y" type="checkbox"/>
#> <label class="switch label-success bg-success" for="areaPlot-scale.y"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify940304', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A logical value to scale the y-axis by the total number in each x-axis group.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Facet" id="tab-6320-2">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify6965836">
#> <label class="control-label" id="areaPlot-facet.by-label" for="areaPlot-facet.by">Facet By</label>
#> <div>
#> <select id="areaPlot-facet.by" class="shiny-input-select"><option value="" selected></option>
#> <option value="gear">gear</option>
#> <option value="" selected></option></select>
#> <script type="application/json" data-for="areaPlot-facet.by">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify6965836', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A character string specifying the column name of the data frame to facet the plot. Otherwise, the data will be split by `split_by` and generate multiple plots and combine them into one using `patchwork::wrap_plots`'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify4057287">
#> <label class="control-label" id="areaPlot-facet.scale-label" for="areaPlot-facet.scale">Facet Scale</label>
#> <div>
#> <select id="areaPlot-facet.scale" class="shiny-input-select"><option value="fixed" selected>fixed</option>
#> <option value="free">free</option>
#> <option value="free_x">free_x</option>
#> <option value="free_y">free_y</option></select>
#> <script type="application/json" data-for="areaPlot-facet.scale" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify4057287', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Whether to scale the axes of facets. Default is "fixed" Other options are "free", "free_x", "free_y". See `ggplot2::facet_wrap`'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify656367">
#> <label class="control-label" id="areaPlot-facet.ncol-label" for="areaPlot-facet.ncol">Number of Columns</label>
#> <input id="areaPlot-facet.ncol" type="number" class="shiny-input-number form-control" value="NA" data-update-on="change" min="0" max="20"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify656367', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value specifying the number of columns in the facet. When facet_by is a single column and facet_wrap is used.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1264927">
#> <label class="control-label" id="areaPlot-facet.nrow-label" for="areaPlot-facet.nrow">Number of Rows</label>
#> <input id="areaPlot-facet.nrow" type="number" class="shiny-input-number form-control" value="NA" data-update-on="change" min="0" max="20"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1264927', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value specifying the number of rows in the facet. When facet_by is a single column and facet_wrap is used.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify9373302">
#> <div class="material-switch">
#> <label for="areaPlot-facet.by.row" style="padding-right: 10px;">Facet By Row</label>
#> <input id="areaPlot-facet.by.row" type="checkbox" checked="checked"/>
#> <label class="switch label-success bg-success" for="areaPlot-facet.by.row"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9373302', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A logical value indicating whether to fill the plots by row. Default is TRUE.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Aesthetics" id="tab-6320-3">
#> <div class="row">
#> <div class="col-sm-6">
#> <div id="areaPlot-palette.selection" class="shiny-html-output"></div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify2163803">
#> <label class="control-label" id="areaPlot-alpha-label" for="areaPlot-alpha">Alpha</label>
#> <input id="areaPlot-alpha" type="number" class="shiny-input-number form-control" value="1" data-update-on="change" min="0" max="1"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify2163803', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value specifying the transparency of the plot.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Plotly" id="tab-6320-4">
#> <div class="row">
#> <div class="col-sm-6">
#> <a aria-disabled="true" class="btn btn-default shiny-download-link disabled btn-secondary" download href="" id="areaPlot-download.interactive" tabindex="-1" target="_blank" width="100%">
#> <i class="fas fa-download" role="presentation" aria-label="download icon"></i>
#> Save Interactive
#> </a>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" style="width:100%;">
#> <label class="control-label" id="areaPlot-download.format-label" for="areaPlot-download.format">Download Format</label>
#> <div>
#> <select id="areaPlot-download.format" class="shiny-input-select"><option value="svg" selected>svg</option>
#> <option value="png">png</option>
#> <option value="jpeg">jpeg</option>
#> <option value="webp">webp</option></select>
#> <script type="application/json" data-for="areaPlot-download.format" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify6660920">
#> <label class="control-label" id="areaPlot-margin.t-label" for="areaPlot-margin.t">Margin Top</label>
#> <input id="areaPlot-margin.t" type="number" class="shiny-input-number form-control" value="70" data-update-on="change" min="0" step="5"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify6660920', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Top margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify2039007">
#> <label class="control-label" id="areaPlot-margin.b-label" for="areaPlot-margin.b">Margin Bottom</label>
#> <input id="areaPlot-margin.b" type="number" class="shiny-input-number form-control" value="70" data-update-on="change" min="0" step="5"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify2039007', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Bottom margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify5485914">
#> <label class="control-label" id="areaPlot-margin.l-label" for="areaPlot-margin.l">Margin Left</label>
#> <input id="areaPlot-margin.l" type="number" class="shiny-input-number form-control" value="70" data-update-on="change" min="0" step="5"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify5485914', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Left margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8275014">
#> <label class="control-label" id="areaPlot-margin.r-label" for="areaPlot-margin.r">Margin Right</label>
#> <input id="areaPlot-margin.r" type="number" class="shiny-input-number form-control" value="70" data-update-on="change" min="0" step="5"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8275014', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Right margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1275577">
#> <label class="control-label" id="areaPlot-subplot.margin-label" for="areaPlot-subplot.margin">Subplot Spacing</label>
#> <input id="areaPlot-subplot.margin" type="number" class="shiny-input-number form-control" value="0.04" data-update-on="change" min="0" max="1" step="0.01"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1275577', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Spacing between facet panels as a fraction of the plot area. Only applies when faceting is active.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour" id="tipify2611861">
#> <label class="control-label" for="areaPlot-shape.fill">Shape Fill</label>
#> <input id="areaPlot-shape.fill" type="text" class="form-control shiny-colour-input" data-init-value="rgba(0, 0, 0, 0)" data-show-colour="both" data-palette="square" data-allow-alpha="true"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify2611861', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Interior fill color for shapes drawn on the plot using Plotly's drawing tools'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour" id="tipify2884170">
#> <label class="control-label" for="areaPlot-shape.line.color">Shape Line Color</label>
#> <input id="areaPlot-shape.line.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square" data-allow-alpha="true"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify2884170', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Outline color for shapes drawn on the plot using Plotly's drawing tools'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify147691">
#> <label class="control-label" id="areaPlot-shape.line.width-label" for="areaPlot-shape.line.width">Shape Line Width</label>
#> <input id="areaPlot-shape.line.width" type="number" class="shiny-input-number form-control" value="4" data-update-on="change" min="0" step="0.25"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify147691', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Outline width for shapes drawn on the plot using Plotly's drawing tools'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8537237">
#> <label class="control-label" id="areaPlot-shape.linetype-label" for="areaPlot-shape.linetype">Shape Linetype</label>
#> <div>
#> <select id="areaPlot-shape.linetype" class="shiny-input-select"><option value="solid" selected>solid</option>
#> <option value="dot">dot</option>
#> <option value="dash">dash</option>
#> <option value="longdash">longdash</option>
#> <option value="dashdot">dashdot</option>
#> <option value="longdashdot">longdashdot</option></select>
#> <script type="application/json" data-for="areaPlot-shape.linetype" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8537237', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Line dash style for shapes drawn on the plot using Plotly's drawing tools'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify4140478">
#> <label class="control-label" id="areaPlot-shape.opacity-label" for="areaPlot-shape.opacity">Shape Opacity</label>
#> <input id="areaPlot-shape.opacity" type="number" class="shiny-input-number form-control" value="1" data-update-on="change" min="0" max="1" step="0.01"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify4140478', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Opacity of shapes drawn on the plot, where 0 is fully transparent and 1 is fully opaque'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Axes" id="tab-6320-5">
#> <div class="row">
#> <div class="col-sm-6"></div>
#> <div class="col-sm-6"></div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6"></div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-title.font.family-label" for="areaPlot-title.font.family">Title Font</label>
#> <div>
#> <select id="areaPlot-title.font.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="areaPlot-title.font.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-title.font.color">Title Color</label>
#> <input id="areaPlot-title.font.color" type="text" class="form-control shiny-colour-input" data-init-value="#000000" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-title.font.size-label" for="areaPlot-title.font.size">Title Size</label>
#> <input id="areaPlot-title.font.size" type="number" class="shiny-input-number form-control" value="26" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.title.font.size-label" for="areaPlot-axis.title.font.size">Axis Title Size</label>
#> <input id="areaPlot-axis.title.font.size" type="number" class="shiny-input-number form-control" value="18" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-axis.title.font.color">Axis Title Color</label>
#> <input id="areaPlot-axis.title.font.color" type="text" class="form-control shiny-colour-input" data-init-value="#000000" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.title.font.family-label" for="areaPlot-axis.title.font.family">Axis Title Font</label>
#> <div>
#> <select id="areaPlot-axis.title.font.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="areaPlot-axis.title.font.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="areaPlot-axis.showline" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show Axis Borders</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="areaPlot-axis.mirror" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Mirror Axis Borders</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="areaPlot-show.grid.x" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show X Gridlines</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="areaPlot-show.grid.y" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show Y Gridlines</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-grid.color">Gridline Color</label>
#> <input id="areaPlot-grid.color" type="text" class="form-control shiny-colour-input" data-init-value="#CCCCCC" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-axis.linecolor">Axis Line Color</label>
#> <input id="areaPlot-axis.linecolor" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.linewidth-label" for="areaPlot-axis.linewidth">Axis Line Width</label>
#> <input id="areaPlot-axis.linewidth" type="number" class="shiny-input-number form-control" value="0.5" data-update-on="change" min="0" step="0.1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.tickfont.size-label" for="areaPlot-axis.tickfont.size">Tick Label Size</label>
#> <input id="areaPlot-axis.tickfont.size" type="number" class="shiny-input-number form-control" value="12" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-axis.tickfont.color">Tick Label Color</label>
#> <input id="areaPlot-axis.tickfont.color" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.tickfont.family-label" for="areaPlot-axis.tickfont.family">Tick Label Font</label>
#> <div>
#> <select id="areaPlot-axis.tickfont.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="areaPlot-axis.tickfont.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.tickangle.x-label" for="areaPlot-axis.tickangle.x">X Tick Label Angle</label>
#> <input id="areaPlot-axis.tickangle.x" type="number" class="shiny-input-number form-control" value="0" data-update-on="change" min="-180" max="180" step="15"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.tickangle.y-label" for="areaPlot-axis.tickangle.y">Y Tick Label Angle</label>
#> <input id="areaPlot-axis.tickangle.y" type="number" class="shiny-input-number form-control" value="0" data-update-on="change" min="-180" max="180" step="15"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.ticks-label" for="areaPlot-axis.ticks">Tick Position</label>
#> <div>
#> <select id="areaPlot-axis.ticks" class="shiny-input-select"><option value="outside" selected>Outside</option>
#> <option value="inside">Inside</option>
#> <option value="">None</option></select>
#> <script type="application/json" data-for="areaPlot-axis.ticks">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-axis.tickcolor">Tick Mark Color</label>
#> <input id="areaPlot-axis.tickcolor" type="text" class="form-control shiny-colour-input" data-init-value="black" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.ticklen-label" for="areaPlot-axis.ticklen">Tick Mark Length</label>
#> <input id="areaPlot-axis.ticklen" type="number" class="shiny-input-number form-control" value="5" data-update-on="change" min="0" step="1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-axis.tickwidth-label" for="areaPlot-axis.tickwidth">Tick Mark Width</label>
#> <input id="areaPlot-axis.tickwidth" type="number" class="shiny-input-number form-control" value="1" data-update-on="change" min="0" step="0.1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-facet.title.font.size-label" for="areaPlot-facet.title.font.size">Facet Subplot Title Size</label>
#> <input id="areaPlot-facet.title.font.size" type="number" class="shiny-input-number form-control" value="18" data-update-on="change" min="1" step="1"/>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="areaPlot-facet.title.font.color">Facet Title Color</label>
#> <input id="areaPlot-facet.title.font.color" type="text" class="form-control shiny-colour-input" data-init-value="#000000" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="areaPlot-facet.title.font.family-label" for="areaPlot-facet.title.font.family">Facet Title Font</label>
#> <div>
#> <select id="areaPlot-facet.title.font.family" class="shiny-input-select"><option value="Arial" selected>Arial</option>
#> <option value="Balto">Balto</option>
#> <option value="Courier New">Courier New</option>
#> <option value="Droid Sans">Droid Sans</option>
#> <option value="Droid Serif">Droid Serif</option>
#> <option value="Droid Sans Mono">Droid Sans Mono</option>
#> <option value="Gravitas One">Gravitas One</option>
#> <option value="Old Standard TT">Old Standard TT</option>
#> <option value="Open Sans">Open Sans</option>
#> <option value="Overpass">Overpass</option>
#> <option value="PT Sans Narrow">PT Sans Narrow</option>
#> <option value="Raleway">Raleway</option>
#> <option value="Times New Roman">Times New Roman</option>
#> <option value="Verdana">Verdana</option>
#> <option value="sans-serif">sans-serif</option>
#> <option value="serif">serif</option>
#> <option value="monospace">monospace</option></select>
#> <script type="application/json" data-for="areaPlot-facet.title.font.family" data-nonempty="">{"plugins":["selectize-plugin-a11y"]}</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Lines" id="tab-6320-6">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7510138">
#> <label class="control-label" id="areaPlot-hline.intercepts-label" for="areaPlot-hline.intercepts">Y-intercepts</label>
#> <input id="areaPlot-hline.intercepts" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7510138', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'For categorical or factor axes, enter the index (position) of the category rather than its name. For example, if the axis categories are 'Audi', 'Mercedes', 'Bugatti', enter 2 to place a line at 'Mercedes'.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7190139">
#> <label class="control-label" id="areaPlot-hline.colors-label" for="areaPlot-hline.colors">Y Colors</label>
#> <input id="areaPlot-hline.colors" type="text" class="shiny-input-text form-control" value="#000000" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7190139', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Color(s) for horizontal reference lines, as comma-separated hex codes or color names'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify5153553">
#> <label class="control-label" id="areaPlot-hline.widths-label" for="areaPlot-hline.widths">Y Widths</label>
#> <input id="areaPlot-hline.widths" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify5153553', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Width(s) for horizontal reference lines in pixels, as comma-separated values'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify9748362">
#> <label class="control-label" id="areaPlot-hline.linetypes-label" for="areaPlot-hline.linetypes">Y Line Types</label>
#> <input id="areaPlot-hline.linetypes" type="text" class="shiny-input-text form-control" value="dashed" placeholder="solid, dashed, dotted, ..." data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9748362', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Line style(s) for horizontal reference lines (solid, dashed, dotted, longdash, dashdot)'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify3607776">
#> <label class="control-label" id="areaPlot-hline.opacities-label" for="areaPlot-hline.opacities">Y Opacities (0-1)</label>
#> <input id="areaPlot-hline.opacities" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3607776', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Opacity of horizontal reference lines between 0 (transparent) and 1 (opaque), as comma-separated values'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1703955">
#> <label class="control-label" id="areaPlot-vline.intercepts-label" for="areaPlot-vline.intercepts">X-intercepts</label>
#> <input id="areaPlot-vline.intercepts" type="text" class="shiny-input-text form-control" value="" placeholder="e.g. 2, -2" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1703955', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'For categorical or factor axes, enter the index (position) of the category rather than its name. For example, if the axis categories are 'Audi', 'Mercedes', 'Bugatti', enter 2 to place a line at 'Mercedes'.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7831406">
#> <label class="control-label" id="areaPlot-vline.colors-label" for="areaPlot-vline.colors">X Colors</label>
#> <input id="areaPlot-vline.colors" type="text" class="shiny-input-text form-control" value="#000000" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7831406', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Color(s) for vertical reference lines, as comma-separated hex codes or color names'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify309239">
#> <label class="control-label" id="areaPlot-vline.widths-label" for="areaPlot-vline.widths">X Widths</label>
#> <input id="areaPlot-vline.widths" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify309239', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Width(s) for vertical reference lines in pixels, as comma-separated values'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7894203">
#> <label class="control-label" id="areaPlot-vline.linetypes-label" for="areaPlot-vline.linetypes">X Line Types</label>
#> <input id="areaPlot-vline.linetypes" type="text" class="shiny-input-text form-control" value="dashed" placeholder="solid, dashed, dotted, ..." data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7894203', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Line style(s) for vertical reference lines (solid, dashed, dotted, longdash, dashdot)'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1666037">
#> <label class="control-label" id="areaPlot-vline.opacities-label" for="areaPlot-vline.opacities">X Opacities (0-1)</label>
#> <input id="areaPlot-vline.opacities" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1666037', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Opacity of vertical reference lines between 0 (transparent) and 1 (opaque), as comma-separated values'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify287126">
#> <label class="control-label" id="areaPlot-abline.slopes-label" for="areaPlot-abline.slopes">Ab Slopes</label>
#> <input id="areaPlot-abline.slopes" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify287126', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Slope(s) of diagonal reference lines (rise/run), as comma-separated values'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7859511">
#> <label class="control-label" id="areaPlot-abline.intercepts-label" for="areaPlot-abline.intercepts">Ab Y-intercepts</label>
#> <input id="areaPlot-abline.intercepts" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7859511', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'For categorical or factor axes, enter the index (position) of the category rather than its name. For example, if the axis categories are 'Audi', 'Mercedes', 'Bugatti', enter 2 to place a line at 'Mercedes'.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8253078">
#> <label class="control-label" id="areaPlot-abline.colors-label" for="areaPlot-abline.colors">Ab Colors</label>
#> <input id="areaPlot-abline.colors" type="text" class="shiny-input-text form-control" value="#000000" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8253078', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Color(s) for diagonal reference lines, as comma-separated hex codes or color names'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify9652404">
#> <label class="control-label" id="areaPlot-abline.widths-label" for="areaPlot-abline.widths">Ab Widths</label>
#> <input id="areaPlot-abline.widths" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9652404', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Width(s) for diagonal reference lines in pixels, as comma-separated values'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify3786412">
#> <label class="control-label" id="areaPlot-abline.linetypes-label" for="areaPlot-abline.linetypes">Ab Line Types</label>
#> <input id="areaPlot-abline.linetypes" type="text" class="shiny-input-text form-control" value="dashed" placeholder="solid, dashed, dotted, ..." data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3786412', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Line style(s) for diagonal reference lines (solid, dashed, dotted, longdash, dashdot)'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1743864">
#> <label class="control-label" id="areaPlot-abline.opacities-label" for="areaPlot-abline.opacities">Ab Opacities (0-1)</label>
#> <input id="areaPlot-abline.opacities" type="text" class="shiny-input-text form-control" value="1" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1743864', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Opacity of diagonal reference lines between 0 (transparent) and 1 (opaque), as comma-separated values'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="areaPlot-auto.update" style="padding-right: 10px;">Auto Update</label>
#> <input id="areaPlot-auto.update" type="checkbox" checked="checked"/>
#> <label class="switch label-success bg-success" for="areaPlot-auto.update"></label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <button id="areaPlot-update" style="width:100%;" type="button" class="btn btn-default action-button"><span class="action-label">Update</span></button>
#> </div>
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <button class="btn btn-default action-button btn-secondary" id="areaPlot-reset" style="width:100%;" type="button"><span class="action-label">Reset</span></button>
#> </div>
#> </div>