<!-- 加载highcharts -->
<script type="text/javascript" src="/static/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="/static/js/highcharts/data.js"></script>
<script type="text/javascript" src="/static/js/highcharts/drilldown.js"></script>
<script type="text/javascript" src="/static/js/excellentexport.min.js"></script>
<script type="text/javascript" src="/static/js/highcharts/exporting.js"></script>
<script src="/static/js/newModult.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/infoBar.css">
<link rel="stylesheet" href="/static/css/newModult.css" />
<div class="rows" id="charts-div">
    <div class="col-sm-12">
        <div class="infoBar after newModultcode">
            <ul class="l">
                <li class="infoBar1"><span>设备激活</span><strong id="totalDeviceInstallNum">0</strong></li>
                <li class="infoBar2"><span>新增玩家</span><strong id="totalNewPlayerNum">0</strong></li>
                <li class="infoBar3"><span>付费玩家</span><strong id="totalChargePlayerNum">0</strong></li>
                <li class="infoBar4"><span>收入</span><strong id="totalIncomeNum"><small class="USD"></small>0</strong></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">
function hightcharts2(container) {
    container = container ? container : document.createElement('div')
    var _this = this
    this.hightcharts_obj = null
    this.opt = {

        chart: { //配置chart选项
            renderTo: container, //容器名，和body部分的div id要一致
            plotBackgroundColor: null,
            plotBorderWidth: null,
            inverted: true,
            plotShadow: false,
            height: 390,
            type: 'column',
            backgroundColor: '#FFFFFF',
            defaultSeriesType: 'spline',
            reflow: true
        },
        title: { //配置标题
            text: '',
            align: 'center',
            verticalAlign: '',
            margin: 0,
            floating: 0,
            style: {
                color: 'rgb(84, 126, 168)',
                fontSize: '20px'
            }
        },
        subtitle: { //配置副标题
            text: '',
            //y:30
        },
        credits: {
            text: '',
            href: ""
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {
            title: {
                text: '收入(元)'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    format: '{point.y:.1f}元'
                }
            }
        },

        tooltip: {
            headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
            pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}元</b><br/>'
        },


        series: [{
            name: "",
            colorByPoint: true,
            data: []
        }],
        drilldown: {
            'series': []
        }

    }


    this._getAvg = function(list) {
        var num = 0
        for (i in list) {
            num += list[i]
        }
        return (num / list.length).toFixed(1)
    }
    this.push_data = function(list_data, name, value_index) { //增加数据
        value_index = value_index ? value_index : 1
        var data_list = []
        this.categories = []
        this.data = []
        list_data.forEach(function(item, index) {
            if (item[0] && item[0].indexOf('合计') >= 0) {
                a = 1
            } else {
                if (!item[0])
                    item[0] = "未知"

                append = false
                _this.opt.series[0].data.every(function(_item) {
                    if (_item.name == item[0]) {
                        // 没有子项目
                        if (item.length == 2) {
                            _item.y += parseInt(item[1])
                            return false
                        }
                        _item.y += parseInt(item[2])
                        _this.opt.drilldown['series'].every(function(drilldown_item) {
                            if (drilldown_item.name == _item.name) {
                                drilldown_item.data.push([
                                    item[1],
                                    parseInt(item[2])
                                ])
                                append = true
                                return false
                            }
                            return true
                        })
                        return false
                    }
                    return true
                })
                if (!append) {
                    // 没有子项目
                    if (item.length == 2) {
                        _this.opt.series[0].data.push({
                            name: item[0],
                            y: parseInt(item[1]),

                        })

                    } else {
                        _this.opt.series[0].data.push({
                            name: item[0],
                            y: parseInt(item[2]),
                            drilldown: index
                        })

                        _this.opt.drilldown['series'].push({
                            name: item[0],
                            id: index,
                            data: [
                                [
                                    item[1],
                                    parseInt(item[2])
                                ],
                            ]
                        })
                    }
                }
            }
        })
        _this.opt.series[0].data.sort(function(a, b) {
            return b.y - a.y
        })

    }

    this.done = function() {
        Highcharts.setOptions({
            global: {
                useUTC: 0
            },
            lang: {
                resetZoom: "重置",
            }
        })
        _this.hightcharts_obj = new Highcharts.Chart(_this.opt)

        return container
    }
}


function hightcharts1(container) {
    container = container ? container : document.createElement('div')
    var _this = this
    this.hightcharts_obj = null
    this.opt = {
        chart: { //配置chart选项
            renderTo: container, //容器名，和body部分的div id要一致
            type: 'areaspline', //spline 图表类型，这里选择折线图
            zoomType: 'x', //选区域
            reflow: true,
            height: 390,
            backgroundColor: '#FFFFFF',
            defaultSeriesType: 'spline',
            events: '',

        },
        title: { //配置标题
            text: '',
            align: 'center',
            verticalAlign: '',
            margin: 0,
            floating: 0,
            style: {
                color: 'rgb(84, 126, 168)',
                fontSize: '20px'
            }
        },
        subtitle: { //配置副标题
            text: '',
            //y:30
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            backgroundColor: null,
            borderColor: '#909090',
            borderRadius: 5,
            enabled: 1,
            floating: 0,
            shadow: 0,
            itemStyle: {
                color: '#7cb5ec',
                fontWeight: ''
            },
            borderWidth: 1
        },
        credits: {
            text: '',
            href: ""
        },
        yAxis: { // 配置y轴
            title: {
                text: ''
            },
            minPadding: 0, //最小的填充值系数
            startOnTick: true,
        },
        tooltip: { //配置数据点提示框
            //          formatter :  function() {
            //  var s = '<b>'+ Highcharts.dateFormat('%Y-%m-%d',this.x) +'</b>';
            //      $.each(this.points, function(i, point) {
            //          s += '<br/>'+ '<b style="color:'+point.series.color+';">'+point.series.name +'</b>'+': '+point.y +'';
            //      });
            //  return s;
            // } ,
            crosshairs: true, //竖线
            shared: true, //显示所有项目
        },
        xAxis: {

            categories: [],
            labels: {
                style: {
                    color: ''
                },
                formatter: function() { //格式化标签
                    return this.value
                }
            }
            //type: 'datetime',//类型
            //dateTimeLabelFormats: {day: '%e of %b'}//日期格式
        }, //配置x轴
        plotOptions: {
            line: {
                lineWidth: 2,
                states: {
                    hover: {
                        lineWidth: 4
                    }
                },
                dataLabels: {
                    enabled: true,
                    align: "right"
                },
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            symbol: 'circle',
                            radius: 5,
                            lineWidth: 3
                        }
                    }
                }
            }
        },
        series: [],
    }
    this.push_data = function(list_data, fields, item_handle, first_item_handle) { //增加数据
        var data_list = []
        var xAxis = [] //横轴项目，即第一列
        var lines = list_data
        var columns = fields //数据项
        for (var i = 1; i < columns.length; i++) {
            data_list.push({
                'name': columns[i],
                'data': [],
                dataLabels: {
                    enabled: false,
                }
            })
        }

        for (var i = 0; i < lines.length; i++) { //跳过第一行
            var items = lines[i]
            if (items[0].indexOf('合计') >= 0) {
                continue
            }
            xAxis.push(first_item_handle ? first_item_handle(items[0]) : items[0]) //横轴增加第一项
            for (var j = 1; j < columns.length; j++) {
                var item = items.length >= j + 1 ? items[j] : '0'
                data_list[j - 1]['data'].push(item_handle ? item_handle(item) : parseFloat(!isNaN(item) && item ? item : 0))
            }
        }
        _this.opt.xAxis.categories = xAxis //增加横轴项目
        for (var i in data_list) {
            var o = data_list[i]
                //o['name'] += ' (Min:'+ Math.min.apply(Math,o['data'])
                //o['name'] += ' Max:'+ Math.max.apply(Math,o['data'])
                //o['name'] += ' Avg:'+ _this._getAvg(o['data'])+')'
        }
        _this.opt.series = data_list //增加序列数据
        return [xAxis, data_list]
    }

    this.done = function() {
        Highcharts.setOptions({
            global: {
                useUTC: 0
            },
            lang: {
                resetZoom: "重置",
            }
        })
        _this.hightcharts_obj = new Highcharts.Chart(_this.opt)

        return container
    }
}

/*
var h = new hightcharts()
h.opt.title.text='我爱物联网 2012/09/22 访问统计'
h.opt.subtitle.text='数据来源：百度统计'
h.opt.xAxis.categories = [ '1', '2', '3', '4', '5','6', '7', '8', '9', '10', '11','12','13','14','15','16','17','18','19','20','21','22','23']
h.opt.series.push({name: '浏览次数（PV）',data: [16,10, 8, 0, 0, 0, 2, 1, 5,10,25,34,8,12,38,22,13,14,11, 8, 8, 5, 8,33]})
h.opt.series.push({name: 'IP数',data: [ 7, 2, 1, 0, 0, 0, 1, 1, 3, 5, 4, 2,5, 5, 2, 1, 5, 3, 1, 4, 4, 4, 5, 9]})
h.done()
console.dir(h.hightcharts_obj)  
$("#container").append(h.done())    
//document.body.appendChild(h.done())
安装设备：所选日期内，手机安装的数量
新增设备：所选日期内，新增加的去重设备数
新增账号：所选日期内，新增加的去重账号数
转化率：所选日期内，新增加的去重设备中，注册了账号的设备数。单台设备上新增多个账号只算一次转化
活跃账号：所选日期内，登录过游戏的去重账号数
付费账号：所选日期内，成功充值的去重账号数
付费金额：所选日期内，累计付费金额
日ARPU： 所选日期内，付费金额 / 活跃账号
日ARPPU： 所选日期内，付费金额 / 付费账号
日付费率：所选日期内，付费账号 / 活跃账号
*/


//---------------------------------
</script>
<script>
var data = [{
    'title': "关键指标 ",
    'data': [{
        'title': "新增账户",
        'help': "新增设备：所选日期内，新增加的去重设备数<br/>新增账号：所选日期内，新增加的去重账号数",
        "chart_func": function(id) {

            var url = "/query/view/新增账户"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)

                h1.push_data(data.list_data, data.fields)
                h1.done()
            })
        },
        'table_func': function(id) {

            var url = "/query/view/新增账户"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "活跃账号",
        'help': "活跃账号：所选日期内，登录过游戏的去重账号数",
        "chart_func": function(id) {
            var url = "/query/view/活跃用户"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })
        },
        'table_func': function(id) {

            var url = "/query/view/活跃用户"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "玩家留存",
        'help': "N日留存率：所选日期内，新增账号在首日登录后第N日，再次登录的账号数",
        "chart_func": function(id) {
            var url = "/query/view/玩家留存"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = '%'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/玩家留存"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "付费玩家",
        'help': "付费玩家:当日中进行过充值的玩家数，其中当日首次充值的新增付费玩家会以区别的颜色显示。",
        "chart_func": function(id) {
            var url = "/query/view/付费玩家"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/付费玩家"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "日充值",
        'help': "日充值:当日玩家充值的货币总额。",
        "chart_func": function(id) {
            var url = "/query/view/日充值"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = '元'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/日充值"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    },{
        'title': "LTV",
        'help': "LTV：某日起M天内共新注册X人，他们在第M天的LTV值，即这N个人在这M天中的总充值额/X",
        "chart_func": function(id) {

            var url = "/query/view/LTV"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)

                h1.push_data(data.list_data, data.fields)
                h1.done()
            })
        },
        'table_func': function(id) {

            var url = "/query/view/LTV"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }]
}, {

    'title': "付费渗透 ",
    'data': [{
        'title': "日付费率",
        'help': "日付费率:当日内付费玩家数占当日活跃玩家数的比例。",
        "chart_func": function(id) {
            var url = "/query/view/日付费率"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = '%'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/日付费率"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "日ARPU",
        'help': "日ARPU:当日每活跃玩家平均收入（收入/活跃玩家）。",
        "chart_func": function(id) {
            var url = "/query/view/日ARPU"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = '元/人'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {
            var url = "/query/view/日ARPU"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "日ARPPU",
        'help': "日ARPPU:当日每付费玩家平均收入（收入/付费玩家数）。",
        "chart_func": function(id) {
            var url = "/query/view/日ARPPU"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = '元/人'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/日ARPPU"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }]
}, {
    'title': "收入分布",
    'data': [{
        'title': "城市收入",
        'help': "城市收入:各个城市的总收入。",
        "chart_func": function(id) {
            var url = "/query/view/城市收入"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts2(id)
                h1.opt.series[0].name = "城市收入"
                h1.opt.tooltip.valueSuffix = '元'
                h1.push_data(data.list_data, data.fields)
                h1.done()

            })
        },
        'table_func': function(id) {

            var url = "/query/view/城市收入"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "平台收入",
        'help': "平台收入:各个平台的总收入。",
        "chart_func": function(id) {
            var url = "/query/view/平台收入"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts2(id)
                h1.opt.series[0].name = "平台收入"
                h1.opt.tooltip.valueSuffix = '元'
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })
        },
        'table_func': function(id) {

            var url = "/query/view/平台收入"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }, {
        'title': "等级收入",
        'help': "等级收入:选定时间内，各等级的充值人数和充值次数",
        "chart_func": function(id) {
            var url = "/query/view/充值人次"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                var h1 = new hightcharts1(id)
                h1.opt.tooltip.valueSuffix = ''
                h1.push_data(data.list_data, data.fields)

                h1.done()

            })

        },
        'table_func': function(id) {

            var url = "/query/view/充值人次"
            $.post(url, getFormData(), function(data) {
                data = $.parseJSON(data)
                newtable(data, id)
            })
        }
    }]
}, {
    'title': "玩家流失",
    'data': [{
            'title': "每日流失",
            'help': "每日流失:前七天最后一次登录的用户算该日的流失。",
            "chart_func": function(id) {
                var url = "/query/view/每日流失"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    var h1 = new hightcharts1(id)
                    h1.opt.tooltip.valueSuffix = '人'
                    h1.push_data(data.list_data, data.fields)
                    h1.done()

                })
            },
            'table_func': function(id) {

                var url = "/query/view/每日流失"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    newtable(data, id)
                })
            }
        }, {
            'title': "生命周期",
            'help': "生命周期:流失用户从创建到最后一次登录的总天数",
            "chart_func": function(id) {
                var url = "/query/view/流失生命周期"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    var h1 = new hightcharts2(id)
                    h1.opt.series[0].name = "生命周期"
                    h1.opt.yAxis.title.text = "人数"
                    h1.opt.tooltip.valueSuffix = '人'
                    h1.opt.plotOptions.series.dataLabels.format = ""
                    h1.opt.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    h1.push_data(data.list_data, data.fields)

                    h1.done()

                })
            },
            'table_func': function(id) {

                var url = "/query/view/流失生命周期"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    newtable(data, id)
                })
            }
        }, {
            'title': "充值次数",
            'help': "充值次数:流失用户付费次数",
            "chart_func": function(id) {
                var url = "/query/view/流失充值"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    var h1 = new hightcharts2(id)
                    h1.opt.series[0].name = "充值次数"
                    h1.opt.yAxis.title.text = "人数"
                    h1.opt.tooltip.valueSuffix = '人'
                    h1.opt.plotOptions.series.dataLabels.format = ""
                    h1.opt.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    h1.push_data(data.list_data, data.fields)

                    h1.done()

                })
            },
            'table_func': function(id) {

                var url = "/query/view/流失充值"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    newtable(data, id)
                })
            }
        }, {
            'title': "充值金额",
            'help': "充值金额:流失用户付费金额",
            "chart_func": function(id) {
                var url = "/query/view/流失充值金额"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    var h1 = new hightcharts2(id)
                    h1.opt.series[0].name = "充值金额"
                    h1.opt.yAxis.title.text = "人数"
                    h1.opt.tooltip.valueSuffix = '人'
                    h1.opt.plotOptions.series.dataLabels.format = ""
                    h1.opt.tooltip.pointFormat = '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    h1.push_data(data.list_data, data.fields)

                    h1.done()

                })
            },
            'table_func': function(id) {

                var url = "/query/view/流失充值"
                $.post(url, getFormData(), function(data) {
                    data = $.parseJSON(data)
                    newtable(data, id)
                })
            }
        }

    ]
}]
for (var i = 0; i < data.length; i++) {
    $("#charts-div").append("<div class='moduel col-sm-12' index='" + i + "' id='moduel_" + i + "'></div>");
    $("#moduel_" + i).dataModult(data[i], "moduel_" + [i]);
}
inif(data); //初始化



$(".box-top a").click(function() {
    var tabIndex = $(this).index();
    var modelIndex = $(this).parents(".moduel").attr("index");
    tab(data, modelIndex, tabIndex)
}); //绑定点击事件

if (window.dataTableOption) {
    var LIST_DATA = null
    var $charts_cont = $('#charts-div')
    $charts_cont.insertBefore($QUERY_TABLE)
    $SEARCH_FORM.append("<input type='hidden' name='page_size' value='500'/>")

    localStorage.setItem('auto-query', true)
    dataTableOption.page_size = 100
    dataTableOption.page_size_list = [100, 200]

    dataTableOption.convertOutputDataFuncs.push(function(_data) {
        inif(data); //初始化
        ss = $('#query_table')
        ss.next().hide()
        ss.hide()
        var url = "/query/view/运营概览"
        $.post(url, getFormData(), function(data) {
            data = $.parseJSON(data)
            item = data.tfoot_data[0]
            if (!item) {
                item = Array(0, 0, 0, 0, 0)
            }
            $('#totalDeviceInstallNum').html(item[1])
            $("#totalNewPlayerNum").html(item[2])
            $("#totalChargePlayerNum").html(item[3])
            $("#totalIncomeNum").html(item[4])

        })


        return _data
    })

}
</script>

