shinydashboardPlus

You can install the stable version from CRAN or the latest development version from GitHub using devtools.

From CRAN

Use the standard install.packages() command.

From GitHub

Use devtools::install_github() to get the most recent updates.

# for the CRAN version
install.packages("shinydashboardPlus")

# for the latest version
devtools::install_github("RinteRface/shinydashboardPlus")

To see a demonstration of the available features and components, load the library and run the shinydashboardPlusGallery() function. This will open a gallery of the dashboard extensions.

library(shinydashboardPlus)
shinydashboardPlusGallery()

These jQuery plugins provide shorthand methods for controlling boxes that were inserted into the DOM after the initial app.js load.

• $(selector).activateBox(): Activates the boxWidget logic on the selected element.
• $(selector).toggleBox(): Toggles the collapse state of the box.
• $(selector).removeBox(): Removes the box.

// Control a dynamically added box
$('#new-box').toggleBox();
$('#new-box').removeBox();

The $.AdminLTE.layout object provides methods to manage the dashboard's structural integrity, especially during window resizing or when using fixed layouts.

• $.AdminLTE.layout.activate(): Initializes the layout maker, fixes heights, and sets up window resize listeners.
• $.AdminLTE.layout.fix(): Adjusts the min-height of .content-wrapper and .right-side based on the header, footer, and window height.
• $.AdminLTE.layout.fixSidebar(): Manages sidebar height and applies slimScroll if a fixed layout is active.

// Activate layout management
$.AdminLTE.layout.activate();

The todolist plugin manages checkbox/radio inputs within a list, toggling a .done class on the parent list item.

Options:

• onCheck: Callback function when an item is checked.
• onUncheck: Callback function when an item is unchecked.

Note: This plugin works best with the iCheck plugin, but falls back to standard input change events if iCheck is not present.

// Initialize a todo list widget
$('#todo-widget').todolist({
  onCheck: function(ele) {
    console.log('Item completed:', ele);
  },
  onUncheck: function(ele) {
    console.log('Item unchecked:', ele);
  }
});

The $.AdminLTE.boxWidget plugin allows users to interact with dashboard boxes.

• $.AdminLTE.boxWidget.activate(_box): Activates box widget functionality for the specified container (defaults to document).
• $.AdminLTE.boxWidget.collapse(element): Toggles the collapse state of a box, switching between the collapse and open icons.
• $.AdminLTE.boxWidget.remove(element): Slides up and removes the box from the view.

The $.AdminLTE.pushMenu object handles the sidebar's collapse/expand behavior.

• $.AdminLTE.pushMenu.activate(toggleBtn): Registers a click event on the provided selector to toggle the sidebar. It handles different behaviors for large screens (collapse/expand) and small screens (sidebar-open/sidebar-collapse).

// Activate push menu using a specific selector
$.AdminLTE.pushMenu("[data-toggle='offcanvas']");

The boxRefresh plugin adds a refresh button to a box component, allowing it to reload its content via AJAX.

Options:

• trigger: Selector for the refresh button (default: .refresh-btn).
• source: The URL/source to load via .load() (required).
• onLoadStart: Callback function executed when the button is clicked.
• onLoadDone: Callback function executed after the content is loaded.

Usage: Call .boxRefresh(options) on a jQuery object representing the box.

// Refresh a box with content from a specific source
$('#my-box').boxRefresh({
  trigger: '.my-refresh-button',
  source: '/api/get-data',
  onLoadStart: function(box) {
    console.log('Loading...');
  },
  onLoadDone: function(box) {
    console.log('Done!');
  }
});

The $.AdminLTE.controlSidebar object manages the right-side control panel.

• $.AdminLTE.controlSidebar.activate(): Initializes the toggle button listener and handles sidebar positioning (fixed vs absolute) based on the layout.
• $.AdminLTE.controlSidebar.open(sidebar, slide): Opens the sidebar. If slide is true, it adds control-sidebar-open to the sidebar itself; otherwise, it adds it to the body to push content.
• $.AdminLTE.controlSidebar.close(sidebar, slide): Closes the sidebar.

The $.AdminLTE.tree(menu) function converts a sidebar menu into a multilevel tree view. It handles the sliding animations for opening and closing sub-menus and manages the active state of parent items.

// Initialize tree view for the sidebar
$.AdminLTE.tree('.sidebar');