From f58e0b7cad88bc49935807db3a67403184b77465 Mon Sep 17 00:00:00 2001 From: luosongbai <15272473386@163.com> Date: Fri, 18 Jun 2021 18:01:31 +0800 Subject: [PATCH] =?UTF-8?q?=E6=BC=8F=E6=96=97=E5=88=86=E6=9E=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/pages/dashboard.html | 2 +- web/pages/funnel.html | 241 ++++------ web/pages/funnelanalysis.html | 182 ++++++++ web/src/x.min.js | 657 +++++++++++++++------------ web/srczip/common.js | 4 +- web/srczip/logic/analysis.js | 154 +++++-- web/srczip/logic/event.js | 2 +- web/srczip/logic/funnel.js | 696 +---------------------------- web/srczip/logic/funnelanalysis.js | 680 ++++++++++++++++++++++++++++ web/srczip/logic/retained.js | 44 +- web/static/css/analysis.css | 8 +- 11 files changed, 1446 insertions(+), 1224 deletions(-) create mode 100644 web/pages/funnelanalysis.html create mode 100644 web/srczip/logic/funnelanalysis.js diff --git a/web/pages/dashboard.html b/web/pages/dashboard.html index 088b07e..dd20482 100644 --- a/web/pages/dashboard.html +++ b/web/pages/dashboard.html @@ -26,7 +26,7 @@
事件分析
留存分析
-
漏斗分析
+
漏斗分析
分布分析
路径分析
diff --git a/web/pages/funnel.html b/web/pages/funnel.html index 3c2a9f9..537cd4b 100644 --- a/web/pages/funnel.html +++ b/web/pages/funnel.html @@ -1,177 +1,86 @@ - -
+ + - - \ No newline at end of file diff --git a/web/pages/funnelanalysis.html b/web/pages/funnelanalysis.html new file mode 100644 index 0000000..fe2584d --- /dev/null +++ b/web/pages/funnelanalysis.html @@ -0,0 +1,182 @@ + +
+ +
+ +
+
+
+ 漏斗分析 +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +
+ +
+ +
+ +
+ +
+
漏斗步骤
+
+ +
+
+ + + 添加步骤指标 + +
+
+ +
+
全局筛选
+ +
+ +
+ +
+
+
且
+
+ +
+ + +
+ +
+ +
+ + + 添加条件 + +
+
+ +
+ + +
+
分组项
+
+ +
+
+ + + 添加分组项 + +
+
+ +
+
分析窗口期
+
+
7天
+
+
+ + + +
+ +
+
保存报表
+
计 算
+
+ + +
+ +
+
+
+
+ 玩法参与情况 +
+
+
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+ +
+ + + + + + + + + + +
+
+
+ + + +
+
+
+ +
+ + + + \ No newline at end of file diff --git a/web/src/x.min.js b/web/src/x.min.js index bc16ae9..1377ac2 100644 --- a/web/src/x.min.js +++ b/web/src/x.min.js @@ -4,6 +4,7 @@ var X = window.X || { event : new EventEmitter(), pageLogic : {}, DATA : { + 'echartscolor': [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], 'createsidebar':[{ title: '新建看板',id: 0,url:'newkanban'},{title: '新建文件夹',id: 1,url:'newwenjian'},{title: '创建空间',id: 2,url:'kongjianshezhi'}], 'taboperationdata':{ kanban:[ @@ -183,8 +184,7 @@ var X = window.X || { } }, error:function(error){ - layer.msg('服务器错误'); - // console.log('服务器错误'); + layer.msg('服务器错误'); layer.close(index); } }); @@ -1504,7 +1504,6 @@ var X = window.X || { }) // 设置一级事件 - $(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() { var obj = $(this); var offset = obj.offset(); @@ -1605,7 +1604,7 @@ var X = window.X || { }) // 添加筛选项 - $(document).on('click','.analysis-shaix',function(){ + $(document).off('click','.analysis-shaix').on('click','.analysis-shaix',function(){ var obj = $(this); var index = obj.attr("data-index"); addscreen(index); @@ -2006,7 +2005,7 @@ var X = window.X || { var querydata;//查询数据 $(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){ - + console.log(querydata) if(querydata){ $('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart'); $(this).addClass('select-chart'); @@ -2016,7 +2015,7 @@ var X = window.X || { else if($(this).attr('title') == '分布图'){distributionmap(querydata)} else if($(this).attr('title') == '饼状分布'){} }else{ - layer.msg('请先计算数据,在切换图表'); + // layer.msg('请先计算数据,在切换图表'); } }) @@ -2026,7 +2025,7 @@ var X = window.X || { var xAxisData=[]; for(let i in d){ for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; + var pj = d[i]['event_name']+d[i]['groups'][z]; xAxisData.push(pj); } } @@ -2051,12 +2050,13 @@ var X = window.X || { seriesData[i]['name'] = xAxisData[i]; } } + 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' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -2104,7 +2104,7 @@ var X = window.X || { var xAxisData=[]; for(let i in d){ for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; + var pj = d[i]['event_name']+d[i]['groups'][z]; xAxisData.push(pj); } } @@ -2124,12 +2124,14 @@ var X = window.X || { seriesData[i]['name'] = xAxisData[i]; } } + console.log(d); + console.log(seriesData); 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' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -2174,29 +2176,90 @@ var X = window.X || { //分布图 function distributionmap(d){ + var legendData =[]; var xAxisData=[]; - for(let i in d){ - for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; - xAxisData.push(pj); - } - } var seriesData=[]; - for(let i in d){ - for(let z in d[i]['values']){ - var arr = { - name: '', - type: 'bar', - data: d[i]['values'][z] + if(jQuery.isEmptyObject(d[0]["groups"])){ + for(let i in d){ + xAxisData.push(d[i]['event_name']); + legendData.push(d[i]['event_name']); + var num =0; + for(let j in d[i]['values'][i]){ + num = num + d[i]['values'][i][j] } + var arr = { + name: d[i]['event_name'], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); seriesData.push(arr); } - } - if(xAxisData.length > 0){ - for(let i in seriesData){ - seriesData[i]['name'] = xAxisData[i]; + + }else { + for(let i in d){ + xAxisData.push(d[i]['event_name']); + for(let j in d[i]['groups']){ + var num =0; + for(let z in d[i]['values'][j]){ + num = num + d[i]['values'][j][z] + } + if(i > 0){ + for(let q in seriesData){ + if(d[i]['groups'][j] == seriesData[q]['name']){ + seriesData[q]['data'].push(num); + }else { + var arr = { + name: d[i]['groups'][j], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); + seriesData.push(arr); + } + } + }else { + var arr = { + name: d[i]['groups'][j], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); + seriesData.push(arr); + } + + + } } + console.log(seriesData); + console.log(xAxisData) } + // for(let i in d){ + // for(let z in d[i]['groups']){ + // var pj = d[i]['event_name']+d[i]['groups'][z]; + // xAxisData.push(pj); + // } + // } + // var seriesData=[]; + // for(let i in d){ + // for(let z in d[i]['values']){ + // var arr = { + // name: '', + // type: 'bar', + // data: d[i]['values'][z] + // } + // seriesData.push(arr); + // } + // } + // if(xAxisData.length > 0){ + // for(let i in seriesData){ + // seriesData[i]['name'] = xAxisData[i]; + // } + // } + // return; var myChart = echarts.init(document.getElementById('analysis-echarts')); var option = { tooltip: { @@ -2205,28 +2268,22 @@ var X = window.X || { type: 'shadow' } }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, legend: { - data: xAxisData + data: legendData }, - toolbox: { - show: true, - orient: 'vertical', - left: 'right', - top: 'center', - feature: { - mark: {show: true}, - dataView: {show: true, readOnly: false}, - magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, - restore: {show: true}, - saveAsImage: {show: true} - } + grid: { + left: '2%', + right: '2%', + bottom: '2%', + top: '10%', + containLabel: true }, xAxis: [ { type: 'category', axisTick: {show: false}, - data: d[0]['date_range'] + data: xAxisData } ], yAxis: [ @@ -2242,8 +2299,8 @@ var X = window.X || { //表格 function tabledata(d){ console.log(d); - var titledata=d[0]['date_range']; - titledata.unshift('指标','阶段总和') + // var titledata=d[0]['date_range']; + // titledata.unshift('指标','阶段总和') // X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th"); // X.laytpldata("#table-fenxi-td-dot", ,".table-fenxi-td"); } @@ -2262,14 +2319,25 @@ var X = window.X || { X.api("ck/event_model","post",dataArr,function(d){ querydata = d; if(d[0].values.length > 0 ){ - stackingdiagram(d); - tabledata(d); + updata(); + // stackingdiagram(d); + // tabledata(d); }else { $("#analysis-echarts").empty(); layer.msg("无数据"); } }) } + + function updata(){ + var tit = $(".select-chart").attr("title"); + if(tit == '趋势图'){trendchart(querydata)} + else if(tit == '堆积图'){stackingdiagram(querydata);} + else if(tit == '累计图'){} + else if(tit == '分布图'){distributionmap(querydata)} + else if(tit == '饼状分布'){} + } + // 保存报表 $(document).off('click','.analysis-savereport').on('click','.analysis-savereport',function(){ X.parametersopen(data,'savereport','auto') @@ -2816,8 +2884,8 @@ var X = window.X || { }else { var data = [] } + console.log(data); X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event"); - } }; })(); @@ -2969,27 +3037,42 @@ var X = window.X || { (function(){ X.pageLogic['funnel'] = { init : function(parms){ - - // X.gourl("grouped","shushi"); + var me = this; + if(parms){ + this.parms = parms; + var data = parms; + }else { + var data = [] + } + console.log(data); + X.laytpldata("#analysis-con-left-screen-list-dot",data,"#funnel-event"); + + } + }; +})(); +// srczip/logic/funnelanalysis.js +(function(){ + X.pageLogic['funnelanalysis'] = { + init : function(parms){ + // 分组项 X.template("grouped","shushi"); var data ={ "eventView":{ - "cksql":"retention", - "endTime":"2021-06-07 23:59:59", + "cksql":"funnel", + "endTime":"", "filts":[], "groupBy":[], "recentDay":"1-30", "relation":"and", - "startTime":"2021-05-09 00:00:00", + "startTime":"", "statType":"retention", "timeParticleSize":"P1D", - "unitNum":7 + "windows_gap":7 }, "events":[ ], - "projectId":1 }; // 日期渲染 @@ -3006,15 +3089,10 @@ var X = window.X || { 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=[[],[]]//分组项里的事件 + // var screentypearr = []; X.api("data_auth/my_event","get",{},function(d){ eventdata = d; @@ -3036,14 +3114,14 @@ var X = window.X || { ] data['events'] = 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]); + X.template("funnel","funnel-event",data['events']); //开启重命名 $(document).off('click','.analysis-chongmingming-initial-event').on('click','.analysis-chongmingming-initial-event',function(){ $("#analysis-con-left-screen-list-left-zhibiaoname-initial-event").show(); @@ -3051,12 +3129,6 @@ var X = window.X || { $(".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(); @@ -3065,108 +3137,98 @@ var X = window.X || { $(".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(); + // 添加指标 + function addindex(){ + var defaultindicator = { + "eventDesc":eventdata[0]['category'][0]['event_desc'], + "eventName":eventdata[0]['category'][0]['event_name'], + "filts":[], + "relation":"and", + "relationUser":"and", + "renameindicator":"" + } + data['events'].push(defaultindicator); + X.template("funnel","funnel-event",data['events'],function(){ + var drr = []; + filtersymbols.push(drr); + if(data['events'].length > 2){ + $(".analysis-del").show(); + }else { + $(".analysis-del").hide(); + } + }); + + } + + //添加按钮 + $(document).off('click','.analysis-jia1').on('click','.analysis-jia1',function(){ + addindex(); + }) + $(document).off('click','.funnel-updataevent').on('click','.funnel-updataevent',function(){ + addindex(); + }) + + // 添加筛选项 + $(document).off('click','.analysis-shaix').on('click','.analysis-shaix',function(){ + var obj = $(this); + var index = obj.attr("data-index"); + addscreen(index); }) - // 添加初始事件筛选 - // $(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]); - // }) + // 添加筛选项 + function addscreen(index){ + console.log(data); + X.api('data_auth/load_filter_props',"post",{event_name:data['events'][index]["eventName"]},function(d){ + console.log(d); + 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'][index]['filts'].push(arr); + var drr=[]; + filtersymbols.push(drr); + groupitemeventsdata[index] = d; + filtersymbols[index][filtersymbols[index].length ] = d[0]['category'][0]["category"]; - // $(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]); - // }) + X.template("funnel","funnel-event",data['events']); + }) + } - // 添加初始事件筛选 - 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-updata').on('click','.analysis-zhibiao-updata',function(){ + var obj = $(this); + var index = obj.attr("data-index"); + addscreen(index); }) // 删除指定初始事件筛选 - $(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-del').on('click','.analysis-del',function(){ + var index = $(this).attr("data-index"); + data['events'].splice(index,1); + filtersymbols[index].splice(index,1); + // groupitemeventsdata[index].splice(index,1); + X.template("funnel","funnel-event",data['events']); }) + //删除指定筛选 + $(document).off('click','.analysis-zhibiao-list-del').on('click','.analysis-zhibiao-list-del',function(){ + var index = $(this).attr("data-index"); + var indexs = $(this).attr("data-twonum"); + data['events'][index]['filts'].splice(indexs,1); + filtersymbols[index].splice(indexs,1); + X.template("funnel","funnel-event",data['events']); + }) + $(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(); @@ -3192,7 +3254,8 @@ var X = window.X || { 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(groupitemeventsdata); + X.querycriteriapop(groupitemeventsdata[index],'category',offset.left,offset.top+obj.height(),function(val){ console.log(val); var htmlstring = val.title; obj.html(htmlstring); @@ -3230,6 +3293,7 @@ var X = window.X || { var offset = obj.offset(); var index = $(this).attr("data-index"); var indexs = $(this).attr("data-indexs"); + console.log(filtersymbols); X.querycriteriapop(filtersymbols[index][indexs],'dropdownlist',offset.left,offset.top+obj.height(),function(val){ if(val != undefined){ obj.html(val.title); @@ -3324,16 +3388,15 @@ var X = window.X || { }) } } - // 分组项 $(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']); + $(".group-updata").show(); }) $(document).off('click','.analysis-footadd___2D4YB').on('click','.analysis-footadd___2D4YB',function() { - var arr = { "columnName": "#account_id",//事件中文显示 "column_id": "#account_id",//事件id @@ -3344,7 +3407,7 @@ var X = window.X || { }; data['eventView']['groupBy'].push(arr); X.template("grouped","shushi",data['eventView']['groupBy']); - + $(this).hide(); }) $(document).off('click','.analysis-ant-dropdown-trigger').on('click','.analysis-ant-dropdown-trigger',function(){ @@ -3359,10 +3422,7 @@ var X = window.X || { 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语句显示 @@ -3376,27 +3436,30 @@ var X = window.X || { // 时间粒度 var timeParticleSizearr = [ - {'title':'当日','id':'1'}, - {'title':'次日','id':'2'}, + {'title':'1天','id':'1'}, {'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'] = parseInt(d.id); + data['eventView']['windows_gap'] = parseInt(d.id); retaineddata(); }) // 计算按钮 $(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){ + console.log(data); + retaineddata() }) - + var querydata; function retaineddata(){ - X.api("ck/retention_model","post",data,function(d){ - console.log(data); + X.api("ck/funnel_model","post",data,function(d){ + d['etitle'] = $.extend(true,[],d['title']); + if(d['title'].length == 2){ + d['etitle'].unshift('总体'); + } querydata = d; updata(d) }) @@ -3404,109 +3467,52 @@ var X = window.X || { function updata(d){ var title = $(".select-chart").attr("title"); - if(title == '数据报表'){ $(".table-div-box").show(); $(".analysis-echarts").hide(); retainedtable(d)} - else if(title == '第N日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retainednRetained(d) } - else if(title == '每日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retaineddayRetained(d) } + if(title == '转化图'){ retainedtable(d); retaineddayRetained(d);} + else if(title == '趋势图'){ retainednRetained(d);retainednRetainedtable(d); } } function retainedtable(d){ var tabledata=[]; - for(let i in d['summary_values']){ + for(let i in d['list']){ var arr = { - date: i, - d0:d['summary_values'][i]['d0'], + title: d['list'][i]["title"], data:[] } - for(let j in d['summary_values'][i]["n"]){ + for(let j in d['list'][i]["n"]){ var nrr = { n:0, p:0 } - nrr["n"] = d['summary_values'][i]["n"][j]; - nrr["p"] = d['summary_values'][i]["p"][j] + nrr["n"] = d['list'][i]["n"][j]; + nrr["p"] = d['list'][i]["p1"][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-th-dot",d.etitle,".table-fenxi-th"); X.laytpldata("#table-fenxi-td-dot",tabledata,".table-fenxi-td"); } - // 每日留存 + //转化图 function retaineddayRetained(d){ var arr = {}; - var xAxisData=[]; + var xAxisData= d['level']; var seriesData=[]; - var legenddata = []; - if(jQuery.isEmptyObject(d.values)){ - legenddata = d.date_range; - for(let i in d['days']){ - var tit = "第" + i + "日"; - xAxisData.push(tit); + + for(let i in d['list']){ + var arr = { + name: d['list'][i]['title'], + type: 'bar', + barMaxWidth : 30, + data: d['list'][i]['p1'] } - for(let i in d['summary_values']){ - var arr = { - name: i, - type: 'line', - data: d['summary_values'][i]['p'] - } - seriesData.push(arr); - } - }else { - var timearr = []; - for(let i in d.values){ - timearr.push(i); - for(let j in d.values[i]){ - if(arr[j]){ - arr[j][i] = d.values[i][j]['p']; - }else { - arr[j]=[]; - arr[j][i] = d.values[i][j]['p']; - } - } - } - - var ydata = {}; - for(let j in arr){ - if(!ydata[j]){ - ydata[j] = []; - } - for( let i in timearr ){ - ydata[j].push(""); - for(let z in arr[j]){ - if(timearr[i] == z){ - var index = arr[j][z].length - 1; - ydata[j][i] =arr[j][z][index]; - } - } - } - } - console.log(ydata); - // for(let i in ydata){ - // legenddata.push(i); - // var arr = { - // name: i, - // type: 'line', - // data: ydata[i] - // } - // seriesData.push(arr) - // } + seriesData.push(arr); } - return; - var myChart = echarts.init(document.getElementById('analysis-echarts')); + + var myChart = echarts.init(document.getElementById('funnel-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' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -3516,21 +3522,15 @@ var X = window.X || { } } }, - legend: { - type:'scroll', - data: legenddata, - }, grid: { left: '2%', right: '2%', - bottom: '2%', + bottom: '5%', top: '10%', - containLabel: true }, xAxis: [ { type: 'category', - boundaryGap: false, data: xAxisData } ], @@ -3543,12 +3543,13 @@ var X = window.X || { }; myChart.setOption(option,true); } - + // 趋势图 function retainednRetained(d){ var arr = {}; var legenddata = []; var seriesData = []; - if(jQuery.isEmptyObject(d.values)){ + var xAxisdata = []; + if(jQuery.isEmptyObject(d.date_data)){ var arr = [] for(let i in d['summary_values']){ var index = d['summary_values'][i]['p'].length - 1; @@ -3560,15 +3561,15 @@ var X = window.X || { data: arr } }else { - var timearr = []; - for(let i in d.values){ - timearr.push(i); - for(let j in d.values[i]){ + var arr =[]; + for(let i in d['date_data']){ + xAxisdata.push(i); + for(let j in d['date_data'][i]){ if(arr[j]){ - arr[j][i] = d.values[i][j]['p']; + arr[j][i] = d['date_data'][i][j]['p1']; }else { arr[j]=[]; - arr[j][i] = d.values[i][j]['p']; + arr[j][i] = d['date_data'][i][j]['p1']; } } } @@ -3578,17 +3579,17 @@ var X = window.X || { if(!ydata[j]){ ydata[j] = []; } - for( let i in timearr ){ + for( let i in xAxisdata ){ ydata[j].push(""); for(let z in arr[j]){ - if(timearr[i] == z){ + if(xAxisdata[i] == z){ var index = arr[j][z].length - 1; ydata[j][i] =arr[j][z][index]; } } } } - + for(let i in ydata){ legenddata.push(i); var arr = { @@ -3598,9 +3599,9 @@ var X = window.X || { } seriesData.push(arr) } - } - var myChart = echarts.init(document.getElementById('analysis-echarts')); + } + var myChart = echarts.init(document.getElementById('funnel-echarts')); var option = { title: { text: '' @@ -3630,7 +3631,7 @@ var X = window.X || { { type: 'category', boundaryGap: false, - data: d.date_range + data: xAxisdata } ], yAxis: [ @@ -3643,15 +3644,85 @@ var X = window.X || { myChart.setOption(option,true); } + //趋势图表格 + function retainednRetainedtable(d){ + var arr = {}; + var seriesData = []; + var xAxisdata = []; + if(jQuery.isEmptyObject(d.date_data)){ + var arr = [] + for(let i in d['summary_values']){ + var index = d['summary_values'][i]['p'].length - 1; + arr.push(d['summary_values'][i]['p'][index]); + } + + seriesData = { + type: 'line', + data: arr + } + }else { + var arr =[]; + for(let i in d['date_data']){ + xAxisdata.push(i); + for(let j in d['date_data'][i]){ + if(arr[j]){ + arr[j][i] = d['date_data'][i][j]['p1']; + }else { + arr[j]=[]; + arr[j][i] = d['date_data'][i][j]['p1']; + } + } + } + + var ydata = {}; + for(let j in arr){ + if(!ydata[j]){ + ydata[j] = []; + } + for( let i in xAxisdata ){ + ydata[j].push(0); + for(let z in arr[j]){ + if(xAxisdata[i] == z){ + var index = arr[j][z].length - 1; + ydata[j][i] =arr[j][z][index]; + } + } + } + } + + } + xAxisdata.unshift('总体'); + + var tabdata = []; + for(let i in ydata){ + var arr = { + 'title': i, + 'data':[] + } + for(let j in ydata[i]){ + var nrr = { + n:'', + p:ydata[i][j] + } + arr['data'].push(nrr); + } + tabdata.push(arr); + } + console.log(tabdata); + X.laytpldata("#table-fenxi-th-dot",xAxisdata,".table-fenxi-th"); + X.laytpldata("#table-fenxi-td-dot",tabdata,".table-fenxi-td"); + } 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) } + if($(this).attr('title') == '转化图'){ retainedtable(querydata); retaineddayRetained(querydata)} + else if($(this).attr('title') == '趋势图'){ + retainednRetained(querydata); + retainednRetainedtable(querydata); + } }else{ layer.msg('请先计算数据,在切换图表'); } @@ -4594,22 +4665,21 @@ var X = window.X || { 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 + "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":[ + + ], }; // 日期渲染 @@ -4626,12 +4696,6 @@ var X = window.X || { 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=[[],[]]//分组项里的事件 @@ -5126,7 +5190,7 @@ var X = window.X || { title: { text: '' }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -5192,7 +5256,6 @@ var X = window.X || { } } } - var ydata = {}; for(let j in arr){ if(!ydata[j]){ @@ -5208,7 +5271,6 @@ var X = window.X || { } } } - for(let i in ydata){ legenddata.push(i); var arr = { @@ -5218,6 +5280,7 @@ var X = window.X || { } seriesData.push(arr) } + } var myChart = echarts.init(document.getElementById('analysis-echarts')); @@ -5225,7 +5288,7 @@ var X = window.X || { title: { text: '' }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { diff --git a/web/srczip/common.js b/web/srczip/common.js index 3eeb4cf..c77f6c5 100644 --- a/web/srczip/common.js +++ b/web/srczip/common.js @@ -3,6 +3,7 @@ var X = window.X || { event : new EventEmitter(), pageLogic : {}, DATA : { + 'echartscolor': [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], 'createsidebar':[{ title: '新建看板',id: 0,url:'newkanban'},{title: '新建文件夹',id: 1,url:'newwenjian'},{title: '创建空间',id: 2,url:'kongjianshezhi'}], 'taboperationdata':{ kanban:[ @@ -182,8 +183,7 @@ var X = window.X || { } }, error:function(error){ - layer.msg('服务器错误'); - // console.log('服务器错误'); + layer.msg('服务器错误'); layer.close(index); } }); diff --git a/web/srczip/logic/analysis.js b/web/srczip/logic/analysis.js index b38ad04..95d6cb8 100644 --- a/web/srczip/logic/analysis.js +++ b/web/srczip/logic/analysis.js @@ -237,7 +237,6 @@ }) // 设置一级事件 - $(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() { var obj = $(this); var offset = obj.offset(); @@ -338,7 +337,7 @@ }) // 添加筛选项 - $(document).on('click','.analysis-shaix',function(){ + $(document).off('click','.analysis-shaix').on('click','.analysis-shaix',function(){ var obj = $(this); var index = obj.attr("data-index"); addscreen(index); @@ -739,7 +738,7 @@ var querydata;//查询数据 $(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){ - + console.log(querydata) if(querydata){ $('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart'); $(this).addClass('select-chart'); @@ -749,7 +748,7 @@ else if($(this).attr('title') == '分布图'){distributionmap(querydata)} else if($(this).attr('title') == '饼状分布'){} }else{ - layer.msg('请先计算数据,在切换图表'); + // layer.msg('请先计算数据,在切换图表'); } }) @@ -759,7 +758,7 @@ var xAxisData=[]; for(let i in d){ for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; + var pj = d[i]['event_name']+d[i]['groups'][z]; xAxisData.push(pj); } } @@ -784,12 +783,13 @@ seriesData[i]['name'] = xAxisData[i]; } } + 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' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -837,7 +837,7 @@ var xAxisData=[]; for(let i in d){ for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; + var pj = d[i]['event_name']+d[i]['groups'][z]; xAxisData.push(pj); } } @@ -857,12 +857,14 @@ seriesData[i]['name'] = xAxisData[i]; } } + console.log(d); + console.log(seriesData); 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' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -907,29 +909,90 @@ //分布图 function distributionmap(d){ + var legendData =[]; var xAxisData=[]; - for(let i in d){ - for(let z in d[i]['groups']){ - var pj = d[i]['event_name']+d[i]['groups'][z][0]+d[i]['groups'][z][1]; - xAxisData.push(pj); - } - } var seriesData=[]; - for(let i in d){ - for(let z in d[i]['values']){ - var arr = { - name: '', - type: 'bar', - data: d[i]['values'][z] + if(jQuery.isEmptyObject(d[0]["groups"])){ + for(let i in d){ + xAxisData.push(d[i]['event_name']); + legendData.push(d[i]['event_name']); + var num =0; + for(let j in d[i]['values'][i]){ + num = num + d[i]['values'][i][j] } + var arr = { + name: d[i]['event_name'], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); seriesData.push(arr); } - } - if(xAxisData.length > 0){ - for(let i in seriesData){ - seriesData[i]['name'] = xAxisData[i]; + + }else { + for(let i in d){ + xAxisData.push(d[i]['event_name']); + for(let j in d[i]['groups']){ + var num =0; + for(let z in d[i]['values'][j]){ + num = num + d[i]['values'][j][z] + } + if(i > 0){ + for(let q in seriesData){ + if(d[i]['groups'][j] == seriesData[q]['name']){ + seriesData[q]['data'].push(num); + }else { + var arr = { + name: d[i]['groups'][j], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); + seriesData.push(arr); + } + } + }else { + var arr = { + name: d[i]['groups'][j], + type: 'bar', + barWidth : 30, + data: [], + } + arr['data'].push(num); + seriesData.push(arr); + } + + + } } + console.log(seriesData); + console.log(xAxisData) } + // for(let i in d){ + // for(let z in d[i]['groups']){ + // var pj = d[i]['event_name']+d[i]['groups'][z]; + // xAxisData.push(pj); + // } + // } + // var seriesData=[]; + // for(let i in d){ + // for(let z in d[i]['values']){ + // var arr = { + // name: '', + // type: 'bar', + // data: d[i]['values'][z] + // } + // seriesData.push(arr); + // } + // } + // if(xAxisData.length > 0){ + // for(let i in seriesData){ + // seriesData[i]['name'] = xAxisData[i]; + // } + // } + // return; var myChart = echarts.init(document.getElementById('analysis-echarts')); var option = { tooltip: { @@ -938,28 +1001,22 @@ type: 'shadow' } }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, legend: { - data: xAxisData + data: legendData }, - toolbox: { - show: true, - orient: 'vertical', - left: 'right', - top: 'center', - feature: { - mark: {show: true}, - dataView: {show: true, readOnly: false}, - magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, - restore: {show: true}, - saveAsImage: {show: true} - } + grid: { + left: '2%', + right: '2%', + bottom: '2%', + top: '10%', + containLabel: true }, xAxis: [ { type: 'category', axisTick: {show: false}, - data: d[0]['date_range'] + data: xAxisData } ], yAxis: [ @@ -975,8 +1032,8 @@ //表格 function tabledata(d){ console.log(d); - var titledata=d[0]['date_range']; - titledata.unshift('指标','阶段总和') + // var titledata=d[0]['date_range']; + // titledata.unshift('指标','阶段总和') // X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th"); // X.laytpldata("#table-fenxi-td-dot", ,".table-fenxi-td"); } @@ -995,14 +1052,25 @@ X.api("ck/event_model","post",dataArr,function(d){ querydata = d; if(d[0].values.length > 0 ){ - stackingdiagram(d); - tabledata(d); + updata(); + // stackingdiagram(d); + // tabledata(d); }else { $("#analysis-echarts").empty(); layer.msg("无数据"); } }) } + + function updata(){ + var tit = $(".select-chart").attr("title"); + if(tit == '趋势图'){trendchart(querydata)} + else if(tit == '堆积图'){stackingdiagram(querydata);} + else if(tit == '累计图'){} + else if(tit == '分布图'){distributionmap(querydata)} + else if(tit == '饼状分布'){} + } + // 保存报表 $(document).off('click','.analysis-savereport').on('click','.analysis-savereport',function(){ X.parametersopen(data,'savereport','auto') diff --git a/web/srczip/logic/event.js b/web/srczip/logic/event.js index 1932759..6d75fbd 100644 --- a/web/srczip/logic/event.js +++ b/web/srczip/logic/event.js @@ -8,8 +8,8 @@ }else { var data = [] } + console.log(data); X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event"); - } }; })(); \ No newline at end of file diff --git a/web/srczip/logic/funnel.js b/web/srczip/logic/funnel.js index c198f46..535301e 100644 --- a/web/srczip/logic/funnel.js +++ b/web/srczip/logic/funnel.js @@ -1,694 +1,16 @@ (function(){ X.pageLogic['funnel'] = { 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":"" - },{ - "eventDesc":eventdata[0]['category'][0]['event_desc'], - "eventName":eventdata[0]['category'][0]['event_name'], - "filts":[], - "relation":"and", - "relationUser":"and", - "renameindicator":"" - } - ] - data['events'] = 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]); - }) + var me = this; + if(parms){ + this.parms = parms; + var data = parms; + }else { + var data = [] + } + console.log(data); + X.laytpldata("#analysis-con-left-screen-list-dot",data,"#funnel-event"); - $(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"); - var dataevent= data['events'][index]; - // console.log(dataevent); - X.querycriteriapop(eventdata,'setgrouping',offset.left,offset.top+obj.height(),function(val){ - console.log(val); - obj.html(val.id); - dataevent['eventName'] = val.name; - dataevent['eventDesc'] = val.id; - - X.api("data_auth/load_filter_props","post",{event_name:val.name},function(val){ - groupitemeventsdata[index] = val; - }) - // console.log(data['events']); - - }) - }) - - $(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'],function(){ - analysisdown(); - }); - }) - - $(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){ - console.log(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(){ - 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'],function(){ - 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'] = parseInt(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; - updata(d) - }) - } - - function updata(d){ - var title = $(".select-chart").attr("title"); - if(title == '数据报表'){ $(".table-div-box").show(); $(".analysis-echarts").hide(); retainedtable(d)} - else if(title == '第N日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retainednRetained(d) } - else if(title == '每日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retaineddayRetained(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 arr = {}; - var xAxisData=[]; - var seriesData=[]; - var legenddata = []; - if(jQuery.isEmptyObject(d.values)){ - legenddata = d.date_range; - for(let i in d['days']){ - var tit = "第" + i + "日"; - xAxisData.push(tit); - } - for(let i in d['summary_values']){ - var arr = { - name: i, - type: 'line', - data: d['summary_values'][i]['p'] - } - seriesData.push(arr); - } - }else { - var timearr = []; - for(let i in d.values){ - timearr.push(i); - for(let j in d.values[i]){ - if(arr[j]){ - arr[j][i] = d.values[i][j]['p']; - }else { - arr[j]=[]; - arr[j][i] = d.values[i][j]['p']; - } - } - } - - var ydata = {}; - for(let j in arr){ - if(!ydata[j]){ - ydata[j] = []; - } - for( let i in timearr ){ - ydata[j].push(""); - for(let z in arr[j]){ - if(timearr[i] == z){ - var index = arr[j][z].length - 1; - ydata[j][i] =arr[j][z][index]; - } - } - } - } - console.log(ydata); - // for(let i in ydata){ - // legenddata.push(i); - // var arr = { - // name: i, - // type: 'line', - // data: ydata[i] - // } - // seriesData.push(arr) - // } - } - return; - 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: legenddata, - }, - 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 arr = {}; - var legenddata = []; - var seriesData = []; - if(jQuery.isEmptyObject(d.values)){ - var arr = [] - for(let i in d['summary_values']){ - var index = d['summary_values'][i]['p'].length - 1; - arr.push(d['summary_values'][i]['p'][index]); - } - - seriesData = { - type: 'line', - data: arr - } - }else { - var timearr = []; - for(let i in d.values){ - timearr.push(i); - for(let j in d.values[i]){ - if(arr[j]){ - arr[j][i] = d.values[i][j]['p']; - }else { - arr[j]=[]; - arr[j][i] = d.values[i][j]['p']; - } - } - } - - var ydata = {}; - for(let j in arr){ - if(!ydata[j]){ - ydata[j] = []; - } - for( let i in timearr ){ - ydata[j].push(""); - for(let z in arr[j]){ - if(timearr[i] == z){ - var index = arr[j][z].length - 1; - ydata[j][i] =arr[j][z][index]; - } - } - } - } - - for(let i in ydata){ - legenddata.push(i); - var arr = { - name: i, - type: 'line', - data: ydata[i] - } - 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: legenddata - }, - grid: { - left: '2%', - right: '2%', - bottom: '2%', - top: '10%', - containLabel: true - }, - xAxis: [ - { - type: 'category', - boundaryGap: false, - data: d.date_range - } - ], - yAxis: [ - { - type: 'value' - } - ], - series: seriesData - }; - 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('请先计算数据,在切换图表'); - } - }) - } }; })(); \ No newline at end of file diff --git a/web/srczip/logic/funnelanalysis.js b/web/srczip/logic/funnelanalysis.js new file mode 100644 index 0000000..e54cc2e --- /dev/null +++ b/web/srczip/logic/funnelanalysis.js @@ -0,0 +1,680 @@ +(function(){ + X.pageLogic['funnelanalysis'] = { + init : function(parms){ + // 分组项 + X.template("grouped","shushi"); + + var data ={ + "eventView":{ + "cksql":"funnel", + "endTime":"", + "filts":[], + "groupBy":[], + "recentDay":"1-30", + "relation":"and", + "startTime":"", + "statType":"retention", + "timeParticleSize":"P1D", + "windows_gap":7 + }, + "events":[ + + ], + }; + + // 日期渲染 + 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"; + + var eventdata; + var filtersymbols = [[],[]];//默认两个事件 + var groupitemeventsdata=[[],[]]//分组项里的事件 + // var screentypearr = []; + + 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":"" + },{ + "eventDesc":eventdata[0]['category'][0]['event_desc'], + "eventName":eventdata[0]['category'][0]['event_name'], + "filts":[], + "relation":"and", + "relationUser":"and", + "renameindicator":"" + } + ] + data['events'] = 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("funnel","funnel-event",data['events']); + //开启重命名 + $(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-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(); + }) + + // 添加指标 + function addindex(){ + var defaultindicator = { + "eventDesc":eventdata[0]['category'][0]['event_desc'], + "eventName":eventdata[0]['category'][0]['event_name'], + "filts":[], + "relation":"and", + "relationUser":"and", + "renameindicator":"" + } + data['events'].push(defaultindicator); + X.template("funnel","funnel-event",data['events'],function(){ + var drr = []; + filtersymbols.push(drr); + if(data['events'].length > 2){ + $(".analysis-del").show(); + }else { + $(".analysis-del").hide(); + } + }); + + } + + //添加按钮 + $(document).off('click','.analysis-jia1').on('click','.analysis-jia1',function(){ + addindex(); + }) + $(document).off('click','.funnel-updataevent').on('click','.funnel-updataevent',function(){ + addindex(); + }) + + // 添加筛选项 + $(document).off('click','.analysis-shaix').on('click','.analysis-shaix',function(){ + var obj = $(this); + var index = obj.attr("data-index"); + addscreen(index); + }) + + // 添加筛选项 + function addscreen(index){ + console.log(data); + X.api('data_auth/load_filter_props',"post",{event_name:data['events'][index]["eventName"]},function(d){ + console.log(d); + 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'][index]['filts'].push(arr); + var drr=[]; + filtersymbols.push(drr); + groupitemeventsdata[index] = d; + filtersymbols[index][filtersymbols[index].length ] = d[0]['category'][0]["category"]; + + X.template("funnel","funnel-event",data['events']); + }) + } + + $(document).off('click','.analysis-zhibiao-updata').on('click','.analysis-zhibiao-updata',function(){ + var obj = $(this); + var index = obj.attr("data-index"); + addscreen(index); + }) + + // 删除指定初始事件筛选 + $(document).off('click','.analysis-del').on('click','.analysis-del',function(){ + var index = $(this).attr("data-index"); + data['events'].splice(index,1); + filtersymbols[index].splice(index,1); + // groupitemeventsdata[index].splice(index,1); + X.template("funnel","funnel-event",data['events']); + }) + + //删除指定筛选 + $(document).off('click','.analysis-zhibiao-list-del').on('click','.analysis-zhibiao-list-del',function(){ + var index = $(this).attr("data-index"); + var indexs = $(this).attr("data-twonum"); + data['events'][index]['filts'].splice(indexs,1); + filtersymbols[index].splice(indexs,1); + X.template("funnel","funnel-event",data['events']); + }) + + $(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','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function(){ + var obj = $(this); + var offset = obj.offset(); + var index = obj.attr("data-index"); + var dataevent= data['events'][index]; + // console.log(dataevent); + X.querycriteriapop(eventdata,'setgrouping',offset.left,offset.top+obj.height(),function(val){ + console.log(val); + obj.html(val.id); + dataevent['eventName'] = val.name; + dataevent['eventDesc'] = val.id; + + X.api("data_auth/load_filter_props","post",{event_name:val.name},function(val){ + groupitemeventsdata[index] = val; + }) + // console.log(data['events']); + + }) + }) + + $(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"); + console.log(groupitemeventsdata); + X.querycriteriapop(groupitemeventsdata[index],'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"); + console.log(filtersymbols); + 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'],function(){ + analysisdown(); + }); + }) + + $(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){ + console.log(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(){ + 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'],function(){ + 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']); + $(".group-updata").show(); + }) + + $(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']); + $(this).hide(); + }) + + $(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':'1天','id':'1'}, + {'title':'7日','id':'7'}, + {'title':'14日','id':'14'}, + {'title':'30日','id':'30'}, + ] + X.laydropdown('.analtsis-timeParticleSize',timeParticleSizearr,function(d){ + $(".analtsis-timeParticleSize").html(d.title); + data['eventView']['windows_gap'] = parseInt(d.id); + retaineddata(); + }) + + // 计算按钮 + $(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){ + console.log(data); + + retaineddata() + }) + var querydata; + function retaineddata(){ + X.api("ck/funnel_model","post",data,function(d){ + d['etitle'] = $.extend(true,[],d['title']); + if(d['title'].length == 2){ + d['etitle'].unshift('总体'); + } + querydata = d; + updata(d) + }) + } + + function updata(d){ + var title = $(".select-chart").attr("title"); + if(title == '转化图'){ retainedtable(d); retaineddayRetained(d);} + else if(title == '趋势图'){ retainednRetained(d);retainednRetainedtable(d); } + } + + function retainedtable(d){ + var tabledata=[]; + for(let i in d['list']){ + var arr = { + title: d['list'][i]["title"], + data:[] + } + for(let j in d['list'][i]["n"]){ + var nrr = { + n:0, + p:0 + } + nrr["n"] = d['list'][i]["n"][j]; + nrr["p"] = d['list'][i]["p1"][j] + arr['data'].push(nrr); + } + tabledata.push(arr) + } + + X.laytpldata("#table-fenxi-th-dot",d.etitle,".table-fenxi-th"); + X.laytpldata("#table-fenxi-td-dot",tabledata,".table-fenxi-td"); + } + + //转化图 + function retaineddayRetained(d){ + var arr = {}; + var xAxisData= d['level']; + var seriesData=[]; + + for(let i in d['list']){ + var arr = { + name: d['list'][i]['title'], + type: 'bar', + barMaxWidth : 30, + data: d['list'][i]['p1'] + } + seriesData.push(arr); + } + + var myChart = echarts.init(document.getElementById('funnel-echarts')); + var option = { + color: X.DATA.echartscolor, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + grid: { + left: '2%', + right: '2%', + bottom: '5%', + top: '10%', + }, + xAxis: [ + { + type: 'category', + data: xAxisData + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: seriesData + }; + myChart.setOption(option,true); + } + // 趋势图 + function retainednRetained(d){ + var arr = {}; + var legenddata = []; + var seriesData = []; + var xAxisdata = []; + if(jQuery.isEmptyObject(d.date_data)){ + var arr = [] + for(let i in d['summary_values']){ + var index = d['summary_values'][i]['p'].length - 1; + arr.push(d['summary_values'][i]['p'][index]); + } + + seriesData = { + type: 'line', + data: arr + } + }else { + var arr =[]; + for(let i in d['date_data']){ + xAxisdata.push(i); + for(let j in d['date_data'][i]){ + if(arr[j]){ + arr[j][i] = d['date_data'][i][j]['p1']; + }else { + arr[j]=[]; + arr[j][i] = d['date_data'][i][j]['p1']; + } + } + } + + var ydata = {}; + for(let j in arr){ + if(!ydata[j]){ + ydata[j] = []; + } + for( let i in xAxisdata ){ + ydata[j].push(""); + for(let z in arr[j]){ + if(xAxisdata[i] == z){ + var index = arr[j][z].length - 1; + ydata[j][i] =arr[j][z][index]; + } + } + } + } + + for(let i in ydata){ + legenddata.push(i); + var arr = { + name: i, + type: 'line', + data: ydata[i] + } + seriesData.push(arr) + } + + } + var myChart = echarts.init(document.getElementById('funnel-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: legenddata + }, + 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 retainednRetainedtable(d){ + var arr = {}; + var seriesData = []; + var xAxisdata = []; + if(jQuery.isEmptyObject(d.date_data)){ + var arr = [] + for(let i in d['summary_values']){ + var index = d['summary_values'][i]['p'].length - 1; + arr.push(d['summary_values'][i]['p'][index]); + } + + seriesData = { + type: 'line', + data: arr + } + }else { + var arr =[]; + for(let i in d['date_data']){ + xAxisdata.push(i); + for(let j in d['date_data'][i]){ + if(arr[j]){ + arr[j][i] = d['date_data'][i][j]['p1']; + }else { + arr[j]=[]; + arr[j][i] = d['date_data'][i][j]['p1']; + } + } + } + + var ydata = {}; + for(let j in arr){ + if(!ydata[j]){ + ydata[j] = []; + } + for( let i in xAxisdata ){ + ydata[j].push(0); + for(let z in arr[j]){ + if(xAxisdata[i] == z){ + var index = arr[j][z].length - 1; + ydata[j][i] =arr[j][z][index]; + } + } + } + } + + } + xAxisdata.unshift('总体'); + + var tabdata = []; + for(let i in ydata){ + var arr = { + 'title': i, + 'data':[] + } + for(let j in ydata[i]){ + var nrr = { + n:'', + p:ydata[i][j] + } + arr['data'].push(nrr); + } + tabdata.push(arr); + } + console.log(tabdata); + X.laytpldata("#table-fenxi-th-dot",xAxisdata,".table-fenxi-th"); + X.laytpldata("#table-fenxi-td-dot",tabdata,".table-fenxi-td"); + } + + 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') == '转化图'){ retainedtable(querydata); retaineddayRetained(querydata)} + else if($(this).attr('title') == '趋势图'){ + retainednRetained(querydata); + retainednRetainedtable(querydata); + } + }else{ + layer.msg('请先计算数据,在切换图表'); + } + }) + + } + }; +})(); \ No newline at end of file diff --git a/web/srczip/logic/retained.js b/web/srczip/logic/retained.js index f37f38a..81ef01a 100644 --- a/web/srczip/logic/retained.js +++ b/web/srczip/logic/retained.js @@ -6,22 +6,21 @@ 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 + "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":[ + + ], }; // 日期渲染 @@ -38,12 +37,6 @@ 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=[[],[]]//分组项里的事件 @@ -538,7 +531,7 @@ title: { text: '' }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { @@ -604,7 +597,6 @@ } } } - var ydata = {}; for(let j in arr){ if(!ydata[j]){ @@ -620,7 +612,6 @@ } } } - for(let i in ydata){ legenddata.push(i); var arr = { @@ -630,6 +621,7 @@ } seriesData.push(arr) } + } var myChart = echarts.init(document.getElementById('analysis-echarts')); @@ -637,7 +629,7 @@ title: { text: '' }, - color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ], + color: X.DATA.echartscolor, tooltip: { trigger: 'axis', axisPointer: { diff --git a/web/static/css/analysis.css b/web/static/css/analysis.css index 50183f5..4244f76 100644 --- a/web/static/css/analysis.css +++ b/web/static/css/analysis.css @@ -16,7 +16,7 @@ .analysis-con-left { width: 550px; height: 100%; background-color: #ffffff; } .analysis-con-right { width: calc(100% - 550px); height: 100%;} -.analtsis-con-box { height: calc(100% - 153px); margin: 16px; background-color: #ffffff; } +.analtsis-con-box { height: calc(100% - 153px); margin: 16px; background-color: #ffffff; overflow: auto; } .analysis-con-left-shrink { background-color: #ffffff !important; z-index: 999999; position: absolute; top: 0; left: 537px; margin: auto; bottom: 125px; border: 1px solid #f0f2f5; width: 24px; height: 24px; border-radius: 24px; line-height: 30px; cursor: pointer; text-align: center; background: url('../img/zuoshuangjiantou.png') no-repeat 100%; background-position: center;} .analysis-con-left-shrink:hover{ border-color: #3d90ff; box-shadow: 0 0px 6px #3d90ff; background: url('../img/zuoshuangjiantou2.png') no-repeat 100%; background-position: center;} @@ -150,6 +150,10 @@ .analysis-footadd___2D4YB { display: inline-block; margin-right: 16px; padding: 4px; color: #3d90ff; font-size: 13px; line-height: 16px; border-radius: 2px; cursor: pointer; } .analysis-footadd___2D4YB img { width: 13px; height: 13px; } .analysis-footadd___2D4YB:hover { background-color: #f1f8ff; } +.funnel-updataevent { display: inline-block; margin-right: 16px; padding: 4px; color: #3d90ff; font-size: 13px; line-height: 16px; border-radius: 2px; cursor: pointer; } +.funnel-updataevent img { width: 13px; height: 13px; } +.funnel-updataevent:hover { background-color: #f1f8ff; } + .bgcolor { background-color: #6bb2ff; } .analysis-action-left { display: flex; align-items: center; } .analysis-ant-dropdown-trigger { color: #67729d; margin: 6px 0 6px 6px; padding: 0 6px; min-width: 40px; height: 28px; font-size: 13px; line-height: 26px; white-space: nowrap; vertical-align: top; border: 1px solid #f0f2f5; cursor: pointer; border-radius: 2px; } @@ -196,6 +200,8 @@ .analtsis-chart-switch-box { display: flex; align-items: center; } .analtsis-chart-switch { width: 28px; height: 28px; text-align: center; line-height: 28px; border: 1px solid #f0f0f0; cursor: pointer; color: #67729d; } .select-chart { background-color: #3d90ff; border-right: #3d90ff; color: #fff; } +.analtsis-timeParticleSize { max-width: 40px; } +.windows_gap { margin-left: 16px; } .analysis-overall-situation-add { display: inline-block; margin-right: 16px; padding: 4px; color: #3d90ff; font-size: 13px; line-height: 16px; border-radius: 2px; cursor: pointer; } .analysis-overall-situation-add img { width: 13px; height: 13px; }