You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
445 lines
14 KiB
445 lines
14 KiB
/**
|
|
* 图表+表格组件，参见showChartTable()
|
|
*/
|
|
|
|
|
|
|
|
|
|
/*var _mtssTemplate = Handlebars.compile('../widget/mtss.handlebars');*/
|
|
|
|
function _setupDateRangePicker(eid, startDate, endDate, fn, options) {
|
|
//var now = moment();
|
|
$('#' + eid).daterangepicker({
|
|
"ranges": {
|
|
"近7天": [moment().subtract(6, 'days'), moment()],
|
|
"近15天": [moment().subtract(14, 'days'), moment()],
|
|
"近30天": [moment().subtract(29, 'days'), moment()],
|
|
"近90天": [moment().subtract(89, 'days'), moment()],
|
|
"本月起": [moment().startOf('month'), moment()],
|
|
"上月起": [moment().subtract(1, 'month').startOf('month'), moment()]
|
|
},
|
|
"locale": {
|
|
"format": "YYYY-MM-DD",
|
|
"separator": options && options.realtime == true ? " 与 " : " 至 ",
|
|
"applyLabel": "确定",
|
|
"cancelLabel": "取消",
|
|
"customRangeLabel": "自定义",
|
|
"daysOfWeek": [
|
|
"日",
|
|
"一",
|
|
"二",
|
|
"三",
|
|
"四",
|
|
"五",
|
|
"六"
|
|
],
|
|
"monthNames": [
|
|
"1月",
|
|
"2月",
|
|
"3月",
|
|
"4月",
|
|
"5月",
|
|
"6月",
|
|
"7月",
|
|
"8月",
|
|
"9月",
|
|
"10月",
|
|
"11月",
|
|
"12月"
|
|
],
|
|
"firstDay": 1
|
|
},
|
|
"startDate": startDate,
|
|
"endDate": endDate
|
|
}, function (start, end, label) {
|
|
var s = start.format('YYYY-MM-DD');
|
|
var e = end.format('YYYY-MM-DD');
|
|
var str = options && options.realtime == true ? " 与 " : " 至 ";
|
|
$("#" + eid).children("span").html(s + str + e);
|
|
fn(s, e);
|
|
});
|
|
}
|
|
|
|
function _hasPrecent(s) {
|
|
return s && s.substr(-1) == '%';
|
|
}
|
|
function _erasePrecent(s) {
|
|
return s.substr(0, s.length - 1);
|
|
}
|
|
function _noPrecent(s) {
|
|
if (_hasPrecent(s)) return _erasePrecent(s);
|
|
else return s;
|
|
}
|
|
|
|
// 检查label最后是不是以%结尾，如果是说明该图表要以%显示
|
|
function _handleLabelPrecent(ds) {
|
|
var ret = false;
|
|
for (var i = 0; i < ds.length; ++i) {
|
|
var item = ds[i];
|
|
if (_hasPrecent(item.label)) {
|
|
ret = true;
|
|
item.label = _erasePrecent(item.label);
|
|
}
|
|
}
|
|
return ret;
|
|
}
|
|
|
|
// 只显示图表
|
|
function _plotChart(eid, ds, options) {
|
|
var showBars = options && options.stack == true;
|
|
//console.log(options)
|
|
//console.log(options.stack)
|
|
|
|
|
|
var showRealTime = options && options.realtime == true; //实时数据，坐标显示时分
|
|
var showLine = !showBars;
|
|
var isPrecent = _handleLabelPrecent(ds);
|
|
var op;
|
|
if (showLine) {
|
|
op = {
|
|
xaxes: [{
|
|
mode: 'time',
|
|
timezone: 'browser',
|
|
tickFormatter: function (val, axis) {
|
|
if (showRealTime) return moment(val, 'x').format('HH:mm');
|
|
else return moment(val, 'x').format('MM-DD');
|
|
}
|
|
}],
|
|
yaxes: [{
|
|
tickFormatter: isPrecent ? function (val, axis) {
|
|
return val.toFixed(3) + '%';
|
|
} :
|
|
function (val, axis) {
|
|
return val.toFixed(1);
|
|
}
|
|
}],
|
|
grid: {
|
|
hoverable: true //IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%x is %y<br>%s",
|
|
xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d",
|
|
shifts: {
|
|
x: -60,
|
|
y: 25
|
|
}
|
|
},
|
|
shadowSize: 0,
|
|
legend: {
|
|
hideable: ds.length > 1,
|
|
position: "se"
|
|
|
|
}
|
|
};
|
|
} else if (showBars) {
|
|
op = {
|
|
xaxis: {
|
|
mode: 'time',
|
|
timezone: 'browser',
|
|
tickFormatter: function (val, axis) {
|
|
return moment(val, 'x').format('MM-DD');
|
|
}
|
|
},
|
|
yaxis: {
|
|
tickFormatter: function (val, axis) {
|
|
return val.toFixed(1);
|
|
}
|
|
/*tickFormatter : function (value, axis) {
|
|
var value = value + '';
|
|
if (value.indexOf('.') == -1) {
|
|
return value + '.00';
|
|
} else {
|
|
var arr = value.split('.');
|
|
if (arr[1].length == 2) {
|
|
return value;
|
|
} else {
|
|
return value + '0';
|
|
}
|
|
}
|
|
}*/
|
|
},
|
|
series: {
|
|
stack: true,
|
|
group: true,
|
|
groupInterval: 24 * 60 * 60 * 1000,
|
|
bars: {
|
|
show: true,
|
|
align: 'center',
|
|
lineWidth: 0,
|
|
barWidth: 24 * 60 * 60 * 500
|
|
}
|
|
},
|
|
grid: {
|
|
hoverable: true //IMPORTANT! this is needed for tooltip to work
|
|
},
|
|
tooltip: true,
|
|
tooltipOpts: {
|
|
content: "%x is %y<br>%s",
|
|
xDateFormat: showRealTime ? "%H:%M" : "%Y-%m-%d",
|
|
shifts: {
|
|
x: -60,
|
|
y: 25
|
|
}
|
|
},
|
|
shadowSize: 0
|
|
}
|
|
}
|
|
$.plot($('#' + eid + '_chartZone'), ds, op);
|
|
}
|
|
|
|
// 显示图表和表格
|
|
function _plotChartTable(eid, data, index, isChart, options) {
|
|
if (options.type == '2m') {
|
|
isChart = !isChart;
|
|
}
|
|
if (isChart) {
|
|
// 图表
|
|
if (options.type == 'm1') {
|
|
var seriesData = [];
|
|
for (var i = 0; i < data.data.length; ++i) {
|
|
seriesData.push([data.data[i][0], data.data[i][index]]);
|
|
}
|
|
var ds = [{ data: seriesData, label: data.columns[index] }];
|
|
_plotChart(eid, ds, options);
|
|
} else { // options.type == 'mn' || options.type == '1m'
|
|
var ds = [];
|
|
for (var i = 1; i < data.columns.length; ++i) {
|
|
var seriesData = [];
|
|
for (var j = 0; j < data.data.length; ++j) {
|
|
seriesData.push([data.data[j][0], data.data[j][i]]);
|
|
}
|
|
ds.push({ data: seriesData, label: data.columns[i] });
|
|
}
|
|
_plotChart(eid, ds, options);
|
|
}
|
|
} else {
|
|
$('#' + eid + '_chartZone').html('<table id="' + eid + '_chartZone_table" class="table table-striped table-bordered table-hover" width="100%"></table>');
|
|
|
|
// 表格
|
|
var columns = [];
|
|
for (var i = 0; i < data.columns.length; ++i) {
|
|
columns.push({ title: data.columns[i] });
|
|
}
|
|
var dataset = [];
|
|
var formatStr = 'YYYY-MM-DD';
|
|
if (options && options.realtime == true) {
|
|
formatStr = 'HH:mm';
|
|
}
|
|
//console.log(formatStr)
|
|
|
|
for (var i = 0; i < data.data.length; ++i) {
|
|
console.log(data)
|
|
var line = [moment(data.data[i][0], 'x').format(formatStr)];
|
|
//var line = [data.data[i][0]];
|
|
console.log(line)
|
|
for (var j = 1; j < data.data[i].length; ++j) {
|
|
line.push(data.data[i][j]);
|
|
}
|
|
console.log(line)
|
|
dataset.push(line);
|
|
}
|
|
|
|
// 处理%的列
|
|
for (var i = 1; i < columns.length; ++i) {
|
|
if (_hasPrecent(columns[i].title)) {
|
|
columns[i].title = _erasePrecent(columns[i].title);
|
|
for (var j = 0; j < dataset.length; ++j) {
|
|
dataset[j][i] = dataset[j][i].toFixed(3) + '%';
|
|
}
|
|
}
|
|
}
|
|
|
|
$('#' + eid + '_chartZone_table').DataTable({
|
|
data: dataset,
|
|
columns: columns,
|
|
language: {
|
|
search: "搜索",
|
|
lengthMenu: "每页显示 _MENU_ 行",
|
|
info: "显示第_START_-_END_行 共_TOTAL_行",
|
|
infoFiltered: "(从_MAX_行中过滤)",
|
|
paginate: {
|
|
first: "首页",
|
|
last: "末页",
|
|
next: "下页",
|
|
previous: "上页"
|
|
}
|
|
},
|
|
dom: 'lBfrtip',
|
|
buttons: ['copyHtml5', 'excelHtml5']
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
function _refreshChartTable(eid, data, selTabText, selModeName, options) {
|
|
var modeName = selModeName;
|
|
if (!modeName) modeName = $("lable[name^='" + eid + "_mode_'].active").attr("name");
|
|
|
|
modeName = modeName.substr(modeName.indexOf("_mode_") + 6);
|
|
|
|
var isChart = modeName == "chart";
|
|
|
|
if (options.type == 'm1' || options.type == 'mn') {
|
|
var tabText = selTabText;
|
|
if (!tabText) tabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html();
|
|
|
|
if (options.type == 'm1') {
|
|
for (var i = 1; i < data.columns.length; ++i) {
|
|
if (_noPrecent(data.columns[i]) == tabText) {
|
|
_plotChartTable(eid, data, i, isChart, options);
|
|
break;
|
|
}
|
|
}
|
|
} else { // options.type == 'mn'
|
|
for (var i = 0; i < data.series.length; ++i) {
|
|
if (_noPrecent(data.series[i].title) == tabText) {
|
|
_plotChartTable(eid, data.series[i], null, isChart, options);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
} else { // options.type == '1m'
|
|
_plotChartTable(eid, data, null, isChart, options);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 显示图表+表格，分为3种类型
|
|
* options.type = m1 多项单系列，例如用户活跃-活跃系列
|
|
* options.type = 1m 单项多系列，例如用户活跃-渠道活跃
|
|
* options.type = mn 多项多系列，例如用户活跃-渠道活跃留存
|
|
*/
|
|
function _showChartTable(eid, data, startDate, endDate, fn, options) {
|
|
var tabs;
|
|
if (options.type == 'm1') {
|
|
tabs = $.grep(data.columns, function (n, i) {
|
|
return i > 0;
|
|
});
|
|
} else if (options.type == 'mn') {
|
|
tabs = [];
|
|
for (var i = 0; i < data.series.length; ++i) {
|
|
tabs.push(data.series[i].title);
|
|
}
|
|
} else if (options.type == '1m' || options.type == '2m') {
|
|
tabs = [options.title];
|
|
}
|
|
|
|
// 去掉标签最后的%
|
|
for (var i = 0; i < tabs.length; ++i) {
|
|
if (_hasPrecent(tabs[i])) {
|
|
tabs[i] = _erasePrecent(tabs[i]);
|
|
}
|
|
}
|
|
|
|
var selTabText = null;
|
|
var selModeName = null;
|
|
if ($("a[href^='#" + eid + "_tab_']").length > 0) {
|
|
// 图表已存在，是更改日期而刷新图表
|
|
selTabText = $("a[href^='#" + eid + "_tab_']").parent(".active").children("a").html();
|
|
selModeName = $("lable[name^='" + eid + "_mode_'].active").attr("name");
|
|
}
|
|
|
|
var source = $("#box").html();
|
|
var _mtssTemplate = Handlebars.compile(source);
|
|
|
|
var content = _mtssTemplate({
|
|
chartId: eid,
|
|
startDate: startDate,
|
|
endDate: endDate,
|
|
tabs: tabs
|
|
});
|
|
$('#' + eid).html(content);
|
|
if (selTabText) {
|
|
// 恢复到原来选择tab和mode
|
|
$("a[href^='#" + eid + "_tab_'][desc='" + selTabText + "']").parent().addClass("active");
|
|
$("a[href^='#" + eid + "_tab_'][desc!='" + selTabText + "']").parent().removeClass("active");
|
|
|
|
$("lable[name^='" + eid + "_mode_'][name='" + selModeName + "']").addClass("active");
|
|
$("lable[name^='" + eid + "_mode_'][name!='" + selModeName + "']").removeClass("active");
|
|
}
|
|
|
|
if (options.type == 'm1' || options.type == 'mn') {
|
|
$("a[href^='#" + eid + "_tab_']").click(function (e) {
|
|
if ($(this).parent(".active").length > 0) return;
|
|
_refreshChartTable(eid, data, $(this).html(), null, options);
|
|
});
|
|
}
|
|
|
|
$("lable[name^='" + eid + "_mode_']").click(function (e) {
|
|
if ($(this).hasClass("active")) return;
|
|
_refreshChartTable(eid, data, null, $(this).attr("name"), options);
|
|
});
|
|
|
|
// 安装日历选择组件
|
|
_setupDateRangePicker(eid + "_datepicker", startDate, endDate, fn, options);
|
|
|
|
_refreshChartTable(eid, data, selTabText, selModeName, options);
|
|
}
|
|
|
|
function setuptChartTable(pid, url, args, options) {
|
|
// 构造eid，创建div
|
|
var uris = url.split("/");
|
|
var eid = 'id_' + uris[uris.length - 1]; // 取url最后的一段
|
|
$('#' + pid).append('<div class="row"><div class="col-lg-12"><div class="panel panel-default" id="' + eid + '"></div></div></div>');
|
|
|
|
// 创建内部函数，用于处理
|
|
function func(args2) {
|
|
$.getJSON(url, args2, function (data) {
|
|
if (data.ret != 0) {
|
|
console.log("ajax " + url + " fail: " + data.ret + ", " + data.msg);
|
|
|
|
if (data.ret != 1) {
|
|
alert(data.msg);
|
|
} else {
|
|
location.href = "../index.html";
|
|
|
|
}
|
|
//console.log(data)
|
|
return;
|
|
}
|
|
console.log(data);
|
|
|
|
// 转换日期
|
|
var momentStr = options && options.realtime == true ? "HH:mm" : "YYYY-MM-DD HH:mm";
|
|
if (options.type == '1m' || options.type == 'm1' || options.type == '2m') {
|
|
for (var i = 0; i < data.data.length; ++i) {
|
|
data.data[i][0] = (new moment(data.data[i][0], momentStr).valueOf());
|
|
}
|
|
} else {
|
|
for (var i = 0; i < data.series.length; ++i) {
|
|
for (var j = 0; j < data.series[i].data.length; ++j) {
|
|
data.series[i].data[j][0] = (new moment(data.series[i].data[j][0], momentStr).valueOf());
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
_showChartTable(eid, data, args2.startDate, args2.endDate,
|
|
function (s, e) {
|
|
args2.startDate = s;
|
|
args2.endDate = e;
|
|
func(args2);
|
|
},
|
|
options
|
|
);
|
|
});
|
|
}
|
|
|
|
// 开始调用一次
|
|
func(args);
|
|
}
|
|
|
|
function setuptChartTableDefault(url, args, options) {
|
|
setuptChartTable('page-wrapper', url, args, options);
|
|
//console.log(args)
|
|
}
|
|
|
|
$(window).load(function () {
|
|
$(".table>thead:first-child>tr:first-child>th").attr("class", "")
|
|
});
|
|
|
|
|
|
$(".panel-body .flot-chart .legend").addClass("heightf");
|