leguadmin/xfrontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

漏斗分析

Browse Source
This commit is contained in:
罗松柏 2021-06-18 18:01:31 +08:00
parent eca96f7f21
commit f58e0b7cad
11 changed files with 1446 additions and 1224 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/pages/dashboard.html
View File

@ -26,7 +26,7 @@
<dl class="layui-nav-child"> <dl class="layui-nav-child">
<dd><a class="ajax-content" href="analysis" data-id="conetnt">事件分析</a></dd> <dd><a class="ajax-content" href="analysis" data-id="conetnt">事件分析</a></dd>
<dd><a class="ajax-content" href="retained" data-id="conetnt">留存分析</a></dd> <dd><a class="ajax-content" href="retained" data-id="conetnt">留存分析</a></dd>
<dd><a href="javascript:void(0);">漏斗分析</a></dd> <dd><a class="ajax-content" href="funnelanalysis" data-id="conetnt">漏斗分析</a></dd>
<dd><a href="javascript:void(0);">分布分析</a></dd> <dd><a href="javascript:void(0);">分布分析</a></dd>
<dd><a href="javascript:void(0);">路径分析</a></dd> <dd><a href="javascript:void(0);">路径分析</a></dd>
</dl> </dl>

249
web/pages/funnel.html
View File

@ -1,177 +1,86 @@
<!-- 留存分析 --> <!-- 漏斗 -->
<div class="analysis-zhanwei"> <script id="analysis-con-left-screen-list-dot" type="text/html">
</div>
<div class="analysis-navigation-bar-box">
<div class="analysis-navigation-bar">
<div class="analysis-navigation-bar-left">
<span>留存分析</span><img src="./static/img/capytishi.png" title="分析某段时间内，某个事件或事件属性的整体趋势情况"/>
</div>
<div class="analysis-navigation-bar-right">
<div class="analysis-navigation-bar-right-jisuan">
<span>TA用户ID</span>
</div>
<div class="analysis-navigation-bar-right-img" title="最后更新时间：2021-04-29 14:44:39">
<img src="./static/img/gengxin.png">
</div>
<div class="analysis-navigation-bar-right-img sqlquery" title="查看条件代码">
<i class="iconfont" style="font-size: 18px; color: #67729d;">&#xe727;</i>
</div>
<div class="analysis-navigation-bar-right-img" title="以页面格式下载全量数据">
<img src="./static/img/xiazai.png">
</div>
<div class="analysis-navigation-bar-right-img analysis-navigation-bar-right-img-baobiao" title="报表">
<img src="./static/img/baobiao2.png">
</div>
</div>
</div>
<div class="analysis-bg">
<!-- 左侧条件筛选区域 -->
<div class="analysis-con-left">
<!-- 伸缩按钮 -->
<div class="analysis-con-left-shrink"></div>
<div class="root___2a4tb">
<div class="block___2n0We">
<div class="analysis-con-left-title">初始事件</div>
<div class="analysis-con-left-screen-list-box" id="initial-event">
</div>
</div>
<div class="block___2n0We">
<div class="analysis-con-left-title">回访事件</div>
<div class="analysis-con-left-screen-list-box" id="returnvisit-event">
</div>
</div>
<div class="block___2n0We analysis-overall" style="display: block;">
<div class="analysis-con-left-title">全局筛选</div>
<div class="analysis-con-left-screen-box">
<div class="analysis-overall-situation-box">
<div class="analysis-overall-situation-left-box">
<div class="analysis-overall-situation-left-xian"></div>
<div class="analysis-overall-situation-left-guanxi">且</div>
</div>
<div class="analysis-overall-situation-list-box" id="xinwei-whole">
</div>
</div>
<div class="analysis-foot___P797w">
<span class="analysis-overall-situation-add">
<img src="./static/img/fenzu.png">
添加条件
</span>
</div>
</div>
</div>
<div class="block___2n0We">
<div class="analysis-con-left-title">分组项</div>
<div class="analysis-con-left-screen-box" id="shushi">
</div>
<div class="analysis-foot___P797w">
<span class="analysis-footadd___2D4YB">
<img src="./static/img/fenzu.png">
添加分组项
</span>
</div>
</div>
</div>
<div class="analysis-but-box">
<div class="analysis-savereport">保存报表</div>
<div class="analysis-calculation">计 算</div>
</div>
</div>
<!-- 右边图表显示区域 -->
<div class="analysis-con-right">
<div class="analtsis-con-box">
<div class="analtsis-con-right-box">
<div class="analtsis-con-right-top-title">
玩法参与情况
</div>
<div class="analtsis-condition-box">
<div class="analtsis-time-box">
<div class="analtsis-condition" > <input id="retained-condition-date" readonly="readonly"></input> </div>
<div class="analtsis-condition analtsis-timeParticleSize">7天</div>
</div>
<div class="analtsis-condition-right-box">
<!-- <div class="analtsis-condition">指标</div>
<div class="analtsis-condition">分组</div> -->
<div class="analtsis-chart-switch-box">
<div class="analtsis-chart-switch select-chart" title="数据报表"> <i class="iconfont" style="font-size: 18px; ">&#xe670;</i> </div>
<div class="analtsis-chart-switch " title="第N日留存"> <i class="iconfont" style="font-size: 18px; ">&#xe601;</i> </div>
<div class="analtsis-chart-switch" title="每日留存"> <i class="iconfont" style="font-size: 18px; ">&#xe601;</i> </div>
</div>
</div>
</div>
<!-- 统计图 -->
<div class="analysis-echarts" id="analysis-echarts" style="display: none;"></div>
<div class="table-div-box">
<table class="table-fenxi-box">
<thead>
<tr class="table-fenxi-th">
</tr>
</thead>
<tbody class="table-fenxi-td">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="table-fenxi-th-dot" type="text/html">
{{# layui.each(d, function(index, item){ }} {{# layui.each(d, function(index, item){ }}
{{# if(item == "第0日"){ }}
<th>当日</th> <div class="analysis-con-left-screen-list">
<!-- 指标选择 -->
<div class="analysis-con-left-screen-list-left-box" id="analysis-con-left-screen-list-left-box-{{index}}">
<div class="analysis-con-left-screen-list-left-zhibiaoname" id="analysis-con-left-screen-list-left-zhibiaoname-{{index}}">
<input type="text" placeholder="请输入指标名" class="analysis-con-left-screen-list-left-zhibiaoname-txt" data-index="{{index}}"/>
</div>
<div class="analysis-con-left-screen-list-left">
<div class="analysis-num">{{index}}</div>
<div class="analysis-zhibiao-list">
<div class="ant-dropdown-trigger analysis-zhibiao-list-type1 analysis-background" data-index="{{index}}"> {{item.eventDesc}}</div>
</div>
</div>
{{# if(item.filts.length > 0){ }}
<div class="analysis-con-left-screen-list-right-screen-bg" id="analysis-con-left-screen-list-right-screen-bg-{{index}}">
<div class="analysis-con-left-screen-list-right-screen-box">
<div class="analysis-con-left-screen-list-right-screen-qh">
<div class="analysis-con-left-screen-list-right-screen-qh-xian"></div>
{{# if(item.filts.length > 1){ }}
{{# if(item.condrelation === "and"){ }}
<div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}">且</div>
{{# } else { }} {{# } else { }}
<th>{{item}}</th> <div class="analysis-con-left-screen-list-right-screen-qh-tit" data-index="{{index}}">或</div>
{{# } }} {{# } }}
{{# } }}
</div>
<div style="padding-bottom: 10px;" class="analysis-zhibiao-list2-box">
{{# layui.each(item.filts, function(indexs, items){ }}
<div class="analysis-zhibiao-list analysis-zhibiao-list-mar" id="analysis-zhibiao-list-mar-{{index}}-{{indexs}}">
<div id="ta-property-select-{{index}}-{{indexs}}" class="ta-property-select analysis-zhibiao-list-type1 analysis-background" data-index="{{index}}" data-indexs="{{indexs}}"> {{items.columnDesc}}</div>
<div class="analysis-zhibiao-list-type3 analysis-background analysis-choicetypename" data-index="{{index}}" data-indexs="{{indexs}}">{{items.comparatorName}}</div>
<!-- {{# if(item.comparator_id != "is null" && item.comparator_id != "is not null" && item.comparator_id !="not null" && item.comparator_id != "range"){ }} -->
<div class="analysis-zhibiao-list-type4" id="analysis-zhibiao-list-type4-{{index}}-{{indexs}}"> <input type="text" data-index="{{index}}" data-indexs="{{indexs}}" placeholder="多个条件用,隔开" value="{{items.strftv}}"> </div>
<!-- {{# } }} -->
<div class="analysis-zhibiao-list-del" data-index="{{index}}" data-twonum="{{indexs}}"></div>
</div>
{{# }); }} {{# }); }}
</script> </div>
</div>
<div class="analysis-zhibiao-updata-list-box">
<span class="analysis-zhibiao-updata" data-index="{{index}}"> <img src="./static/img/shaix.png" /> 添加条件 </span>
</div>
</div>
{{# } }}
</div>
<!-- 公式 -->
<div class="analysis-custom-box" id="analysis-custom-box-{{index}}">
<div class="analysis-custom-top">
<div class="analysis-num">{{index}}</div>
<div class="analysis-con-left-screen-list-left-zhibiaoname2"> <input type="text" value="自定义指标" placeholder="请出入指标名"/></div>
</div>
<div class="analysis-custom-event-box">
<input class="analysis-custom-event-txt" data-index="{{index}}" type="text" placeholder="直接输入运算符或点击选择事件"/>
</div>
<div class="analysis-custom-event-dis-box" id="analysis-custom-event-dis-box-{{index}}">
<div class="analysis-custom-event-box analysis-custom-event-box-display">
<div class="analysis-custom-event-type">用户登录</div>
<div class="analysis-custom-event-img"></div>
<div class="">.</div>
<div class="analysis-custom-event-type">触发用户数</div>
</div>
</div>
<div class="ant-select-selector">两位小数</div>
</div>
<!-- 操作按钮 -->
<div class="analysis-con-left-screen-list-right-box">
<div class="analysis-con-left-screen-list-right" id="analysis-con-left-screen-list-right-{{index}}">
<div class="analysis-chongmingming" data-index="{{index}}" title="重命名指标"></div>
<div class="analysis-chongmingming-del" data-index="{{index}}" title="取消重命名"></div>
<div class="analysis-shaix" data-index="{{index}}" title="指标筛选"></div>
<!-- <div class="analysis-gongshi" data-index="{{index}}" title="切换为指标公式"></div> -->
<div class="analysis-zhibiao" data-index="{{index}}" title="切换为指标选择"></div>
<div class="analysis-jia1" data-index="{{index}}" title="添加指标"></div>
<div class="analysis-fuzhi" title="复制指标" data-index="{{index}}"></div>
<div class="analysis-del" data-index="{{index}}" title="删除指标" style="display: none;"></div>
</div>
</div>
</div>
<script id="table-fenxi-td-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<tr >
<td>{{item.date}}</td>
<td>{{item.d0}}</td>
{{# layui.each(item.data, function(indexs, items){ }}
<td>
<p>{{items.n}}</p>
<p>{{items.p}}%</p>
</td>
{{# }); }}
</tr>
{{# }); }} {{# }); }}
</script> </script>

182
web/pages/funnelanalysis.html Normal file
View File

@ -0,0 +1,182 @@
<!-- 留存分析 -->
<div class="analysis-zhanwei">
</div>
<div class="analysis-navigation-bar-box">
<div class="analysis-navigation-bar">
<div class="analysis-navigation-bar-left">
<span>漏斗分析</span><img src="./static/img/capytishi.png" title="分析某段时间内，某个事件或事件属性的整体趋势情况"/>
</div>
<div class="analysis-navigation-bar-right">
<div class="analysis-navigation-bar-right-jisuan">
<!-- <span>TA用户ID</span> -->
</div>
<div class="analysis-navigation-bar-right-img" title="最后更新时间：2021-04-29 14:44:39">
<img src="./static/img/gengxin.png">
</div>
<div class="analysis-navigation-bar-right-img sqlquery" title="查看条件代码">
<i class="iconfont" style="font-size: 18px; color: #67729d;">&#xe727;</i>
</div>
<div class="analysis-navigation-bar-right-img" title="以页面格式下载全量数据">
<img src="./static/img/xiazai.png">
</div>
<div class="analysis-navigation-bar-right-img analysis-navigation-bar-right-img-baobiao" title="报表">
<img src="./static/img/baobiao2.png">
</div>
</div>
</div>
<div class="analysis-bg">
<!-- 左侧条件筛选区域 -->
<div class="analysis-con-left">
<!-- 伸缩按钮 -->
<div class="analysis-con-left-shrink"></div>
<div class="root___2a4tb">
<div class="block___2n0We">
<div class="analysis-con-left-title">漏斗步骤</div>
<div class="analysis-con-left-screen-list-box" id="funnel-event">
</div>
<div class="analysis-foot___P797w">
<span class="funnel-updataevent">
<img src="./static/img/fenzu.png">
添加步骤指标
</span>
</div>
</div>
<div class="block___2n0We analysis-overall" style="display: block;">
<div class="analysis-con-left-title">全局筛选</div>
<div class="analysis-con-left-screen-box">
<div class="analysis-overall-situation-box">
<div class="analysis-overall-situation-left-box">
<div class="analysis-overall-situation-left-xian"></div>
<div class="analysis-overall-situation-left-guanxi">且</div>
</div>
<div class="analysis-overall-situation-list-box" id="xinwei-whole">
</div>
</div>
<div class="analysis-foot___P797w">
<span class="analysis-overall-situation-add">
<img src="./static/img/fenzu.png">
添加条件
</span>
</div>
</div>
</div>
<div class="block___2n0We">
<div class="analysis-con-left-title">分组项</div>
<div class="analysis-con-left-screen-box" id="shushi">
</div>
<div class="analysis-foot___P797w">
<span class="analysis-footadd___2D4YB group-updata">
<img src="./static/img/fenzu.png">
添加分组项
</span>
</div>
</div>
<div class="block___2n0We">
<div class="analysis-con-left-title">分析窗口期</div>
<div class="analysis-con-left-screen-box" >
<div class="analtsis-condition analtsis-timeParticleSize windows_gap">7天</div>
</div>
</div>
</div>
<div class="analysis-but-box">
<div class="analysis-savereport">保存报表</div>
<div class="analysis-calculation">计 算</div>
</div>
</div>
<!-- 右边图表显示区域 -->
<div class="analysis-con-right">
<div class="analtsis-con-box">
<div class="analtsis-con-right-box">
<div class="analtsis-con-right-top-title">
玩法参与情况
</div>
<div class="analtsis-condition-box">
<div class="analtsis-time-box">
<div class="analtsis-condition" > <input id="retained-condition-date" readonly="readonly"></input> </div>
</div>
<div class="analtsis-condition-right-box">
<!-- <div class="analtsis-condition">指标</div>
<div class="analtsis-condition">分组</div> -->
<div class="analtsis-chart-switch-box">
<div class="analtsis-chart-switch select-chart" title="转化图"> <i class="iconfont" style="font-size: 18px; ">&#xe670;</i> </div>
<div class="analtsis-chart-switch " title="趋势图"> <i class="iconfont" style="font-size: 18px; ">&#xe601;</i> </div>
</div>
</div>
</div>
<!-- 统计图 -->
<div class="analysis-echarts" id="funnel-echarts" ></div>
<div class="table-div-box" style="height: 100%; margin-top: 16px;">
<table class="table-fenxi-box">
<thead>
<tr class="table-fenxi-th">
</tr>
</thead>
<tbody class="table-fenxi-td">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="table-fenxi-th-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
{{# if(item == "第0日"){ }}
<th>当日</th>
{{# } else { }}
<th>{{item}}</th>
{{# } }}
{{# }); }}
</script>
<script id="table-fenxi-td-dot" type="text/html">
{{# layui.each(d, function(index, item){ }}
<tr >
<td>{{item.title}}</td>
{{# layui.each(item.data, function(indexs, items){ }}
<td>
<p>{{items.n}}</p>
<p>{{items.p}}%</p>
</td>
{{# }); }}
</tr>
{{# }); }}
</script>

585
web/src/x.min.js vendored
View File

@ -4,6 +4,7 @@ var X = window.X || {
event : new EventEmitter(), event : new EventEmitter(),
pageLogic : {}, pageLogic : {},
DATA : { 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'}], 'createsidebar':[{ title: '新建看板',id: 0,url:'newkanban'},{title: '新建文件夹',id: 1,url:'newwenjian'},{title: '创建空间',id: 2,url:'kongjianshezhi'}],
'taboperationdata':{ 'taboperationdata':{
kanban:[ kanban:[
@ -184,7 +185,6 @@ var X = window.X || {
}, },
error:function(error){ error:function(error){
layer.msg('服务器错误'); layer.msg('服务器错误');
// console.log('服务器错误');
layer.close(index); layer.close(index);
} }
}); });
@ -1504,7 +1504,6 @@ var X = window.X || {
}) })
// 设置一级事件 // 设置一级事件
$(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() { $(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() {
var obj = $(this); var obj = $(this);
var offset = obj.offset(); 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 obj = $(this);
var index = obj.attr("data-index"); var index = obj.attr("data-index");
addscreen(index); addscreen(index);
@ -2006,7 +2005,7 @@ var X = window.X || {
var querydata;//查询数据 var querydata;//查询数据
$(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){ $(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){
console.log(querydata)
if(querydata){ if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart'); $('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('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') == '分布图'){distributionmap(querydata)}
else if($(this).attr('title') == '饼状分布'){} else if($(this).attr('title') == '饼状分布'){}
}else{ }else{
layer.msg('请先计算数据,在切换图表'); // layer.msg('请先计算数据,在切换图表');
} }
}) })
@ -2026,7 +2025,7 @@ var X = window.X || {
var xAxisData=[]; var xAxisData=[];
for(let i in d){ for(let i in d){
for(let z in d[i]['groups']){ 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); xAxisData.push(pj);
} }
} }
@ -2051,12 +2050,13 @@ var X = window.X || {
seriesData[i]['name'] = xAxisData[i]; seriesData[i]['name'] = xAxisData[i];
} }
} }
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -2104,7 +2104,7 @@ var X = window.X || {
var xAxisData=[]; var xAxisData=[];
for(let i in d){ for(let i in d){
for(let z in d[i]['groups']){ 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); xAxisData.push(pj);
} }
} }
@ -2124,12 +2124,14 @@ var X = window.X || {
seriesData[i]['name'] = xAxisData[i]; seriesData[i]['name'] = xAxisData[i];
} }
} }
console.log(d);
console.log(seriesData);
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -2174,29 +2176,90 @@ var X = window.X || {
//分布图 //分布图
function distributionmap(d){ function distributionmap(d){
var legendData =[];
var xAxisData=[]; 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=[]; var seriesData=[];
if(jQuery.isEmptyObject(d[0]["groups"])){
for(let i in d){ for(let i in d){
for(let z in d[i]['values']){ xAxisData.push(d[i]['event_name']);
var arr = { legendData.push(d[i]['event_name']);
name: '', var num =0;
type: 'bar', for(let j in d[i]['values'][i]){
data: d[i]['values'][z] 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);
}
}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); seriesData.push(arr);
} }
} }
if(xAxisData.length > 0){ }else {
for(let i in seriesData){ var arr = {
seriesData[i]['name'] = xAxisData[i]; 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 myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
tooltip: { tooltip: {
@ -2205,28 +2268,22 @@ var X = window.X || {
type: 'shadow' 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: { legend: {
data: xAxisData data: legendData
}, },
toolbox: { grid: {
show: true, left: '2%',
orient: 'vertical', right: '2%',
left: 'right', bottom: '2%',
top: 'center', top: '10%',
feature: { containLabel: true
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
axisTick: {show: false}, axisTick: {show: false},
data: d[0]['date_range'] data: xAxisData
} }
], ],
yAxis: [ yAxis: [
@ -2242,8 +2299,8 @@ var X = window.X || {
//表格 //表格
function tabledata(d){ function tabledata(d){
console.log(d); console.log(d);
var titledata=d[0]['date_range']; // var titledata=d[0]['date_range'];
titledata.unshift('指标','阶段总和') // titledata.unshift('指标','阶段总和')
// X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th"); // X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th");
// X.laytpldata("#table-fenxi-td-dot", ,".table-fenxi-td"); // 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){ X.api("ck/event_model","post",dataArr,function(d){
querydata = d; querydata = d;
if(d[0].values.length > 0 ){ if(d[0].values.length > 0 ){
stackingdiagram(d); updata();
tabledata(d); // stackingdiagram(d);
// tabledata(d);
}else { }else {
$("#analysis-echarts").empty(); $("#analysis-echarts").empty();
layer.msg("无数据"); 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(){ $(document).off('click','.analysis-savereport').on('click','.analysis-savereport',function(){
X.parametersopen(data,'savereport','auto') X.parametersopen(data,'savereport','auto')
@ -2816,8 +2884,8 @@ var X = window.X || {
}else { }else {
var data = [] var data = []
} }
console.log(data);
X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event"); X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event");
} }
}; };
})(); })();
@ -2969,27 +3037,42 @@ var X = window.X || {
(function(){ (function(){
X.pageLogic['funnel'] = { X.pageLogic['funnel'] = {
init : function(parms){ init : function(parms){
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");
// X.gourl("grouped","shushi"); }
};
})();
// srczip/logic/funnelanalysis.js
(function(){
X.pageLogic['funnelanalysis'] = {
init : function(parms){
// 分组项
X.template("grouped","shushi"); X.template("grouped","shushi");
var data ={ var data ={
"eventView":{ "eventView":{
"cksql":"retention", "cksql":"funnel",
"endTime":"2021-06-07 23:59:59", "endTime":"",
"filts":[], "filts":[],
"groupBy":[], "groupBy":[],
"recentDay":"1-30", "recentDay":"1-30",
"relation":"and", "relation":"and",
"startTime":"2021-05-09 00:00:00", "startTime":"",
"statType":"retention", "statType":"retention",
"timeParticleSize":"P1D", "timeParticleSize":"P1D",
"unitNum":7 "windows_gap":7
}, },
"events":[ "events":[
], ],
"projectId":1
}; };
// 日期渲染 // 日期渲染
@ -3006,15 +3089,10 @@ var X = window.X || {
data['eventView']['startTime'] = timearr[0] + " "+"00:00:00"; data['eventView']['startTime'] = timearr[0] + " "+"00:00:00";
data['eventView']['endTime'] = timearr[2]+" "+"23:59:59"; 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 eventdata;
var filtersymbols = [[],[]];//默认两个事件 var filtersymbols = [[],[]];//默认两个事件
var groupitemeventsdata=[[],[]]//分组项里的事件 var groupitemeventsdata=[[],[]]//分组项里的事件
// var screentypearr = [];
X.api("data_auth/my_event","get",{},function(d){ X.api("data_auth/my_event","get",{},function(d){
eventdata = d; eventdata = d;
@ -3036,14 +3114,14 @@ var X = window.X || {
] ]
data['events'] = arr; data['events'] = arr;
X.api("data_auth/load_filter_props","post",{event_name:d[0]['category'][0]['event_name']},function(val){ X.api("data_auth/load_filter_props","post",{event_name:d[0]['category'][0]['event_name']},function(val){
groupitemeventsdata[0] = val; groupitemeventsdata[0] = val;
groupitemeventsdata[1] = val; groupitemeventsdata[1] = val;
}) })
}) })
//初始事件 //初始事件
X.template("event","initial-event",data['events'][0]); X.template("funnel","funnel-event",data['events']);
X.template("returnvisitevent","returnvisit-event",data['events'][1]);
//开启重命名 //开启重命名
$(document).off('click','.analysis-chongmingming-initial-event').on('click','.analysis-chongmingming-initial-event',function(){ $(document).off('click','.analysis-chongmingming-initial-event').on('click','.analysis-chongmingming-initial-event',function(){
$("#analysis-con-left-screen-list-left-zhibiaoname-initial-event").show(); $("#analysis-con-left-screen-list-left-zhibiaoname-initial-event").show();
@ -3051,12 +3129,6 @@ var X = window.X || {
$(".analysis-chongmingming-del-initial-event").show(); $(".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(){ $(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").hide();
@ -3065,49 +3137,49 @@ var X = window.X || {
$(".analysis-chongmingming-initial-event").show(); $(".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(); function addindex(){
$("#analysis-con-left-screen-list-left-zhibiaoname-return-event input").val(''); var defaultindicator = {
$(this).hide(); "eventDesc":eventdata[0]['category'][0]['event_desc'],
$(".analysis-chongmingming-return-event").show(); "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-zhibiao-updata-list-box .analysis-zhibiao-updata-initial-event').on('click','.analysis-zhibiao-updata-list-box .analysis-zhibiao-updata',function(){ $(document).off('click','.analysis-shaix').on('click','.analysis-shaix',function(){
// var arr = { var obj = $(this);
// "columnDesc":groupitemeventsdata[0][0]['category'][0]['title'], var index = obj.attr("data-index");
// "columnName":groupitemeventsdata[0][0]['category'][0]['id'], addscreen(index);
// "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 = { function addscreen(index){
// "columnDesc":groupitemeventsdata[1][0]['category'][0]['title'], console.log(data);
// "columnName":groupitemeventsdata[1][0]['category'][0]['id'], X.api('data_auth/load_filter_props',"post",{event_name:data['events'][index]["eventName"]},function(d){
// "comparator":"==", console.log(d);
// "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 = { var arr = {
"columnDesc":groupitemeventsdata[0][0]['category'][0]['title'], "columnDesc":groupitemeventsdata[0][0]['category'][0]['title'],
"columnName":groupitemeventsdata[0][0]['category'][0]['id'], "columnName":groupitemeventsdata[0][0]['category'][0]['id'],
@ -3118,43 +3190,38 @@ var X = window.X || {
"table_type":groupitemeventsdata[0][0]['category'][0]['data_type'], "table_type":groupitemeventsdata[0][0]['category'][0]['data_type'],
"timeUnit":"" "timeUnit":""
} }
initialevent.push(arr); data['events'][index]['filts'].push(arr);
data['events'][1]['filts'] = initialevent; var drr=[];
filtersymbols[0].push(groupitemeventsdata[0][0]['category'][0]['category']); filtersymbols.push(drr);
X.template("event","initial-event",data['events'][0]); groupitemeventsdata[index] = d;
filtersymbols[index][filtersymbols[index].length ] = d[0]['category'][0]["category"];
X.template("funnel","funnel-event",data['events']);
}) })
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); $(document).off('click','.analysis-zhibiao-updata').on('click','.analysis-zhibiao-updata',function(){
data['events'][1]['filts'] = returnevent; var obj = $(this);
filtersymbols[1].push(groupitemeventsdata[1][0]['category'][0]['category']); var index = obj.attr("data-index");
X.template("returnvisitevent","returnvisit-event",data['events'][1]); addscreen(index);
}) })
// 删除指定初始事件筛选 // 删除指定初始事件筛选
$(document).off('click','.analysis-zhibiao-list-del-initial-event').on('click','.analysis-zhibiao-list-del-initial-event',function(){ $(document).off('click','.analysis-del').on('click','.analysis-del',function(){
var index = $(this).attr("data-twonum"); var index = $(this).attr("data-index");
data['events'][0]['filts'].splice(index,1); data['events'].splice(index,1);
filtersymbols[0].splice(index,1); filtersymbols[index].splice(index,1);
X.template("event","initial-event",data['events'][0]); // groupitemeventsdata[index].splice(index,1);
X.template("funnel","funnel-event",data['events']);
}) })
$(document).off('click','.analysis-zhibiao-list-del-return-event').on('click','.analysis-zhibiao-list-del-return-event',function(){ //删除指定筛选
var index = $(this).attr("data-twonum"); $(document).off('click','.analysis-zhibiao-list-del').on('click','.analysis-zhibiao-list-del',function(){
data['events'][0]['filts'].splice(index,1); var index = $(this).attr("data-index");
filtersymbols[1].splice(index,1); var indexs = $(this).attr("data-twonum");
X.template("returnvisitevent","return-event",data['events'][0]); 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(){ $(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(){
@ -3162,11 +3229,6 @@ var X = window.X || {
data['events'][0]['renameindicator'] = txt; 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(){ $(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function(){
var obj = $(this); var obj = $(this);
var offset = obj.offset(); var offset = obj.offset();
@ -3192,7 +3254,8 @@ var X = window.X || {
var offset = obj.offset(); var offset = obj.offset();
var index = obj.attr("data-index"); var index = obj.attr("data-index");
var indexs = obj.attr("data-indexs"); 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); console.log(val);
var htmlstring = val.title; var htmlstring = val.title;
obj.html(htmlstring); obj.html(htmlstring);
@ -3230,6 +3293,7 @@ var X = window.X || {
var offset = obj.offset(); var offset = obj.offset();
var index = $(this).attr("data-index"); var index = $(this).attr("data-index");
var indexs = $(this).attr("data-indexs"); var indexs = $(this).attr("data-indexs");
console.log(filtersymbols);
X.querycriteriapop(filtersymbols[index][indexs],'dropdownlist',offset.left,offset.top+obj.height(),function(val){ X.querycriteriapop(filtersymbols[index][indexs],'dropdownlist',offset.left,offset.top+obj.height(),function(val){
if(val != undefined){ if(val != undefined){
obj.html(val.title); obj.html(val.title);
@ -3324,16 +3388,15 @@ var X = window.X || {
}) })
} }
} }
// 分组项 // 分组项
$(document).off('click','.analysis-action-right').on('click','.analysis-action-right',function() { $(document).off('click','.analysis-action-right').on('click','.analysis-action-right',function() {
var index = $(this).attr("data-index"); var index = $(this).attr("data-index");
data.eventView.groupBy.splice(index,1); data.eventView.groupBy.splice(index,1);
X.template("grouped","shushi",data['eventView']['groupBy']); X.template("grouped","shushi",data['eventView']['groupBy']);
$(".group-updata").show();
}) })
$(document).off('click','.analysis-footadd___2D4YB').on('click','.analysis-footadd___2D4YB',function() { $(document).off('click','.analysis-footadd___2D4YB').on('click','.analysis-footadd___2D4YB',function() {
var arr = { var arr = {
"columnName": "#account_id",//事件中文显示 "columnName": "#account_id",//事件中文显示
"column_id": "#account_id",//事件id "column_id": "#account_id",//事件id
@ -3344,7 +3407,7 @@ var X = window.X || {
}; };
data['eventView']['groupBy'].push(arr); data['eventView']['groupBy'].push(arr);
X.template("grouped","shushi",data['eventView']['groupBy']); X.template("grouped","shushi",data['eventView']['groupBy']);
$(this).hide();
}) })
$(document).off('click','.analysis-ant-dropdown-trigger').on('click','.analysis-ant-dropdown-trigger',function(){ $(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]['column_id'] = val.id;
data.eventView.groupBy[index]['data_type'] = val.type; data.eventView.groupBy[index]['data_type'] = val.type;
data.eventView.groupBy[index]['table_type'] = val.table_type; data.eventView.groupBy[index]['table_type'] = val.table_type;
}) })
}) })
// sql语句显示 // sql语句显示
@ -3376,27 +3436,30 @@ var X = window.X || {
// 时间粒度 // 时间粒度
var timeParticleSizearr = [ var timeParticleSizearr = [
{'title':'当日','id':'1'}, {'title':'1天','id':'1'},
{'title':'次日','id':'2'},
{'title':'7日','id':'7'}, {'title':'7日','id':'7'},
{'title':'14日','id':'14'}, {'title':'14日','id':'14'},
{'title':'30日','id':'30'}, {'title':'30日','id':'30'},
] ]
X.laydropdown('.analtsis-timeParticleSize',timeParticleSizearr,function(d){ X.laydropdown('.analtsis-timeParticleSize',timeParticleSizearr,function(d){
console.log(d);
$(".analtsis-timeParticleSize").html(d.title); $(".analtsis-timeParticleSize").html(d.title);
data['eventView']['unitNum'] = parseInt(d.id); data['eventView']['windows_gap'] = parseInt(d.id);
retaineddata(); retaineddata();
}) })
// 计算按钮 // 计算按钮
$(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){ $(document).off('click','.analysis-calculation').on('click','.analysis-calculation',function(){
console.log(data);
retaineddata() retaineddata()
}) })
var querydata;
function retaineddata(){ function retaineddata(){
X.api("ck/retention_model","post",data,function(d){ X.api("ck/funnel_model","post",data,function(d){
console.log(data); d['etitle'] = $.extend(true,[],d['title']);
if(d['title'].length == 2){
d['etitle'].unshift('总体');
}
querydata = d; querydata = d;
updata(d) updata(d)
}) })
@ -3404,109 +3467,52 @@ var X = window.X || {
function updata(d){ function updata(d){
var title = $(".select-chart").attr("title"); var title = $(".select-chart").attr("title");
if(title == '数据报表'){ $(".table-div-box").show(); $(".analysis-echarts").hide(); retainedtable(d)} if(title == '转化图'){ retainedtable(d); retaineddayRetained(d);}
else if(title == '第N日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retainednRetained(d) } else if(title == '趋势图'){ retainednRetained(d);retainednRetainedtable(d); }
else if(title == '每日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retaineddayRetained(d) }
} }
function retainedtable(d){ function retainedtable(d){
var tabledata=[]; var tabledata=[];
for(let i in d['summary_values']){ for(let i in d['list']){
var arr = { var arr = {
date: i, title: d['list'][i]["title"],
d0:d['summary_values'][i]['d0'],
data:[] data:[]
} }
for(let j in d['summary_values'][i]["n"]){ for(let j in d['list'][i]["n"]){
var nrr = { var nrr = {
n:0, n:0,
p:0 p:0
} }
nrr["n"] = d['summary_values'][i]["n"][j]; nrr["n"] = d['list'][i]["n"][j];
nrr["p"] = d['summary_values'][i]["p"][j] nrr["p"] = d['list'][i]["p1"][j]
arr['data'].push(nrr); arr['data'].push(nrr);
} }
tabledata.push(arr) tabledata.push(arr)
} }
var titdata = []; X.laytpldata("#table-fenxi-th-dot",d.etitle,".table-fenxi-th");
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"); X.laytpldata("#table-fenxi-td-dot",tabledata,".table-fenxi-td");
} }
// 每日留存 //转化图
function retaineddayRetained(d){ function retaineddayRetained(d){
var arr = {}; var arr = {};
var xAxisData=[]; var xAxisData= d['level'];
var seriesData=[]; var seriesData=[];
var legenddata = [];
if(jQuery.isEmptyObject(d.values)){ for(let i in d['list']){
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 = { var arr = {
name: i, name: d['list'][i]['title'],
type: 'line', type: 'bar',
data: d['summary_values'][i]['p'] barMaxWidth : 30,
data: d['list'][i]['p1']
} }
seriesData.push(arr); 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 = {}; var myChart = echarts.init(document.getElementById('funnel-echarts'));
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 = { var option = {
title: { color: X.DATA.echartscolor,
text: ''
},
color: [ '#3ea7fd', '#cdddfd', '#5ad8a6', '#cdf3e4', '#5d7092', '#ced4de', '#f6bd16','#fcebb9','#e86452','#f8d0cb','#6dc8ec', '#d3eef9', '#9270ca', '#d3c6ea', '#ff9d4d', '#ffd8b8', '#269a99','#aad8d8','#ff99c3','#ffd6e7' ],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -3516,21 +3522,15 @@ var X = window.X || {
} }
} }
}, },
legend: {
type:'scroll',
data: legenddata,
},
grid: { grid: {
left: '2%', left: '2%',
right: '2%', right: '2%',
bottom: '2%', bottom: '5%',
top: '10%', top: '10%',
containLabel: true
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
boundaryGap: false,
data: xAxisData data: xAxisData
} }
], ],
@ -3543,12 +3543,13 @@ var X = window.X || {
}; };
myChart.setOption(option,true); myChart.setOption(option,true);
} }
// 趋势图
function retainednRetained(d){ function retainednRetained(d){
var arr = {}; var arr = {};
var legenddata = []; var legenddata = [];
var seriesData = []; var seriesData = [];
if(jQuery.isEmptyObject(d.values)){ var xAxisdata = [];
if(jQuery.isEmptyObject(d.date_data)){
var arr = [] var arr = []
for(let i in d['summary_values']){ for(let i in d['summary_values']){
var index = d['summary_values'][i]['p'].length - 1; var index = d['summary_values'][i]['p'].length - 1;
@ -3560,15 +3561,15 @@ var X = window.X || {
data: arr data: arr
} }
}else { }else {
var timearr = []; var arr =[];
for(let i in d.values){ for(let i in d['date_data']){
timearr.push(i); xAxisdata.push(i);
for(let j in d.values[i]){ for(let j in d['date_data'][i]){
if(arr[j]){ if(arr[j]){
arr[j][i] = d.values[i][j]['p']; arr[j][i] = d['date_data'][i][j]['p1'];
}else { }else {
arr[j]=[]; arr[j]=[];
arr[j][i] = d.values[i][j]['p']; arr[j][i] = d['date_data'][i][j]['p1'];
} }
} }
} }
@ -3578,10 +3579,10 @@ var X = window.X || {
if(!ydata[j]){ if(!ydata[j]){
ydata[j] = []; ydata[j] = [];
} }
for( let i in timearr ){ for( let i in xAxisdata ){
ydata[j].push(""); ydata[j].push("");
for(let z in arr[j]){ for(let z in arr[j]){
if(timearr[i] == z){ if(xAxisdata[i] == z){
var index = arr[j][z].length - 1; var index = arr[j][z].length - 1;
ydata[j][i] =arr[j][z][index]; ydata[j][i] =arr[j][z][index];
} }
@ -3598,9 +3599,9 @@ var X = window.X || {
} }
seriesData.push(arr) seriesData.push(arr)
} }
}
var myChart = echarts.init(document.getElementById('analysis-echarts')); }
var myChart = echarts.init(document.getElementById('funnel-echarts'));
var option = { var option = {
title: { title: {
text: '' text: ''
@ -3630,7 +3631,7 @@ var X = window.X || {
{ {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: d.date_range data: xAxisdata
} }
], ],
yAxis: [ yAxis: [
@ -3643,15 +3644,85 @@ var X = window.X || {
myChart.setOption(option,true); 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; var querydata;
$(document).off('click','.analtsis-chart-switch').on('click','.analtsis-chart-switch',function(){ $(document).off('click','.analtsis-chart-switch').on('click','.analtsis-chart-switch',function(){
if(querydata){ if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart'); $('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('select-chart'); $(this).addClass('select-chart');
if($(this).attr('title') == '数据报表'){ $(".table-div-box").show(); $(".analysis-echarts").hide(); retainedtable(querydata)} if($(this).attr('title') == '转化图'){ retainedtable(querydata); retaineddayRetained(querydata)}
else if($(this).attr('title') == '第N日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retainednRetained(querydata) } else if($(this).attr('title') == '趋势图'){
else if($(this).attr('title') == '每日留存'){ $(".table-div-box").hide(); $(".analysis-echarts").show(); retaineddayRetained(querydata) } retainednRetained(querydata);
retainednRetainedtable(querydata);
}
}else{ }else{
layer.msg('请先计算数据,在切换图表'); layer.msg('请先计算数据,在切换图表');
} }
@ -4609,7 +4680,6 @@ var X = window.X || {
"events":[ "events":[
], ],
"projectId":1
}; };
// 日期渲染 // 日期渲染
@ -4626,12 +4696,6 @@ var X = window.X || {
data['eventView']['startTime'] = timearr[0] + " "+"00:00:00"; data['eventView']['startTime'] = timearr[0] + " "+"00:00:00";
data['eventView']['endTime'] = timearr[2]+" "+"23:59:59"; 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 eventdata;
var filtersymbols = [[],[]];//默认两个事件 var filtersymbols = [[],[]];//默认两个事件
var groupitemeventsdata=[[],[]]//分组项里的事件 var groupitemeventsdata=[[],[]]//分组项里的事件
@ -5126,7 +5190,7 @@ var X = window.X || {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -5192,7 +5256,6 @@ var X = window.X || {
} }
} }
} }
var ydata = {}; var ydata = {};
for(let j in arr){ for(let j in arr){
if(!ydata[j]){ if(!ydata[j]){
@ -5208,7 +5271,6 @@ var X = window.X || {
} }
} }
} }
for(let i in ydata){ for(let i in ydata){
legenddata.push(i); legenddata.push(i);
var arr = { var arr = {
@ -5218,6 +5280,7 @@ var X = window.X || {
} }
seriesData.push(arr) seriesData.push(arr)
} }
} }
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
@ -5225,7 +5288,7 @@ var X = window.X || {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {

2
web/srczip/common.js
View File

@ -3,6 +3,7 @@ var X = window.X || {
event : new EventEmitter(), event : new EventEmitter(),
pageLogic : {}, pageLogic : {},
DATA : { 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'}], 'createsidebar':[{ title: '新建看板',id: 0,url:'newkanban'},{title: '新建文件夹',id: 1,url:'newwenjian'},{title: '创建空间',id: 2,url:'kongjianshezhi'}],
'taboperationdata':{ 'taboperationdata':{
kanban:[ kanban:[
@ -183,7 +184,6 @@ var X = window.X || {
}, },
error:function(error){ error:function(error){
layer.msg('服务器错误'); layer.msg('服务器错误');
// console.log('服务器错误');
layer.close(index); layer.close(index);
} }
}); });

150
web/srczip/logic/analysis.js
View File

@ -237,7 +237,6 @@
}) })
// 设置一级事件 // 设置一级事件
$(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() { $(document).off('click','.ant-dropdown-trigger').on('click','.ant-dropdown-trigger',function() {
var obj = $(this); var obj = $(this);
var offset = obj.offset(); 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 obj = $(this);
var index = obj.attr("data-index"); var index = obj.attr("data-index");
addscreen(index); addscreen(index);
@ -739,7 +738,7 @@
var querydata;//查询数据 var querydata;//查询数据
$(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){ $(document).on('click','.analtsis-chart-switch-box .analtsis-chart-switch',function(){
console.log(querydata)
if(querydata){ if(querydata){
$('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart'); $('.analtsis-chart-switch-box .analtsis-chart-switch').removeClass('select-chart');
$(this).addClass('select-chart'); $(this).addClass('select-chart');
@ -749,7 +748,7 @@
else if($(this).attr('title') == '分布图'){distributionmap(querydata)} else if($(this).attr('title') == '分布图'){distributionmap(querydata)}
else if($(this).attr('title') == '饼状分布'){} else if($(this).attr('title') == '饼状分布'){}
}else{ }else{
layer.msg('请先计算数据,在切换图表'); // layer.msg('请先计算数据,在切换图表');
} }
}) })
@ -759,7 +758,7 @@
var xAxisData=[]; var xAxisData=[];
for(let i in d){ for(let i in d){
for(let z in d[i]['groups']){ 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); xAxisData.push(pj);
} }
} }
@ -784,12 +783,13 @@
seriesData[i]['name'] = xAxisData[i]; seriesData[i]['name'] = xAxisData[i];
} }
} }
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -837,7 +837,7 @@
var xAxisData=[]; var xAxisData=[];
for(let i in d){ for(let i in d){
for(let z in d[i]['groups']){ 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); xAxisData.push(pj);
} }
} }
@ -857,12 +857,14 @@
seriesData[i]['name'] = xAxisData[i]; seriesData[i]['name'] = xAxisData[i];
} }
} }
console.log(d);
console.log(seriesData);
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -907,29 +909,90 @@
//分布图 //分布图
function distributionmap(d){ function distributionmap(d){
var legendData =[];
var xAxisData=[]; 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=[]; var seriesData=[];
if(jQuery.isEmptyObject(d[0]["groups"])){
for(let i in d){ for(let i in d){
for(let z in d[i]['values']){ xAxisData.push(d[i]['event_name']);
var arr = { legendData.push(d[i]['event_name']);
name: '', var num =0;
type: 'bar', for(let j in d[i]['values'][i]){
data: d[i]['values'][z] 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);
}
}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); seriesData.push(arr);
} }
} }
if(xAxisData.length > 0){ }else {
for(let i in seriesData){ var arr = {
seriesData[i]['name'] = xAxisData[i]; 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 myChart = echarts.init(document.getElementById('analysis-echarts'));
var option = { var option = {
tooltip: { tooltip: {
@ -938,28 +1001,22 @@
type: 'shadow' 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: { legend: {
data: xAxisData data: legendData
}, },
toolbox: { grid: {
show: true, left: '2%',
orient: 'vertical', right: '2%',
left: 'right', bottom: '2%',
top: 'center', top: '10%',
feature: { containLabel: true
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
}, },
xAxis: [ xAxis: [
{ {
type: 'category', type: 'category',
axisTick: {show: false}, axisTick: {show: false},
data: d[0]['date_range'] data: xAxisData
} }
], ],
yAxis: [ yAxis: [
@ -975,8 +1032,8 @@
//表格 //表格
function tabledata(d){ function tabledata(d){
console.log(d); console.log(d);
var titledata=d[0]['date_range']; // var titledata=d[0]['date_range'];
titledata.unshift('指标','阶段总和') // titledata.unshift('指标','阶段总和')
// X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th"); // X.laytpldata("#table-fenxi-th-dot",titledata,".table-fenxi-th");
// X.laytpldata("#table-fenxi-td-dot", ,".table-fenxi-td"); // X.laytpldata("#table-fenxi-td-dot", ,".table-fenxi-td");
} }
@ -995,14 +1052,25 @@
X.api("ck/event_model","post",dataArr,function(d){ X.api("ck/event_model","post",dataArr,function(d){
querydata = d; querydata = d;
if(d[0].values.length > 0 ){ if(d[0].values.length > 0 ){
stackingdiagram(d); updata();
tabledata(d); // stackingdiagram(d);
// tabledata(d);
}else { }else {
$("#analysis-echarts").empty(); $("#analysis-echarts").empty();
layer.msg("无数据"); 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(){ $(document).off('click','.analysis-savereport').on('click','.analysis-savereport',function(){
X.parametersopen(data,'savereport','auto') X.parametersopen(data,'savereport','auto')

2
web/srczip/logic/event.js
View File

@ -8,8 +8,8 @@
}else { }else {
var data = [] var data = []
} }
console.log(data);
X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event"); X.laytpldata("#analysis-overall-situation-list-box-dot",data,"#initial-event");
} }
}; };
})(); })();

690
web/srczip/logic/funnel.js
View File

@ -1,693 +1,15 @@
(function(){ (function(){
X.pageLogic['funnel'] = { X.pageLogic['funnel'] = {
init : function(parms){ init : function(parms){
var me = this;
// X.gourl("grouped","shushi"); if(parms){
X.template("grouped","shushi"); this.parms = parms;
var data = parms;
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]);
})
$(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 { }else {
X.groupintersection(screentypedata , groupitemeventsdata[Number(i) + Number(1)],function(d){ var data = []
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); console.log(data);
querydata = d; X.laytpldata("#analysis-con-left-screen-list-dot",data,"#funnel-event");
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('请先计算数据,在切换图表');
}
})
} }
}; };

680
web/srczip/logic/funnelanalysis.js Normal file
View File

@ -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('请先计算数据,在切换图表');
}
})
}
};
})();

14
web/srczip/logic/retained.js
View File

@ -21,7 +21,6 @@
"events":[ "events":[
], ],
"projectId":1
}; };
// 日期渲染 // 日期渲染
@ -38,12 +37,6 @@
data['eventView']['startTime'] = timearr[0] + " "+"00:00:00"; data['eventView']['startTime'] = timearr[0] + " "+"00:00:00";
data['eventView']['endTime'] = timearr[2]+" "+"23:59:59"; 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 eventdata;
var filtersymbols = [[],[]];//默认两个事件 var filtersymbols = [[],[]];//默认两个事件
var groupitemeventsdata=[[],[]]//分组项里的事件 var groupitemeventsdata=[[],[]]//分组项里的事件
@ -538,7 +531,7 @@
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -604,7 +597,6 @@
} }
} }
} }
var ydata = {}; var ydata = {};
for(let j in arr){ for(let j in arr){
if(!ydata[j]){ if(!ydata[j]){
@ -620,7 +612,6 @@
} }
} }
} }
for(let i in ydata){ for(let i in ydata){
legenddata.push(i); legenddata.push(i);
var arr = { var arr = {
@ -630,6 +621,7 @@
} }
seriesData.push(arr) seriesData.push(arr)
} }
} }
var myChart = echarts.init(document.getElementById('analysis-echarts')); var myChart = echarts.init(document.getElementById('analysis-echarts'));
@ -637,7 +629,7 @@
title: { title: {
text: '' 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: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {

8
web/static/css/analysis.css
View File

@ -16,7 +16,7 @@
.analysis-con-left { width: 550px; height: 100%; background-color: #ffffff; } .analysis-con-left { width: 550px; height: 100%; background-color: #ffffff; }
.analysis-con-right { width: calc(100% - 550px); height: 100%;} .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 { 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;} .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 { 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 img { width: 13px; height: 13px; }
.analysis-footadd___2D4YB:hover { background-color: #f1f8ff; } .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; } .bgcolor { background-color: #6bb2ff; }
.analysis-action-left { display: flex; align-items: center; } .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; } .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-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; } .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; } .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 { 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; } .analysis-overall-situation-add img { width: 13px; height: 13px; }