jQuery Dashboard Cards

jQuery Dashboard Cards
Project: Dashboard
Author: Jesper Strange Klitgaard Christiansen
Edit Online: View on CodePen
License: MIT

This jQuery code snippet helps you to create dashboard cards. It uses Bootstrap CSS to arrange cards in a grid layout. You can integrate these cards to display statics of different processes or progress reports. The card UI comes with graphs, icons, and titles which is helpful to visualize charts data.

How to Create jQuery Dashboard Cards

First of all, load the Bootstrap CSS and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>

Create the HTML structure for the dashboard card as follows:

<div class="container">
  <p class="text-muted">Hover and click the pencil icon (<a href="https://codepen.io/jesperkc/pen/QNOEMJ" target="_blank">Updated version here</a>)</p>
  <div class="row" data-bind="foreach: logs">
    <div class="col-xs-4">
      <div class="flip-container log-box" data-bind="css: css">
        <div class="flipper embed-responsive embed-responsive-16by9">
          <div class="front" data-bind="css: colorStyle">
            <h3 data-bind="text: Name">Log name</h3>
            <a href="#" class="log-box-button log-box-button-edit " data-bind="click: $parent.editLog, visible: Access() === 'Administrator'" title="Edit"><i class="fa fa-pencil"></i></a>
            
            <div class="sparkline" data-bind="sparkline: sparklinedata"></div>
            <div class="log-box-buttons-buttom">
              <div class="access" data-bind="text: Access() + ' access'">Administrator access</div>
            </div>
            <div class="log-box-buttons-buttom">
              <a href="#" class="log-box-button log-box-button-install" data-bind="click: $parent.viewLogSearch"><i class="fa fa-search"></i></a><a href="#" class="log-box-button log-box-button-install" data-bind="click: $parent.viewInstallLog, visible: Access() === 'Administrator'" title="Settings"><i class="fa fa-cogs"></i></a>
              </div>
          </div>
          <div class="back" data-bind="css: colorStyle">
            <div class="row">
              <form method="POST" data-bind="submit: $parent.saveLog">
                <div class="col-xs-7 col-sm-8 col-md-8 col-lg-9">
                  <input type="text" class="form-control" data-bind="value: Name" placeholder="Enter log name"><span class="validationMessage" style="display: none;"></span>
                </div>
                <div class="col-xs-5 col-sm-4 col-md-4 col-lg-3">
                  <input type="submit" class="btn btn-default btn-block" data-bind="click: $parent.saveLog" value="Save">
                </div>
              </form>
            </div>

                <div class="checkbox">
                  <label>
                    <input type="checkbox" data-bind="checked: DailyDigestEmail"> Daily Digest Email <span data-toggle="popover" data-trigger="hover" data-container="body" data-content="Daily Digest is a daily email containing a summary of the errors logged within the last 24 hours." class="fa fa-question-circle"></span>
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input type="checkbox" data-bind="checked: NewErrorEmail"> New Error Email <span data-toggle="popover" data-container="body" data-trigger="hover" data-content="New Error is a transactional email sent every time a new error is logged." class="fa fa-question-circle"></span>
                  </label>
                </div>
            
            <ul class="colorpicker">
              <li class="green-bg selected" data-bind="click: $parent.selectColor, css: {selected: Color() == 'green'}"><span class="fa fa-check"></span></li>
              <li class="lightgreen-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'lightgreen'}"><span class="fa fa-check"></span></li>
              <li class="lime-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'lime'}"><span class="fa fa-check"></span></li>
              <li class="yellow-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'yellow'}"><span class="fa fa-check"></span></li>
              <li class="orange-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'orange'}"><span class="fa fa-check"></span></li>
              <li class="deeporange-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'deeporange'}"><span class="fa fa-check"></span></li>
              <li class="red-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'red'}"><span class="fa fa-check"></span></li>
              <li class="pink-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'pink'}"><span class="fa fa-check"></span></li>
              <li class="purple-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'purple'}"><span class="fa fa-check"></span></li>
              <li class="deeppurple-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'deeppurple'}"><span class="fa fa-check"></span></li>
              <li class="blue-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'blue'}"><span class="fa fa-check"></span></li>
              <li class="lightblue-bg" data-bind="click: $parent.selectColor, css: {selected: Color() == 'lightblue'}"><span class="fa fa-check"></span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Now, style the dashboard card using the following CSS styles:

body {
  background: #e7edf2;
  margin: 3em;
}
.green-bg {
  background-color: #0da58e;
}
.lightgreen-bg {
  background-color: #8cc152;
}
.lime-bg {
  background-color: #cdda49;
}
.yellow-bg {
  background-color: #fdc02f;
}
.orange-bg {
  background-color: #fd9727;
}
.deeporange-bg {
  background-color: #fc5830;
}
.red-bg {
  background-color: #e2202c;
}
.pink-bg {
  background-color: #e62565;
}
.purple-bg {
  background-color: #9b2fae;
}
.deeppurple-bg {
  background-color: #673fb4;
}
.blue-bg {
  background-color: #4054b2;
}
.lightblue-bg {
  background-color: #587bf8;
}
.log-box {
  color: #fff;
}
.log-box h3 {
  margin-top: 0;
  margin-bottom: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  padding-bottom: 10px;
}
.log-box .log-box-button {
  color: #fff;
  display: none;
  opacity: 0.5;
  padding: 5px 8px;
  font-size: 13px;
  margin-bottom: -5px;
}
.log-box .log-box-button:hover {
  opacity: 1;
}
.log-box .log-box-button-edit {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
.log-box .log-box-buttons-buttom {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
.log-box .log-box-buttons-buttom a {
  margin-left: 0px;
}
.log-box .colorpicker {
  font-size: 0;
  padding: 0;
  margin: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.log-box .colorpicker li {
  display: inline-block;
  width: 8.33333333%;
  height: 40px;
  position: relative;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
}
.log-box .colorpicker li:first-child {
  border-radius: 0 0 0 5px;
}
.log-box .colorpicker li:last-child {
  border-radius: 0 0 5px 0;
}
.log-box .colorpicker li span {
  width: 100%;
  height: 40px;
  text-align: center;
  padding-top: 13px;
  pointer-events: none;
}
.log-box .colorpicker li span:before {
  opacity: 0;
}
.log-box .colorpicker li.selected span:before {
  opacity: 1;
}
.log-box .colorpicker li:hover span:before {
  opacity: 0.5;
}
.log-box div[class*=col-]:first-child {
  padding-right: 7px;
}
.log-box div[class*=col-]:last-child {
  padding-left: 7px;
}
.log-box .access {
  opacity: 0.5;
}
.log-box:hover .access {
  display: none;
}
.log-box:hover .log-box-button {
  display: inline-block;
}
.log-box .btn {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.log-box .btn:active {
  background-color: transparent;
  border-color: #fff;
  color: #fff;
}
.sparkline {
  font-size: 0;
  position: absolute;
  top: 60px;
  bottom: 38px;
  left: 0;
  right: 0;
}
.sparkline path {
  stroke-width: 2;
  fill: none;
  stroke: white;
}
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
}
.flip-container,
.front,
.back {
  width: 100%;
  height: 100%;
}
.flip-container .flipper {
  box-shadow: 0 ;
}
.flip-container.flipped .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  margin: -20px -20px 0 -20px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1), 0 60px 90px rgba(0, 0, 0, 0.3);
}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  position: relative;
  overflow: initial;
  border-radius: 5px;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  padding: 15px;
}
.front {
  z-index: 1;
}
.back {
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  border-width: 0px;
  top: 0;
  bottom: -40px;
  height: auto;
  transition: background-color 0.3s;
}
.back .row:first-child {
  margin-bottom: 17px;
}

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>

Finally, add the following JavaScript function for its functionality:

"use strict";
ko.bindingHandlers.sparkline = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor(), allBindings = allBindingsAccessor();
        value = value();
        console.log(value);
        if (value) {
            var setMuteClass = false;
            if (!value.length) {
                setMuteClass = true;
                value = [1, 1];
            }
            var w = $(element).width(), h = $(element).height(), padding = 1;
            h = h - (padding * 2);
            //w = w - (padding * 2);
            var yWind = d3.scale.linear().domain([d3.min(value), d3.max(value)]).range([0, h]), x = d3.scale.linear().domain([0, value.length - 1]).range([0, w]);
            var vis = d3.select(element)
                .html("")
                .append("svg:svg")
                .attr("width", w + (padding * 2))
                .attr("height", h + (padding * 2));
            var g = vis.append("svg:g")
                .attr("transform", "translate(0, " + h + ")");
            var lineWind = d3.svg.line()
                .x(function (d, i) { return x(i); })
                .y(function (d) { return -1 * yWind(d); });
            if (setMuteClass == true) {
                g.append("svg:path").attr("d", lineWind(value)).attr("class", "muted");
            }
            else {
                g.append("svg:path").attr("d", lineWind(value));
            }
        }
    }
};
var elmah;
(function (elmah) {
    class log {
        constructor() {
            this.Id = ko.observable(1);
            this.Name = ko.observable('Elmah.io');
            this.Color = ko.observable('Orange');
            this.Access = ko.observable('Administrator');
            this.DailyDigestEmail = ko.observable(false);
            this.NewErrorEmail = ko.observable(false);
            this.editing = ko.observable(false);
            this.css = ko.computed(() => { return this.editing() ? 'flipped' : ''; });
            this.colorStyle = ko.computed(() => { return this.Color().toLowerCase() + '-bg'; });
            this.sparklinedata = ko.observableArray([0, 1, 2, 5, 4, 2, 0, 1, 0, 0, 0, 0, 2, 3, 5, 8, 4, 4, 3, 1, 1, 0, 0, 0]);
        }
    }
    elmah.log = log;
    class dashboard {
        constructor() {
            this.logs = ko.observableArray();
            this.selectColor = (n, t) => {
                n.Color($(t.target).attr("class").replace("-bg", "").replace("-", ""));
            };
            this.editLog = (obj) => {
                this.logs().forEach((obj) => { obj.editing(false); });
                obj.editing(true);
            };
            this.saveLog = (obj) => {
                obj.editing(false);
            };
            this.logs.push(new elmah.log());
            this.logs.push(new elmah.log());
            this.logs.push(new elmah.log());
            this.logs()[0].Color('green');
            this.logs()[1].Color('lightgreen');
            this.logs()[2].Color('lime');
            this.logs()[1].Name('Codepen.io');
            this.logs()[2].Name('Google.dk');
        }
    }
    elmah.dashboard = dashboard;
})(elmah || (elmah = {}));
var vm = new elmah.dashboard();
ko.applyBindings(vm);
$(function () {
    $('[data-toggle="popover"]').popover();
});
$(".user-switch").tooltip();
$(".user-switch").on('click', function () {
    $(this).toggleClass("selected");
});
// run demo if in searchresult preview
function demo() {
    setTimeout(function () {
        $(".log-box").eq(2).addClass('flipped');
    }, 1000);
}
$(document).ready(function () {
    if (document.location.pathname.indexOf('fullcpgrid') > -1) {
        demo();
    }
});

That’s all! hopefully, you have successfully created dashboard cards. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply