Major Index Performance

Major Index Performance

source:Horizon Insights，Wind

var visi = [];
var se = [];
$.each(data1, function(k, v){
    visi.push(v.col);
});

var table = $('#container').DataTable({
    data: data0,
    pageLength: 100,
    columns:[
        {
            className:      'details-control all',
            orderable:      false,
            data:           null,
            defaultContent: '',
        },
        {// col0
            data: 'TRADE_CODE',
            title: 'TRADE_CODE',
            visible: false,
            className: "desktop",
        },
        {// col1
            data: 'SEC_NAME',
            title: 'SEC_NAME',
            className: 'all text-left',
            // width: '80px',
        },
        {// col2
            data: 'PCT_CHG',
            title: 'PCT_CHG',
            type: 'html-num-fmt',
            render: function(data, type, row, meta){
                var d = data === '-' ? '-' : Math.round(data * 10000)/100;
                return '<span style="color:' + (d > 0 ? 'red' : (d < 0 ? 'green' : 'black')) + ';">' + d + '%</span>';
            },
            visible: visi.indexOf('PCT_CHG') > -1? true : false,
            className: "all text-center"
        },
        {// col3
            data: 'PCT_CHG_5D',
            title: 'PCT_CHG_5D',
            type: 'html-num-fmt',
            render: function(data, type, row, meta){
                var d = data === '-' ? '-' : Math.round(data * 10000)/100;
                return '<span style="color:' + (d > 0 ? 'red' : (d < 0 ? 'green' : 'black')) + ';">' + d + '%</span>';
            },
            visible: visi.indexOf('PCT_CHG_5D') > -1? true : false,
            className: "all text-center",
        },
        {// col4
            data: 'OBOS',
            title: 'Overbought/oversold',
            type: 'html-num-fmt',
            render: function(data, type, row, meta){
                var d = data === '-' ? '-' : '<span style="color:' + (data > 0.9 ? 'red' : (data < 0.1 ? 'green' : 'black')) + ';">' + Math.round(data * 10000)/100 + '%</span>';
                return d;
            },
            visible: visi.indexOf('OBOS') > -1? true : false,
            className: "all text-center",
        },
        {// col4
            data: 'AMT',
            title: 'Market Trading Volume',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 10)/100 + 'billion';
            },
            orderData: 13,
            visible: visi.indexOf('AMT') > -1? true : false,
            className: "all text-center",
        },
        {// col5
            data: 'TURN_PCT',
            title: 'Turnover ratio quantile',
            type: 'html-num-fmt',
            render: function(data, type, row, meta){
                var d = data === '-' ? '-' : Math.round(data * 1000)/10;
                return '<span ' + (d > 90 ? 'style="color:red;' : '') + '">' + d + '%</span>';
            },
            visible: visi.indexOf('TURN_PCT') > -1? true : false,
            className: "all text-center",
        },
        {// col6
            data: 'TURN_PCT_5MA',
            title: 'Turnover ratio quantile(5MA)',
            type: 'html-num-fmt',
            render: function(data, type, row, meta){
                // return data === '-' ? '-' : Math.round(data * 1000)/10 + '%';
                var d = data === '-' ? '-' : Math.round(data * 1000)/10;
                return '<span ' + (d > 90 ? 'style="color:red;' : '') + '">' + d + '%</span>';
            },
            visible: visi.indexOf('TURN_PCT_5MA') > -1? true : false,
            className: "all text-center",
        },
        {// col7
            data: 'PE_TTM',
            title: 'PE_TTM',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 10)/10;
            },
            visible: visi.indexOf('PE_TTM') > -1? true : false,
            className: "all text-center",

},/*
        {// col8
            data: 'PE_PCT',
            title: '市盈率分位',
            type: 'num-fmt',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 1000)/10 + '%';
            },
            visible: visi.indexOf('PE_PCT') > -1? true : false,
            className: "all text-center"
        },*/
        {// col9
            data: 'PB_LF',
            title: 'PB_LF',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 10)/10;
            },
            visible: visi.indexOf('PB_LF') > -1? true : false,
            className: "all text-center",
        },
        {// col10
            data: 'PB_PCT',
            title: 'PB quantile',
            type: 'num-fmt',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 1000)/10 + '%';
            },
            visible: visi.indexOf('PB_PCT') > -1? true : false,
            className: "all text-center"
        },
        {
            className:      'control all',
            orderable:      false,
            data:           null,
            defaultContent: '',
            visible: false,
        },
        {// col11
            data: 'AMT',
            title: 'AMT',
            visible: false,
        },
        {// col12
            data: 'DIV',
            title: 'DIV',
            render: function(data, type, row, meta){
                return data === '-' ? '-' : Math.round(data * 100)/100 + '%';
            },
            visible: visi.indexOf('DIV') > -1? true : false,
            className: "all",
        },
    ],
    language: {
        emptyTable: "未请求到数据。",
        info: "当前页面第_PAGE_页  共_PAGES_页",
        infoEmpty: "当前页面第1页  共1页",
        paginate: {
            first:    '«',
            previous: '‹',
            next:     '›',
            last:     '»'
        },
        aria: {
            paginate: {
                first:    '首页',
                previous: '上一页',
                next:     '下一页',
                last:     '尾页'
            }
        },
        zeroRecords:    "没有找到数据。",
        infoFiltered:   "(从全部_MAX_个数据中筛选出)",
    },
    // responsive: {
    //     details: {
    //         type: 'column',
    //         target: 12
    //     }
    // },
    order: [[3, 'desc']],
    scrollX: false,
    autoWidth: false,
    dom: 't',
});

var minWidth = visi.length;
// $('#container').DataTable().columns().every(function(){if(this.visible()){minWidth += 1}});
minWidth *= 6;
$('.main-container .dataTables_wrapper').css('min-width', minWidth + 'em');

/* Formatting function for row details - modify as you need */
$.fn.format = function( row ) {
    var $this = $(this),
        trade_code = row.data().TRADE_CODE,
        sec_name = row.data().SEC_NAME,
        code = trade_code.split('.')[0]
        query = [
            "SELECT DT AS x,CLOSE AS 'y' FROM indexcloseprice WHERE TRADE_CODE IN ('" + trade_code + "') AND CLOSE IS NOT NULL AND DT >= '2010-01-01'",
            "SELECT DT AS x,TURN_MA5 * 100 AS 'y' FROM indexmarketturn WHERE TRADE_CODE IN ('" + trade_code + "') AND TURN_MA5_PCT_RANK IS NOT NULL",
            "SELECT DT AS x,PE_TTM AS 'y' FROM indexmarketvaluation WHERE TRADE_CODE IN ('" + trade_code + "') AND PE_PCT_RANK IS NOT NULL",
            "SELECT DT AS x,PB_LF AS 'y' FROM indexmarketvaluation WHERE TRADE_CODE IN ('" + trade_code + "') AND PB_PCT_RANK IS NOT NULL",
            "SELECT DT AS x,VALUE*100 AS 'y' FROM indexobos WHERE TRADE_CODE IN ('" + trade_code + "') AND VALUE IS NOT NULL AND DT >= '2005-01-01'",
            "SELECT DT AS x,TURN_MA5_PCT_RANK * 100 AS 'y' FROM indexmarketturn WHERE TRADE_CODE IN ('" + trade_code + "') AND TURN_MA5_PCT_RANK IS NOT NULL",
        ];
    if( trade_code === $this.attr('data-code')){
        return $this[0]
    }
    $this.attr('data-code', trade_code).empty();
    $this.highcharts('StockChart', {
        rangeSelector: {
            enabled: false,
            inputEnabled:false,
            allButtonsEnabled:false,
        },
    	credits: {
    		enabled: false,
    	},
    	exporting: {
    		enabled: false,
    	},
    	scrollbar:{
    	    enabled: false
    	},
        navigation: {
            menuItemStyle: {
                fontSize: '10px'
            }
        }
    });
    $this.highcharts().showLoading();
    $.ajax({
        url: '/element/run/query/',
        data: {
            query: JSON.stringify(query),
            queryLanguage: 0,
            dateFormat: 'timestamp',
            output: 'records',
            na: 'drop',
        },
        success: function(res){
            res = res.data;
            $this.highcharts().hideLoading();
            var lastTurn = res[1].table[res[1].table.length - 1].y;
            var lastPE = res[2].table[res[2].table.length - 1].y;
            var lastPB = res[3].table[res[3].table.length - 1].y;
            $this.highcharts('StockChart', {
                chart: {
                    type:'line',
                },
                subtitle: {
                    text: sec_name,
                },
                xAxis:{
                  ordinal: false,  
                },
                yAxis: [{
                },{
                    visible: true,
                    plotLines:[{
                        className: 'pink-label',
                        color: 'black',
                        dashStyle: 'dot',
                        value: lastTurn,
                        width: 1,
                        zIndex: 3,
                        label: {
                            text: lastTurn,
                            align: 'right',
                            useHTML: true,
                            x: 25,
                            y: 2,
                        },
                    }],
                    labels: {
                        format: '{value}%'
                    },
                },{
                    visible: true,
                    plotLines:[{
                        className: 'pink-label',
                        color: 'black',
                        dashStyle: 'dot',
                        value: lastPE,
                        width: 1,
                        zIndex: 3,
                        label: {
                            text: Math.round(lastPE * 100)/100,
                            align: 'right',
                            useHTML: true,
                            x: 75,
                            y: 2,
                        },
                    }],
                },{
                    visible: true,
                    plotLines:[{
                        className: 'pink-label',
                        color: 'black',
                        dashStyle: 'dot',
                        value: lastPB,
                        width: 1,
                        zIndex: 3,
                        label: {
                            text: Math.round(lastPB * 100)/100,
                            align: 'right',
                            useHTML: true,
                            x: 105,
                            y: 2,
                        },
                    }],
                },{
                    visible: true,
                    labels: {
                        format: '{value}%'
                    },
                },{
                    visible: true,
                    labels: {
                        format: '{value}%'
                    },
                }],
                legend: {
                    enabled: true,
                },
                series: [{
                    data: res[0].table,
                    name: 'CLOSE', 
                    zIndex: 1, 
                }, {
                    data: res[1].table,
                    name: 'TURN_5MA',
                    zIndex: 0,
                    yAxis: 1,
                    tooltip: {valueSuffix: '%'}
                }, {
                    data: res[5].table,
                    name: 'TURN_PCT_5MA',
                    zIndex: 0,
                    yAxis: 5,
                    tooltip: {valueSuffix: '%'},
                    visible: false,
                }, {
                    data: res[2].table,
                    name: 'PE_TTM',
                    zIndex: 0,
                    yAxis: 2,
                    // tooltip: {valueSuffix: '%'},
                    visible: false
                }, {
                    data: res[3].table,
                    name: 'PB_LF',
                    zIndex: 0,
                    yAxis: 3,
                    // tooltip: {valueSuffix: '%'},
                    visible: false,
                }, {
                    data: res[4].table,
                    name: 'OBOS',
                    zIndex: 0,
                    yAxis: 4,
                    visible: false,
                }],
                rangeSelector: {
                    buttons: [{
                				type: 'day',
                				count: 1,
                				text: 'YTD'
                			}, {
                				type: 'year',
                				count: 1,
                				text: '1Y'
                			}, {
                				type: 'year',
                				count: 3,
                				text: '3Y'
                			}, {
                				type: 'all',
                				text: 'All'
                			}],
                    selected: 2,
                },
                exporting: {
            		enabled: true,
                    buttons: {
                        customButton: {
                            text: 'close',
                            onclick: function () {
                                $('.table-chart').css({'z-index': -1, display: 'none'});
                            }
                        },
                       contextButton: {
                            enabled: false,
                        }
                    }
                }
            });
        }
    });
}