"use strict"; 
 /*Line chart start*/
    /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
    nv.addGraph(function() {
        var chart = nv.models.lineChart()
                        .margin({top: 50})
                        .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
                        .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                        .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
                        .showYAxis(true)        //Show the y-axis
                        .showXAxis(true)        //Show the x-axis
                ;

        chart.xAxis     //Chart x-axis settings
                .axisLabel('Time (ms)')
                .tickFormat(d3.format(',r'));

        chart.yAxis     //Chart y-axis settings
                .axisLabel('Voltage (v)')
                .tickFormat(d3.format('.02f'));

        /* Done setting the chart up? Time to render it!*/
        var myData = sinAndCos();   //You need data...

        d3.select('#linechart').append('svg')   //Select the <svg> element you want to render the chart in.
                .datum(myData)         //Populate the <svg> element with chart data...
                .call(chart);          //Finally, render the chart!

        //Update the chart when window resizes.
        nv.utils.windowResize(function() { chart.update() });
        return chart;
    });
    /**************************************
     * Simple test data generator
     */
    function sinAndCos() {
        var sin = [],sin2 = [],
                cos = [];

        //Data is represented as an array of {x,y} pairs.
        for (var i = 0; i < 100; i++) {
            sin.push({x: i, y: Math.sin(i/10)});
            sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
            cos.push({x: i, y: .5 * Math.cos(i/10)});
        }

        //Line chart data should be sent as an array of series objects.
        return [
            {
                values: sin,      //values - represents the array of {x,y} data points
                key: 'Sine Wave', //key  - the name of the series.
                color: '#2196F3'  //color - optional: choose your own line color.
            },
            {
                values: cos,
                key: 'Cosine Wave',
                color: '#4CAF50'
            },
            {
                values: sin2,
                key: 'Another sine wave',
                color: '#ff5252',
                area: true      //area - set to true if you want this line to turn into a filled area chart.
            }
        ];
    }

    /*Bar chart start*/
    nv.addGraph(function() {
        var chart = nv.models.discreteBarChart()
                        .x(function(d) { return d.label })    //Specify the data accessors.
                        .y(function(d) { return d.value })
                        .staggerLabels(true)    //Too many bars and not enough room? Try staggering labels.
                        /* .tooltips(false)    */    //Don't show tooltips
                        .showValues(true)       //...instead, show the bar value right on top of each bar.
                /*     .transitionDuration(350)*/
                ;

        d3.select('#barchart').append('svg')
                .datum(barData())
                .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    //Each bar represents a single discrete quantity.
    function barData() {
        return  [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label" : "A" ,
                        "value" : -29.765957771107,
                        "color" : "#2196F3"
                    } ,
                    {
                        "label" : "B" ,
                        "value" : 0,
                        "color" : "#ff5252"
                    } ,
                    {
                        "label" : "C" ,
                        "value" : 32.807804682612,
                        "color" : "#4CAF50"
                    } ,
                    {
                        "label" : "D" ,
                        "value" : 196.45946739256,
                        "color" : "#f57c00"
                    } ,
                    {
                        "label" : "E" ,
                        "value" : 0.19434030906893,
                        "color" : "#FF0084"
                    } ,
                    {
                        "label" : "F" ,
                        "value" : -98.079782601442,
                        "color" : "#007BB6"
                    } ,
                    {
                        "label" : "G" ,
                        "value" : -13.925743130903,
                        "color" : "#3b5998"
                    } ,
                    {
                        "label" : "H" ,
                        "value" : -5.1387322875705,
                        "color" : "#CB2027"
                    }
                ]
            }
        ]

    }

    /*Scatter chart start*/
    nv.addGraph(function() {
        var chart = nv.models.scatterChart()
                .showDistX(true)    //showDist, when true, will display those little distribution lines on the axis.
                .showDistY(true)
                /* .transitionDuration(350)*/
                .color(d3.scale.category10().range());

        //Configure how the tooltip looks.
        /* chart.tooltipContent(function(key) {
         return '<h3>' + key + '</h3>';
         });*/

        //Axis settings
        chart.xAxis.tickFormat(d3.format('.02f'));
        chart.yAxis.tickFormat(d3.format('.02f'));

        //We want to show shapes other than circles.
        /*chart.scatter.onlyCircles(false);*/

        var myData = randomData(4,40);
        d3.select('#scatterchart').append('svg')
                .datum(myData)
                .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    /**************************************
     * Simple test data generator
     */
    function randomData(groups, points) { //# groups,# points per group
        var data = [],
                shapes = ['circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
                random = d3.random.normal();

        for (var i = 0; i < groups; i++) {
            data.push({
                key: 'Group ' + i,
                values: []
            });

            for (var j = 0; j < points; j++) {
                data[i].values.push({
                    x: random()
                    , y: random()
                    , size: Math.random()   //Configure the size of each scatter point
                    , shape: (Math.random() > 0.95) ? shapes[j % 6] : "circle"  //Configure the shape of each scatter point.
                });
            }
        }

        return data;
    }

    /*Stacked/Group chart start*/
    nv.addGraph(function() {
        var chart = nv.models.multiBarChart()
                /* .transitionDuration(350)*/
                        .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
                        .rotateLabels(0)      //Angle to rotate x-axis labels.
                        .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
                        .groupSpacing(0.1)    //Distance between each group of bars.
                ;

        chart.xAxis
                .tickFormat(d3.format(',f'));

        chart.yAxis
                .tickFormat(d3.format(',.1f'));

        d3.select('#stackedchart').append('svg')
                .datum(stackedData())
                .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    });

    //Generate some nice data.
    function stackedData() {
        return stream_layers(3,10+Math.random()*100,.1).map(function(data, i) {
            return {
                key: 'Stream #' + i,
                values: data
            };
        });
    }

    /*Regular Pie chart*/
    nv.addGraph(function() {
        var chart = nv.models.pieChart()
                .x(function(d) { return d.label })
                .y(function(d) { return d.value })
                .showLabels(true);

        d3.select("#piechart").append('svg')
                .datum(pieData())
                .transition().duration(350)
                .call(chart);
  nv.utils.windowResize(chart.update);
        return chart;
    });
    //Donut chart example
    nv.addGraph(function() {
        var chart = nv.models.pieChart()
                        .x(function(d) { return d.label })
                        .y(function(d) { return d.value })
                        .showLabels(true)     //Display pie labels
                        .labelThreshold(.05)  //Configure the minimum slice size for labels to show up
                        .labelType("percent") //Configure what type of data to show in the label. Can be "key", "value" or "percent"
                        .donut(true)          //Turn on Donut mode. Makes pie chart look tasty!
                        .donutRatio(0.35)     //Configure how big you want the donut hole size to be.
                ;

        d3.select("#donutchart").append('svg')
                .datum(pieData())
                .transition().duration(350)
                .call(chart);
  nv.utils.windowResize(chart.update);
        return chart;
    });
    //Pie chart example data. Note how there is only a single array of key-value pairs.
    function pieData() {
        return  [
            {
                "label": "One",
                "value" : 29.765957771107,
                        "color" : "#2196F3"
            } ,
            {
                "label": "Two",
                "value" : 0,
                        "color" : "#ff5252"
            } ,
            {
                "label": "Three",
                "value" : 32.807804682612,
                        "color" : "#4CAF50"
            } ,
            {
                "label": "Four",
                "value" : 196.45946739256,
                        "color" : "#f57c00"
            } ,
            {
                "label": "Five",
                "value" : 0.19434030906893,
                        "color" : "#FF0084"
            } ,
            {
                "label": "Six",
                "value" : 98.079782601442,
                        "color" : "#007BB6"
            } ,
            {
                "label": "Seven",
                "value" : 13.925743130903,
                        "color" : "#3b5998"
            } ,
            {
                "label": "Eight",
                "value" : 5.1387322875705,
                        "color" : "#CB2027"
            }
        ];
    }

