Soft UI Dashboard

The following directory structure is included in the Soft UI Dashboard download. Use this as a reference for locating assets, styles, and pages:

• assets/: Contains core frontend files.
  • css/: Compiled CSS files.
  • fonts/: Font files used by the dashboard.
  • img/: Image assets.
  • js/: JavaScript files, including core/, plugins/, and the main soft-ui-dashboard.js.
  • scss/: SASS source files for customization (soft-ui-dashboard/ and soft-ui-dashboard.scss).
• docs/: Contains documentation.html.
• pages/: Pre-built example pages (e.g., Sign In, Profile, Dashboard).
• gulpfile.js: Configuration for Gulp tasks.
• package.json: Node.js project configuration and dependencies.

soft-ui-dashboard
    ├── assets
    │   ├── css
    │   ├── fonts
    │   ├── img
    │   ├── js
    │   │   ├── core
    │   │   └── plugins
    │   │   └── soft-ui-dashboard.js
    │   │   └── soft-ui-dashboard.js.map
    │   │   └── soft-ui-dashboard.min.js
    │   └── scss
    │       ├── soft-ui-dashboard
    │       └── soft-ui-dashboard.scss
    ├── docs
    │   └── documentation.html
    ├── pages
    ├── CHANGELOG.md
    ├── gulpfile.js
    └── package.json

The timeline component is used to display a vertical sequence of events (e.g., orders, design changes).

Each event is wrapped in a .timeline-block and consists of:

• .timeline-step: A container for an icon (using FontAwesome or Nucleo icons) with a gradient background class (e.g., text-success text-gradient).
• .timeline-content: A container for the event title (h6) and the timestamp (p.text-secondary).

Use .timeline-one-side for a single-column layout.

<div class="timeline timeline-one-side">
  <div class="timeline-block mb-3">
    <span class="timeline-step">
      <i class="ni ni-bell-55 text-success text-gradient"></i>
    </span>
    <div class="timeline-content">
      <h6 class="text-dark text-sm font-weight-bold mb-0">$2400, Design changes</h6>
      <p class="text-secondary font-weight-bold text-xs mt-1 mb-0">22 DEC 7:20 PM</p>
    </div>
  </div>
</div>

The dashboard uses Chart.js for data visualization. You can initialize bar and line charts by targeting a canvas context.

Bar Chart

To create a bar chart, target an element with ID chart-bars. The configuration includes settings for responsive behavior, maintainAspectRatio, and custom scales for the X and Y axes.

Line Chart

To create a line chart, target an element with ID chart-line. This implementation often uses createLinearGradient to create aesthetic fills under the lines. The configuration supports multiple datasets (e.g., 'Mobile apps' and 'Websites') with specific borderColor and backgroundColor (gradient) settings.

// Bar Chart Initialization
var ctx = document.getElementById("chart-bars").getContext("2d");
new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Sales",
      data: [450, 200, 100, 220, 500, 100, 400, 230, 500],
      // ... other options
    }]
  },
  options: { /* ... */ }
});

// Line Chart Initialization
var ctx2 = document.getElementById("chart-line").getContext("2d");
new Chart(ctx2, {
  type: "line",
  data: {
    labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    datasets: [{
      label: "Mobile apps",
      borderColor: "#cb0c9f",
      data: [50, 40, 300, 220, 500, 250, 400, 230, 500],
      // ...
    }]
  },
  options: { /* ... */ }
});

The dashboard includes a responsive table component for displaying projects. Each row can contain:

• Company Info: An avatar image and a title.
• Members: An avatar-group containing multiple user avatars with tooltips.
• Budget: A text-based currency value.
• Completion: A progress-wrapper containing a percentage label and a progress bar with a gradient background (e.g., bg-gradient-info or bg-gradient-success).

Use the .table-responsive wrapper to ensure the table scales on smaller screens.

<div class="table-responsive">
  <table class="table align-items-center mb-0">
    <thead>
      <tr>
        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Companies</th>
        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Members</th>
        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Budget</th>
        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Completion</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="d-flex px-2 py-1">
            <img src="../assets/img/small-logos/logo-xd.svg" class="avatar avatar-sm me-3" alt="xd">
            <h6 class="mb-0 text-sm">Soft UI XD Version</h6>
          </div>
        </td>
        <td>
          <div class="avatar-group mt-2">
            <a href="javascript:;" class="avatar avatar-xs rounded-circle" data-bs-toggle="tooltip" title="Ryan Tompson">
              <img src="../assets/img/team-1.jpg" alt="team1">
            </a>
          </div>
        </td>
        <td class="align-middle text-center text-sm">
          <span class="text-xs font-weight-bold">$14,000</span>
        </td>
        <td class="align-middle">
          <div class="progress-wrapper w-75 mx-auto">
            <div class="progress-info">
              <div class="progress-percentage"><span class="text-xs font-weight-bold">60%</span></div>
            </div>
            <div class="progress">
              <div class="progress-bar bg-gradient-info w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

To display high-level dashboard metrics (e.g., Users, Clicks, Sales), use a grid of columns where each column contains:

• Icon: An .icon-shape with a specific background gradient (e.g., bg-primary, bg-gradient-info, bg-gradient-warning, bg-gradient-danger).
• Label: A small text label (p.text-xs).
• Value: A large, bold heading (h4.font-weight-bolder).
• Progress: A .progress bar indicating the metric's status relative to a goal.

<div class="col-3 py-3 ps-0">
  <div class="d-flex mb-2">
    <div class="icon icon-shape icon-xxs shadow border-radius-sm bg-primary text-center me-2 d-flex align-items-center justify-content-center">
      <!-- SVG Icon Content -->
    </div>
    <p class="text-xs mt-1 mb-0 font-weight-bold">Users</p>
  </div>
  <h4 class="font-weight-bolder">36K</h4>
  <div class="progress w-75">
    <div class="progress-bar bg-dark w-60" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
  </div>
</div>

The dashboard includes a built-in 'Soft UI Configurator' plugin that allows users to customize the visual appearance of the dashboard in real-time. The following functions are exposed to the global scope and can be triggered via the UI elements in the fixed plugin:

• sidebarColor(element): Changes the background color of the sidebar. The element passed should be the clicked badge element containing a data-color attribute (e.g., primary, dark, info, success, warning, danger).
• sidebarType(element): Toggles the sidenav between 'Transparent' and 'White' modes. The element passed should be the button clicked, which carries a data-class attribute (e.g., bg-transparent or bg-white).
• navbarFixed(element): Toggles whether the navbar remains fixed at the top of the viewport. The element passed is the checkbox input.

<!-- Example of how the sidebar color trigger is implemented in the HTML -->
<span class="badge filter bg-primary active" data-color="primary" onclick="sidebarColor(this)"></span>

<!-- Example of how the sidenav type trigger is implemented in the HTML -->
<button class="btn btn-primary w-100 px-3 mb-2 active" data-class="bg-transparent" onclick="sidebarType(this)">Transparent</button>

<!-- Example of how the navbar fixed trigger is implemented in the HTML -->
<input class="form-check-input mt-1 ms-auto" type="checkbox" id="navbarFixed" onclick="navbarFixed(this)">