<!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.
-->


<!--
    This data and the design of this chart is copied from:
    http://bl.ocks.org/syntagmatic/3150059
-->

<html>
    <head>
        <meta charset="utf-8">
        <script src="lib/esl.js"></script>
        <script src="lib/config.js"></script>
        <script src="lib/jquery.min.js"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="lib/reset.css">
    </head>
    <body>
        <style>
            body {
                background: #333;
            }
            #main {
                height: 1000px;
            }
        </style>
        <div id="main"></div>
        <script>

            var echarts;
            var colorTool;
            var chart;
            var myChart;
            var groupCategories = [];
            var groupColors = [];

            require([
                'echarts'
                // 'zrender/tool/color',
                // 'echarts/chart/parallel',
                // 'echarts/component/legend',
                // 'echarts/component/tooltip',
                // 'echarts/component/toolbox',
                // 'echarts/component/visualMap'
            ], function (ec) {

                $.getJSON('./data/nutrients.json', function (data) {
                    echarts = ec;
                    colorTool = echarts.color;

                    normalizeData(data);

                    chart = myChart = echarts.init(document.getElementById('main'));

                    console.time('render');
                    chart.setOption(getOption(data));
                    console.timeEnd('render');

                    chart.on('axisAreaSelected', function (event) {
                        // var indices = chart.getModel().getSeries()[0].getRawIndicesByActiveState('active');
                        // console.log('北京: ', indices);
                    });

                });

                var indices = {
                    name: 0,
                    group: 1,
                    id: 16
                };
                var schema = [
                    {name: 'name', index: 0},
                    {name: 'group', index: 1},
                    {name: 'protein', index: 2},
                    {name: 'calcium', index: 3},
                    {name: 'sodium', index: 4},
                    {name: 'fiber', index: 5},
                    {name: 'vitaminc', index: 6},
                    {name: 'potassium', index: 7},
                    {name: 'carbohydrate', index: 8},
                    {name: 'sugars', index: 9},
                    {name: 'fat', index: 10},
                    {name: 'water', index: 11},
                    {name: 'calories', index: 12},
                    {name: 'saturated', index: 13},
                    {name: 'monounsat', index: 14},
                    {name: 'polyunsat', index: 15},
                    {name: 'id', index: 16}
                ];

                function normalizeData(originData) {
                    var groupMap = {};
                    originData.forEach(row => {
                        var groupName = row[indices.group];
                        if (!groupMap.hasOwnProperty(groupName)) {
                            groupMap[groupName] = 1;
                        }
                    });

                    originData.forEach(row => {
                        row.forEach((item, index) => {
                            if (index !== indices.name
                                && index !== indices.group
                                && index !== indices.id
                            ) {
                                // Convert null to zero, as all of them under unit "g".
                                row[index] = parseFloat(item) || 0;
                            }
                        });
                    });

                    for (var groupName in groupMap) {
                        if (groupMap.hasOwnProperty(groupName)) {
                            groupCategories.push(groupName);
                        }
                    }
                    var hStep = Math.round(300 / (groupCategories.length - 1));
                    for (var i = 0; i < groupCategories.length; i++) {
                        groupColors.push(colorTool.modifyHSL('#5A94DF', hStep * i));
                    }
                }

                function getOption(data) {

                    var lineStyle = {
                        normal: {
                            width: 0.5,
                            opacity: 0.05
                            // shadowBlur: 10,
                            // shadowOffsetX: 0,
                            // shadowOffsetY: 0,
                            // shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    };

                    return {
                        backgroundColor: '#333',
                        tooltip: {
                            padding: 10,
                            backgroundColor: '#222',
                            borderColor: '#777',
                            borderWidth: 1,
                            formatter: function (obj) {
                                var value = obj[0].value;
                                return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                                    + schema[1].name + '：' + value[1] + '<br>'
                                    + schema[2].name + '：' + value[2] + '<br>'
                                    + schema[3].name + '：' + value[3] + '<br>'
                                    + schema[4].name + '：' + value[4] + '<br>'
                                    + schema[5].name + '：' + value[5] + '<br>'
                                    + schema[6].name + '：' + value[6] + '<br>';
                            }
                        },
                        title: [
                            {
                                text: 'Groups',
                                top: 0,
                                left: 0,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        ],
                        visualMap: {
                            show: true,
                            type: 'piecewise',
                            categories: groupCategories,
                            dimension: indices.group,
                            inRange: {
                                color: groupColors //['#d94e5d','#eac736','#50a3ba']
                            },
                            outOfRange: {
                                color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba']
                            },
                            top: 20,
                            textStyle: {
                                color: '#fff'
                            },
                            realtime: false
                        },
                        parallelAxis: [
                            {dim: 16, name: schema[16].name, scale: true, nameLocation: 'end'},
                            {dim: 2, name: schema[2].name, nameLocation: 'end'},
                            {dim: 4, name: schema[4].name, nameLocation: 'end'},
                            {dim: 3, name: schema[3].name, nameLocation: 'end'},
                            {dim: 5, name: schema[5].name, nameLocation: 'end'},
                            {dim: 6, name: schema[6].name, nameLocation: 'end'},
                            {dim: 7, name: schema[7].name, nameLocation: 'end'},
                            {dim: 8, name: schema[8].name, nameLocation: 'end'},
                            {dim: 9, name: schema[9].name, nameLocation: 'end'},
                            {dim: 10, name: schema[10].name, nameLocation: 'end'},
                            {dim: 11, name: schema[11].name, nameLocation: 'end'},
                            {dim: 12, name: schema[12].name, nameLocation: 'end'},
                            {dim: 13, name: schema[13].name, nameLocation: 'end'},
                            {dim: 14, name: schema[14].name, nameLocation: 'end'},
                            {dim: 15, name: schema[15].name, nameLocation: 'end'}
                        ],
                        parallel: {
                            left: 280,
                            top: 20,
                            // top: 150,
                            // height: 300,
                            width: 400,
                            layout: 'vertical',
                            parallelAxisDefault: {
                                type: 'value',
                                name: 'nutrients',
                                nameLocation: 'end',
                                nameGap: 20,
                                nameTextStyle: {
                                    color: '#fff',
                                    fontSize: 14
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: '#aaa'
                                    }
                                },
                                axisTick: {
                                    lineStyle: {
                                        color: '#777'
                                    }
                                },
                                splitLine: {
                                    show: false
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                realtime: false
                            }
                        },
                        animation: false,
                        series: [
                            {
                                name: 'nutrients',
                                type: 'parallel',
                                lineStyle: lineStyle,
                                inactiveOpacity: 0,
                                activeOpacity: 0.01,
                                progressive: 500,
                                smooth: true,
                                data: data
                            }
                        ]
                    };
                }

            });

        </script>
    </body>
</html>