new ui with AdminLTE
This commit is contained in:
lukas committed
1 parent
98e14b92ab
commit
6afaad0d33
1784 files changed
+582732
-6
No files matched your search
+1790
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"adminlte.js","sources":["../../build/js/ControlSidebar.js","../../build/js/Layout.js","../../build/js/PushMenu.js","../../build/js/Treeview.js","../../build/js/DirectChat.js","../../build/js/TodoList.js","../../build/js/CardWidget.js","../../build/js/CardRefresh.js","../../build/js/Dropdown.js","../../build/js/Toasts.js"],"sourcesContent":["/**\n * --------------------------------------------\n * AdminLTE ControlSidebar.js\n * License MIT\n * --------------------------------------------\n */\n\nconst ControlSidebar = (($) => {\n /**\n * Constants\n * ====================================================\n */\n\n const NAME = 'ControlSidebar'\n const DATA_KEY = 'lte.controlsidebar'\n const EVENT_KEY = `.${DATA_KEY}`\n const JQUERY_NO_CONFLICT = $.fn[NAME]\n const DATA_API_KEY = '.data-api'\n\n const Event = {\n COLLAPSED: `collapsed${EVENT_KEY}`,\n EXPANDED: `expanded${EVENT_KEY}`,\n }\n\n const Selector = {\n CONTROL_SIDEBAR: '.control-sidebar',\n CONTROL_SIDEBAR_CONTENT: '.control-sidebar-content',\n DATA_TOGGLE: '[data-widget=\"control-sidebar\"]',\n CONTENT: '.content-wrapper',\n HEADER: '.main-header',\n FOOTER: '.main-footer',\n }\n\n const ClassName = {\n CONTROL_SIDEBAR_ANIMATE: 'control-sidebar-animate',\n CONTROL_SIDEBAR_OPEN: 'control-sidebar-open',\n CONTROL_SIDEBAR_SLIDE: 'control-sidebar-slide-open',\n LAYOUT_FIXED: 'layout-fixed',\n NAVBAR_FIXED: 'layout-navbar-fixed',\n NAVBAR_SM_FIXED: 'layout-sm-navbar-fixed',\n NAVBAR_MD_FIXED: 'layout-md-navbar-fixed',\n NAVBAR_LG_FIXED: 'layout-lg-navbar-fixed',\n NAVBAR_XL_FIXED: 'layout-xl-navbar-fixed',\n FOOTER_FIXED: 'layout-footer-fixed',\n FOOTER_SM_FIXED: 'layout-sm-footer-fixed',\n FOOTER_MD_FIXED: 'layout-md-footer-fixed',\n FOOTER_LG_FIXED: 'layout-lg-footer-fixed',\n FOOTER_XL_FIXED: 'layout-xl-footer-fixed',\n }\n\n const Default = {\n controlsidebarSlide: true,\n scrollbarTheme : 'os-theme-light',\n scrollbarAutoHide: 'l',\n }\n\n /**\n * Class Definition\n * ====================================================\n */\n\n class ControlSidebar {\n constructor(element, config) {\n this._element = element\n this._config = config\n\n this._init()\n }\n\n // Public\n\n show() {\n // Show the control sidebar\n if (this._config.controlsidebarSlide) {\n $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)\n $('body').removeClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){\n $(Selector.CONTROL_SIDEBAR).hide()\n $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)\n $(this).dequeue()\n })\n } else {\n $('body').removeClass(ClassName.CONTROL_SIDEBAR_OPEN)\n }\n\n const expandedEvent = $.Event(Event.EXPANDED)\n $(this._element).trigger(expandedEvent)\n }\n\n collapse() {\n // Collapse the control sidebar\n if (this._config.controlsidebarSlide) {\n $('html').addClass(ClassName.CONTROL_SIDEBAR_ANIMATE)\n $(Selector.CONTROL_SIDEBAR).show().delay(10).queue(function(){\n $('body').addClass(ClassName.CONTROL_SIDEBAR_SLIDE).delay(300).queue(function(){\n $('html').removeClass(ClassName.CONTROL_SIDEBAR_ANIMATE)\n $(this).dequeue()\n })\n $(this).dequeue()\n })\n } else {\n $('body').addClass(ClassName.CONTROL_SIDEBAR_OPEN)\n }\n\n const collapsedEvent = $.Event(Event.COLLAPSED)\n $(this._element).trigger(collapsedEvent)\n }\n\n toggle() {\n const shouldOpen = $('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body')\n .hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)\n if (shouldOpen) {\n // Open the control sidebar\n this.show()\n } else {\n // Close the control sidebar\n this.collapse()\n }\n }\n\n // Private\n\n _init() {\n this._fixHeight()\n this._fixScrollHeight()\n\n $(window).resize(() => {\n this._fixHeight()\n this._fixScrollHeight()\n })\n\n $(window).scroll(() => {\n if ($('body').hasClass(ClassName.CONTROL_SIDEBAR_OPEN) || $('body').hasClass(ClassName.CONTROL_SIDEBAR_SLIDE)) {\n this._fixScrollHeight()\n }\n })\n }\n\n _fixScrollHeight() {\n const heights = {\n scroll: $(document).height(),\n window: $(window).height(),\n header: $(Selector.HEADER).outerHeight(),\n footer: $(Selector.FOOTER).outerHeight(),\n }\n const positions = {\n bottom: Math.abs((heights.window + $(window).scrollTop()) - heights.scroll),\n top: $(window).scrollTop(),\n }\n\n let navbarFixed = false;\n let footerFixed = false;\n\n if ($('body').hasClass(ClassName.LAYOUT_FIXED)) {\n if (\n $('body').hasClass(ClassName.NAVBAR_FIXED)\n Line truncated
|
||||
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* AdminLTE v3.0.0 (https://adminlte.io)
|
||||
* Copyright 2014-2019 Colorlib <http://colorlib.com>
|
||||
* Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
|
||||
*/
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).adminlte={})}(this,(function(t){"use strict";var e=function(t){var e="ControlSidebar",i="lte.controlsidebar",n=t.fn[e],s={COLLAPSED:"collapsed.lte.controlsidebar",EXPANDED:"expanded.lte.controlsidebar"},o=".control-sidebar",a=".control-sidebar-content",r='[data-widget="control-sidebar"]',l=".main-header",c=".main-footer",d="control-sidebar-animate",h="control-sidebar-open",f="control-sidebar-slide-open",u="layout-fixed",g="layout-navbar-fixed",_="layout-sm-navbar-fixed",p="layout-md-navbar-fixed",m="layout-lg-navbar-fixed",C="layout-xl-navbar-fixed",v="layout-footer-fixed",y="layout-sm-footer-fixed",b="layout-md-footer-fixed",w="layout-lg-footer-fixed",D="layout-xl-footer-fixed",E=function(){function e(t,e){this._element=t,this._config=e,this._init()}var n=e.prototype;return n.show=function(){this._config.controlsidebarSlide?(t("html").addClass(d),t("body").removeClass(f).delay(300).queue((function(){t(o).hide(),t("html").removeClass(d),t(this).dequeue()}))):t("body").removeClass(h);var e=t.Event(s.EXPANDED);t(this._element).trigger(e)},n.collapse=function(){this._config.controlsidebarSlide?(t("html").addClass(d),t(o).show().delay(10).queue((function(){t("body").addClass(f).delay(300).queue((function(){t("html").removeClass(d),t(this).dequeue()})),t(this).dequeue()}))):t("body").addClass(h);var e=t.Event(s.COLLAPSED);t(this._element).trigger(e)},n.toggle=function(){t("body").hasClass(h)||t("body").hasClass(f)?this.show():this.collapse()},n._init=function(){var e=this;this._fixHeight(),this._fixScrollHeight(),t(window).resize((function(){e._fixHeight(),e._fixScrollHeight()})),t(window).scroll((function(){(t("body").hasClass(h)||t("body").hasClass(f))&&e._fixScrollHeight()}))},n._fixScrollHeight=function(){var e={scroll:t(document).height(),window:t(window).height(),header:t(l).outerHeight(),footer:t(c).outerHeight()},i=Math.abs(e.window+t(window).scrollTop()-e.scroll),n=t(window).scrollTop(),s=!1,r=!1;t("body").hasClass(u)&&((t("body").hasClass(g)||t("body").hasClass(_)||t("body").hasClass(p)||t("body").hasClass(m)||t("body").hasClass(C))&&"fixed"===t(l).css("position")&&(s=!0),(t("body").hasClass(v)||t("body").hasClass(y)||t("body").hasClass(b)||t("body").hasClass(w)||t("body").hasClass(D))&&"fixed"===t(c).css("position")&&(r=!0),0===n&&0===i?(t(o).css("bottom",e.footer),t(o).css("top",e.header),t(o+", "+o+" "+a).css("height",e.window-(e.header+e.footer))):i<=e.footer?!1===r?(t(o).css("bottom",e.footer-i),t(o+", "+o+" "+a).css("height",e.window-(e.footer-i))):t(o).css("bottom",e.footer):n<=e.header?!1===s?(t(o).css("top",e.header-n),t(o+", "+o+" "+a).css("height",e.window-(e.header-n))):t(o).css("top",e.header):!1===s?(t(o).css("top",0),t(o+", "+o+" "+a).css("height",e.window)):t(o).css("top",e.header))},n._fixHeight=function(){var e=t(window).height(),i=t(l).outerHeight(),n=t(c).outerHeight();if(t("body").hasClass(u)){var s=e-i;(t("body").hasClass(v)||t("body").hasClass(y)||t("body").hasClass(b)||t("body").hasClass(w)||t("body").hasClass(D))&&"fixed"===t(c).css("position")&&(s=e-i-n),t(o+" "+a).css("height",s),"undefined"!=typeof t.fn.overlayScrollbars&&t(o+" "+a).overlayScrollbars({className:this._config.scrollbarTheme,sizeAutoCapable:!0,scrollbars:{autoHide:this._config.scrollbarAutoHide,clickScrolling:!0}})}},e._jQueryInterface=function(n){return this.each((function(){var s=t(this).data(i);if(s||(s=new e(this,t(this).data()),t(this).data(i,s)),"undefined"===s[n])throw new Error(n+" is not a function");s[n]()}))},e}();return t(document).on("click",r,(function(e){e.preventDefault(),E._jQueryInterface.call(t(this),"toggle")})),t.fn[e]=E._jQueryInterface,t.fn[e].Constructor=E,t.fn[e].noConflict=function(){return t.fn[e]=n,E._jQueryInterface},E}(jQuery),i=function(t){var e="Layout",i=t.fn[e],n=".main-header",s=".main-sidebar",o=".main-sidebar .sidebar",a=".content-wrapper",r=".main-footer",l='[data-widget="pushmenu"]',c=".login-box",d=".register-box",h="sidebar-focused",f="layout-fixed",u="login-page",g="register-page",_={scrollbarTheme:"os-theme-light",scrollbarAutoHide:"l"},p=function(){function e(t,e){this._config=e,this._element=t,this._init()}var i=e.prototype;return i.fixLayoutHeight=function(){var e={window:t(window).height(),header:0!==t(n).length?t(n).outerHeight():0,footer:0!==t(r).length?t(r).outerHeight():0,sidebar:0!==t(o).length?t(o).height():0},i=this._max(e);i==e.window?t(a).css("min-height",i-e.header-e.footer):t(a).css("min-height",i-e.header),t("body").hasClass(f)&&(t(a).css("min-height",i-e.header-e.footer),"undefined"!=typeof t.fn.overlayScrollbars&&t(o).overlayScrollbars({className:this._config.scrollbarTheme,sizeAutoCapable:!0,scrollbars:{autoHide:this._config.scrollbarAutoHide,clickScrolling:!0}}))},i._init=function(){var e=this;if(this.fixLayoutHeight(),t(o).on("collapsed.lte.treeview expanded.lte.treeview",(function(){e.fixLayoutHeLine truncated
|
||||
//# sourceMappingURL=adminlte.min.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["../../build/js/ControlSidebar.js","../../build/js/Layout.js","../../build/js/PushMenu.js","../../build/js/Treeview.js","../../build/js/DirectChat.js","../../build/js/TodoList.js","../../build/js/CardWidget.js","../../build/js/CardRefresh.js","../../build/js/Dropdown.js","../../build/js/Toasts.js"],"names":["ControlSidebar","$","NAME","DATA_KEY","JQUERY_NO_CONFLICT","fn","Event","COLLAPSED","EXPANDED","Selector","ClassName","element","config","this","_element","_config","_init","_proto","prototype","show","controlsidebarSlide","addClass","removeClass","delay","queue","hide","dequeue","expandedEvent","trigger","collapse","collapsedEvent","toggle","hasClass","_this","_fixHeight","_fixScrollHeight","window","resize","scroll","heights","document","height","header","outerHeight","footer","positions","Math","abs","scrollTop","navbarFixed","footerFixed","css","sidebarHeight","overlayScrollbars","className","scrollbarTheme","sizeAutoCapable","scrollbars","autoHide","scrollbarAutoHide","clickScrolling","_jQueryInterface","operation","each","data","Error","on","event","preventDefault","call","Constructor","noConflict","jQuery","Layout","Default","fixLayoutHeight","length","sidebar","max","_max","box_height","numbers","Object","keys","forEach","key","extend","PushMenu","EVENT_KEY","SHOWN","autoCollapseSize","enableRemember","noTransitionAfterReload","TOGGLE_BUTTON","SIDEBAR_MINI","SIDEBAR_COLLAPSED","BODY","OVERLAY","WRAPPER","options","_options","_addOverlay","width","localStorage","setItem","shownEvent","autoCollapse","remember","getItem","_this2","overlay","id","append","button","currentTarget","closest","Treeview","SELECTED","LOAD_DATA_API","animationSpeed","accordion","init","_setupListeners","expand","treeviewMenu","parentLi","openMenuLi","siblings","first","openTreeview","find","stop","slideDown","slideUp","$relativeTarget","$parent","parent","is","parents","_this3","DirectChat","toggleClass","toggledEvent","TodoList","onCheck","item","onUnCheck","prop","check","unCheck","that","target","CardWidget","MAXIMIZED","MINIMIZED","REMOVED","CARD","WAS_COLLAPSED","DATA_REMOVE","DATA_COLLAPSE","DATA_MAXIMIZE","CARD_HEADER","CARD_BODY","CARD_FOOTER","collapseTrigger","removeTrigger","maximizeTrigger","collapseIcon","expandIcon","maximizeIcon","minimizeIcon","settings","_parent","_settings","children","collapsed","expanded","remove","removed","maximize","transition","maximized","minimize","style","toggleMaximize","card","click","match","CardRefresh","LOADED","OVERLAY_ADDED","OVERLAY_REMOVED","DATA_REFRESH","source","sourceSelector","params","content","loadInContent","loadOnInit","responseType","overlayTemplate","onLoadStart","onLoadDone","response","_overlay","load","get","html","_removeOverlay","bind","loadedEvent","overlayAddedEvent","overlayRemovedEvent","Dropdown","toggleSubmenu","next","e","stopPropagation","Toasts","INIT","CREATED","Position","position","fixed","autohide","autoremove","fade","icon","image","imageAlt","imageHeight","title","subtitle","close","body","class","_prepareContainer","initEvent","create","toast","toast_header","toast_image","attr","toast_close","_getContainerId","prepend","createdEvent","removedEvent","container","replace","option"],"mappings":";;;;;sMAOA,IAAMA,EAAkB,SAACC,GAMvB,IAAMC,EAAqB,iBACrBC,EAAqB,qBAErBC,EAAqBH,EAAEI,GAAGH,GAG1BI,EAAQ,CACZC,UAAS,+BACTC,SAAQ,+BAGJC,EACa,mBADbA,EAEqB,2BAFrBA,EAGS,kCAHTA,EAKI,eALJA,EAMI,eAGJC,EACqB,0BADrBA,EAEkB,uBAFlBA,EAGmB,6BAHnBA,EAIU,eAJVA,EAKU,sBALVA,EAMa,yBANbA,EAOa,yBAPbA,EAQa,yBARbA,EASa,yBATbA,EAUU,sBAVVA,EAWa,yBAXbA,EAYa,yBAZbA,EAaa,yBAbbA,EAca,yBAcbV,EAtDuB,WAuD3B,SAAAA,EAAYW,EAASC,GACnBC,KAAKC,SAAWH,EAChBE,KAAKE,QAAWH,EAEhBC,KAAKG,QA3DoB,IAAAC,EAAAjB,EAAAkB,UAAA,OAAAD,EAgE3BE,KAAA,WAEMN,KAAKE,QAAQK,qBACfnB,EAAE,QAAQoB,SAASX,GACnBT,EAAE,QAAQqB,YAAYZ,GAAiCa,MAAM,KAAKC,OAAM,WACtEvB,EAAEQ,GAA0BgB,OAC5BxB,EAAE,QAAQqB,YAAYZ,GACtBT,EAAEY,MAAMa,cAGVzB,EAAE,QAAQqB,YAAYZ,GAGxB,IAAMiB,EAAgB1B,EAAEK,MAAMA,EAAME,UACpCP,EAAEY,KAAKC,UAAUc,QAAQD,IA9EAV,EAiF3BY,SAAA,WAEMhB,KAAKE,QAAQK,qBACfnB,EAAE,QAAQoB,SAASX,GACnBT,EAAEQ,GAA0BU,OAAOI,MAAM,IAAIC,OAAM,WACjDvB,EAAE,QAAQoB,SAASX,GAAiCa,MAAM,KAAKC,OAAM,WACnEvB,EAAE,QAAQqB,YAAYZ,GACtBT,EAAEY,MAAMa,aAEVzB,EAAEY,MAAMa,cAGVzB,EAAE,QAAQoB,SAASX,GAGrB,IAAMoB,EAAiB7B,EAAEK,MAAMA,EAAMC,WACrCN,EAAEY,KAAKC,UAAUc,QAAQE,IAjGAb,EAoG3Bc,OAAA,WACqB9B,EAAE,QAAQ+B,SAAStB,IAAmCT,EAAE,QACxE+B,SAAStB,GAGVG,KAAKM,OAGLN,KAAKgB,YA5GkBZ,EAkH3BD,MAAA,WAAQ,IAAAiB,EAAApB,KACNA,KAAKqB,aACLrB,KAAKsB,mBAELlC,EAAEmC,QAAQC,QAAO,WACfJ,EAAKC,aACLD,EAAKE,sBAGPlC,EAAEmC,QAAQE,QAAO,YACXrC,EAAE,QAAQ+B,SAAStB,IAAmCT,EAAE,QAAQ+B,SAAStB,KACzEuB,EAAKE,uBA7HclB,EAkI3BkB,iBAAA,WACE,IAAMI,EAAU,CACdD,OAAQrC,EAAEuC,UAAUC,SACpBL,OAAQnC,EAAEmC,QAAQK,SAClBC,OAAQzC,EAAEQ,GAAiBkC,cAC3BC,OAAQ3C,EAAEQ,GAAiBkC,eAEvBE,EACIC,KAAKC,IAAKR,EAAQH,OAASnC,EAAEmC,QAAQY,YAAeT,EAAQD,QADhEO,EAEC5C,EAAEmC,QAAQY,YAGbC,GAAc,EACdC,GAAc,EAEdjD,EAAE,QAAQ+B,SAAStB,MAEnBT,EAAE,QAAQ+B,SAAStB,IAChBT,EAAE,QAAQ+B,SAAStB,IACnBT,EAAE,QAAQ+B,SAAStB,IACnBT,EAAE,QAAQ+Line truncated
|
||||
+413
@@ -0,0 +1,413 @@
|
||||
/**
|
||||
* AdminLTE Demo Menu
|
||||
* ------------------
|
||||
* You should not use this file in production.
|
||||
* This file is for demo purposes only.
|
||||
*/
|
||||
(function ($) {
|
||||
'use strict'
|
||||
|
||||
var $sidebar = $('.control-sidebar')
|
||||
var $container = $('<div />', {
|
||||
class: 'p-3 control-sidebar-content'
|
||||
})
|
||||
|
||||
$sidebar.append($container)
|
||||
|
||||
var navbar_dark_skins = [
|
||||
'navbar-primary',
|
||||
'navbar-secondary',
|
||||
'navbar-info',
|
||||
'navbar-success',
|
||||
'navbar-danger',
|
||||
'navbar-indigo',
|
||||
'navbar-purple',
|
||||
'navbar-pink',
|
||||
'navbar-teal',
|
||||
'navbar-cyan',
|
||||
'navbar-dark',
|
||||
'navbar-gray-dark',
|
||||
'navbar-gray',
|
||||
]
|
||||
|
||||
var navbar_light_skins = [
|
||||
'navbar-light',
|
||||
'navbar-warning',
|
||||
'navbar-white',
|
||||
'navbar-orange',
|
||||
]
|
||||
|
||||
$container.append(
|
||||
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
|
||||
)
|
||||
|
||||
var $no_border_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.main-header').hasClass('border-bottom-0'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.main-header').addClass('border-bottom-0')
|
||||
} else {
|
||||
$('.main-header').removeClass('border-bottom-0')
|
||||
}
|
||||
})
|
||||
var $no_border_container = $('<div />', {'class': 'mb-1'}).append($no_border_checkbox).append('<span>No Navbar border</span>')
|
||||
$container.append($no_border_container)
|
||||
|
||||
var $text_sm_body_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('body').hasClass('text-sm'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('body').addClass('text-sm')
|
||||
} else {
|
||||
$('body').removeClass('text-sm')
|
||||
}
|
||||
})
|
||||
var $text_sm_body_container = $('<div />', {'class': 'mb-1'}).append($text_sm_body_checkbox).append('<span>Body small text</span>')
|
||||
$container.append($text_sm_body_container)
|
||||
|
||||
var $text_sm_header_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.main-header').hasClass('text-sm'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.main-header').addClass('text-sm')
|
||||
} else {
|
||||
$('.main-header').removeClass('text-sm')
|
||||
}
|
||||
})
|
||||
var $text_sm_header_container = $('<div />', {'class': 'mb-1'}).append($text_sm_header_checkbox).append('<span>Navbar small text</span>')
|
||||
$container.append($text_sm_header_container)
|
||||
|
||||
var $text_sm_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.nav-sidebar').hasClass('text-sm'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.nav-sidebar').addClass('text-sm')
|
||||
} else {
|
||||
$('.nav-sidebar').removeClass('text-sm')
|
||||
}
|
||||
})
|
||||
var $text_sm_sidebar_container = $('<div />', {'class': 'mb-1'}).append($text_sm_sidebar_checkbox).append('<span>Sidebar nav small text</span>')
|
||||
$container.append($text_sm_sidebar_container)
|
||||
|
||||
var $text_sm_footer_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.main-footer').hasClass('text-sm'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.main-footer').addClass('text-sm')
|
||||
} else {
|
||||
$('.main-footer').removeClass('text-sm')
|
||||
}
|
||||
})
|
||||
var $text_sm_footer_container = $('<div />', {'class': 'mb-1'}).append($text_sm_footer_checkbox).append('<span>Footer small text</span>')
|
||||
$container.append($text_sm_footer_container)
|
||||
|
||||
var $flat_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.nav-sidebar').hasClass('nav-flat'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.nav-sidebar').addClass('nav-flat')
|
||||
} else {
|
||||
$('.nav-sidebar').removeClass('nav-flat')
|
||||
}
|
||||
})
|
||||
var $flat_sidebar_container = $('<div />', {'class': 'mb-1'}).append($flat_sidebar_checkbox).append('<span>Sidebar nav flat style</span>')
|
||||
$container.append($flat_sidebar_container)
|
||||
|
||||
var $legacy_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.nav-sidebar').hasClass('nav-legacy'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.nav-sidebar').addClass('nav-legacy')
|
||||
} else {
|
||||
$('.nav-sidebar').removeClass('nav-legacy')
|
||||
}
|
||||
})
|
||||
var $legacy_sidebar_container = $('<div />', {'class': 'mb-1'}).append($legacy_sidebar_checkbox).append('<span>Sidebar nav legacy style</span>')
|
||||
$container.append($legacy_sidebar_container)
|
||||
|
||||
var $compact_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.nav-sidebar').hasClass('nav-compact'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.nav-sidebar').addClass('nav-compact')
|
||||
} else {
|
||||
$('.nav-sidebar').removeClass('nav-compact')
|
||||
}
|
||||
})
|
||||
var $compact_sidebar_container = $('<div />', {'class': 'mb-1'}).append($compact_sidebar_checkbox).append('<span>Sidebar nav compact</span>')
|
||||
$container.append($compact_sidebar_container)
|
||||
|
||||
var $child_indent_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.nav-sidebar').hasClass('nav-child-indent'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.nav-sidebar').addClass('nav-child-indent')
|
||||
} else {
|
||||
$('.nav-sidebar').removeClass('nav-child-indent')
|
||||
}
|
||||
})
|
||||
var $child_indent_sidebar_container = $('<div />', {'class': 'mb-1'}).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
|
||||
$container.append($child_indent_sidebar_container)
|
||||
|
||||
var $no_expand_sidebar_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.main-sidebar').hasClass('sidebar-no-expand'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.main-sidebar').addClass('sidebar-no-expand')
|
||||
} else {
|
||||
$('.main-sidebar').removeClass('sidebar-no-expand')
|
||||
}
|
||||
})
|
||||
var $no_expand_sidebar_container = $('<div />', {'class': 'mb-1'}).append($no_expand_sidebar_checkbox).append('<span>Main Sidebar disable hover/focus auto expand</span>')
|
||||
$container.append($no_expand_sidebar_container)
|
||||
|
||||
var $text_sm_brand_checkbox = $('<input />', {
|
||||
type : 'checkbox',
|
||||
value : 1,
|
||||
checked: $('.brand-link').hasClass('text-sm'),
|
||||
'class': 'mr-1'
|
||||
}).on('click', function () {
|
||||
if ($(this).is(':checked')) {
|
||||
$('.brand-link').addClass('text-sm')
|
||||
} else {
|
||||
$('.brand-link').removeClass('text-sm')
|
||||
}
|
||||
})
|
||||
var $text_sm_brand_container = $('<div />', {'class': 'mb-4'}).append($text_sm_brand_checkbox).append('<span>Brand small text</span>')
|
||||
$container.append($text_sm_brand_container)
|
||||
|
||||
$container.append('<h6>Navbar Variants</h6>')
|
||||
|
||||
var $navbar_variants = $('<div />', {
|
||||
'class': 'd-flex'
|
||||
})
|
||||
var navbar_all_colors = navbar_dark_skins.concat(navbar_light_skins)
|
||||
var $navbar_variants_colors = createSkinBlock(navbar_all_colors, function (e) {
|
||||
var color = $(this).data('color')
|
||||
var $main_header = $('.main-header')
|
||||
$main_header.removeClass('navbar-dark').removeClass('navbar-light')
|
||||
navbar_all_colors.map(function (color) {
|
||||
$main_header.removeClass(color)
|
||||
})
|
||||
|
||||
if (navbar_dark_skins.indexOf(color) > -1) {
|
||||
$main_header.addClass('navbar-dark')
|
||||
} else {
|
||||
$main_header.addClass('navbar-light')
|
||||
}
|
||||
|
||||
$main_header.addClass(color)
|
||||
})
|
||||
|
||||
$navbar_variants.append($navbar_variants_colors)
|
||||
|
||||
$container.append($navbar_variants)
|
||||
|
||||
var sidebar_colors = [
|
||||
'bg-primary',
|
||||
'bg-warning',
|
||||
'bg-info',
|
||||
'bg-danger',
|
||||
'bg-success',
|
||||
'bg-indigo',
|
||||
'bg-navy',
|
||||
'bg-purple',
|
||||
'bg-fuchsia',
|
||||
'bg-pink',
|
||||
'bg-maroon',
|
||||
'bg-orange',
|
||||
'bg-lime',
|
||||
'bg-teal',
|
||||
'bg-olive'
|
||||
]
|
||||
|
||||
var accent_colors = [
|
||||
'accent-primary',
|
||||
'accent-warning',
|
||||
'accent-info',
|
||||
'accent-danger',
|
||||
'accent-success',
|
||||
'accent-indigo',
|
||||
'accent-navy',
|
||||
'accent-purple',
|
||||
'accent-fuchsia',
|
||||
'accent-pink',
|
||||
'accent-maroon',
|
||||
'accent-orange',
|
||||
'accent-lime',
|
||||
'accent-teal',
|
||||
'accent-olive'
|
||||
]
|
||||
|
||||
var sidebar_skins = [
|
||||
'sidebar-dark-primary',
|
||||
'sidebar-dark-warning',
|
||||
'sidebar-dark-info',
|
||||
'sidebar-dark-danger',
|
||||
'sidebar-dark-success',
|
||||
'sidebar-dark-indigo',
|
||||
'sidebar-dark-navy',
|
||||
'sidebar-dark-purple',
|
||||
'sidebar-dark-fuchsia',
|
||||
'sidebar-dark-pink',
|
||||
'sidebar-dark-maroon',
|
||||
'sidebar-dark-orange',
|
||||
'sidebar-dark-lime',
|
||||
'sidebar-dark-teal',
|
||||
'sidebar-dark-olive',
|
||||
'sidebar-light-primary',
|
||||
'sidebar-light-warning',
|
||||
'sidebar-light-info',
|
||||
'sidebar-light-danger',
|
||||
'sidebar-light-success',
|
||||
'sidebar-light-indigo',
|
||||
'sidebar-light-navy',
|
||||
'sidebar-light-purple',
|
||||
'sidebar-light-fuchsia',
|
||||
'sidebar-light-pink',
|
||||
'sidebar-light-maroon',
|
||||
'sidebar-light-orange',
|
||||
'sidebar-light-lime',
|
||||
'sidebar-light-teal',
|
||||
'sidebar-light-olive'
|
||||
]
|
||||
|
||||
$container.append('<h6>Accent Color Variants</h6>')
|
||||
var $accent_variants = $('<div />', {
|
||||
'class': 'd-flex'
|
||||
})
|
||||
$container.append($accent_variants)
|
||||
$container.append(createSkinBlock(accent_colors, function () {
|
||||
var color = $(this).data('color')
|
||||
var accent_class = color
|
||||
var $body = $('body')
|
||||
accent_colors.map(function (skin) {
|
||||
$body.removeClass(skin)
|
||||
})
|
||||
|
||||
$body.addClass(accent_class)
|
||||
}))
|
||||
|
||||
$container.append('<h6>Dark Sidebar Variants</h6>')
|
||||
var $sidebar_variants = $('<div />', {
|
||||
'class': 'd-flex'
|
||||
})
|
||||
$container.append($sidebar_variants)
|
||||
$container.append(createSkinBlock(sidebar_colors, function () {
|
||||
var color = $(this).data('color')
|
||||
var sidebar_class = 'sidebar-dark-' + color.replace('bg-', '')
|
||||
var $sidebar = $('.main-sidebar')
|
||||
sidebar_skins.map(function (skin) {
|
||||
$sidebar.removeClass(skin)
|
||||
})
|
||||
|
||||
$sidebar.addClass(sidebar_class)
|
||||
}))
|
||||
|
||||
$container.append('<h6>Light Sidebar Variants</h6>')
|
||||
var $sidebar_variants = $('<div />', {
|
||||
'class': 'd-flex'
|
||||
})
|
||||
$container.append($sidebar_variants)
|
||||
$container.append(createSkinBlock(sidebar_colors, function () {
|
||||
var color = $(this).data('color')
|
||||
var sidebar_class = 'sidebar-light-' + color.replace('bg-', '')
|
||||
var $sidebar = $('.main-sidebar')
|
||||
sidebar_skins.map(function (skin) {
|
||||
$sidebar.removeClass(skin)
|
||||
})
|
||||
|
||||
$sidebar.addClass(sidebar_class)
|
||||
}))
|
||||
|
||||
var logo_skins = navbar_all_colors
|
||||
$container.append('<h6>Brand Logo Variants</h6>')
|
||||
var $logo_variants = $('<div />', {
|
||||
'class': 'd-flex'
|
||||
})
|
||||
$container.append($logo_variants)
|
||||
var $clear_btn = $('<a />', {
|
||||
href: 'javascript:void(0)'
|
||||
}).text('clear').on('click', function () {
|
||||
var $logo = $('.brand-link')
|
||||
logo_skins.map(function (skin) {
|
||||
$logo.removeClass(skin)
|
||||
})
|
||||
})
|
||||
$container.append(createSkinBlock(logo_skins, function () {
|
||||
var color = $(this).data('color')
|
||||
var $logo = $('.brand-link')
|
||||
logo_skins.map(function (skin) {
|
||||
$logo.removeClass(skin)
|
||||
})
|
||||
$logo.addClass(color)
|
||||
}).append($clear_btn))
|
||||
|
||||
function createSkinBlock(colors, callback) {
|
||||
var $block = $('<div />', {
|
||||
'class': 'd-flex flex-wrap mb-3'
|
||||
})
|
||||
|
||||
colors.map(function (color) {
|
||||
var $color = $('<div />', {
|
||||
'class': (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-') + ' elevation-2'
|
||||
})
|
||||
|
||||
$block.append($color)
|
||||
|
||||
$color.data('color', color)
|
||||
|
||||
$color.css({
|
||||
width : '40px',
|
||||
height : '20px',
|
||||
borderRadius: '25px',
|
||||
marginRight : 10,
|
||||
marginBottom: 10,
|
||||
opacity : 0.8,
|
||||
cursor : 'pointer'
|
||||
})
|
||||
|
||||
$color.hover(function () {
|
||||
$(this).css({ opacity: 1 }).removeClass('elevation-2').addClass('elevation-4')
|
||||
}, function () {
|
||||
$(this).css({ opacity: 0.8 }).removeClass('elevation-4').addClass('elevation-2')
|
||||
})
|
||||
|
||||
if (callback) {
|
||||
$color.on('click', callback)
|
||||
}
|
||||
})
|
||||
|
||||
return $block
|
||||
}
|
||||
})(jQuery)
|
||||
@@ -0,0 +1,264 @@
|
||||
/*
|
||||
* Author: Abdullah A Almsaeed
|
||||
* Date: 4 Jan 2014
|
||||
* Description:
|
||||
* This is a demo file used only for the main dashboard (index.html)
|
||||
**/
|
||||
|
||||
$(function () {
|
||||
|
||||
'use strict'
|
||||
|
||||
// Make the dashboard widgets sortable Using jquery UI
|
||||
$('.connectedSortable').sortable({
|
||||
placeholder : 'sort-highlight',
|
||||
connectWith : '.connectedSortable',
|
||||
handle : '.card-header, .nav-tabs',
|
||||
forcePlaceholderSize: true,
|
||||
zIndex : 999999
|
||||
})
|
||||
$('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')
|
||||
|
||||
// jQuery UI sortable for the todo list
|
||||
$('.todo-list').sortable({
|
||||
placeholder : 'sort-highlight',
|
||||
handle : '.handle',
|
||||
forcePlaceholderSize: true,
|
||||
zIndex : 999999
|
||||
})
|
||||
|
||||
// bootstrap WYSIHTML5 - text editor
|
||||
$('.textarea').summernote()
|
||||
|
||||
$('.daterange').daterangepicker({
|
||||
ranges : {
|
||||
'Today' : [moment(), moment()],
|
||||
'Yesterday' : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||
'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
|
||||
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||
'This Month' : [moment().startOf('month'), moment().endOf('month')],
|
||||
'Last Month' : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||
},
|
||||
startDate: moment().subtract(29, 'days'),
|
||||
endDate : moment()
|
||||
}, function (start, end) {
|
||||
window.alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
|
||||
})
|
||||
|
||||
/* jQueryKnob */
|
||||
$('.knob').knob()
|
||||
|
||||
// jvectormap data
|
||||
var visitorsData = {
|
||||
'US': 398, //USA
|
||||
'SA': 400, //Saudi Arabia
|
||||
'CA': 1000, //Canada
|
||||
'DE': 500, //Germany
|
||||
'FR': 760, //France
|
||||
'CN': 300, //China
|
||||
'AU': 700, //Australia
|
||||
'BR': 600, //Brazil
|
||||
'IN': 800, //India
|
||||
'GB': 320, //Great Britain
|
||||
'RU': 3000 //Russia
|
||||
}
|
||||
// World map by jvectormap
|
||||
$('#world-map').vectorMap({
|
||||
map : 'usa_en',
|
||||
backgroundColor : 'transparent',
|
||||
regionStyle : {
|
||||
initial: {
|
||||
fill : 'rgba(255, 255, 255, 0.7)',
|
||||
'fill-opacity' : 1,
|
||||
stroke : 'rgba(0,0,0,.2)',
|
||||
'stroke-width' : 1,
|
||||
'stroke-opacity': 1
|
||||
}
|
||||
},
|
||||
series : {
|
||||
regions: [{
|
||||
values : visitorsData,
|
||||
scale : ['#ffffff', '#0154ad'],
|
||||
normalizeFunction: 'polynomial'
|
||||
}]
|
||||
},
|
||||
onRegionLabelShow: function (e, el, code) {
|
||||
if (typeof visitorsData[code] != 'undefined')
|
||||
el.html(el.html() + ': ' + visitorsData[code] + ' new visitors')
|
||||
}
|
||||
})
|
||||
|
||||
// Sparkline charts
|
||||
var sparkline1 = new Sparkline($("#sparkline-1")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
|
||||
var sparkline2 = new Sparkline($("#sparkline-2")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
|
||||
var sparkline3 = new Sparkline($("#sparkline-3")[0], {width: 80, height: 50, lineColor: '#92c1dc', endColor: '#ebf4f9'});
|
||||
|
||||
sparkline1.draw([1000, 1200, 920, 927, 931, 1027, 819, 930, 1021]);
|
||||
sparkline2.draw([515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921]);
|
||||
sparkline3.draw([15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21]);
|
||||
|
||||
// The Calender
|
||||
$('#calendar').datetimepicker({
|
||||
format: 'L',
|
||||
inline: true
|
||||
})
|
||||
|
||||
// SLIMSCROLL FOR CHAT WIDGET
|
||||
$('#chat-box').overlayScrollbars({
|
||||
height: '250px'
|
||||
})
|
||||
|
||||
/* Chart.js Charts */
|
||||
// Sales chart
|
||||
var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
|
||||
//$('#revenue-chart').get(0).getContext('2d');
|
||||
|
||||
var salesChartData = {
|
||||
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label : 'Digital Goods',
|
||||
backgroundColor : 'rgba(60,141,188,0.9)',
|
||||
borderColor : 'rgba(60,141,188,0.8)',
|
||||
pointRadius : false,
|
||||
pointColor : '#3b8bba',
|
||||
pointStrokeColor : 'rgba(60,141,188,1)',
|
||||
pointHighlightFill : '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data : [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label : 'Electronics',
|
||||
backgroundColor : 'rgba(210, 214, 222, 1)',
|
||||
borderColor : 'rgba(210, 214, 222, 1)',
|
||||
pointRadius : false,
|
||||
pointColor : 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor : '#c1c7d1',
|
||||
pointHighlightFill : '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data : [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
var salesChartOptions = {
|
||||
maintainAspectRatio : false,
|
||||
responsive : true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines : {
|
||||
display : false,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines : {
|
||||
display : false,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
var salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
}
|
||||
)
|
||||
|
||||
// Donut Chart
|
||||
var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
|
||||
var pieData = {
|
||||
labels: [
|
||||
'Instore Sales',
|
||||
'Download Sales',
|
||||
'Mail-Order Sales',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [30,12,20],
|
||||
backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
|
||||
}
|
||||
]
|
||||
}
|
||||
var pieOptions = {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
maintainAspectRatio : false,
|
||||
responsive : true,
|
||||
}
|
||||
//Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
var pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
});
|
||||
|
||||
// Sales graph chart
|
||||
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
|
||||
//$('#revenue-chart').get(0).getContext('2d');
|
||||
|
||||
var salesGraphChartData = {
|
||||
labels : ['2011 Q1', '2011 Q2', '2011 Q3', '2011 Q4', '2012 Q1', '2012 Q2', '2012 Q3', '2012 Q4', '2013 Q1', '2013 Q2'],
|
||||
datasets: [
|
||||
{
|
||||
label : 'Digital Goods',
|
||||
fill : false,
|
||||
borderWidth : 2,
|
||||
lineTension : 0,
|
||||
spanGaps : true,
|
||||
borderColor : '#efefef',
|
||||
pointRadius : 3,
|
||||
pointHoverRadius : 7,
|
||||
pointColor : '#efefef',
|
||||
pointBackgroundColor: '#efefef',
|
||||
data : [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var salesGraphChartOptions = {
|
||||
maintainAspectRatio : false,
|
||||
responsive : true,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks : {
|
||||
fontColor: '#efefef',
|
||||
},
|
||||
gridLines : {
|
||||
display : false,
|
||||
color: '#efefef',
|
||||
drawBorder: false,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks : {
|
||||
stepSize: 5000,
|
||||
fontColor: '#efefef',
|
||||
},
|
||||
gridLines : {
|
||||
display : true,
|
||||
color: '#efefef',
|
||||
drawBorder: false,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
var salesGraphChart = new Chart(salesGraphChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesGraphChartData,
|
||||
options: salesGraphChartOptions
|
||||
}
|
||||
)
|
||||
|
||||
})
|
||||
@@ -0,0 +1,267 @@
|
||||
$(function () {
|
||||
|
||||
'use strict'
|
||||
|
||||
/* ChartJS
|
||||
* -------
|
||||
* Here we will create a few charts using ChartJS
|
||||
*/
|
||||
|
||||
//-----------------------
|
||||
//- MONTHLY SALES CHART -
|
||||
//-----------------------
|
||||
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
|
||||
|
||||
var salesChartData = {
|
||||
labels : ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
label : 'Digital Goods',
|
||||
backgroundColor : 'rgba(60,141,188,0.9)',
|
||||
borderColor : 'rgba(60,141,188,0.8)',
|
||||
pointRadius : false,
|
||||
pointColor : '#3b8bba',
|
||||
pointStrokeColor : 'rgba(60,141,188,1)',
|
||||
pointHighlightFill : '#fff',
|
||||
pointHighlightStroke: 'rgba(60,141,188,1)',
|
||||
data : [28, 48, 40, 19, 86, 27, 90]
|
||||
},
|
||||
{
|
||||
label : 'Electronics',
|
||||
backgroundColor : 'rgba(210, 214, 222, 1)',
|
||||
borderColor : 'rgba(210, 214, 222, 1)',
|
||||
pointRadius : false,
|
||||
pointColor : 'rgba(210, 214, 222, 1)',
|
||||
pointStrokeColor : '#c1c7d1',
|
||||
pointHighlightFill : '#fff',
|
||||
pointHighlightStroke: 'rgba(220,220,220,1)',
|
||||
data : [65, 59, 80, 81, 56, 55, 40]
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
var salesChartOptions = {
|
||||
maintainAspectRatio : false,
|
||||
responsive : true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
gridLines : {
|
||||
display : false,
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
gridLines : {
|
||||
display : false,
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
// This will get the first returned node in the jQuery collection.
|
||||
var salesChart = new Chart(salesChartCanvas, {
|
||||
type: 'line',
|
||||
data: salesChartData,
|
||||
options: salesChartOptions
|
||||
}
|
||||
)
|
||||
|
||||
//---------------------------
|
||||
//- END MONTHLY SALES CHART -
|
||||
//---------------------------
|
||||
|
||||
//-------------
|
||||
//- PIE CHART -
|
||||
//-------------
|
||||
// Get context with jQuery - using jQuery's .get() method.
|
||||
var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
|
||||
var pieData = {
|
||||
labels: [
|
||||
'Chrome',
|
||||
'IE',
|
||||
'FireFox',
|
||||
'Safari',
|
||||
'Opera',
|
||||
'Navigator',
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
data: [700,500,400,600,300,100],
|
||||
backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de'],
|
||||
}
|
||||
]
|
||||
}
|
||||
var pieOptions = {
|
||||
legend: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
//Create pie or douhnut chart
|
||||
// You can switch between pie and douhnut using the method below.
|
||||
var pieChart = new Chart(pieChartCanvas, {
|
||||
type: 'doughnut',
|
||||
data: pieData,
|
||||
options: pieOptions
|
||||
})
|
||||
|
||||
//-----------------
|
||||
//- END PIE CHART -
|
||||
//-----------------
|
||||
|
||||
/* jVector Maps
|
||||
* ------------
|
||||
* Create a world map with markers
|
||||
*/
|
||||
$('#world-map-markers').mapael({
|
||||
map: {
|
||||
name : "usa_states",
|
||||
zoom: {
|
||||
enabled: true,
|
||||
maxLevel: 10
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// $('#world-map-markers').vectorMap({
|
||||
// map : 'world_en',
|
||||
// normalizeFunction: 'polynomial',
|
||||
// hoverOpacity : 0.7,
|
||||
// hoverColor : false,
|
||||
// backgroundColor : 'transparent',
|
||||
// regionStyle : {
|
||||
// initial : {
|
||||
// fill : 'rgba(210, 214, 222, 1)',
|
||||
// 'fill-opacity' : 1,
|
||||
// stroke : 'none',
|
||||
// 'stroke-width' : 0,
|
||||
// 'stroke-opacity': 1
|
||||
// },
|
||||
// hover : {
|
||||
// 'fill-opacity': 0.7,
|
||||
// cursor : 'pointer'
|
||||
// },
|
||||
// selected : {
|
||||
// fill: 'yellow'
|
||||
// },
|
||||
// selectedHover: {}
|
||||
// },
|
||||
// markerStyle : {
|
||||
// initial: {
|
||||
// fill : '#00a65a',
|
||||
// stroke: '#111'
|
||||
// }
|
||||
// },
|
||||
// markers : [
|
||||
// {
|
||||
// latLng: [41.90, 12.45],
|
||||
// name : 'Vatican City'
|
||||
// },
|
||||
// {
|
||||
// latLng: [43.73, 7.41],
|
||||
// name : 'Monaco'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-0.52, 166.93],
|
||||
// name : 'Nauru'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-8.51, 179.21],
|
||||
// name : 'Tuvalu'
|
||||
// },
|
||||
// {
|
||||
// latLng: [43.93, 12.46],
|
||||
// name : 'San Marino'
|
||||
// },
|
||||
// {
|
||||
// latLng: [47.14, 9.52],
|
||||
// name : 'Liechtenstein'
|
||||
// },
|
||||
// {
|
||||
// latLng: [7.11, 171.06],
|
||||
// name : 'Marshall Islands'
|
||||
// },
|
||||
// {
|
||||
// latLng: [17.3, -62.73],
|
||||
// name : 'Saint Kitts and Nevis'
|
||||
// },
|
||||
// {
|
||||
// latLng: [3.2, 73.22],
|
||||
// name : 'Maldives'
|
||||
// },
|
||||
// {
|
||||
// latLng: [35.88, 14.5],
|
||||
// name : 'Malta'
|
||||
// },
|
||||
// {
|
||||
// latLng: [12.05, -61.75],
|
||||
// name : 'Grenada'
|
||||
// },
|
||||
// {
|
||||
// latLng: [13.16, -61.23],
|
||||
// name : 'Saint Vincent and the Grenadines'
|
||||
// },
|
||||
// {
|
||||
// latLng: [13.16, -59.55],
|
||||
// name : 'Barbados'
|
||||
// },
|
||||
// {
|
||||
// latLng: [17.11, -61.85],
|
||||
// name : 'Antigua and Barbuda'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-4.61, 55.45],
|
||||
// name : 'Seychelles'
|
||||
// },
|
||||
// {
|
||||
// latLng: [7.35, 134.46],
|
||||
// name : 'Palau'
|
||||
// },
|
||||
// {
|
||||
// latLng: [42.5, 1.51],
|
||||
// name : 'Andorra'
|
||||
// },
|
||||
// {
|
||||
// latLng: [14.01, -60.98],
|
||||
// name : 'Saint Lucia'
|
||||
// },
|
||||
// {
|
||||
// latLng: [6.91, 158.18],
|
||||
// name : 'Federated States of Micronesia'
|
||||
// },
|
||||
// {
|
||||
// latLng: [1.3, 103.8],
|
||||
// name : 'Singapore'
|
||||
// },
|
||||
// {
|
||||
// latLng: [1.46, 173.03],
|
||||
// name : 'Kiribati'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-21.13, -175.2],
|
||||
// name : 'Tonga'
|
||||
// },
|
||||
// {
|
||||
// latLng: [15.3, -61.38],
|
||||
// name : 'Dominica'
|
||||
// },
|
||||
// {
|
||||
// latLng: [-20.2, 57.5],
|
||||
// name : 'Mauritius'
|
||||
// },
|
||||
// {
|
||||
// latLng: [26.02, 50.55],
|
||||
// name : 'Bahrain'
|
||||
// },
|
||||
// {
|
||||
// latLng: [0.33, 6.73],
|
||||
// name : 'São Tomé and Príncipe'
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
|
||||
})
|
||||
@@ -0,0 +1,140 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
var ticksStyle = {
|
||||
fontColor: '#495057',
|
||||
fontStyle: 'bold'
|
||||
}
|
||||
|
||||
var mode = 'index'
|
||||
var intersect = true
|
||||
|
||||
var $salesChart = $('#sales-chart')
|
||||
var salesChart = new Chart($salesChart, {
|
||||
type : 'bar',
|
||||
data : {
|
||||
labels : ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
|
||||
datasets: [
|
||||
{
|
||||
backgroundColor: '#007bff',
|
||||
borderColor : '#007bff',
|
||||
data : [1000, 2000, 3000, 2500, 2700, 2500, 3000]
|
||||
},
|
||||
{
|
||||
backgroundColor: '#ced4da',
|
||||
borderColor : '#ced4da',
|
||||
data : [700, 1700, 2700, 2000, 1800, 1500, 2000]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
tooltips : {
|
||||
mode : mode,
|
||||
intersect: intersect
|
||||
},
|
||||
hover : {
|
||||
mode : mode,
|
||||
intersect: intersect
|
||||
},
|
||||
legend : {
|
||||
display: false
|
||||
},
|
||||
scales : {
|
||||
yAxes: [{
|
||||
// display: false,
|
||||
gridLines: {
|
||||
display : true,
|
||||
lineWidth : '4px',
|
||||
color : 'rgba(0, 0, 0, .2)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks : $.extend({
|
||||
beginAtZero: true,
|
||||
|
||||
// Include a dollar sign in the ticks
|
||||
callback: function (value, index, values) {
|
||||
if (value >= 1000) {
|
||||
value /= 1000
|
||||
value += 'k'
|
||||
}
|
||||
return '$' + value
|
||||
}
|
||||
}, ticksStyle)
|
||||
}],
|
||||
xAxes: [{
|
||||
display : true,
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
ticks : ticksStyle
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
var $visitorsChart = $('#visitors-chart')
|
||||
var visitorsChart = new Chart($visitorsChart, {
|
||||
data : {
|
||||
labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
|
||||
datasets: [{
|
||||
type : 'line',
|
||||
data : [100, 120, 170, 167, 180, 177, 160],
|
||||
backgroundColor : 'transparent',
|
||||
borderColor : '#007bff',
|
||||
pointBorderColor : '#007bff',
|
||||
pointBackgroundColor: '#007bff',
|
||||
fill : false
|
||||
// pointHoverBackgroundColor: '#007bff',
|
||||
// pointHoverBorderColor : '#007bff'
|
||||
},
|
||||
{
|
||||
type : 'line',
|
||||
data : [60, 80, 70, 67, 80, 77, 100],
|
||||
backgroundColor : 'tansparent',
|
||||
borderColor : '#ced4da',
|
||||
pointBorderColor : '#ced4da',
|
||||
pointBackgroundColor: '#ced4da',
|
||||
fill : false
|
||||
// pointHoverBackgroundColor: '#ced4da',
|
||||
// pointHoverBorderColor : '#ced4da'
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
tooltips : {
|
||||
mode : mode,
|
||||
intersect: intersect
|
||||
},
|
||||
hover : {
|
||||
mode : mode,
|
||||
intersect: intersect
|
||||
},
|
||||
legend : {
|
||||
display: false
|
||||
},
|
||||
scales : {
|
||||
yAxes: [{
|
||||
// display: false,
|
||||
gridLines: {
|
||||
display : true,
|
||||
lineWidth : '4px',
|
||||
color : 'rgba(0, 0, 0, .2)',
|
||||
zeroLineColor: 'transparent'
|
||||
},
|
||||
ticks : $.extend({
|
||||
beginAtZero : true,
|
||||
suggestedMax: 200
|
||||
}, ticksStyle)
|
||||
}],
|
||||
xAxes: [{
|
||||
display : true,
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
ticks : ticksStyle
|
||||
}]
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in new issue
Block a user