var app = angular.module('plunker', ['nvd3']);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.options = {
            chart: {
                type: 'lineChart',
                height: 450,
                margin : {
                    top: 20,
                    right: 20,
                    bottom: 40,
                    left: 75
                },
                x: function(d){ return d.x; },
                y: function(d){ return d.y; },
                useInteractiveGuideline: true,
                dispatch: {
                        elementMousemove: function(e) { console.log("mouse move"); }
                },
                xAxis: {
                    axisLabel: 'Time (ms)',
                    tickFormat: function(d) {
                      return d3.format('.02f')(d/8);
                    }
                },
                yAxis: {
                    axisLabel: 'Voltage (v) Axis Metric name not shown properly _Voltage (v) Axis Metric name not shown properly',
                    showMaxMin: true,
                    length:10,
                    tickFormat: function(d){
                        return d3.format('.02f')(d);
                    }
                },
                callback: function(chart){
                    console.log("!!! lineChart callback !!!");
                },
                pointSize: 30, 
                interactiveLayer: { 
                  //if useInteractiveGuideline is true, the customized tooltip.
                  //contentGenerator function must be put in 'interactiveLayer'
                  tooltip: {
                    contentGenerator: function (e) {
                      var pId = e.value;
                      var seriesCount = $scope.data.length;
                      var header = 
                        "<thead>" + 
                          "<tr>" +
                            "<td class='key'><strong>" + (pId/8).toFixed(2) + "(customized)</strong></td>" +
                          "</tr>" + 
                        "</thead>";


                      var rows = "";
                      for (var i=0; i<seriesCount; i++) {
                        var d = $scope.data[i];
                        rows +=
                          "<tr>" +
                            "<td class='legend-color-guide'><div style='background-color: " + d.color + ";'></div></td>" +
                            "<td class='key'>" + d.key + "</td>" +
                            "<td class='x-value'><strong>" + (d.values?d.values[pId].y.toFixed(2):0) + "</strong></td>" +
                          "</tr>"
                      }

                      return "<table>" +
                          header +
                          "<tbody>" + 
                            rows + 
                          "</tbody>" +
                        "</table>";
                    } 
                  }
                }
            },
            title: {
                enable: true,
                text: 'Title for Line Chart'
            },
            subtitle: {
                enable: true,
                text: 'Subtitle for simple line chart. Lorem ipsum dolor sit amet, at eam blandit sadipscing, vim adhuc sanctus disputando ex, cu usu affert alienum urbanitas.',
                css: {
                    'text-align': 'center',
                    'margin': '10px 13px 0px 7px'
                }
            },
            caption: {
                enable: true,
                html: '<b>Figure 1.</b> Caption of This Chart Put Here.',
                css: {
                    'text-align': 'justify',
                    'margin': '10px 13px 0px 7px'
                }
            }
        };

        $scope.data = sinAndCos();

        setTimeout(function() {
           console.log("Inside the timeout");
        }, 500);

        /*Random 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++) {
              var d = {x: i, y: Math.sin(i/10)};
              if (i % 5 === 0) {
                d.shape = "cross";
              } else {
                d.shape = "diamond";
              }
              sin.push(d);
              sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
              cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 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: '#ff7f0e'  //color - optional: choose your own line color.
                },
                {
                    values: cos,
                    key: 'Cosine Wave',
                    color: '#2ca02c'
                },
                {
                    values: sin2,
                    key: 'Another sine wave',
                    color: '#7777ff',
                    area: false      //area - set to true if you want this line to turn into a filled area chart.
                }
            ];
        }
});