| Current Path : /home/zqegovsj/www/us3.supplierlist.com/en/fonts/js/ |
| Current File : /home/zqegovsj/www/us3.supplierlist.com/en/fonts/js/dashboard.js |
"use strict";
(function(){
//Charts initialization
//http://www.chartjs.org/docs/
//Global Defaults
//fonts
Chart.defaults.global.defaultFontColor = '#666666';
Chart.defaults.global.defaultFontFamily = 'Roboto, Arial, sans-serif';
Chart.defaults.global.defaultFontSize = 14;
//responsive
Chart.defaults.global.maintainAspectRatio = false;
//legends
Chart.defaults.global.legend.labels.usePointStyle = true;
//scale
Chart.defaults.scale.gridLines.color = 'rgba(100,100,100,0.15)';
Chart.defaults.scale.gridLines.zeroLineColor = 'rgba(100,100,100,0.15)';
// Chart.defaults.scale.gridLines.drawTicks = false;
// Chart.defaults.scale.ticks.min = 0;
Chart.defaults.scale.ticks.beginAtZero = true;
Chart.defaults.scale.ticks.maxRotation = 0;
//padding for Y axes
Chart.defaults.scale.ticks.padding = 3;
Chart.defaults.scale.ticks.autoSkipPadding = 10;
//points
Chart.defaults.global.elements.point.radius = 5;
Chart.defaults.global.elements.point.borderColor = 'transparent';
//custom Chart plugin for set a background to chart
Chart.pluginService.register({
beforeDraw: function (chart, easing) {
if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
var ctx = chart.chart.ctx;
var chartArea = chart.chartArea;
ctx.save();
ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
ctx.restore();
}
}
});
var DAYS = [
"01.03",
"06.03",
"11.03",
"16.03",
"21.03",
"26.03",
"31.03"
];
var MONTHS = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];
var MONTHS_HALF = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
];
//New and Returned visitors
var $canvasesMonthlyVisitors = jQuery('.canvas-chart-line-new-returned-visitors');
if ($canvasesMonthlyVisitors.length) {
$canvasesMonthlyVisitors.each(function(i){
var config = {
type: 'line',
data: {
labels: MONTHS_HALF,
datasets: [{
label: "New Visitors",
//line options
backgroundColor: 'rgba(255, 184, 72, 0.15)',
borderColor: 'rgba(255, 184, 72, 1)',
borderWidth: 2,
fill: true,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "transparent",
pointBorderWidth: 0,
//visitors per month
data: [
26,
43,
23,
35,
10,
30,
35,
],
},
{
label: "Returned Visitors",
backgroundColor: 'rgba(237, 107, 117, 0.15)',
borderColor: 'rgba(237, 107, 117, 1)',
borderWidth: 2,
fill: true,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "transparent",
pointBorderWidth: 0,
//returned visitors per month
data: [
22,
18,
45,
22,
18,
26,
20,
],
},
//put new dataset here if needed to show multiple datasets on one graph
]
},
options: {
scales: {
yAxes: [{
ticks: {
maxTicksLimit: 5
}
}]
}
}
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //New and Returned visitors
//Yearly visitors
var $canvasesYearlyVisitors = jQuery('.canvas-chart-line-yearly-visitors');
if ($canvasesYearlyVisitors.length) {
$canvasesYearlyVisitors.each(function(i){
var config = {
type: 'line',
data: {
labels: MONTHS_HALF,
datasets: [{
label: "New Visitors",
//line options
backgroundColor: 'rgba(237, 107, 117, 0.6)',
borderColor: 'transparent',
borderWidth: 0,
fill: true,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "transparent",
pointBorderWidth: 0,
//visitors per month
data: [
40,
36,
20,
36,
28,
37,
46,
],
},
{
label: "Returned Visitors",
backgroundColor: 'rgba(237, 107, 117, 0.6)',
borderColor: 'transparent',
borderWidth: 0,
fill: true,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "transparent",
pointBorderWidth: 0,
//returned visitors per month
data: [
36,
26,
18,
34,
36,
27,
32,
],
},
{
label: "Registered Visitors",
backgroundColor: 'rgba(237, 107, 117, 0.6)',
borderColor: 'transparent',
borderWidth: 0,
fill: true,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "transparent",
pointBorderWidth: 0,
//registered visitors per month
data: [
16,
14,
22,
8,
19,
22,
24,
],
},
//put new dataset here if needed to show multiple datasets on one graph
]
},
options: {
scales: {
yAxes: [{
ticks: {
maxTicksLimit: 5
}
}]
}
}
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //Yearly visitors
//Monthly visitors
var $canvasesMonthlyVisitors = jQuery('.canvas-chart-line-monthly-visitors');
if ($canvasesMonthlyVisitors.length) {
$canvasesMonthlyVisitors.each(function(i){
var config = {
type: 'line',
data: {
labels: DAYS,
datasets: [{
label: "Unique Visitors",
backgroundColor: 'rgba(237, 107, 117, 0.5)',
borderColor: 'rgba(237, 107, 117, 0.5)',
borderWidth: '0',
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "rgba(237, 107, 117, 1)",
pointBorderWidth: 0,
tension: '0',
//visitors per month
data: [
446,
243,
544,
645,
443,
437,
750,
],
fill: true,
},
//put new dataset here if needed to show multiple datasets on one graph
]
},
options: {
}
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //Monthly visitors
//Monthly visitors with sells
var $canvasesMonthlyVisitors = jQuery('.canvas-chart-line-visitors-sels');
if ($canvasesMonthlyVisitors.length) {
$canvasesMonthlyVisitors.each(function(i){
var config = {
type: 'line',
data: {
labels: DAYS,
datasets: [{
label: "Visitors",
backgroundColor: 'rgba(255, 184, 72, 1)',
borderColor: 'rgba(255, 184, 72, 1)',
borderWidth: 3,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "rgba(255, 184, 72, 1)",
pointBorderWidth: 0,
tension: '0',
//visitors per month
data: [
46,
43,
34,
45,
43,
37,
50,
],
fill: false,
},
{
label: "Sells",
backgroundColor: 'rgba(237, 107, 117, 1)',
borderColor: 'rgba(237, 107, 117, 1)',
borderWidth: 3,
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "rgba(237, 107, 117, 1)",
pointBorderWidth: 0,
tension: '0',
//sells per month
data: [
4,
8,
6,
10,
5,
7,
10,
],
fill: false,
},
//put new dataset here if needed to show multiple datasets on one graph
]
},
options: {
scales: {
yAxes: [{
ticks: {
maxTicksLimit: 5
}
}]
}
}
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //Monthly visitors
//Monthly Conversion
var $canvasesMonthlyConversion = jQuery('.canvas-chart-line-conversions');
if ($canvasesMonthlyConversion.length) {
$canvasesMonthlyConversion.each(function(i){
var config = {
type: 'line',
data: {
labels: DAYS,
datasets: [{
label: "Conversion",
backgroundColor: 'rgba(111, 211, 227, 0.6)',
borderColor: 'rgba(91, 173, 186, 0.5)',
borderWidth: '2',
//point options
pointBorderColor: "transparent",
pointBackgroundColor: "rgba(111, 211, 227, 1)",
pointBorderWidth: 0,
//Conversion per month
data: [
1.2,
1.5,
1.3,
1.9,
2,
2.6,
2.4,
],
fill: true,
},
//put new dataset here if needed to show multiple datasets on one graph
]
},
options: {
}
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //Monthly Conversion
//Monthly Returned Visitors - Not used at the moment
var $canvasesMonthlyPieVisitors = jQuery('.canvas-chart-pie-visitors');
if ($canvasesMonthlyPieVisitors.length) {
$canvasesMonthlyPieVisitors.each(function(i){
var config = {
type: 'pie',
data: {
datasets: [{
data: [
76,
24,
],
backgroundColor: [
'rgba(237, 107, 117, 0.5)',
'rgba(237, 107, 117, 0.7)'
],
label: 'Monthly Visitors'
}],
labels: [
"New Visitors",
"Returned Visitors",
]
},
};
var canvas = jQuery(this)[0].getContext("2d");;
new Chart(canvas, config);
});
} //Monthly Returned Visitors
//end of Charts
//////////////
//vector map//
//////////////
//http://jvectormap.com/
var $vectorMap = jQuery('.world_map');
if ($vectorMap.length) {
jQuery('.world_map').vectorMap({
map: 'world_mill',
backgroundColor: "transparent",
zoomOnScroll: false,
regionsSelectable: true,
regionsSelectableOne: true,
markerSelectable: true,
markerSelectableOne: true,
regionStyle: {
initial: {
"fill": '#e9eaeb',
"fill-opacity": 1,
"stroke": 'none',
"stroke-width": 0,
"stroke-opacity": 0
},
selected: {
fill: '#ffb848'
},
},
markerStyle: {
initial: {
fill: '#dc5753',
stroke: 'transparent',
"stroke-width": 0,
},
hover: {
stroke: '#dc5753',
"stroke-width": 2,
cursor: 'pointer'
},
selected: {
"fill-opacity": 0.5
},
selectedHover: {
}
},
selectedRegions: ['GB'],
series: {
regions: [{
values: {
"AU": 1,
"BR": 2,
"CA": 5,
"CN": 100,
"TR": 1,
"IN": 1,
"GB": 1,
"US": 100,
},
scale: ["#45c2e9", "#ed6b75"],
normalizeFunction: 'polynomial'
}]
},
markers: [
{latLng: [41.90, 12.45], name: 'Vatican City'},
{latLng: [3.2, 73.22], name: 'Maldives'},
],
});
} //if vectorMap length
///////////////////
//events calendar//
///////////////////
//https://fullcalendar.io/
jQuery('.events_calendar').fullCalendar(
{
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay,listWeek'
},
defaultDate: '2017-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
aspectRatio: 1.1,
events: [
{
title: 'All Day Event',
start: '2017-03-01'
},
{
title: 'Long Event',
start: '2017-03-07',
end: '2017-03-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-03-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-03-16T16:00:00'
},
{
title: 'Conference',
start: '2017-03-11',
end: '2017-03-13'
},
{
title: 'Meeting',
start: '2017-03-12T10:30:00',
end: '2017-03-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-03-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-03-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-03-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-03-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-03-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-03-28'
}
]
}
);
/////////////////////
//date range picker//
/////////////////////
//http://www.daterangepicker.com/
(function() {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
jQuery('.dashboard-daterangepicker span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
jQuery('.dashboard-daterangepicker').daterangepicker({
"startDate": start,
"endDate": end,
"autoApply": true,
"linkedCalendars": false,
"showCustomRangeLabel": false,
"alwaysShowCalendars": true,
"ranges": {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
}, cb);
cb(start, end);
})();
/////////////
//sparkline//
/////////////
//http://omnipotent.net/jquery.sparkline/
jQuery('.sparklines').each(function(){
//sparkline type: 'line' (default), 'bar', 'tristate', 'discrete', 'bullet', 'pie', 'box'
var $this = jQuery(this);
var data = $this.data();
var type = data.type ? data.type : 'bar';
var lineColor = data.lineColor ? data.lineColor : '#4db19e';
var negBarColor = data.negColor ? data.negColor : '#dc5753';
var barWidth = data.barWidth ? data.barWidth : 4;
var height = data.height ? data.height : false;
var values = data.values ? JSON.parse("[" + data.values + "]") : false;
$this.sparkline(values, {
type: type,
lineColor: lineColor,
barColor: lineColor,
negBarColor: negBarColor,
barWidth: barWidth,
height: height,
sliceColors: ['#ed6b75', '#45c2e9', '#ffb848', '#94b86e']
});
});
//check all checkbox in table
jQuery('table th [type="checkbox"]').on('change', function() {
jQuery(this).closest('table').find('td [type="checkbox"]').prop('checked', this.checked);
});
})();