Primer Primer Commit

js/dashboard/dashboard-1.js

@@ -0,0 +1,366 @@
+
+
+(function($) {
+    /* "use strict" */
+	
+	var dlabChartlist = function(){
+	
+	var screenWidth = $(window).width();
+		var chartBar = function(){
+			var options = {
+				  series: [
+					{
+						name: 'Net Profit',
+						data: [15, 55, 90, 80, 25, 15, 70],
+						//radius: 12,	
+					}, 
+					{
+					  name: 'Revenue',
+					  data: [60, 65, 15, 35, 30, 5, 40]
+					}, 
+					
+				],
+					chart: {
+					type: 'bar',
+					height: 350,
+					toolbar: {
+						show: false,
+					},
+					
+				},
+				plotOptions: {
+				  bar: {
+					horizontal: false,
+					columnWidth: '35%',
+					endingShape: 'rounded'
+				  },
+				},
+				colors:['var(--secondary)', 'var(--primary)'],
+				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: 1,
+			  colors: ['transparent']
+			},
+			grid: {
+				borderColor: '#eee',
+			},
+			xaxis: {
+				
+			  categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+			  labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				  fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+				},
+			  },
+			  crosshairs: {
+			  show: false,
+			  }
+			},
+			yaxis: {
+				labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				   fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+			  },
+			  },
+			},
+			fill: {
+			  opacity: 1
+			},
+			tooltip: {
+			  y: {
+				formatter: function (val) {
+				  return "$ " + val + " thousands"
+				}
+			  }
+			}
+			};
+
+			var chartBar1 = new ApexCharts(document.querySelector("#chartBar"), options);
+			chartBar1.render();
+	}
+	var chartBar1 = function(){
+			var options = {
+				  series: [
+					{
+						name: 'Net Profit',
+						data: [15, 55, 90, 80, 25, 15, 70],
+						//radius: 12,	
+					}, 
+					{
+					  name: 'Revenue',
+					  data: [60, 65, 15, 35, 30, 5, 40]
+					}, 
+					
+				],
+					chart: {
+					type: 'bar',
+					height: 350,
+					
+					toolbar: {
+						show: false,
+					},
+					
+				},
+				plotOptions: {
+				  bar: {
+					horizontal: false,
+					columnWidth: '35%',
+					endingShape: 'rounded'
+				  },
+				},
+				colors:['var(--secondary)', 'var(--primary)'],
+				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: 1,
+			  colors: ['transparent']
+			},
+			grid: {
+				borderColor: '#eee',
+			},
+			xaxis: {
+				
+			  categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+			  labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				  fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+				},
+			  },
+			  crosshairs: {
+			  show: false,
+			  }
+			},
+			yaxis: {
+				labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				   fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+			  },
+			  },
+			},
+			fill: {
+			  opacity: 1
+			},
+			tooltip: {
+			  y: {
+				formatter: function (val) {
+				  return "$ " + val + " thousands"
+				}
+			  }
+			}
+			};
+
+			var chartBar1 = new ApexCharts(document.querySelector("#chartBar1"), options);
+			chartBar1.render();
+	}
+	var chartBar2 = function(){
+			var options = {
+				  series: [
+					{
+						name: 'Net Profit',
+						data: [15, 55, 90, 80, 25, 15, 70],
+						//radius: 12,	
+					}, 
+					{
+					  name: 'Revenue',
+					  data: [60, 65, 15, 35, 30, 5, 40]
+					}, 
+					
+				],
+					chart: {
+					type: 'bar',
+					height: 350,
+					
+					toolbar: {
+						show: false,
+					},
+					
+				},
+				plotOptions: {
+				  bar: {
+					horizontal: false,
+					columnWidth: '35%',
+					endingShape: 'rounded'
+				  },
+				},
+				colors:['var(--secondary)', 'var(--primary)'],
+				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: 1,
+			  colors: ['transparent']
+			},
+			grid: {
+				borderColor: '#eee',
+			},
+			xaxis: {
+				
+			  categories: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+			  labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				  fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+				},
+			  },
+			  crosshairs: {
+			  show: false,
+			  }
+			},
+			yaxis: {
+				labels: {
+			   style: {
+				  colors: '#787878',
+				  fontSize: '13px',
+				   fontFamily: 'poppins',
+				  fontWeight: 100,
+				  cssClass: 'apexcharts-xaxis-label',
+			  },
+			  },
+			},
+			fill: {
+			  opacity: 1
+			},
+			tooltip: {
+			  y: {
+				formatter: function (val) {
+				  return "$ " + val + " thousands"
+				}
+			  }
+			}
+			};
+
+			var chartBar1 = new ApexCharts(document.querySelector("#chartBar2"), options);
+			chartBar1.render();
+	}
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+	
+ 
+	/* Function ============ */
+		return {
+			init:function(){
+			},
+			
+			
+			load:function(){
+				chartBar();
+				chartBar1();
+				chartBar2();
+				
+			},
+			
+			resize:function(){
+			}
+		}
+	
+	}();
+
+	
+		
+	jQuery(window).on('load',function(){
+		setTimeout(function(){
+			dlabChartlist.load();
+		}, 1000); 
+		
+	});
+
+     
+
+})(jQuery);

js/demo.js

@@ -0,0 +1,249 @@
+"use strict"
+
+var themeOptionArr = {
+			typography: '',
+			version: '',
+			layout: '',
+			primary: '',
+			headerBg: '',
+			navheaderBg: '',
+			sidebarBg: '',
+			sidebarStyle: '',
+			sidebarPosition: '',
+			headerPosition: '',
+			containerLayout: '',
+			//direction: '',
+		};
+		
+		
+
+/* Cookies Function */
+function setCookie(cname, cvalue, exhours) 
+	{
+		var d = new Date();
+		d.setTime(d.getTime() + (30*60*1000)); /* 30 Minutes */
+		var expires = "expires="+ d.toString();
+		document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+	}
+
+function getCookie(cname) 
+	{
+		var name = cname + "=";
+		var decodedCookie = decodeURIComponent(document.cookie);
+		var ca = decodedCookie.split(';');
+		for(var i = 0; i <ca.length; i++) {
+			var c = ca[i];
+			while (c.charAt(0) == ' ') {
+				c = c.substring(1);
+			}
+			if (c.indexOf(name) == 0) {
+				return c.substring(name.length, c.length);
+			}
+		}
+		return "";
+	}
+
+function deleteCookie(cname) 
+	{
+		var d = new Date();
+		d.setTime(d.getTime() + (1)); // 1/1000 second
+		var expires = "expires="+ d.toString();
+		//document.cookie = cname + "=1;" + expires + ";path=/";
+		document.cookie = cname + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT"+";path=/";
+	}
+
+function deleteAllCookie(reload = true)
+	{
+		jQuery.each(themeOptionArr, function(optionKey, optionValue) {
+				deleteCookie(optionKey);
+		});
+		if(reload){
+			location.reload();
+		}
+	}
+ 	
+/* Cookies Function END */	
+ 	
+
+(function($) {
+	
+	"use strict"
+	
+	//var direction =  getUrlParams('dir');
+	var theme =  getUrlParams('theme');
+	
+	/* Dz Theme Demo Settings  */
+	
+	var dlabThemeSet0 = { /* Default Theme */
+		typography: "poppins",
+		version: "light",
+		layout: "vertical",
+		primary: "color_1",
+		headerBg: "color_1",
+		navheaderBg: "color_1",
+		sidebarBg: "color_1",
+		sidebarStyle: "full",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+	var dlabThemeSet1 = {
+		typography: "poppins",
+		version: "light",
+		layout: "vertical",
+		primary: "color_3",
+		headerBg: "color_1",
+		navheaderBg: "color_3",
+		sidebarBg: "color_3",
+		sidebarStyle: "full",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+	var dlabThemeSet2 = {
+		typography: "poppins",
+		version: "light",
+		layout: "vertical",
+		primary: "color_2",
+		headerBg: "color_1",
+		navheaderBg: "color_2",
+		sidebarBg: "color_2",
+		sidebarStyle: "mini",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+	
+	var dlabThemeSet3 = {
+		typography: "poppins",
+		version: "light",
+		layout: "vertical",
+		primary: "color_10",
+		headerBg: "color_10",
+		navheaderBg: "color_1",
+		sidebarBg: "color_1",
+		sidebarStyle: "compact",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+	var dlabThemeSet4 = {
+		typography: "poppins",
+		version: "light",
+		layout: "horizontal",
+		primary: "color_15",
+		headerBg: "color_1",
+		navheaderBg: "color_1",
+		sidebarBg: "color_15",
+		sidebarStyle: "full",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+	var dlabThemeSet5 = {
+		typography: "poppins",
+		version: "light",
+		layout: "horizontal",
+		primary: "color_9",
+		headerBg: "color_9",
+		navheaderBg: "color_9",
+		sidebarBg: "color_1",
+		sidebarStyle: "modern",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	var dlabThemeSet6 = {
+		typography: "poppins",
+		version: "light",
+		layout: "vertical",
+		primary: "color_10",
+		headerBg: "color_1",
+		navheaderBg: "color_10",
+		sidebarBg: "color_1",
+		sidebarStyle: "modern",
+		sidebarPosition: "fixed",
+		headerPosition: "fixed",
+		containerLayout: "full",
+	};
+	
+		
+	function themeChange(theme){
+		var themeSettings = {};
+		themeSettings = eval('dlabThemeSet'+theme);
+		dlabSettingsOptions = themeSettings; /* For Screen Resize */
+		new dlabSettings(themeSettings);
+		
+		setThemeInCookie(themeSettings);
+	}
+	
+	function setThemeInCookie(themeSettings)
+	{
+		//console.log(themeSettings);
+		jQuery.each(themeSettings, function(optionKey, optionValue) {
+			setCookie(optionKey,optionValue);
+		});
+	}
+	
+	function setThemeLogo() {
+		var logo = getCookie('logo_src');
+		
+		var logo2 = getCookie('logo_src2');
+		
+		if(logo != ''){
+			jQuery('.nav-header .logo-abbr').attr("src", logo);
+		}
+		
+		if(logo2 != ''){
+			jQuery('.nav-header .logo-compact, .nav-header .brand-title').attr("src", logo2);
+		}
+	}
+	
+	function setThemeOptionOnPage()
+	{
+		if(getCookie('version') != '')
+		{
+			jQuery.each(themeOptionArr, function(optionKey, optionValue) {
+				var optionData = getCookie(optionKey);
+				themeOptionArr[optionKey] = (optionData != '')?optionData:dlabSettingsOptions[optionKey];
+			});
+			console.log(themeOptionArr);
+			dlabSettingsOptions = themeOptionArr;
+			new dlabSettings(dlabSettingsOptions);
+			
+			setThemeLogo();
+		}
+	}
+	
+	jQuery(document).on('click', '.dlab_theme_demo', function(){
+		var demoTheme = jQuery(this).data('theme');
+		themeChange(demoTheme, 'ltr');
+	});
+
+
+	jQuery(document).on('click', '.dlab_theme_demo_rtl', function(){
+		var demoTheme = jQuery(this).data('theme');
+		themeChange(demoTheme, 'rtl');
+	});
+	
+	
+	jQuery(window).on('load', function(){
+		//direction = (direction != undefined)?direction:'ltr';
+		if(theme != undefined){
+			themeChange(theme);
+		}else if(getCookie('version') == ''){	
+				themeChange(0);
+			
+		}
+		
+		/* Set Theme On Page From Cookie */
+		setThemeOptionOnPage();
+	});
+	
+
+})(jQuery);

js/dlabnav-init.js

@@ -0,0 +1,63 @@
+
+"use strict"
+
+var dlabSettingsOptions = {};
+
+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]);
+			}
+		}
+	}
+
+(function($) {
+	
+	"use strict"
+	
+	/* var direction =  getUrlParams('dir');
+	
+	if(direction == 'rtl')
+	{
+        direction = 'rtl'; 
+    }else{
+        direction = 'ltr'; 
+    } */
+	
+	dlabSettingsOptions = {
+			typography: "poppins",
+			version: "light",
+			layout: "vertical",
+			primary: "color_1",
+			headerBg: "color_1",
+			navheaderBg: "color_1",
+			sidebarBg: "color_1",
+			sidebarStyle: "full",
+			sidebarPosition: "fixed",
+			headerPosition: "fixed",
+			containerLayout: "full",
+		};
+
+	
+	
+	
+	new dlabSettings(dlabSettingsOptions); 
+
+	jQuery(window).on('resize',function(){
+        /*Check container layout on resize */
+		///alert(dlabSettingsOptions.primary);
+        dlabSettingsOptions.containerLayout = $('#container_layout').val();
+        /*Check container layout on resize END */
+        
+		new dlabSettings(dlabSettingsOptions); 
+	});
+	
+})(jQuery);

js/plugins-init/bs-daterange-picker-init.js

@@ -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);

js/plugins-init/chartist-init.js

@@ -0,0 +1,899 @@
+(function($) {
+    "use strict" 
+
+
+ var dlabChartlist = 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+			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()
+			]
+		  }
+		  );
+		  
+		  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],
+		series: [
+		  [5, 9, 7, 8, 5, 3, 5, 4]
+		]
+	  }, {
+		low: 0,
+		showArea: 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(){
+			setChartWidth();	
+			lineAnimatedChart();
+			scatterChart();	
+			simpleLineChart();	
+			lineTooltipsChart();		
+			withAreaChart();
+			biPolarLineChart();
+			svgAnimationChart();
+			lineSmoothingChart();
+			biPolarBarChart();
+			overlappingBarsChart();
+			multiLineChart();
+			stackedBarChart();
+			horizontalBarChart();
+			extremeChart();
+			labelPlacementChart();
+			animatingDonutChart();
+			simplePieChart();
+			pieChart();
+			gaugeChart();
+			differentSeriesChart();
+			svgDotAnimationChart();
+		}
+	}
+
+}();
+
+jQuery(document).ready(function(){
+});
+	
+jQuery(window).on('load',function(){
+	setTimeout(function(){
+		dlabChartlist.resize();	
+	}, 1000);
+});
+
+jQuery(window).on('resize',function(){
+	setTimeout(function(){
+		dlabChartlist.resize();	
+	}, 1000);
+	
+});     
+
+})(jQuery);

js/plugins-init/chartjs-init.js

@@ -0,0 +1,841 @@
+(function($) {
+  "use strict" 
+
+	
+	/* function draw() {
+		
+	} */
+
+ var dlabSparkLine = 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(249, 58, 11, 1)',
+							borderWidth: "0",
+							backgroundColor: 'rgba(249, 58, 11, 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(249, 58, 11, 1)");
+			barChart_2gradientStroke.addColorStop(1, "rgba(249, 58, 11, 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(249, 58, 11, 1)");
+			barChart_3gradientStroke.addColorStop(1, "rgba(249, 58, 11, 0.5)");
+
+			const barChart_3gradientStroke2 = barChart_3.createLinearGradient(50, 100, 50, 50);
+			barChart_3gradientStroke2.addColorStop(0, "rgba(98, 126, 234, 1)");
+			barChart_3gradientStroke2.addColorStop(1, "rgba(98, 126, 234, 1)");
+
+			const barChart_3gradientStroke3 = barChart_3.createLinearGradient(50, 100, 50, 50);
+			barChart_3gradientStroke3.addColorStop(0, "rgba(238, 60, 60, 1)");
+			barChart_3gradientStroke3.addColorStop(1, "rgba(238, 60, 60, 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(249, 58, 11, 1)',
+							borderWidth: "2",
+							backgroundColor: 'transparent',  
+							pointBackgroundColor: 'rgba(249, 58, 11, 1)'
+						}
+					]
+				},
+				options: {
+					legend: false, 
+					scales: {
+						yAxes: [{
+							ticks: {
+								beginAtZero: true, 
+								max: 100, 
+								min: 0, 
+								stepSize: 20, 
+								padding: 10
+							}
+						}],
+						xAxes: [{
+							ticks: {
+								padding: 5
+							}
+						}]
+					}
+				}
+			});
+			
+		}
+	}
+	
+	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(249, 58, 11, 1)");
+			lineChart_2gradientStroke.addColorStop(1, "rgba(249, 58, 11, 0.5)");
+
+			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(249, 58, 11, 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(249, 58, 11, 1)");
+			lineChart_3gradientStroke1.addColorStop(1, "rgba(249, 58, 11, 0.5)");
+
+			const lineChart_3gradientStroke2 = lineChart_3.createLinearGradient(500, 0, 100, 0);
+			lineChart_3gradientStroke2.addColorStop(0, "rgba(255, 92, 0, 1)");
+			lineChart_3gradientStroke2.addColorStop(1, "rgba(255, 92, 0, 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(249, 58, 11, 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(249, 58, 11, .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(238, 60, 60, 0.2)");
+			areaChart_2gradientStroke.addColorStop(1, "rgba(238, 60, 60, 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: "#ff2625",
+							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(249, 58, 11)',
+							borderWidth: "1",
+							backgroundColor: 'rgba(249, 58, 11, .5)'
+						}, 
+						{
+							label: "My First dataset",
+							data: [5, 25, 20, 41, 36, 75, 70],
+							borderColor: 'rgb(255, 92, 0)',
+							borderWidth: "1",
+							backgroundColor: 'rgba(255, 92, 0, .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(249, 58, 11, .9)",
+							"rgba(249, 58, 11, .7)",
+							"rgba(249, 58, 11, .5)",
+							"rgba(0,0,0,0.07)"
+						],
+						hoverBackgroundColor: [
+							"rgba(249, 58, 11, .9)",
+							"rgba(249, 58, 11, .7)",
+							"rgba(249, 58, 11, .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(249, 58, 11, 1)",
+							"rgba(98, 126, 234, 1)",
+							"rgba(238, 60, 60, 1)"
+						],
+						hoverBackgroundColor: [
+							"rgba(249, 58, 11, 0.9)",
+							"rgba(98, 126, 234, .9)",
+							"rgba(238, 60, 60, .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(249, 58, 11, 1)",
+							"rgba(98, 126, 234, 1)",
+							"rgba(238, 60, 60, 1)",
+							"rgba(54, 147, 255, 1)",
+							"rgba(255, 92, 0, 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(){
+	dlabSparkLine.load();
+});
+
+jQuery(window).on('resize',function(){
+	//dlabSparkLine.resize();
+	setTimeout(function(){ dlabSparkLine.resize(); }, 1000);
+});
+	
+})(jQuery);

js/plugins-init/clock-picker-init.js

@@ -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').click(function (e) {
+        // Have to stop propagation here
+        e.stopPropagation();
+        input.clockpicker('show').clockpicker('toggleView', 'minutes');
+    });
+
+})(jQuery)

js/plugins-init/datatables.init.js

@@ -0,0 +1,263 @@
+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"
+	 // guestTable-all
+	var table = $('#guestTable-all').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: 'Prev',
+			  next:  'Next'
+			}
+		  }
+		
+	}); 
+	var table = $('#guestTable-all1').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: 'Prev',
+			  next:  'Next'
+			}
+		  }
+		
+	}); 
+	var table = $('#guestTable-all2').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: 'Prev',
+			  next:  'Next'
+			}
+		  }
+		
+	}); 
+	var table = $('#guestTable-all3').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: 'Prev',
+			  next:  'Next'
+			}
+		  }
+		
+	}); 
+	var table = $('#guestTable-all4').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: 'Prev',
+			  next:  'Next'
+			}
+		  }
+		
+	}); 
+    //example 1
+    var table = $('#example').DataTable({
+        createdRow: function ( row, data, index ) {
+           $(row).addClass('selected')
+        } ,
+		language: {
+			paginate: {
+			  previous: "Previous",
+			  next: "Next" 
+			}
+		  }
+    });
+      
+    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')
+    });
+	
+	// dataTable1
+	var table = $('#dataTable1').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		
+	});
+	// dataTable2
+	var table = $('#dataTable2').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		
+	});
+	// dataTable3
+	var table = $('#dataTable3').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false ,
+		
+	});
+	// dataTable4
+	var table = $('#dataTable4').DataTable({
+		searching: false,
+		paging:true,
+		select: false,         
+		lengthChange:false,
+		
+	});
+   
+	// dataTable5
+	var table = $('#example5').DataTable({
+		searching: false,
+		paging:true,
+		select: false,
+		info: true,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: "Previous",
+			  next: "Next" 
+			}
+		  }
+		
+	}); 
+	
+	// dataTable6
+		var table = $('#example6').DataTable({
+			searching: false,
+			paging:true,
+			select: false,
+			info: false,         
+			lengthChange:false ,
+			language: {
+			paginate: {
+			  previous: "Previous",
+			  next: "Next" 
+			}
+		  }
+			
+		});
+		
+		
+	// dataTable7
+	var table = $('#example7').DataTable({
+		searching: false,
+		paging:true,
+		select: false,
+		info: true,         
+		lengthChange:false ,
+		language: {
+			paginate: {
+			  previous: "Previous",
+			  next: "Next" 
+			}
+		  }
+		
+	}); 	
+	// dataTable9
+		
+	// table row
+	var table = $('#dataTable1, #dataTable2, #dataTable3, #dataTable4,  #example3, #example4 ').DataTable({
+		language: {
+			paginate: {
+			  next: '<i class="fa fa-angle-double-right" aria-hidden="true"></i>',
+			  previous: '<i class="fa fa-angle-double-left" aria-hidden="true"></i>' 
+			}
+		  }
+	});
+	$('#example tbody').on('click', 'tr', function () {
+		var data = table.row( this ).data();
+	});
+   
+	
+	
+})(jQuery);

js/plugins-init/flot-init.js

@@ -0,0 +1,593 @@
+(function($) {
+   "use strict"
+
+
+ var dlabChartlist = 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: '#f93a0b'
+				}
+			},
+			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: '#f93a0b'
+			}
+		}, {
+			data: [[1, 5], [3, 7], [5, 10], [7, 7], [9, 9], [11, 5], [13, 4], [15, 6]],
+			bars: {
+				show: true,
+				lineWidth: 0,
+				fillColor: '#145650'
+			}
+		}], 
+		{
+			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: '#f93a0b'
+			},
+			{
+				data: retCust,
+				label: 'Returning Customer',
+				color: '#145650'
+			}
+		],
+		{
+			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: '#f93a0b'
+			},
+			{
+				data: retCust,
+				label: 'Returning Customer',
+				color: '#145650'
+			}
+		],
+		{
+			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: '#f93a0b'
+			},
+			{
+				data: retCust2,
+				label: 'Returning Customer',
+				color: '#145650'
+			}
+		],
+		{
+			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: '#f93a0b'
+			},
+			{
+				data: retCust,
+				label: 'Returning Customer',
+				color: '#145650'
+			}
+		],
+		{
+			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: '#f93a0b'
+			},
+			{
+				data: retCust,
+				label: 'Returning Customer',
+				color: '#145650'
+			}
+		],
+		{
+			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: ['#f93a0b'],
+			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: ['#f93a0b'],
+			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(){
+	dlabChartlist.load();
+});
+
+jQuery(window).on('resize',function(){
+	dlabChartlist.resize();
+});     
+
+})(jQuery);

js/plugins-init/fullcalendar-init.js

@@ -0,0 +1,132 @@
+
+"use strict"
+
+function fullCalender(){
+	
+	/* initialize the external events
+		-----------------------------------------------------------------*/
+
+		var containerEl = document.getElementById('external-events');
+		new FullCalendar.Draggable(containerEl, {
+		  itemSelector: '.external-event',
+		  eventData: function(eventEl) {
+			return {
+			  title: eventEl.innerText.trim()
+			}
+		  }
+		 
+		});
+		/* initialize the calendar
+		-----------------------------------------------------------------*/
+
+		var calendarEl = document.getElementById('calendar');
+		var calendar = new FullCalendar.Calendar(calendarEl, {
+		  headerToolbar: {
+			left: 'prev,next today',
+			center: 'title',
+			right: 'dayGridMonth,timeGridWeek,timeGridDay'
+		  },
+		  
+		  selectable: true,
+		  selectMirror: true,
+		  select: function(arg) {
+			var title = prompt('Event Title:');
+			if (title) {
+			  calendar.addEvent({
+				title: title,
+				start: arg.start,
+				end: arg.end,
+				allDay: arg.allDay
+			  })
+			}
+			calendar.unselect()
+		  },
+		  
+		  editable: true,
+		  droppable: true, // this allows things to be dropped onto the calendar
+		  drop: function(arg) {
+			// is the "remove after drop" checkbox checked?
+			if (document.getElementById('drop-remove').checked) {
+			  // if so, remove the element from the "Draggable Events" list
+			  arg.draggedEl.parentNode.removeChild(arg.draggedEl);
+			}
+		  },
+		  initialDate: '2021-02-13',
+			  weekNumbers: true,
+			  navLinks: true, // can click day/week names to navigate views
+			  editable: true,
+			  selectable: true,
+			  nowIndicator: true,
+		   events: [
+				{
+				  title: 'All Day Event',
+				  start: '2021-02-01'
+				},
+				{
+				  title: 'Long Event',
+				  start: '2021-02-07',
+				  end: '2021-02-10',
+				  className: "bg-danger"
+				},
+				{
+				  groupId: 999,
+				  title: 'Repeating Event',
+				  start: '2021-02-09T16:00:00'
+				},
+				{
+				  groupId: 999,
+				  title: 'Repeating Event',
+				  start: '2021-02-16T16:00:00'
+				},
+				{
+				  title: 'Conference',
+				  start: '2021-02-11',
+				  end: '2021-02-13',
+				  className: "bg-danger"
+				},
+				{
+				  title: 'Lunch',
+				  start: '2021-02-12T12:00:00'
+				},
+				{
+				  title: 'Meeting',
+				  start: '2021-04-12T14:30:00'
+				},
+				{
+				  title: 'Happy Hour',
+				  start: '2021-07-12T17:30:00'
+				},
+				{
+				  title: 'Dinner',
+				  start: '2021-02-12T20:00:00',
+				  className: "bg-warning"
+				},
+				{
+				  title: 'Birthday Party',
+				  start: '2021-02-13T07:00:00',
+				  className: "bg-secondary"
+				},
+				{
+				  title: 'Click for Google',
+				  url: 'http://google.com/',
+				  start: '2021-02-28'
+				}
+			  ]
+		});
+		calendar.render();
+	
+}	
+	
+	
+	
+jQuery(window).on('load',function(){
+	setTimeout(function(){
+		fullCalender();	
+	}, 1000);
+	
+	
+});	
+	
+
+		
+

js/plugins-init/jquery-asColorPicker.init.js

@@ -0,0 +1,12 @@
+(function($) {
+    "use strict"
+    
+    // Colorpicker
+    $(".as_colorpicker").asColorPicker();
+    $(".complex-colorpicker").asColorPicker({
+        mode: 'complex'
+    });
+    $(".gradient-colorpicker").asColorPicker({
+        mode: 'gradient'
+    });
+})(jQuery);

js/plugins-init/jquery.validate-init.js

@@ -0,0 +1,19 @@
+(function () {
+  'use strict'
+
+  // Fetch all the forms we want to apply custom Bootstrap validation styles to
+  var forms = document.querySelectorAll('.needs-validation')
+
+  // Loop over them and prevent submission
+  Array.prototype.slice.call(forms)
+	.forEach(function (form) {
+	  form.addEventListener('submit', function (event) {
+		if (!form.checkValidity()) {
+		  event.preventDefault()
+		  event.stopPropagation()
+		}
+
+		form.classList.add('was-validated')
+	  }, false)
+	})
+})()

js/plugins-init/jqvmap-init.js

@@ -0,0 +1,114 @@
+(function($) {
+    "use strict" 
+
+
+ var dlabVectorMap = 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(){
+			dlabVectorMap.load();
+		}, 1000); 
+		
+	});
+
+	jQuery(window).on('resize',function(){
+		setTimeout(function(){
+			dlabVectorMap.resize();
+		}, 1000); 
+		
+	});     
+
+})(jQuery);	

js/plugins-init/material-date-picker-init.js

@@ -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);

js/plugins-init/morris-init.js

@@ -0,0 +1,457 @@
+(function($) {
+    "use strict"
+
+	var dlabMorris = 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: ['#f93a0b', 'rgb(255, 92, 0)', '#145650'],
+				//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(238, 60, 60)'], //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: ['#EE3C3C', '#145650', '#f93a0b'],
+				behaveLikeLine: true,
+				gridLineColor: 'transparent',
+				lineWidth: 3,
+				hideHover: 'auto',
+				lineColors: ['rgb(238, 60, 60)', 'rgb(0, 171, 197)', '#f93a0b'],
+				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: ['#f93a0b', '#145650', '#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: ['#f93a0b', "#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: ['#f93a0b', 'rgb(16, 202, 147)', 'rgb(255, 92, 0)'],
+				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(){
+		dlabMorris.init();
+		//dlabMorris.resize();
+	
+	});
+		
+	jQuery(window).on('load',function(){
+		//dlabMorris.init();
+	});
+		
+	jQuery( window ).resize(function() {
+		//dlabMorris.resize();
+		//dlabMorris.init();
+	});
+   
+})(jQuery);

js/plugins-init/nestable-init.js

@@ -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);

js/plugins-init/pickadate-init.js

@@ -0,0 +1,7 @@
+(function($) {
+    "use strict"
+
+    //date picker classic default
+    $('.datepicker-default').pickadate();
+
+})(jQuery);

js/plugins-init/piety-init.js

@@ -0,0 +1,255 @@
+
+(function($) {
+    "use strict"
+
+
+/****************
+Piety chart
+*****************/
+var dlabPiety = 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: ['#f93a0b', 'rgba(249, 58, 11, .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(249, 58, 11, .5)"], 
+				stroke: '#f93a0b', 
+				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: ["#f93a0b", "#145650", "#3693FF"],  
+				width: "100%",
+				height: "100",
+			});
+		}
+	}
+	
+	var handlePietyBar1 = function(){
+		if(jQuery('.bar1').length > 0 ){
+			$(".bar1").peity("bar", {
+				fill: ["#f93a0b", "#145650", "#3693FF"],    
+				//width: "100%",
+				width: getGraphBlockSize('.bar1'),
+				height: "140"
+			});
+		}
+	}
+	
+	var handlePietyBarColours1 = function(){
+		if(jQuery('.bar-colours-1').length > 0 ){
+			$(".bar-colours-1").peity("bar", {
+				fill: ["#f93a0b", "#145650", "#3693FF"],  
+				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: ["#f93a0b", "#145650", "#3693FF", "#ff5c00", "#EE3C3C"],
+				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(249, 58, 11, .5)'],
+			stroke: 'rgb(249, 58, 11)', 
+			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(){
+			handlePietyBarLine();
+			handlePietyPie();
+			handlePietyDonut();
+			handlePietyLine();
+			handlePietyLine2();
+			handlePietyLine3();
+			handlePietyBar();
+			handlePietyBar1();
+			handlePietyBarColours1();
+			handlePietyBarColours2();
+			handlePietyBarColours3();
+			handlePietyColours1();
+			handlePietyColours2();
+			handlePietyDataAttr();
+			//handlePietyUpdatingChart();
+		}
+	}
+	
+}();
+ 
+	jQuery(document).ready(function(){
+		
+		
+		
+	});
+		
+	jQuery(window).on('load',function(){
+		setTimeout(function(){
+			dlabPiety.load();
+		}, 1000); 
+		
+	});
+
+	jQuery(window).on('resize',function(){
+		setTimeout(function(){
+			dlabPiety.resize();
+		}, 1000); 
+		
+	});      
+
+})(jQuery);

js/plugins-init/select2-init.js

@@ -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").click(function(){
+      $(".destroy-selector").select2("destroy");
+  });
+
+
+  // opening options
+  $(".opening-dropdown").select2();
+  $("#dropdown-trigger-open").click(function(){
+      $(".opening-dropdown").select2('open');
+  });
+
+
+  // open or close dropdown
+  $(".open-close-dropdown").select2();
+  $("#opening-dropdown-trigger").click(function(){
+      $(".open-close-dropdown").select2('open');
+  });
+  $("#closing-dropdown-trigger").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);

js/plugins-init/sparkline-init.js

@@ -0,0 +1,284 @@
+(function($) {
+    "use strict" 
+   
+ var dlabSparkLine = function(){
+    
+	var screenWidth = $(window).width();
+	
+	function getSparkLineGraphBlockSize(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 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: "#f93a0b"
+			});
+		}
+	}
+	
+	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: "#f93a0b",
+				fillColor: "rgba(249, 58, 11, .5)",
+				minSpotColor: "#f93a0b",
+				maxSpotColor: "#f93a0b",
+				highlightLineColor: "#f93a0b",
+				highlightSpotColor: "#f93a0b",
+				
+			});
+		}
+	}
+	
+	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'),
+				height: "50",
+				lineColor: "#ff5c00",
+				fillColor: "rgba(255, 92, 0, .5)",
+				minSpotColor: "#ff5c00",
+				maxSpotColor: "#ff5c00",
+				highlightLineColor: "rgb(255, 159, 0)",
+				highlightSpotColor: "#ff5c00"
+			});
+		}
+	}
+
+    // Bar Chart
+	var sparkBar = function(){
+		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: "#145650"
+			});
+		}	
+	}
+		
+	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: ['#f93a0b', '#145650', '#ff5c00']
+				});
+		}
+	}
+		
+	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: ['#f93a0b', '#145650', '#ff5c00'], 
+				negBarColor: '#ff5c00'
+			});
+		}
+	}
+		
+	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: "#f93a0b", 
+				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: '#145650', 
+				colorMap: ['#145650', '#ff5c00']
+			});
+		}
+		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(249, 58, 11, .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(){
+		setTimeout(function(){
+			dlabSparkLine.resize();	
+		}, 1000);
+	});
+
+	jQuery(window).on('resize',function(){
+		setTimeout(function(){
+			dlabSparkLine.resize();	
+		}, 1000);
+	});     
+
+})(jQuery);

js/plugins-init/sweetalert.init.js

@@ -0,0 +1,2 @@
+"use strict"
+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) }) };

js/plugins-init/toastr-init.js

@@ -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);