angular.module('yds').directive('ydsDashboardVisualization', ['DashboardService', '$ocLazyLoad', '$timeout',
    function(DashboardService, $ocLazyLoad, $timeout) {
        return {
            restrict: 'E',
            scope: {
                projectId: '@',     // Project ID of chart
                dashboardId: '@',   // ID used for getting selected year range from DashboardService
                addToBasket: '@',   // If true, the save to basket button will appear in visualizations
                disableColor: '@',  // If true, the component will ignore the color of the selected aggregate type
                elementH: '@'       // Height of component
            },
            templateUrl: ((typeof Drupal != 'undefined') ? Drupal.settings.basePath + Drupal.settings.yds_project.modulePath +'/' : '') + 'templates/dashboard-visualization.html',
            link: function (scope, element, attrs) {
                var dashboardId = scope.dashboardId;
                var disableColor = scope.disableColor;

                // Check if the component's height attribute is defined, else assign default value
                if (_.isUndefined(scope.elementH) || scope.elementH.trim() == "")
                    scope.elementH = 300;

                // If dashboardId is undefined, show error
                if (_.isUndefined(dashboardId) || dashboardId.trim() == "")
                    dashboardId = "default";

                // If disableColor is undefined, show error
                if (_.isUndefined(disableColor) || (disableColor != "true" && disableColor != "false"))
                    disableColor = "false";

                // Set minimum height of details panel body
                scope.panelBodyStyle = {
                    "min-height": (parseInt(scope.elementH) + 30) + "px"
                };

                scope.selectedVis = "";

                // Set the first type as default selected one
                scope.selProjectId = scope.projectId;
                scope.selViewType = "";

                // Variables for previous values, to check that something really changed before re-rendering component
                var prevViewType = "";
                var updateVis = false;

                /**
                 * Re-render the selected visualization
                 */
                var updateVisualization = function() {
                    if (updateVis) {
                        var selectedVis = "bar";
                        if (scope.selectedVis.length > 0) {
                            selectedVis = scope.selectedVis;
                        }

                        // Make selectedVis empty in order for the component to re-render
                        scope.selectedVis = "";

                        // Postpone to end of digest queue
                        $timeout(function() {
                            scope.selectVis(selectedVis);

                            updateVis = false;
                        });
                    }
                };

                /**
                 * Update the view type from the DashboardService
                 * Also sets the Visualization panel's color
                 */
                var updateViewType = function() {
                    prevViewType = scope.selViewType;
                    var viewType = DashboardService.getViewType(dashboardId);

                    if (!_.isUndefined(viewType) && !_.isEqual(prevViewType, viewType.type)) {
                        scope.selViewType = viewType.type;

                        if (disableColor != "true") {
                            scope.panelStyle = viewType.panelStyle;
                            scope.panelHeadingStyle = _.omit(viewType.panelHeadingStyle, "min-height");
                        }

                        updateVis = true;
                    }
                };

                /**
                 * Handles view type selection changes
                 */
                var viewTypeChangeHandler = function() {
                    updateViewType();
                    updateVisualization();
                };

                // Subscribe to year selection and view type changes
                DashboardService.subscribeViewTypeChanges(scope, viewTypeChangeHandler);

                /**
                 * Change selected visualization type
                 * @param visType
                 */
                scope.selectVis = function(visType) {
                    scope.selectedVis = visType;
                };

                // Initialize component
                viewTypeChangeHandler();
            }
        };
    }
]);

@@ -598,24 +598,133 @@
 regate type%0A
+                type: '@',          // View type of component. If not set, will get it from DashboardService%0A
             
@@ -1002,24 +1002,8 @@
 cope
-, element, attrs
 ) %7B%0A
@@ -1109,16 +1109,55 @@
 leColor;
+%0A                var type = scope.type;
 %0A%0A      
@@ -3505,24 +3505,273 @@
 hboardId);%0A%0A
+                    if (!_.isUndefined(type) && type.length %3E 0) %7B%0A                        // Use view type from attribute%0A                        viewType = %7B%0A                            type: type%0A                        %7D;%0A                    %7D%0A%0A
             
@@ -4495,32 +4495,99 @@
             %7D;%0A%0A
+                if (_.isUndefined(type) %7C%7C type.length == 0) %7B%0A    
                 
@@ -4655,16 +4655,20 @@
         
+    
 Dashboar
@@ -4731,16 +4731,34 @@
 andler);
+%0A                %7D
 %0A%0A      

Add ability for Dashboard Visualization to use viewType from attribute