<!DOCTYPE html>
<!--
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">
        <script src="lib/simpleRequire.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <script src="lib/facePrint.js"></script>
        <script src="lib/testHelper.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            h2 {
                line-height: 60px;
                height: 60px;
                background: #146402;
                text-align: center;
                font-weight: bold;
                color: #eee;
                font-size: 14px;
            }
            .chart {
                height: 600px;
            }
            button {
                font-size: 16px;
            }
        </style>

        <button onclick="change()">CHANGE</button>
        <div class="chart" id="main2"></div>

        <h2>Default Label Animation</h2>
        <div class="chart" id="main0"></div>


        <h2>Label Animation with animationDelay callback</h2>
        <div class="chart" id="main1"></div>

        <h2>Line Animation should be continued when calling setOption again.</h2>
        <div class="chart" id="main3"></div>


        <script>

            require([
                'echarts'
            ], function (echarts) {
                var groupCategories = [];
                var groupColors = [];
                var chart = echarts.init(document.getElementById('main2'));

                var base = +new Date(1968, 9, 3);
                var oneDay = 24 * 3600 * 1000;
                var date = [];
                var data = [];

                for (var i = 0; i < 10; i++) {
                    var now = new Date(base += oneDay);
                    date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    // data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
                    data.push(i * i - 15);
                }

                option = {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                            return [pt[0], '10%'];
                        }
                    },
                    legend: {
                        data: ['large area']
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: 'none'
                            },
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: date,
                        axisTick: {
                            interval: 0
                        },
                        axisLabel: {
                            interval: 0
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    dataZoom: [{
                        type: 'inside',
                        // start: 0,
                        // end: 10
                    }, {
                        start: 0,
                        end: 10,
                        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: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        }
                    }],
                    series: [
                        {
                            name:'large area',
                            type:'line',
                            symbol: 'none',
                            // type:'scatter',
                            // smooth:true,
                            // symbol: 'none',
                            sampling: 'average',
                            itemStyle: {
                                normal: {
                                    color: 'rgb(255, 70, 131)'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    shadowBlur: 6,
                                    shadowColor: '#999',
                                    shadowOffsetX: 10,
                                    shadowOffsetY: 10
                                }
                            },
                            areaStyle: {
                                // origin: 'end',
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(255, 158, 68)'
                                }, {
                                    offset: 1,
                                    color: 'rgb(255, 70, 131)'
                                }])
                            },
                            data: data
                        }
                    ],
                    animationDurationUpdate: 2000
                };


                chart.setOption(option);

                window.change = function () {
                    chart.dispatchAction({
                        type: 'dataZoom',
                        end: 20
                    });
                }

            });


        </script>

        <script>

            require([
                'echarts'
            ], function (echarts) {
                var chart = echarts.init(document.getElementById('main0'));

                var xData = [];
                var data = [];
                var value = 200;
                var positive = 1;
                for (let i = 0; i < 100; ++i) {
                    xData.push(i + '');
                    value = positive * Math.round(Math.random() * 50) + value;
                    data.push(value);

                    if (Math.random() > 0.7) {
                        positive = -1 * positive;
                    }
                }

                option = {
                    title: [{
                        text: 'Default Line Animation, all should be left-to-right, bottom-to top',
                        subtext: 'Symbol and text should sync with line clipPath\n\naxis not inversed',
                        textAlign: 'center',
                        left: '50%',
                        top: 0
                    }, {
                        subtext: 'axis inversed',
                        textAlign: 'center',
                        left: '50%',
                        top: '52%'
                    }, {
                        text: 'left-to-right',
                        left: '25%',
                        textAlign: 'center',
                        top: 70
                    }, {
                        text: 'bottom-to-top',
                        left: '75%',
                        textAlign: 'center',
                        top: 70
                    }, {
                        text: 'right-to-left',
                        left: '25%',
                        textAlign: 'center',
                        top: '55%'
                    }, {
                        text: 'top-to-bottom',
                        left: '75%',
                        textAlign: 'center',
                        top: '55%'
                    }],
                    xAxis: [{
                        data: xData
                    }, {
                        gridIndex: 1
                    }, {
                        data: xData,
                        inverse: true,
                        gridIndex: 2
                    }, {
                        gridIndex: 3,
                        inverse: true
                    }],
                    yAxis: [{
                    }, {
                        data: xData,
                        gridIndex: 1
                    }, {
                        inverse: true,
                        gridIndex: 2
                    }, {
                        data: xData,
                        gridIndex: 3,
                        inverse: true
                    }],
                    grid: [{
                        left: 80,
                        top: 100,
                        right: '52%',
                        bottom: '55%'
                    }, {
                        left: '52%',
                        top: 100,
                        right: 50,
                        bottom: '55%'
                    }, {
                        left: 80,
                        right: '52%',
                        top: '60%',
                        bottom: 30
                    }, {
                        left: '52%',
                        right: 50,
                        top: '60%',
                        bottom: 30
                    }],
                    series: [{
                        type: 'line',
                        data: data,
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        }
                    }, {
                        type: 'line',
                        data: data,
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        xAxisIndex: 1,
                        yAxisIndex: 1
                    }, {
                        type: 'line',
                        data: data,
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        xAxisIndex: 2,
                        yAxisIndex: 2
                    }, {
                        type: 'line',
                        data: data,
                        label: {
                            show: true
                        },
                        labelLayout: {
                            hideOverlap: true
                        },
                        xAxisIndex: 3,
                        yAxisIndex: 3
                    }],
                    animationDuration: 10000,
                    animationDurationUpdate: 1000
                };
                chart.setOption(option);

            });

        </script>


        <script>
            require([
                'echarts'
            ], function (echarts) {
                var chart = echarts.init(document.getElementById('main1'));

                var xData = [];
                var data = [];
                var value = 200;
                var positive = 1;
                for (let i = 0; i < 100; ++i) {
                    xData.push(i + '');
                    value = positive * Math.round(Math.random() * 50) + value;
                    data.push(value);

                    if (Math.random() > 0.7) {
                        positive = -1 * positive;
                    }
                }

                var duration = 10000;
                option = {
                    title: {
                        text: 'Label Animation with animationDelay callback',
                        subtext: 'Symbol and text should sync with line clipPath'
                    },
                    xAxis: {
                        data: xData
                    },
                    yAxis: {},
                    series: [{
                        type: 'line',
                        data: data,
                        label: {
                            show: true
                        },
                        animationEasing: 'cubicIn',
                        animationDelay: function (i) {
                            if (i == null) {
                                return null;
                            }
                            else {
                                // cubicIn is x=t^3 so t=x^(1/3)
                                return (Math.pow((i + 0.5) / data.length, 1 / 3)) * duration;
                            }
                        }
                    }],
                    animationDuration: duration,
                    animationDurationUpdate: 1000
                };
                chart.setOption(option);

            });

        </script>


        <script>

            require([
                'echarts'
            ], function (echarts) {
                var chart = echarts.init(document.getElementById('main3'), null, {
                    renderer: 'svg'
                });
                option = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        areaStyle: {}
                    }],
                    animationDuration: 10000,
                    animationDurationUpdate: 10000
                };

                chart.setOption(option);

                setTimeout(function() {
                    chart.setOption(option);
                }, 1000);

            });

        </script>


    </body>
</html>