first commit
This commit is contained in:
332
public/style/js/custom.js
Normal file
332
public/style/js/custom.js
Normal file
@ -0,0 +1,332 @@
|
||||
/**
|
||||
Core script to handle the entire theme and core functions
|
||||
**/
|
||||
|
||||
var Gymove = function(){
|
||||
/* Search Bar ============ */
|
||||
var screenWidth = $( window ).width();
|
||||
|
||||
var homeSearch = function() {
|
||||
|
||||
}
|
||||
|
||||
var handleSelectPicker = function(){
|
||||
if(jQuery('.default-select').length > 0 ){
|
||||
jQuery('.default-select').selectpicker();
|
||||
}
|
||||
}
|
||||
|
||||
var handleTheme = function(){
|
||||
$('#preloader').fadeOut(500);
|
||||
$('#main-wrapper').addClass('show');
|
||||
}
|
||||
|
||||
var handleMetisMenu = function() {
|
||||
if(jQuery('#menu').length > 0 ){
|
||||
$("#menu").metisMenu();
|
||||
}
|
||||
jQuery('.metismenu > .mm-active ').each(function(){
|
||||
if(!jQuery(this).children('ul').length > 0)
|
||||
{
|
||||
jQuery(this).addClass('active-no-child');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var handleAllChecked = function() {
|
||||
$("#checkAll").on('change',function() {
|
||||
$("td input:checkbox, .email-list .custom-checkbox input:checkbox").prop('checked', $(this).prop("checked"));
|
||||
});
|
||||
}
|
||||
|
||||
var handleNavigation = function() {
|
||||
$(".nav-control").on('click', function() {
|
||||
|
||||
$('#main-wrapper').toggleClass("menu-toggle");
|
||||
|
||||
$(".hamburger").toggleClass("is-active");
|
||||
});
|
||||
}
|
||||
|
||||
var handleCurrentActive = function() {
|
||||
for (var nk = window.location,
|
||||
o = $("ul#menu a").filter(function() {
|
||||
return this.href == nk;
|
||||
})
|
||||
.addClass("mm-active")
|
||||
.parent()
|
||||
.addClass("mm-active");;) {
|
||||
// console.log(o)
|
||||
if (!o.is("li")) break;
|
||||
o = o.parent()
|
||||
.addClass("mm-show")
|
||||
.parent()
|
||||
.addClass("mm-active");
|
||||
}
|
||||
}
|
||||
|
||||
var handleCustomFileInput = function() {
|
||||
$(".custom-file-input").on("change", function() {
|
||||
var fileName = $(this).val().split("\\").pop();
|
||||
$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
|
||||
});
|
||||
}
|
||||
|
||||
var handleMiniSidebar = function() {
|
||||
$("ul#menu>li").on('click', function() {
|
||||
const sidebarStyle = $('body').attr('data-sidebar-style');
|
||||
if (sidebarStyle === 'mini') {
|
||||
console.log($(this).find('ul'))
|
||||
$(this).find('ul').stop()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
var handleMinHeight = function() {
|
||||
var win_h = window.outerHeight;
|
||||
var win_h = window.outerHeight;
|
||||
if (win_h > 0 ? win_h : screen.height) {
|
||||
$(".content-body").css("min-height", (win_h + 60) + "px");
|
||||
};
|
||||
}
|
||||
|
||||
var handleDataAction = function() {
|
||||
$('a[data-action="collapse"]').on("click", function(i) {
|
||||
i.preventDefault(),
|
||||
$(this).closest(".card").find('[data-action="collapse"] i').toggleClass("mdi-arrow-down mdi-arrow-up"),
|
||||
$(this).closest(".card").children(".card-body").collapse("toggle");
|
||||
});
|
||||
|
||||
$('a[data-action="expand"]').on("click", function(i) {
|
||||
i.preventDefault(),
|
||||
$(this).closest(".card").find('[data-action="expand"] i').toggleClass("icon-size-actual icon-size-fullscreen"),
|
||||
$(this).closest(".card").toggleClass("card-fullscreen");
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('[data-action="close"]').on("click", function() {
|
||||
$(this).closest(".card").removeClass().slideUp("fast");
|
||||
});
|
||||
|
||||
$('[data-action="reload"]').on("click", function() {
|
||||
var e = $(this);
|
||||
e.parents(".card").addClass("card-load"),
|
||||
e.parents(".card").append('<div class="card-loader"><i class=" ti-reload rotate-refresh"></div>'),
|
||||
setTimeout(function() {
|
||||
e.parents(".card").children(".card-loader").remove(),
|
||||
e.parents(".card").removeClass("card-load")
|
||||
}, 2000)
|
||||
});
|
||||
}
|
||||
|
||||
var handleHeaderHight = function() {
|
||||
const headerHight = $('.header').innerHeight();
|
||||
$(window).scroll(function() {
|
||||
if ($('body').attr('data-layout') === "horizontal" && $('body').attr('data-header-position') === "static" && $('body').attr('data-sidebar-position') === "fixed")
|
||||
$(this.window).scrollTop() >= headerHight ? $('.deznav').addClass('fixed') : $('.deznav').removeClass('fixed')
|
||||
});
|
||||
}
|
||||
|
||||
var handleDzScroll = function() {
|
||||
jQuery('.dz-scroll').each(function(){
|
||||
|
||||
var scroolWidgetId = jQuery(this).attr('id');
|
||||
const ps = new PerfectScrollbar('#'+scroolWidgetId, {
|
||||
wheelSpeed: 2,
|
||||
wheelPropagation: true,
|
||||
minScrollbarLength: 20
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
var handleMenuTabs = function() {
|
||||
if(screenWidth <= 991 ){
|
||||
jQuery('.menu-tabs .nav-link').on('click',function(){
|
||||
if(jQuery(this).hasClass('open'))
|
||||
{
|
||||
jQuery(this).removeClass('open');
|
||||
jQuery('.fixed-content-box').removeClass('active');
|
||||
jQuery('.hamburger').show();
|
||||
}else{
|
||||
jQuery('.menu-tabs .nav-link').removeClass('open');
|
||||
jQuery(this).addClass('open');
|
||||
jQuery('.fixed-content-box').addClass('active');
|
||||
jQuery('.hamburger').hide();
|
||||
}
|
||||
//jQuery('.fixed-content-box').toggleClass('active');
|
||||
});
|
||||
jQuery('.close-fixed-content').on('click',function(){
|
||||
jQuery('.fixed-content-box').removeClass('active');
|
||||
jQuery('.hamburger').removeClass('is-active');
|
||||
jQuery('#main-wrapper').removeClass('menu-toggle');
|
||||
jQuery('.hamburger').show();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handleChatbox = function() {
|
||||
jQuery('.bell-link').on('click',function(){
|
||||
jQuery('.chatbox').addClass('active');
|
||||
});
|
||||
jQuery('.chatbox-close').on('click',function(){
|
||||
jQuery('.chatbox').removeClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
var handleBtnNumber = function() {
|
||||
$('.btn-number').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
fieldName = $(this).attr('data-field');
|
||||
type = $(this).attr('data-type');
|
||||
var input = $("input[name='" + fieldName + "']");
|
||||
var currentVal = parseInt(input.val());
|
||||
if (!isNaN(currentVal)) {
|
||||
if (type == 'minus')
|
||||
input.val(currentVal - 1);
|
||||
else if (type == 'plus')
|
||||
input.val(currentVal + 1);
|
||||
} else {
|
||||
input.val(0);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var handleDzChatUser = function() {
|
||||
jQuery('.dz-chat-user-box .dz-chat-user').on('click',function(){
|
||||
jQuery('.dz-chat-user-box').addClass('d-none');
|
||||
jQuery('.dz-chat-history-box').removeClass('d-none');
|
||||
});
|
||||
|
||||
jQuery('.dz-chat-history-back').on('click',function(){
|
||||
jQuery('.dz-chat-user-box').removeClass('d-none');
|
||||
jQuery('.dz-chat-history-box').addClass('d-none');
|
||||
});
|
||||
|
||||
jQuery('.dz-fullscreen').on('click',function(){
|
||||
jQuery('.dz-fullscreen').toggleClass('active');
|
||||
});
|
||||
}
|
||||
|
||||
var handleDzLoadMore = function() {
|
||||
$(".dz-load-more").on('click', function(e)
|
||||
{
|
||||
e.preventDefault(); //STOP default action
|
||||
$(this).append(' <i class="fa fa-refresh"></i>');
|
||||
|
||||
var dzLoadMoreUrl = $(this).attr('rel');
|
||||
var dzLoadMoreId = $(this).attr('id');
|
||||
|
||||
$.ajax({
|
||||
method: "POST",
|
||||
url: dzLoadMoreUrl,
|
||||
dataType: 'html',
|
||||
success: function(data) {
|
||||
$( "#"+dzLoadMoreId+"Content").append(data);
|
||||
$('.dz-load-more i').remove();
|
||||
}
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
var handleDzFullScreen = function() {
|
||||
jQuery('.dz-fullscreen').on('click',function(e){
|
||||
if(document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement) {
|
||||
/* Enter fullscreen */
|
||||
if(document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if(document.msExitFullscreen) {
|
||||
document.msExitFullscreen(); /* IE/Edge */
|
||||
} else if(document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen(); /* Firefox */
|
||||
} else if(document.webkitExitFullscreen) {
|
||||
document.webkitExitFullscreen(); /* Chrome, Safari & Opera */
|
||||
}
|
||||
}
|
||||
else { /* exit fullscreen */
|
||||
if(document.documentElement.requestFullscreen) {
|
||||
document.documentElement.requestFullscreen();
|
||||
} else if(document.documentElement.webkitRequestFullscreen) {
|
||||
document.documentElement.webkitRequestFullscreen();
|
||||
} else if(document.documentElement.mozRequestFullScreen) {
|
||||
document.documentElement.mozRequestFullScreen();
|
||||
} else if(document.documentElement.msRequestFullscreen) {
|
||||
document.documentElement.msRequestFullscreen();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var handlePerfectScrollbar = function() {
|
||||
if(jQuery('.deznav-scroll').length > 0)
|
||||
{
|
||||
const qs = new PerfectScrollbar('.deznav-scroll');
|
||||
}
|
||||
}
|
||||
var heartBlast = function (){
|
||||
$(".heart").on("click", function() {
|
||||
$(this).toggleClass("heart-blast");
|
||||
});
|
||||
}
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
handleSelectPicker();
|
||||
handleTheme();
|
||||
handleMetisMenu();
|
||||
handleAllChecked();
|
||||
handleNavigation();
|
||||
handleCurrentActive();
|
||||
handleCustomFileInput();
|
||||
handleMiniSidebar();
|
||||
handleMinHeight();
|
||||
handleDataAction();
|
||||
handleHeaderHight();
|
||||
handleDzScroll();
|
||||
handleMenuTabs();
|
||||
handleChatbox();
|
||||
handleBtnNumber();
|
||||
handleDzChatUser();
|
||||
handleDzLoadMore();
|
||||
handleDzFullScreen();
|
||||
handlePerfectScrollbar();
|
||||
heartBlast();
|
||||
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
handleSelectPicker();
|
||||
handleTheme();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
/* Document.ready Start */
|
||||
jQuery(document).ready(function() {
|
||||
'use strict';
|
||||
Gymove.init();
|
||||
|
||||
});
|
||||
/* Document.ready END */
|
||||
|
||||
/* Window Load START */
|
||||
jQuery(window).on('load',function () {
|
||||
'use strict';
|
||||
Gymove.load();
|
||||
|
||||
});
|
||||
/* Window Load END */
|
||||
/* Window Resize START */
|
||||
jQuery(window).on('resize',function () {
|
||||
'use strict';
|
||||
Gymove.resize();
|
||||
});
|
||||
/* Window Resize END */
|
1
public/style/js/custom.min.js
vendored
Normal file
1
public/style/js/custom.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
var Gymove=function(){var e=$(window).width(),t=function(){jQuery(".default-select").length>0&&jQuery(".default-select").selectpicker()},n=function(){$("#preloader").fadeOut(500),$("#main-wrapper").addClass("show")};return{init:function(){var o;t(),n(),jQuery("#menu").length>0&&$("#menu").metisMenu(),jQuery(".metismenu > .mm-active ").each(function(){!jQuery(this).children("ul").length>0&&jQuery(this).addClass("active-no-child")}),$("#checkAll").on("change",function(){$("td input:checkbox, .email-list .custom-checkbox input:checkbox").prop("checked",$(this).prop("checked"))}),$(".nav-control").on("click",function(){$("#main-wrapper").toggleClass("menu-toggle"),$(".hamburger").toggleClass("is-active")}),function(){for(var e=window.location,t=$("ul#menu a").filter(function(){return this.href==e}).addClass("mm-active").parent().addClass("mm-active");t.is("li");)t=t.parent().addClass("mm-show").parent().addClass("mm-active")}(),$(".custom-file-input").on("change",function(){var e=$(this).val().split("\\").pop();$(this).siblings(".custom-file-label").addClass("selected").html(e)}),$("ul#menu>li").on("click",function(){"mini"===$("body").attr("data-sidebar-style")&&(console.log($(this).find("ul")),$(this).find("ul").stop())}),o=window.outerHeight,((o=window.outerHeight)>0?o:screen.height)&&$(".content-body").css("min-height",o+60+"px"),$('a[data-action="collapse"]').on("click",function(e){e.preventDefault(),$(this).closest(".card").find('[data-action="collapse"] i').toggleClass("mdi-arrow-down mdi-arrow-up"),$(this).closest(".card").children(".card-body").collapse("toggle")}),$('a[data-action="expand"]').on("click",function(e){e.preventDefault(),$(this).closest(".card").find('[data-action="expand"] i').toggleClass("icon-size-actual icon-size-fullscreen"),$(this).closest(".card").toggleClass("card-fullscreen")}),$('[data-action="close"]').on("click",function(){$(this).closest(".card").removeClass().slideUp("fast")}),$('[data-action="reload"]').on("click",function(){var e=$(this);e.parents(".card").addClass("card-load"),e.parents(".card").append('<div class="card-loader"><i class=" ti-reload rotate-refresh"></div>'),setTimeout(function(){e.parents(".card").children(".card-loader").remove(),e.parents(".card").removeClass("card-load")},2e3)}),function(){const e=$(".header").innerHeight();$(window).scroll(function(){"horizontal"===$("body").attr("data-layout")&&"static"===$("body").attr("data-header-position")&&"fixed"===$("body").attr("data-sidebar-position")&&($(this.window).scrollTop()>=e?$(".deznav").addClass("fixed"):$(".deznav").removeClass("fixed"))})}(),jQuery(".dz-scroll").each(function(){var e=jQuery(this).attr("id");new PerfectScrollbar("#"+e,{wheelSpeed:2,wheelPropagation:!0,minScrollbarLength:20})}),e<=991&&(jQuery(".menu-tabs .nav-link").on("click",function(){jQuery(this).hasClass("open")?(jQuery(this).removeClass("open"),jQuery(".fixed-content-box").removeClass("active"),jQuery(".hamburger").show()):(jQuery(".menu-tabs .nav-link").removeClass("open"),jQuery(this).addClass("open"),jQuery(".fixed-content-box").addClass("active"),jQuery(".hamburger").hide())}),jQuery(".close-fixed-content").on("click",function(){jQuery(".fixed-content-box").removeClass("active"),jQuery(".hamburger").removeClass("is-active"),jQuery("#main-wrapper").removeClass("menu-toggle"),jQuery(".hamburger").show()})),jQuery(".bell-link").on("click",function(){jQuery(".chatbox").addClass("active")}),jQuery(".chatbox-close").on("click",function(){jQuery(".chatbox").removeClass("active")}),$(".btn-number").on("click",function(e){e.preventDefault(),fieldName=$(this).attr("data-field"),type=$(this).attr("data-type");var t=$("input[name='"+fieldName+"']"),n=parseInt(t.val());isNaN(n)?t.val(0):"minus"==type?t.val(n-1):"plus"==type&&t.val(n+1)}),jQuery(".dz-chat-user-box .dz-chat-user").on("click",function(){jQuery(".dz-chat-user-box").addClass("d-none"),jQuery(".dz-chat-history-box").removeClass("d-none")}),jQuery(".dz-chat-history-back").on("click",function(){jQuery(".dz-chat-user-box").removeClass("d-none"),jQuery(".dz-chat-history-box").addClass("d-none")}),jQuery(".dz-fullscreen").on("click",function(){jQuery(".dz-fullscreen").toggleClass("active")}),$(".dz-load-more").on("click",function(e){e.preventDefault(),$(this).append(' <i class="fa fa-refresh"></i>');var t=$(this).attr("rel"),n=$(this).attr("id");$.ajax({method:"POST",url:t,dataType:"html",success:function(e){$("#"+n+"Content").append(e),$(".dz-load-more i").remove()}})}),jQuery(".dz-fullscreen").on("click",function(e){document.fullscreenElement||document.webkitFullscreenElement||document.mozFullScreenElement||document.msFullscreenElement?document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen():document.documentElement.requestFullscreen?document.documentElement.requestFullscreen():document.documentElement.webkitRequestFullscreen?document.documentElement.webkitRequestFullscreen():document.documentElement.mozRequestFullScreen?document.documentElement.mozRequestFullScreen():document.documentElement.msRequestFullscreen&&document.documentElement.msRequestFullscreen()}),jQuery(".deznav-scroll").length>0&&new PerfectScrollbar(".deznav-scroll"),$(".heart").on("click",function(){$(this).toggleClass("heart-blast")})},load:function(){t(),n()},resize:function(){}}}();jQuery(document).ready(function(){"use strict";Gymove.init()}),jQuery(window).on("load",function(){"use strict";Gymove.load()}),jQuery(window).on("resize",function(){"use strict";Gymove.resize()});
|
273
public/style/js/dashboard/dashboard-1.js
Normal file
273
public/style/js/dashboard/dashboard-1.js
Normal file
@ -0,0 +1,273 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzChartlist = function() {
|
||||
let draw = Chart.controllers.line.__super__.draw; //draw shadow
|
||||
var screenWidth = $(window).width();
|
||||
var btnAware = function() {
|
||||
|
||||
$('.avtivity-card')
|
||||
.on('mouseenter', function(e) {
|
||||
var parentOffset = $(this).offset(),
|
||||
relX = e.pageX - parentOffset.left,
|
||||
relY = e.pageY - parentOffset.top;
|
||||
$(this).find('.effect').css({ top: relY, left: relX })
|
||||
})
|
||||
.on('mouseout', function(e) {
|
||||
var parentOffset = $(this).offset(),
|
||||
relX = e.pageX - parentOffset.left,
|
||||
relY = e.pageY - parentOffset.top;
|
||||
$(this).find('.effect').css({ top: relY, left: relX })
|
||||
});
|
||||
}
|
||||
var chartTimeline = function() {
|
||||
|
||||
var optionsTimeline = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
height: 320,
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
sparkline: {
|
||||
//enabled: true
|
||||
},
|
||||
backgroundBarRadius: 5,
|
||||
offsetX: -10,
|
||||
},
|
||||
series: [{
|
||||
name: "New Clients",
|
||||
data: [70, 20, 75, 20, 50, 40, 65, 15, 40, 55, 60, 20, 75, 40, 25, 70, 20, 40, 65, 50]
|
||||
},
|
||||
{
|
||||
name: "Retained Clients",
|
||||
data: [-60, -10, -50, -25, -30, -65, -22, -10, -50, -20, -70, -35, -60, -20, -30, -45, -70, -50, -45, -10]
|
||||
}
|
||||
],
|
||||
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "20%",
|
||||
endingShape: "rounded",
|
||||
colors: {
|
||||
backgroundBarColors: ['rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)'],
|
||||
backgroundBarOpacity: 1,
|
||||
backgroundBarRadius: 5,
|
||||
opacity: 0
|
||||
},
|
||||
|
||||
},
|
||||
distributed: true
|
||||
},
|
||||
colors: ['#0B2A97', '#FF9432'],
|
||||
|
||||
grid: {
|
||||
show: true,
|
||||
},
|
||||
legend: {
|
||||
show: false
|
||||
},
|
||||
fill: {
|
||||
opacity: 1
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
colors: ['#0B2A97', '#FF9432'],
|
||||
dropShadow: {
|
||||
enabled: true,
|
||||
top: 1,
|
||||
left: 1,
|
||||
blur: 1,
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 400
|
||||
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
|
||||
yaxis: {
|
||||
//show: false
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 400
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
x: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
};
|
||||
var chartTimelineRender = new ApexCharts(document.querySelector("#chartTimeline"), optionsTimeline);
|
||||
chartTimelineRender.render();
|
||||
}
|
||||
|
||||
var chartBar = function() {
|
||||
var optionsArea = {
|
||||
series: [{
|
||||
name: "Distance",
|
||||
data: [2, 2, 1, 12, 6, 4, 10]
|
||||
}],
|
||||
chart: {
|
||||
height: 200,
|
||||
type: 'area',
|
||||
group: 'social',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [10],
|
||||
colors: ['#0B2A97'],
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
tooltipHoverFormatter: function(val, opts) {
|
||||
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
|
||||
},
|
||||
|
||||
},
|
||||
markers: {
|
||||
strokeWidth: [8],
|
||||
strokeColors: ['#0B2A97'],
|
||||
border: 0,
|
||||
colors: ['#fff'],
|
||||
hover: {
|
||||
size: 13,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX: -16,
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors: ['#0B2A97'],
|
||||
type: 'solid',
|
||||
opacity: 0
|
||||
},
|
||||
colors: ['#0B2A97'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 1601,
|
||||
options: {
|
||||
chart: {
|
||||
height: 400
|
||||
},
|
||||
},
|
||||
}, {
|
||||
breakpoint: 768,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250
|
||||
},
|
||||
markers: {
|
||||
strokeWidth: [4],
|
||||
strokeColors: ['#0B2A97'],
|
||||
border: 0,
|
||||
colors: ['#fff'],
|
||||
hover: {
|
||||
size: 6,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
width: [6],
|
||||
colors: ['#0B2A97'],
|
||||
curve: 'smooth'
|
||||
},
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chartArea = new ApexCharts(document.querySelector("#chartBar"), optionsArea);
|
||||
chartArea.render();
|
||||
|
||||
}
|
||||
/* Function ============ */
|
||||
return {
|
||||
init: function() {},
|
||||
|
||||
|
||||
load: function() {
|
||||
btnAware();
|
||||
chartTimeline();
|
||||
chartBar();
|
||||
},
|
||||
|
||||
resize: function() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function() {});
|
||||
|
||||
jQuery(window).on('load', function() {
|
||||
setTimeout(function() {
|
||||
dzChartlist.load();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('resize', function() {
|
||||
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
280
public/style/js/dashboard/distance-map.js
Normal file
280
public/style/js/dashboard/distance-map.js
Normal file
@ -0,0 +1,280 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzChartlist = function(){
|
||||
let draw = Chart.controllers.line.__super__.draw; //draw shadow
|
||||
var screenWidth = $(window).width();
|
||||
var chartBarRunning = function(){
|
||||
|
||||
var chartBarRunningOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Running',
|
||||
data: [50, 18, 70, 40, 90, 70, 20, 75, 80, 25, 70, 45],
|
||||
},
|
||||
{
|
||||
name: 'Cycling',
|
||||
data: [80, 40, 55, 20, 45, 30, 80, 90, 85, 90, 30, 85]
|
||||
},
|
||||
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 370,
|
||||
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape:'rounded',
|
||||
columnWidth: '50%',
|
||||
|
||||
},
|
||||
},
|
||||
colors:['#70349D', '#FF3282'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
markers: {
|
||||
shape: "circle",
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
fontSize: '12px',
|
||||
labels: {
|
||||
colors: '#000000',
|
||||
|
||||
},
|
||||
markers: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
strokeWidth: 0,
|
||||
strokeColor: '#fff',
|
||||
fillColors: undefined,
|
||||
radius: 12,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 6,
|
||||
colors: ['transparent']
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#eee',
|
||||
},
|
||||
xaxis: {
|
||||
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'poppins',
|
||||
fontWeight: 100,
|
||||
cssClass: 'apexcharts-xaxis-label',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX:-16,
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'poppins',
|
||||
fontWeight: 100,
|
||||
cssClass: 'apexcharts-xaxis-label',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
colors:['#70349D', '#FF3282'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 575,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
|
||||
},
|
||||
},
|
||||
chart:{
|
||||
height:250,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var chartBarRunningObject = new ApexCharts(document.querySelector("#chartBarRunning"), chartBarRunningOptions);
|
||||
chartBarRunningObject.render();
|
||||
|
||||
}
|
||||
|
||||
|
||||
var chartBarCycle = function(){
|
||||
|
||||
var chartBarCycleOptions = {
|
||||
series: [
|
||||
{
|
||||
name: 'Cycling',
|
||||
data: [80, 40, 55, 20, 45, 30, 80, 90, 85, 90, 30, 85]
|
||||
},
|
||||
|
||||
],
|
||||
chart: {
|
||||
type: 'bar',
|
||||
height: 370,
|
||||
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: false,
|
||||
endingShape:'rounded',
|
||||
columnWidth: '50%',
|
||||
|
||||
},
|
||||
},
|
||||
colors:['#FF3282'],
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
markers: {
|
||||
shape: "circle",
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
fontSize: '12px',
|
||||
labels: {
|
||||
colors: '#000000',
|
||||
|
||||
},
|
||||
markers: {
|
||||
width: 18,
|
||||
height: 18,
|
||||
strokeWidth: 0,
|
||||
strokeColor: '#fff',
|
||||
fillColors: undefined,
|
||||
radius: 12,
|
||||
}
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 6,
|
||||
colors: ['transparent']
|
||||
},
|
||||
grid: {
|
||||
borderColor: '#eee',
|
||||
},
|
||||
xaxis: {
|
||||
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'poppins',
|
||||
fontWeight: 100,
|
||||
cssClass: 'apexcharts-xaxis-label',
|
||||
},
|
||||
},
|
||||
crosshairs: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX:-16,
|
||||
style: {
|
||||
colors: '#787878',
|
||||
fontSize: '13px',
|
||||
fontFamily: 'poppins',
|
||||
fontWeight: 100,
|
||||
cssClass: 'apexcharts-xaxis-label',
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
colors:['#FF3282'],
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "$ " + val + " thousands"
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 575,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '40%',
|
||||
|
||||
},
|
||||
},
|
||||
chart:{
|
||||
height:250,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
|
||||
var chartBarCycleObject = new ApexCharts(document.querySelector("#chartBarCycle"), chartBarCycleOptions);
|
||||
chartBarCycleObject.render();
|
||||
}
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
chartBarRunning();
|
||||
chartBarCycle();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
setTimeout(function(){
|
||||
dzChartlist.load();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
425
public/style/js/dashboard/workout-statistic.js
Normal file
425
public/style/js/dashboard/workout-statistic.js
Normal file
@ -0,0 +1,425 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzChartlist = function(){
|
||||
let draw = Chart.controllers.line.__super__.draw; //draw shadow
|
||||
var screenWidth = $(window).width();
|
||||
var chartBar = function(){
|
||||
var optionsArea = {
|
||||
series: [{
|
||||
name: "Running",
|
||||
data: [20, 40, 20, 80, 40, 40]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'area',
|
||||
group: 'social',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [4],
|
||||
colors:['#A02CFA'],
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
tooltipHoverFormatter: function(val, opts) {
|
||||
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
|
||||
},
|
||||
markers: {
|
||||
fillColors:['#A02CFA'],
|
||||
width: 19,
|
||||
height: 19,
|
||||
strokeWidth: 0,
|
||||
radius: 19
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
strokeWidth: [4],
|
||||
strokeColors: ['#A02CFA'],
|
||||
border:0,
|
||||
colors:['#fff'],
|
||||
hover: {
|
||||
size: 6,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX:-16,
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors:['#A02CFA'],
|
||||
type:'solid',
|
||||
opacity: 0.7
|
||||
},
|
||||
colors:['#A02CFA'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 575,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chartArea = new ApexCharts(document.querySelector("#chartBar"), optionsArea);
|
||||
chartArea.render();
|
||||
|
||||
}
|
||||
var chartBar2 = function(){
|
||||
var optionsArea = {
|
||||
series: [{
|
||||
name: "Running",
|
||||
data: [40, 40, 30, 90, 10, 80]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'area',
|
||||
group: 'social',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [4],
|
||||
colors:['#FF3282'],
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
tooltipHoverFormatter: function(val, opts) {
|
||||
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
|
||||
},
|
||||
markers: {
|
||||
fillColors:['#FF3282'],
|
||||
width: 19,
|
||||
height: 19,
|
||||
strokeWidth: 0,
|
||||
radius: 19
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
strokeWidth: [4],
|
||||
strokeColors: ['#FF3282'],
|
||||
border:0,
|
||||
colors:['#fff'],
|
||||
hover: {
|
||||
size: 6,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX:-16,
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors:['#FF3282'],
|
||||
type:'solid',
|
||||
opacity: 0.7
|
||||
},
|
||||
colors:['#FF3282'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 575,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chartArea = new ApexCharts(document.querySelector("#chartBar2"), optionsArea);
|
||||
chartArea.render();
|
||||
|
||||
}
|
||||
var chartBar3 = function(){
|
||||
var optionsArea = {
|
||||
series: [{
|
||||
name: "Running",
|
||||
data: [20, 15, 50, 20, 50, 30]
|
||||
}
|
||||
],
|
||||
chart: {
|
||||
height: 400,
|
||||
type: 'area',
|
||||
group: 'social',
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
zoom: {
|
||||
enabled: false
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
width: [4],
|
||||
colors:['#FFBC11'],
|
||||
curve: 'smooth'
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
tooltipHoverFormatter: function(val, opts) {
|
||||
return val + ' - ' + opts.w.globals.series[opts.seriesIndex][opts.dataPointIndex] + ''
|
||||
},
|
||||
markers: {
|
||||
fillColors:['#FFBC11'],
|
||||
width: 19,
|
||||
height: 19,
|
||||
strokeWidth: 0,
|
||||
radius: 19
|
||||
}
|
||||
},
|
||||
markers: {
|
||||
strokeWidth: [4],
|
||||
strokeColors: ['#FFBC11'],
|
||||
border:0,
|
||||
colors:['#fff'],
|
||||
hover: {
|
||||
size: 6,
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
offsetX:-16,
|
||||
style: {
|
||||
colors: '#3E4954',
|
||||
fontSize: '14px',
|
||||
fontFamily: 'Poppins',
|
||||
fontWeight: 100,
|
||||
|
||||
},
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors:['#FFBC11'],
|
||||
type:'solid',
|
||||
opacity: 0.7
|
||||
},
|
||||
colors:['#FFBC11'],
|
||||
grid: {
|
||||
borderColor: '#f1f1f1',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 575,
|
||||
options: {
|
||||
chart: {
|
||||
height: 250,
|
||||
}
|
||||
}
|
||||
}]
|
||||
};
|
||||
var chartArea = new ApexCharts(document.querySelector("#chartBar3"), optionsArea);
|
||||
chartArea.render();
|
||||
|
||||
}
|
||||
|
||||
var pieChart = function(){
|
||||
var options = {
|
||||
series: [20, 35, 45],
|
||||
chart: {
|
||||
type: 'donut',
|
||||
height:200,
|
||||
},
|
||||
legend: {
|
||||
show:false,
|
||||
},
|
||||
fill:{
|
||||
colors:['#FF9900','#0B2A97','#EBEBEB']
|
||||
},
|
||||
stroke:{
|
||||
width:0,
|
||||
},
|
||||
colors:['#FF9900','#0B2A97','#EBEBEB'],
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#pieChart"), options);
|
||||
chart.render();
|
||||
}
|
||||
var radialBar = function(){
|
||||
var options = {
|
||||
series: [81],
|
||||
chart: {
|
||||
height: 280,
|
||||
type: 'radialBar',
|
||||
offsetY: -10
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -135,
|
||||
endAngle: 135,
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
color: undefined,
|
||||
offsetY: 120
|
||||
},
|
||||
value: {
|
||||
offsetY: 0,
|
||||
fontSize: '34px',
|
||||
color: 'black',
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
colors:'#0B2A97',
|
||||
gradient: {
|
||||
shade: 'dark',
|
||||
shadeIntensity: 0.15,
|
||||
inverseColors: false,
|
||||
opacityFrom: 1,
|
||||
opacityTo: 1,
|
||||
stops: [0, 50, 65, 91]
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
colors:'#0B2A97'
|
||||
},
|
||||
labels: [''],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#radialBar"), options);
|
||||
chart.render();
|
||||
}
|
||||
var donutChart = function(){
|
||||
$("span.donut").peity("donut", {
|
||||
width: "90",
|
||||
height: "90"
|
||||
});
|
||||
}
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
chartBar();
|
||||
chartBar2();
|
||||
chartBar3();
|
||||
pieChart();
|
||||
radialBar();
|
||||
donutChart();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
setTimeout(function(){
|
||||
dzChartlist.load();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
42
public/style/js/deznav-init.js
Normal file
42
public/style/js/deznav-init.js
Normal file
@ -0,0 +1,42 @@
|
||||
(function($) {
|
||||
|
||||
function getUrlParams(dParam) {
|
||||
var dPageURL = window.location.search.substring(1),
|
||||
dURLVariables = dPageURL.split('&'),
|
||||
dParameterName,
|
||||
i;
|
||||
|
||||
for (i = 0; i < dURLVariables.length; i++) {
|
||||
dParameterName = dURLVariables[i].split('=');
|
||||
|
||||
if (dParameterName[0] === dParam) {
|
||||
return dParameterName[1] === undefined ? true : decodeURIComponent(dParameterName[1]);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var direction = getUrlParams('dir');
|
||||
if(direction != 'rtl')
|
||||
{direction = 'ltr'; }
|
||||
|
||||
var dezSettingsOptions = {
|
||||
typography: "poppins",
|
||||
version: "light",
|
||||
layout: "Vertical",
|
||||
headerBg: "color_1",
|
||||
navheaderBg: "color_1",
|
||||
sidebarBg: "color_1",
|
||||
sidebarStyle: "full",
|
||||
sidebarPosition: "fixed",
|
||||
headerPosition: "fixed",
|
||||
containerLayout: "full",
|
||||
direction: direction
|
||||
};
|
||||
|
||||
new dezSettings(dezSettingsOptions);
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
new dezSettings(dezSettingsOptions);
|
||||
});
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-compact-nav.js
Normal file
9
public/style/js/layout-compact-nav.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
sidebarStyle: "compact"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-dark.js
Normal file
9
public/style/js/layout-dark.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
version: "dark"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-fixed-header.js
Normal file
9
public/style/js/layout-fixed-header.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
headerPosition: "fixed",
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-fixed-nav.js
Normal file
9
public/style/js/layout-fixed-nav.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
sidebarPosition: "fixed"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-full-nav.js
Normal file
9
public/style/js/layout-full-nav.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
sidebarStyle: "full",
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-light.js
Normal file
9
public/style/js/layout-light.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
version: "light"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-mini-nav.js
Normal file
9
public/style/js/layout-mini-nav.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
sidebarStyle: "mini"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
9
public/style/js/layout-rtl.js
Normal file
9
public/style/js/layout-rtl.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
new dezSettings({
|
||||
direction: "rtl"
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
17
public/style/js/plugins-init/bootstrap-multiselect-init.js
vendored
Normal file
17
public/style/js/plugins-init/bootstrap-multiselect-init.js
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
|
||||
$('.basic-multiselect').multiselect();
|
||||
|
||||
$('.basic-multiselect-optgroup').multiselect({
|
||||
enableClickableOptGroups: true
|
||||
});
|
||||
|
||||
$('.basic-multiselect-selectall').multiselect({
|
||||
enableClickableOptGroups: true,
|
||||
includeSelectAllOption: true
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
6
public/style/js/plugins-init/bootstrap-tagsinput-init.js
vendored
Normal file
6
public/style/js/plugins-init/bootstrap-tagsinput-init.js
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
$("#tags_1").tagsinput();
|
||||
|
||||
})(jQuery);
|
49
public/style/js/plugins-init/bootstrap-touchpin-init.js
vendored
Normal file
49
public/style/js/plugins-init/bootstrap-touchpin-init.js
vendored
Normal file
@ -0,0 +1,49 @@
|
||||
(function ($) {
|
||||
"use strict";
|
||||
|
||||
$("input[name='demo0']").TouchSpin()
|
||||
|
||||
$("input[name='demo1']").TouchSpin({
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: .1,
|
||||
decimals: 2,
|
||||
boostat: 5,
|
||||
maxboostedstep: 10,
|
||||
postfix: "%"
|
||||
})
|
||||
|
||||
$("input[name='demo2']").TouchSpin({
|
||||
min: -1e9,
|
||||
max: 1e9,
|
||||
stepinterval: 50,
|
||||
maxboostedstep: 1e7,
|
||||
prefix: "$"
|
||||
})
|
||||
|
||||
$("input[name='demo_vertical']").TouchSpin({
|
||||
verticalbuttons: !0
|
||||
})
|
||||
|
||||
$("input[name='demo_vertical2']").TouchSpin({
|
||||
verticalbuttons: !0,
|
||||
verticalupclass: "fa fa-plus",
|
||||
verticaldownclass: "fa fa-minus"
|
||||
})
|
||||
|
||||
$("input[name='demo4']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
})
|
||||
|
||||
$("input[name='demo4_2']").TouchSpin({
|
||||
postfix: "a button",
|
||||
postfix_extraclass: "btn btn-default"
|
||||
})
|
||||
|
||||
$("input[name='demo5']").TouchSpin({
|
||||
prefix: "pre",
|
||||
postfix: "post"
|
||||
})
|
||||
|
||||
})(jQuery);
|
31
public/style/js/plugins-init/bs-daterange-picker-init.js
Normal file
31
public/style/js/plugins-init/bs-daterange-picker-init.js
Normal file
@ -0,0 +1,31 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// Daterange picker
|
||||
$('.input-daterange-datepicker').daterangepicker({
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-danger',
|
||||
cancelClass: 'btn-inverse'
|
||||
});
|
||||
$('.input-daterange-timepicker').daterangepicker({
|
||||
timePicker: true,
|
||||
format: 'MM/DD/YYYY h:mm A',
|
||||
timePickerIncrement: 30,
|
||||
timePicker12Hour: true,
|
||||
timePickerSeconds: false,
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-danger',
|
||||
cancelClass: 'btn-inverse'
|
||||
});
|
||||
$('.input-limit-datepicker').daterangepicker({
|
||||
format: 'MM/DD/YYYY',
|
||||
minDate: '06/01/2015',
|
||||
maxDate: '06/30/2015',
|
||||
buttonClasses: ['btn', 'btn-sm'],
|
||||
applyClass: 'btn-danger',
|
||||
cancelClass: 'btn-inverse',
|
||||
dateLimit: {
|
||||
days: 6
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
875
public/style/js/plugins-init/chartist-init.js
Normal file
875
public/style/js/plugins-init/chartist-init.js
Normal file
@ -0,0 +1,875 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzChartlist = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var setChartWidth = function(){
|
||||
|
||||
if(screenWidth <= 768)
|
||||
{
|
||||
var chartBlockWidth = 0;
|
||||
if(screenWidth >= 500)
|
||||
{
|
||||
chartBlockWidth = 250;
|
||||
}else{
|
||||
chartBlockWidth = 300;
|
||||
}
|
||||
|
||||
jQuery('.chartlist-chart').css('min-width',chartBlockWidth - 31);
|
||||
}
|
||||
}
|
||||
|
||||
var lineAnimatedChart = function(){
|
||||
|
||||
var chart = new Chartist.Line('#smil-animations', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 5, 3, 7, 3, 5, 5, 3, 4, 4, 5, 5],
|
||||
[5, 3, 4, 5, 6, 3, 3, 4, 5, 6, 3, 4],
|
||||
[3, 4, 5, 6, 7, 6, 4, 5, 6, 7, 6, 3]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
// Let's put a sequence number aside so we can use it in the event callbacks
|
||||
var seq = 0,
|
||||
delays = 80,
|
||||
durations = 500;
|
||||
|
||||
// Once the chart is fully created we reset the sequence
|
||||
chart.on('created', function() {
|
||||
seq = 0;
|
||||
});
|
||||
|
||||
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
|
||||
chart.on('draw', function(data) {
|
||||
seq++;
|
||||
|
||||
if(data.type === 'line') {
|
||||
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
|
||||
data.element.animate({
|
||||
opacity: {
|
||||
// The delay when we like to start the animation
|
||||
begin: seq * delays + 1000,
|
||||
// Duration of the animation
|
||||
dur: durations,
|
||||
// The value where the animation should start
|
||||
from: 0,
|
||||
// The value where it should end
|
||||
to: 1
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'x') {
|
||||
data.element.animate({
|
||||
y: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.y + 100,
|
||||
to: data.y,
|
||||
// We can specify an easing function from Chartist.Svg.Easing
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'label' && data.axis === 'y') {
|
||||
data.element.animate({
|
||||
x: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 100,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'point') {
|
||||
data.element.animate({
|
||||
x1: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
x2: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data.x - 10,
|
||||
to: data.x,
|
||||
easing: 'easeOutQuart'
|
||||
},
|
||||
opacity: {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
}
|
||||
});
|
||||
} else if(data.type === 'grid') {
|
||||
// Using data.axis we get x or y which we can use to construct our animation definition objects
|
||||
var pos1Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '1'] - 30,
|
||||
to: data[data.axis.units.pos + '1'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var pos2Animation = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: data[data.axis.units.pos + '2'] - 100,
|
||||
to: data[data.axis.units.pos + '2'],
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
var animations = {};
|
||||
animations[data.axis.units.pos + '1'] = pos1Animation;
|
||||
animations[data.axis.units.pos + '2'] = pos2Animation;
|
||||
animations['opacity'] = {
|
||||
begin: seq * delays,
|
||||
dur: durations,
|
||||
from: 0,
|
||||
to: 1,
|
||||
easing: 'easeOutQuart'
|
||||
};
|
||||
|
||||
data.element.animate(animations);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 10 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__exampleAnimateTimeout) {
|
||||
clearTimeout(window.__exampleAnimateTimeout);
|
||||
window.__exampleAnimateTimeout = null;
|
||||
}
|
||||
window.__exampleAnimateTimeout = setTimeout(chart.update.bind(chart), 12000);
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
var scatterChart = function(){
|
||||
//Line Scatter Diagram
|
||||
var times = function(n) {
|
||||
return Array.apply(null, new Array(n));
|
||||
};
|
||||
|
||||
var data = times(52).map(Math.random).reduce(function(data, rnd, index) {
|
||||
data.labels.push(index + 1);
|
||||
data.series.forEach(function(series) {
|
||||
series.push(Math.random() * 100)
|
||||
});
|
||||
|
||||
return data;
|
||||
}, {
|
||||
labels: [],
|
||||
series: times(4).map(function() { return new Array() })
|
||||
});
|
||||
|
||||
var options = {
|
||||
showLine: false,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 13 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (min-width: 640px)', {
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 4 === 0 ? 'W' + value : null;
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Line('#scatter-diagram', data, options, responsiveOptions);
|
||||
}
|
||||
|
||||
var simpleLineChart = function(){
|
||||
//Simple line chart
|
||||
new Chartist.Line('#simple-line-chart', {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
|
||||
series: [
|
||||
[12, 9, 7, 8, 5],
|
||||
[2, 1, 3.5, 7, 3],
|
||||
[1, 3, 4, 5, 6]
|
||||
]
|
||||
}, {
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 40
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
}
|
||||
var lineTooltipsChart = function(){
|
||||
//Line chart with tooltips
|
||||
|
||||
new Chartist.Line('#line-chart-tooltips', {
|
||||
labels: ['1', '2', '3', '4', '5', '6'],
|
||||
series: [
|
||||
{
|
||||
name: 'Fibonacci sequence',
|
||||
data: [1, 2, 3, 5, 8, 13]
|
||||
},
|
||||
{
|
||||
name: 'Golden section',
|
||||
data: [1, 1.618, 2.618, 4.236, 6.854, 11.09]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
],
|
||||
fullWidth: true
|
||||
}
|
||||
);
|
||||
|
||||
var $chart = $('#line-chart-tooltips');
|
||||
|
||||
var $toolTip = $chart
|
||||
.append('<div class="tooltip"></div>')
|
||||
.find('.tooltip')
|
||||
.hide();
|
||||
|
||||
$chart.on('mouseenter', '.ct-point', function() {
|
||||
var $point = $(this),
|
||||
value = $point.attr('ct:value'),
|
||||
seriesName = $point.parent().attr('ct:series-name');
|
||||
$toolTip.html(seriesName + '<br>' + value).show();
|
||||
});
|
||||
|
||||
$chart.on('mouseleave', '.ct-point', function() {
|
||||
$toolTip.hide();
|
||||
});
|
||||
|
||||
$chart.on('mousemove', function(event) {
|
||||
$toolTip.css({
|
||||
left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
|
||||
top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
var withAreaChart = function(){
|
||||
//Line chart with area
|
||||
|
||||
new Chartist.Line('#chart-with-area', {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
||||
series: [
|
||||
[5, 9, 7, 8, 5, 3, 5, 4, 3]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
fullWidth: true,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
}
|
||||
var biPolarLineChart = function(){
|
||||
//Bi-polar Line chart with area only
|
||||
|
||||
new Chartist.Line('#bi-polar-line', {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
series: [
|
||||
[1, 2, 3, 1, -2, 0, 1, 0],
|
||||
[-2, -1, -2, -1, -2.5, -1, -2, -1],
|
||||
[0, 0, 0, 1, 2, 2.5, 2, 1],
|
||||
[2.5, 2, 1, 0.5, 1, 0.5, -1, -2.5]
|
||||
]
|
||||
}, {
|
||||
high: 3,
|
||||
low: -3,
|
||||
showArea: true,
|
||||
showLine: false,
|
||||
showPoint: false,
|
||||
fullWidth: true,
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
showGrid: false
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
}
|
||||
var svgAnimationChart = function(){
|
||||
//SVG Path animation
|
||||
|
||||
var chart = new Chartist.Line('#svg-animation', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
series: [
|
||||
[1, 5, 2, 5, 4, 3],
|
||||
[2, 3, 4, 8, 1, 2],
|
||||
[5, 4, 3, 2, 1, 0.5]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: true,
|
||||
showPoint: false,
|
||||
fullWidth: true
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'line' || data.type === 'area') {
|
||||
data.element.animate({
|
||||
d: {
|
||||
begin: 2000 * data.index,
|
||||
dur: 2000,
|
||||
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
||||
to: data.path.clone().stringify(),
|
||||
easing: Chartist.Svg.Easing.easeOutQuint
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
var lineSmoothingChart = function(){
|
||||
//Line Interpolation / Smoothing
|
||||
|
||||
var chart = new Chartist.Line('#line-smoothing', {
|
||||
labels: [1, 2, 3, 4, 5],
|
||||
series: [
|
||||
[1, 5, 10, 0, 1],
|
||||
[10, 15, 0, 1, 2]
|
||||
]
|
||||
}, {
|
||||
// Remove this configuration to see that chart rendered with cardinal spline interpolation
|
||||
// Sometimes, on large jumps in data values, it's better to use simple smoothing.
|
||||
lineSmooth: Chartist.Interpolation.simple({
|
||||
divisor: 2
|
||||
}),
|
||||
fullWidth: true,
|
||||
chartPadding: {
|
||||
right: 20
|
||||
},
|
||||
low: 0
|
||||
});
|
||||
}
|
||||
var biPolarBarChart = function(){
|
||||
//Bi-polar bar chart
|
||||
var data = {
|
||||
labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
|
||||
series: [
|
||||
[1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
|
||||
]
|
||||
};
|
||||
|
||||
var options = {
|
||||
high: 10,
|
||||
low: -10,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value, index) {
|
||||
return index % 2 === 0 ? value : null;
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
};
|
||||
|
||||
new Chartist.Bar('#bi-polar-bar', data, options);
|
||||
|
||||
}
|
||||
var overlappingBarsChart = function(){
|
||||
//Overlapping bars on mobile
|
||||
var data = {
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3, 4, 8, 10, 6, 8],
|
||||
[3, 2, 9, 5, 4, 6, 4, 6, 7, 8, 7, 4]
|
||||
]
|
||||
};
|
||||
var options = {
|
||||
seriesBarDistance: 10
|
||||
};
|
||||
var responsiveOptions = [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0];
|
||||
}
|
||||
}
|
||||
}]
|
||||
];
|
||||
new Chartist.Bar('#overlapping-bars', data, options, responsiveOptions);
|
||||
}
|
||||
var multiLineChart = function(){
|
||||
//Multi-line labels
|
||||
new Chartist.Bar('#multi-line-chart', {
|
||||
labels: ['First quarter of the year', 'Second quarter of the year', 'Third quarter of the year', 'Fourth quarter of the year'],
|
||||
series: [
|
||||
[60000, 40000, 80000, 70000],
|
||||
[40000, 30000, 70000, 65000],
|
||||
[8000, 3000, 10000, 6000]
|
||||
]
|
||||
}, {
|
||||
seriesBarDistance: 10,
|
||||
axisX: {
|
||||
offset: 60
|
||||
},
|
||||
axisY: {
|
||||
offset: 80,
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value + ' CHF'
|
||||
},
|
||||
scaleMinSpace: 15
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
}
|
||||
var stackedBarChart = function(){
|
||||
//Stacked bar chart
|
||||
new Chartist.Bar('#stacked-bar-chart', {
|
||||
labels: ['Q1', 'Q2', 'Q3', 'Q4'],
|
||||
series: [
|
||||
[800000, 1200000, 1400000, 1300000],
|
||||
[200000, 400000, 500000, 300000],
|
||||
[160000, 290000, 410000, 600000]
|
||||
]
|
||||
}, {
|
||||
stackBars: true,
|
||||
axisY: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return (value / 1000) + 'k';
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}).on('draw', function(data) {
|
||||
if(data.type === 'bar') {
|
||||
data.element.attr({
|
||||
style: 'stroke-width: 30px'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
var horizontalBarChart = function(){
|
||||
//Horizontal bar chart
|
||||
|
||||
new Chartist.Bar('#horizontal-bar-chart', {
|
||||
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
}, {
|
||||
seriesBarDistance: 10,
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisY: {
|
||||
offset: 70
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
}
|
||||
var extremeChart = function(){
|
||||
// Extreme responsive configuration
|
||||
|
||||
new Chartist.Bar('#extreme-chart', {
|
||||
labels: ['Quarter 1', 'Quarter 2', 'Quarter 3', 'Quarter 4'],
|
||||
series: [
|
||||
[5, 4, 3, 7],
|
||||
[3, 2, 9, 5],
|
||||
[1, 5, 8, 4],
|
||||
[2, 3, 4, 6],
|
||||
[4, 1, 2, 1]
|
||||
]
|
||||
}, {
|
||||
// Default mobile configuration
|
||||
stackBars: true,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value.split(/\s+/).map(function(word) {
|
||||
return word[0];
|
||||
}).join('');
|
||||
}
|
||||
},
|
||||
axisY: {
|
||||
offset: 20
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}, [
|
||||
// Options override for media > 400px
|
||||
['screen and (min-width: 400px)', {
|
||||
reverseData: true,
|
||||
horizontalBars: true,
|
||||
axisX: {
|
||||
labelInterpolationFnc: Chartist.noop
|
||||
},
|
||||
axisY: {
|
||||
offset: 60
|
||||
}
|
||||
}],
|
||||
// Options override for media > 800px
|
||||
['screen and (min-width: 800px)', {
|
||||
stackBars: false,
|
||||
seriesBarDistance: 10
|
||||
}],
|
||||
// Options override for media > 1000px
|
||||
['screen and (min-width: 1000px)', {
|
||||
reverseData: false,
|
||||
horizontalBars: false,
|
||||
seriesBarDistance: 15
|
||||
}]
|
||||
]);
|
||||
}
|
||||
var labelPlacementChart = function(){
|
||||
//Label placement
|
||||
|
||||
new Chartist.Bar('#label-placement-chart', {
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
series: [
|
||||
[5, 4, 3, 7, 5, 10, 3],
|
||||
[3, 2, 9, 5, 4, 6, 4]
|
||||
]
|
||||
}, {
|
||||
axisX: {
|
||||
// On the x-axis start means top and end means bottom
|
||||
position: 'start'
|
||||
},
|
||||
axisY: {
|
||||
// On the y-axis start means left and end means right
|
||||
position: 'end'
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
}
|
||||
var animatingDonutChart = function(){
|
||||
//Animating a Donut with Svg.animate
|
||||
|
||||
var chart = new Chartist.Pie('#animating-donut', {
|
||||
series: [10, 20, 50, 20, 5, 50, 15],
|
||||
labels: [1, 2, 3, 4, 5, 6, 7]
|
||||
}, {
|
||||
donut: true,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'slice') {
|
||||
// Get the total path length in order to use for dash array animation
|
||||
var pathLength = data.element._node.getTotalLength();
|
||||
|
||||
// Set a dasharray that matches the path length as prerequisite to animate dashoffset
|
||||
data.element.attr({
|
||||
'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
|
||||
});
|
||||
|
||||
// Create animation definition while also assigning an ID to the animation for later sync usage
|
||||
var animationDefinition = {
|
||||
'stroke-dashoffset': {
|
||||
id: 'anim' + data.index,
|
||||
dur: 1000,
|
||||
from: -pathLength + 'px',
|
||||
to: '0px',
|
||||
easing: Chartist.Svg.Easing.easeOutQuint,
|
||||
// We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
|
||||
fill: 'freeze'
|
||||
}
|
||||
};
|
||||
|
||||
// If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
|
||||
if(data.index !== 0) {
|
||||
animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
|
||||
}
|
||||
|
||||
// We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
|
||||
data.element.attr({
|
||||
'stroke-dashoffset': -pathLength + 'px'
|
||||
});
|
||||
|
||||
// We can't use guided mode as the animations need to rely on setting begin manually
|
||||
// See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
|
||||
data.element.animate(animationDefinition, false);
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__anim21278907124) {
|
||||
clearTimeout(window.__anim21278907124);
|
||||
window.__anim21278907124 = null;
|
||||
}
|
||||
window.__anim21278907124 = setTimeout(chart.update.bind(chart), 10000);
|
||||
});
|
||||
|
||||
}
|
||||
var simplePieChart = function(){
|
||||
//Simple pie chart
|
||||
|
||||
var data1 = {
|
||||
series: [5, 3, 4]
|
||||
};
|
||||
|
||||
var sum = function(a, b) { return a + b };
|
||||
|
||||
new Chartist.Pie('#simple-pie', data1, {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return Math.round(value / data1.series.reduce(sum) * 100) + '%';
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
var pieChart = function(){
|
||||
//Pie chart with custom labels
|
||||
|
||||
var data = {
|
||||
labels: ['35%', '55%', '10%'],
|
||||
series: [20, 15, 40]
|
||||
};
|
||||
|
||||
var options = {
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value[0]
|
||||
}
|
||||
};
|
||||
|
||||
var responsiveOptions = [
|
||||
['screen and (min-width: 640px)', {
|
||||
chartPadding: 30,
|
||||
donut: true,
|
||||
labelOffset: 100,
|
||||
donutWidth: 60,
|
||||
labelDirection: 'explode',
|
||||
labelInterpolationFnc: function(value) {
|
||||
return value;
|
||||
}
|
||||
}],
|
||||
['screen and (min-width: 1024px)', {
|
||||
labelOffset: 60,
|
||||
chartPadding: 20
|
||||
}]
|
||||
];
|
||||
|
||||
new Chartist.Pie('#pie-chart', data, options, responsiveOptions);
|
||||
|
||||
}
|
||||
var gaugeChart = function(){
|
||||
//Gauge chart
|
||||
|
||||
new Chartist.Pie('#gauge-chart', {
|
||||
series: [20, 10, 30, 40]
|
||||
}, {
|
||||
donut: true,
|
||||
donutWidth: 60,
|
||||
startAngle: 270,
|
||||
total: 200,
|
||||
showLabel: false,
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
}
|
||||
var differentSeriesChart = function(){
|
||||
// Different configuration for different series
|
||||
|
||||
var chart = new Chartist.Line('#different-series', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8'],
|
||||
// Naming the series with the series object array notation
|
||||
series: [{
|
||||
name: 'series-1',
|
||||
data: [5, 2, -4, 2, 0, -2, 5, -3]
|
||||
}, {
|
||||
name: 'series-2',
|
||||
data: [4, 3, 5, 3, 1, 3, 6, 4]
|
||||
}, {
|
||||
name: 'series-3',
|
||||
data: [2, 4, 3, 1, 4, 5, 3, 2]
|
||||
}]
|
||||
}, {
|
||||
fullWidth: true,
|
||||
// Within the series options you can use the series names
|
||||
// to specify configuration that will only be used for the
|
||||
// specific series.
|
||||
series: {
|
||||
'series-1': {
|
||||
lineSmooth: Chartist.Interpolation.step()
|
||||
},
|
||||
'series-2': {
|
||||
lineSmooth: Chartist.Interpolation.simple(),
|
||||
showArea: true
|
||||
},
|
||||
'series-3': {
|
||||
showPoint: false
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
}, [
|
||||
// You can even use responsive configuration overrides to
|
||||
// customize your series configuration even further!
|
||||
['screen and (max-width: 320px)', {
|
||||
series: {
|
||||
'series-1': {
|
||||
lineSmooth: Chartist.Interpolation.none()
|
||||
},
|
||||
'series-2': {
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
showArea: false
|
||||
},
|
||||
'series-3': {
|
||||
lineSmooth: Chartist.Interpolation.none(),
|
||||
showPoint: true
|
||||
}
|
||||
}
|
||||
}]
|
||||
]);
|
||||
|
||||
}
|
||||
var svgDotAnimationChart = function(){
|
||||
//SVG Animations chart
|
||||
|
||||
var chart = new Chartist.Line('#svg-dot-animation', {
|
||||
labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
|
||||
series: [
|
||||
[12, 4, 2, 8, 5, 4, 6, 2, 3, 3, 4, 6],
|
||||
[4, 8, 9, 3, 7, 2, 10, 5, 8, 1, 7, 10]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showLine: false,
|
||||
axisX: {
|
||||
showLabel: false,
|
||||
offset: 0
|
||||
},
|
||||
axisY: {
|
||||
showLabel: false,
|
||||
offset: 0
|
||||
},
|
||||
plugins: [
|
||||
Chartist.plugins.tooltip()
|
||||
]
|
||||
});
|
||||
|
||||
// Let's put a sequence number aside so we can use it in the event callbacks
|
||||
var seq = 0;
|
||||
|
||||
// Once the chart is fully created we reset the sequence
|
||||
chart.on('created', function() {
|
||||
seq = 0;
|
||||
});
|
||||
|
||||
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
|
||||
chart.on('draw', function(data) {
|
||||
if(data.type === 'point') {
|
||||
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
|
||||
data.element.animate({
|
||||
opacity: {
|
||||
// The delay when we like to start the animation
|
||||
begin: seq++ * 80,
|
||||
// Duration of the animation
|
||||
dur: 500,
|
||||
// The value where the animation should start
|
||||
from: 0,
|
||||
// The value where it should end
|
||||
to: 1
|
||||
},
|
||||
x1: {
|
||||
begin: seq++ * 80,
|
||||
dur: 500,
|
||||
from: data.x - 100,
|
||||
to: data.x,
|
||||
// You can specify an easing function name or use easing functions from Chartist.Svg.Easing directly
|
||||
easing: Chartist.Svg.Easing.easeOutQuart
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// For the sake of the example we update the chart every time it's created with a delay of 8 seconds
|
||||
chart.on('created', function() {
|
||||
if(window.__anim0987432598723) {
|
||||
clearTimeout(window.__anim0987432598723);
|
||||
window.__anim0987432598723 = null;
|
||||
}
|
||||
window.__anim0987432598723 = setTimeout(chart.update.bind(chart), 8000);
|
||||
});
|
||||
}
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
setChartWidth();
|
||||
lineAnimatedChart();
|
||||
scatterChart();
|
||||
simpleLineChart();
|
||||
lineTooltipsChart();
|
||||
withAreaChart();
|
||||
biPolarLineChart();
|
||||
svgAnimationChart();
|
||||
lineSmoothingChart();
|
||||
biPolarBarChart();
|
||||
overlappingBarsChart();
|
||||
multiLineChart();
|
||||
stackedBarChart();
|
||||
horizontalBarChart();
|
||||
extremeChart();
|
||||
labelPlacementChart();
|
||||
animatingDonutChart();
|
||||
simplePieChart();
|
||||
pieChart();
|
||||
gaugeChart();
|
||||
differentSeriesChart();
|
||||
svgDotAnimationChart();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
dzChartlist.load();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
dzChartlist.resize();
|
||||
});
|
||||
|
||||
})(jQuery);
|
851
public/style/js/plugins-init/chartjs-init.js
Normal file
851
public/style/js/plugins-init/chartjs-init.js
Normal file
@ -0,0 +1,851 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
/* function draw() {
|
||||
|
||||
} */
|
||||
|
||||
var dzSparkLine = function(){
|
||||
let draw = Chart.controllers.line.__super__.draw; //draw shadow
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var barChart1 = function(){
|
||||
if(jQuery('#barChart_1').length > 0 ){
|
||||
const barChart_1 = document.getElementById("barChart_1").getContext('2d');
|
||||
|
||||
barChart_1.height = 100;
|
||||
|
||||
new Chart(barChart_1, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(11, 42, 151, 1)',
|
||||
borderWidth: "0",
|
||||
backgroundColor: 'rgba(11, 42, 151, 1)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
// Change here
|
||||
barPercentage: 0.5
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var barChart2 = function(){
|
||||
if(jQuery('#barChart_2').length > 0 ){
|
||||
|
||||
//gradient bar chart
|
||||
const barChart_2 = document.getElementById("barChart_2").getContext('2d');
|
||||
//generate gradient
|
||||
const barChart_2gradientStroke = barChart_2.createLinearGradient(0, 0, 0, 250);
|
||||
barChart_2gradientStroke.addColorStop(0, "rgba(11, 42, 151, 1)");
|
||||
barChart_2gradientStroke.addColorStop(1, "rgba(11, 42, 151, 0.5)");
|
||||
|
||||
barChart_2.height = 100;
|
||||
|
||||
new Chart(barChart_2, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
borderColor: barChart_2gradientStroke,
|
||||
borderWidth: "0",
|
||||
backgroundColor: barChart_2gradientStroke,
|
||||
hoverBackgroundColor: barChart_2gradientStroke
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
// Change here
|
||||
barPercentage: 0.5
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var barChart3 = function(){
|
||||
//stalked bar chart
|
||||
if(jQuery('#barChart_3').length > 0 ){
|
||||
const barChart_3 = document.getElementById("barChart_3").getContext('2d');
|
||||
//generate gradient
|
||||
const barChart_3gradientStroke = barChart_3.createLinearGradient(50, 100, 50, 50);
|
||||
barChart_3gradientStroke.addColorStop(0, "rgba(11, 42, 151, 1)");
|
||||
barChart_3gradientStroke.addColorStop(1, "rgba(11, 42, 151, 0.5)");
|
||||
|
||||
const barChart_3gradientStroke2 = barChart_3.createLinearGradient(50, 100, 50, 50);
|
||||
barChart_3gradientStroke2.addColorStop(0, "rgba(39, 188, 72, 1)");
|
||||
barChart_3gradientStroke2.addColorStop(1, "rgba(39, 188, 72, 1)");
|
||||
|
||||
const barChart_3gradientStroke3 = barChart_3.createLinearGradient(50, 100, 50, 50);
|
||||
barChart_3gradientStroke3.addColorStop(0, "rgba(139, 199, 64, 1)");
|
||||
barChart_3gradientStroke3.addColorStop(1, "rgba(139, 199, 64, 1)");
|
||||
|
||||
barChart_3.height = 100;
|
||||
|
||||
let barChartData = {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
|
||||
datasets: [{
|
||||
label: 'Red',
|
||||
backgroundColor: barChart_3gradientStroke,
|
||||
hoverBackgroundColor: barChart_3gradientStroke,
|
||||
data: [
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12'
|
||||
]
|
||||
}, {
|
||||
label: 'Green',
|
||||
backgroundColor: barChart_3gradientStroke2,
|
||||
hoverBackgroundColor: barChart_3gradientStroke2,
|
||||
data: [
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12'
|
||||
]
|
||||
}, {
|
||||
label: 'Blue',
|
||||
backgroundColor: barChart_3gradientStroke3,
|
||||
hoverBackgroundColor: barChart_3gradientStroke3,
|
||||
data: [
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12',
|
||||
'12'
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
new Chart(barChart_3, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
stacked: true,
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
var lineChart1 = function(){
|
||||
|
||||
|
||||
if(jQuery('#lineChart_1').length > 0 ){
|
||||
|
||||
|
||||
//basic line chart
|
||||
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
|
||||
|
||||
Chart.controllers.line = Chart.controllers.line.extend({
|
||||
draw: function () {
|
||||
draw.apply(this, arguments);
|
||||
let nk = this.chart.chart.ctx;
|
||||
let _stroke = nk.stroke;
|
||||
nk.stroke = function () {
|
||||
nk.save();
|
||||
nk.shadowColor = 'rgba(255, 0, 0, .2)';
|
||||
nk.shadowBlur = 10;
|
||||
nk.shadowOffsetX = 0;
|
||||
nk.shadowOffsetY = 10;
|
||||
_stroke.apply(this, arguments)
|
||||
nk.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
lineChart_1.height = 100;
|
||||
|
||||
new Chart(lineChart_1, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Febr", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: 'rgba(11, 42, 151, 1)',
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: 'rgba(11, 42, 151, 1)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* var draw = function(){
|
||||
|
||||
} */
|
||||
|
||||
var lineChart2 = function(){
|
||||
//gradient line chart
|
||||
if(jQuery('#lineChart_2').length > 0 ){
|
||||
|
||||
const lineChart_2 = document.getElementById("lineChart_2").getContext('2d');
|
||||
//generate gradient
|
||||
const lineChart_2gradientStroke = lineChart_2.createLinearGradient(500, 0, 100, 0);
|
||||
lineChart_2gradientStroke.addColorStop(0, "rgba(11, 42, 151, 1)");
|
||||
lineChart_2gradientStroke.addColorStop(1, "rgba(11, 42, 151, 0.5)");
|
||||
|
||||
//Chart.controllers.line.draw = function(){ };
|
||||
|
||||
Chart.controllers.line = Chart.controllers.line.extend({
|
||||
draw: function () {
|
||||
draw.apply(this, arguments);
|
||||
let nk = this.chart.chart.ctx;
|
||||
let _stroke = nk.stroke;
|
||||
nk.stroke = function () {
|
||||
nk.save();
|
||||
nk.shadowColor = 'rgba(0, 0, 128, .2)';
|
||||
nk.shadowBlur = 10;
|
||||
nk.shadowOffsetX = 0;
|
||||
nk.shadowOffsetY = 10;
|
||||
_stroke.apply(this, arguments)
|
||||
nk.restore();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
lineChart_2.height = 100;
|
||||
|
||||
new Chart(lineChart_2, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: lineChart_2gradientStroke,
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: 'rgba(11, 42, 151, 0.5)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var lineChart3 = function(){
|
||||
//dual line chart
|
||||
if(jQuery('#lineChart_3').length > 0 ){
|
||||
const lineChart_3 = document.getElementById("lineChart_3").getContext('2d');
|
||||
//generate gradient
|
||||
const lineChart_3gradientStroke1 = lineChart_3.createLinearGradient(500, 0, 100, 0);
|
||||
lineChart_3gradientStroke1.addColorStop(0, "rgba(11, 42, 151, 1)");
|
||||
lineChart_3gradientStroke1.addColorStop(1, "rgba(11, 42, 151, 0.5)");
|
||||
|
||||
const lineChart_3gradientStroke2 = lineChart_3.createLinearGradient(500, 0, 100, 0);
|
||||
lineChart_3gradientStroke2.addColorStop(0, "rgba(255, 188, 17, 1)");
|
||||
lineChart_3gradientStroke2.addColorStop(1, "rgba(255, 188, 17, 1)");
|
||||
|
||||
Chart.controllers.line = Chart.controllers.line.extend({
|
||||
draw: function () {
|
||||
draw.apply(this, arguments);
|
||||
let nk = this.chart.chart.ctx;
|
||||
let _stroke = nk.stroke;
|
||||
nk.stroke = function () {
|
||||
nk.save();
|
||||
nk.shadowColor = 'rgba(0, 0, 0, 0)';
|
||||
nk.shadowBlur = 10;
|
||||
nk.shadowOffsetX = 0;
|
||||
nk.shadowOffsetY = 10;
|
||||
_stroke.apply(this, arguments)
|
||||
nk.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
lineChart_3.height = 100;
|
||||
|
||||
new Chart(lineChart_3, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: lineChart_3gradientStroke1,
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: 'rgba(11, 42, 151, 0.5)'
|
||||
}, {
|
||||
label: "My First dataset",
|
||||
data: [5, 20, 15, 41, 35, 65, 80],
|
||||
borderColor: lineChart_3gradientStroke2,
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: 'rgba(254, 176, 25, 1)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var lineChart03 = function(){
|
||||
//dual line chart
|
||||
if(jQuery('#lineChart_3Kk').length > 0 ){
|
||||
const lineChart_3Kk = document.getElementById("lineChart_3Kk").getContext('2d');
|
||||
//generate gradient
|
||||
|
||||
Chart.controllers.line = Chart.controllers.line.extend({
|
||||
draw: function () {
|
||||
draw.apply(this, arguments);
|
||||
let nk = this.chart.chart.ctx;
|
||||
let _stroke = nk.stroke;
|
||||
nk.stroke = function () {
|
||||
nk.save();
|
||||
nk.shadowColor = 'rgba(0, 0, 0, 0)';
|
||||
nk.shadowBlur = 10;
|
||||
nk.shadowOffsetX = 0;
|
||||
nk.shadowOffsetY = 10;
|
||||
_stroke.apply(this, arguments)
|
||||
nk.restore();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
lineChart_3Kk.height = 100;
|
||||
|
||||
new Chart(lineChart_3Kk, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [90, 60, 80, 50, 60, 55, 80],
|
||||
borderColor: 'rgba(58,122,254,1)',
|
||||
borderWidth: "3",
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
pointBackgroundColor: 'rgba(0, 0, 0, 0)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
elements: {
|
||||
point:{
|
||||
radius: 0
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
},
|
||||
borderWidth:3,
|
||||
display:false,
|
||||
lineTension:0.4,
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
},
|
||||
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
var areaChart1 = function(){
|
||||
//basic area chart
|
||||
if(jQuery('#areaChart_1').length > 0 ){
|
||||
const areaChart_1 = document.getElementById("areaChart_1").getContext('2d');
|
||||
|
||||
areaChart_1.height = 100;
|
||||
|
||||
new Chart(areaChart_1, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: 'rgba(0, 0, 1128, .3)',
|
||||
borderWidth: "1",
|
||||
backgroundColor: 'rgba(11, 42, 151, .5)',
|
||||
pointBackgroundColor: 'rgba(0, 0, 1128, .3)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var areaChart2 = function(){
|
||||
//gradient area chart
|
||||
if(jQuery('#areaChart_2').length > 0 ){
|
||||
const areaChart_2 = document.getElementById("areaChart_2").getContext('2d');
|
||||
//generate gradient
|
||||
const areaChart_2gradientStroke = areaChart_2.createLinearGradient(0, 1, 0, 500);
|
||||
areaChart_2gradientStroke.addColorStop(0, "rgba(139, 199, 64, 0.2)");
|
||||
areaChart_2gradientStroke.addColorStop(1, "rgba(139, 199, 64, 0)");
|
||||
|
||||
areaChart_2.height = 100;
|
||||
|
||||
new Chart(areaChart_2, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: "#FF2E2E",
|
||||
borderWidth: "4",
|
||||
backgroundColor: areaChart_2gradientStroke
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 5
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var areaChart3 = function(){
|
||||
//gradient area chart
|
||||
if(jQuery('#areaChart_3').length > 0 ){
|
||||
const areaChart_3 = document.getElementById("areaChart_3").getContext('2d');
|
||||
|
||||
areaChart_3.height = 100;
|
||||
|
||||
new Chart(areaChart_3, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 20, 60, 41, 66, 45, 80],
|
||||
borderColor: 'rgb(11, 42, 151)',
|
||||
borderWidth: "1",
|
||||
backgroundColor: 'rgba(11, 42, 151, .5)'
|
||||
},
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [5, 25, 20, 41, 36, 75, 70],
|
||||
borderColor: 'rgb(255, 188, 17)',
|
||||
borderWidth: "1",
|
||||
backgroundColor: 'rgba(255, 188, 17, .5)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 10
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
padding: 5
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var radarChart = function(){
|
||||
if(jQuery('#radar_chart').length > 0 ){
|
||||
//radar chart
|
||||
const radar_chart = document.getElementById("radar_chart").getContext('2d');
|
||||
|
||||
const radar_chartgradientStroke1 = radar_chart.createLinearGradient(500, 0, 100, 0);
|
||||
radar_chartgradientStroke1.addColorStop(0, "rgba(54, 185, 216, .5)");
|
||||
radar_chartgradientStroke1.addColorStop(1, "rgba(75, 255, 162, .5)");
|
||||
|
||||
const radar_chartgradientStroke2 = radar_chart.createLinearGradient(500, 0, 100, 0);
|
||||
radar_chartgradientStroke2.addColorStop(0, "rgba(68, 0, 235, .5");
|
||||
radar_chartgradientStroke2.addColorStop(1, "rgba(68, 236, 245, .5");
|
||||
|
||||
// radar_chart.height = 100;
|
||||
new Chart(radar_chart, {
|
||||
type: 'radar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: [["Eating", "Dinner"], ["Drinking", "Water"], "Sleeping", ["Designing", "Graphics"], "Coding", "Cycling", "Running"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 66, 45, 56, 55, 40],
|
||||
borderColor: '#f21780',
|
||||
borderWidth: "1",
|
||||
backgroundColor: radar_chartgradientStroke2
|
||||
},
|
||||
{
|
||||
label: "My Second dataset",
|
||||
data: [28, 12, 40, 19, 63, 27, 87],
|
||||
borderColor: '#f21780',
|
||||
borderWidth: "1",
|
||||
backgroundColor: radar_chartgradientStroke1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
maintainAspectRatio: false,
|
||||
scale: {
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var pieChart = function(){
|
||||
//pie chart
|
||||
if(jQuery('#pie_chart').length > 0 ){
|
||||
//pie chart
|
||||
const pie_chart = document.getElementById("pie_chart").getContext('2d');
|
||||
// pie_chart.height = 100;
|
||||
new Chart(pie_chart, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
datasets: [{
|
||||
data: [45, 25, 20, 10],
|
||||
borderWidth: 0,
|
||||
backgroundColor: [
|
||||
"rgba(11, 42, 151, .9)",
|
||||
"rgba(11, 42, 151, .7)",
|
||||
"rgba(11, 42, 151, .5)",
|
||||
"rgba(0,0,0,0.07)"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"rgba(11, 42, 151, .9)",
|
||||
"rgba(11, 42, 151, .7)",
|
||||
"rgba(11, 42, 151, .5)",
|
||||
"rgba(0,0,0,0.07)"
|
||||
]
|
||||
|
||||
}],
|
||||
labels: [
|
||||
"one",
|
||||
"two",
|
||||
"three",
|
||||
"four"
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
legend: false,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var doughnutChart = function(){
|
||||
if(jQuery('#doughnut_chart').length > 0 ){
|
||||
//doughut chart
|
||||
const doughnut_chart = document.getElementById("doughnut_chart").getContext('2d');
|
||||
// doughnut_chart.height = 100;
|
||||
new Chart(doughnut_chart, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
weight: 5,
|
||||
defaultFontFamily: 'Poppins',
|
||||
datasets: [{
|
||||
data: [45, 25, 20],
|
||||
borderWidth: 3,
|
||||
borderColor: "rgba(255,255,255,1)",
|
||||
backgroundColor: [
|
||||
"rgba(11, 42, 151, 1)",
|
||||
"rgba(39, 188, 72, 1)",
|
||||
"rgba(139, 199, 64, 1)"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"rgba(11, 42, 151, 0.9)",
|
||||
"rgba(39, 188, 72, .9)",
|
||||
"rgba(139, 199, 64, .9)"
|
||||
]
|
||||
|
||||
}],
|
||||
// labels: [
|
||||
// "green",
|
||||
// "green",
|
||||
// "green",
|
||||
// "green"
|
||||
// ]
|
||||
},
|
||||
options: {
|
||||
weight: 1,
|
||||
cutoutPercentage: 70,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var polarChart = function(){
|
||||
if(jQuery('#polar_chart').length > 0 ){
|
||||
//polar chart
|
||||
const polar_chart = document.getElementById("polar_chart").getContext('2d');
|
||||
// polar_chart.height = 100;
|
||||
new Chart(polar_chart, {
|
||||
type: 'polarArea',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
datasets: [{
|
||||
data: [15, 18, 9, 6, 19],
|
||||
borderWidth: 0,
|
||||
backgroundColor: [
|
||||
"rgba(11, 42, 151, 1)",
|
||||
"rgba(39, 188, 72, 1)",
|
||||
"rgba(139, 199, 64, 1)",
|
||||
"rgba(255, 46, 46, 1)",
|
||||
"rgba(255, 188, 17, 1)"
|
||||
]
|
||||
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
barChart1();
|
||||
barChart2();
|
||||
barChart3();
|
||||
lineChart1();
|
||||
lineChart2();
|
||||
lineChart3();
|
||||
lineChart03();
|
||||
areaChart1();
|
||||
areaChart2();
|
||||
areaChart3();
|
||||
radarChart();
|
||||
pieChart();
|
||||
doughnutChart();
|
||||
polarChart();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
barChart1();
|
||||
barChart2();
|
||||
barChart3();
|
||||
lineChart1();
|
||||
lineChart2();
|
||||
lineChart3();
|
||||
lineChart03();
|
||||
areaChart1();
|
||||
areaChart2();
|
||||
areaChart3();
|
||||
radarChart();
|
||||
pieChart();
|
||||
doughnutChart();
|
||||
polarChart();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
dzSparkLine.load();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
//dzSparkLine.resize();
|
||||
setTimeout(function(){ dzSparkLine.resize(); }, 1000);
|
||||
});
|
||||
|
||||
})(jQuery);
|
24
public/style/js/plugins-init/clock-picker-init.js
Normal file
24
public/style/js/plugins-init/clock-picker-init.js
Normal file
@ -0,0 +1,24 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// Clock pickers
|
||||
var input = $('#single-input').clockpicker({
|
||||
placement: 'bottom',
|
||||
align: 'left',
|
||||
autoclose: true,
|
||||
'default': 'now'
|
||||
});
|
||||
|
||||
$('.clockpicker').clockpicker({
|
||||
donetext: 'Done',
|
||||
}).find('input').change(function () {
|
||||
console.log(this.value);
|
||||
});
|
||||
|
||||
$('#check-minutes').on("click", function (e) {
|
||||
// Have to stop propagation here
|
||||
e.stopPropagation();
|
||||
input.clockpicker('show').clockpicker('toggleView', 'minutes');
|
||||
});
|
||||
|
||||
})(jQuery)
|
12
public/style/js/plugins-init/color-picker-init.js
Normal file
12
public/style/js/plugins-init/color-picker-init.js
Normal file
@ -0,0 +1,12 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// Colorpicker
|
||||
$(".colorpicker").asColorPicker();
|
||||
$(".complex-colorpicker").asColorPicker({
|
||||
mode: 'complex'
|
||||
});
|
||||
$(".gradient-colorpicker").asColorPicker({
|
||||
mode: 'gradient'
|
||||
});
|
||||
})(jQuery);
|
13
public/style/js/plugins-init/counter-init.js
Normal file
13
public/style/js/plugins-init/counter-init.js
Normal file
@ -0,0 +1,13 @@
|
||||
(function ($) {
|
||||
"use strict"
|
||||
|
||||
/*******************
|
||||
Counter Up
|
||||
*******************/
|
||||
|
||||
$('.counter').counterUp({
|
||||
delay: 10,
|
||||
time: 1000
|
||||
});
|
||||
|
||||
})(jQuery);
|
99
public/style/js/plugins-init/datatables.init.js
Normal file
99
public/style/js/plugins-init/datatables.init.js
Normal file
@ -0,0 +1,99 @@
|
||||
let dataSet = [
|
||||
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
|
||||
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
|
||||
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
|
||||
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
|
||||
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
|
||||
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
|
||||
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
|
||||
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
|
||||
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
|
||||
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
|
||||
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
|
||||
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
|
||||
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
|
||||
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
|
||||
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
|
||||
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
|
||||
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
|
||||
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
|
||||
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
|
||||
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
|
||||
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
|
||||
];
|
||||
|
||||
|
||||
|
||||
|
||||
(function($) {
|
||||
"use strict"
|
||||
//example 1
|
||||
var table = $('#example').DataTable({
|
||||
createdRow: function ( row, data, index ) {
|
||||
$(row).addClass('selected')
|
||||
}
|
||||
});
|
||||
|
||||
table.on('click', 'tbody tr', function() {
|
||||
var $row = table.row(this).nodes().to$();
|
||||
var hasClass = $row.hasClass('selected');
|
||||
if (hasClass) {
|
||||
$row.removeClass('selected')
|
||||
} else {
|
||||
$row.addClass('selected')
|
||||
}
|
||||
})
|
||||
|
||||
table.rows().every(function() {
|
||||
this.nodes().to$().removeClass('selected')
|
||||
});
|
||||
|
||||
|
||||
|
||||
//example 2
|
||||
var table2 = $('#example2').DataTable( {
|
||||
createdRow: function ( row, data, index ) {
|
||||
$(row).addClass('selected')
|
||||
},
|
||||
|
||||
"scrollY": "42vh",
|
||||
"scrollCollapse": true,
|
||||
"paging": false
|
||||
});
|
||||
|
||||
table2.on('click', 'tbody tr', function() {
|
||||
var $row = table2.row(this).nodes().to$();
|
||||
var hasClass = $row.hasClass('selected');
|
||||
if (hasClass) {
|
||||
$row.removeClass('selected')
|
||||
} else {
|
||||
$row.addClass('selected')
|
||||
}
|
||||
})
|
||||
|
||||
table2.rows().every(function() {
|
||||
this.nodes().to$().removeClass('selected')
|
||||
});
|
||||
|
||||
//
|
||||
var table = $('#example3, #example4, #example5').DataTable();
|
||||
$('#example tbody').on('click', 'tr', function () {
|
||||
var data = table.row( this ).data();
|
||||
});
|
||||
|
||||
})(jQuery);
|
591
public/style/js/plugins-init/flot-init.js
Normal file
591
public/style/js/plugins-init/flot-init.js
Normal file
@ -0,0 +1,591 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzChartlist = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var flotBar1 = function(){
|
||||
$.plot("#flotBar1", [{
|
||||
data: [[0, 3], [2, 8], [4, 5], [6, 13], [8, 5], [10, 7], [12, 4], [14, 6]]
|
||||
}], {
|
||||
series: {
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#0B2A97'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: 'transparent',
|
||||
font: {
|
||||
color: '#fff',
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickColor: 'transparent',
|
||||
font: {
|
||||
color: '#fff',
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotBar2 = function(){
|
||||
$.plot("#flotBar2", [{
|
||||
data: [[0, 3], [2, 8], [4, 5], [6, 13], [8, 5], [10, 7], [12, 8], [14, 10]],
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#0B2A97'
|
||||
}
|
||||
}, {
|
||||
data: [[1, 5], [3, 7], [5, 10], [7, 7], [9, 9], [11, 5], [13, 4], [15, 6]],
|
||||
bars: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fillColor: '#1EA7C5'
|
||||
}
|
||||
}],
|
||||
{
|
||||
grid: {
|
||||
borderWidth: 1,
|
||||
borderColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
tickColor: 'transparent',
|
||||
font: {
|
||||
color: '#fff',
|
||||
size: 10
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
tickColor: 'transparent',
|
||||
font: {
|
||||
color: '#fff',
|
||||
size: 10
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotLine1 = function(){
|
||||
var newCust = [[0, 2], [1, 3], [2, 6], [3, 5], [4, 7], [5, 8], [6, 10]];
|
||||
var retCust = [[0, 1], [1, 2], [2, 5], [3, 3], [4, 5], [5, 6], [6, 9]];
|
||||
|
||||
var plot = $.plot($('#flotLine1'), [
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#0B2A97'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#1EA7C5'
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotLine2 = function(){
|
||||
var newCust = [[0, 2], [1, 3], [2, 6], [3, 5], [4, 7], [5, 8], [6, 10]];
|
||||
var retCust = [[0, 1], [1, 2], [2, 5], [3, 3], [4, 5], [5, 6], [6, 9]];
|
||||
|
||||
var plot = $.plot($('#flotLine2'), [
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#0B2A97'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#1EA7C5'
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
splines: {
|
||||
show: true,
|
||||
tension: 0.4,
|
||||
lineWidth: 1,
|
||||
//fill: 0.4
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var flotLine3 = function(){
|
||||
var newCust2 = [[0, 10], [1, 7], [2, 8], [3, 9], [4, 6], [5, 5], [6, 7]];
|
||||
var retCust2 = [[0, 8], [1, 5], [2, 6], [3, 8], [4, 4], [5, 3], [6, 6]];
|
||||
|
||||
var plot = $.plot($('#flotLine3'), [
|
||||
{
|
||||
data: newCust2,
|
||||
label: 'New Customer',
|
||||
color: '#0B2A97'
|
||||
},
|
||||
{
|
||||
data: retCust2,
|
||||
label: 'Returning Customer',
|
||||
color: '#1EA7C5'
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: true,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotArea1 = function(){
|
||||
var newCust = [[0, 2], [1, 3], [2, 6], [3, 5], [4, 7], [5, 8], [6, 10]];
|
||||
var retCust = [[0, 1], [1, 2], [2, 5], [3, 3], [4, 5], [5, 6], [6, 9]];
|
||||
|
||||
var plot = $.plot($('#flotArea1'), [
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#0B2A97'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#1EA7C5'
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fill: 1
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotArea2 = function(){
|
||||
var newCust = [[0, 2], [1, 3], [2, 6], [3, 5], [4, 7], [5, 8], [6, 10]];
|
||||
var retCust = [[0, 1], [1, 2], [2, 5], [3, 3], [4, 5], [5, 6], [6, 9]];
|
||||
|
||||
var plot = $.plot($('#flotArea2'), [
|
||||
{
|
||||
data: newCust,
|
||||
label: 'New Customer',
|
||||
color: '#0B2A97'
|
||||
},
|
||||
{
|
||||
data: retCust,
|
||||
label: 'Returning Customer',
|
||||
color: '#1EA7C5'
|
||||
}
|
||||
],
|
||||
{
|
||||
series: {
|
||||
lines: {
|
||||
show: false
|
||||
},
|
||||
splines: {
|
||||
show: true,
|
||||
tension: 0.4,
|
||||
lineWidth: 0,
|
||||
fill: 1
|
||||
},
|
||||
shadowSize: 0
|
||||
},
|
||||
points: {
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
noColumns: 1,
|
||||
position: 'nw'
|
||||
},
|
||||
grid: {
|
||||
hoverable: true,
|
||||
clickable: true,
|
||||
borderColor: '#ddd',
|
||||
borderWidth: 0,
|
||||
labelMargin: 5,
|
||||
backgroundColor: 'transparent'
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 15,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
var flotLine4 = function(){
|
||||
var previousPoint = null;
|
||||
|
||||
$('#flotLine4, #flotLine4').bind('plothover', function (event, pos, item) {
|
||||
$('#x').text(pos.x.toFixed(2));
|
||||
$('#y').text(pos.y.toFixed(2));
|
||||
|
||||
if (item) {
|
||||
if (previousPoint != item.dataIndex) {
|
||||
previousPoint = item.dataIndex;
|
||||
|
||||
$('#tooltip').remove();
|
||||
var x = item.datapoint[0].toFixed(2),
|
||||
y = item.datapoint[1].toFixed(2);
|
||||
|
||||
showTooltip(item.pageX, item.pageY, item.series.label + ' of ' + x + ' = ' + y);
|
||||
}
|
||||
} else {
|
||||
|
||||
$('#tooltip').remove();
|
||||
previousPoint = null;
|
||||
}
|
||||
});
|
||||
$('#flotLine4, #flotLine4').bind('plotclick', function (event, pos, item) {
|
||||
if (item) {
|
||||
plot.highlight(item.series, item.datapoint);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function showTooltip(x, y, contents) {
|
||||
$('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
|
||||
position: 'absolute',
|
||||
display: 'none',
|
||||
top: y + 5,
|
||||
left: x + 5
|
||||
}).appendTo('body').fadeIn(200);
|
||||
}
|
||||
|
||||
var flotRealtime1 = function(){
|
||||
/*********** REAL TIME UPDATES **************/
|
||||
|
||||
var data = [], totalPoints = 50;
|
||||
|
||||
function getRandomData() {
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
data.push(y);
|
||||
}
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
|
||||
// Set up the control widget
|
||||
var updateInterval = 1000;
|
||||
|
||||
var plot4 = $.plot('#flotRealtime1', [getRandomData()], {
|
||||
colors: ['#0B2A97'],
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 1
|
||||
},
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
labelMargin: 5
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
update_plot4();
|
||||
function update_plot4() {
|
||||
plot4.setData([getRandomData()]);
|
||||
plot4.draw();
|
||||
setTimeout(update_plot4, updateInterval);
|
||||
}
|
||||
}
|
||||
var flotRealtime2 = function(){
|
||||
var data = [], totalPoints = 50;
|
||||
|
||||
function getRandomData() {
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
data.push(y);
|
||||
}
|
||||
var res = [];
|
||||
for (var i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// Set up the control widget
|
||||
var updateInterval = 1000;
|
||||
|
||||
var plot5 = $.plot('#flotRealtime2', [getRandomData()], {
|
||||
colors: ['#0B2A97'],
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fill: 0.9
|
||||
},
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 1,
|
||||
labelMargin: 5
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
update_plot5();
|
||||
function update_plot5() {
|
||||
plot5.setData([getRandomData()]);
|
||||
plot5.draw();
|
||||
setTimeout(update_plot5, updateInterval);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
flotBar1();
|
||||
flotBar2();
|
||||
flotLine1();
|
||||
flotLine2();
|
||||
flotLine3();
|
||||
flotArea1();
|
||||
flotArea2();
|
||||
flotLine4();
|
||||
flotRealtime1();
|
||||
flotRealtime2();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
dzChartlist.load();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
dzChartlist.resize();
|
||||
});
|
||||
|
||||
})(jQuery);
|
108
public/style/js/plugins-init/fullcalendar-init.js
Normal file
108
public/style/js/plugins-init/fullcalendar-init.js
Normal file
@ -0,0 +1,108 @@
|
||||
! function(e) {
|
||||
"use strict";
|
||||
var t = function() {
|
||||
this.$body = e("body"), this.$modal = e("#event-modal"), this.$event = "#external-events div.external-event", this.$calendar = e("#calendar"), this.$saveCategoryBtn = e(".save-category"), this.$categoryForm = e("#add-category form"), this.$extEvents = e("#external-events"), this.$calendarObj = null
|
||||
};
|
||||
t.prototype.onDrop = function(t, n) {
|
||||
var a = t.data("eventObject"),
|
||||
o = t.attr("data-class"),
|
||||
i = e.extend({}, a);
|
||||
i.start = n, o && (i.className = [o]), this.$calendar.fullCalendar("renderEvent", i, !0), e("#drop-remove").is(":checked") && t.remove()
|
||||
}, t.prototype.onEventClick = function(t, n, a) {
|
||||
var o = this,
|
||||
i = e("<form></form>");
|
||||
i.append("<label>Change event name</label>"), i.append("<div class='input-group'><input class='form-control' type=text value='" + t.title + "' /><span class='input-group-btn'><button type='submit' class='btn btn-success waves-effect waves-light'><i class='fa fa-check'></i> Save</button></span></div>"), o.$modal.modal({
|
||||
backdrop: "static"
|
||||
}), o.$modal.find(".delete-event").show().end().find(".save-event").hide().end().find(".modal-body").empty().prepend(i).end().find(".delete-event").unbind("click").on("click", function() {
|
||||
o.$calendarObj.fullCalendar("removeEvents", function(e) {
|
||||
return e._id == t._id
|
||||
}), o.$modal.modal("hide")
|
||||
}), o.$modal.find("form").on("submit", function() {
|
||||
return t.title = i.find("input[type=text]").val(), o.$calendarObj.fullCalendar("updateEvent", t), o.$modal.modal("hide"), !1
|
||||
})
|
||||
}, t.prototype.onSelect = function(t, n, a) {
|
||||
var o = this;
|
||||
o.$modal.modal({
|
||||
backdrop: "static"
|
||||
});
|
||||
var i = e("<form></form>");
|
||||
i.append("<div class='row'></div>"), i.find(".row").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Event Name</label><input class='form-control' placeholder='Insert Event Name' type='text' name='title'/></div></div>").append("<div class='col-md-6'><div class='form-group'><label class='control-label'>Category</label><select class='form-control' name='category'></select></div></div>").find("select[name='category']").append("<option value='bg-danger'>Danger</option>").append("<option value='bg-success'>Success</option>").append("<option value='bg-dark'>Dark</option>").append("<option value='bg-primary'>Primary</option>").append("<option value='bg-pink'>Pink</option>").append("<option value='bg-info'>Info</option>").append("<option value='bg-warning'>Warning</option></div></div>"), o.$modal.find(".delete-event").hide().end().find(".save-event").show().end().find(".modal-body").empty().prepend(i).end().find(".save-event").unbind("click").on("click", function() {
|
||||
i.submit()
|
||||
}), o.$modal.find("form").on("submit", function() {
|
||||
var e = i.find("input[name='title']").val(),
|
||||
a = (i.find("input[name='beginning']").val(), i.find("input[name='ending']").val(), i.find("select[name='category'] option:checked").val());
|
||||
return null !== e && 0 != e.length ? (o.$calendarObj.fullCalendar("renderEvent", {
|
||||
title: e,
|
||||
start: t,
|
||||
end: n,
|
||||
allDay: !1,
|
||||
className: a
|
||||
}, !0), o.$modal.modal("hide")) : alert("You have to give a title to your event"), !1
|
||||
}), o.$calendarObj.fullCalendar("unselect")
|
||||
}, t.prototype.enableDrag = function() {
|
||||
e(this.$event).each(function() {
|
||||
var t = {
|
||||
title: e.trim(e(this).text())
|
||||
};
|
||||
e(this).data("eventObject", t), e(this).draggable({
|
||||
zIndex: 999,
|
||||
revert: !0,
|
||||
revertDuration: 0
|
||||
})
|
||||
})
|
||||
}, t.prototype.init = function() {
|
||||
this.enableDrag();
|
||||
var t = new Date,
|
||||
n = (t.getDate(), t.getMonth(), t.getFullYear(), new Date(e.now())),
|
||||
a = [{
|
||||
title: "Chicken Burger",
|
||||
start: new Date(e.now() + 158e6),
|
||||
className: "bg-dark"
|
||||
}, {
|
||||
title: "Soft drinks",
|
||||
start: n,
|
||||
end: n,
|
||||
className: "bg-danger"
|
||||
}, {
|
||||
title: "Hot dog",
|
||||
start: new Date(e.now() + 338e6),
|
||||
className: "bg-primary"
|
||||
}],
|
||||
o = this;
|
||||
o.$calendarObj = o.$calendar.fullCalendar({
|
||||
slotDuration: "00:15:00",
|
||||
minTime: "08:00:00",
|
||||
maxTime: "19:00:00",
|
||||
defaultView: "month",
|
||||
handleWindowResize: !0,
|
||||
height: e(window).height() - 100,
|
||||
header: {
|
||||
left: "prev,next today",
|
||||
center: "title",
|
||||
right: "month,agendaWeek,agendaDay"
|
||||
},
|
||||
events: a,
|
||||
editable: !0,
|
||||
droppable: !0,
|
||||
eventLimit: !0,
|
||||
selectable: !0,
|
||||
drop: function(t) {
|
||||
o.onDrop(e(this), t)
|
||||
},
|
||||
select: function(e, t, n) {
|
||||
o.onSelect(e, t, n)
|
||||
},
|
||||
eventClick: function(e, t, n) {
|
||||
o.onEventClick(e, t, n)
|
||||
}
|
||||
}), this.$saveCategoryBtn.on("click", function() {
|
||||
var e = o.$categoryForm.find("input[name='category-name']").val(),
|
||||
t = o.$categoryForm.find("select[name='category-color']").val();
|
||||
null !== e && 0 != e.length && (o.$extEvents.append('<div class="external-event bg-' + t + '" data-class="bg-' + t + '" style="position: relative;"><i class="fa fa-move"></i>' + e + "</div>"), o.enableDrag())
|
||||
})
|
||||
}, e.CalendarApp = new t, e.CalendarApp.Constructor = t
|
||||
}(window.jQuery),
|
||||
function(e) {
|
||||
"use strict";
|
||||
e.CalendarApp.init()
|
||||
}(window.jQuery);
|
12
public/style/js/plugins-init/jquery-asColorPicker.init.js
Normal file
12
public/style/js/plugins-init/jquery-asColorPicker.init.js
Normal file
@ -0,0 +1,12 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// Colorpicker
|
||||
$(".as_colorpicker").asColorPicker();
|
||||
$(".complex-colorpicker").asColorPicker({
|
||||
mode: 'complex'
|
||||
});
|
||||
$(".gradient-colorpicker").asColorPicker({
|
||||
mode: 'gradient'
|
||||
});
|
||||
})(jQuery);
|
18
public/style/js/plugins-init/jquery-steps-init.js
vendored
Normal file
18
public/style/js/plugins-init/jquery-steps-init.js
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
var form = $("#step-form-horizontal");
|
||||
form.children('div').steps({
|
||||
headerTag: "h4",
|
||||
bodyTag: "section",
|
||||
transitionEffect: "slideLeft",
|
||||
autoFocus: true,
|
||||
transitionEffect: "slideLeft",
|
||||
onStepChanging: function (event, currentIndex, newIndex)
|
||||
{
|
||||
form.validate().settings.ignore = ":disabled,:hidden";
|
||||
return form.valid();
|
||||
}
|
||||
});
|
||||
|
||||
})(jQuery);
|
142
public/style/js/plugins-init/jquery.validate-init.js
Normal file
142
public/style/js/plugins-init/jquery.validate-init.js
Normal file
@ -0,0 +1,142 @@
|
||||
jQuery(".form-valide").validate({
|
||||
rules: {
|
||||
"val-username": {
|
||||
required: !0,
|
||||
minlength: 3
|
||||
},
|
||||
"val-email": {
|
||||
required: !0,
|
||||
email: !0
|
||||
},
|
||||
"val-password": {
|
||||
required: !0,
|
||||
minlength: 5
|
||||
},
|
||||
"val-confirm-password": {
|
||||
required: !0,
|
||||
equalTo: "#val-password"
|
||||
},
|
||||
"val-select2": {
|
||||
required: !0
|
||||
},
|
||||
"val-select2-multiple": {
|
||||
required: !0,
|
||||
minlength: 2
|
||||
},
|
||||
"val-suggestions": {
|
||||
required: !0,
|
||||
minlength: 5
|
||||
},
|
||||
"val-skill": {
|
||||
required: !0
|
||||
},
|
||||
"val-currency": {
|
||||
required: !0,
|
||||
currency: ["$", !0]
|
||||
},
|
||||
"val-website": {
|
||||
required: !0,
|
||||
url: !0
|
||||
},
|
||||
"val-phoneus": {
|
||||
required: !0,
|
||||
phoneUS: !0
|
||||
},
|
||||
"val-digits": {
|
||||
required: !0,
|
||||
digits: !0
|
||||
},
|
||||
"val-number": {
|
||||
required: !0,
|
||||
number: !0
|
||||
},
|
||||
"val-range": {
|
||||
required: !0,
|
||||
range: [1, 5]
|
||||
},
|
||||
"val-terms": {
|
||||
required: !0
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
"val-username": {
|
||||
required: "Please enter a username",
|
||||
minlength: "Your username must consist of at least 3 characters"
|
||||
},
|
||||
"val-email": "Please enter a valid email address",
|
||||
"val-password": {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long"
|
||||
},
|
||||
"val-confirm-password": {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long",
|
||||
equalTo: "Please enter the same password as above"
|
||||
},
|
||||
"val-select2": "Please select a value!",
|
||||
"val-select2-multiple": "Please select at least 2 values!",
|
||||
"val-suggestions": "What can we do to become better?",
|
||||
"val-skill": "Please select a skill!",
|
||||
"val-currency": "Please enter a price!",
|
||||
"val-website": "Please enter your website!",
|
||||
"val-phoneus": "Please enter a US phone!",
|
||||
"val-digits": "Please enter only digits!",
|
||||
"val-number": "Please enter a number!",
|
||||
"val-range": "Please enter a number between 1 and 5!",
|
||||
"val-terms": "You must agree to the service terms!"
|
||||
},
|
||||
|
||||
ignore: [],
|
||||
errorClass: "invalid-feedback animated fadeInUp",
|
||||
errorElement: "div",
|
||||
errorPlacement: function(e, a) {
|
||||
jQuery(a).parents(".form-group > div").append(e)
|
||||
},
|
||||
highlight: function(e) {
|
||||
jQuery(e).closest(".form-group").removeClass("is-invalid").addClass("is-invalid")
|
||||
},
|
||||
success: function(e) {
|
||||
jQuery(e).closest(".form-group").removeClass("is-invalid"), jQuery(e).remove()
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
jQuery(".form-valide-with-icon").validate({
|
||||
rules: {
|
||||
"val-username": {
|
||||
required: !0,
|
||||
minlength: 3
|
||||
},
|
||||
"val-password": {
|
||||
required: !0,
|
||||
minlength: 5
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
"val-username": {
|
||||
required: "Please enter a username",
|
||||
minlength: "Your username must consist of at least 3 characters"
|
||||
},
|
||||
"val-password": {
|
||||
required: "Please provide a password",
|
||||
minlength: "Your password must be at least 5 characters long"
|
||||
}
|
||||
},
|
||||
|
||||
ignore: [],
|
||||
errorClass: "invalid-feedback animated fadeInUp",
|
||||
errorElement: "div",
|
||||
errorPlacement: function(e, a) {
|
||||
jQuery(a).parents(".form-group > div").append(e)
|
||||
},
|
||||
highlight: function(e) {
|
||||
jQuery(e).closest(".form-group").removeClass("is-invalid").addClass("is-invalid")
|
||||
},
|
||||
success: function(e) {
|
||||
jQuery(e).closest(".form-group").removeClass("is-invalid").addClass("is-valid")
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
114
public/style/js/plugins-init/jqvmap-init.js
Normal file
114
public/style/js/plugins-init/jqvmap-init.js
Normal file
@ -0,0 +1,114 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzVectorMap = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var handleWorldMap = function(trigger = 'load'){
|
||||
var vmapSelector = $('#world-map');
|
||||
if(trigger == 'resize')
|
||||
{
|
||||
vmapSelector.empty();
|
||||
vmapSelector.removeAttr('style');
|
||||
}
|
||||
|
||||
vmapSelector.delay( 500 ).unbind().vectorMap({
|
||||
map: 'world_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgb(239, 242, 244)',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
color: 'rgb(239, 242, 244)',
|
||||
enableZoom: true,
|
||||
hoverColor: 'rgba(239, 242, 244 0.9)',
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: 'rgba(239, 242, 244 0.9)',
|
||||
selectedRegions: null,
|
||||
showTooltip: true,
|
||||
onRegionClick: function(element, code, region)
|
||||
{
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var handleUsaMap = function(trigger = 'load'){
|
||||
var vmapSelector = $('#usa');
|
||||
if(trigger == 'resize')
|
||||
{
|
||||
vmapSelector.empty();
|
||||
vmapSelector.removeAttr('style');
|
||||
}
|
||||
|
||||
vmapSelector.delay(500).unbind().vectorMap({
|
||||
map: 'usa_en',
|
||||
backgroundColor: 'transparent',
|
||||
borderColor: 'rgb(239, 242, 244)',
|
||||
borderOpacity: 0.25,
|
||||
borderWidth: 1,
|
||||
color: 'rgb(239, 242, 244)',
|
||||
enableZoom: true,
|
||||
hoverColor: 'rgba(239, 242, 244 0.9)',
|
||||
hoverOpacity: null,
|
||||
normalizeFunction: 'linear',
|
||||
scaleColors: ['#b6d6ff', '#005ace'],
|
||||
selectedColor: 'rgba(239, 242, 244 0.9)',
|
||||
selectedRegions: null,
|
||||
showTooltip: true,
|
||||
onRegionClick: function(element, code, region)
|
||||
{
|
||||
var message = 'You clicked "'
|
||||
+ region
|
||||
+ '" which has the code: '
|
||||
+ code.toUpperCase();
|
||||
|
||||
alert(message);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
handleWorldMap();
|
||||
handleUsaMap();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
handleWorldMap('resize');
|
||||
handleUsaMap('resize');
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
setTimeout(function(){
|
||||
dzVectorMap.load();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
setTimeout(function(){
|
||||
dzVectorMap.resize();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
23
public/style/js/plugins-init/material-date-picker-init.js
Normal file
23
public/style/js/plugins-init/material-date-picker-init.js
Normal file
@ -0,0 +1,23 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// MAterial Date picker
|
||||
$('#mdate').bootstrapMaterialDatePicker({
|
||||
weekStart: 0,
|
||||
time: false
|
||||
});
|
||||
$('#timepicker').bootstrapMaterialDatePicker({
|
||||
format: 'HH:mm',
|
||||
time: true,
|
||||
date: false
|
||||
});
|
||||
$('#date-format').bootstrapMaterialDatePicker({
|
||||
format: 'dddd DD MMMM YYYY - HH:mm'
|
||||
});
|
||||
|
||||
$('#min-date').bootstrapMaterialDatePicker({
|
||||
format: 'DD/MM/YYYY HH:mm',
|
||||
minDate: new Date()
|
||||
});
|
||||
|
||||
})(jQuery);
|
457
public/style/js/plugins-init/morris-init.js
Normal file
457
public/style/js/plugins-init/morris-init.js
Normal file
@ -0,0 +1,457 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
var dzMorris = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var setChartWidth = function(){
|
||||
if(screenWidth <= 768)
|
||||
{
|
||||
var chartBlockWidth = 0;
|
||||
chartBlockWidth = (screenWidth < 300 )?screenWidth:300;
|
||||
jQuery('.morris_chart_height').css('min-width',chartBlockWidth - 31);
|
||||
}
|
||||
}
|
||||
|
||||
var donutChart = function(){
|
||||
Morris.Donut({
|
||||
element: 'morris_donught',
|
||||
data: [{
|
||||
label: "\xa0 \xa0 Download Sales \xa0 \xa0",
|
||||
value: 12,
|
||||
|
||||
}, {
|
||||
label: "\xa0 \xa0 In-Store Sales \xa0 \xa0",
|
||||
value: 30
|
||||
}, {
|
||||
label: "\xa0 \xa0 Mail-Order Sales \xa0 \xa0",
|
||||
value: 20
|
||||
}],
|
||||
resize: true,
|
||||
redraw: true,
|
||||
colors: ['#1EA7C5', 'rgb(11, 42, 151)', '#1bd084'],
|
||||
//responsive:true,
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
var lineChart = function(){
|
||||
//line chart
|
||||
let line = new Morris.Line({
|
||||
element: 'morris_line',
|
||||
resize: true,
|
||||
data: [{
|
||||
y: '2011 Q1',
|
||||
item1: 2666
|
||||
},
|
||||
{
|
||||
y: '2011 Q2',
|
||||
item1: 2778
|
||||
},
|
||||
{
|
||||
y: '2011 Q3',
|
||||
item1: 4912
|
||||
},
|
||||
{
|
||||
y: '2011 Q4',
|
||||
item1: 3767
|
||||
},
|
||||
{
|
||||
y: '2012 Q1',
|
||||
item1: 6810
|
||||
},
|
||||
{
|
||||
y: '2012 Q2',
|
||||
item1: 5670
|
||||
},
|
||||
{
|
||||
y: '2012 Q3',
|
||||
item1: 4820
|
||||
},
|
||||
{
|
||||
y: '2012 Q4',
|
||||
item1: 15073
|
||||
},
|
||||
{
|
||||
y: '2013 Q1',
|
||||
item1: 10687
|
||||
},
|
||||
{
|
||||
y: '2013 Q2',
|
||||
item1: 8432
|
||||
}
|
||||
],
|
||||
xkey: 'y',
|
||||
ykeys: ['item1'],
|
||||
labels: ['Item 1'],
|
||||
gridLineColor: 'transparent',
|
||||
lineColors: ['rgb(11, 42, 151)'], //here
|
||||
lineWidth: 1,
|
||||
hideHover: 'auto',
|
||||
pointSize: 0,
|
||||
axes: false
|
||||
});
|
||||
}
|
||||
|
||||
var lineChart2 = function(){
|
||||
//Area chart
|
||||
Morris.Area({
|
||||
element: 'line_chart_2',
|
||||
data: [{
|
||||
period: '2001',
|
||||
smartphone: 0,
|
||||
windows: 0,
|
||||
mac: 0
|
||||
}, {
|
||||
period: '2002',
|
||||
smartphone: 90,
|
||||
windows: 60,
|
||||
mac: 25
|
||||
}, {
|
||||
period: '2003',
|
||||
smartphone: 40,
|
||||
windows: 80,
|
||||
mac: 35
|
||||
}, {
|
||||
period: '2004',
|
||||
smartphone: 30,
|
||||
windows: 47,
|
||||
mac: 17
|
||||
}, {
|
||||
period: '2005',
|
||||
smartphone: 150,
|
||||
windows: 40,
|
||||
mac: 120
|
||||
}, {
|
||||
period: '2006',
|
||||
smartphone: 25,
|
||||
windows: 80,
|
||||
mac: 40
|
||||
}, {
|
||||
period: '2007',
|
||||
smartphone: 10,
|
||||
windows: 10,
|
||||
mac: 10
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['smartphone', 'windows', 'mac'],
|
||||
labels: ['Phone', 'Windows', 'Mac'],
|
||||
pointSize: 3,
|
||||
fillOpacity: 0,
|
||||
pointStrokeColors: ['#ff6746', '#1bd084', '#1EA7C5'],
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: 'transparent',
|
||||
lineWidth: 3,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['rgb(11, 42, 151)', 'rgb(27, 208, 132)', '#1EA7C5'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
var barChart = function(){
|
||||
if(jQuery('#morris_bar').length > 0)
|
||||
{
|
||||
//bar chart
|
||||
Morris.Bar({
|
||||
element: 'morris_bar',
|
||||
data: [{
|
||||
y: '2006',
|
||||
a: 100,
|
||||
b: 90,
|
||||
c: 60
|
||||
}, {
|
||||
y: '2007',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2008',
|
||||
a: 50,
|
||||
b: 40,
|
||||
c: 30
|
||||
}, {
|
||||
y: '2009',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2010',
|
||||
a: 50,
|
||||
b: 40,
|
||||
c: 30
|
||||
}, {
|
||||
y: '2011',
|
||||
a: 75,
|
||||
b: 65,
|
||||
c: 40
|
||||
}, {
|
||||
y: '2012',
|
||||
a: 100,
|
||||
b: 90,
|
||||
c: 40
|
||||
}],
|
||||
xkey: 'y',
|
||||
ykeys: ['a', 'b', 'c'],
|
||||
labels: ['A', 'B', 'C'],
|
||||
barColors: ['#0B2A97', '#1bd084', '#ff9f00'],
|
||||
hideHover: 'auto',
|
||||
gridLineColor: 'transparent',
|
||||
resize: true,
|
||||
barSizeRatio: 0.25,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var barStalkChart = function(){
|
||||
//bar chart
|
||||
Morris.Bar({
|
||||
element: 'morris_bar_stalked',
|
||||
data: [{
|
||||
y: 'S',
|
||||
a: 66,
|
||||
b: 34
|
||||
}, {
|
||||
y: 'M',
|
||||
a: 75,
|
||||
b: 25
|
||||
}, {
|
||||
y: 'T',
|
||||
a: 50,
|
||||
b: 50
|
||||
}, {
|
||||
y: 'W',
|
||||
a: 75,
|
||||
b: 25
|
||||
}, {
|
||||
y: 'T',
|
||||
a: 50,
|
||||
b: 50
|
||||
}, {
|
||||
y: 'F',
|
||||
a: 16,
|
||||
b: 84
|
||||
}, {
|
||||
y: 'S',
|
||||
a: 70,
|
||||
b: 30
|
||||
}, {
|
||||
y: 'S',
|
||||
a: 30,
|
||||
b: 70
|
||||
}, {
|
||||
y: 'M',
|
||||
a: 40,
|
||||
b: 60
|
||||
}, {
|
||||
y: 'T',
|
||||
a: 29,
|
||||
b: 71
|
||||
}, {
|
||||
y: 'W',
|
||||
a: 44,
|
||||
b: 56
|
||||
}, {
|
||||
y: 'T',
|
||||
a: 30,
|
||||
b: 70
|
||||
}, {
|
||||
y: 'F',
|
||||
a: 60,
|
||||
b: 40
|
||||
}, {
|
||||
y: 'G',
|
||||
a: 40,
|
||||
b: 60
|
||||
}, {
|
||||
y: 'S',
|
||||
a: 46,
|
||||
b: 54
|
||||
}],
|
||||
xkey: 'y',
|
||||
ykeys: ['a', 'b'],
|
||||
labels: ['A', 'B'],
|
||||
barColors: ['#0B2A97', "#F1F3F7"],
|
||||
hideHover: 'auto',
|
||||
gridLineColor: 'transparent',
|
||||
resize: true,
|
||||
barSizeRatio: 0.25,
|
||||
stacked: true,
|
||||
behaveLikeLine: true,
|
||||
//redraw: true
|
||||
|
||||
// barRadius: [6, 6, 0, 0]
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
var areaChart = function(){
|
||||
//area chart
|
||||
Morris.Area({
|
||||
element: 'morris_area',
|
||||
data: [{
|
||||
period: '2001',
|
||||
smartphone: 0,
|
||||
windows: 0,
|
||||
mac: 0
|
||||
}, {
|
||||
period: '2002',
|
||||
smartphone: 90,
|
||||
windows: 60,
|
||||
mac: 25
|
||||
}, {
|
||||
period: '2003',
|
||||
smartphone: 40,
|
||||
windows: 80,
|
||||
mac: 35
|
||||
}, {
|
||||
period: '2004',
|
||||
smartphone: 30,
|
||||
windows: 47,
|
||||
mac: 17
|
||||
}, {
|
||||
period: '2005',
|
||||
smartphone: 150,
|
||||
windows: 40,
|
||||
mac: 120
|
||||
}, {
|
||||
period: '2006',
|
||||
smartphone: 25,
|
||||
windows: 80,
|
||||
mac: 40
|
||||
}, {
|
||||
period: '2007',
|
||||
smartphone: 10,
|
||||
windows: 10,
|
||||
mac: 10
|
||||
}
|
||||
|
||||
|
||||
],
|
||||
lineColors: ['#1EA7C5', 'rgb(16, 202, 147)', 'rgb(11, 42, 151)'],
|
||||
xkey: 'period',
|
||||
ykeys: ['smartphone', 'windows', 'mac'],
|
||||
labels: ['Phone', 'Windows', 'Mac'],
|
||||
pointSize: 0,
|
||||
lineWidth: 0,
|
||||
resize: true,
|
||||
fillOpacity: 0.95,
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: 'transparent',
|
||||
hideHover: 'auto'
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
var areaChart2 = function(){
|
||||
if(jQuery('#morris_area_2').length > 0)
|
||||
{
|
||||
//area chart
|
||||
Morris.Area({
|
||||
element: 'morris_area_2',
|
||||
data: [{
|
||||
period: '2010',
|
||||
SiteA: 0,
|
||||
SiteB: 0,
|
||||
|
||||
}, {
|
||||
period: '2011',
|
||||
SiteA: 130,
|
||||
SiteB: 100,
|
||||
|
||||
}, {
|
||||
period: '2012',
|
||||
SiteA: 80,
|
||||
SiteB: 60,
|
||||
|
||||
}, {
|
||||
period: '2013',
|
||||
SiteA: 70,
|
||||
SiteB: 200,
|
||||
|
||||
}, {
|
||||
period: '2014',
|
||||
SiteA: 180,
|
||||
SiteB: 150,
|
||||
|
||||
}, {
|
||||
period: '2015',
|
||||
SiteA: 105,
|
||||
SiteB: 90,
|
||||
|
||||
},
|
||||
{
|
||||
period: '2016',
|
||||
SiteA: 250,
|
||||
SiteB: 150,
|
||||
|
||||
}
|
||||
],
|
||||
xkey: 'period',
|
||||
ykeys: ['SiteA', 'SiteB'],
|
||||
labels: ['Site A', 'Site B'],
|
||||
pointSize: 0,
|
||||
fillOpacity: 0.6,
|
||||
pointStrokeColors: ['#b4becb', '#00A2FF'], //here
|
||||
behaveLikeLine: true,
|
||||
gridLineColor: 'transparent',
|
||||
lineWidth: 0,
|
||||
smooth: false,
|
||||
hideHover: 'auto',
|
||||
lineColors: ['rgb(0, 171, 197)', 'rgb(0, 0, 128)'],
|
||||
resize: true
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
setChartWidth();
|
||||
donutChart();
|
||||
lineChart();
|
||||
lineChart2();
|
||||
barChart();
|
||||
barStalkChart();
|
||||
areaChart();
|
||||
areaChart2();
|
||||
},
|
||||
|
||||
|
||||
resize:function(){
|
||||
screenWidth = $(window).width();
|
||||
setChartWidth();
|
||||
donutChart();
|
||||
lineChart();
|
||||
lineChart2();
|
||||
barChart();
|
||||
barStalkChart();
|
||||
areaChart();
|
||||
areaChart2();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
dzMorris.init();
|
||||
//dzMorris.resize();
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
//dzMorris.init();
|
||||
});
|
||||
|
||||
jQuery( window ).resize(function() {
|
||||
//dzMorris.resize();
|
||||
//dzMorris.init();
|
||||
});
|
||||
|
||||
})(jQuery);
|
26
public/style/js/plugins-init/nestable-init.js
Normal file
26
public/style/js/plugins-init/nestable-init.js
Normal file
@ -0,0 +1,26 @@
|
||||
(function ($) {
|
||||
"use strict"
|
||||
|
||||
|
||||
/*******************
|
||||
Nestable
|
||||
*******************/
|
||||
|
||||
var e = function (e) {
|
||||
var t = e.length ? e : $(e.target),
|
||||
a = t.data("output");
|
||||
window.JSON ? a.val(window.JSON.stringify(t.nestable("serialize"))) : a.val("JSON browser support required for this demo.")
|
||||
};
|
||||
$("#nestable").nestable({
|
||||
group: 1
|
||||
}).on("change", e),
|
||||
$("#nestable2").nestable({
|
||||
group: 1
|
||||
}).on("change", e), e($("#nestable").data("output", $("#nestable-output"))), e($("#nestable2").data("output", $("#nestable2-output"))), $("#nestable-menu").on("click", function (e) {
|
||||
var t = $(e.target).data("action");
|
||||
"expand-all" === t && $(".dd").nestable("expandAll"), "collapse-all" === t && $(".dd").nestable("collapseAll")
|
||||
}), $("#nestable3").nestable();
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
1163
public/style/js/plugins-init/nouislider-init.js
Normal file
1163
public/style/js/plugins-init/nouislider-init.js
Normal file
@ -0,0 +1,1163 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
//basic slider
|
||||
let basicSlide = document.getElementById('basic-slider');
|
||||
noUiSlider.create(basicSlide, {
|
||||
start: [20, 80],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
//basic slider ^
|
||||
|
||||
|
||||
//keyboard slider
|
||||
let keyboardslider = document.getElementById('keyboardslider');
|
||||
noUiSlider.create(keyboardslider, {
|
||||
start: 10,
|
||||
step: 10,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var handle = keyboardslider.querySelector('.noUi-handle');
|
||||
handle.addEventListener('keydown', function (e) {
|
||||
|
||||
var value = Number(keyboardslider.noUiSlider.get());
|
||||
|
||||
if (e.which === 37) {
|
||||
keyboardslider.noUiSlider.set(value - 10);
|
||||
}
|
||||
|
||||
console.log(e)
|
||||
console.log(e.which)
|
||||
|
||||
if (e.which === 39) {
|
||||
keyboardslider.noUiSlider.set(value + 10);
|
||||
}
|
||||
});
|
||||
//keyboard slider ^
|
||||
|
||||
|
||||
//working with date
|
||||
// Create a new date from a string, return as a timestamp.
|
||||
function timestamp(str) {
|
||||
return new Date(str).getTime();
|
||||
}
|
||||
|
||||
var dateSlider = document.getElementById('slider-date');
|
||||
|
||||
noUiSlider.create(dateSlider, {
|
||||
// Create two timestamps to define a range.
|
||||
range: {
|
||||
min: timestamp('2010'),
|
||||
max: timestamp('2016')
|
||||
},
|
||||
|
||||
// Steps of one week
|
||||
step: 7 * 24 * 60 * 60 * 1000,
|
||||
|
||||
// Two more timestamps indicate the handle starting positions.
|
||||
start: [timestamp('2011'), timestamp('2015')],
|
||||
|
||||
// No decimals
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
var dateValues = [
|
||||
document.getElementById('event-start'),
|
||||
document.getElementById('event-end')
|
||||
];
|
||||
|
||||
// Create a list of day and month names.
|
||||
var weekdays = [
|
||||
"Sunday", "Monday", "Tuesday",
|
||||
"Wednesday", "Thursday", "Friday",
|
||||
"Saturday"
|
||||
];
|
||||
|
||||
var months = [
|
||||
"January", "February", "March",
|
||||
"April", "May", "June", "July",
|
||||
"August", "September", "October",
|
||||
"November", "December"
|
||||
];
|
||||
|
||||
|
||||
|
||||
dateSlider.noUiSlider.on('update', function (values, handle) {
|
||||
dateValues[handle].innerHTML = formatDate(new Date(+values[handle]));
|
||||
});
|
||||
|
||||
// Append a suffix to dates.
|
||||
// Example: 23 => 23rd, 1 => 1st.
|
||||
function nth(d) {
|
||||
if (d > 3 && d < 21) return 'th';
|
||||
switch (d % 10) {
|
||||
case 1:
|
||||
return "st";
|
||||
case 2:
|
||||
return "nd";
|
||||
case 3:
|
||||
return "rd";
|
||||
default:
|
||||
return "th";
|
||||
}
|
||||
}
|
||||
|
||||
// Create a string representation of the date.
|
||||
function formatDate(date) {
|
||||
return weekdays[date.getDay()] + ", " +
|
||||
date.getDate() + nth(date.getDate()) + " " +
|
||||
months[date.getMonth()] + " " +
|
||||
date.getFullYear();
|
||||
}
|
||||
//working with date ^
|
||||
|
||||
|
||||
//html5 input element
|
||||
var select = document.getElementById('input-select');
|
||||
// Append the option elements
|
||||
for (var i = -20; i <= 40; i++) {
|
||||
|
||||
var option = document.createElement("option");
|
||||
option.text = i;
|
||||
option.value = i;
|
||||
|
||||
select.appendChild(option);
|
||||
}
|
||||
|
||||
var html5Slider = document.getElementById('html5');
|
||||
noUiSlider.create(html5Slider, {
|
||||
start: [10, 30],
|
||||
connect: true,
|
||||
range: {
|
||||
'min': -20,
|
||||
'max': 40
|
||||
}
|
||||
});
|
||||
|
||||
var inputNumber = document.getElementById('input-number');
|
||||
html5Slider.noUiSlider.on('update', function (values, handle) {
|
||||
|
||||
var value = values[handle];
|
||||
|
||||
if (handle) {
|
||||
inputNumber.value = value;
|
||||
} else {
|
||||
select.value = Math.round(value);
|
||||
}
|
||||
});
|
||||
|
||||
select.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([this.value, null]);
|
||||
});
|
||||
|
||||
inputNumber.addEventListener('change', function () {
|
||||
html5Slider.noUiSlider.set([null, this.value]);
|
||||
});
|
||||
//html5 input element ^
|
||||
|
||||
|
||||
//non-linear slider
|
||||
var nonLinearSlider = document.getElementById('nonlinear');
|
||||
noUiSlider.create(nonLinearSlider, {
|
||||
connect: true,
|
||||
behaviour: 'tap',
|
||||
start: [500, 4000],
|
||||
range: {
|
||||
// Starting at 500, step the value by 500,
|
||||
// until 4000 is reached. From there, step by 1000.
|
||||
'min': [0],
|
||||
'10%': [500, 500],
|
||||
'50%': [4000, 1000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
var nodes = [
|
||||
document.getElementById('lower-value'), // 0
|
||||
document.getElementById('upper-value') // 1
|
||||
];
|
||||
|
||||
// Display the slider value and how far the handle moved
|
||||
// from the left edge of the slider.
|
||||
nonLinearSlider.noUiSlider.on('update', function (values, handle, unencoded, isTap, positions) {
|
||||
nodes[handle].innerHTML = values[handle] + ', ' + positions[handle].toFixed(2) + '%';
|
||||
});
|
||||
//non-linear slider ^
|
||||
|
||||
|
||||
//locking sliders together
|
||||
var lockedState = false;
|
||||
var lockedSlider = false;
|
||||
var lockedValues = [60, 80];
|
||||
|
||||
var slider1 = document.getElementById('slider1');
|
||||
var slider2 = document.getElementById('slider2');
|
||||
|
||||
var lockButton = document.getElementById('lockbutton');
|
||||
var slider1Value = document.getElementById('slider1-span');
|
||||
var slider2Value = document.getElementById('slider2-span');
|
||||
|
||||
// When the button is clicked, the locked state is inverted.
|
||||
lockButton.addEventListener('click', function () {
|
||||
lockedState = !lockedState;
|
||||
this.textContent = lockedState ? 'unlock' : 'lock';
|
||||
});
|
||||
|
||||
function crossUpdate(value, slider) {
|
||||
|
||||
// If the sliders aren't interlocked, don't
|
||||
// cross-update.
|
||||
if (!lockedState) return;
|
||||
|
||||
// Select whether to increase or decrease
|
||||
// the other slider value.
|
||||
var a = slider1 === slider ? 0 : 1;
|
||||
|
||||
// Invert a
|
||||
var b = a ? 0 : 1;
|
||||
|
||||
// Offset the slider value.
|
||||
value -= lockedValues[b] - lockedValues[a];
|
||||
|
||||
// Set the value
|
||||
slider.noUiSlider.set(value);
|
||||
}
|
||||
|
||||
noUiSlider.create(slider1, {
|
||||
start: 60,
|
||||
|
||||
// Disable animation on value-setting,
|
||||
// so the sliders respond immediately.
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
noUiSlider.create(slider2, {
|
||||
start: 80,
|
||||
animate: false,
|
||||
range: {
|
||||
min: 50,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
slider1.noUiSlider.on('update', function (values, handle) {
|
||||
slider1Value.innerHTML = values[handle];
|
||||
});
|
||||
|
||||
slider2.noUiSlider.on('update', function (values, handle) {
|
||||
slider2Value.innerHTML = values[handle];
|
||||
});
|
||||
|
||||
function setLockedValues() {
|
||||
lockedValues = [
|
||||
Number(slider1.noUiSlider.get()),
|
||||
Number(slider2.noUiSlider.get())
|
||||
];
|
||||
}
|
||||
|
||||
slider1.noUiSlider.on('change', setLockedValues);
|
||||
slider2.noUiSlider.on('change', setLockedValues);
|
||||
|
||||
slider1.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider2);
|
||||
});
|
||||
|
||||
slider2.noUiSlider.on('slide', function (values, handle) {
|
||||
crossUpdate(values[handle], slider1);
|
||||
});
|
||||
//locking sliders together ^
|
||||
|
||||
|
||||
//Moving the slider by clicking pips
|
||||
var pipsSlider = document.getElementById('slider-pips');
|
||||
noUiSlider.create(pipsSlider, {
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
start: [50],
|
||||
pips: {mode: 'count', values: 5}
|
||||
});
|
||||
|
||||
var pips = pipsSlider.querySelectorAll('.noUi-value');
|
||||
function clickOnPip() {
|
||||
var value = Number(this.getAttribute('data-value'));
|
||||
pipsSlider.noUiSlider.set(value);
|
||||
}
|
||||
|
||||
for (var i = 0; i < pips.length; i++) {
|
||||
|
||||
// For this example. Do this in CSS!
|
||||
pips[i].style.cursor = 'pointer';
|
||||
pips[i].addEventListener('click', clickOnPip);
|
||||
}
|
||||
//Moving the slider by clicking pips ^
|
||||
|
||||
|
||||
//Colored Connect Elements
|
||||
var slider = document.getElementById('slider-color');
|
||||
noUiSlider.create(slider, {
|
||||
start: [4000, 8000, 12000, 16000],
|
||||
connect: [false, true, true, true, true],
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [20000]
|
||||
}
|
||||
});
|
||||
|
||||
var connect = slider.querySelectorAll('.noUi-connect');
|
||||
var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
|
||||
|
||||
for (var i = 0; i < connect.length; i++) {
|
||||
connect[i].classList.add(classes[i]);
|
||||
}
|
||||
//Colored Connect Elements ^
|
||||
|
||||
|
||||
//keypress slider
|
||||
var keypressSlider = document.getElementById('keypress');
|
||||
var input0 = document.getElementById('input-with-keypress-0');
|
||||
var input1 = document.getElementById('input-with-keypress-1');
|
||||
var inputs = [input0, input1];
|
||||
|
||||
noUiSlider.create(keypressSlider, {
|
||||
start: [20, 80],
|
||||
connect: true,
|
||||
tooltips: [true, wNumb({decimals: 1})],
|
||||
range: {
|
||||
'min': [0],
|
||||
'10%': [10, 10],
|
||||
'50%': [80, 50],
|
||||
'80%': 150,
|
||||
'max': 200
|
||||
}
|
||||
});
|
||||
|
||||
keypressSlider.noUiSlider.on('update', function (values, handle) {
|
||||
inputs[handle].value = values[handle];
|
||||
});
|
||||
|
||||
// Listen to keydown events on the input field.
|
||||
inputs.forEach(function (input, handle) {
|
||||
|
||||
input.addEventListener('change', function () {
|
||||
keypressSlider.noUiSlider.setHandle(handle, this.value);
|
||||
});
|
||||
|
||||
input.addEventListener('keydown', function (e) {
|
||||
|
||||
var values = keypressSlider.noUiSlider.get();
|
||||
var value = Number(values[handle]);
|
||||
|
||||
// [[handle0_down, handle0_up], [handle1_down, handle1_up]]
|
||||
var steps = keypressSlider.noUiSlider.steps();
|
||||
|
||||
// [down, up]
|
||||
var step = steps[handle];
|
||||
|
||||
var position;
|
||||
|
||||
// 13 is enter,
|
||||
// 38 is key up,
|
||||
// 40 is key down.
|
||||
switch (e.which) {
|
||||
|
||||
case 13:
|
||||
keypressSlider.noUiSlider.setHandle(handle, this.value);
|
||||
break;
|
||||
|
||||
case 38:
|
||||
|
||||
// Get step to go increase slider value (up)
|
||||
position = step[1];
|
||||
|
||||
// false = no step is set
|
||||
if (position === false) {
|
||||
position = 1;
|
||||
}
|
||||
|
||||
// null = edge of slider
|
||||
if (position !== null) {
|
||||
keypressSlider.noUiSlider.setHandle(handle, value + position);
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 40:
|
||||
|
||||
position = step[0];
|
||||
|
||||
if (position === false) {
|
||||
position = 1;
|
||||
}
|
||||
|
||||
if (position !== null) {
|
||||
keypressSlider.noUiSlider.setHandle(handle, value - position);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
//keypress slider ^
|
||||
|
||||
|
||||
//skipstep slider
|
||||
var skipSlider = document.getElementById('skipstep');
|
||||
noUiSlider.create(skipSlider, {
|
||||
range: {
|
||||
'min': 0,
|
||||
'10%': 10,
|
||||
'20%': 20,
|
||||
'30%': 30,
|
||||
// Nope, 40 is no fun.
|
||||
'50%': 50,
|
||||
'60%': 60,
|
||||
'70%': 70,
|
||||
// I never liked 80.
|
||||
'90%': 90,
|
||||
'max': 100
|
||||
},
|
||||
snap: true,
|
||||
start: [20, 90]
|
||||
});
|
||||
|
||||
var skipValues = [
|
||||
document.getElementById('skip-value-lower'),
|
||||
document.getElementById('skip-value-upper')
|
||||
];
|
||||
|
||||
skipSlider.noUiSlider.on('update', function (values, handle) {
|
||||
skipValues[handle].innerHTML = values[handle];
|
||||
});
|
||||
//skipstep slider ^
|
||||
|
||||
|
||||
//Using the slider with huge numbers
|
||||
var bigValueSlider = document.getElementById('slider-huge');
|
||||
var bigValueSpan = document.getElementById('huge-value');
|
||||
|
||||
noUiSlider.create(bigValueSlider, {
|
||||
start: 0,
|
||||
step: 1,
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
}),
|
||||
range: {
|
||||
min: 0,
|
||||
max: 13
|
||||
}
|
||||
});
|
||||
|
||||
// Note how these are 'string' values, not numbers.
|
||||
var range = [
|
||||
'0', '2097152', '4194304',
|
||||
'8388608', '16777216', '33554432',
|
||||
'67108864', '134217728', '268435456',
|
||||
'536870912', '1073741824',
|
||||
'2147483648', '4294967296',
|
||||
'8589934592'
|
||||
];
|
||||
|
||||
bigValueSlider.noUiSlider.on('update', function (values, handle) {
|
||||
bigValueSpan.innerHTML = range[values[handle]];
|
||||
});
|
||||
//Using the slider with huge numbers ^
|
||||
|
||||
|
||||
//creating a toggle
|
||||
var toggleSlider = document.getElementById('slider-toggle');
|
||||
noUiSlider.create(toggleSlider, {
|
||||
orientation: "vertical",
|
||||
start: 0,
|
||||
range: {
|
||||
'min': [0, 1],
|
||||
'max': 1
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
toggleSlider.noUiSlider.on('update', function (values, handle) {
|
||||
if (values[handle] === '1') {
|
||||
toggleSlider.classList.add('off');
|
||||
} else {
|
||||
toggleSlider.classList.remove('off');
|
||||
}
|
||||
});
|
||||
//creating a toggle ^
|
||||
|
||||
|
||||
//soft limits
|
||||
var softSlider = document.getElementById('soft');
|
||||
noUiSlider.create(softSlider, {
|
||||
start: 50,
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
},
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [20, 80],
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
|
||||
softSlider.noUiSlider.on('change', function (values, handle) {
|
||||
if (values[handle] < 20) {
|
||||
softSlider.noUiSlider.set(20);
|
||||
} else if (values[handle] > 80) {
|
||||
softSlider.noUiSlider.set(80);
|
||||
}
|
||||
});
|
||||
//soft limits ^
|
||||
|
||||
|
||||
//color picker
|
||||
var resultElement = document.getElementById('result');
|
||||
var sliders = document.getElementsByClassName('sliders');
|
||||
var colors = [0, 0, 0];
|
||||
|
||||
[].slice.call(sliders).forEach(function (slider, index) {
|
||||
|
||||
noUiSlider.create(slider, {
|
||||
start: 127,
|
||||
connect: [true, false],
|
||||
orientation: "vertical",
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 255
|
||||
},
|
||||
format: wNumb({
|
||||
decimals: 0
|
||||
})
|
||||
});
|
||||
|
||||
// Bind the color changing function to the update event.
|
||||
slider.noUiSlider.on('update', function () {
|
||||
|
||||
colors[index] = slider.noUiSlider.get();
|
||||
|
||||
var color = 'rgb(' + colors.join(',') + ')';
|
||||
|
||||
resultElement.style.background = color;
|
||||
resultElement.style.color = color;
|
||||
});
|
||||
});
|
||||
//color picker ^
|
||||
|
||||
|
||||
//stepping and snapping the values
|
||||
var stepSlider = document.getElementById('slider-step');
|
||||
noUiSlider.create(stepSlider, {
|
||||
start: [4000],
|
||||
step: 1000,
|
||||
range: {
|
||||
'min': [2000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
var stepSliderValueElement = document.getElementById('slider-step-value');
|
||||
stepSlider.noUiSlider.on('update', function (values, handle) {
|
||||
stepSliderValueElement.innerHTML = values[handle];
|
||||
});
|
||||
//stepping and snapping the values ^
|
||||
|
||||
|
||||
//Stepping in non-linear sliders
|
||||
var nonLinearStepSlider = document.getElementById('slider-non-linear-step');
|
||||
noUiSlider.create(nonLinearStepSlider, {
|
||||
start: [500, 4000],
|
||||
range: {
|
||||
'min': [0],
|
||||
'10%': [500, 500],
|
||||
'50%': [4000, 1000],
|
||||
'max': [10000]
|
||||
}
|
||||
});
|
||||
|
||||
var nonLinearStepSliderValueElement = document.getElementById('slider-non-linear-step-value');
|
||||
nonLinearStepSlider.noUiSlider.on('update', function (values, handle) {
|
||||
nonLinearStepSliderValueElement.innerHTML = values[handle];
|
||||
});
|
||||
//Stepping in non-linear sliders ^
|
||||
|
||||
|
||||
//Snapping between steps
|
||||
var snapSlider = document.getElementById('slider-snap');
|
||||
noUiSlider.create(snapSlider, {
|
||||
start: [0, 500],
|
||||
snap: true,
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'10%': 50,
|
||||
'20%': 100,
|
||||
'30%': 150,
|
||||
'40%': 500,
|
||||
'50%': 800,
|
||||
'max': 1000
|
||||
}
|
||||
});
|
||||
|
||||
var snapValues = [
|
||||
document.getElementById('slider-snap-value-lower'),
|
||||
document.getElementById('slider-snap-value-upper')
|
||||
];
|
||||
|
||||
snapSlider.noUiSlider.on('update', function (values, handle) {
|
||||
snapValues[handle].innerHTML = values[handle];
|
||||
});
|
||||
//Snapping between steps ^
|
||||
|
||||
|
||||
//get and set slider values
|
||||
var slider = document.getElementById('slider');
|
||||
noUiSlider.create(slider, {
|
||||
start: [80],
|
||||
range: {
|
||||
'min': [0],
|
||||
'max': [100]
|
||||
}
|
||||
});
|
||||
|
||||
// Set the slider value to 20
|
||||
document.getElementById('write-button').addEventListener('click', function () {
|
||||
slider.noUiSlider.set(20);
|
||||
});
|
||||
|
||||
// Read the slider value.
|
||||
document.getElementById('read-button').addEventListener('click', function () {
|
||||
alert(slider.noUiSlider.get());
|
||||
});
|
||||
//get and set slider values ^
|
||||
|
||||
|
||||
//Number formatting
|
||||
var sliderFormat = document.getElementById('slider-format');
|
||||
noUiSlider.create(sliderFormat, {
|
||||
start: [20000],
|
||||
step: 1000,
|
||||
range: {
|
||||
'min': [20000],
|
||||
'max': [80000]
|
||||
},
|
||||
ariaFormat: wNumb({
|
||||
decimals: 3
|
||||
}),
|
||||
format: wNumb({
|
||||
decimals: 3,
|
||||
thousand: '.',
|
||||
suffix: ' (US $)'
|
||||
})
|
||||
});
|
||||
|
||||
var inputFormat = document.getElementById('input-format');
|
||||
sliderFormat.noUiSlider.on('update', function (values, handle) {
|
||||
inputFormat.value = values[handle];
|
||||
});
|
||||
|
||||
inputFormat.addEventListener('change', function () {
|
||||
sliderFormat.noUiSlider.set(this.value);
|
||||
});
|
||||
//Number formatting ^
|
||||
|
||||
|
||||
//slider margin
|
||||
var marginSlider = document.getElementById('slider-margin');
|
||||
noUiSlider.create(marginSlider, {
|
||||
start: [20, 80],
|
||||
margin: 30,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var marginMin = document.getElementById('slider-margin-value-min'),
|
||||
marginMax = document.getElementById('slider-margin-value-max');
|
||||
marginSlider.noUiSlider.on('update', function (values, handle) {
|
||||
if (handle) {
|
||||
marginMax.innerHTML = values[handle];
|
||||
} else {
|
||||
marginMin.innerHTML = values[handle];
|
||||
}
|
||||
});
|
||||
//slider margin ^
|
||||
|
||||
|
||||
//slider limit
|
||||
var limitSlider = document.getElementById('slider-limit');
|
||||
noUiSlider.create(limitSlider, {
|
||||
start: [10, 120],
|
||||
limit: 40,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var limitFieldMin = document.getElementById('slider-limit-value-min');
|
||||
var limitFieldMax = document.getElementById('slider-limit-value-max');
|
||||
|
||||
limitSlider.noUiSlider.on('update', function (values, handle) {
|
||||
(handle ? limitFieldMax : limitFieldMin).innerHTML = values[handle];
|
||||
});
|
||||
//slider limit ^
|
||||
|
||||
|
||||
//slider padding
|
||||
var paddingSlider = document.getElementById('slider-padding');
|
||||
noUiSlider.create(paddingSlider, {
|
||||
start: [20, 80],
|
||||
padding: [10, 15], // Or just 10
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var paddingMin = document.getElementById('slider-padding-value-min');
|
||||
var paddingMax = document.getElementById('slider-padding-value-max');
|
||||
paddingSlider.noUiSlider.on('update', function (values, handle) {
|
||||
if (handle) {
|
||||
paddingMax.innerHTML = values[handle];
|
||||
} else {
|
||||
paddingMin.innerHTML = values[handle];
|
||||
}
|
||||
});
|
||||
//slider padding ^
|
||||
|
||||
|
||||
//slider orientation
|
||||
var verticalSlider = document.getElementById('slider-vertical');
|
||||
noUiSlider.create(verticalSlider, {
|
||||
start: 40,
|
||||
orientation: 'vertical',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
//slider orientation ^
|
||||
|
||||
|
||||
//slider direction
|
||||
var directionSlider = document.getElementById('slider-direction');
|
||||
noUiSlider.create(directionSlider, {
|
||||
start: 20,
|
||||
direction: 'rtl',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
var directionField = document.getElementById('field');
|
||||
directionSlider.noUiSlider.on('update', function (values, handle) {
|
||||
directionField.innerHTML = values[handle];
|
||||
});
|
||||
//slider direction ^
|
||||
|
||||
|
||||
//slider tooltips
|
||||
var tooltipSlider = document.getElementById('slider-tooltips');
|
||||
noUiSlider.create(tooltipSlider, {
|
||||
start: [20, 80, 120],
|
||||
tooltips: [false, wNumb({decimals: 1}), true],
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 200
|
||||
}
|
||||
});
|
||||
//slider tooltips ^
|
||||
|
||||
|
||||
//slider behaviour drag
|
||||
var behaviourSlider = document.getElementById('behaviour');
|
||||
noUiSlider.create(behaviourSlider, {
|
||||
start: [20, 40],
|
||||
step: 10,
|
||||
behaviour: 'drag',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
//slider behaviour drag ^
|
||||
|
||||
|
||||
//slider behaviour tap
|
||||
var tapSlider = document.getElementById('tap');
|
||||
noUiSlider.create(tapSlider, {
|
||||
start: 40,
|
||||
behaviour: 'tap',
|
||||
connect: [false, true],
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
//slider behaviour tap ^
|
||||
|
||||
|
||||
//slider behaviour fixed dragging
|
||||
var dragFixedSlider = document.getElementById('drag-fixed');
|
||||
|
||||
noUiSlider.create(dragFixedSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-fixed',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
//slider behaviour fixed dragging ^
|
||||
|
||||
|
||||
//slider behaviour snap
|
||||
var snapSlider2 = document.getElementById('snap');
|
||||
noUiSlider.create(snapSlider2, {
|
||||
start: 40,
|
||||
behaviour: 'snap',
|
||||
connect: [true, false],
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
//slider behaviour snap ^
|
||||
|
||||
|
||||
//slider behaviour hover
|
||||
var hoverSlider = document.getElementById('hover');
|
||||
var field = document.getElementById('hover-val');
|
||||
|
||||
noUiSlider.create(hoverSlider, {
|
||||
start: 20,
|
||||
behaviour: 'hover-snap',
|
||||
direction: 'rtl',
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 10
|
||||
}
|
||||
});
|
||||
|
||||
hoverSlider.noUiSlider.on('hover', function (value) {
|
||||
field.innerHTML = value;
|
||||
});
|
||||
//slider behaviour hover ^
|
||||
|
||||
|
||||
//slider behaviour unconstrained
|
||||
var unconstrainedSlider = document.getElementById('unconstrained');
|
||||
var unconstrainedValues = document.getElementById('unconstrained-values');
|
||||
|
||||
noUiSlider.create(unconstrainedSlider, {
|
||||
start: [20, 50, 80],
|
||||
behaviour: 'unconstrained-tap',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 100
|
||||
}
|
||||
});
|
||||
|
||||
unconstrainedSlider.noUiSlider.on('update', function (values) {
|
||||
unconstrainedValues.innerHTML = values.join(' :: ');
|
||||
});
|
||||
//slider behaviour unconstrained ^
|
||||
|
||||
|
||||
//slider behaviour combined
|
||||
var dragTapSlider = document.getElementById('combined');
|
||||
noUiSlider.create(dragTapSlider, {
|
||||
start: [40, 60],
|
||||
behaviour: 'drag-tap',
|
||||
connect: true,
|
||||
range: {
|
||||
'min': 20,
|
||||
'max': 80
|
||||
}
|
||||
});
|
||||
//slider behaviour combined ^
|
||||
|
||||
|
||||
//slider range left to right
|
||||
var range_all_sliders = {
|
||||
'min': [ 0 ],
|
||||
'10%': [ 500, 500 ],
|
||||
'50%': [ 4000, 1000 ],
|
||||
'max': [ 10000 ]
|
||||
};
|
||||
var pipsRange = document.getElementById('pips-range');
|
||||
noUiSlider.create(pipsRange, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 3
|
||||
}
|
||||
});
|
||||
//slider range left to right ^
|
||||
|
||||
|
||||
//slider range right to left
|
||||
var pipsRangeRtl = document.getElementById('pips-range-rtl');
|
||||
noUiSlider.create(pipsRangeRtl, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
direction: 'rtl',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 3
|
||||
}
|
||||
});
|
||||
//slider range right to left ^
|
||||
|
||||
|
||||
//slider range vertical top to bottom
|
||||
var pipsRangeVertical = document.getElementById('pips-range-vertical');
|
||||
noUiSlider.create(pipsRangeVertical, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
orientation: 'vertical',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 3
|
||||
}
|
||||
});
|
||||
//slider range vertical top to bottom ^
|
||||
|
||||
|
||||
//slider range vertical bottom to top
|
||||
var pipsRangeVerticalRtl = document.getElementById('pips-range-vertical-rtl');
|
||||
noUiSlider.create(pipsRangeVerticalRtl, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
orientation: 'vertical',
|
||||
direction: 'rtl',
|
||||
pips: {
|
||||
mode: 'range',
|
||||
density: 3
|
||||
}
|
||||
});
|
||||
//slider range vertical bottom to top ^
|
||||
|
||||
|
||||
//slider step
|
||||
function filterPips(value, type) {
|
||||
if (type === 0) {
|
||||
return value < 2000 ? -1 : 0;
|
||||
}
|
||||
return value % 1000 ? 2 : 1;
|
||||
}
|
||||
|
||||
|
||||
//slider step ^
|
||||
|
||||
|
||||
//pip position
|
||||
var pipsPositions = document.getElementById('pips-positions');
|
||||
noUiSlider.create(pipsPositions, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'positions',
|
||||
values: [0, 25, 50, 75, 100],
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
//pip position ^
|
||||
|
||||
|
||||
//pip position stepped
|
||||
var positionsStepped = document.getElementById('pips-positions-stepped');
|
||||
noUiSlider.create(positionsStepped, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'positions',
|
||||
values: [0, 25, 50, 75, 100],
|
||||
density: 4,
|
||||
stepped: true
|
||||
}
|
||||
});
|
||||
//pip position stepped ^
|
||||
|
||||
|
||||
//pips count
|
||||
var pipsCount = document.getElementById('pips-count');
|
||||
noUiSlider.create(pipsCount, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'count',
|
||||
values: 6,
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
//pips count ^
|
||||
|
||||
|
||||
//pips count stepped
|
||||
var pipsCountStepped = document.getElementById('pips-count-stepped');
|
||||
noUiSlider.create(pipsCountStepped, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'count',
|
||||
values: 6,
|
||||
density: 4,
|
||||
stepped: true
|
||||
}
|
||||
});
|
||||
//pips count stepped ^
|
||||
|
||||
|
||||
//pips values
|
||||
var pipsValues = document.getElementById('pips-values');
|
||||
noUiSlider.create(pipsValues, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [50, 552, 2251, 3200, 5000, 7080, 9000],
|
||||
density: 4
|
||||
}
|
||||
});
|
||||
//pips values ^
|
||||
|
||||
|
||||
//pips values stepped
|
||||
var pipsValuesStepped = document.getElementById('pips-values-stepped');
|
||||
noUiSlider.create(pipsValuesStepped, {
|
||||
range: range_all_sliders,
|
||||
start: 0,
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [50, 552, 4651, 4952, 5000, 7080, 9000],
|
||||
density: 4,
|
||||
stepped: true
|
||||
}
|
||||
});
|
||||
//pips values stepped ^
|
||||
|
||||
|
||||
//disable slider
|
||||
var disSlider1 = document.getElementById('disable1');
|
||||
var checkbox1 = document.getElementById('checkbox1');
|
||||
function toggle(element) {
|
||||
|
||||
// If the checkbox is checked, disabled the slider.
|
||||
// Otherwise, re-enable it.
|
||||
if (this.checked) {
|
||||
element.setAttribute('disabled', true);
|
||||
} else {
|
||||
element.removeAttribute('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
noUiSlider.create(disSlider1, {
|
||||
start: 80,
|
||||
connect: [true, false],
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
checkbox1.addEventListener('click', function () {
|
||||
toggle.call(this, disSlider1);
|
||||
});
|
||||
//disable slider ^
|
||||
|
||||
|
||||
//disable slider 2
|
||||
var disSlider2 = document.getElementById('disable2');
|
||||
var origins = disSlider2.getElementsByClassName('noUi-origin');
|
||||
var checkbox2 = document.getElementById('checkbox2');
|
||||
var checkbox3 = document.getElementById('checkbox3');
|
||||
|
||||
noUiSlider.create(disSlider2, {
|
||||
start: [20, 80],
|
||||
range: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
});
|
||||
|
||||
checkbox2.addEventListener('click', function () {
|
||||
toggle.call(this, origins[0]);
|
||||
});
|
||||
|
||||
checkbox3.addEventListener('click', function () {
|
||||
toggle.call(this, origins[1]);
|
||||
});
|
||||
//disable slider 2 ^
|
||||
|
||||
|
||||
//updating a slider
|
||||
var updateSlider = document.getElementById('slider-update');
|
||||
var updateSliderValue = document.getElementById('slider-update-value');
|
||||
|
||||
noUiSlider.create(updateSlider, {
|
||||
range: {
|
||||
'min': 0,
|
||||
'max': 40
|
||||
},
|
||||
start: 20,
|
||||
margin: 2,
|
||||
step: 2
|
||||
});
|
||||
|
||||
updateSlider.noUiSlider.on('update', function (values, handle) {
|
||||
updateSliderValue.innerHTML = values[handle];
|
||||
});
|
||||
|
||||
var button1 = document.getElementById('update-1');
|
||||
var button2 = document.getElementById('update-2');
|
||||
|
||||
function updateSliderRange(min, max) {
|
||||
updateSlider.noUiSlider.updateOptions({
|
||||
range: {
|
||||
'min': min,
|
||||
'max': max
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
button1.addEventListener('click', function () {
|
||||
updateSliderRange(20, 50);
|
||||
});
|
||||
|
||||
button2.addEventListener('click', function () {
|
||||
updateSliderRange(10, 40);
|
||||
});
|
||||
//updating a slider ^
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
})(jQuery);
|
7
public/style/js/plugins-init/pickadate-init.js
Normal file
7
public/style/js/plugins-init/pickadate-init.js
Normal file
@ -0,0 +1,7 @@
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
//date picker classic default
|
||||
$('.datepicker-default').pickadate();
|
||||
|
||||
})(jQuery);
|
241
public/style/js/plugins-init/piety-init.js
Normal file
241
public/style/js/plugins-init/piety-init.js
Normal file
@ -0,0 +1,241 @@
|
||||
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
|
||||
/****************
|
||||
Piety chart
|
||||
*****************/
|
||||
var dzPiety = function(){
|
||||
|
||||
var getGraphBlockSize = function (selector) {
|
||||
var screenWidth = $(window).width();
|
||||
var graphBlockSize = '100%';
|
||||
|
||||
if(screenWidth <= 768)
|
||||
{
|
||||
screenWidth = (screenWidth < 300 )?screenWidth:300;
|
||||
|
||||
var blockWidth = jQuery(selector).parent().innerWidth() - jQuery(selector).parent().width();
|
||||
|
||||
blockWidth = Math.abs(blockWidth);
|
||||
|
||||
var graphBlockSize = screenWidth - blockWidth - 10;
|
||||
}
|
||||
|
||||
return graphBlockSize;
|
||||
|
||||
}
|
||||
|
||||
var handlePietyBarLine = function(){
|
||||
if(jQuery('.bar-line').length > 0 ){
|
||||
$(".bar-line").peity("bar", {
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyPie = function(){
|
||||
if(jQuery('span.pie').length > 0 ){
|
||||
$("span.pie").peity("pie", {
|
||||
fill: ['#0B2A97', 'rgba(11, 42, 151, .3)'],
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyDonut = function(){
|
||||
if(jQuery('span.donut').length > 0 ){
|
||||
$("span.donut").peity("donut", {
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyLine = function(){
|
||||
if(jQuery('.peity-line').length > 0 ){
|
||||
$(".peity-line").peity("line", {
|
||||
fill: ["rgba(11, 42, 151, .5)"],
|
||||
stroke: '#0B2A97',
|
||||
width: "100%",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyLine2 = function(){
|
||||
if(jQuery('.peity-line-2').length > 0 ){
|
||||
$(".peity-line-2").peity("line", {
|
||||
fill: "#fa707e",
|
||||
stroke: "#f77f8b",
|
||||
//width: "100%",
|
||||
width: getGraphBlockSize('.peity-line-2'),
|
||||
strokeWidth: "3",
|
||||
height: "150"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyLine3 = function(){
|
||||
if(jQuery('.peity-line-3').length > 0 ){
|
||||
$(".peity-line-3").peity("line", {
|
||||
fill: "#673bb7",
|
||||
stroke: "#ab84f3",
|
||||
width: "100%",
|
||||
strokeWidth: "3",
|
||||
height: "150"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyBar = function(){
|
||||
if(jQuery('.bar').length > 0 ){
|
||||
$(".bar").peity("bar", {
|
||||
fill: ["#0B2A97", "#209f84", "#2781d5"],
|
||||
width: "100%",
|
||||
height: "100",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyBar1 = function(){
|
||||
if(jQuery('.bar1').length > 0 ){
|
||||
$(".bar1").peity("bar", {
|
||||
fill: ["#0B2A97", "#209f84", "#2781d5"],
|
||||
//width: "100%",
|
||||
width: getGraphBlockSize('.bar1'),
|
||||
height: "140"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyBarColours1 = function(){
|
||||
if(jQuery('.bar-colours-1').length > 0 ){
|
||||
$(".bar-colours-1").peity("bar", {
|
||||
fill: ["#0B2A97", "#209f84", "#2781d5"],
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyBarColours2 = function(){
|
||||
if(jQuery('.bar-colours-2').length > 0 ){
|
||||
$(".bar-colours-2").peity("bar", {
|
||||
fill: function(t, e, i) {
|
||||
return "rgb(58, " + parseInt(e / i.length * 122) + ", 254)"
|
||||
},
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyBarColours3 = function(){
|
||||
if(jQuery('.bar-colours-3').length > 0 ){
|
||||
$(".bar-colours-3").peity("bar", {
|
||||
fill: function(t, e, i) {
|
||||
return "rgb(16, " + parseInt(e / i.length * 202) + ", 147)"
|
||||
},
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyColours1 = function(){
|
||||
if(jQuery('.pie-colours-1').length > 0 ){
|
||||
$(".pie-colours-1").peity("pie", {
|
||||
fill: ["cyan", "magenta", "yellow", "black"],
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyColours2 = function(){
|
||||
if(jQuery('.pie-colours-2').length > 0 ){
|
||||
$(".pie-colours-2").peity("pie", {
|
||||
fill: ["#0B2A97", "#209f84", "#2781d5", "#FF9B52", "#f72b50"],
|
||||
width: "100",
|
||||
height: "100"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyDataAttr = function(){
|
||||
if(jQuery('.data-attr').length > 0 ){
|
||||
$(".data-attr").peity("donut");
|
||||
}
|
||||
}
|
||||
|
||||
var handlePietyUpdatingChart = function(){
|
||||
var t = $(".updating-chart").peity("line", {
|
||||
fill: ['rgba(11, 42, 151, .5)'],
|
||||
stroke: 'rgb(11, 42, 151)',
|
||||
width: "100%",
|
||||
height: 100
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
var e = Math.round(10 * Math.random()),
|
||||
i = t.text().split(",");
|
||||
i.shift(), i.push(e), t.text(i.join(",")).change()
|
||||
}, 1e3);
|
||||
}
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
handlePietyBarLine();
|
||||
handlePietyPie();
|
||||
handlePietyDonut();
|
||||
handlePietyLine();
|
||||
handlePietyLine2();
|
||||
handlePietyLine3();
|
||||
handlePietyBar();
|
||||
handlePietyBar1();
|
||||
handlePietyBarColours1();
|
||||
handlePietyBarColours2();
|
||||
handlePietyBarColours3();
|
||||
handlePietyColours1();
|
||||
handlePietyColours2();
|
||||
handlePietyDataAttr();
|
||||
handlePietyUpdatingChart();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
setTimeout(function(){
|
||||
dzPiety.load();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
setTimeout(function(){
|
||||
dzPiety.resize();
|
||||
}, 1000);
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
385
public/style/js/plugins-init/select2-init.js
Normal file
385
public/style/js/plugins-init/select2-init.js
Normal file
@ -0,0 +1,385 @@
|
||||
|
||||
|
||||
(function($) {
|
||||
"use strict"
|
||||
|
||||
// single select box
|
||||
$("#single-select").select2();
|
||||
|
||||
// multi select box
|
||||
$('.multi-select').select2();
|
||||
|
||||
// dropdown option groups
|
||||
$('.dropdown-groups').select2();
|
||||
|
||||
//disabling options
|
||||
$('.disabling-options').select2();
|
||||
|
||||
//disabling a select2 control
|
||||
$(".js-example-disabled").select2();
|
||||
$(".js-example-disabled-multi").select2();
|
||||
$("#js-programmatic-enable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", false);
|
||||
$(".js-example-disabled-multi").prop("disabled", false);
|
||||
});
|
||||
$("#js-programmatic-disable").on("click", function () {
|
||||
$(".js-example-disabled").prop("disabled", true);
|
||||
$(".js-example-disabled-multi").prop("disabled", true);
|
||||
});
|
||||
|
||||
|
||||
// select2 with labels
|
||||
$(".select2-with-label-single").select2();
|
||||
$(".select2-with-label-multiple").select2();
|
||||
|
||||
|
||||
//select2 container width
|
||||
$(".select2-width-50").select2();
|
||||
$(".select2-width-75").select2();
|
||||
|
||||
|
||||
//select2 themes
|
||||
$(".js-example-theme-single").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
$(".js-example-theme-multiple").select2({
|
||||
theme: "classic"
|
||||
});
|
||||
|
||||
|
||||
//ajax remote data
|
||||
$(".js-data-example-ajax").select2({
|
||||
width: "100%",
|
||||
ajax: {
|
||||
url: "https://api.github.com/search/repositories",
|
||||
dataType: 'json',
|
||||
delay: 250,
|
||||
data: function (params) {
|
||||
return {
|
||||
q: params.term, // search term
|
||||
page: params.page
|
||||
};
|
||||
},
|
||||
processResults: function (data, params) {
|
||||
// parse the results into the format expected by Select2
|
||||
// since we are using custom formatting functions we do not need to
|
||||
// alter the remote JSON data, except to indicate that infinite
|
||||
// scrolling can be used
|
||||
params.page = params.page || 1;
|
||||
|
||||
return {
|
||||
results: data.items,
|
||||
pagination: {
|
||||
more: (params.page * 30) < data.total_count
|
||||
}
|
||||
};
|
||||
},
|
||||
cache: true
|
||||
},
|
||||
placeholder: 'Search for a repository',
|
||||
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
|
||||
minimumInputLength: 1,
|
||||
templateResult: formatRepo,
|
||||
templateSelection: formatRepoSelection
|
||||
});
|
||||
|
||||
function formatRepo (repo) {
|
||||
if (repo.loading) {
|
||||
return repo.text;
|
||||
}
|
||||
|
||||
var markup = "<div class='select2-result-repository clearfix'>" +
|
||||
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
|
||||
"<div class='select2-result-repository__meta'>" +
|
||||
"<div class='select2-result-repository__title'>" + repo.full_name + "</div>";
|
||||
|
||||
if (repo.description) {
|
||||
markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
|
||||
}
|
||||
|
||||
markup += "<div class='select2-result-repository__statistics'>" +
|
||||
"<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
|
||||
"<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
|
||||
"<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
|
||||
"</div>" +
|
||||
"</div></div>";
|
||||
|
||||
return markup;
|
||||
}
|
||||
|
||||
function formatRepoSelection (repo) {
|
||||
return repo.full_name || repo.text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// loading array data
|
||||
var data = [
|
||||
{
|
||||
id: 0,
|
||||
text: 'enhancement'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
text: 'bug'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
text: 'duplicate'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'invalid'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: 'wontfix'
|
||||
}
|
||||
];
|
||||
$(".js-example-data-array").select2({
|
||||
data: data
|
||||
})
|
||||
|
||||
|
||||
//automatic selection
|
||||
$('#automatic-selection').select2({
|
||||
selectOnClose: true
|
||||
});
|
||||
|
||||
|
||||
//remain open after selection
|
||||
$('#remain-open').select2({
|
||||
closeOnSelect: false
|
||||
});
|
||||
|
||||
|
||||
//dropdown-placement
|
||||
$('#dropdown-placement').select2({
|
||||
dropdownParent: $('#select2-modal')
|
||||
});
|
||||
|
||||
|
||||
// limit the number of selection
|
||||
$('#limit-selection').select2({
|
||||
maximumSelectionLength: 2
|
||||
});
|
||||
|
||||
|
||||
// dynamic option
|
||||
$('#dynamic-option-creation').select2({
|
||||
tags: true
|
||||
});
|
||||
|
||||
|
||||
// tagging with multi value select box
|
||||
$('#multi-value-select').select2({
|
||||
tags: true
|
||||
});
|
||||
|
||||
|
||||
// single-select-placeholder
|
||||
$(".single-select-placeholder").select2({
|
||||
placeholder: "Select a state",
|
||||
allowClear: true
|
||||
});
|
||||
|
||||
|
||||
// multi select placeholder
|
||||
$(".multi-select-placeholder").select2({
|
||||
placeholder: "Select a state"
|
||||
});
|
||||
|
||||
|
||||
//default selection placeholder
|
||||
$(".default-placeholder").select2({
|
||||
placeholder: {
|
||||
id: '-1', // the value of the option
|
||||
text: 'Select an option'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// customizing how results are matched
|
||||
function matchCustom(params, data) {
|
||||
// If there are no search terms, return all of the data
|
||||
if ($.trim(params.term) === '') {
|
||||
return data;
|
||||
}
|
||||
|
||||
// Do not display the item if there is no 'text' property
|
||||
if (typeof data.text === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// `params.term` should be the term that is used for searching
|
||||
// `data.text` is the text that is displayed for the data object
|
||||
if (data.text.indexOf(params.term) > -1) {
|
||||
var modifiedData = $.extend({}, data, true);
|
||||
modifiedData.text += ' (matched)';
|
||||
|
||||
// You can return modified objects from here
|
||||
// This includes matching the `children` how you want in nested data sets
|
||||
return modifiedData;
|
||||
}
|
||||
|
||||
// Return `null` if the term should not be displayed
|
||||
return null;
|
||||
}
|
||||
$(".customize-result").select2({
|
||||
matcher: matchCustom
|
||||
});
|
||||
|
||||
|
||||
// matching grouped options
|
||||
|
||||
function matchStart(params, data) {
|
||||
// If there are no search terms, return all of the data
|
||||
if ($.trim(params.term) === '') {
|
||||
return data;
|
||||
}
|
||||
|
||||
// Skip if there is no 'children' property
|
||||
if (typeof data.children === 'undefined') {
|
||||
return null;
|
||||
}
|
||||
|
||||
// `data.children` contains the actual options that we are matching against
|
||||
var filteredChildren = [];
|
||||
$.each(data.children, function (idx, child) {
|
||||
if (child.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
|
||||
filteredChildren.push(child);
|
||||
}
|
||||
});
|
||||
|
||||
// If we matched any of the timezone group's children, then set the matched children on the group
|
||||
// and return the group object
|
||||
if (filteredChildren.length) {
|
||||
var modifiedData = $.extend({}, data, true);
|
||||
modifiedData.children = filteredChildren;
|
||||
|
||||
// You can return modified objects from here
|
||||
// This includes matching the `children` how you want in nested data sets
|
||||
return modifiedData;
|
||||
}
|
||||
|
||||
// Return `null` if the term should not be displayed
|
||||
return null;
|
||||
}
|
||||
$(".match-grouped-options").select2({
|
||||
matcher: matchStart
|
||||
});
|
||||
|
||||
|
||||
//minimum search term length
|
||||
$(".minimum-search-length").select2({
|
||||
minimumInputLength: 3 // only start searching when the user has input 3 or more characters
|
||||
});
|
||||
|
||||
//maximum search term length
|
||||
$(".maximum-search-length").select2({
|
||||
maximumInputLength: 20 // only allow terms up to 20 characters long
|
||||
});
|
||||
|
||||
|
||||
// programmatically add new option
|
||||
var data = {
|
||||
id: 1,
|
||||
text: 'New Item'
|
||||
};
|
||||
var newOption = new Option(data.text, data.id, false, false);
|
||||
$(".add-new-options").append(newOption).trigger('change').select2();
|
||||
|
||||
|
||||
// create if not exists
|
||||
|
||||
// Set the value, creating a new option if necessary
|
||||
if ($('.create-if-not-exists').find("option[value='" + data.id + "']").length) {
|
||||
$('.create-if-not-exists').val(data.id).trigger('change');
|
||||
} else {
|
||||
// Create a DOM Option and pre-select by default
|
||||
var newOption = new Option(data.text, data.id, true, true);
|
||||
// Append it to the select
|
||||
$('.create-if-not-exists').append(newOption).trigger('change').select2();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// using jquery selector
|
||||
|
||||
$('.jquery-selector').select2();
|
||||
$('.jquery-selector').on("change", function(){
|
||||
var selectData = $(this).find(':selected');
|
||||
var value = selectData.val();
|
||||
alert("you select " + value);
|
||||
});
|
||||
|
||||
|
||||
// select2 rtl support
|
||||
$(".rtl-select2").select2({
|
||||
dir: "rtl"
|
||||
});
|
||||
|
||||
|
||||
// destroy selector
|
||||
$(".destroy-selector").select2();
|
||||
|
||||
$("#destroy-selector-trigger").on("click", function(){
|
||||
$(".destroy-selector").select2("destroy");
|
||||
});
|
||||
|
||||
|
||||
// opening options
|
||||
$(".opening-dropdown").select2();
|
||||
$("#dropdown-trigger-open").on("click", function(){
|
||||
$(".opening-dropdown").select2('open');
|
||||
});
|
||||
|
||||
|
||||
// open or close dropdown
|
||||
$(".open-close-dropdown").select2();
|
||||
$("#opening-dropdown-trigger").on("click", function(){
|
||||
$(".open-close-dropdown").select2('open');
|
||||
});
|
||||
$("#closing-dropdown-trigger").on("click", function(){
|
||||
$(".open-close-dropdown").select2('close');
|
||||
});
|
||||
|
||||
|
||||
// select2 methods
|
||||
var $singleUnbind = $(".single-event-unbind").select2();
|
||||
|
||||
$(".js-programmatic-set-val").on("click", function () {
|
||||
$singleUnbind.val("CA").trigger("change");
|
||||
});
|
||||
|
||||
$(".js-programmatic-open").on("click", function () {
|
||||
$singleUnbind.select2("open");
|
||||
});
|
||||
|
||||
$(".js-programmatic-close").on("click", function () {
|
||||
$singleUnbind.select2("close");
|
||||
});
|
||||
|
||||
$(".js-programmatic-init").on("click", function () {
|
||||
$singleUnbind.select2({
|
||||
width: "400px"
|
||||
});
|
||||
});
|
||||
|
||||
$(".js-programmatic-destroy").on("click", function () {
|
||||
$singleUnbind.select2("destroy");
|
||||
});
|
||||
|
||||
|
||||
var $unbindMulti = $(".js-example-programmatic-multi").select2();
|
||||
$(".js-programmatic-multi-set-val").on("click", function () {
|
||||
$unbindMulti.val(["CA", "HA"]).trigger("change");
|
||||
});
|
||||
|
||||
$(".js-programmatic-multi-clear").on("click", function () {
|
||||
$unbindMulti.val(null).trigger("change");
|
||||
});
|
||||
|
||||
|
||||
})(jQuery);
|
273
public/style/js/plugins-init/sparkline-init.js
Normal file
273
public/style/js/plugins-init/sparkline-init.js
Normal file
@ -0,0 +1,273 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
|
||||
var dzSparkLine = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
function getSparkLineGraphBlockSize(selector)
|
||||
{
|
||||
var screenWidth = $(window).width();
|
||||
var graphBlockSize = '100%';
|
||||
|
||||
if(screenWidth <= 768)
|
||||
{
|
||||
screenWidth = (screenWidth < 300 )?screenWidth:200;
|
||||
|
||||
var blockWidth = jQuery(selector).parent().innerWidth() - jQuery(selector).parent().width();
|
||||
|
||||
blockWidth = Math.abs(blockWidth);
|
||||
|
||||
var graphBlockSize = screenWidth - blockWidth - 10;
|
||||
}
|
||||
|
||||
|
||||
|
||||
return graphBlockSize;
|
||||
|
||||
}
|
||||
|
||||
var sparkLineDash = function(){
|
||||
// Line Chart
|
||||
if(jQuery('#sparklinedash').length > 0 ){
|
||||
$("#sparklinedash").sparkline([10, 15, 26, 27, 28, 31, 34, 40, 41, 44, 49, 64, 68, 69, 72], {
|
||||
type: "bar",
|
||||
height: "50",
|
||||
barWidth: "4",
|
||||
resize: !0,
|
||||
barSpacing: "5",
|
||||
barColor: "#0B2A97"
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparkLine8 = function(){
|
||||
if(jQuery('#sparkline8').length > 0 ){
|
||||
$("#sparkline8").sparkline([79, 72, 29, 6, 52, 32, 73, 40, 14, 75, 77, 39, 9, 15, 10], {
|
||||
type: "line",
|
||||
//width: "100%",
|
||||
width: getSparkLineGraphBlockSize('#sparkline8'),
|
||||
height: "50",
|
||||
lineColor: "#0B2A97",
|
||||
fillColor: "rgba(11, 42, 151, .5)",
|
||||
minSpotColor: "#0B2A97",
|
||||
maxSpotColor: "#0B2A97",
|
||||
highlightLineColor: "#0B2A97",
|
||||
highlightSpotColor: "#0B2A97",
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparkLine9 = function(){
|
||||
if(jQuery('#sparkline9').length > 0 ){
|
||||
$("#sparkline9").sparkline([27, 31, 35, 28, 45, 52, 24, 4, 50, 11, 54, 49, 72, 59, 75], {
|
||||
type: "line",
|
||||
//width: "100%",
|
||||
width: getSparkLineGraphBlockSize('#sparkline9'),
|
||||
//width: '200',
|
||||
height: "50",
|
||||
lineColor: "#8bc740",
|
||||
fillColor: "rgba(139, 199, 64, .5)",
|
||||
minSpotColor: "#8bc740",
|
||||
maxSpotColor: "#8bc740",
|
||||
highlightLineColor: "rgb(255, 159, 0)",
|
||||
highlightSpotColor: "#8bc740"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var sparkBar = function(){
|
||||
// Bar Chart
|
||||
if(jQuery('#spark-bar').length > 0 ){
|
||||
$("#spark-bar").sparkline([33, 22, 68, 54, 8, 30, 74, 7, 36, 5, 41, 19, 43, 29, 38], {
|
||||
type: "bar",
|
||||
height: "200",
|
||||
barWidth: 6,
|
||||
barSpacing: 7,
|
||||
barColor: "#1bd084"
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparkBar2 = function(){
|
||||
if(jQuery('#spark-bar-2').length > 0 ){
|
||||
$("#spark-bar-2").sparkline([33, 22, 68, 54, 8, 30, 74, 7, 36, 5, 41, 19, 43, 29, 38], {
|
||||
type: "bar",
|
||||
height: "140",
|
||||
width: 100,
|
||||
barWidth: 10,
|
||||
barSpacing: 10,
|
||||
barColor: "rgb(255, 206, 120)"
|
||||
});
|
||||
}
|
||||
}
|
||||
var stackedBarChart = function(){
|
||||
if(jQuery('#StackedBarChart').length > 0 ){
|
||||
$('#StackedBarChart').sparkline([
|
||||
[1, 4, 2],
|
||||
[2, 3, 2],
|
||||
[3, 2, 2],
|
||||
[4, 1, 2]
|
||||
], {
|
||||
type: "bar",
|
||||
height: "200",
|
||||
barWidth: 10,
|
||||
barSpacing: 7,
|
||||
stackedBarColor: ['#0B2A97', '#1bd084', '#ff6746']
|
||||
});
|
||||
}
|
||||
}
|
||||
var triState = function(){
|
||||
if(jQuery('#tristate').length > 0 ){
|
||||
|
||||
$("#tristate").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
|
||||
type: 'tristate',
|
||||
height: "200",
|
||||
barWidth: 10,
|
||||
barSpacing: 7,
|
||||
colorMap: ['#0B2A97', '#1bd084', '#ff6746'],
|
||||
negBarColor: '#ff6746'
|
||||
});
|
||||
}
|
||||
}
|
||||
var compositeBar = function(){
|
||||
// Composite
|
||||
if(jQuery('#composite-bar').length > 0 ){
|
||||
$("#composite-bar").sparkline([73, 53, 50, 67, 3, 56, 19, 59, 37, 32, 40, 26, 71, 19, 4, 53, 55, 31, 37], {
|
||||
type: "bar",
|
||||
height: "200",
|
||||
barWidth: "10",
|
||||
resize: true,
|
||||
// barSpacing: "7",
|
||||
barColor: "#0B2A97",
|
||||
width: '100%',
|
||||
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparklineCompositeChart = function(){
|
||||
if(jQuery('#sparkline-composite-chart').length > 0 ){
|
||||
$("#sparkline-composite-chart").sparkline([5, 6, 7, 2, 0, 3, 6, 8, 1, 2, 2, 0, 3, 6], {
|
||||
type: 'line',
|
||||
width: '100%',
|
||||
height: '200',
|
||||
barColor: '#1bd084',
|
||||
colorMap: ['#1bd084', '#ff6746']
|
||||
});
|
||||
}
|
||||
if(jQuery('#sparkline-composite-chart').length > 0 ){
|
||||
$("#sparkline-composite-chart").sparkline([5, 6, 7, 2, 0, 3, 6, 8, 1, 2, 2, 0, 3, 6], {
|
||||
type: 'bar',
|
||||
height: '150px',
|
||||
width: '100%',
|
||||
barWidth: 10,
|
||||
barSpacing: 5,
|
||||
barColor: '#34C73B',
|
||||
negBarColor: '#34C73B',
|
||||
composite: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparkLine11 = function(){
|
||||
if(jQuery('#sparkline11').length > 0 ){
|
||||
//Pie
|
||||
$("#sparkline11").sparkline([24, 61, 51], {
|
||||
type: "pie",
|
||||
height: "100px",
|
||||
resize: !0,
|
||||
sliceColors: ["rgba(192, 10, 39, .5)", "rgba(0, 0, 128, .5)", "rgba(11, 42, 151, .5)"]
|
||||
});
|
||||
}
|
||||
}
|
||||
var sparkLine12 = function(){
|
||||
if(jQuery('#sparkline12').length > 0 ){
|
||||
//Pie
|
||||
$("#sparkline12").sparkline([24, 61, 51], {
|
||||
type: "pie",
|
||||
height: "100",
|
||||
resize: !0,
|
||||
sliceColors: ["rgba(179, 204, 255, 1)", "rgba(157, 189, 255, 1)", "rgba(112, 153, 237, 1)"]
|
||||
});
|
||||
}
|
||||
}
|
||||
var bulletChart = function(){
|
||||
if(jQuery('#bullet-chart').length > 0 ){
|
||||
// Bullet
|
||||
$("#bullet-chart").sparkline([10, 12, 12, 9, 7], {
|
||||
type: 'bullet',
|
||||
height: '100',
|
||||
width: '100%',
|
||||
targetOptions: { // Options related with look and position of targets
|
||||
width: '100%', // The width of the target
|
||||
height: 3, // The height of the target
|
||||
borderWidth: 0, // The border width of the target
|
||||
borderColor: 'black', // The border color of the target
|
||||
color: 'black' // The color of the target
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var boxPlot = function(){
|
||||
if(jQuery('#boxplot').length > 0 ){
|
||||
//Boxplot
|
||||
$("#boxplot").sparkline([4,27,34,52,54,59,61,68,78,82,85,87,91,93,100], {
|
||||
type: 'box'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
sparkLineDash();
|
||||
sparkLine8();
|
||||
sparkLine9();
|
||||
sparkBar();
|
||||
sparkBar2();
|
||||
stackedBarChart();
|
||||
triState();
|
||||
compositeBar();
|
||||
sparklineCompositeChart();
|
||||
bulletChart();
|
||||
sparkLine11();
|
||||
sparkLine12();
|
||||
boxPlot();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
sparkLineDash();
|
||||
sparkLine8();
|
||||
sparkLine9();
|
||||
sparkBar();
|
||||
sparkBar2();
|
||||
stackedBarChart();
|
||||
triState();
|
||||
compositeBar();
|
||||
sparklineCompositeChart();
|
||||
bulletChart();
|
||||
sparkLine11();
|
||||
sparkLine12();
|
||||
boxPlot();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
dzSparkLine.load();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
dzSparkLine.resize();
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
14
public/style/js/plugins-init/summernote-init.js
Normal file
14
public/style/js/plugins-init/summernote-init.js
Normal file
@ -0,0 +1,14 @@
|
||||
jQuery(document).ready(function() {
|
||||
$(".summernote").summernote({
|
||||
height: 190,
|
||||
minHeight: null,
|
||||
maxHeight: null,
|
||||
focus: !1
|
||||
}), $(".inline-editor").summernote({
|
||||
airMode: !0
|
||||
})
|
||||
}), window.edit = function() {
|
||||
$(".click2edit").summernote()
|
||||
}, window.save = function() {
|
||||
$(".click2edit").summernote("destroy")
|
||||
};
|
88
public/style/js/plugins-init/sweetalert-init.js
Normal file
88
public/style/js/plugins-init/sweetalert-init.js
Normal file
@ -0,0 +1,88 @@
|
||||
(function ($) {
|
||||
"use strict"
|
||||
|
||||
/*******************
|
||||
Sweet-alert JS
|
||||
*******************/
|
||||
|
||||
document.querySelector(".sweet-wrong").onclick = function () {
|
||||
sweetAlert("Oops...", "Something went wrong !!", "error")
|
||||
}, document.querySelector(".sweet-message").onclick = function () {
|
||||
swal("Hey, Here's a message !!")
|
||||
}, document.querySelector(".sweet-text").onclick = function () {
|
||||
swal("Hey, Here's a message !!", "It's pretty, isn't it?")
|
||||
}, document.querySelector(".sweet-success").onclick = function () {
|
||||
swal("Hey, Good job !!", "You clicked the button !!", "success")
|
||||
}, document.querySelector(".sweet-confirm").onclick = function () {
|
||||
swal({
|
||||
title: "Are you sure to delete ?",
|
||||
text: "You will not be able to recover this imaginary file !!",
|
||||
type: "warning",
|
||||
showCancelButton: !0,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, delete it !!",
|
||||
closeOnConfirm: !1
|
||||
}, function () {
|
||||
swal("Deleted !!", "Hey, your imaginary file has been deleted !!", "success")
|
||||
})
|
||||
}, document.querySelector(".sweet-success-cancel").onclick = function () {
|
||||
swal({
|
||||
title: "Are you sure to delete ?",
|
||||
text: "You will not be able to recover this imaginary file !!",
|
||||
type: "warning",
|
||||
showCancelButton: !0,
|
||||
confirmButtonColor: "#DD6B55",
|
||||
confirmButtonText: "Yes, delete it !!",
|
||||
cancelButtonText: "No, cancel it !!",
|
||||
closeOnConfirm: !1,
|
||||
closeOnCancel: !1
|
||||
}, function (e) {
|
||||
e ? swal("Deleted !!", "Hey, your imaginary file has been deleted !!", "success") : swal("Cancelled !!", "Hey, your imaginary file is safe !!", "error")
|
||||
})
|
||||
}, document.querySelector(".sweet-image-message").onclick = function () {
|
||||
swal({
|
||||
title: "Sweet !!",
|
||||
text: "Hey, Here's a custom image !!",
|
||||
imageUrl: "../assets/images/hand.jpg"
|
||||
})
|
||||
}, document.querySelector(".sweet-html").onclick = function () {
|
||||
swal({
|
||||
title: "Sweet !!",
|
||||
text: "<span style='color:#ff0000'>Hey, you are using HTML !!<span>",
|
||||
html: !0
|
||||
})
|
||||
}, document.querySelector(".sweet-auto").onclick = function () {
|
||||
swal({
|
||||
title: "Sweet auto close alert !!",
|
||||
text: "Hey, i will close in 2 seconds !!",
|
||||
timer: 2e3,
|
||||
showConfirmButton: !1
|
||||
})
|
||||
}, document.querySelector(".sweet-prompt").onclick = function () {
|
||||
swal({
|
||||
title: "Enter an input !!",
|
||||
text: "Write something interesting !!",
|
||||
type: "input",
|
||||
showCancelButton: !0,
|
||||
closeOnConfirm: !1,
|
||||
animation: "slide-from-top",
|
||||
inputPlaceholder: "Write something"
|
||||
}, function (e) {
|
||||
return !1 !== e && ("" === e ? (swal.showInputError("You need to write something!"), !1) : void swal("Hey !!", "You wrote: " + e, "success"))
|
||||
})
|
||||
}, document.querySelector(".sweet-ajax").onclick = function () {
|
||||
swal({
|
||||
title: "Sweet ajax request !!",
|
||||
text: "Submit to run ajax request !!",
|
||||
type: "info",
|
||||
showCancelButton: !0,
|
||||
closeOnConfirm: !1,
|
||||
showLoaderOnConfirm: !0
|
||||
}, function () {
|
||||
setTimeout(function () {
|
||||
swal("Hey, your ajax request finished !!")
|
||||
}, 2e3)
|
||||
})
|
||||
};
|
||||
|
||||
})(jQuery);
|
1
public/style/js/plugins-init/sweetalert.init.js
Normal file
1
public/style/js/plugins-init/sweetalert.init.js
Normal file
@ -0,0 +1 @@
|
||||
document.querySelector(".sweet-wrong").onclick = function () { sweetAlert("Oops...", "Something went wrong !!", "error") }, document.querySelector(".sweet-message").onclick = function () { swal("Hey, Here's a message !!") }, document.querySelector(".sweet-text").onclick = function () { swal("Hey, Here's a message !!", "It's pretty, isn't it?") }, document.querySelector(".sweet-success").onclick = function () { swal("Hey, Good job !!", "You clicked the button !!", "success") }, document.querySelector(".sweet-confirm").onclick = function () { swal({ title: "Are you sure to delete ?", text: "You will not be able to recover this imaginary file !!", type: "warning", showCancelButton: !0, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it !!", closeOnConfirm: !1 }, function () { swal("Deleted !!", "Hey, your imaginary file has been deleted !!", "success") }) }, document.querySelector(".sweet-success-cancel").onclick = function () { swal({ title: "Are you sure to delete ?", text: "You will not be able to recover this imaginary file !!", type: "warning", showCancelButton: !0, confirmButtonColor: "#DD6B55", confirmButtonText: "Yes, delete it !!", cancelButtonText: "No, cancel it !!", closeOnConfirm: !1, closeOnCancel: !1 }, function (e) { e ? swal("Deleted !!", "Hey, your imaginary file has been deleted !!", "success") : swal("Cancelled !!", "Hey, your imaginary file is safe !!", "error") }) }, document.querySelector(".sweet-image-message").onclick = function () { swal({ title: "Sweet !!", text: "Hey, Here's a custom image !!", imageUrl: "../assets/images/hand.jpg" }) }, document.querySelector(".sweet-html").onclick = function () { swal({ title: "Sweet !!", text: "<span style='color:#ff0000'>Hey, you are using HTML !!<span>", html: !0 }) }, document.querySelector(".sweet-auto").onclick = function () { swal({ title: "Sweet auto close alert !!", text: "Hey, i will close in 2 seconds !!", timer: 2e3, showConfirmButton: !1 }) }, document.querySelector(".sweet-prompt").onclick = function () { swal({ title: "Enter an input !!", text: "Write something interesting !!", type: "input", showCancelButton: !0, closeOnConfirm: !1, animation: "slide-from-top", inputPlaceholder: "Write something" }, function (e) { return !1 !== e && ("" === e ? (swal.showInputError("You need to write something!"), !1) : void swal("Hey !!", "You wrote: " + e, "success")) }) }, document.querySelector(".sweet-ajax").onclick = function () { swal({ title: "Sweet ajax request !!", text: "Submit to run ajax request !!", type: "info", showCancelButton: !0, closeOnConfirm: !1, showLoaderOnConfirm: !0 }, function () { setTimeout(function () { swal("Hey, your ajax request finished !!") }, 2e3) }) };
|
711
public/style/js/plugins-init/toastr-init.js
Normal file
711
public/style/js/plugins-init/toastr-init.js
Normal file
@ -0,0 +1,711 @@
|
||||
(function ($) {
|
||||
"use strict"
|
||||
|
||||
|
||||
/*******************
|
||||
Toastr
|
||||
*******************/
|
||||
|
||||
$("#toastr-success-top-right").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Top Right", {
|
||||
timeOut: 500000000,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
positionClass: "toast-top-right",
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-bottom-right").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Bottom Right", {
|
||||
positionClass: "toast-bottom-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-bottom-left").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Bottom Left", {
|
||||
positionClass: "toast-bottom-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-top-left").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Top Left", {
|
||||
positionClass: "toast-top-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-top-full-width").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Top Full Width", {
|
||||
positionClass: "toast-top-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-bottom-full-width").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Bottom Full Width", {
|
||||
positionClass: "toast-bottom-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-top-center").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Top Center", {
|
||||
positionClass: "toast-top-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-success-bottom-center").on("click", function () {
|
||||
toastr.success("This Is Success Message", "Bottom Center", {
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-top-right").on("click", function () {
|
||||
toastr.info("This Is info Message", "Top Right", {
|
||||
positionClass: "toast-top-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-bottom-right").on("click", function () {
|
||||
toastr.info("This Is info Message", "Bottom Right", {
|
||||
positionClass: "toast-bottom-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-bottom-left").on("click", function () {
|
||||
toastr.info("This Is info Message", "Bottom Left", {
|
||||
positionClass: "toast-bottom-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-top-left").on("click", function () {
|
||||
toastr.info("This Is info Message", "Top Left", {
|
||||
positionClass: "toast-top-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-top-full-width").on("click", function () {
|
||||
toastr.info("This Is info Message", "Top Full Width", {
|
||||
positionClass: "toast-top-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-bottom-full-width").on("click", function () {
|
||||
toastr.info("This Is info Message", "Bottom Full Width", {
|
||||
positionClass: "toast-bottom-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-top-center").on("click", function () {
|
||||
toastr.info("This Is info Message", "Top Center", {
|
||||
positionClass: "toast-top-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-info-bottom-center").on("click", function () {
|
||||
toastr.info("This Is info Message", "Bottom Center", {
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-top-right").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Top Right", {
|
||||
positionClass: "toast-top-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-bottom-right").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Bottom Right", {
|
||||
positionClass: "toast-bottom-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-bottom-left").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Bottom Left", {
|
||||
positionClass: "toast-bottom-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-top-left").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Top Left", {
|
||||
positionClass: "toast-top-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-top-full-width").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Top Full Width", {
|
||||
positionClass: "toast-top-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-bottom-full-width").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Bottom Full Width", {
|
||||
positionClass: "toast-bottom-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-top-center").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Top Center", {
|
||||
positionClass: "toast-top-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-warning-bottom-center").on("click", function () {
|
||||
toastr.warning("This Is warning Message", "Bottom Center", {
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-top-right").on("click", function () {
|
||||
toastr.error("This Is error Message", "Top Right", {
|
||||
positionClass: "toast-top-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-bottom-right").on("click", function () {
|
||||
toastr.error("This Is error Message", "Bottom Right", {
|
||||
positionClass: "toast-bottom-right",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-bottom-left").on("click", function () {
|
||||
toastr.error("This Is error Message", "Bottom Left", {
|
||||
positionClass: "toast-bottom-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-top-left").on("click", function () {
|
||||
toastr.error("This Is error Message", "Top Left", {
|
||||
positionClass: "toast-top-left",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-top-full-width").on("click", function () {
|
||||
toastr.error("This Is error Message", "Top Full Width", {
|
||||
positionClass: "toast-top-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-bottom-full-width").on("click", function () {
|
||||
toastr.error("This Is error Message", "Bottom Full Width", {
|
||||
positionClass: "toast-bottom-full-width",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-top-center").on("click", function () {
|
||||
toastr.error("This Is error Message", "Top Center", {
|
||||
positionClass: "toast-top-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
}
|
||||
|
||||
),
|
||||
$("#toastr-danger-bottom-center").on("click", function () {
|
||||
toastr.error("This Is error Message", "Bottom Center", {
|
||||
positionClass: "toast-bottom-center",
|
||||
timeOut: 5e3,
|
||||
closeButton: !0,
|
||||
debug: !1,
|
||||
newestOnTop: !0,
|
||||
progressBar: !0,
|
||||
preventDuplicates: !0,
|
||||
onclick: null,
|
||||
showDuration: "300",
|
||||
hideDuration: "1000",
|
||||
extendedTimeOut: "1000",
|
||||
showEasing: "swing",
|
||||
hideEasing: "linear",
|
||||
showMethod: "fadeIn",
|
||||
hideMethod: "fadeOut",
|
||||
tapToDismiss: !1
|
||||
})
|
||||
});
|
||||
})(jQuery);
|
1330
public/style/js/plugins-init/widgets-script-init.js
Normal file
1330
public/style/js/plugins-init/widgets-script-init.js
Normal file
@ -0,0 +1,1330 @@
|
||||
(function($) {
|
||||
/* "use strict" */
|
||||
|
||||
var dzChartlist = function(){
|
||||
|
||||
var screenWidth = $(window).width();
|
||||
|
||||
var activityChart = function(){
|
||||
/*======== 16. ANALYTICS - ACTIVITY CHART ========*/
|
||||
var activity = document.getElementById("activity");
|
||||
if (activity !== null) {
|
||||
var activityData = [{
|
||||
first: [35, 18, 15, 35, 40, 20, 30, 25, 22, 20, 45, 35]
|
||||
},
|
||||
{
|
||||
first: [50, 35, 10, 45, 40, 50, 60, 80, 10, 50, 34, 35]
|
||||
},
|
||||
{
|
||||
first: [20, 35, 60, 45, 40, 70, 30, 80, 65, 70, 60, 20]
|
||||
},
|
||||
{
|
||||
first: [25, 88, 25, 50, 70, 70, 60, 70, 50, 60, 50, 70]
|
||||
}
|
||||
];
|
||||
activity.height = 300;
|
||||
|
||||
var config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: [
|
||||
"01",
|
||||
"02",
|
||||
"03",
|
||||
"04",
|
||||
"05",
|
||||
"06",
|
||||
"07",
|
||||
"08",
|
||||
"09",
|
||||
"10",
|
||||
"11",
|
||||
"12"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [35, 18, 15, 35, 40, 20, 30, 25, 22, 20, 45, 35],
|
||||
borderColor: 'rgba(26, 51, 213, 1)',
|
||||
borderWidth: "0",
|
||||
backgroundColor: 'rgba(72, 169, 248, 1)'
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
gridLines: {
|
||||
color: "rgba(89, 59, 219,0.1)",
|
||||
drawBorder: true
|
||||
},
|
||||
ticks: {
|
||||
fontColor: "#999",
|
||||
},
|
||||
}],
|
||||
xAxes: [{
|
||||
gridLines: {
|
||||
display: false,
|
||||
zeroLineColor: "transparent"
|
||||
},
|
||||
ticks: {
|
||||
stepSize: 5,
|
||||
fontColor: "#999",
|
||||
fontFamily: "Nunito, sans-serif"
|
||||
}
|
||||
}]
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false,
|
||||
titleFontColor: "#888",
|
||||
bodyFontColor: "#555",
|
||||
titleFontSize: 12,
|
||||
bodyFontSize: 15,
|
||||
backgroundColor: "rgba(256,256,256,0.95)",
|
||||
displayColors: true,
|
||||
xPadding: 10,
|
||||
yPadding: 7,
|
||||
borderColor: "rgba(220, 220, 220, 0.9)",
|
||||
borderWidth: 2,
|
||||
caretSize: 6,
|
||||
caretPadding: 10
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("activity").getContext("2d");
|
||||
var myLine = new Chart(ctx, config);
|
||||
|
||||
var items = document.querySelectorAll("#user-activity .nav-tabs .nav-item");
|
||||
items.forEach(function(item, index) {
|
||||
item.addEventListener("click", function() {
|
||||
config.data.datasets[0].data = activityData[index].first;
|
||||
myLine.update();
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
var activeUser = function(){
|
||||
if(jQuery('#activeUser').length > 0 ){
|
||||
var data = {
|
||||
labels: ["0", "1", "2", "3", "4", "5", "6", "0", "1", "2", "3", "4", "5", "6"],
|
||||
datasets: [{
|
||||
label: "My First dataset",
|
||||
backgroundColor: "rgba(105,255,147,1)",
|
||||
strokeColor: "rgba(105,255,147,1)",
|
||||
pointColor: "rgba(0,0,0,0)",
|
||||
pointStrokeColor: "rgba(105,255,147,1)",
|
||||
pointHighlightFill: "rgba(105,255,147,1)",
|
||||
pointHighlightStroke: "rgba(105,255,147,1)",
|
||||
data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80, 81, 56, 55, 40]
|
||||
}]
|
||||
};
|
||||
|
||||
var ctx = document.getElementById("activeUser").getContext("2d");
|
||||
var chart = new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: data,
|
||||
options: {
|
||||
responsive: !0,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: !1
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: !1,
|
||||
gridLines: {
|
||||
display: !1
|
||||
},
|
||||
barPercentage: 1,
|
||||
categoryPercentage: 0.5
|
||||
}],
|
||||
yAxes: [{
|
||||
display: !1,
|
||||
ticks: {
|
||||
padding: 10,
|
||||
stepSize: 20,
|
||||
max: 100,
|
||||
min: 0
|
||||
},
|
||||
gridLines: {
|
||||
display: !0,
|
||||
drawBorder: !1,
|
||||
lineWidth: 1,
|
||||
zeroLineColor: "#48f3c0"
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setInterval(function() {
|
||||
chart.config.data.datasets[0].data.push(
|
||||
Math.floor(10 + Math.random() * 80)
|
||||
);
|
||||
chart.config.data.datasets[0].data.shift();
|
||||
chart.update();
|
||||
}, 2000);
|
||||
|
||||
}
|
||||
}
|
||||
var chartWidget1 = function(){
|
||||
if(jQuery('#chart_widget_1').length > 0 ){
|
||||
|
||||
const chart_widget_1 = document.getElementById("chart_widget_1").getContext('2d');
|
||||
//generate gradient
|
||||
// const gradientStroke = chart_widget_1.createLinearGradient(0, 0, 0, 250);
|
||||
// gradientStroke.addColorStop(0, "#00abc5");
|
||||
// gradientStroke.addColorStop(1, "#000080");
|
||||
|
||||
// chart_widget_1.attr('height', '100');
|
||||
|
||||
new Chart(chart_widget_1, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40],
|
||||
borderColor: 'rgba(255, 255, 255, .8)',
|
||||
borderWidth: "0",
|
||||
backgroundColor: 'rgba(255, 255, 255, .8)',
|
||||
hoverBackgroundColor: 'rgba(255, 255, 255, .8)'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.5,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var chartWidget2 = function(){
|
||||
//#chart_widget_2
|
||||
if(jQuery('#chart_widget_2').length > 0 ){
|
||||
|
||||
const chart_widget_2 = document.getElementById("chart_widget_2").getContext('2d');
|
||||
//generate gradient
|
||||
const chart_widget_2gradientStroke = chart_widget_2.createLinearGradient(0, 0, 0, 250);
|
||||
chart_widget_2gradientStroke.addColorStop(0, "#2f4cdd");
|
||||
chart_widget_2gradientStroke.addColorStop(1, "#7c8fee");
|
||||
|
||||
// chart_widget_2.attr('height', '100');
|
||||
|
||||
new Chart(chart_widget_2, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40, 88, 45, 95, 54, 76],
|
||||
borderColor: chart_widget_2gradientStroke,
|
||||
borderWidth: "0",
|
||||
backgroundColor: chart_widget_2gradientStroke,
|
||||
hoverBackgroundColor: chart_widget_2gradientStroke
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.1,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget3 = function(){
|
||||
//#chart_widget_3
|
||||
if(jQuery('#chart_widget_3').length > 0 ){
|
||||
const chart_widget_3 = document.getElementById("chart_widget_3").getContext('2d');
|
||||
|
||||
// chart_widget_3.height = 100;
|
||||
|
||||
let barChartData = {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
datasets: [{
|
||||
label: 'Expense',
|
||||
backgroundColor: '#5514a4',
|
||||
hoverBackgroundColor: '#ff5777',
|
||||
data: [
|
||||
'20',
|
||||
'14',
|
||||
'18',
|
||||
'25',
|
||||
'27',
|
||||
'22',
|
||||
'12',
|
||||
'24',
|
||||
'20',
|
||||
'14',
|
||||
'18',
|
||||
'16'
|
||||
]
|
||||
}, {
|
||||
label: 'Earning',
|
||||
backgroundColor: '#F1F3F7',
|
||||
hoverBackgroundColor: '#F1F3F7',
|
||||
data: [
|
||||
'12',
|
||||
'18',
|
||||
'14',
|
||||
'7',
|
||||
'5',
|
||||
'10',
|
||||
'20',
|
||||
'8',
|
||||
'12',
|
||||
'18',
|
||||
'14',
|
||||
'16'
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
new Chart(chart_widget_3, {
|
||||
type: 'bar',
|
||||
data: barChartData,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
stacked: true,
|
||||
barPercentage: .2,
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var chartWidget4 = function(){
|
||||
//#chart_widget_4
|
||||
if(jQuery('#chart_widget_4').length > 0 ){
|
||||
|
||||
const chart_widget_4 = document.getElementById("chart_widget_4").getContext('2d');
|
||||
|
||||
// chart_widget_4.height = 100;
|
||||
|
||||
let barChartData2 = {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'forteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty'],
|
||||
datasets: [{
|
||||
label: 'Expense',
|
||||
backgroundColor: '#2f4cdd',
|
||||
hoverBackgroundColor: '#6c2586',
|
||||
data: [
|
||||
'20',
|
||||
'14',
|
||||
'18',
|
||||
'25',
|
||||
'27',
|
||||
'22',
|
||||
'12',
|
||||
'24',
|
||||
'20',
|
||||
'14',
|
||||
'18',
|
||||
'16',
|
||||
'34',
|
||||
'32',
|
||||
'43',
|
||||
'36',
|
||||
'56',
|
||||
'12',
|
||||
'23',
|
||||
'34'
|
||||
]
|
||||
}, {
|
||||
label: 'Earning',
|
||||
backgroundColor: '#F1F3F7',
|
||||
hoverBackgroundColor: '#F1F3F7',
|
||||
data: [
|
||||
'32',
|
||||
'58',
|
||||
'34',
|
||||
'37',
|
||||
'15',
|
||||
'41',
|
||||
'24',
|
||||
'38',
|
||||
'52',
|
||||
'38',
|
||||
'24',
|
||||
'19',
|
||||
'54',
|
||||
'34',
|
||||
'23',
|
||||
'34',
|
||||
'35',
|
||||
'22',
|
||||
'43',
|
||||
'33'
|
||||
]
|
||||
}]
|
||||
|
||||
};
|
||||
|
||||
new Chart(chart_widget_4, {
|
||||
type: 'bar',
|
||||
data: barChartData2,
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
title: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
intersect: false
|
||||
},
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: false,
|
||||
stacked: true,
|
||||
barPercentage: 1,
|
||||
barThickness: 5,
|
||||
ticks: {
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: false,
|
||||
stacked: true,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
max: 100,
|
||||
min: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
var chartWidget5 = function(){
|
||||
//#chart_widget_5
|
||||
if(jQuery('#chart_widget_5').length > 0 ){
|
||||
|
||||
new Chartist.Line("#chart_widget_5", {
|
||||
labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
|
||||
series: [
|
||||
[4, 5, 1.5, 6, 7, 5.5, 5.8, 4.6]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: 1,
|
||||
showPoint: !0,
|
||||
showLine: !0,
|
||||
fullWidth: !0,
|
||||
lineSmooth: !1,
|
||||
chartPadding: {
|
||||
top: 4,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
axisX: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
},
|
||||
axisY: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget6 = function(){
|
||||
//#chart_widget_6
|
||||
if(jQuery('#chart_widget_6').length > 0 ){
|
||||
|
||||
new Chartist.Line("#chart_widget_6", {
|
||||
labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
|
||||
series: [
|
||||
[4, 5, 3.5, 5, 4, 5.5, 3.8, 4.6]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: 1,
|
||||
showPoint: !0,
|
||||
showLine: !0,
|
||||
fullWidth: !0,
|
||||
lineSmooth: !1,
|
||||
chartPadding: {
|
||||
top: 4,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
axisX: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
},
|
||||
axisY: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget7 = function(){
|
||||
//#chart_widget_7
|
||||
if(jQuery('#chart_widget_7').length > 0 ){
|
||||
|
||||
const chart_widget_7 = document.getElementById("chart_widget_7").getContext('2d');
|
||||
//generate gradient
|
||||
const chart_widget_7gradientStroke = chart_widget_7.createLinearGradient(0, 0, 0, 250);
|
||||
chart_widget_7gradientStroke.addColorStop(0, "#5514a4");
|
||||
chart_widget_7gradientStroke.addColorStop(1, "#5514a4");
|
||||
|
||||
// chart_widget_7.attr('height', '100');
|
||||
|
||||
new Chart(chart_widget_7, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [65, 59, 80, 81, 56, 55, 40, 88, 45, 95, 54, 76],
|
||||
borderColor: chart_widget_7gradientStroke,
|
||||
borderWidth: "0",
|
||||
backgroundColor: chart_widget_7gradientStroke,
|
||||
hoverBackgroundColor: chart_widget_7gradientStroke
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
display: false,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 10
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
barPercentage: 0.6,
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
},
|
||||
ticks: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var chartWidget8 = function(){
|
||||
//#chart_widget_8
|
||||
if(jQuery('#chart_widget_8').length > 0 ){
|
||||
|
||||
new Chartist.Line("#chart_widget_8", {
|
||||
labels: ["1", "2", "3", "4", "5", "6", "7", "8"],
|
||||
series: [
|
||||
[4, 5, 1.5, 6, 7, 5.5, 5.8, 4.6]
|
||||
]
|
||||
}, {
|
||||
low: 0,
|
||||
showArea: !1,
|
||||
showPoint: !0,
|
||||
showLine: !0,
|
||||
fullWidth: !0,
|
||||
lineSmooth: !1,
|
||||
chartPadding: {
|
||||
top: 4,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
axisX: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
},
|
||||
axisY: {
|
||||
showLabel: !1,
|
||||
showGrid: !1,
|
||||
offset: 0
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget9 = function(){
|
||||
//#chart_widget_9
|
||||
if(jQuery('#chart_widget_9').length > 0 ){
|
||||
const chart_widget_9 = document.getElementById("chart_widget_9").getContext('2d');
|
||||
new Chart(chart_widget_9, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "January", "February", "March", "April"],
|
||||
datasets: [{
|
||||
label: "Sales Stats",
|
||||
backgroundColor: "#0B2A97",
|
||||
borderColor: '#0B2A97',
|
||||
pointBackgroundColor: '#0B2A97',
|
||||
pointBorderColor: '#0B2A97',
|
||||
pointHoverBackgroundColor: '#0B2A97',
|
||||
pointHoverBorderColor: '#0B2A97',
|
||||
data: [20, 10, 18, 15, 32, 18, 15, 22, 8, 6, 12, 13, 10, 18, 14, 24, 16, 12, 19, 21, 16, 14, 24, 21, 13, 15, 27, 29, 21, 11, 14, 19, 21, 17]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: !1
|
||||
},
|
||||
tooltips: {
|
||||
intersect: !1,
|
||||
mode: "nearest",
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
caretPadding: 10
|
||||
},
|
||||
legend: {
|
||||
display: !1
|
||||
},
|
||||
responsive: !0,
|
||||
maintainAspectRatio: !1,
|
||||
hover: {
|
||||
mode: "index"
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Month"
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Value"
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: !0
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: .15
|
||||
},
|
||||
point: {
|
||||
radius: 2,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 5,
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget10 = function(){
|
||||
//#chart_widget_10
|
||||
if(jQuery('#chart_widget_10').length > 0 ){
|
||||
|
||||
const chart_widget_10 = document.getElementById("chart_widget_10").getContext('2d');
|
||||
|
||||
new Chart(chart_widget_10, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
|
||||
datasets: [{
|
||||
label: "Sales Stats",
|
||||
backgroundColor: "#0B2A97",
|
||||
borderColor: '#0B2A97',
|
||||
pointBackgroundColor: '#0B2A97',
|
||||
pointBorderColor: '#0B2A97',
|
||||
pointHoverBackgroundColor: '#0B2A97',
|
||||
pointHoverBorderColor: '#0B2A97',
|
||||
borderWidth: 0,
|
||||
data: [20, 10, 18, 10, 32, 15, 15, 22, 18, 6, 12, 13]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: !1
|
||||
},
|
||||
tooltips: {
|
||||
intersect: !1,
|
||||
mode: "nearest",
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
caretPadding: 10
|
||||
},
|
||||
legend: {
|
||||
display: !1
|
||||
},
|
||||
responsive: !0,
|
||||
maintainAspectRatio: !1,
|
||||
hover: {
|
||||
mode: "index"
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Month"
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Value"
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: !0
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: .7
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
borderWidth: 0
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 5,
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
var chartWidget11 = function(){
|
||||
|
||||
//#chart_widget_11
|
||||
if(jQuery('#chart_widget_11').length > 0 ){
|
||||
const chart_widget_11 = document.getElementById("chart_widget_11").getContext('2d');
|
||||
new Chart(chart_widget_11, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June"],
|
||||
datasets: [{
|
||||
label: "Sales Stats",
|
||||
backgroundColor: "rgba(11, 42, 151, .5)",
|
||||
borderColor: '#0B2A97',
|
||||
pointBackgroundColor: '#0B2A97',
|
||||
pointBorderColor: '#0B2A97',
|
||||
pointHoverBackgroundColor: '#0B2A97',
|
||||
pointHoverBorderColor: '#0B2A97',
|
||||
data: [0, 18, 14, 24, 16, 30]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title: {
|
||||
display: !1
|
||||
},
|
||||
tooltips: {
|
||||
intersect: !1,
|
||||
mode: "nearest",
|
||||
xPadding: 5,
|
||||
yPadding: 5,
|
||||
caretPadding: 5
|
||||
},
|
||||
legend: {
|
||||
display: !1
|
||||
},
|
||||
responsive: !0,
|
||||
maintainAspectRatio: !1,
|
||||
hover: {
|
||||
mode: "index"
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Month"
|
||||
},
|
||||
ticks: {
|
||||
max: 30,
|
||||
min: 0
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
display: !1,
|
||||
gridLines: !1,
|
||||
scaleLabel: {
|
||||
display: !0,
|
||||
labelString: "Value"
|
||||
},
|
||||
ticks: {
|
||||
beginAtZero: !0
|
||||
}
|
||||
}]
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
tension: .15
|
||||
},
|
||||
point: {
|
||||
radius: 2,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
layout: {
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
var chartWidget14 = function(){
|
||||
|
||||
//#chart_widget_14
|
||||
if(jQuery('#chart_widget_14').length > 0 ){
|
||||
const chart_widget_14 = document.getElementById("chart_widget_14");
|
||||
chart_widget_14.height = 200;
|
||||
new Chart(chart_widget_14, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Febr", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [55, 30, 90, 41, 86, 45, 80],
|
||||
borderColor: '#8bc740',
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: '#8bc740',
|
||||
pointRadius: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 0,
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
padding: 0,
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget15 = function(){
|
||||
|
||||
//#chart_widget_15
|
||||
if(jQuery('#chart_widget_15').length > 0 ){
|
||||
const chart_widget_15 = document.getElementById("chart_widget_15");
|
||||
chart_widget_15.height = 200;
|
||||
new Chart(chart_widget_15, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Febr", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 60, 30, 71, 26, 85, 50],
|
||||
borderColor: '#0B2A97',
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'transparent',
|
||||
pointBackgroundColor: '#0B2A97',
|
||||
pointRadius: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 0,
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
padding: 0,
|
||||
display: false
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget16 = function(){
|
||||
//#chart_widget_16
|
||||
if(jQuery('#chart_widget_16').length > 0 ){
|
||||
|
||||
const chart_widget_16 = document.getElementById("chart_widget_16");
|
||||
|
||||
chart_widget_16.height = 345;
|
||||
|
||||
new Chart(chart_widget_16, {
|
||||
type: 'line',
|
||||
data: {
|
||||
defaultFontFamily: 'Poppins',
|
||||
labels: ["Jan", "Febr", "Mar", "Apr", "May", "Jun", "Jul"],
|
||||
datasets: [
|
||||
{
|
||||
label: "My First dataset",
|
||||
data: [25, 60, 30, 71, 26, 85, 50],
|
||||
borderColor: 'rgba(72, 169, 248, 1)',
|
||||
borderWidth: "2",
|
||||
backgroundColor: 'rgba(72, 169, 248, 1)',
|
||||
pointBackgroundColor: 'rgba(72, 169, 248, 1)',
|
||||
pointRadius: 0
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
legend: false,
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
tooltips: {
|
||||
intersect: !1,
|
||||
mode: "nearest",
|
||||
xPadding: 10,
|
||||
yPadding: 10,
|
||||
caretPadding: 10
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
max: 100,
|
||||
min: 0,
|
||||
stepSize: 20,
|
||||
padding: 0,
|
||||
display: false,
|
||||
},
|
||||
gridLines: {
|
||||
drawBorder: false,
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [{
|
||||
display: false,
|
||||
ticks: {
|
||||
padding: 0,
|
||||
display: false,
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
drawBorder: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var chartWidget17 = function(){
|
||||
//#chart_widget_17
|
||||
if(jQuery('#chart_widget_17').length > 0 ){
|
||||
|
||||
let data = [];
|
||||
const totalPoints = 50;
|
||||
|
||||
function getRandomData() {
|
||||
if (data.length > 0)
|
||||
data = data.slice(1);
|
||||
while (data.length < totalPoints) {
|
||||
var prev = data.length > 0 ? data[data.length - 1] : 50,
|
||||
y = prev + Math.random() * 10 - 5;
|
||||
if (y < 0) {
|
||||
y = 0;
|
||||
} else if (y > 100) {
|
||||
y = 100;
|
||||
}
|
||||
data.push(y);
|
||||
}
|
||||
const res = [];
|
||||
for (let i = 0; i < data.length; ++i) {
|
||||
res.push([i, data[i]])
|
||||
}
|
||||
return res;
|
||||
}
|
||||
|
||||
// Set up the control widget
|
||||
const updateInterval = 1000;
|
||||
|
||||
if(jQuery('#chart_widget_17').length > 0 ){
|
||||
|
||||
const chart = $.plot('#chart_widget_17', [getRandomData()], {
|
||||
colors: ['#2f4cdd'],
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
lineWidth: 0,
|
||||
fill: 0.9
|
||||
},
|
||||
shadowSize: 0 // Drawing is faster without shadows
|
||||
},
|
||||
grid: {
|
||||
borderColor: 'transparent',
|
||||
borderWidth: 0,
|
||||
labelMargin: 0
|
||||
},
|
||||
xaxis: {
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
min: 0,
|
||||
max: 100,
|
||||
color: 'transparent',
|
||||
font: {
|
||||
size: 10,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function update_chart() {
|
||||
chart.setData([getRandomData()]);
|
||||
chart.draw();
|
||||
setTimeout(update_chart, updateInterval);
|
||||
}
|
||||
|
||||
update_chart();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var widgetSparkLinedash = function(){
|
||||
/* Widget */
|
||||
if(jQuery('#widget_sparklinedash').length > 0 ){
|
||||
$("#widget_sparklinedash").sparkline([10, 15, 26, 27, 28, 31, 34, 40, 41, 44, 49, 64, 68, 69, 72], {
|
||||
type: "bar",
|
||||
height: "40",
|
||||
width: "40",
|
||||
barWidth: "3",
|
||||
resize: !0,
|
||||
barSpacing: "3",
|
||||
barColor: "rgb(0, 171, 197)"
|
||||
});
|
||||
}
|
||||
}
|
||||
var widgetSparkBar = function(){
|
||||
if(jQuery('#widget_spark-bar').length > 0 ){
|
||||
$("#widget_spark-bar").sparkline([33, 22, 68, 54, 8, 30, 74, 7, 36, 5, 41, 19, 43, 29, 38], {
|
||||
type: "bar",
|
||||
height: "40",
|
||||
barWidth: 3,
|
||||
barSpacing: 3,
|
||||
barColor: "rgb(7, 135, 234)"
|
||||
});
|
||||
}
|
||||
}
|
||||
var widgetStackedBarChart = function(){
|
||||
if(jQuery('#widget_StackedBarChart').length > 0 ){
|
||||
$('#widget_StackedBarChart').sparkline([
|
||||
[1, 4, 2],
|
||||
[2, 3, 2],
|
||||
[3, 2, 2],
|
||||
[4, 1, 2]
|
||||
], {
|
||||
type: "bar",
|
||||
height: "40",
|
||||
barWidth: 3,
|
||||
barSpacing: 3,
|
||||
stackedBarColor: ['#36b9d8', '#4bffa2', 'rgba(68, 0, 235, .8)']
|
||||
});
|
||||
}
|
||||
}
|
||||
var widgetTristate = function(){
|
||||
if(jQuery('#widget_tristate').length > 0 ){
|
||||
|
||||
$("#widget_tristate").sparkline([1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1], {
|
||||
type: 'tristate',
|
||||
height: "40",
|
||||
barWidth: 3,
|
||||
barSpacing: 3,
|
||||
colorMap: ['#36b9d8', '#4bffa2', 'rgba(68, 0, 235, .8)'],
|
||||
negBarColor: 'rgba(245, 60, 121, .8)'
|
||||
});
|
||||
}
|
||||
}
|
||||
var widgetCompositeBar = function(){
|
||||
// Composite
|
||||
if(jQuery('#widget_composite-bar').length > 0 ){
|
||||
$("#widget_composite-bar").sparkline([73, 53, 50, 67, 3, 56, 19, 59, 37, 32, 40, 26, 71, 19, 4, 53, 55, 31, 37, 67, 10, 21], {
|
||||
type: "bar",
|
||||
height: "40",
|
||||
barWidth: "3",
|
||||
resize: !0,
|
||||
// barSpacing: "7",
|
||||
barColor: "rgb(68, 11, 89)",
|
||||
width: '100%'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/* Function ============ */
|
||||
return {
|
||||
init:function(){
|
||||
},
|
||||
|
||||
|
||||
load:function(){
|
||||
activityChart();
|
||||
activeUser();
|
||||
chartWidget1();
|
||||
chartWidget2();
|
||||
chartWidget3();
|
||||
chartWidget4();
|
||||
chartWidget5();
|
||||
chartWidget6();
|
||||
chartWidget7();
|
||||
chartWidget8();
|
||||
chartWidget9();
|
||||
chartWidget10();
|
||||
chartWidget11();
|
||||
chartWidget14();
|
||||
chartWidget15();
|
||||
chartWidget16();
|
||||
chartWidget17();
|
||||
widgetSparkLinedash();
|
||||
widgetSparkBar();
|
||||
widgetStackedBarChart();
|
||||
widgetTristate();
|
||||
widgetCompositeBar();
|
||||
},
|
||||
|
||||
resize:function(){
|
||||
chartWidget7();
|
||||
}
|
||||
}
|
||||
|
||||
}();
|
||||
|
||||
jQuery(document).ready(function(){
|
||||
});
|
||||
|
||||
jQuery(window).on('load',function(){
|
||||
dzChartlist.load();
|
||||
});
|
||||
|
||||
jQuery(window).on('resize',function(){
|
||||
dzChartlist.resize();
|
||||
});
|
||||
|
||||
})(jQuery);
|
381
public/style/js/settings.js
Normal file
381
public/style/js/settings.js
Normal file
@ -0,0 +1,381 @@
|
||||
|
||||
var body = $('body');
|
||||
var html = $('html');
|
||||
|
||||
|
||||
|
||||
function dezSettings({typography, version, layout, navheaderBg, headerBg, sidebarStyle, sidebarBg, sidebarPosition, headerPosition, containerLayout, direction, primary}) {
|
||||
this.typography = typography || "roboto";
|
||||
this.version = version || "light";
|
||||
this.layout = layout || "vertical";
|
||||
this.navheaderBg = navheaderBg || "color_1";
|
||||
this.headerBg = headerBg || "color_1";
|
||||
this.sidebarStyle = sidebarStyle || "full";
|
||||
this.sidebarBg = sidebarBg || "color_1";
|
||||
this.sidebarPosition = sidebarPosition || "static";
|
||||
this.headerPosition = headerPosition || "static";
|
||||
this.containerLayout = containerLayout || "wide";
|
||||
this.direction = direction || "ltr";
|
||||
this.primary = primary || "color_1";
|
||||
|
||||
// this.manageTypography();
|
||||
this.manageVersion();
|
||||
this.manageLayout();
|
||||
this.manageNavHeaderBg();
|
||||
this.manageHeaderBg();
|
||||
this.manageSidebarStyle();
|
||||
this.manageSidebarBg();
|
||||
this.manageSidebarPosition();
|
||||
this.manageHeaderPosition();
|
||||
this.manageContainerLayout();
|
||||
this.manageRtlLayout();
|
||||
this.manageResponsiveSidebar();
|
||||
this.managePrimaryColor();
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
dezSettings.prototype.manageVersion = function() {
|
||||
switch(this.version) {
|
||||
case "light":
|
||||
body.attr("data-theme-version", "light");
|
||||
break;
|
||||
case "dark":
|
||||
body.attr("data-theme-version", "dark");
|
||||
break;
|
||||
case "transparent":
|
||||
body.attr("data-theme-version", "transparent");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-theme-version", "light");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageTypography = function() {
|
||||
switch(this.version) {
|
||||
case "poppins":
|
||||
body.attr("data-typography", "poppins");
|
||||
break;
|
||||
case "roboto":
|
||||
body.attr("data-typography", "roboto");
|
||||
break;
|
||||
case "opensans":
|
||||
body.attr("data-typography", "opensans");
|
||||
break;
|
||||
case "helvetica":
|
||||
body.attr("data-typography", "helvetica");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-typography", "roboto");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageLayout = function() {
|
||||
switch(this.layout) {
|
||||
case "horizontal":
|
||||
this.sidebarStyle === "overlay" ? body.attr("data-sidebar-style", "full") : body.attr("data-sidebar-style", `${this.sidebarStyle}`);
|
||||
body.attr("data-layout", "horizontal");
|
||||
break;
|
||||
case "vertical":
|
||||
body.attr("data-layout", "vertical");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-layout", "vertical");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageNavHeaderBg = function() {
|
||||
switch(this.navheaderBg) {
|
||||
case "color_1":
|
||||
body.attr("data-nav-headerbg", "color_1");
|
||||
break;
|
||||
case "color_2":
|
||||
body.attr("data-nav-headerbg", "color_2");
|
||||
break;
|
||||
case "color_3":
|
||||
body.attr("data-nav-headerbg", "color_3");
|
||||
break;
|
||||
case "color_4":
|
||||
body.attr("data-nav-headerbg", "color_4");
|
||||
break;
|
||||
case "color_5":
|
||||
body.attr("data-nav-headerbg", "color_5");
|
||||
break;
|
||||
case "color_6":
|
||||
body.attr("data-nav-headerbg", "color_6");
|
||||
break;
|
||||
case "color_7":
|
||||
body.attr("data-nav-headerbg", "color_7");
|
||||
break;
|
||||
case "color_8":
|
||||
body.attr("data-nav-headerbg", "color_8");
|
||||
break;
|
||||
case "color_9":
|
||||
body.attr("data-nav-headerbg", "color_9");
|
||||
break;
|
||||
case "color_10":
|
||||
body.attr("data-nav-headerbg", "color_10");
|
||||
break;
|
||||
case "image_1":
|
||||
body.attr("data-nav-headerbg", "image_1");
|
||||
break;
|
||||
case "image_2":
|
||||
body.attr("data-nav-headerbg", "image_2");
|
||||
break;
|
||||
case "image_3":
|
||||
body.attr("data-nav-headerbg", "image_3");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-nav-headerbg", "color_1");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageHeaderBg = function() {
|
||||
switch(this.headerBg) {
|
||||
case "color_1":
|
||||
body.attr("data-headerbg", "color_1");
|
||||
break;
|
||||
case "color_2":
|
||||
body.attr("data-headerbg", "color_2");
|
||||
break;
|
||||
case "color_3":
|
||||
body.attr("data-headerbg", "color_3");
|
||||
break;
|
||||
case "color_4":
|
||||
body.attr("data-headerbg", "color_4");
|
||||
break;
|
||||
case "color_5":
|
||||
body.attr("data-headerbg", "color_5");
|
||||
break;
|
||||
case "color_6":
|
||||
body.attr("data-headerbg", "color_6");
|
||||
break;
|
||||
case "color_7":
|
||||
body.attr("data-headerbg", "color_7");
|
||||
break;
|
||||
case "color_8":
|
||||
body.attr("data-headerbg", "color_8");
|
||||
break;
|
||||
case "color_9":
|
||||
body.attr("data-headerbg", "color_9");
|
||||
break;
|
||||
case "color_10":
|
||||
body.attr("data-headerbg", "color_10");
|
||||
break;
|
||||
case "transparent":
|
||||
body.attr("data-headerbg", "transparent");
|
||||
break;
|
||||
case "gradient_1":
|
||||
body.attr("data-headerbg", "gradient_1");
|
||||
break;
|
||||
case "gradient_2":
|
||||
body.attr("data-headerbg", "gradient_2");
|
||||
break;
|
||||
case "gradient_3":
|
||||
body.attr("data-headerbg", "gradient_3");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-headerbg", "color_1");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
dezSettings.prototype.manageSidebarStyle = function() {
|
||||
|
||||
switch(this.sidebarStyle) {
|
||||
case "full":
|
||||
body.attr("data-sidebar-style", "full");
|
||||
break;
|
||||
case "mini":
|
||||
body.attr("data-sidebar-style", "mini");
|
||||
break;
|
||||
case "compact":
|
||||
body.attr("data-sidebar-style", "compact");
|
||||
break;
|
||||
case "modern":
|
||||
body.attr("data-sidebar-style", "modern");
|
||||
break;
|
||||
case "icon-hover":
|
||||
body.attr("data-sidebar-style", "icon-hover");
|
||||
|
||||
$('.deznav').on("hover", function() {
|
||||
$('#main-wrapper').addClass('icon-hover-toggle');
|
||||
}, function() {
|
||||
$('#main-wrapper').removeClass('icon-hover-toggle');
|
||||
});
|
||||
break;
|
||||
case "overlay":
|
||||
this.layout === "horizontal" ? body.attr("data-sidebar-style", "full") : body.attr("data-sidebar-style", "overlay");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-sidebar-style", "full");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageSidebarBg = function() {
|
||||
switch(this.sidebarBg) {
|
||||
case "color_1":
|
||||
body.attr("data-sibebarbg", "color_1");
|
||||
break;
|
||||
case "color_2":
|
||||
body.attr("data-sibebarbg", "color_2");
|
||||
break;
|
||||
case "color_3":
|
||||
body.attr("data-sibebarbg", "color_3");
|
||||
break;
|
||||
case "color_4":
|
||||
body.attr("data-sibebarbg", "color_4");
|
||||
break;
|
||||
case "color_5":
|
||||
body.attr("data-sibebarbg", "color_5");
|
||||
break;
|
||||
case "color_6":
|
||||
body.attr("data-sibebarbg", "color_6");
|
||||
break;
|
||||
case "color_7":
|
||||
body.attr("data-sibebarbg", "color_7");
|
||||
break;
|
||||
case "color_8":
|
||||
body.attr("data-sibebarbg", "color_8");
|
||||
break;
|
||||
case "color_9":
|
||||
body.attr("data-sibebarbg", "color_9");
|
||||
break;
|
||||
case "color_10":
|
||||
body.attr("data-sibebarbg", "color_10");
|
||||
break;
|
||||
case "image_1":
|
||||
body.attr("data-sibebarbg", "image_1");
|
||||
break;
|
||||
case "image_2":
|
||||
body.attr("data-sibebarbg", "image_2");
|
||||
break;
|
||||
case "image_3":
|
||||
body.attr("data-sibebarbg", "image_3");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-sibebarbg", "color_1");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageSidebarPosition = function() {
|
||||
switch(this.sidebarPosition) {
|
||||
case "fixed":
|
||||
this.sidebarStyle === "overlay" && this.layout === "vertical" || this.sidebarStyle === "modern" ? body.attr("data-sidebar-position", "static") : body.attr("data-sidebar-position", "fixed");
|
||||
break;
|
||||
case "static":
|
||||
body.attr("data-sidebar-position", "static");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-sidebar-position", "static");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageHeaderPosition = function() {
|
||||
switch(this.headerPosition) {
|
||||
case "fixed":
|
||||
body.attr("data-header-position", "fixed");
|
||||
break;
|
||||
case "static":
|
||||
body.attr("data-header-position", "static");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-header-position", "static");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageContainerLayout = function() {
|
||||
switch(this.containerLayout) {
|
||||
case "boxed":
|
||||
if(this.layout === "vertical" && this.sidebarStyle === "full") {
|
||||
body.attr("data-sidebar-style", "overlay");
|
||||
}
|
||||
body.attr("data-container", "boxed");
|
||||
break;
|
||||
case "wide":
|
||||
body.attr("data-container", "wide");
|
||||
break;
|
||||
case "wide-boxed":
|
||||
body.attr("data-container", "wide-boxed");
|
||||
break;
|
||||
default:
|
||||
body.attr("data-container", "wide");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageRtlLayout = function() {
|
||||
switch(this.direction) {
|
||||
case "rtl":
|
||||
html.attr("dir", "rtl");
|
||||
html.addClass('rtl');
|
||||
body.attr("direction", "rtl");
|
||||
break;
|
||||
case "ltr":
|
||||
html.attr("dir", "ltr");
|
||||
html.removeClass('rtl');
|
||||
body.attr("direction", "ltr");
|
||||
break;
|
||||
default:
|
||||
html.attr("dir", "ltr");
|
||||
body.attr("direction", "ltr");
|
||||
}
|
||||
}
|
||||
|
||||
dezSettings.prototype.manageResponsiveSidebar = function() {
|
||||
const innerWidth = $(window).innerWidth();
|
||||
if(innerWidth < 1200) {
|
||||
body.attr("data-layout", "vertical");
|
||||
body.attr("data-container", "wide");
|
||||
}
|
||||
|
||||
if(innerWidth > 767 && innerWidth < 1200) {
|
||||
body.attr("data-sidebar-style", "mini");
|
||||
}
|
||||
|
||||
if(innerWidth < 768) {
|
||||
body.attr("data-sidebar-style", "overlay");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dezSettings.prototype.managePrimaryColor = function() {
|
||||
switch(this.primary) {
|
||||
case "color_1":
|
||||
body.attr("data-primary", "color_1");
|
||||
break;
|
||||
case "color_2":
|
||||
body.attr("data-primary", "color_2");
|
||||
break;
|
||||
case "color_3":
|
||||
body.attr("data-primary", "color_3");
|
||||
break;
|
||||
case "color_4":
|
||||
body.attr("data-primary", "color_4");
|
||||
break;
|
||||
case "color_5":
|
||||
body.attr("data-primary", "color_5");
|
||||
break;
|
||||
case "color_6":
|
||||
body.attr("data-primary", "color_6");
|
||||
break;
|
||||
case "color_7":
|
||||
body.attr("data-primary", "color_7");
|
||||
break;
|
||||
case "color_8":
|
||||
body.attr("data-primary", "color_8");
|
||||
break;
|
||||
case "color_9":
|
||||
body.attr("data-primary", "color_9");
|
||||
break;
|
||||
case "color_10":
|
||||
body.attr("data-primary", "color_10");
|
||||
break;
|
||||
|
||||
default:
|
||||
body.attr("data-primary", "color_1");
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user