
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements.  See the NOTICE file
distributed with this work for additional information
regarding copyright ownership.  The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License.  You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied.  See the License for the
specific language governing permissions and limitations
under the License.
-->

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="../dist/echarts.js"></script>
        <script src="lib/testHelper.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/simpleRequire.js"></script>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            h1 {
                line-height: 60px;
                background: #360;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
                margin: 0;
            }
            .chart {
                height: 400px;
            }
            .by-dispatch-action {
                padding: 5px;
            }
        </style>

        <div id="main0"></div>
        <div id="main2"></div>
        <div id="main3"></div>
        <div id="main4"></div>


        <script>

            function makeButtons(ctx) {

                function printStates() {
                    var option = ctx.chart.getOption();
                    var dzs = option.dataZoom;
                    var info = [{
                        type: dzs[0].type,
                        start: dzs[0].start,
                        end: dzs[0].end,
                        startValue: dzs[0].startValue,
                        endValue: dzs[0].endValue
                    }, {
                        type: dzs[1].type,
                        start: dzs[1].start,
                        end: dzs[1].end,
                        startValue: dzs[1].startValue,
                        endValue: dzs[1].endValue
                    }]
                    console.log('!!! ' + ctx.hint + ' !!!\n' + JSON.stringify(info, null, 2));
                    // alert(
                    //     '!!! ' + ctx.hint + ' !!!\n' + JSON.stringify(info, null, 2)
                    // );
                }

                function dispatchPercent(start, end) {
                    ctx.chart.dispatchAction({
                        type: 'dataZoom',
                        batch: [
                            {id: 'dz-in', start: start, end: end},
                            {id: 'dz-s', start: start, end: end}
                        ]
                    });
                }
                function dispatchValue(startValue, endValue) {
                    ctx.chart.dispatchAction({
                        type: 'dataZoom',
                        batch: [
                            {id: 'dz-in', startValue: startValue, endValue: endValue},
                            {id: 'dz-s', startValue: startValue, endValue: endValue}
                        ]
                    });
                }

                var buttons = [];

                echarts.util.each(ctx.percentButttons, function (item) {
                    buttons.push({
                        text: item.text,
                        onclick: function () {
                            dispatchPercent(item.start, item.end);
                            printStates();
                        }
                    })
                });
                echarts.util.each(ctx.valueButtons, function (item) {
                    buttons.push({
                        text: item.text,
                        onclick: function () {
                            dispatchValue(item.startValue, item.endValue);
                            printStates();
                        }
                    })
                });

                return buttons;
            }

            function getDefaultPercentButtons() {
                return [{
                    text: '{start: -5, end: 5} over min',
                    start: -5,
                    end: 5
                }, {
                    text: '{start: 95, end: 105} over max',
                    start: 95,
                    end: 105
                }, {
                    text: '{start: 40, end: 60}',
                    start: 40,
                    end: 60
                }, {
                    text: '{start: 40, end: 90} (over maxSpan)',
                    start: 40,
                    end: 90
                }, {
                    text: '{start: 40, end: 41} (over minSpan)',
                    start: 40,
                    end: 41
                }];
            }
        </script>


        <script>


        require(['./data/ec-star.json'], function (data) {

            var minStartValue = '2013-06-06';
            var maxEndValue = '2017-10-17';

            var currStartValue = '2017-01-01';
            var currEndValue = maxEndValue;

            var option = {
                animationDurationUpdate: 1000,
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: [{
                    type: 'time',
                    boundaryGap: false,
                    axisLabel:{
                        textStyle:{
                            fontSize:14
                        }
                    },
                    splitLine: {
                        show: false,
                        lineStyle:{
                            color:'#f7f7f7'
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: 'Github Star',
                    nameGap: 30,
                    nameTextStyle: {
                        fontSize: 20
                    },
                    axisLabel: {
                        fontSize: 15
                    },
                    splitLine: {
                        show: true,
                        lineStyle:{
                            color:'#f7f7f7'
                        }
                    }
                }],
                grid: {
                    top: 120,
                    left: 30,
                    right: 30,
                    bottom: 50,
                    containLabel: true
                },
                dataZoom: [{
                    id: 'dz',
                    type: 'inside',
                    xAxisIndex: 0,
                    startValue: currStartValue,
                    endValue: currEndValue,
                    minValueSpan: 3600 * 24 * 1000 * 10
                }, {
                    type: 'slider',
                    xAxisIndex: 0,
                    startValue: currStartValue,
                    endValue: currEndValue,
                    height: 20,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '90%',
                    minSpanValue: 3600 * 24 * 1000 * 10
                }],
                visualMap: {
                    show: false,
                    type: 'continuous',
                    seriesIndex: 0,
                    min: 0,
                    max: 23000
                },
                series: [{
                    type: 'line',
                    name: 'Star',
                    lineStyle: {
                        normal: {
                            width: 4
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: '#fff',
                            borderWidth: 2
                        }
                    },
                    showSymbol: false,
                    symbol: 'circle',
                    hoverAnimation: false,
                    symbolSize: 15,
                    sampling: 'average',
                    // smooth: true,
                    // symbol: 'none',
                    data: data
                }]
            };

            var myChart = testHelper.create(echarts, 'main0', {
                option: option,
                height: 300,
                buttons: [{
                    text: 'Change Start Value',
                    onclick: function (phase) {
                        currStartValue = '2014-09-01';
                        myChart.dispatchAction({
                            type: 'dataZoom',
                            id: 'dz',
                            startValue: currStartValue
                        });
                    }
                }, {
                    text: 'Change End Value',
                    onclick: function (phase) {
                        currEndValue = '2017-02-05';
                        myChart.dispatchAction({
                            type: 'dataZoom',
                            id: 'dz',
                            endValue: currEndValue
                        });
                    }
                }, {
                    text: 'firstFocus',
                    onclick: function (phase) {
                        currStartValue = minStartValue;
                        currEndValue = '2013-11-06';
                        myChart.dispatchAction({
                            type: 'dataZoom',
                            id: 'dz',
                            startValue: currStartValue,
                            endValue: currEndValue
                        });
                    }
                }]
            });
        });

        </script>


        <script>

            var option;

            var base = +new Date(1990, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var startValue = Math.random() * 300;
            var data1 = [];
            var category = [];
            var specialNormal = [];
            var specialLong = [];
            var specialShort = [];

            for (var i = 0; i < 100; i++) {
                var now = new Date(base += oneDay);
                var cat = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
                category.push(cat);
                value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data1[i - 1]));
                data1.push(value);
                if (i === 40) {
                    specialNormal[0] = cat;
                    specialLong[0] = cat;
                    specialShort[0] = cat;
                }
                else if (i === 42) {
                    specialShort[1] = cat;
                }
                else if (i === 55) {
                    specialNormal[1] = cat;
                }
                else if (i === 85) {
                    specialLong[1] = cat;
                }
            }

            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: category
                }],
                yAxis: [{
                    type: 'value',
                    boundaryGap: [0, '100%']
                }],
                dataZoom: [{
                    type: 'inside',
                    id: 'dz-in',
                    start: 0,
                    end: 10,
                    minSpan: 5,
                    maxSpan: 30,
                    xAxisIndex: 0
                }, {
                    id: 'dz-s',
                    start: 0,
                    end: 10,
                    minSpan: 5,
                    maxSpan: 30,
                    xAxisIndex: 0
                }],
                series: [{
                    type:'line',
                    symbolSize: 10,
                    data: data1
                }]
            };

            function getBtnLabel(special, extra) {
                extra = extra || '';
                return 'startValue: "' + special[0] + ', endValue: "' + special[1] + '" ' + extra;
            }

            var ctx = {
                hint: 'category axis value should be integer',
                percentButttons: getDefaultPercentButtons(),
                valueButtons: [{
                    text: getBtnLabel(specialNormal),
                    startValue: specialNormal[0],
                    endValue: specialNormal[1]
                }, {
                    text: getBtnLabel(specialLong, 'over maxSpan'),
                    startValue: specialLong[0],
                    endValue: specialLong[1]
                }, {
                    text: getBtnLabel(specialShort, 'over minSpan'),
                    startValue: specialShort[0],
                    endValue: specialShort[1]
                }, {
                }]
            };
            ctx.chart = testHelper.create(echarts, 'main2', {
                option: option,
                title: [
                    '(category axis) dispatchAction: {type: "dataZoom"}',
                    'range should not out of bound',
                    'minSpan: 5, maxSpan: 30'
                ],
                height: 200,
                buttons: makeButtons(ctx)
            });

        </script>


        <script>

            var option;

            var base = +new Date(1990, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var startValue = Math.random() * 300;
            var data2 = [];
            var specialNormal = [];
            var specialShort = [];
            var specialLong = [];

            for (var i = 0; i < 100; i++) {
                var now = new Date(base += oneDay);
                value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data2[i - 1][1]));
                data2.push([now, value]);
                if (i === 30) {
                    specialNormal[0] = +now;
                    specialShort[0] = +now;
                    specialLong[0] = +now;
                }
                else if (i === 32) {
                    specialShort[1] = +now;
                }
                else if (i === 38) {
                    specialNormal[1] = +now;
                }
                else if (i === 70) {
                    specialLong[1] = +now;
                }
            }

            var option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: [{
                    type: 'time'
                }],
                yAxis: [{
                }],
                dataZoom: [{
                    type: 'inside',
                    id: 'dz-in',
                    maxSpan: 30,
                    minSpan: 5,
                    start: 0,
                    end: 10
                }, {
                    id: 'dz-s',
                    maxSpan: 30,
                    minSpan: 5,
                    start: 0,
                    end: 10
                }],
                series: [{
                    type:'line',
                    symbolSize: 10,
                    data: data2
                }]
            };

            function fmt2Str(dt) {
                return echarts.format.formatTime('yyyy-MM-dd', +dt)
            }
            function getBtnLabel(special, extra) {
                extra = extra || '';
                return 'startValue: "' + fmt2Str(special[0]) + '"('
                    + special[0] + '), endValue: "' + fmt2Str(special[1])
                    + '"(' + special[1] + ') ' + extra;
            }

            var ctx = {
                hint: 'time axis value should be integer',
                percentButttons: getDefaultPercentButtons(),
                valueButtons: [{
                    text: getBtnLabel(specialNormal),
                    startValue: fmt2Str(specialNormal[0]),
                    endValue: fmt2Str(specialNormal[1])
                }, {
                    text: getBtnLabel(specialShort, 'over minSpan'),
                    startValue: fmt2Str(specialShort[0]),
                    endValue: fmt2Str(specialShort[1])
                }, {
                    text: getBtnLabel(specialLong, 'over maxSpan'),
                    startValue: fmt2Str(specialLong[0]),
                    endValue: fmt2Str(specialLong[1])
                }]
            };
            ctx.chart = testHelper.create(echarts, 'main3', {
                option: option,
                title: [
                    '(time axis) dispatchAction: {type: "dataZoom"}',
                    'range should not out of bound',
                    'maxSpan: 30, minSpan: 5',
                ],
                height: 200,
                buttons: makeButtons(ctx)
            });

        </script>


        <script>

            var option;

            var base = +new Date(1990, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var startValue = Math.random() * 300;
            var data1 = [];
            var category = []

            for (var i = 0; i < 1000; i++) {
                var now = new Date(base += oneDay);
                category.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'));
                value = Math.round((Math.random() - 0.5) * 20 + (!i ? startValue : data1[i - 1]));
                data1.push(value);
            }

            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: category
                }],
                yAxis: [{
                    type: 'value',
                    boundaryGap: [0, '100%']
                }],
                dataZoom: [{
                    type: 'inside',
                    id: 'dz-in',
                    start: 0,
                    end: 10,
                    minValueSpan: 50,
                    maxValueSpan: 300,
                    xAxisIndex: 0
                }, {
                    id: 'dz-s',
                    start: 0,
                    end: 10,
                    minValueSpan: 50,
                    maxValueSpan: 300,
                    xAxisIndex: 0
                }],
                series: [{
                    type:'line',
                    symbolSize: 10,
                    data: data1
                }]
            };

            var ctx = {
                hint: 'category axis value should be integer',
                percentButttons: getDefaultPercentButtons(),
                valueButtons: [{
                    text: 'startValue: 30, endValue: 500, over maxValueSpan',
                    startValue: 30,
                    endValue: 500
                }, {
                    text: 'startValue: 30, endValue: 32, over minValueSpan',
                    startValue: 30,
                    endValue: 32
                }]
            };
            ctx.chart = testHelper.create(echarts, 'main4', {
                title: [
                    '(category axis)',
                    'dispatchAction: {type: "dataZoom"}',
                    'range should not out of bound',
                    'minValueSpan: 50, maxValueSpan: 300'
                ],
                option: option,
                height: 200,
                buttons: makeButtons(ctx)
            });

        </script>


    </body>
</html>