ThaMunsta/itflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bumped AdminLTE and its libraries from 3.0.4 to 3.1 This broke Calendar support will fix

Browse Source
This commit is contained in:
johnny@pittpc.com
2021-03-23 21:05:00 -04:00
parent cfb9ef286f
commit 5a04dc6633
587 changed files with 168815 additions and 120128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/js/.eslintrc.json
Vendored
+48
View File
@@ -0,0 +1,48 @@
{
"root": true,
"parserOptions": {
"ecmaVersion": 5,
"sourceType": "script"
},
"env": {
"jquery": true
},
"extends": [
"plugin:unicorn/recommended",
"xo",
"xo/browser"
],
"rules": {
"capitalized-comments": "off",
"indent": [
"error",
2,
{
"MemberExpression": "off",
"SwitchCase": 1
}
],
"multiline-ternary": [
"error",
"always-multiline"
],
"object-curly-spacing": [
"error",
"always"
],
"semi": [
"error",
"never"
],
"strict": "error",
"unicorn/no-array-for-each": "off",
"unicorn/no-for-loop": "off",
"unicorn/no-null": "off",
"unicorn/prefer-dataset": "off",
"unicorn/prefer-includes": "off",
"unicorn/prefer-node-append": "off",
"unicorn/prefer-query-selector": "off",
"unicorn/prefer-spread": "off",
"unicorn/prevent-abbreviations": "off"
}
}
dist/js/adminlte.js
Vendored
+2863 -1787
View File
File diff suppressed because it is too large Load Diff
dist/js/adminlte.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/js/adminlte.min.js
Vendored
+3 -3
View File
File diff suppressed because one or more lines are too long
dist/js/adminlte.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/js/demo.js
Vendored
+525 -265
View File
@@ -4,16 +4,397 @@
* You should not use this file in production.
* This file is for demo purposes only.
*/
/* eslint-disable camelcase */
(function ($) {
'use strict'
var $sidebar = $('.control-sidebar')
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1)
}
function createSkinBlock(colors, callback, noneSelected) {
var $block = $('<select />', {
class: noneSelected ? 'custom-select mb-3 border-0' : 'custom-select mb-3 text-light border-0 ' + colors[0].replace(/accent-|navbar-/, 'bg-')
})
if (noneSelected) {
var $default = $('<option />', {
text: 'None Selected'
})
if (callback) {
$default.on('click', callback)
}
$block.append($default)
}
colors.forEach(function (color) {
var $color = $('<option />', {
class: (typeof color === 'object' ? color.join(' ') : color).replace('navbar-', 'bg-').replace('accent-', 'bg-'),
text: capitalizeFirstLetter((typeof color === 'object' ? color.join(' ') : color).replace(/navbar-|accent-|bg-/, '').replace('-', ' '))
})
$block.append($color)
$color.data('color', color)
if (callback) {
$color.on('click', callback)
}
})
return $block
}
var $sidebar = $('.control-sidebar')
var $container = $('<div />', {
class: 'p-3 control-sidebar-content'
})
$sidebar.append($container)
// Checkboxes
$container.append(
'<h5>Customize AdminLTE</h5><hr class="mb-2"/>'
)
var $dark_mode_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('dark-mode'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('dark-mode')
} else {
$('body').removeClass('dark-mode')
}
})
var $dark_mode_container = $('<div />', { class: 'mb-4' }).append($dark_mode_checkbox).append('<span>Dark Mode</span>')
$container.append($dark_mode_container)
$container.append('<h6>Header Options</h6>')
var $header_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-navbar-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-navbar-fixed')
} else {
$('body').removeClass('layout-navbar-fixed')
}
})
var $header_fixed_container = $('<div />', { class: 'mb-1' }).append($header_fixed_checkbox).append('<span>Fixed</span>')
$container.append($header_fixed_container)
var $dropdown_legacy_offset_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.main-header').hasClass('dropdown-legacy'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.main-header').addClass('dropdown-legacy')
} else {
$('.main-header').removeClass('dropdown-legacy')
}
})
var $dropdown_legacy_offset_container = $('<div />', { class: 'mb-1' }).append($dropdown_legacy_offset_checkbox).append('<span>Dropdown Legacy Offset</span>')
$container.append($dropdown_legacy_offset_container)
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-4' }).append($no_border_checkbox).append('<span>No border</span>')
$container.append($no_border_container)
$container.append('<h6>Sidebar Options</h6>')
var $sidebar_collapsed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-collapse'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-collapse')
$(window).trigger('resize')
} else {
$('body').removeClass('sidebar-collapse')
$(window).trigger('resize')
}
})
var $sidebar_collapsed_container = $('<div />', { class: 'mb-1' }).append($sidebar_collapsed_checkbox).append('<span>Collapsed</span>')
$container.append($sidebar_collapsed_container)
$(document).on('collapsed.lte.pushmenu', '[data-widget="pushmenu"]', function () {
$sidebar_collapsed_checkbox.prop('checked', true)
})
$(document).on('shown.lte.pushmenu', '[data-widget="pushmenu"]', function () {
$sidebar_collapsed_checkbox.prop('checked', false)
})
var $sidebar_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-fixed')
$(window).trigger('resize')
} else {
$('body').removeClass('layout-fixed')
$(window).trigger('resize')
}
})
var $sidebar_fixed_container = $('<div />', { class: 'mb-1' }).append($sidebar_fixed_checkbox).append('<span>Fixed</span>')
$container.append($sidebar_fixed_container)
var $sidebar_mini_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini')
} else {
$('body').removeClass('sidebar-mini')
}
})
var $sidebar_mini_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_checkbox).append('<span>Sidebar Mini</span>')
$container.append($sidebar_mini_container)
var $sidebar_mini_md_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini-md'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini-md')
} else {
$('body').removeClass('sidebar-mini-md')
}
})
var $sidebar_mini_md_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_md_checkbox).append('<span>Sidebar Mini MD</span>')
$container.append($sidebar_mini_md_container)
var $sidebar_mini_xs_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('sidebar-mini-xs'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('sidebar-mini-xs')
} else {
$('body').removeClass('sidebar-mini-xs')
}
})
var $sidebar_mini_xs_container = $('<div />', { class: 'mb-1' }).append($sidebar_mini_xs_checkbox).append('<span>Sidebar Mini XS</span>')
$container.append($sidebar_mini_xs_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>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>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>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>Nav Child Indent</span>')
$container.append($child_indent_sidebar_container)
var $child_hide_sidebar_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('.nav-sidebar').addClass('nav-collapse-hide-child')
} else {
$('.nav-sidebar').removeClass('nav-collapse-hide-child')
}
})
var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Nav Child Hide on Collapse</span>')
$container.append($child_hide_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-4' }).append($no_expand_sidebar_checkbox).append('<span>Disable Hover/Focus Auto-Expand</span>')
$container.append($no_expand_sidebar_container)
$container.append('<h6>Footer Options</h6>')
var $footer_fixed_checkbox = $('<input />', {
type: 'checkbox',
value: 1,
checked: $('body').hasClass('layout-footer-fixed'),
class: 'mr-1'
}).on('click', function () {
if ($(this).is(':checked')) {
$('body').addClass('layout-footer-fixed')
} else {
$('body').removeClass('layout-footer-fixed')
}
})
var $footer_fixed_container = $('<div />', { class: 'mb-4' }).append($footer_fixed_checkbox).append('<span>Fixed</span>')
$container.append($footer_fixed_container)
$container.append('<h6>Small Text Options</h6>')
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</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</span>')
$container.append($text_sm_header_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-1' }).append($text_sm_brand_checkbox).append('<span>Brand</span>')
$container.append($text_sm_brand_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</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-4' }).append($text_sm_footer_checkbox).append('<span>Footer</span>')
$container.append($text_sm_footer_container)
// Color Arrays
var navbar_dark_skins = [
'navbar-primary',
'navbar-secondary',
@@ -29,212 +410,16 @@
'navbar-cyan',
'navbar-dark',
'navbar-gray-dark',
'navbar-gray',
'navbar-gray'
]
var navbar_light_skins = [
'navbar-light',
'navbar-warning',
'navbar-white',
'navbar-orange',
'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',
@@ -308,119 +493,194 @@
'sidebar-light-olive'
]
// Navbar Variants
$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 () {
var color = $(this).data('color')
var $main_header = $('.main-header')
$main_header.removeClass('navbar-dark').removeClass('navbar-light')
navbar_all_colors.forEach(function (color) {
$main_header.removeClass(color)
})
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0 ')
if (navbar_dark_skins.indexOf(color) > -1) {
$main_header.addClass('navbar-dark')
$(this).parent().addClass(color).addClass('text-light')
} else {
$main_header.addClass('navbar-light')
$(this).parent().addClass(color)
}
$main_header.addClass(color)
})
var active_navbar_color = null
$('.main-header')[0].classList.forEach(function (className) {
if (navbar_all_colors.indexOf(className) > -1 && active_navbar_color === null) {
active_navbar_color = className.replace('navbar-', 'bg-')
}
})
$navbar_variants_colors.find('option.' + active_navbar_color).prop('selected', true)
$navbar_variants_colors.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_navbar_color)
$navbar_variants.append($navbar_variants_colors)
$container.append($navbar_variants)
// Sidebar Colors
$container.append('<h6>Accent Color Variants</h6>')
var $accent_variants = $('<div />', {
'class': 'd-flex'
class: 'd-flex'
})
$container.append($accent_variants)
$container.append(createSkinBlock(accent_colors, function () {
var color = $(this).data('color')
var color = $(this).data('color')
var accent_class = color
var $body = $('body')
accent_colors.map(function (skin) {
var $body = $('body')
accent_colors.forEach(function (skin) {
$body.removeClass(skin)
})
$body.addClass(accent_class)
}))
}, true))
var active_accent_color = null
$('body')[0].classList.forEach(function (className) {
if (accent_colors.indexOf(className) > -1 && active_accent_color === null) {
active_accent_color = className.replace('navbar-', 'bg-')
}
})
// $accent_variants.find('option.' + active_accent_color).prop('selected', true)
// $accent_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_accent_color)
$container.append('<h6>Dark Sidebar Variants</h6>')
var $sidebar_variants_dark = $('<div />', {
'class': 'd-flex'
class: 'd-flex'
})
$container.append($sidebar_variants_dark)
$container.append(createSkinBlock(sidebar_colors, function () {
var color = $(this).data('color')
var $sidebar_dark_variants = 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) {
var $sidebar = $('.main-sidebar')
sidebar_skins.forEach(function (skin) {
$sidebar.removeClass(skin)
$sidebar_light_variants.removeClass(skin.replace('sidebar-dark-', 'bg-')).removeClass('text-light')
})
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
$sidebar_light_variants.find('option').prop('selected', false)
$sidebar.addClass(sidebar_class)
}))
$('.sidebar').removeClass('os-theme-dark').addClass('os-theme-light')
}, true)
$container.append($sidebar_dark_variants)
var active_sidebar_dark_color = null
$('.main-sidebar')[0].classList.forEach(function (className) {
var color = className.replace('sidebar-dark-', 'bg-')
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_dark_color === null) {
active_sidebar_dark_color = color
}
})
$sidebar_dark_variants.find('option.' + active_sidebar_dark_color).prop('selected', true)
$sidebar_dark_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_dark_color)
$container.append('<h6>Light Sidebar Variants</h6>')
var $sidebar_variants_light = $('<div />', {
'class': 'd-flex'
class: 'd-flex'
})
$container.append($sidebar_variants_light)
$container.append(createSkinBlock(sidebar_colors, function () {
var color = $(this).data('color')
var $sidebar_light_variants = 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) {
var $sidebar = $('.main-sidebar')
sidebar_skins.forEach(function (skin) {
$sidebar.removeClass(skin)
$sidebar_dark_variants.removeClass(skin.replace('sidebar-light-', 'bg-')).removeClass('text-light')
})
$(this).parent().removeClass().addClass('custom-select mb-3 text-light border-0').addClass(color)
$sidebar_dark_variants.find('option').prop('selected', false)
$sidebar.addClass(sidebar_class)
}))
$('.sidebar').removeClass('os-theme-light').addClass('os-theme-dark')
}, true)
$container.append($sidebar_light_variants)
var active_sidebar_light_color = null
$('.main-sidebar')[0].classList.forEach(function (className) {
var color = className.replace('sidebar-light-', 'bg-')
if (sidebar_colors.indexOf(color) > -1 && active_sidebar_light_color === null) {
active_sidebar_light_color = color
}
})
if (active_sidebar_light_color !== null) {
$sidebar_light_variants.find('option.' + active_sidebar_light_color).prop('selected', true)
$sidebar_light_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_sidebar_light_color)
}
var logo_skins = navbar_all_colors
$container.append('<h6>Brand Logo Variants</h6>')
var $logo_variants = $('<div />', {
'class': 'd-flex'
class: 'd-flex'
})
$container.append($logo_variants)
var $clear_btn = $('<a />', {
href: 'javascript:void(0)'
}).text('clear').on('click', function () {
href: '#'
}).text('clear').on('click', function (e) {
e.preventDefault()
var $logo = $('.brand-link')
logo_skins.map(function (skin) {
logo_skins.forEach(function (skin) {
$logo.removeClass(skin)
})
})
$container.append(createSkinBlock(logo_skins, function () {
var $brand_variants = createSkinBlock(logo_skins, function () {
var color = $(this).data('color')
var $logo = $('.brand-link')
logo_skins.map(function (skin) {
if (color === 'navbar-light' || color === 'navbar-white') {
$logo.addClass('text-black')
} else {
$logo.removeClass('text-black')
}
logo_skins.forEach(function (skin) {
$logo.removeClass(skin)
})
if (color) {
$(this).parent().removeClass().addClass('custom-select mb-3 border-0').addClass(color).addClass(color !== 'navbar-light' && color !== 'navbar-white' ? 'text-light' : '')
} else {
$(this).parent().removeClass().addClass('custom-select mb-3 border-0')
}
$logo.addClass(color)
}).append($clear_btn))
}, true).append($clear_btn)
$container.append($brand_variants)
function createSkinBlock(colors, callback) {
var $block = $('<div />', {
'class': 'd-flex flex-wrap mb-3'
})
var active_brand_color = null
$('.brand-link')[0].classList.forEach(function (className) {
if (logo_skins.indexOf(className) > -1 && active_brand_color === null) {
active_brand_color = className.replace('navbar-', 'bg-')
}
})
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
if (active_brand_color) {
$brand_variants.find('option.' + active_brand_color).prop('selected', true)
$brand_variants.removeClass().addClass('custom-select mb-3 text-light border-0 ').addClass(active_brand_color)
}
$('.product-image-thumb').on('click', function() {
const image_element = $(this).find('img');
$('.product-image').prop('src', $(image_element).attr('src'))
$('.product-image-thumb.active').removeClass('active');
$(this).addClass('active');
});
})(jQuery)
dist/js/pages/dashboard.js
Vendored
+125 -122
View File
@@ -5,44 +5,46 @@
* This is a demo file used only for the main dashboard (index.html)
**/
$(function () {
/* global moment:false, Chart:false, Sparkline:false */
$(function () {
'use strict'
// Make the dashboard widgets sortable Using jquery UI
$('.connectedSortable').sortable({
placeholder : 'sort-highlight',
connectWith : '.connectedSortable',
handle : '.card-header, .nav-tabs',
placeholder: 'sort-highlight',
connectWith: '.connectedSortable',
handle: '.card-header, .nav-tabs',
forcePlaceholderSize: true,
zIndex : 999999
zIndex: 999999
})
$('.connectedSortable .card-header, .connectedSortable .nav-tabs-custom').css('cursor', 'move')
$('.connectedSortable .card-header').css('cursor', 'move')
// jQuery UI sortable for the todo list
$('.todo-list').sortable({
placeholder : 'sort-highlight',
handle : '.handle',
placeholder: 'sort-highlight',
handle: '.handle',
forcePlaceholderSize: true,
zIndex : 999999
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()],
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')]
'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()
endDate: moment()
}, function (start, end) {
window.alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
// eslint-disable-next-line no-alert
alert('You chose: ' + start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
})
/* jQueryKnob */
@@ -50,52 +52,53 @@ $(function () {
// 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
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 : {
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,
fill: 'rgba(255, 255, 255, 0.7)',
'fill-opacity': 1,
stroke: 'rgba(0,0,0,.2)',
'stroke-width': 1,
'stroke-opacity': 1
}
},
series : {
series: {
regions: [{
values : visitorsData,
scale : ['#ffffff', '#0154ad'],
values: visitorsData,
scale: ['#ffffff', '#0154ad'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (e, el, code) {
if (typeof visitorsData[code] != 'undefined')
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'});
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]);
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({
@@ -110,77 +113,77 @@ $(function () {
/* Chart.js Charts */
// Sales chart
var salesChartCanvas = document.getElementById('revenue-chart-canvas').getContext('2d');
//$('#revenue-chart').get(0).getContext('2d');
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'],
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',
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]
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',
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]
},
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}
var salesChartOptions = {
maintainAspectRatio : false,
responsive : true,
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
gridLines: {
display: false
}
}],
yAxes: [{
gridLines : {
display : false,
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
}
)
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
type: 'line',
data: salesChartData,
options: salesChartOptions
})
// Donut Chart
var pieChartCanvas = $('#sales-chart-canvas').get(0).getContext('2d')
var pieData = {
var pieData = {
labels: [
'Instore Sales',
'Download Sales',
'Mail-Order Sales',
'Instore Sales',
'Download Sales',
'Mail-Order Sales'
],
datasets: [
{
data: [30,12,20],
backgroundColor : ['#f56954', '#00a65a', '#f39c12'],
data: [30, 12, 20],
backgroundColor: ['#f56954', '#00a65a', '#f39c12']
}
]
}
@@ -188,77 +191,77 @@ $(function () {
legend: {
display: false
},
maintainAspectRatio : false,
responsive : true,
maintainAspectRatio: false,
responsive: true
}
//Create pie or douhnut chart
// Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var pieChart = new Chart(pieChartCanvas, {
// eslint-disable-next-line no-unused-vars
var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
type: 'doughnut',
data: pieData,
options: pieOptions
});
options: pieOptions
})
// Sales graph chart
var salesGraphChartCanvas = $('#line-chart').get(0).getContext('2d');
//$('#revenue-chart').get(0).getContext('2d');
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'],
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',
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]
data: [2666, 2778, 4912, 3767, 6810, 5670, 4820, 15073, 10687, 8432]
}
]
}
var salesGraphChartOptions = {
maintainAspectRatio : false,
responsive : true,
maintainAspectRatio: false,
responsive: true,
legend: {
display: false,
display: false
},
scales: {
xAxes: [{
ticks : {
fontColor: '#efefef',
ticks: {
fontColor: '#efefef'
},
gridLines : {
display : false,
gridLines: {
display: false,
color: '#efefef',
drawBorder: false,
drawBorder: false
}
}],
yAxes: [{
ticks : {
ticks: {
stepSize: 5000,
fontColor: '#efefef',
fontColor: '#efefef'
},
gridLines : {
display : true,
gridLines: {
display: true,
color: '#efefef',
drawBorder: false,
drawBorder: false
}
}]
}
}
// This will get the first returned node in the jQuery collection.
var salesGraphChart = new Chart(salesGraphChartCanvas, {
type: 'line',
data: salesGraphChartData,
options: salesGraphChartOptions
}
)
// eslint-disable-next-line no-unused-vars
var salesGraphChart = new Chart(salesGraphChartCanvas, { // lgtm[js/unused-local-variable]
type: 'line',
data: salesGraphChartData,
options: salesGraphChartOptions
})
})
dist/js/pages/dashboard2.js
Vendored
+73 -70
View File
@@ -1,5 +1,6 @@
$(function () {
/* global Chart:false */
$(function () {
'use strict'
/* ChartJS
@@ -8,108 +9,110 @@ $(function () {
*/
//-----------------------
//- MONTHLY SALES CHART -
// - 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'],
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',
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]
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',
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]
},
data: [65, 59, 80, 81, 56, 55, 40]
}
]
}
var salesChartOptions = {
maintainAspectRatio : false,
responsive : true,
maintainAspectRatio: false,
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines : {
display : false,
gridLines: {
display: false
}
}],
yAxes: [{
gridLines : {
display : false,
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
}
// eslint-disable-next-line no-unused-vars
var salesChart = new Chart(salesChartCanvas, {
type: 'line',
data: salesChartData,
options: salesChartOptions
}
)
//---------------------------
//- END MONTHLY SALES CHART -
// - END MONTHLY SALES CHART -
//---------------------------
//-------------
//- PIE 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
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
})
}
// Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
// eslint-disable-next-line no-unused-vars
var pieChart = new Chart(pieChartCanvas, {
type: 'doughnut',
data: pieData,
options: pieOptions
})
//-----------------
//- END PIE CHART -
// - END PIE CHART -
//-----------------
/* jVector Maps
@@ -117,15 +120,14 @@ $(function () {
* Create a world map with markers
*/
$('#world-map-markers').mapael({
map: {
name : "usa_states",
zoom: {
enabled: true,
maxLevel: 10
},
},
map: {
name: 'usa_states',
zoom: {
enabled: true,
maxLevel: 10
}
}
);
})
// $('#world-map-markers').vectorMap({
// map : 'world_en',
@@ -263,5 +265,6 @@ $(function () {
// }
// ]
// })
})
// lgtm [js/unused-local-variable]
dist/js/pages/dashboard3.js
Vendored
+62 -55
View File
@@ -1,3 +1,5 @@
/* global Chart:false */
$(function () {
'use strict'
@@ -6,135 +8,140 @@ $(function () {
fontStyle: 'bold'
}
var mode = 'index'
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'],
// eslint-disable-next-line no-unused-vars
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]
borderColor: '#007bff',
data: [1000, 2000, 3000, 2500, 2700, 2500, 3000]
},
{
backgroundColor: '#ced4da',
borderColor : '#ced4da',
data : [700, 1700, 2700, 2000, 1800, 1500, 2000]
borderColor: '#ced4da',
data: [700, 1700, 2700, 2000, 1800, 1500, 2000]
}
]
},
options: {
maintainAspectRatio: false,
tooltips : {
mode : mode,
tooltips: {
mode: mode,
intersect: intersect
},
hover : {
mode : mode,
hover: {
mode: mode,
intersect: intersect
},
legend : {
legend: {
display: false
},
scales : {
scales: {
yAxes: [{
// display: false,
gridLines: {
display : true,
lineWidth : '4px',
color : 'rgba(0, 0, 0, .2)',
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks : $.extend({
ticks: $.extend({
beginAtZero: true,
// Include a dollar sign in the ticks
callback: function (value, index, values) {
callback: function (value) {
if (value >= 1000) {
value /= 1000
value += 'k'
}
return '$' + value
}
}, ticksStyle)
}],
xAxes: [{
display : true,
display: true,
gridLines: {
display: false
},
ticks : ticksStyle
ticks: ticksStyle
}]
}
}
})
var $visitorsChart = $('#visitors-chart')
var visitorsChart = new Chart($visitorsChart, {
data : {
labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
// eslint-disable-next-line no-unused-vars
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',
type: 'line',
data: [100, 120, 170, 167, 180, 177, 160],
backgroundColor: 'transparent',
borderColor: '#007bff',
pointBorderColor: '#007bff',
pointBackgroundColor: '#007bff',
fill : false
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'
}]
{
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,
tooltips: {
mode: mode,
intersect: intersect
},
hover : {
mode : mode,
hover: {
mode: mode,
intersect: intersect
},
legend : {
legend: {
display: false
},
scales : {
scales: {
yAxes: [{
// display: false,
gridLines: {
display : true,
lineWidth : '4px',
color : 'rgba(0, 0, 0, .2)',
display: true,
lineWidth: '4px',
color: 'rgba(0, 0, 0, .2)',
zeroLineColor: 'transparent'
},
ticks : $.extend({
beginAtZero : true,
ticks: $.extend({
beginAtZero: true,
suggestedMax: 200
}, ticksStyle)
}],
xAxes: [{
display : true,
display: true,
gridLines: {
display: false
},
ticks : ticksStyle
ticks: ticksStyle
}]
}
}
})
})
// lgtm [js/unused-local-variable]