gonewandering · cubicwork · Jun 28, 2016 · Jun 28, 2016 · Jun 30, 2016 · Jun 30, 2016
diff --git a/Readme.md b/Readme.md
@@ -1,7 +1,7 @@
-Angles.js
+Angles2
 =========
 
-An angular.js wrapper for the Chart.js library.
+An angular.js wrapper for the Chart.js v2 library.
 
 [Chart.js Documentation](http://www.chartjs.org/docs/)
 
@@ -14,8 +14,8 @@ Basic Usage
 
 To Use, make sure to include the following .js files above your app:
 ```html
-<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.min.js"></script>
 <script src="angles.js"></script>
 ```
 
@@ -51,30 +51,6 @@ the legend attribute auto generate a legend after canvas container
 <canvas barchart legend=true options="options" data="chart"></canvas>
 ```
 
-The template for this legend is a legendTemplate in the chart options
-
-```javascript
-$scope.chart = {
-    labels : ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
-    datasets : [
-        {
-        	fillColor : "rgba(151,187,205,0)",
-        	strokeColor : "#e67e22",
-        	pointColor : "rgba(151,187,205,0)",
-        	pointStrokeColor : "#e67e22",
-        	data : [4, 3, 5, 4, 6]
-        },
-        {
-        	fillColor : "rgba(151,187,205,0)",
-        	strokeColor : "#f1c40f",
-        	pointColor : "rgba(151,187,205,0)",
-        	pointStrokeColor : "#f1c40f",
-        	data : [8, 3, 2, 5, 4]
-        }
-    ], 
-};
-```
-
 That's it. You can change the values of the chart just as you would with any other angular model.
 
 Directives
@@ -143,7 +119,8 @@ OR
 Options and Data
 ----------------
 
-You can provide options and data to all charts via the options and data attributes on the canvas elements.
+You can provide options and data to all charts via the options and data attributes on the canvas elements.  
+#### Note: this version works with Chartjs v2, The following code my not works in cubicwork/angles.
 
 ```html
 <body ng-app="app">

diff --git a/angles.js b/angles.js
@@ -9,12 +9,12 @@ angles.chart = function (type) {
             id: "@",
             width: "=",
             height: "=",
+            heightwithlabel: "=",
             resize: "=",
             chart: "@",
             segments: "@",
             responsive: "=",
-            tooltip: "=",
-            legend: "="
+            tooltip: "="
         },
         link: function ($scope, $elem) {
             var ctx = $elem[0].getContext("2d");
@@ -29,30 +29,52 @@ angles.chart = function (type) {
 	                autosize = true;
 	            }
 
-                if($scope.height <= 0){
+                if ( $scope.heightwithlabel) {
+                    var lineWidth = 0;
+                    var lines = 1;
+                    var maxWidth = $elem.parent().width();
+                    for( var il = 0; il < $scope.data.labels.length ; il ++) {
+                        var charWidth = 0;
+                        for( var ic = 0; ic < $scope.data.labels[il].length ; ic ++) {
+                            if( $scope.data.labels[il].charCodeAt(ic) < 255) {
+                                charWidth += 6;
+                            } else {
+                                charWidth += 12;
+                            }
+                        }
+                        var itemWidth = 27 + charWidth;
+                        lineWidth += itemWidth;
+                        if( lineWidth <= maxWidth ) {
+                            continue;
+                        } else {
+                            lines ++;
+                            lineWidth = itemWidth;
+                        }
+                    }
+                    ctx.canvas.height = ( maxWidth + 23 * lines + 5 ) * ( $scope.width / maxWidth );
+                } else if($scope.height <= 0) {
                     $elem.height($elem.parent().height());
-                    ctx.canvas.height = ctx.canvas.width / 2;
-                } else {
+                    ctx.canvas.height = ctx.canvas.width;
+                }  else {
                     ctx.canvas.height = $scope.height || ctx.canvas.height;
                     autosize = true;
                 }
 			}
 
             $scope.$watch("data", function (newVal, oldVal) {
                 if(chartCreated)
-                    chartCreated.destroy();
+                    chart.destroy();
 
                 var options = $scope.options || {};
 
-                // if data not defined, exit
+                    // if data not defined, exit
                 if (!newVal) {
                     return;
                 }
                 if ($scope.chart) { type = $scope.chart; }
 
                 if(autosize){
                     $scope.size();
-                    chart = new Chart(ctx);
                 };
 
                 if($scope.responsive || $scope.resize)
@@ -61,40 +83,24 @@ angles.chart = function (type) {
                 if($scope.responsive !== undefined)
                     options.responsive = $scope.responsive;
 
-                chartCreated = chart[type]($scope.data, options);
-                chartCreated.update();
-                if($scope.legend)
-                    angular.element($elem[0]).parent().after( chartCreated.generateLegend() );
-            }, true);
-
-            $scope.$watch("tooltip", function (newVal, oldVal) {
-                if (chartCreated)
-                    chartCreated.draw();
-                if(newVal===undefined || !chartCreated.segments)
-                    return;
-                if(!isFinite(newVal) || newVal >= chartCreated.segments.length || newVal < 0)
-                    return;
-                var activeSegment = chartCreated.segments[newVal];
-                activeSegment.save();
-                activeSegment.fillColor = activeSegment.highlightColor;
-                chartCreated.showTooltip([activeSegment]);
-                activeSegment.restore();
-            }, true);
+                $scope.size();
+                chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options});
+            }, false);
 
             $scope.size();
-            var chart = new Chart(ctx);
-            var chartCreated;
+            var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options});
+            var chartCreated = true;
         }
     }
 }
 
 
 /* Aliases for various chart types */
 angles.directive("chart", function () { return angles.chart(); });
-angles.directive("linechart", function () { return angles.chart("Line"); });
-angles.directive("barchart", function () { return angles.chart("Bar"); });
-angles.directive("radarchart", function () { return angles.chart("Radar"); });
-angles.directive("polarchart", function () { return angles.chart("PolarArea"); });
-angles.directive("piechart", function () { return angles.chart("Pie"); });
-angles.directive("doughnutchart", function () { return angles.chart("Doughnut"); });
-angles.directive("donutchart", function () { return angles.chart("Doughnut"); });
+angles.directive("linechart", function () { return angles.chart("line"); });
+angles.directive("barchart", function () { return angles.chart("bar"); });
+angles.directive("horizontalbarchart", function () { return angles.chart("horizontalBar"); });
+angles.directive("radarchart", function () { return angles.chart("radar"); });
+angles.directive("polarchart", function () { return angles.chart("polarArea"); });
+angles.directive("piechart", function () { return angles.chart("pie"); });
+angles.directive("doughnutchart", function () { return angles.chart("doughnut"); });
diff --git a/bower.json b/bower.json
@@ -1,9 +1,10 @@
 {
-  "name": "angles",
-  "version": "1.0.1-beta",
+  "name": "angles2",
+  "version": "2.0.0-alpha",
   "authors": [
     "Lindsay Silver",
-    "Jesus Torres"
+    "Jesus Torres",
+    "Carney Wu"
   ],
   "main": "angles.js",
   "ignore": [
@@ -17,6 +18,6 @@
     "libs/Chart.js"
   ],
   "dependencies": {
-    "chartjs": "1.0.1"
+    "chartjs": "2.1.6"
   }
 }