//Setup Module and configure charts api
(function() {
  angular.module('chart-example', ['googlechart'])
    .value('googleChartApiConfig', {
      version: '1.1',
      optionalSettings: {
        packages: ['corechart'],
        language: 'en'
      }
    });
})();

//Wrapping each component in an IIFE gives the
//component it's own namespace for variables
//and functions. It also tidies up the pen a bit.
(function() {
  angular.module('chart-example')
    .controller('ExampleController', ExampleController);

  ExampleController.$inject = ['$scope', 'chartObject'];

  function ExampleController($scope, chartObject) {
    $scope.chartObject = chartObject;
    $scope.icons = [];

    // -- IMPORTANT PART HERE! --
    $scope.chartReady = function(chartWrapper) {
      var i, icon;

      //Clear the icons list.
      $scope.icons = [];

      // Get the DataTable instance from the chart wrapper.
      var dataTable = chartWrapper.getDataTable();

      //Get the chart's layout interface.  The layout interface
      //is an api for getting pixel coordinates that map to
      //data coordinates in the chart area.
      var chart = chartWrapper.getChart();
      var layoutInterface = chart.getChartLayoutInterface();
      var chartAreaBounds = layoutInterface.getChartAreaBoundingBox();

      //Iterate through the DataTable to generate a list of
      //icons to display.
      var rowCount = dataTable.getNumberOfRows();

      //Calculate the width of the icons.
      var iconWidth = chartAreaBounds.width / (rowCount + 1);
      //Max width of 30, keeps them from getting too tall.
      if (iconWidth > 30) {
        iconWidth = 30;
      }

      for (i = 0; i < rowCount; i++) {
        icon = {};
        //Get the weather value from the DataTable
        icon.value = dataTable.getValue(i, 4);
        //Get the date
        icon.date = dataTable.getValue(i, 0);

        //CSS style for the icon.
        icon.style = {
            position: 'absolute',
            //Get the x location for this date value. Offset for icon width.
            left: (layoutInterface.getXLocation(icon.date) - iconWidth / 2) + 'px',
            //Set the y location to the top of the chart area.
            top: chartAreaBounds.top + 'px',
            width: iconWidth + 'px'
          }
          //Add the icon to the array on scope.
        $scope.icons.push(icon);
      }
    };
  }
})();

(function() {
  angular.module('chart-example')
    .factory('chartObject', chartObjectFactory);

  chartObjectFactory.$inject = ['$http'];

  function chartObjectFactory($http) {
    var chartObject = {};
    chartObject.type = "ComboChart";
    chartObject.data = {};
    chartObject.options = {
      title: "Effect of Weather on Maple Sap Yields",
      series: {
        "0": {
          targetAxisIndex: 0,
          color: '4C66F2'
        },
        "1": {
          targetAxisIndex: 0,
          color: '4131CF',
        },
        "2": {
          targetAxisIndex: 1,
          color: '29E0BE',
          type: "bars"
        }
      },
      //Dual-Y Axis Definitions
      vAxes: {
        "0": {
          title: "Temperature (C)"
        },
        "1": {
          title: "Sap Collected (L)"
        }
      },
      legend: 'none',
      hAxis: {
        title: 'Date'
      }
    };

    //Show only columns 0-3, so that it doesn't try to render value used for weather icons.
    chartObject.view = {
      columns: [0, 1, 2, 3]
    };

    //This example is not about the data, so let's just pull in a json file.
    $http({
        method: 'GET',
        url: 'https://s3.amazonaws.com/balrog30-hostedfiles/example-data.json'
      })
      .then(dataSuccess);

    function dataSuccess(result) {
      chartObject.data = result.data;
    }
    return chartObject;
  }
})();