From ab41cefce6143500b94522375b0c9afeba9116f3 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Tue, 28 Jun 2016 12:09:14 +0800 Subject: [PATCH 01/12] modify angularjs version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index a3640e8..bc9a6d5 100644 --- a/bower.json +++ b/bower.json @@ -17,6 +17,6 @@ "libs/Chart.js" ], "dependencies": { - "chartjs": "1.0.1" + "chartjs": "2.1.6" } } From b3e2f0e6778a1bf6b662883a08bb2cc311e709a3 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Tue, 28 Jun 2016 14:26:17 +0800 Subject: [PATCH 02/12] commit for edit --- angles.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/angles.js b/angles.js index 34e54eb..0184201 100644 --- a/angles.js +++ b/angles.js @@ -52,7 +52,7 @@ angles.chart = function (type) { if(autosize){ $scope.size(); - chart = new Chart(ctx); + chart = new Chart(ctx, { type:type, data:$scope.data, options:options}); }; if($scope.responsive || $scope.resize) @@ -61,7 +61,10 @@ angles.chart = function (type) { if($scope.responsive !== undefined) options.responsive = $scope.responsive; - chartCreated = chart[type]($scope.data, options); + //chartCreated = chart[type]($scope.data, options); + chartCreated.type = type; + chartCreated.data = $scope.data; + chartCreated.options = options; chartCreated.update(); if($scope.legend) angular.element($elem[0]).parent().after( chartCreated.generateLegend() ); From b6eef2a58cad24354207916a00914bc8e04b8599 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Thu, 30 Jun 2016 10:47:04 +0800 Subject: [PATCH 03/12] auto height width item number --- angles.js | 63 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 42 insertions(+), 21 deletions(-) diff --git a/angles.js b/angles.js index 0184201..0dbfd08 100644 --- 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,10 +29,33 @@ 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; } @@ -52,7 +75,7 @@ angles.chart = function (type) { if(autosize){ $scope.size(); - chart = new Chart(ctx, { type:type, data:$scope.data, options:options}); + //chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); }; if($scope.responsive || $scope.resize) @@ -62,13 +85,12 @@ angles.chart = function (type) { options.responsive = $scope.responsive; //chartCreated = chart[type]($scope.data, options); - chartCreated.type = type; - chartCreated.data = $scope.data; - chartCreated.options = options; - chartCreated.update(); - if($scope.legend) - angular.element($elem[0]).parent().after( chartCreated.generateLegend() ); - }, true); + //chartCreated.type = type; + //chartCreated.data = $scope.data; + //chartCreated.options = options; + //chartCreated.update(); + chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); + }, false); $scope.$watch("tooltip", function (newVal, oldVal) { if (chartCreated) @@ -85,7 +107,7 @@ angles.chart = function (type) { }, true); $scope.size(); - var chart = new Chart(ctx); + var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); var chartCreated; } } @@ -94,10 +116,9 @@ angles.chart = function (type) { /* 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("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"); }); From 608c16ca45a20a40b406ab8da3df3f441fb20524 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Thu, 30 Jun 2016 10:48:14 +0800 Subject: [PATCH 04/12] Update bower.json --- bower.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/bower.json b/bower.json index bc9a6d5..2a51294 100644 --- a/bower.json +++ b/bower.json @@ -3,7 +3,8 @@ "version": "1.0.1-beta", "authors": [ "Lindsay Silver", - "Jesus Torres" + "Jesus Torres", + "Carney Wu" ], "main": "angles.js", "ignore": [ From bd9622e2337dafb26ccbf8c457c12b7b3341ba0f Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Thu, 30 Jun 2016 10:52:36 +0800 Subject: [PATCH 05/12] add some notes --- Readme.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index 8237863..f573581 100644 --- a/Readme.md +++ b/Readme.md @@ -143,7 +143,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 From f727716145e00b5f36b64f8e753d4fb4ea2c2919 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Thu, 30 Jun 2016 10:53:44 +0800 Subject: [PATCH 06/12] add some notes --- Readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Readme.md b/Readme.md index f573581..bca897a 100644 --- a/Readme.md +++ b/Readme.md @@ -144,7 +144,7 @@ Options and Data ---------------- 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. +#### Note: this version works with Chartjs v2, The following code my not works in cubicwork/angles. ```html From 28f04a2f1074c53ca4018de190ab44fd087de592 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Fri, 1 Jul 2016 10:48:50 +0800 Subject: [PATCH 07/12] delete some code --- angles.js | 20 -------------------- 1 file changed, 20 deletions(-) diff --git a/angles.js b/angles.js index 0dbfd08..3b7fb97 100644 --- a/angles.js +++ b/angles.js @@ -75,7 +75,6 @@ angles.chart = function (type) { if(autosize){ $scope.size(); - //chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); }; if($scope.responsive || $scope.resize) @@ -84,28 +83,9 @@ angles.chart = function (type) { if($scope.responsive !== undefined) options.responsive = $scope.responsive; - //chartCreated = chart[type]($scope.data, options); - //chartCreated.type = type; - //chartCreated.data = $scope.data; - //chartCreated.options = options; - //chartCreated.update(); chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); }, false); - $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(); var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); var chartCreated; From 9f0f9f32ddac884c6d6a224fa1f761f89e48c4b6 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Fri, 1 Jul 2016 10:54:40 +0800 Subject: [PATCH 08/12] Update bower.json --- bower.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index 2a51294..f781087 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { - "name": "angles", - "version": "1.0.1-beta", + "name": "angles2", + "version": "2.0.0-alpha", "authors": [ "Lindsay Silver", "Jesus Torres", From 79a6d3d01bdaab2c47a8ddd66010d4289ae4336b Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Fri, 1 Jul 2016 10:59:51 +0800 Subject: [PATCH 09/12] Update Readme.md --- Readme.md | 32 ++++---------------------------- 1 file changed, 4 insertions(+), 28 deletions(-) diff --git a/Readme.md b/Readme.md index bca897a..82d8b60 100644 --- 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 - - + + ``` @@ -51,30 +51,6 @@ the legend attribute auto generate a legend after canvas container ``` -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 From 36e9c4e13723500d81eedaf493e0e19035fd1163 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Mon, 4 Jul 2016 11:23:15 +0800 Subject: [PATCH 10/12] fix bug of duplicate chart when data change --- angles.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/angles.js b/angles.js index 3b7fb97..0eee2ca 100644 --- a/angles.js +++ b/angles.js @@ -63,11 +63,11 @@ angles.chart = function (type) { $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; } @@ -83,12 +83,15 @@ angles.chart = function (type) { if($scope.responsive !== undefined) options.responsive = $scope.responsive; + $scope.size(); chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); + console.log("new Chart of datachange:"+type); }, false); $scope.size(); var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); - var chartCreated; + console.log("new Chart of init:"+type); + var chartCreated = true; } } } From cc6844204a432a98b99e1616dc03c3b8cdea4270 Mon Sep 17 00:00:00 2001 From: Carney Wu Date: Mon, 4 Jul 2016 11:27:51 +0800 Subject: [PATCH 11/12] Update angles.js --- angles.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/angles.js b/angles.js index 0eee2ca..a209502 100644 --- a/angles.js +++ b/angles.js @@ -85,12 +85,10 @@ angles.chart = function (type) { $scope.size(); chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); - console.log("new Chart of datachange:"+type); }, false); $scope.size(); var chart = new Chart(ctx, { type:type, data:$scope.data, options:$scope.options}); - console.log("new Chart of init:"+type); var chartCreated = true; } } From 8c72ac339fa2fb19a1a1699d7445deca9234822c Mon Sep 17 00:00:00 2001 From: Gabriel Nunes Date: Thu, 11 Aug 2016 19:30:55 -0300 Subject: [PATCH 12/12] Add horizontalBarChart directive --- angles.js | 1 + 1 file changed, 1 insertion(+) diff --git a/angles.js b/angles.js index a209502..cbcf99b 100644 --- a/angles.js +++ b/angles.js @@ -99,6 +99,7 @@ angles.chart = function (type) { 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("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"); });