Input UI components for the SplitBarPlot module
Source:R/plotthis_SplitBarPlot_module_ui.R
plotthis_SplitBarPlotInputsUI.RdThis should be placed in the UI where the inputs should be shown, with an id
that matches the id used in the plotthis_SplitBarPlotServer() and plotthis_SplitBarPlotOutputUI() 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::SplitBarPlot() 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::SplitBarPlot() 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)y_sep- Separator for y columns (not applicable in UI context)split_by_sep- Separator for split columns (not applicable in UI context)order_y- Y-axis ordering rules (handled by default logic)lineheight- Text line height (not applicable in plotly)max_charwidth- Maximum character width (not applicable in plotly)fill_by_sep- Separator for fill columns (not applicable in UI context)fill_name- Fill legend name (handled by plotly)direction_name- Direction legend name (not implemented)direction_pos_name- Positive direction name (not implemented)direction_neg_name- Negative direction name (not implemented)theme- ggplot2 theme (not applicable in plotly)theme_args- Theme arguments (not applicable in plotly)palette- Managed internally via the palette selection UIkeep_empty- Keep empty values (not implemented)keep_na- Keep NA values (not implemented)combine- Only applies ifsplit_byis usednrow- Only applies ifsplit_byis usedncol- Only applies ifsplit_byis usedbyrow- Only applies ifsplit_byis usedseed- Random seed (not applicable)axes- Only applies ifsplit_byis usedaxis_titles- Only applies ifsplit_byis usedguides- Only applies ifsplit_byis useddesign- Only applies ifsplit_byis usedlegend.direction- Managed position of legend however this can be handled via plotly
Plot parameters and defaults
The following plotthis::SplitBarPlot() parameters can be accessed via UI inputs and/or the defaults argument:
x- X-axis variable (UI: "X values", defaults key:x.data, default: 2nd numeric variable)y- Y-axis grouping variable (UI: "Y values", defaults key:y.data, default: 2nd categorical variable)fill_by- Fill color variable (UI: "Fill by", default: 2nd variable)flip- Flip/swap the x and y axes (UI: "Rotate (swap X/Y)", default: FALSE)alpha_by- Variable for alpha transparency (UI: "Alpha by", default: "")alpha_reverse- Reverse alpha order (UI: "Alpha reverse", default: FALSE)alpha_name- Alpha legend name (UI: "Alpha name", default: "")bar_height- Height of bars (UI: "Bar height", default: 0.9)facet_by- Faceting variable (UI: "Facet by", default: "")facet_scales- Facet scale behavior (UI: "Facet scale", default: "free_y")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)split_by- Split variable (UI: "Split by", default: "")x_min- Minimum X-axis value (UI: "X-axis min", default: calculated from data)x_max- Maximum X-axis value (UI: "X-axis max", default: calculated from data)palcolor- Custom color values (UI: palette picker, derived from palette)palreverse- Reverse the color palette (UI: "Reverse palette", default: FALSE)
Parameters controlling additional functionality
The following parameters implementing new functionality or controlling plotly-specific features are also available:
label.on.y.axis- Show category labels on the Y axis instead of on the plot (UI: "Labels on Y axis", default: FALSE). When enabled, the text position slider is hidden and labels appear as Y-axis tick labels.text.position- Position of category labels along the X axis (UI: "Position of category labels", default: 0). Only visible whenlabel.on.y.axisis FALSE.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)
mtcars$cyl <- as.factor(mtcars$cyl)
plotthis_SplitBarPlotInputsUI("splitBarPlot", mtcars)
#> <div class="tabbable">
#> <ul class="nav nav-tabs shiny-tab-input" id="splitBarPlot-SplitBarPlotTabsetPanel" data-tabsetid="2089">
#> <li class="active">
#> <a href="#tab-2089-1" data-toggle="tab" data-bs-toggle="tab" data-value="Data">Data</a>
#> </li>
#> <li>
#> <a href="#tab-2089-2" data-toggle="tab" data-bs-toggle="tab" data-value="Facet">Facet</a>
#> </li>
#> <li>
#> <a href="#tab-2089-3" data-toggle="tab" data-bs-toggle="tab" data-value="Aesthetics">Aesthetics</a>
#> </li>
#> <li>
#> <a href="#tab-2089-4" data-toggle="tab" data-bs-toggle="tab" data-value="Adjustments">Adjustments</a>
#> </li>
#> <li>
#> <a href="#tab-2089-5" data-toggle="tab" data-bs-toggle="tab" data-value="Legend">Legend</a>
#> </li>
#> <li>
#> <a href="#tab-2089-6" data-toggle="tab" data-bs-toggle="tab" data-value="Plotly">Plotly</a>
#> </li>
#> <li>
#> <a href="#tab-2089-7" data-toggle="tab" data-bs-toggle="tab" data-value="Axes">Axes</a>
#> </li>
#> <li>
#> <a href="#tab-2089-8" data-toggle="tab" data-bs-toggle="tab" data-value="Lines">Lines</a>
#> </li>
#> </ul>
#> <div class="tab-content" data-tabsetid="2089">
#> <div class="tab-pane active" data-value="Data" id="tab-2089-1">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify783843">
#> <label class="control-label" id="splitBarPlot-x.data-label" for="splitBarPlot-x.data">X Values</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-x.data"><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="gear">gear</option>
#> <option value="carb">carb</option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify783843', '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="tipify1335077">
#> <label class="control-label" id="splitBarPlot-y.data-label" for="splitBarPlot-y.data">Y Values</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-y.data"><option value=""></option>
#> <option value="cyl" selected>cyl</option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1335077', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Select the categorical column to use for the Y axis groupings'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8096962">
#> <label class="control-label" id="splitBarPlot-fill.by-label" for="splitBarPlot-fill.by">Fill By</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-fill.by"><option value=""></option>
#> <option value="mpg" selected>mpg</option>
#> <option value="cyl">cyl</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="gear">gear</option>
#> <option value="carb">carb</option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8096962', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A variable used to fill the bars. Both character/factor and numeric columns are accepted. If `TRUE` (default), the bars will be filled by the x-axis values, If `FALSE`, the bars will be filled a single color (the first color in the palette). ONLY works when `group_by` is NULL. When `group_by` is not NULL, the bars will be filled by the `group_by` variable.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Facet" id="tab-2089-2">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify5593832">
#> <label class="control-label" id="splitBarPlot-facet.by-label" for="splitBarPlot-facet.by">Facet By</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-facet.by"><option value="" selected></option>
#> <option value="cyl">cyl</option>
#> <option value="" selected></option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify5593832', '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="tipify7337297">
#> <label class="control-label" id="splitBarPlot-facet.scale-label" for="splitBarPlot-facet.scale">Facet Scale</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-facet.scale"><option value="fixed">fixed</option>
#> <option value="free">free</option>
#> <option value="free_x">free_x</option>
#> <option value="free_y" selected>free_y</option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7337297', '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="tipify3496955">
#> <label class="control-label" id="splitBarPlot-facet.ncol-label" for="splitBarPlot-facet.ncol">Columns</label>
#> <input id="splitBarPlot-facet.ncol" type="number" class="shiny-input-number form-control" data-update-on="change" min="0" max="20"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3496955', '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="tipify9826686">
#> <label class="control-label" id="splitBarPlot-facet.nrow-label" for="splitBarPlot-facet.nrow">Rows</label>
#> <input id="splitBarPlot-facet.nrow" type="number" class="shiny-input-number form-control" data-update-on="change" min="0" max="20"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9826686', '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="tipify4088539">
#> <div class="material-switch">
#> <label for="splitBarPlot-facet.by.row" style="padding-right: 10px;">Facet by Row</label>
#> <input id="splitBarPlot-facet.by.row" type="checkbox" checked="checked"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-facet.by.row"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify4088539', '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 class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify3608737">
#> <label class="control-label" id="splitBarPlot-split.by-label" for="splitBarPlot-split.by">Split By</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-split.by"><option value="" selected></option>
#> <option value="cyl">cyl</option>
#> <option value="" selected></option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3608737', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'The column(s) to split data by and plot separately.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify6525100">
#> <label class="control-label" id="splitBarPlot-subplot.margin.x-label" for="splitBarPlot-subplot.margin.x">Subplot Spacing (Horizontal)</label>
#> <input id="splitBarPlot-subplot.margin.x" type="number" class="shiny-input-number form-control" value="0.03" data-update-on="change" min="0" max="1" step="0.01"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify6525100', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Horizontal spacing between facet panel columns as a fraction of the plot area (e.g. 0.03). Only applies when faceting is active.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1435593">
#> <label class="control-label" id="splitBarPlot-subplot.margin.y-label" for="splitBarPlot-subplot.margin.y">Subplot Spacing (Vertical)</label>
#> <input id="splitBarPlot-subplot.margin.y" type="number" class="shiny-input-number form-control" value="0.1" data-update-on="change" min="0" max="1" step="0.01"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1435593', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Vertical spacing between facet panel rows as a fraction of the plot area (e.g. 0.1). Only applies when faceting is active.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Aesthetics" id="tab-2089-3">
#> <div class="row">
#> <div class="col-sm-6">
#> <div id="splitBarPlot-palette.selection" class="shiny-html-output"></div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify6807986">
#> <div class="material-switch">
#> <label for="splitBarPlot-palreverse" style="padding-right: 10px;">Reverse Palette</label>
#> <input id="splitBarPlot-palreverse" type="checkbox"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-palreverse"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify6807986', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A logical value indicating whether to reverse the palette. Default is FALSE.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8592859">
#> <label class="control-label" id="splitBarPlot-alpha.by-label" for="splitBarPlot-alpha.by">Alpha By</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-alpha.by"><option value="" selected></option>
#> <option value="" selected></option>
#> <option value="mpg">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="gear">gear</option>
#> <option value="carb">carb</option></select>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8592859', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A character string indicating the column name to use for the transparency of the bars.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8386300">
#> <div class="material-switch">
#> <label for="splitBarPlot-alpha.reverse" style="padding-right: 10px;">Alpha Reverse</label>
#> <input id="splitBarPlot-alpha.reverse" type="checkbox"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-alpha.reverse"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8386300', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A logical value indicating whether to reverse the transparency.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8813129">
#> <label class="control-label" id="splitBarPlot-alpha.name-label" for="splitBarPlot-alpha.name">Alpha Name</label>
#> <input id="splitBarPlot-alpha.name" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8813129', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A character string indicating the legend name of the transparency.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify2376978">
#> <label class="control-label" id="splitBarPlot-bar.height-label" for="splitBarPlot-bar.height">Bar Height</label>
#> <input id="splitBarPlot-bar.height" type="number" class="shiny-input-number form-control" value="0.9" data-update-on="change" min="0"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify2376978', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value indicating the height of the bars.'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify5786308">
#> <label class="control-label" id="splitBarPlot-axis.scale.factor-label" for="splitBarPlot-axis.scale.factor">Axis Scale Factor</label>
#> <input class="js-range-slider" id="splitBarPlot-axis.scale.factor" data-skin="shiny" data-min="0" data-max="5" data-from="1.2" data-step="0.2" data-grid="true" data-grid-num="8.33333333333333" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify5786308', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Scale factor controlling how much of the axis range the bars fill. Values above 1 extend beyond the data range'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8979025">
#> <div class="material-switch">
#> <label for="splitBarPlot-label.on.y.axis" style="padding-right: 10px;">Labels on Y Axis</label>
#> <input id="splitBarPlot-label.on.y.axis" type="checkbox"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-label.on.y.axis"></label>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8979025', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'When enabled, category labels are shown as Y-axis tick labels instead of being placed on the plot area'})}, 500)});</script>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify3444290">
#> <label class="control-label" id="splitBarPlot-text.position-label" for="splitBarPlot-text.position">Category Label Position</label>
#> <input class="js-range-slider" id="splitBarPlot-text.position" data-skin="shiny" data-min="0" data-max="100" data-from="0" data-step="1" data-grid="true" data-grid-num="10" data-grid-snap="false" data-prettify-separator="," data-prettify-enabled="true" data-keyboard="true" data-data-type="number"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3444290', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Adjust the horizontal position of category labels along the X axis when labels are shown on the plot'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Adjustments" id="tab-2089-4">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7608582">
#> <label class="control-label" id="splitBarPlot-x.min-label" for="splitBarPlot-x.min">X-axis Min</label>
#> <input id="splitBarPlot-x.min" type="number" class="shiny-input-number form-control" value="0" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7608582', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value indicating the minimum value of the x axis.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7311036">
#> <label class="control-label" id="splitBarPlot-x.max-label" for="splitBarPlot-x.max">X-axis Max</label>
#> <input id="splitBarPlot-x.max" type="number" class="shiny-input-number form-control" value="472" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify7311036', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'A numeric value indicating the maximum value of the x axis.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Legend" id="tab-2089-5">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify8524323">
#> <label class="control-label" id="splitBarPlot-legend.title.size-label" for="splitBarPlot-legend.title.size">Legend Title Size</label>
#> <input id="splitBarPlot-legend.title.size" type="number" class="shiny-input-number form-control" value="14" data-update-on="change" min="0" step="1"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify8524323', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Font size of the legend title.'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify9758180">
#> <label class="control-label" id="splitBarPlot-legend.text.size-label" for="splitBarPlot-legend.text.size">Legend Text Size</label>
#> <input id="splitBarPlot-legend.text.size" type="number" class="shiny-input-number form-control" value="12" data-update-on="change" min="0" step="1"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify9758180', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Font size of the legend entry labels.'})}, 500)});</script>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Plotly" id="tab-2089-6">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" style="width:100%;">
#> <label class="control-label" id="splitBarPlot-download.format-label" for="splitBarPlot-download.format">Download Format</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-download.format"><option value="svg" selected>svg</option>
#> <option value="png">png</option>
#> <option value="jpeg">jpeg</option>
#> <option value="webp">webp</option></select>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify1130475">
#> <label class="control-label" id="splitBarPlot-margin.t-label" for="splitBarPlot-margin.t">Margin Top</label>
#> <input id="splitBarPlot-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('tipify1130475', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Top 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="tipify9702622">
#> <label class="control-label" id="splitBarPlot-margin.b-label" for="splitBarPlot-margin.b">Margin Bottom</label>
#> <input id="splitBarPlot-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('tipify9702622', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Bottom margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify6480828">
#> <label class="control-label" id="splitBarPlot-margin.l-label" for="splitBarPlot-margin.l">Margin Left</label>
#> <input id="splitBarPlot-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('tipify6480828', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Left 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="tipify560731">
#> <label class="control-label" id="splitBarPlot-margin.r-label" for="splitBarPlot-margin.r">Margin Right</label>
#> <input id="splitBarPlot-margin.r" type="number" class="shiny-input-number form-control" value="90" data-update-on="change" min="0" step="5"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify560731', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Right margin of the plot in pixels'})}, 500)});</script>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour" id="tipify4731371">
#> <label class="control-label" for="splitBarPlot-shape.fill">Shape Fill</label>
#> <input id="splitBarPlot-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('tipify4731371', '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="tipify2946250">
#> <label class="control-label" for="splitBarPlot-shape.line.color">Shape Line Color</label>
#> <input id="splitBarPlot-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('tipify2946250', '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="tipify6102996">
#> <label class="control-label" id="splitBarPlot-shape.line.width-label" for="splitBarPlot-shape.line.width">Shape Line Width</label>
#> <input id="splitBarPlot-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('tipify6102996', '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="tipify1211089">
#> <label class="control-label" id="splitBarPlot-shape.linetype-label" for="splitBarPlot-shape.linetype">Shape Linetype</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-shape.linetype"><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>
#> </div>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify1211089', '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="tipify6294165">
#> <label class="control-label" id="splitBarPlot-shape.opacity-label" for="splitBarPlot-shape.opacity">Shape Opacity</label>
#> <input id="splitBarPlot-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('tipify6294165', '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-2089-7">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="material-switch">
#> <label for="splitBarPlot-rotate" style="padding-right: 10px;">Rotate (swap X/Y)</label>
#> <input id="splitBarPlot-rotate" type="checkbox"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-rotate"></label>
#> </div>
#> </div>
#> </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="splitBarPlot-title.font.family-label" for="splitBarPlot-title.font.family">Title Font</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-title.font.family"><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>
#> </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="splitBarPlot-title.font.color">Title Color</label>
#> <input id="splitBarPlot-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="splitBarPlot-title.font.size-label" for="splitBarPlot-title.font.size">Title Size</label>
#> <input id="splitBarPlot-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="splitBarPlot-axis.title.horizontal.position-label" for="splitBarPlot-axis.title.horizontal.position">Title position</label>
#> <input id="splitBarPlot-axis.title.horizontal.position" type="number" class="shiny-input-number form-control" value="0.5" data-update-on="change" min="0" max="1" step="0.1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.title.font.size-label" for="splitBarPlot-axis.title.font.size">Axis Title Size</label>
#> <input id="splitBarPlot-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>
#> <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="splitBarPlot-axis.title.font.color">Axis Title Color</label>
#> <input id="splitBarPlot-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 class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.title.font.family-label" for="splitBarPlot-axis.title.font.family">Axis Title Font</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-axis.title.font.family"><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>
#> </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="splitBarPlot-axis.showline" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show 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="splitBarPlot-axis.mirror" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Mirror 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="splitBarPlot-show.grid.x" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show X Gridlines</span>
#> </label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <div class="checkbox">
#> <label>
#> <input id="splitBarPlot-show.grid.y" type="checkbox" class="shiny-input-checkbox" checked="checked"/>
#> <span>Show Y Gridlines</span>
#> </label>
#> </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="splitBarPlot-grid.color">Gridline Color</label>
#> <input id="splitBarPlot-grid.color" type="text" class="form-control shiny-colour-input" data-init-value="#CCCCCC" data-show-colour="both" data-palette="square"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="splitBarPlot-axis.linecolor">Axis Line Color</label>
#> <input id="splitBarPlot-axis.linecolor" 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="splitBarPlot-axis.linewidth-label" for="splitBarPlot-axis.linewidth">Axis Line Width</label>
#> <input id="splitBarPlot-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 class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.tickfont.size-label" for="splitBarPlot-axis.tickfont.size">Tick Label Size</label>
#> <input id="splitBarPlot-axis.tickfont.size" type="number" class="shiny-input-number form-control" value="12" 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="splitBarPlot-axis.tickfont.color">Tick Label Color</label>
#> <input id="splitBarPlot-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 class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.tickfont.family-label" for="splitBarPlot-axis.tickfont.family">Tick Label Font</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-axis.tickfont.family"><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>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.tickangle.x-label" for="splitBarPlot-axis.tickangle.x">X Tick Label Angle</label>
#> <input id="splitBarPlot-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 class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.tickangle.y-label" for="splitBarPlot-axis.tickangle.y">Y Tick Label Angle</label>
#> <input id="splitBarPlot-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>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.ticks-label" for="splitBarPlot-axis.ticks">Tick Position</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-axis.ticks"><option value="outside" selected>Outside</option>
#> <option value="inside">Inside</option>
#> <option value="">None</option></select>
#> </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="splitBarPlot-axis.tickcolor">Tick Mark Color</label>
#> <input id="splitBarPlot-axis.tickcolor" 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="splitBarPlot-axis.ticklen-label" for="splitBarPlot-axis.ticklen">Tick Mark Length</label>
#> <input id="splitBarPlot-axis.ticklen" type="number" class="shiny-input-number form-control" value="5" data-update-on="change" min="0" step="1"/>
#> </div>
#> </div>
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-axis.tickwidth-label" for="splitBarPlot-axis.tickwidth">Tick Mark Width</label>
#> <input id="splitBarPlot-axis.tickwidth" type="number" class="shiny-input-number form-control" value="1" 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="splitBarPlot-facet.title.font.size-label" for="splitBarPlot-facet.title.font.size">Facet Subplot Title Size</label>
#> <input id="splitBarPlot-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 class="col-sm-6">
#> <div class="form-group shiny-input-container" data-shiny-input-type="colour">
#> <label class="control-label" for="splitBarPlot-facet.title.font.color">Facet Title Color</label>
#> <input id="splitBarPlot-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>
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container">
#> <label class="control-label" id="splitBarPlot-facet.title.font.family-label" for="splitBarPlot-facet.title.font.family">Facet Title Font</label>
#> <div>
#> <select class="shiny-input-select form-control" id="splitBarPlot-facet.title.font.family"><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>
#> </div>
#> </div>
#> </div>
#> </div>
#> </div>
#> <div class="tab-pane" data-value="Lines" id="tab-2089-8">
#> <div class="row">
#> <div class="col-sm-6">
#> <div class="form-group shiny-input-container" id="tipify7119553">
#> <label class="control-label" id="splitBarPlot-hline.intercepts-label" for="splitBarPlot-hline.intercepts">Y-intercepts</label>
#> <input id="splitBarPlot-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('tipify7119553', '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="tipify6120828">
#> <label class="control-label" id="splitBarPlot-hline.colors-label" for="splitBarPlot-hline.colors">Y Colors</label>
#> <input id="splitBarPlot-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('tipify6120828', '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="tipify344293">
#> <label class="control-label" id="splitBarPlot-hline.widths-label" for="splitBarPlot-hline.widths">Y Widths</label>
#> <input id="splitBarPlot-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('tipify344293', '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="tipify6658908">
#> <label class="control-label" id="splitBarPlot-hline.linetypes-label" for="splitBarPlot-hline.linetypes">Y Line Types</label>
#> <input id="splitBarPlot-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('tipify6658908', '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="tipify6529673">
#> <label class="control-label" id="splitBarPlot-hline.opacities-label" for="splitBarPlot-hline.opacities">Y Opacities (0-1)</label>
#> <input id="splitBarPlot-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('tipify6529673', '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="tipify4518584">
#> <label class="control-label" id="splitBarPlot-vline.intercepts-label" for="splitBarPlot-vline.intercepts">X-intercepts</label>
#> <input id="splitBarPlot-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('tipify4518584', '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="tipify5168041">
#> <label class="control-label" id="splitBarPlot-vline.colors-label" for="splitBarPlot-vline.colors">X Colors</label>
#> <input id="splitBarPlot-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('tipify5168041', '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="tipify6766108">
#> <label class="control-label" id="splitBarPlot-vline.widths-label" for="splitBarPlot-vline.widths">X Widths</label>
#> <input id="splitBarPlot-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('tipify6766108', '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="tipify8809331">
#> <label class="control-label" id="splitBarPlot-vline.linetypes-label" for="splitBarPlot-vline.linetypes">X Line Types</label>
#> <input id="splitBarPlot-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('tipify8809331', '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="tipify7312291">
#> <label class="control-label" id="splitBarPlot-vline.opacities-label" for="splitBarPlot-vline.opacities">X Opacities (0-1)</label>
#> <input id="splitBarPlot-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('tipify7312291', '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="tipify3986198">
#> <label class="control-label" id="splitBarPlot-abline.slopes-label" for="splitBarPlot-abline.slopes">Ab Slopes</label>
#> <input id="splitBarPlot-abline.slopes" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify3986198', '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="tipify4305207">
#> <label class="control-label" id="splitBarPlot-abline.intercepts-label" for="splitBarPlot-abline.intercepts">Ab Y-intercepts</label>
#> <input id="splitBarPlot-abline.intercepts" type="text" class="shiny-input-text form-control" value="" data-update-on="change"/>
#> </div>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('tipify4305207', '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="tipify1454074">
#> <label class="control-label" id="splitBarPlot-abline.colors-label" for="splitBarPlot-abline.colors">Ab Colors</label>
#> <input id="splitBarPlot-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('tipify1454074', '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="tipify4511203">
#> <label class="control-label" id="splitBarPlot-abline.widths-label" for="splitBarPlot-abline.widths">Ab Widths</label>
#> <input id="splitBarPlot-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('tipify4511203', '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="tipify5787815">
#> <label class="control-label" id="splitBarPlot-abline.linetypes-label" for="splitBarPlot-abline.linetypes">Ab Line Types</label>
#> <input id="splitBarPlot-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('tipify5787815', '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="tipify704172">
#> <label class="control-label" id="splitBarPlot-abline.opacities-label" for="splitBarPlot-abline.opacities">Ab Opacities (0-1)</label>
#> <input id="splitBarPlot-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('tipify704172', '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="splitBarPlot-auto.update" style="padding-right: 10px;">Auto Update</label>
#> <input id="splitBarPlot-auto.update" type="checkbox" checked="checked"/>
#> <label class="switch label-success bg-success" for="splitBarPlot-auto.update"></label>
#> </div>
#> </div>
#> </div>
#> <div class="col-sm-2" style="margin-top: 25px;">
#> <button id="splitBarPlot-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="splitBarPlot-reset" style="width:100%;" type="button"><span class="action-label">Reset</span></button>
#> </div>
#> <div class="col-sm-5" style="margin-top: 25px;">
#> <a aria-disabled="true" class="btn btn-default shiny-download-link disabled btn-secondary" download href="" id="splitBarPlot-download.source" tabindex="-1" target="_blank" width="100%">
#> <i class="far fa-file-code" role="presentation" aria-label="file-code icon"></i>
#> Source Download
#> </a>
#> <script>$(document).ready(function() {setTimeout(function() {shinyBS.addTooltip('splitBarPlot-download.source', 'tooltip', {'container': 'body', 'placement': 'top', 'trigger': 'hover', 'title': 'Download the plot as a self-contained HTML file, along with the plot source data and statistics (if applicable) as CSV files.'})}, 500)});</script>
#> </div>
#> </div>