git.roojs.org Git - bootswatch/blob - AdminLTE-master/js/AdminLTE/dashboard.js

   1 /*
   2  * Author: Abdullah A Almsaeed
   3  * Date: 4 Jan 2014
   4  * Description:
   5  *      This is a demo file used only for the main dashboard (index.html)
   6  **/
   7
   8 $(function() {
   9     "use strict";
  10
  11     //Make the dashboard widgets sortable Using jquery UI
  12     $(".connectedSortable").sortable({
  13         placeholder: "sort-highlight",
  14         connectWith: ".connectedSortable",
  15         handle: ".box-header, .nav-tabs",
  16         forcePlaceholderSize: true,
  17         zIndex: 999999
  18     }).disableSelection();
  19     $(".box-header, .nav-tabs").css("cursor","move");
  20     //jQuery UI sortable for the todo list
  21     $(".todo-list").sortable({
  22         placeholder: "sort-highlight",
  23         handle: ".handle",
  24         forcePlaceholderSize: true,
  25         zIndex: 999999
  26     }).disableSelection();;
  27
  28     //bootstrap WYSIHTML5 - text editor
  29     $(".textarea").wysihtml5();
  30
  31     $('.daterange').daterangepicker(
  32             {
  33                 ranges: {
  34                     'Today': [moment(), moment()],
  35                     'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
  36                     'Last 7 Days': [moment().subtract('days', 6), moment()],
  37                     'Last 30 Days': [moment().subtract('days', 29), moment()],
  38                     'This Month': [moment().startOf('month'), moment().endOf('month')],
  39                     'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
  40                 },
  41                 startDate: moment().subtract('days', 29),
  42                 endDate: moment()
  43             },
  44     function(start, end) {
  45         alert("You chose: " + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
  46     });
  47
  48     /* jQueryKnob */
  49     $(".knob").knob();
  50
  51     //jvectormap data
  52     var visitorsData = {
  53         "US": 398, //USA
  54         "SA": 400, //Saudi Arabia
  55         "CA": 1000, //Canada
  56         "DE": 500, //Germany
  57         "FR": 760, //France
  58         "CN": 300, //China
  59         "AU": 700, //Australia
  60         "BR": 600, //Brazil
  61         "IN": 800, //India
  62         "GB": 320, //Great Britain
  63         "RU": 3000 //Russia
  64     };
  65     //World map by jvectormap
  66     $('#world-map').vectorMap({
  67         map: 'world_mill_en',
  68         backgroundColor: "#fff",
  69         regionStyle: {
  70             initial: {
  71                 fill: '#e4e4e4',
  72                 "fill-opacity": 1,
  73                 stroke: 'none',
  74                 "stroke-width": 0,
  75                 "stroke-opacity": 1
  76             }
  77         },
  78         series: {
  79             regions: [{
  80                     values: visitorsData,
  81                     scale: ["#3c8dbc", "#2D79A6"], //['#3E5E6B', '#A6BAC2'],
  82                     normalizeFunction: 'polynomial'
  83                 }]
  84         },
  85         onRegionLabelShow: function(e, el, code) {
  86             if (typeof visitorsData[code] != "undefined")
  87                 el.html(el.html() + ': ' + visitorsData[code] + ' new visitors');
  88         }
  89     });
  90
  91     //Sparkline charts
  92     var myvalues = [15, 19, 20, -22, -33, 27, 31, 27, 19, 30, 21];
  93     $('#sparkline-1').sparkline(myvalues, {
  94         type: 'bar',
  95         barColor: '#00a65a',
  96         negBarColor: "#f56954",
  97         height: '20px'
  98     });
  99     myvalues = [15, 19, 20, 22, -2, -10, -7, 27, 19, 30, 21];
 100     $('#sparkline-2').sparkline(myvalues, {
 101         type: 'bar',
 102         barColor: '#00a65a',
 103         negBarColor: "#f56954",
 104         height: '20px'
 105     });
 106     myvalues = [15, -19, -20, 22, 33, 27, 31, 27, 19, 30, 21];
 107     $('#sparkline-3').sparkline(myvalues, {
 108         type: 'bar',
 109         barColor: '#00a65a',
 110         negBarColor: "#f56954",
 111         height: '20px'
 112     });
 113     myvalues = [15, 19, 20, 22, 33, -27, -31, 27, 19, 30, 21];
 114     $('#sparkline-4').sparkline(myvalues, {
 115         type: 'bar',
 116         barColor: '#00a65a',
 117         negBarColor: "#f56954",
 118         height: '20px'
 119     });
 120     myvalues = [15, 19, 20, 22, 33, 27, 31, -27, -19, 30, 21];
 121     $('#sparkline-5').sparkline(myvalues, {
 122         type: 'bar',
 123         barColor: '#00a65a',
 124         negBarColor: "#f56954",
 125         height: '20px'
 126     });
 127     myvalues = [15, 19, -20, 22, -13, 27, 31, 27, 19, 30, 21];
 128     $('#sparkline-6').sparkline(myvalues, {
 129         type: 'bar',
 130         barColor: '#00a65a',
 131         negBarColor: "#f56954",
 132         height: '20px'
 133     });
 134
 135     //Date for the calendar events (dummy data)
 136     var date = new Date();
 137     var d = date.getDate(),
 138             m = date.getMonth(),
 139             y = date.getFullYear();
 140
 141     //Calendar
 142     $('#calendar').fullCalendar({
 143         editable: true, //Enable drag and drop
 144         events: [
 145             {
 146                 title: 'All Day Event',
 147                 start: new Date(y, m, 1),
 148                 backgroundColor: "#3c8dbc", //light-blue
 149                 borderColor: "#3c8dbc" //light-blue
 150             },
 151             {
 152                 title: 'Long Event',
 153                 start: new Date(y, m, d - 5),
 154                 end: new Date(y, m, d - 2),
 155                 backgroundColor: "#f39c12", //yellow
 156                 borderColor: "#f39c12" //yellow
 157             },
 158             {
 159                 title: 'Meeting',
 160                 start: new Date(y, m, d, 10, 30),
 161                 allDay: false,
 162                 backgroundColor: "#0073b7", //Blue
 163                 borderColor: "#0073b7" //Blue
 164             },
 165             {
 166                 title: 'Lunch',
 167                 start: new Date(y, m, d, 12, 0),
 168                 end: new Date(y, m, d, 14, 0),
 169                 allDay: false,
 170                 backgroundColor: "#00c0ef", //Info (aqua)
 171                 borderColor: "#00c0ef" //Info (aqua)
 172             },
 173             {
 174                 title: 'Birthday Party',
 175                 start: new Date(y, m, d + 1, 19, 0),
 176                 end: new Date(y, m, d + 1, 22, 30),
 177                 allDay: false,
 178                 backgroundColor: "#00a65a", //Success (green)
 179                 borderColor: "#00a65a" //Success (green)
 180             },
 181             {
 182                 title: 'Click for Google',
 183                 start: new Date(y, m, 28),
 184                 end: new Date(y, m, 29),
 185                 url: 'http://google.com/',
 186                 backgroundColor: "#f56954", //red
 187                 borderColor: "#f56954" //red
 188             }
 189         ],
 190         buttonText: {//This is to add icons to the visible buttons
 191             prev: "<span class='fa fa-caret-left'></span>",
 192             next: "<span class='fa fa-caret-right'></span>",
 193             today: 'today',
 194             month: 'month',
 195             week: 'week',
 196             day: 'day'
 197         },
 198         header: {
 199             left: 'title',
 200             center: '',
 201             right: 'prev,next'
 202         }
 203     });
 204
 205     //SLIMSCROLL FOR CHAT WIDGET
 206     $('#chat-box').slimScroll({
 207         height: '250px'
 208     });
 209
 210     /* Morris.js Charts */
 211     // Sales chart
 212     var area = new Morris.Area({
 213         element: 'revenue-chart',
 214         resize: true,
 215         data: [
 216             {y: '2011 Q1', item1: 2666, item2: 2666},
 217             {y: '2011 Q2', item1: 2778, item2: 2294},
 218             {y: '2011 Q3', item1: 4912, item2: 1969},
 219             {y: '2011 Q4', item1: 3767, item2: 3597},
 220             {y: '2012 Q1', item1: 6810, item2: 1914},
 221             {y: '2012 Q2', item1: 5670, item2: 4293},
 222             {y: '2012 Q3', item1: 4820, item2: 3795},
 223             {y: '2012 Q4', item1: 15073, item2: 5967},
 224             {y: '2013 Q1', item1: 10687, item2: 4460},
 225             {y: '2013 Q2', item1: 8432, item2: 5713}
 226         ],
 227         xkey: 'y',
 228         ykeys: ['item1', 'item2'],
 229         labels: ['Item 1', 'Item 2'],
 230         lineColors: ['#a0d0e0', '#3c8dbc'],
 231         hideHover: 'auto'
 232     });
 233     //Donut Chart
 234     var donut = new Morris.Donut({
 235         element: 'sales-chart',
 236         resize: true,
 237         colors: ["#3c8dbc", "#f56954", "#00a65a"],
 238         data: [
 239             {label: "Download Sales", value: 12},
 240             {label: "In-Store Sales", value: 30},
 241             {label: "Mail-Order Sales", value: 20}
 242         ],
 243         hideHover: 'auto'
 244     });
 245     //Bar chart
 246     var bar = new Morris.Bar({
 247         element: 'bar-chart',
 248         resize: true,
 249         data: [
 250             {y: '2006', a: 100, b: 90},
 251             {y: '2007', a: 75, b: 65},
 252             {y: '2008', a: 50, b: 40},
 253             {y: '2009', a: 75, b: 65},
 254             {y: '2010', a: 50, b: 40},
 255             {y: '2011', a: 75, b: 65},
 256             {y: '2012', a: 100, b: 90}
 257         ],
 258         barColors: ['#00a65a', '#f56954'],
 259         xkey: 'y',
 260         ykeys: ['a', 'b'],
 261         labels: ['CPU', 'DISK'],
 262         hideHover: 'auto'
 263     });
 264     //Fix for charts under tabs
 265     $('.box ul.nav a').on('shown.bs.tab', function(e) {
 266         area.redraw();
 267         donut.redraw();
 268     });
 269
 270
 271     /* BOX REFRESH PLUGIN EXAMPLE (usage with morris charts) */
 272     $("#loading-example").boxRefresh({
 273         source: "ajax/dashboard-boxrefresh-demo.php",
 274         onLoadDone: function(box) {
 275             bar = new Morris.Bar({
 276                 element: 'bar-chart',
 277                 resize: true,
 278                 data: [
 279                     {y: '2006', a: 100, b: 90},
 280                     {y: '2007', a: 75, b: 65},
 281                     {y: '2008', a: 50, b: 40},
 282                     {y: '2009', a: 75, b: 65},
 283                     {y: '2010', a: 50, b: 40},
 284                     {y: '2011', a: 75, b: 65},
 285                     {y: '2012', a: 100, b: 90}
 286                 ],
 287                 barColors: ['#00a65a', '#f56954'],
 288                 xkey: 'y',
 289                 ykeys: ['a', 'b'],
 290                 labels: ['CPU', 'DISK'],
 291                 hideHover: 'auto'
 292             });
 293         }
 294     });
 295
 296     /* The todo list plugin */
 297     $(".todo-list").todolist({
 298         onCheck: function(ele) {
 299             //console.log("The element has been checked")
 300         },
 301         onUncheck: function(ele) {
 302             //console.log("The element has been unchecked")
 303         }
 304     });
 305
 306 });