Skip to content

Instantly share code, notes, and snippets.

@cxytomo

cxytomo/realtime.js

Created May 26, 2016 08:50
Show Gist options
  • Save cxytomo/85ff663731f6e35f3169161dad3e3e90 to your computer and use it in GitHub Desktop.
Save cxytomo/85ff663731f6e35f3169161dad3e3e90 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
realtime.js
$(function () {
$('select.selectOnly').selectBox(html.selectBox.sb1);
$('input[type=radio]').radiobox(html.radiobox.rb2);
//clearTimeout
clearTimeout(realtime_haloTimer);
//mapInstance
var mapInstance;
//get canvas element
var canvas = document.getElementById('areaCode-canv'),
ctx = canvas.getContext('2d');
//初始化日期区间选择控件和select控件
$('.pickranges #stats-daterange').daterangepicker({
dateLimit : {days: 30},
maxDate: moment().subtract(1, 'days'),
startDate: moment().subtract(29, 'days'),
endDate: moment().subtract(1, 'days'),
ranges: {
'今日': [moment(), moment()],
'昨日': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'近7日': [moment().subtract(6, 'days'), moment()],
'近30日': [moment().subtract(29, 'days'), moment()]
},
locale: {
customRangeLabel: '自定义'
}
},cb);
cb(29,1,$('#stats-daterange'));
var formEle = $('#search-widget').find('#stats-daterange, select, input:checked');
var target = $('.content-wrapper').find('.tabbar li.active .tab');
var senddata = '';
$.each(formEle,function(i,ele){
if(ele.name == "daterange") {
var daterange = $(ele).val().split('~');
senddata += ("startDate=" + daterange[0] + "&");
senddata += ("endDate=" + daterange[1] + "&");
} else {
senddata += ($(ele).attr('name') + "=" + $(ele).val() + "&");
}
});
$('.search-wrapper').find('input:hidden').data('filterinfo', senddata);
$.each(target, function(i,target){
var datas = senddata;
if($(this).closest('.box-body').find('.filterDayList').length != 0){
datas += ('period=' + $(this).closest('.box-body').find('input:checked').val()+'&');
}
$(this).data('info', datas);
});
var svgEle = $('db1 svg');
var drawChart = {};
drawChart.realtime_dispaly ={};
drawChart.realtime_dispaly.timeCode = function(ctop){
$.ajax({
type: 'post',
dataType: 'json',
data: ctop.sentdata,
url: ctop.ajaxurl,
success: function(data){
$('#'+ctop.chartTarget).empty();
var chartOp = createNotMapOption(ctop,data,this.data);
chartOp.tooltip.formatter= function(){
var point = this.point;
var s = point.name+'<br/><span style="color:'+point.series.color+'">\u25CF</span> ' + point.series.name + '<br/>';
s +=' 活跃用户数:'+ point.succNum +' 用户总数:'+(point.totalNum)+'<br/>';
return s;
};
new Highcharts.Chart(chartOp);
},
error: function(data){
alert(ctop.chartTarget + ':'+data.responseJSON.message);
}
});
};
//活跃用户-地区分布
drawChart.realtime_dispaly.areaCode = function(ctop){
var chartInstance;
$.ajax({
type: 'post',
dataType: 'json',
data: ctop.sentdata,
url: ctop.ajaxurl,
success: function(data){
var $target = $('#'+ctop.chartTarget);
var tab = $('#'+ctop.chartTarget).closest('.box-body').find('.tabbar .active .tab');
var level = tab.data('level');
$('#'+ctop.chartTarget).empty();
if(data.series[0]!=undefined &&data.series[0].data!=undefined &&data.series[0].data[0]!=undefined && data.series[0].data[0].name!=undefined){
//判断是否横坐标为日期
if(pattern_date.test(data.series[0].data[0].name)){
//this指ajax对象
var matchResult = this.data.match(pattern_start_end_date);
var startDate = matchResult[1];
var endDate = matchResult[2];
data.series = iteratDate(startDate,endDate,data.series);
}
}
var small = $target.width() < 400;
ctop.tooltip.formatter= function(){
var point = this.point;
var s = point.name+'<br/><span style="color:'+point.series.color+'">\u25CF</span> ' + point.series.name + '<br/>';
s += '活跃用户数:'+ point.succNum +' 用户总数:'+(point.totalNum)+'<br/>';
if (point.drilldown) {
s += '点击查看各城市信息';
} else {
if(tab.data('level') == 2){
s += '点击返回';
}
}
return s;
};
if(ctop.paralAjaxUrl != undefined){
$.ajax({
type: 'post',
dataType: 'json',
async:false,
data: ctop.sentdata,
url: ctop.paralAjaxUrl,
success: function(json){
chartInstance = drawParalChart(ctop, json);
},
error: function(json){
alert(ctop.paralChartTarget + ':'+json.responseJSON.message);
}
});
} else{
chartInstance = drawParalChart(ctop, data);
}
var MapOp = createMapOption(ctop,small,chartInstance);
MapOp.chart.events.load = function(){
if(svgEle.length == 0){
svgEle = $('#db1 svg');
ctx.canvas.width = svgEle.width();
ctx.canvas.height = svgEle.height();
}
mapInstance = $('#db1').highcharts();
var xAxisBase = mapInstance.xAxis[0],
yAxisBase = mapInstance.yAxis[0];
realtime_haloTimer = setTimeout(function() {
$.ajax({
url: 'mockup/json/realtime/points.json',
type: 'post',
dataType: 'json',
success: function(data){
var points = data.points;
for(var i = 0; i < points.length; i++){
var coorPos = mapInstance.fromLatLonToPoint(points[i]),
canvPos = [];
canvPos.push(xAxisBase.toPixels(coorPos.x));
canvPos.push(yAxisBase.toPixels(coorPos.y));
grid.push(new Halo(ctx, canvPos[0], canvPos[1], 3, 'red', 0.016));
}
loop();
},
error: function(data){
alert(data.responseJSON.message);
}
});
realtime_haloTimer = setTimeout(arguments.callee, 5000);
}, 5000);
};
MapOp.tooltip.formatter= function(){
var point = this.point;
var s = point.name+'<br/><span style="color:'+point.series.color+'">\u25CF</span> ';
var levelnow = tab.data('level');
if (point.drilldown) {
if(point.properties.drilldown){
s += '点击查看各城市信息';
} else {
s += '直辖市、港澳台等个别地区暂无数据';
}
} else {
if(levelnow == 1){
//西沙群岛
s += '直辖市、港澳台等个别地区暂无数据';
}
if(levelnow == 2) {
s += '活跃用户数:'+ point.succNum +' 用户总数:'+(point.totalNum)+'<br/>';
s += '点击返回';
}
}
return s;
};
//给城市设置随机数据
var myData = Highcharts.geojson(Highcharts.maps['countries/cn/custom/cn-all-china']);
$.each(myData, function (i,cndata) {
var that = this;
this['hc-key'] = this.properties['hc-key'];
var drillkey = this.properties['drill-key'];
this.drilldown = drillkey;
this.value = 0;
this.succNum=0;
this.totalNum=0;
$.each(data.series[0].data,function(i,data){
if(data.drilldown_key == drillkey){
that.value = data.y;
this.succNum = data.succNum;
this.totalNum = data.totalNum;
return;
}
});
});
MapOp.series = [{
data : myData,
mapData: Highcharts.maps['countries/cn/custom/cn-all-china'],
name: '中国',
joinBy: 'hc-key',
dataLabels: {
enabled: false,
format: '{point.properties.cn-name}',
style:{
'textShadow':'none'
}
}
},{
data : [],
type: 'mappoint',
name:'城市',
color: 'transparent',
borderWidth: 3,
radius: 10,
dataLabels:{
enabled: false,
format: '{point.name}',
style:{
'textShadow':'none'
}
}
}]
$target.highcharts('Map', MapOp);
},
error: function(data){
alert(ctop.chartTarget + ':'+data.responseJSON.message);
}
});
};
//活跃用户-渠道
drawChart.realtime_dispaly.partnerCode = function(ctop){
$.ajax({
type: 'post',
dataType: 'json',
data: ctop.sentdata,
url: ctop.ajaxurl,
success: function(data){
$('#'+ctop.chartTarget).empty();
var chartOp = createNotMapOption(ctop,data,this.data);
chartOp.tooltip.formatter= function(){
var point = this.point;
var s = point.name+'<br/><span style="color:'+point.series.color+'">\u25CF</span> ' + point.series.name + '<br/>';
s +=' 活跃用户数:'+ point.succNum +' 用户总数:'+(point.totalNum)+'<br/>';
return s;
};
new Highcharts.Chart(chartOp);
},
error: function(data){
alert(ctop.chartTarget + ':'+data.responseJSON.message);
}
});
};
//活跃用户-业务平台分布
drawChart.realtime_dispaly.platCode = function(ctop){
$.ajax({
type: 'post',
dataType: 'json',
data: ctop.sentdata,
url: ctop.ajaxurl,
success: function(data){
var sourceIdObj ={};
var level1_len = data.series.length;
$.each(data.series,function(i, series){
if(series.sourceId) {
sourceIdObj[series.name] = series.sourceId;
} else {
sourceIdObj[series.name] = '';
}
});
$('#'+ctop.chartTarget).empty();
var chartOp = createNotMapOption(ctop,data,this.data);
chartOp.xAxis.crosshair = false;
chartOp.tooltip.formatter= function(){
var point = this.point;
var s = point.name+'<br/><span style="color:'+point.series.color+'">\u25CF</span> ' + point.series.name + '<br/>';
s +=' 活跃用户数:'+ point.succNum +' 用户总数:'+(point.totalNum)+'<br/>';
return s;
};
// chartOp.chart.events.drilldown = function(e){
// var sourceId = '';
// sourceId += ('&sourceId=' + sourceIdObj[e.point.series.name]);
// var chart = this;
// var tab = $(chart.container).parents('.box-body').find('.tabbar .active .tab');
// tab.data('sourceId',sourceIdObj[e.point.series.name]);
// if (!e.seriesOptions) {
// chart.showLoading('loading......');
// $.ajax({
// type: "POST",
// url: ctop.drilldownurl,
// dataType:'json',
// data:ctop.sentdata + sourceId + '&',
// crossDomain: true,
// success: function(data) {
// chart.hideLoading();
// var drilllevel = parseInt(tab.data('level'));
// tab.data('level',drilllevel+1);
// var len = data.series.length;
// if(data.series[0]!=undefined &&data.series[0].data!=undefined &&data.series[0].data[0]!=undefined && data.series[0].data[0].name!=undefined){
// if(pattern_date.test(data.series[0].data[0].name)){
// //this指ajax对象
// var matchResult = this.data.match(pattern_start_end_date);
// var startDate = matchResult[1];
// var endDate = matchResult[2];
// data.series = iteratDate(startDate,endDate,data.series);
// }
// chart.addSeriesAsDrilldown(e.point, data.series[0]);
// if(len > 1) {
// for(var i = 1; i < len; i++) {
// chart.addSeries(data.series[i]);
// }
// }
// }
// },
// error: function (data) {
// alert(ctop.chartTarget + ':'+data.responseJSON.message);
// }
// });
// }
// this.setTitle(null, { text: '' });
// };
// chartOp.chart.events.drillup = function(e){
// var chart = this;
// var tab = $(chart.container).closest('.box-body').find('.tabbar .active .tab');
// var drilllevel = parseInt(tab.data('level'));
// var len = chart.series.length;
// var cross = (level1_len > len-level1_len)? len-level1_len-1: level1_len -1;
// var iterate = len - level1_len;
// tab.data('level',drilllevel - 1);
// tab.data('sourceId','');
// for(var i = 0; i < iterate; i++){
// if(i < cross){
// chart.series[0].remove();
// }
// if (i > cross){
// chart.series[1].remove();
// }
// }
// };
new Highcharts.Chart(chartOp);
},
error: function(data){
alert(ctop.chartTarget + ':'+data.responseJSON.message);
}
});
};
$('.box .tabbar .tab').off('click').on('click',function(e){
e.preventDefault();
$(this).parents('.tabbar').find('.active').removeClass('active');
$(this).parents('li').addClass('active');
var drawtype = $(this).closest('.box').find('.pic_but.active').attr('role');
var id = $(this).closest('.box').find('.box-body').attr('id');
var wrapper = $(this).closest('section.content').attr('class').split(' ')[1];
var ctop = createCTOption($(this));
if(drawtype == "chartBtn") {
var func = drawChart[wrapper][id];
func(ctop);
}
if(drawtype == "tableBtn") {
drawTable(ctop);
}
});
//绘制图表
var view1 = $('#timeCode .tabbar .active a');
var view2 = $('#areaCode .tabbar .active a');
var view3 = $('#partnerCode .tabbar .active a');
var view4 = $('#platCode .tabbar .active a');
var ctop1 = createCTOption(view1);
var ctop2 = createCTOption(view2);
var ctop3 = createCTOption(view3);
var ctop4 = createCTOption(view4);
drawChart.realtime_dispaly['timeCode'](ctop1);
drawChart.realtime_dispaly['areaCode'](ctop2);
drawChart.realtime_dispaly['partnerCode'](ctop3);
drawChart.realtime_dispaly['platCode'](ctop4);
$('.fix-range').on('click', function(){
if($(this).hasClass('disable-click')){
return;
}
var subtractStart = $(this).attr('start-date');
var subtractEnd = $(this).attr('end-date');
$input = $(this).parent().find('.daterange-wrapper input');
cb(subtractStart, subtractEnd,$input);
reloadCont(this);
});
$('#stats-daterange').on('apply.daterangepicker',function(e, picker){
reloadCont(this);
});
$('#search-widget .selectOnly').on('change', function(){
reloadCont(this);
});
function reloadCont(that) {
clearTimeout(realtime_haloTimer);
var formEle = $('#search-widget').find('#stats-daterange, select, input:checked');
var target = $(that).parents('.content-wrapper').find('.tabbar li.active .tab');
var senddata = '';
$.each(formEle,function(i,ele){
if(ele.name == "daterange") {
var daterange = $(ele).val().split('~');
senddata += ("startDate=" + daterange[0] + "&");
senddata += ("endDate=" + daterange[1] + "&");
} else {
senddata += ($(ele).attr('name') + "=" + $(ele).val() + "&");
}
});
$(that).parents('.content-wrapper').find('.search-wrapper input:hidden').data('filterinfo', senddata);
$.each(target, function(){
var datas = senddata;
if($(this).closest('.box-body').find('.filterDayList').length != 0){
datas += ('period=' + $(this).closest('.box-body').find('input:checked').val()+'&');
}
$(this).data('info', datas);
});
target.trigger('click');
}
//Halo object
function Halo(ctx, x, y, r, color, speed) {
this.ctx = ctx;
this.x = x;
this.y = y;
this.radius = r;
this.color = color;
this.alpha = 1; // current alpha for this instance
this.speed = speed; // increment for alpha per frame
this.triggered = false; // is running
this.done = false; // has finished
}
//prototype methods that will be shared
Halo.prototype = {
trigger: function() { // start this rectangle
this.triggered = true;
},
update: function() {
if (this.triggered && !this.done) { // only if active
this.alpha -= this.speed; // update alpha
this.radius += this.speed*4;
this.done = (this.alpha <= 0.05); // update status
}
this.ctx.beginPath();
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
this.ctx.strokeStyle = this.color; // render this instance
this.ctx.lineWidth = 2;
this.ctx.globalAlpha = (this.done? 0:this.alpha);
this.ctx.stroke();
}
};
var grid = [];
var hasActive = true;
function loop() {
ctx.globalAlpha = 1;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// trigger all
for(var i = 0; i < grid.length; i++) {
grid[i].trigger();
}
hasActive = false;
// update all
for(var i = 0; i < grid.length; i++) {
grid[i].update();
if (!grid[i].done) hasActive = true;
if(grid[i].done) {
grid.splice(i,1);
i = i - 1;
}
}
if (hasActive) requestAnimationFrame(loop);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment