838 lines
32 KiB
JavaScript
838 lines
32 KiB
JavaScript
var SysEmpty = (function() {
|
|
function SysEmpty(){
|
|
var _this = this;
|
|
|
|
if(CBase.dt && CBase.dt.isStarPage){
|
|
_this.oBlank = new CBlank();
|
|
_this.oBlank.loadBlankView();
|
|
}
|
|
|
|
/*if($("#plugin-container").length){
|
|
this.initPlugins();
|
|
}else if(!$(".lc-menu ul li").length){
|
|
this.initEmpty();
|
|
}*/
|
|
|
|
// On resize - recalculate empty block height matching rest of blocks
|
|
$(window).resize(function(){
|
|
CBase.jsModule.doGraphResizing();
|
|
});
|
|
}
|
|
|
|
// Init empty
|
|
SysEmpty.prototype.initEmpty = function(){
|
|
var _this = this;
|
|
|
|
$(".wrapper-short, .wrapper-full").css({"background-position" : "-900px 0"});
|
|
$(".lc-menu").css({opacity : 0});
|
|
|
|
|
|
};
|
|
// Graph resize
|
|
SysEmpty.prototype.doGraphResizing = function(){
|
|
if($("div.empty-graph").length){
|
|
var jqFirstGraph = $(".chart_ico canvas").closest(".chart_ico").outerHeight();
|
|
$("div.empty-graph").css({height : jqFirstGraph - 37 - 44 + "px" });
|
|
}
|
|
};
|
|
CBlank.prototype.viewCallbackAfterAppend = function(jqObj, d){
|
|
|
|
// Dashboard charts
|
|
if(d && d.chartData) CBase.jsModule.loadCharts(d.chartData);
|
|
|
|
jqObj.find("#summary li").click(function(e){
|
|
e.stopPropagation();
|
|
window.open(
|
|
$(this).find("a").attr("href"),
|
|
'_blank'
|
|
);
|
|
});
|
|
jqObj.find("#summary li a").click(function(e){
|
|
e.stopPropagation();
|
|
});
|
|
|
|
|
|
setTimeout(function(){
|
|
CBase.ajaxLoader.disabled = true;
|
|
CBase.ajax({action : "getUsersOnline"}, this.url, function(d){
|
|
if(d && d.jsonok && d.users){
|
|
jqObj.find("li.ico-online span").html(d.users);
|
|
CBase.ajaxLoader.disabled = false;
|
|
}
|
|
});
|
|
}, 100);
|
|
|
|
};
|
|
CBlank.prototype.viewCallbackAfterShow = function(jqObj, d){
|
|
setTimeout(function(){
|
|
CBase.jsModule.doGraphResizing();
|
|
}, 150);
|
|
};
|
|
SysEmpty.prototype.loadCharts = function(vChartData){
|
|
var _this = this;
|
|
|
|
// Create months array for labels
|
|
if(vChartData.months){
|
|
var months = [];
|
|
$.each(vChartData.months, function(mon, v){
|
|
months[mon] = v;
|
|
});
|
|
// Remove first empty element
|
|
months.shift();
|
|
}
|
|
|
|
var jqObj = $("div#data-blocks"),
|
|
|
|
usersByDayWEB = jqObj.find("#users_by_day_WEB"),
|
|
usersByMonthWEB = jqObj.find("#users_by_month_WEB"),
|
|
usersByDaySYS = jqObj.find("#users_by_day_SYS"),
|
|
usersByMonthSYS = jqObj.find("#users_by_month_SYS"),
|
|
usersByDayCMS = jqObj.find("#users_by_day_CMS"),
|
|
usersByMonthCMS = jqObj.find("#users_by_month_CMS"),
|
|
|
|
ordersByDay = jqObj.find("#orders_by_day"),
|
|
ordersByMonth = jqObj.find("#orders_by_month"),
|
|
productsByMonth = jqObj.find("#products_by_month"),
|
|
productsByYear = jqObj.find("#products_by_year");
|
|
|
|
var barChartData = [], dataset = [], dataset2 = [], dayNumbers = [], monthToData = [], backgroundColor = [], years = [];
|
|
var i = 0, iMaxVal = 0;
|
|
|
|
backgroundColor = _this.getRandomColorFromSet("simpleOrange", 2);
|
|
backgroundColor[0] = "#518fec"; // Blue top
|
|
backgroundColor[2] = "#83320e"; // 2nd orange
|
|
backgroundColor[3] = "#28569a"; // 2nd blue
|
|
|
|
if(months){
|
|
var day = 0, d = 0, t = [], iCurr = 0, iPrev = 0;
|
|
|
|
// WEB User charts
|
|
if(usersByDayWEB.length && vChartData.usersPerDay_WEB && vChartData.usersPerDay_WEB.length != 0){
|
|
i = 0;
|
|
dayNumbers = [];
|
|
barChartData = {
|
|
labels: [],
|
|
datasets: []
|
|
};
|
|
|
|
iMaxVal = 0; monthToData = [0, 0];
|
|
t = Object.keys(vChartData.usersPerDay_WEB);
|
|
iCurr = t[1]; iPrev = t[0];
|
|
if(iCurr == 12 && iPrev == 1){
|
|
iCurr = t[0];
|
|
iPrev = t[1];
|
|
}
|
|
monthToData[0] = months[iPrev - 1];
|
|
monthToData[1] = months[iCurr - 1];
|
|
for(d in vChartData.usersPerDay_WEB){
|
|
if(vChartData.usersPerDay_WEB.hasOwnProperty(d)){
|
|
for(day in vChartData.usersPerDay_WEB[d]){
|
|
if(vChartData.usersPerDay_WEB[d].hasOwnProperty(day)){
|
|
if(!dayNumbers[day]) dayNumbers[day] = "day: " + day;
|
|
if(vChartData.usersPerDay_WEB[d][day] > iMaxVal) iMaxVal = vChartData.usersPerDay_WEB[d][day];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
dayNumbers.splice(0,1);
|
|
barChartData['labels'] = dayNumbers;
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: monthToData[0],
|
|
data: Object.values(vChartData.usersPerDay_WEB[iPrev]),
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: monthToData[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: Object.values(vChartData.usersPerDay_WEB[iCurr])
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByDayWEB.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByDayWEB.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
|
|
|
|
|
|
if(usersByMonthWEB.length && vChartData.usersPerMonth_WEB && vChartData.usersPerMonth_WEB.length != 0){
|
|
years = []; dataset = [0, 0]; i = 0;
|
|
barChartData = {
|
|
labels: months,
|
|
datasets: []
|
|
};
|
|
|
|
|
|
iMaxVal = 0;
|
|
$.each(vChartData.usersPerMonth_WEB, function(year, d){
|
|
dataset[i] = [];
|
|
years[i] = year;
|
|
$.each(d, function(mm, value){
|
|
dataset[i][mm-1] = value;
|
|
if(parseInt(value) > iMaxVal) iMaxVal = value;
|
|
});
|
|
i++;
|
|
});
|
|
|
|
//backgroundColor = _this.getRandomColorFromSet("simplelight", 2);
|
|
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: years[0],
|
|
data: dataset[0],
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: years[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: dataset[1]
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByMonthWEB.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByMonthWEB.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
// SYS User charts
|
|
if(usersByDaySYS.length && vChartData.usersPerDay_SYS && vChartData.usersPerDay_SYS.length != 0){
|
|
i = 0;
|
|
dayNumbers = [];
|
|
barChartData = {
|
|
labels: [],
|
|
datasets: []
|
|
};
|
|
|
|
iMaxVal = 0; monthToData = [0, 0];
|
|
t = Object.keys(vChartData.usersPerDay_SYS);
|
|
iCurr = t[1]; iPrev = t[0];
|
|
if(iCurr == 12 && iPrev == 1){
|
|
iCurr = t[0];
|
|
iPrev = t[1];
|
|
}
|
|
monthToData[0] = months[iPrev - 1];
|
|
monthToData[1] = months[iCurr - 1];
|
|
for(d in vChartData.usersPerDay_SYS){
|
|
if(vChartData.usersPerDay_SYS.hasOwnProperty(d)){
|
|
for(day in vChartData.usersPerDay_SYS[d]){
|
|
if(vChartData.usersPerDay_SYS[d].hasOwnProperty(day)){
|
|
if(!dayNumbers[day]) dayNumbers[day] = "day: " + day;
|
|
if(vChartData.usersPerDay_SYS[d][day] > iMaxVal) iMaxVal = vChartData.usersPerDay_SYS[d][day];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
dayNumbers.splice(0,1);
|
|
barChartData['labels'] = dayNumbers;
|
|
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: monthToData[0],
|
|
data: Object.values(vChartData.usersPerDay_SYS[iPrev]),
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: monthToData[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: Object.values(vChartData.usersPerDay_SYS[iCurr])
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByDaySYS.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByDaySYS.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
if(usersByMonthSYS.length && vChartData.usersPerMonth_SYS && vChartData.usersPerMonth_SYS.length != 0){
|
|
years = []; dataset = [0, 0]; i = 0;
|
|
barChartData = {
|
|
labels: months,
|
|
datasets: []
|
|
};
|
|
|
|
iMaxVal = 0;
|
|
$.each(vChartData.usersPerMonth_SYS, function(year, d){
|
|
dataset[i] = [];
|
|
years[i] = year;
|
|
$.each(d, function(mm, value){
|
|
dataset[i][mm-1] = value;
|
|
if(parseInt(value) > iMaxVal) iMaxVal = value;
|
|
});
|
|
i++;
|
|
});
|
|
|
|
//backgroundColor = _this.getRandomColorFromSet("simplelight", 2);
|
|
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: years[0],
|
|
data: dataset[0],
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: years[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: dataset[1]
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByMonthSYS.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByMonthSYS.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
|
|
backgroundColor = _this.getRandomColorFromSet("simplelight", 2);
|
|
backgroundColor[0] = "#518fec";
|
|
|
|
|
|
|
|
// CMS User charts
|
|
if(usersByDayCMS.length && vChartData.usersPerDay_CMS && vChartData.usersPerDay_CMS.length != 0){
|
|
i = 0;
|
|
dayNumbers = [];
|
|
barChartData = {
|
|
labels: [],
|
|
datasets: []
|
|
};
|
|
|
|
iMaxVal = 0; monthToData = [0, 0];
|
|
t = Object.keys(vChartData.usersPerDay_CMS);
|
|
iCurr = t[1]; iPrev = t[0];
|
|
if(iCurr == 12 && iPrev == 1){
|
|
iCurr = t[0];
|
|
iPrev = t[1];
|
|
}
|
|
monthToData[0] = months[iPrev - 1];
|
|
monthToData[1] = months[iCurr - 1];
|
|
for(d in vChartData.usersPerDay_CMS){
|
|
if(vChartData.usersPerDay_CMS.hasOwnProperty(d)){
|
|
for(day in vChartData.usersPerDay_CMS[d]){
|
|
if(vChartData.usersPerDay_CMS[d].hasOwnProperty(day)){
|
|
if(!dayNumbers[day]) dayNumbers[day] = "day: " + day;
|
|
if(vChartData.usersPerDay_CMS[d][day] > iMaxVal) iMaxVal = vChartData.usersPerDay_CMS[d][day];
|
|
}
|
|
}
|
|
}
|
|
}
|
|
dayNumbers.splice(0,1);
|
|
barChartData['labels'] = dayNumbers;
|
|
|
|
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: monthToData[0],
|
|
data: Object.values(vChartData.usersPerDay_CMS[iPrev]),
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: monthToData[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: Object.values(vChartData.usersPerDay_CMS[iCurr])
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByDayCMS.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByDayCMS.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
if(usersByMonthCMS.length && vChartData.usersPerMonth_CMS && vChartData.usersPerMonth_CMS.length != 0){
|
|
years = []; dataset = [0, 0]; i = 0;
|
|
barChartData = {
|
|
labels: months,
|
|
datasets: []
|
|
};
|
|
|
|
iMaxVal = 0;
|
|
$.each(vChartData.usersPerMonth_CMS, function(year, d){
|
|
dataset[i] = [];
|
|
years[i] = year;
|
|
$.each(d, function(mm, value){
|
|
dataset[i][mm-1] = value;
|
|
if(parseInt(value) > iMaxVal) iMaxVal = value;
|
|
});
|
|
i++;
|
|
});
|
|
|
|
//backgroundColor = _this.getRandomColorFromSet("simplelight", 2);
|
|
|
|
barChartData["datasets"].push({
|
|
type: 'line',
|
|
label: years[0],
|
|
data: dataset[0],
|
|
borderWidth: 1,
|
|
fill: false,
|
|
backgroundColor: backgroundColor[0],
|
|
borderColor: backgroundColor[0],
|
|
pointBackgroundColor: backgroundColor[0],
|
|
pointBorderColor: backgroundColor[0],
|
|
pointBorderWidth: 1,
|
|
pointHoverRadius: 5,
|
|
pointHoverBackgroundColor: backgroundColor[0],
|
|
pointHoverBorderColor: backgroundColor[0],
|
|
pointHoverBorderWidth: 2,
|
|
pointRadius: 3,
|
|
pointHitRadius: 5,
|
|
yAxisID: "y-axis-1"
|
|
});
|
|
barChartData["datasets"].push({
|
|
type: 'bar',
|
|
label: years[1],
|
|
backgroundColor: backgroundColor[1],
|
|
data: dataset[1]
|
|
});
|
|
|
|
_this.chartDrawingFunction({id:usersByMonthCMS.attr("id"), dataSet:barChartData, msg:'', suggestedMaxYTick: parseFloat(iMaxVal)});
|
|
} else {
|
|
usersByMonthCMS.hide().closest("li").addClass("empty-graph");
|
|
}
|
|
|
|
}
|
|
|
|
|
|
};
|
|
SysEmpty.prototype.getRandomColorFromSet = function(sBaseColor, count){
|
|
var _this = this;
|
|
if(!_this.definedColorSets){
|
|
_this.definedColorSets = {
|
|
simpleOrange : ["#ea5a1b","#ea5a1b","#ea5a1b","#ea5a1b","#ea5a1b","#f47018","#f47018","#f47018","#f47018","#f47018","#f47018"],
|
|
simpleBlue: ["#518fec","#518fec","#518fec","#518fec","#518fec","#518fec","#518fec","#518fec","#518fec","#518fec","#518fec"],
|
|
simplelight : ["#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8","#c8c8c8"],
|
|
//redset : ["#aa3c17","#e84017","#ce084d","#ffb7be","#f96d6b","#f78502","#ef0933","#eab993","#e02362","#ef8809","#c45819","#c40724","#f9a19f"],
|
|
orange : ["#f7cd62", "#ef7a32", "#e06d0f", "#fca76a", "#f4bc6e", "#ffb872", "#dd9349", "#e2900b", "#ffddc6", "#fc9219", "#d88961", "#ffcfa0", "#fcb08d", "#bf782d", "#d8b250", "#ef681f", "#f4ab5d", "#c16a1f"],
|
|
yellowset : ["#ef8809","#81910b","#ceaf12","#dbd034","#e7ea2a","#fff316","#ddd540","#e4e874","#a3ef94","#9af446","#78db57","#35c625","#027a0e","#86f4b8","#5ce0a4","#29bca9","#376b40"],
|
|
green : ["#72e086", "#8cfc8a", "#48f745", "#82edd0", "#a9f9ad", "#28baa6", "#14e587", "#caffb2", "#4cefa3", "#0dc435", "#adef4a", "#67d334", "#a5f957", "#0dc423", "#8ce56b", "#07b57b", "#71edc8", "#6cd35d"],
|
|
blue : ["#290d99", "#3da3e2", "#937bfc", "#8bedf9", "#8d8fd6", "#6460ea", "#1b2b91", "#5682c9", "#58c2c4", "#c0eaf9", "#5892d3", "#a3ebff", "#1a577f", "#14e8e8", "#569fc4", "#afa2e5", "#6951c1", "#070e96"],
|
|
purpleset : ["#4b96c1","#809ef2","#26c1e0","#273891","#5042e5","#fc79c3","#f925d6","#c22fd6","#4a1a9e","#5f1c8c","#aa2a62","#c11766","#e008d9","#f954d0","#9634d8","#bc74ed","#db20b2","#e81ed7","#ea72cc","#7a35ba","#8c63d8","#a371c6","#b387ff","#d9aeef"],
|
|
randomset : ["#75ffd5","#d7ef7f","#f9cfbd","#e5bdfc","#f9868a","#dd75f9","#71f273","#80fcf2","#efef73","#9effa6","#ffccda","#f7b2f6","#ed806f","#8af7cd","#f7bb9b","#e8f975","#ffe99b","#b876e8","#c6f8ff"],
|
|
randomset2 : ["#a50be2","#a0040f","#025a72","#4901c4","#f40c2f","#8a9607","#e28502","#20e80d","#0a997a","#e80d8d","#4d04a0","#c4ab09","#c609b4","#cc570e","#2c046d","#0f9e2e","#54400a","#ff0ae6","#93ea10","#8a75ad","#8c255e","#08a593"]
|
|
//monochrome : ["#efefef", "#828282", "#919191", "#dbdbdb", "#2b2b2b", "#595959", "#f7f7f7", "#111111", "#939393", "#939393", "#636363", "#e8e8e8", "#3d3d3d", "#3f3f3f", "#212121", "#191919", "#606060", "#a8a8a8"]
|
|
};
|
|
}
|
|
if(sBaseColor===undefined){
|
|
var colors = [
|
|
//"redset",
|
|
//"orange",
|
|
"yellowset",
|
|
"green",
|
|
"custom",
|
|
"blue", "purpleset", "randomset"
|
|
//"monochrome"
|
|
];
|
|
sBaseColor = colors[Math.round(Math.random() * (colors.length-1))];
|
|
}
|
|
if(count === undefined)
|
|
count = 1;
|
|
if(sBaseColor && _this.definedColorSets[sBaseColor]){
|
|
if(_this.definedColorSets[sBaseColor].length){
|
|
if(count>1){
|
|
var i,arr = [];
|
|
for(i=0;i<count;i++)
|
|
arr.push(_this.hexToRgb(_this.definedColorSets[sBaseColor].pop()))
|
|
return arr;
|
|
}else
|
|
return _this.hexToRgb(_this.definedColorSets[sBaseColor].pop());
|
|
}
|
|
}
|
|
|
|
};
|
|
SysEmpty.prototype.hexToRgb = function(hex){
|
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
return result ? 'rgba(' + parseInt(result[1], 16) + ',' + parseInt(result[2], 16) + ',' + parseInt(result[3], 16) + ',.8)' : null;
|
|
};
|
|
SysEmpty.prototype.axesColor = "#606060";
|
|
SysEmpty.prototype.gridColor = "#606060";
|
|
SysEmpty.prototype.legendColor = "#606060";
|
|
SysEmpty.prototype.chartDrawingFunction = function(vCfg, stacked, multiAxes, bubbles, annotationLine, $xMinMax, $yMinMax){
|
|
|
|
stacked = !!stacked;
|
|
multiAxes = !!multiAxes;
|
|
var suggestedMaxYTick = !!vCfg['suggestedMaxYTick'] ? vCfg['suggestedMaxYTick'] * 1.5 : false;
|
|
|
|
var _this = this;
|
|
var ctx = document.getElementById(vCfg['id']).getContext("2d");
|
|
var original = Chart.defaults.global.legend.onClick;
|
|
|
|
|
|
var cfg = {
|
|
data: vCfg['dataSet'],
|
|
options: {
|
|
responsive: true,
|
|
title:{
|
|
display:true,
|
|
text: vCfg['msg']
|
|
},
|
|
legend: {
|
|
labels: {
|
|
fontColor: _this.legendColor,
|
|
fontSize: 12
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// Disable animation
|
|
if(_this.print)
|
|
cfg["options"]["animation"] = false;
|
|
|
|
// Add trendLine
|
|
if(annotationLine && annotationLine.length > 1){
|
|
cfg["options"]['annotation'] = {
|
|
events: ['click', 'dblclick', 'mouseover', 'mouseout'],
|
|
annotations: [{
|
|
type: 'line',
|
|
mode: 'horizontal',
|
|
scaleID: 'y-axis-1',
|
|
value: annotationLine[0],
|
|
endValue: annotationLine[1],
|
|
borderColor: '#70cbf4',
|
|
borderWidth: 1,
|
|
label: {
|
|
enabled: false,
|
|
content: 'Test label'
|
|
}
|
|
}]
|
|
};
|
|
}else if(annotationLine && annotationLine.length == 1){
|
|
cfg["options"]['annotation'] = {
|
|
events: ['click', 'dblclick', 'mouseover', 'mouseout'],
|
|
annotations: [{
|
|
type: 'line',
|
|
mode: 'horizontal',
|
|
scaleID: 'y-axis-1',
|
|
value: annotationLine[0],
|
|
borderColor: '#70cbf4',
|
|
borderWidth: 1,
|
|
label: {
|
|
enabled: false,
|
|
content: 'Test label'
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
|
|
var $i = 0;
|
|
if(bubbles){
|
|
cfg["type"] = "bubble";
|
|
|
|
if($yMinMax && $xMinMax){
|
|
cfg["options"]['scales'] = {
|
|
yAxes: [{
|
|
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
|
display: true,
|
|
position: "left",
|
|
id: "y-axis-1",
|
|
stacked: stacked,
|
|
ticks: {
|
|
max: parseFloat($yMinMax.max),
|
|
min: parseFloat($yMinMax.min),
|
|
fontColor: _this.axesColor
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
ticks: {
|
|
max: parseFloat($xMinMax.max),
|
|
min: parseFloat($xMinMax.min),
|
|
fontColor: _this.axesColor
|
|
}
|
|
}]
|
|
};
|
|
}
|
|
|
|
cfg["options"]['legend'] = {
|
|
onClick: function(e, legendItem){
|
|
/*if(legendItem.hidden != true)
|
|
$i++;
|
|
else
|
|
$i--;
|
|
|
|
if($i > 0)
|
|
console.log("we hide our trendline");
|
|
else
|
|
console.log("we show our trendline");*/
|
|
|
|
original.call(this, e, legendItem);
|
|
}
|
|
};
|
|
window.myChart = new Chart(ctx, cfg);
|
|
}else{
|
|
cfg["options"]["scales"] = {
|
|
yAxes: [{
|
|
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
|
display: true,
|
|
position: "left",
|
|
id: "y-axis-1",
|
|
stacked: stacked,
|
|
ticks: {
|
|
beginAtZero:true,
|
|
// suggestedMin: 0,
|
|
suggestedMax: suggestedMaxYTick,
|
|
fontColor: _this.axesColor
|
|
},
|
|
gridLines: {
|
|
color: _this.gridColor
|
|
}
|
|
}, {
|
|
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
|
|
display: multiAxes,
|
|
position: "right",
|
|
id: "y-axis-2",
|
|
gridLines: {
|
|
drawOnChartArea: false,
|
|
color: _this.gridColor
|
|
},
|
|
ticks: {
|
|
beginAtZero:true,
|
|
fontColor: _this.axesColor
|
|
}
|
|
}],
|
|
xAxes: [{
|
|
stacked: stacked,
|
|
ticks: {
|
|
fontColor: _this.axesColor
|
|
},
|
|
gridLines: {
|
|
color: _this.gridColor
|
|
}
|
|
}]
|
|
};
|
|
window.myBar = Chart.Bar(ctx, cfg);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
|
|
// Init plugin base page
|
|
SysEmpty.prototype.initPlugins = function(){
|
|
var _this = this;
|
|
|
|
$(".cnt, .lc-menu").hide();
|
|
$(".wrapper-short, .wrapper-full").css({"background-position" : "-900px 0"});
|
|
//$(".lc-menu").css({opacity : 0, width : 1});
|
|
|
|
|
|
$( ".column" ).sortable({
|
|
connectWith: ".column",
|
|
opacity: 0.5,
|
|
handle: ".portlet-header",
|
|
stop: function() {
|
|
_this.updatePortletPlaces();
|
|
}
|
|
|
|
|
|
});
|
|
|
|
$(".portlet").each(function(){
|
|
var sclass = "ui-icon-minusthick";
|
|
if(!$(this).find(".portlet-content").is(":visible"))
|
|
sclass = "ui-icon-plusthick";
|
|
$(this).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
|
|
.find( ".portlet-header" )
|
|
.addClass( "ui-widget-header ui-corner-all" )
|
|
.prepend( "<span class='ui-icon "+sclass+"'></span>")
|
|
.end()
|
|
.find( ".portlet-content" );
|
|
});
|
|
|
|
$(".portlet-header .ui-icon").click(function() {
|
|
$(this).toggleClass( "ui-icon-minusthick" ).toggleClass("ui-icon-plusthick");
|
|
$(this).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
|
|
|
|
_this.updatePortletBox($(this));
|
|
});
|
|
$( ".portlet-header" ).disableSelection();
|
|
|
|
|
|
$(".portletAjax").each(function(){
|
|
if($(this).find(".portlet-content").is(":visible"))
|
|
_this.loadData($(this));
|
|
});
|
|
var i = setInterval(function(){
|
|
$(".portlet").each(function(){
|
|
$(this).animate({opacity : 0.6}, 200, function(){
|
|
$(this).addClass("portletAjax");
|
|
});
|
|
if($(this).find(".portlet-content").is(":visible"))
|
|
_this.loadData($(this));
|
|
});
|
|
}, 1000*60*2);
|
|
|
|
};
|
|
|
|
// Send for get data
|
|
SysEmpty.prototype.bindPluginActions = function(obj){
|
|
obj.find(".portlet-drop-marker ul:even").addClass("even");
|
|
obj.find("ul.dxr").bind({
|
|
mouseover : function(){
|
|
$(this).addClass("hover");
|
|
},
|
|
mouseout : function(){
|
|
$(this).removeClass("hover");
|
|
}
|
|
});
|
|
};
|
|
|
|
// Send for get data
|
|
SysEmpty.prototype.loadData = function(obj){
|
|
var _this = this;
|
|
if(obj){
|
|
var data = {
|
|
action : "loadPlugin",
|
|
id : obj.attr("id")
|
|
};
|
|
|
|
CBase.ajaxLoader.disabled = true;
|
|
CBase.ajax(data, false, function(d){
|
|
if(d && d.jsonok && d.html){
|
|
|
|
obj.find(".portlet-drop-marker").html(d.html);
|
|
_this.bindPluginActions(obj);
|
|
obj.animate({opacity : 1}, 200, function(){
|
|
$(this).removeClass("portletAjax");
|
|
});
|
|
}
|
|
})
|
|
|
|
}
|
|
};
|
|
|
|
// Save portlet position
|
|
SysEmpty.prototype.updatePortletPlaces = function(){
|
|
|
|
var cols = {}, i = 1;
|
|
$(".column").each(function(){
|
|
cols[i++] = $(this).sortable("toArray");
|
|
});
|
|
|
|
var data = {
|
|
action : "savePositions",
|
|
positions : $.toJSON(cols)
|
|
};
|
|
|
|
CBase.ajaxLoader.disabled = true;
|
|
CBase.ajax(data, false, function(d){
|
|
|
|
});
|
|
|
|
};
|
|
|
|
// Save portlet box state
|
|
SysEmpty.prototype.updatePortletBox = function(obj){
|
|
|
|
obj = obj.closest(".portlet");
|
|
var visible = 0;
|
|
if(obj.find(".portlet-content").is(":visible"))
|
|
visible = 1;
|
|
|
|
if(visible)
|
|
this.loadData(obj);
|
|
var f = {};
|
|
f[obj.attr("id")] = visible;
|
|
|
|
var data = {
|
|
action : "saveBoxLayout",
|
|
position : $.toJSON(f)
|
|
};
|
|
|
|
CBase.ajaxLoader.disabled = true;
|
|
CBase.ajax(data, false, function(d){
|
|
|
|
});
|
|
|
|
};
|
|
|
|
return SysEmpty;
|
|
|
|
})();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|