<!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">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="lib/esl.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>
        <link rel="stylesheet" href="lib/reset.css" />
    </head>
    <body>
        <style>
            .test-title {
                background: #146402;
                color: #fff;
            }
        </style>


        <div id="main0"></div>
        <div id="panel0"></div>


        <script>

            /**
             * @see <https://en.wikipedia.org/wiki/Michelson%E2%80%93Morley_experiment>
             * @see <http://bl.ocks.org/mbostock/4061502>
             */
            require([
                'echarts',
                'data/stock-DJI.json'
            ], update)

            function splitData(rawData) {
                var categoryData = [];
                var values = [];
                var volumns = [];
                for (var i = 0; i < rawData.length; i++) {
                    categoryData.push(rawData[i].splice(0, 1)[0]);
                    values.push(rawData[i])
                    volumns.push(rawData[i][4]);
                }
                return {
                    categoryData: categoryData,
                    values: values,
                    volumns: volumns
                };
            }

            function calculateMA(dayCount, rawData) {
                var result = [];
                for (var i = 0, len = rawData.length; i < len; i++) {
                    if (i < dayCount) {
                        result.push('-');
                        continue;
                    }
                    var sum = 0;
                    for (var j = 0; j < dayCount; j++) {
                        sum += rawData[i - j][2];
                    }
                    result.push(+(sum / dayCount).toFixed(3));
                }
                return result;
            }

            function update(echarts, rawData) {

                // var data = splitData(rawData);

                var option = {
                    dataset: {
                        source: rawData
                    },
                    backgroundColor: '#eee',
                    legend: {
                        left: 0,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        },
                        position: function (pos, params, el, elRect, size) {
                            var obj = {top: 10};
                            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                            return obj;
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    toolbox: {
                        feature: {
                            dataZoom: {
                                yAxisIndex: false
                            },
                            brush: {
                                type: ['polygon', 'rect', 'lineX', 'lineY', 'keep', 'clear']
                            }
                        }
                    },
                    brush: {
                        xAxisIndex: 'all',
                        brushLink: 'all',
                        outOfBrush: {
                            colorAlpha: 0.1
                        }
                    },
                    grid: [
                        {
                            left: '10%',
                            right: '10%',
                            height: 300
                        },
                        // {
                        //     left: '10%',
                        //     right: '10%',
                        //     height: 70,
                        //     bottom: 80
                        // }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            // data: data.categoryData,
                            scale: true,
                            boundaryGap : false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        // {
                        //     type: 'category',
                        //     gridIndex: 1,
                        //     data: data.categoryData,
                        //     scale: true,
                        //     boundaryGap : false,
                        //     axisLine: {onZero: false},
                        //     axisTick: {show: false},
                        //     splitLine: {show: false},
                        //     axisLabel: {show: false},
                        //     splitNumber: 20,
                        //     min: 'dataMin',
                        //     max: 'dataMax'
                        // }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        // {
                        //     scale: true,
                        //     gridIndex: 1,
                        //     splitNumber: 2,
                        //     axisLabel: {show: false},
                        //     axisLine: {show: false},
                        //     axisTick: {show: false},
                        //     splitLine: {show: false}
                        // }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            // xAxisIndex: [0, 1],
                            // start: 99,
                            // end: 100
                            // startValue: '2010-08-17',
                            // endValue: '2012-08-06'
                        },
                        {
                            show: true,
                            // xAxisIndex: [0, 1],
                            type: 'slider',
                            bottom: 10,
                            // start: 99,
                            // end: 100
                            // startValue: '2010-08-17',
                            // endValue: '2012-08-06'
                        }
                    ],
                    animation: false,
                    series: [
                        {
                            name: 'Dow-Jones index',
                            type: 'candlestick',
                            // large: false,
                            encode: {
                                x: 0,
                                y: [1, 2, 3, 4]
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: null,
                                    borderColor0: null
                                }
                            },
                            // tooltip: {
                            //     formatter: function (param) {
                            //         var param = param[0];
                            //         return [
                            //             'Date: ' + param.name + '<hr size=1 style="margin: 3px 0">',
                            //             'Open: ' + param.data[0] + '<br/>',
                            //             'Close: ' + param.data[1] + '<br/>',
                            //             'Lowest: ' + param.data[2] + '<br/>',
                            //             'Highest: ' + param.data[3] + '<br/>'
                            //         ].join('')
                            //     }
                            // }
                        },
                        // {
                        //     name: 'MA5',
                        //     type: 'line',
                        //     sampling: 'max',
                        //     data: calculateMA(5, rawData),
                        //     smooth: true,
                        //     lineStyle: {
                        //         normal: {opacity: 0.5}
                        //     }
                        // },
                        // {
                        //     name: 'MA10',
                        //     type: 'line',
                        //     data: calculateMA(10, rawData),
                        //     smooth: true,
                        //     lineStyle: {
                        //         normal: {opacity: 0.5}
                        //     }
                        // },
                        // {
                        //     name: 'MA20',
                        //     type: 'line',
                        //     data: calculateMA(20, rawData),
                        //     smooth: true,
                        //     lineStyle: {
                        //         normal: {opacity: 0.5}
                        //     }
                        // },
                        // {
                        //     name: 'MA30',
                        //     type: 'line',
                        //     data: calculateMA(30, rawData),
                        //     smooth: true,
                        //     lineStyle: {
                        //         normal: {opacity: 0.5}
                        //     }
                        // },
                        // {
                        //     name: 'Volumn',
                        //     type: 'bar',
                        //     xAxisIndex: 1,
                        //     yAxisIndex: 1,
                        //     data: data.volumns
                        // }
                    ]
                };

                var panel = document.getElementById('panel0');
                var chart = testHelper.create(echarts, 'main0', {
                    title: 'Use dataset. Check item tooltip in large mode.',
                    option: option,
                    height: 550
                });

                // chart && chart.on('brushSelected', renderBrushed);

                // function renderBrushed(params) {
                //     var sum = 0;
                //     var min = Infinity;
                //     var max = -Infinity;
                //     var countBySeries = [];
                //     var brushComponent = params.batch[0];

                //     var rawIndices = brushComponent.selected[0].dataIndex;
                //     for (var i = 0; i < rawIndices.length; i++) {
                //         var val = data.values[rawIndices[i]][1];
                //         sum += val;
                //         min = Math.min(val, min);
                //         max = Math.max(val, max);
                //     }

                //     panel.innerHTML = [
                //         '<h3>STATISTICS:</h3>',
                //         'SUM of open: ' + (sum / rawIndices.length).toFixed(4) + '<br>',
                //         'MIN of open: ' + min.toFixed(4) + '<br>',
                //         'MAX of open: ' + max.toFixed(4) + '<br>'
                //     ].join(' ');

                // }

                // chart && chart.dispatchAction({
                //     type: 'brush',
                //     areas: [
                //         {
                //             brushType: 'lineX',
                //             coordRange: ['2016-06-02', '2016-06-20'],
                //             xAxisIndex: 0
                //         }
                //     ]
                // });
            }

        </script>


    </body>
</html>