xfrontend/web/srczip/logic/retained.js
2021-06-11 16:40:13 +08:00

570 lines
26 KiB
JavaScript

(function(){
X.pageLogic['retained'] = {
init : function(parms){
// X.gourl("grouped","shushi");
X.template("grouped","shushi");
var data ={
"eventView":{
"cksql":"retention",
"endTime":"2021-06-07 23:59:59",
"filts":[],
"groupBy":[],
"recentDay":"1-30",
"relation":"and",
"startTime":"2021-05-09 00:00:00",
"statType":"retention",
"timeParticleSize":"P1D",
"unitNum":7
},
"events":[
],
"projectId":1
};
// 日期渲染
X.daterender("#retained-condition-date",function(start, end, label){
var startTime = start.format('YYYY-MM-DD')+ " "+ "00:00:00";
var endTime = end.format('YYYY-MM-DD')+ " "+ "23:59:59";
data['eventView']['startTime'] = startTime;
data['eventView']['endTime'] = endTime;
retaineddata();
})
var time = $("#retained-condition-date").val();
var timearr = time.split(" ");
data['eventView']['startTime'] = timearr[0] + " "+"00:00:00";
data['eventView']['endTime'] = timearr[2]+" "+"23:59:59";
X.grouped(data['eventView']['groupBy'],"#shushi");
// $(document).off('click','.analysis-calculation').on("click",'.analysis-calculation',function(){
// console.log(211);
// })
var eventdata;
var filtersymbols = [[],[]];//默认两个事件
var groupitemeventsdata=[[],[]]//分组项里的事件
X.api("data_auth/my_event","get",{},function(d){
eventdata = d;
var arr = {
"eventDesc":eventdata[0]['category'][0]['event_desc'],
"eventName":eventdata[0]['category'][0]['event_name'],
"filts":[],
"relation":"and",
"relationUser":"and",
"renameindicator":""
}
data['events'].push(arr);
data['events'].push(arr);
X.api("data_auth/load_filter_props","post",{event_name:d[0]['category'][0]['event_name']},function(val){
groupitemeventsdata[0] = val;
groupitemeventsdata[1] = val;
})
})
//初始事件
X.template("event","initial-event",data['events'][0]);
X.template("returnvisitevent","returnvisit-event",data['events'][1]);
//开启重命名
$(document).off('click','.analysis-chongmingming-initial-event').on('click','.analysis-chongmingming-initial-event',function(){
$("#analysis-con-left-screen-list-left-zhibiaoname-initial-event").show();
$(this).hide();
$(".analysis-chongmingming-del-initial-event").show();
})
$(document).off('click','.analysis-chongmingming-return-event').on('click','.analysis-chongmingming-return-event',function(){
$("#analysis-con-left-screen-list-left-zhibiaoname-return-event").show();
$(this).hide();
$(".analysis-chongmingming-del-return-event").show();
})
//取消重命名
$(document).off('click','.analysis-chongmingming-del-initial-event').on('click','.analysis-chongmingming-del-initial-event',function(){
$("#analysis-con-left-screen-list-left-zhibiaoname-initial-event").hide();
$("#analysis-con-left-screen-list-left-zhibiaoname-initial-event input").val('');
$(this).hide();
$(".analysis-chongmingming-initial-event").show();
})
$(document).off('click','.analysis-chongmingming-del-return-event').on('click','.analysis-chongmingming-del-return-event',function(){
$("#analysis-con-left-screen-list-left-zhibiaoname-return-event").hide();
$("#analysis-con-left-screen-list-left-zhibiaoname-return-event input").val('');
$(this).hide();
$(".analysis-chongmingming-return-event").show();
})
// 添加初始事件筛选
// $(document).off('click','.analysis-zhibiao-updata-list-box .analysis-zhibiao-updata-initial-event').on('click','.analysis-zhibiao-updata-list-box .analysis-zhibiao-updata',function(){
// var arr = {
// "columnDesc":groupitemeventsdata[0][0]['category'][0]['title'],
// "columnName":groupitemeventsdata[0][0]['category'][0]['id'],
// "comparator":"==",
// "comparatorName":"等于",
// "ftv":[],
// "strftv":"",
// "table_type":groupitemeventsdata[0][0]['category'][0]['data_type'],
// "timeUnit":""
// }
// data['events'][0]['filts'].push(arr);
// filtersymbols[0].push(groupitemeventsdata[0][0]['category'][0]['category']);
// X.template("event","initial-event",data['events'][0]);
// })
// $(document).off('click','.analysis-zhibiao-updata-list-box .analysis-zhibiao-updata-return-event').on('click','.analysis-zhibiao-updata-list-box .analysis-zhibiao-updata',function(){
// var arr = {
// "columnDesc":groupitemeventsdata[1][0]['category'][0]['title'],
// "columnName":groupitemeventsdata[1][0]['category'][0]['id'],
// "comparator":"==",
// "comparatorName":"等于",
// "ftv":[],
// "strftv":"",
// "table_type":groupitemeventsdata[1][0]['category'][0]['data_type'],
// "timeUnit":""
// }
// data['events'][1]['filts'].push(arr);
// filtersymbols[1].push(groupitemeventsdata[1][0]['category'][0]['category']);
// X.template("returnvisitevent","returnvisit-event",data['events'][1]);
// })
// 添加初始事件筛选
var initialevent = []
$(document).off('click','.analysis-shaix-initial-event').on('click','.analysis-shaix-initial-event',function(){
var arr = {
"columnDesc":groupitemeventsdata[0][0]['category'][0]['title'],
"columnName":groupitemeventsdata[0][0]['category'][0]['id'],
"comparator":"==",
"comparatorName":"等于",
"ftv":[],
"strftv":"",
"table_type":groupitemeventsdata[0][0]['category'][0]['data_type'],
"timeUnit":""
}
initialevent.push(arr);
data['events'][1]['filts'] = initialevent;
filtersymbols[0].push(groupitemeventsdata[0][0]['category'][0]['category']);
X.template("event","initial-event",data['events'][0]);
})
var returnevent = []
$(document).off('click','.analysis-shaix-return-event').on('click','.analysis-shaix-return-event',function(){
var arr = {
"columnDesc":groupitemeventsdata[1][0]['category'][0]['title'],
"columnName":groupitemeventsdata[1][0]['category'][0]['id'],
"comparator":"==",
"comparatorName":"等于",
"ftv":[],
"strftv":"",
"table_type":groupitemeventsdata[1][0]['category'][0]['data_type'],
"timeUnit":""
}
// data['events'][1]['filts'].push(arr);
returnevent.push(arr);
data['events'][1]['filts'] = returnevent;
filtersymbols[1].push(groupitemeventsdata[1][0]['category'][0]['category']);
X.template("returnvisitevent","returnvisit-event",data['events'][1]);
})
// 删除指定初始事件筛选
$(document).off('click','.analysis-zhibiao-list-del-initial-event').on('click','.analysis-zhibiao-list-del-initial-event',function(){
var index = $(this).attr("data-twonum");
data['events'][0]['filts'].splice(index,1);
filtersymbols[0].splice(index,1);
X.template("event","initial-event",data['events'][0]);
})
$(document).off('click','.analysis-zhibiao-list-del-return-event').on('click','.analysis-zhibiao-list-del-return-event',function(){
var index = $(this).attr("data-twonum");
data['events'][0]['filts'].splice(index,1);
filtersymbols[1].splice(index,1);
X.template("returnvisitevent","return-event",data['events'][0]);
})
$(document).off('click','.analysis-con-left-screen-list-left-zhibiaoname-initial-event input').on('blur','.analysis-con-left-screen-list-left-zhibiaoname-initial-event input',function(){
var txt = $(this).val();
data['events'][0]['renameindicator'] = txt;
})
$(document).off('click','.analysis-con-left-screen-list-left-zhibiaoname-return-event input').on('blur','.analysis-con-left-screen-list-left-zhibiaoname-return-event input',function(){
var txt = $(this).val();
data['events'][1]['renameindicator'] = txt;
})
$(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function(){
var obj = $(this);
var offset = obj.offset();
var index = obj.attr("data-index");
X.querycriteriapop(eventdata,'setgrouping',offset.left,offset.top+obj.height(),function(val){
console.log(val);
obj.html(val.id);
data['events'][index]['eventName'] = val.name;
data['events'][index]['eventDesc'] = val.id;
X.api("data_auth/load_filter_props","post",{event_name:val.id},function(val){
console.log(val);
groupitemeventsdata[index] = val;
})
console.log(groupitemeventsdata)
})
})
$(document).off('click','.ta-property-select').on('click','.ta-property-select',function(){
var obj = $(this);
var offset = obj.offset();
var index = obj.attr("data-index");
var indexs = obj.attr("data-indexs");
X.querycriteriapop(filteringdata(),'category',offset.left,offset.top+obj.height(),function(val){
console.log(val);
var htmlstring = val.title;
obj.html(htmlstring);
filtersymbols[index][indexs] = val.category;
data['events'][index]['filts'][indexs]['columnDesc'] = htmlstring;
data['events'][index]['filts'][indexs]['columnName'] = val.id;
data['events'][index]['filts'][indexs]['data_type'] = val.type;
data['events'][index]['filts'][indexs]['table_type'] = val.table_type;
})
})
// 过滤数据
function filteringdata(){
var screentypedata;
if(groupitemeventsdata.length>1){
for(var i =0; i < groupitemeventsdata.length - 1; i++){
if(i == 0){
X.groupintersection(groupitemeventsdata[i] , groupitemeventsdata[Number(i) + Number(1)],function(d){
screentypedata = d;
});
}else {
X.groupintersection(screentypedata , groupitemeventsdata[Number(i) + Number(1)],function(d){
screentypedata = d;
})
}
}
}else {
screentypedata = groupitemeventsdata[0];
}
return screentypedata;
}
$(document).off('click','.analysis-choicetypename').on('click','.analysis-choicetypename',function(){
var obj = $(this);
var offset = obj.offset();
var index = $(this).attr("data-index");
var indexs = $(this).attr("data-indexs");
X.querycriteriapop(filtersymbols[index][indexs],'dropdownlist',offset.left,offset.top+obj.height(),function(val){
if(val != undefined){
obj.html(val.title);
data['events'][index]['filts'][indexs]['comparatorName'] = val.title;
data['events'][index]['filts'][indexs]['comparator'] = val.id;
}
})
})
$(document).off('click','.analysis-zhibiao-list-type4 input').on('blur','.analysis-zhibiao-list-type4 input',function(){
var index = $(this).attr('data-index');
var indexs = $(this).attr('data-indexs');
var txt = $(this).val();
var txtarr = txt.split(",");
data['events'][index]['filts'][indexs]['strftv'] = txt;
data['events'][index]['filts'][indexs]['ftv'] = txtarr;
})
//全局筛选
var filtsftvdata=[];
$(document).off('click','.analysis-overall-situation-add').on('click','.analysis-overall-situation-add',function(){
var screentypedata = filteringdata();
var drr={
"columnName":screentypedata[0]['category'][0]['title'],//事件中文显示
"column_id":screentypedata[0]['category'][0]['id'],//事件id
'data_type':screentypedata[0]['category'][0]['data_type'],//类型
'comparator_name':'等于',//默认等于
"comparator_id":'==',//符号id
"ftv":[],//条件
"strftv":'',//显示条件
"section":[-1,1],//区间
"table_type":screentypedata[0]['id']
};
data['eventView']['filts'].push(drr);
filtsftvdata.push(screentypedata[0]['category'][0]['category']);
if(data['eventView']['filts'].length > 1){
$(".analysis-overall-situation-left-guanxi").show();
}else{
$(".analysis-overall-situation-left-guanxi").hide();
}
X.template("globalfilter","xinwei-whole",data['eventView']['filts'],function(){
analysisdown();
});
})
//删除指定全局数据
$(document).off('click','.analysis-overall-situation-del').on('click','.analysis-overall-situation-del',function(){
var index = $(this).attr('data-index');
data['eventView']['filts'].splice(index,1);
filtsftvdata.splice(index,1);
if(data['eventView']['filts'].length > 1){
$(".analysis-overall-situation-left-guanxi").show();
}else{
$(".analysis-overall-situation-left-guanxi").hide();
}
X.template("globalfilter","xinwei-whole",data['eventView']['filts']);
})
$(document).off('click','.analysis-overall-situation-attr').on('click','.analysis-overall-situation-attr',function(){
var obj = $(this);
var offset = obj.offset();
var index = obj.attr("data-index");
X.querycriteriapop(filteringdata(),'category',offset.left,offset.top+obj.height(),function(val){
obj.html(val.title);
data['eventView']['filts'][index]['columnName'] = val.title;
data['eventView']['filts'][index]['column_id'] = val.id;
data['eventView']['filts'][index]['data_type'] = val.type;
data['eventView']['filts'][index]['comparator_name'] = '等于';
data['eventView']['filts'][index]['comparator_id'] = '==';
data['eventView']['filts'][index]['table_type'] = val.table_type;
filtsftvdata[index]=val.category;
analysisdown();//渲染下拉框
})
})
//循环给条件框渲染下拉框
function analysisdown(){
console.log(data['eventView']['filts']);
console.log(filtsftvdata);
for(let i in data['eventView']['filts']){
X.laydropdown("#analysis-overall-situation-fuhao-"+i,filtsftvdata[i],function(val){
$(this).html(val.title);
data['eventView']['filts'][i]['comparator_name'] = val.title;
data['eventView']['filts'][i]['comparator_id'] = val.id;
if(val.id == "range"){
data['eventView']['filts'][i]['ftv'] = [-1,1];
}
X.template("globalfilter","xinwei-whole",data['eventView']['filts']);
analysisdown();
})
}
}
// 分组项
$(document).off('click','.analysis-action-right').on('click','.analysis-action-right',function() {
var index = $(this).attr("data-index");
data.eventView.groupBy.splice(index,1);
X.template("grouped","shushi",data['eventView']['groupBy']);
})
$(document).off('click','.analysis-footadd___2D4YB').on('click','.analysis-footadd___2D4YB',function() {
var arr = {
"columnName": "#account_id",//事件中文显示
"column_id": "#account_id",//事件id
'data_type': "string",//类型
'table_type': "event",
"ftv":'',//条件
"section":''//区间
};
data['eventView']['groupBy'].push(arr);
X.template("grouped","shushi",data['eventView']['groupBy']);
})
$(document).off('click','.analysis-ant-dropdown-trigger').on('click','.analysis-ant-dropdown-trigger',function(){
var obj = $(this);
var offset = obj.offset();
var index = obj.attr("data-index");
X.querycriteriapop(filteringdata(),'category',offset.left,offset.top+obj.height(),function(val){
console.log(val);
var htmlstring = val.title;
obj.html(htmlstring);
data.eventView.groupBy[index]['columnName'] = val.title;
data.eventView.groupBy[index]['column_id'] = val.id;
data.eventView.groupBy[index]['data_type'] = val.type;
data.eventView.groupBy[index]['table_type'] = val.table_type;
})
})
// sql语句显示
$(document).off('click','.sqlquery').on('click','.sqlquery',function(){
var obj = $(this);
var offset = obj.offset();
X.querycriteriapop(data,'conditionquery',offset.left - 410,offset.top+obj.height(),function(){
})
})
// 时间粒度
var timeParticleSizearr = [
{'title':'当日','id':'1'},
{'title':'次日','id':'2'},
{'title':'7日','id':'7'},
{'title':'14日','id':'14'},
{'title':'30日','id':'30'},
]
X.laydropdown('.analtsis-timeParticleSize',timeParticleSizearr,function(d){
console.log(d);
$(".analtsis-timeParticleSize").html(d.title);
data['eventView']['unitNum'] = d.id;
retaineddata();
})
// 计算按钮
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
retaineddata()
})
function retaineddata(){
X.api("ck/retention_model","post",data,function(d){
console.log(data);
querydata = d;
retainedtable(d)
})
}
function retainedtable(d){
var tabledata=[];
for(let i in d['summary_values']){
var arr = {
date: i,
d0:d['summary_values'][i]['d0'],
data:[]
}
for(let j in d['summary_values'][i]["n"]){
var nrr = {
n:0,
p:0
}
nrr["n"] = d['summary_values'][i]["n"][j];
nrr["p"] = d['summary_values'][i]["p"][j]
arr['data'].push(nrr);
}
tabledata.push(arr)
}
var titdata = [];
for(let i in d['days']){
var tit = "第" + i + "日";
titdata.push(tit);
}
titdata.unshift("日期",d.title);
X.laytpldata("#table-fenxi-th-dot",titdata,".table-fenxi-th");
X.laytpldata("#table-fenxi-td-dot",tabledata,".table-fenxi-td");
}
// 每日留存
function retaineddayRetained(d){
var xAxisData=[];
for(let i in d['days']){
var tit = "第" + i + "日";
xAxisData.push(tit);
}
var seriesData=[];
for(let i in d['summary_values']){
var arr = {
name: i,
type: 'line',
stack: '',
data: d['summary_values'][i]['p']
}
seriesData.push(arr);
}
var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = {
title: {
text: ''
},
color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
type:'scroll',
data: d.date_range
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '10%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: xAxisData
}
],
yAxis: [
{
type: 'value'
}
],
series: seriesData
};
myChart.setOption(option,true);
}
function retainednRetained(d){
var data = [];
for(let i in d['summary_values']){
var index = d['summary_values'][i]['p'].length - 1;
data.push(d['summary_values'][i]['p'][index]);
}
console.log(data);
var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = {
xAxis: {
type: 'category',
data: d['date_range']
},
color: [ '#3ea7fd'],
grid: {
left: '2%',
right: '2%',
bottom: '2%',
top: '10%',
containLabel: true
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line'
}]
}
myChart.setOption(option,true);
}
var querydata;
$(document).off('click','.analtsis-chart-switch').on('click','.analtsis-chart-switch',function(){
if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('select-chart');
if($(this).attr('title') == '数据报表'){ $(".table-div-box").show(); $(".analysis-echarts").hide(); retainedtable(querydata)}
else if($(this).attr('title') == '第N日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retainednRetained(querydata) }
else if($(this).attr('title') == '每日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retaineddayRetained(querydata) }
}else{
layer.msg('请先计算数据,在切换图表');
}
})
}
};
})();