! function() {

    const _drawStock = function(d) {

        const data = d.data.slice(-30).map(x => {

            return {

                time: x[0],

                start: x[1],

                end: x[2],

                max: x[3],

                min: x[4],

                volumn: x[5],

                float: x[6]

            }

        });

        let month = data[0].time.slice(4, 6),

            month2 = data[data.length - 1].time.slice(4, 6);

        month = month == month2 ? month + '月' : month + '月-' + month2 + '月'

        const stock_name = d.name + data[0].time.slice(0, 4) + '年' + month;

        // download(obj2Str(d),"test.txt")

        const ds = new DataSet();

        const dv = ds.createView();

        dv.source(data)

            .transform({

                type: 'map',

                callback: obj => {

                    obj.trend = (obj.start <= obj.end) ? '上涨' : '下跌';

                    obj.range = [obj.start, obj.end, obj.max, obj.min];

                    return obj;

                }

            });

        let container = document.querySelector("div.canvas-container");

        if (!container) {

            container = document.createElement("div");

            container.className = "canvas-container"

            let stock = document.getElementById("stock-canvas")

            stock.after(container);

            stock.style.display = "none";

        }

        let Chart = window.Chart ? Chart : G2.Chart;

        const chart = new Chart({

            container: container,

            autoFit: true,

            height: 400,

            theme: "dark",

            padding: [10, 40, 40, 40]

        });

        chart.annotation().text({

            position: ['50%', '0%'],

            content: stock_name,

            style: {

                fontSize: 40,

                fill: 'blue',

                textAlign: 'center',

            },

            offsetY: 15,

        })

        chart.data(dv.rows);

        chart.scale({

            time: {

                // type: 'timeCat',

                range: [0, 1],

                tickCount: 4,

                showLast: true,

            },

            trend: {

                values: ['上涨', '下跌']

            },

            volumn: {

                alias: '成交量'

            },

            start: {

                alias: '开盘价'

            },

            end: {

                alias: '收盘价'

            },

            max: {

                alias: '最高价'

            },

            min: {

                alias: '最低价'

            },

            range: {

                alias: '股票价格',

                nice: true,

            }

        });

        chart.tooltip({

            showTitle: false,

            showMarkers: false,

            itemTpl: '<li class="g2-tooltip-list-item" data-index={index}>' +

                '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +

                '{name}{value}</li>'

        });

        chart.schema()

            .position('time*range')

            .color('trend', val => {

                if (val === '上涨') {

                    return '#f04864';

                }

                if (val === '下跌') {

                    return '#2fc25b';

                }

            })

            .shape('candle')

            .tooltip('time*start*end*max*min', (time, start, end, max, min) => {

                return {

                    name: time,

                    value: '<br><span style="padding-left: 16px;line-height: 16px;">开盘价：' + start + '</span><br/>' +

                        '<span style="padding-left: 16px;line-height: 16px;">收盘价：' + end + '</span><br/>' +

                        '<span style="padding-left: 16px;line-height: 16px;">最高价：' + max + '</span><br/>' +

                        '<span style="padding-left: 16px;line-height: 16px;">最低价：' + min + '</span>'

                };

            });

        chart.interaction('element-active');

        chart.render();

    }

    const loadScripts = function() {

        let i = 0

        return (srcs) => {

            let scripts = [];

            function loadScript(src) {

                let script = document.createElement('script');

                script.src = src;

                script.async = false;

                script.id = "loadScript" + (++i);

                script.className = "loadScript";

                document.body.append(script);

                return script

            };

            if (typeof srcs !== 'object') {

                scripts.push(loadScript(srcs))

            } else {

                for (const k in srcs) {

                    scripts.push(loadScript(srcs[k]))

                }

            }

            return scripts;

        }

    }();

    function onload(ele) {

        return new Promise(r =>

            ele.onload = _ => r())

    }

    let scripts = loadScripts(

        ["https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.2.1/fetch-jsonp.min.js",

            "https://unpkg.com/@antv/data-set@0.11.8/build/data-set.js",

            "https://gw.alipayobjects.com/os/lib/antv/g2/4.1.46/dist/g2.min.js",

        ]);

    Promise.all(scripts.map(onload))

        .then(() => {

            // script.remove();

            let url = `http://img1.money.126.net/data/hs/kline/day/history/${new Date().getFullYear()}/0000001.json`

            fetchJsonp(url)

                .then(response => response.json())

                .then(_drawStock)

                //.catch(err => console.error(err))

        })

}();