From 642d8e2f13357f5a47dcb5399a1e4b3ab37d94ac Mon Sep 17 00:00:00 2001 From: Marco Martins Date: Mon, 2 Feb 2015 17:57:30 +0000 Subject: [PATCH 1/3] added new feature to select if subtitles come before or after the chart --- dist/angular-chartjs.js | 44 ++++++++++++++++++++++++++++-------- dist/angular-chartjs.min.js | 2 +- src/js/main.js | 45 ++++++++++++++++++++++++++++--------- 3 files changed, 71 insertions(+), 20 deletions(-) diff --git a/dist/angular-chartjs.js b/dist/angular-chartjs.js index dca5888..799d129 100644 --- a/dist/angular-chartjs.js +++ b/dist/angular-chartjs.js @@ -1,6 +1,6 @@ (function () { 'use strict'; - + var chartjs = angular.module('chartjs', []), chartTypes = { line: 'Line', @@ -44,47 +44,73 @@ return { restrict: 'EAC', - template: '', + template: '
', replace: true, + require: '?legend', scope: { dataset: '=', - options: '=' + options: '=', + legend: '@' }, link: function postLink(scope, element, attrs) { - var ctx = element[0].getContext('2d'), + var chartEl; + var legendEl; + + if(attrs.legend === 'before') { + element.prepend('
'); + chartEl = element[0].children[1]; + legendEl = element[0].children[0]; + } + + if (attrs.legend === 'after' || !attrs.legend ) { + element.append('
'); + chartEl = element[0].children[0]; + legendEl = element[0].children[1]; + } + + var ctx = chartEl.getContext('2d'), chart = new Chart(ctx), chartOpts = {}; angular.extend( - chartOpts, + chartOpts, Chart.defaults.global, Chart.defaults[chartType] ); angular.extend( - chartOpts, + chartOpts, scope.options, extractSpecOpts( chartOpts, attrs ) ); - + chart = chart[chartType](scope.dataset, chartOpts); + legendEl.innerHTML = chart.generateLegend(); scope.$watch('dataset', function (newData, oldData) { chart.initialize(newData); + legendEl.innerHTML = chart.generateLegend(); }, true); scope.$watch('options', function (newData, oldData) { angular.extend( - chart.options, + chart.options, scope.options ); }, true); - + } }; }; }); + + chartjs.directive('legend', function() { + return { + controller: function($scope) {} + } + }); + })(); diff --git a/dist/angular-chartjs.min.js b/dist/angular-chartjs.min.js index 8a9b759..c1e622f 100644 --- a/dist/angular-chartjs.min.js +++ b/dist/angular-chartjs.min.js @@ -1 +1 @@ -!function(){"use strict";var t=angular.module("chartjs",[]),a={line:"Line",bar:"Bar",radar:"Radar",polar:"PolarArea",pie:"Pie",doughnut:"Doughnut"},n=function(a){var n=a.charAt(0).toUpperCase()+a.slice(1);t.directive("cjs"+n,["ChartFactory",function(t){return new t(a)}])};for(var e in a)n(e);t.factory("ChartFactory",function(){return function(t){t=a[t];var n=function(t,a){var n,e,r={};for(n in t)e=a[n],"undefined"!=typeof e&&(r[n]=e);return r};if("undefined"!=typeof t)return{restrict:"EAC",template:"",replace:!0,scope:{dataset:"=",options:"="},link:function(a,e,r){var o=e[0].getContext("2d"),i=new Chart(o),u={};angular.extend(u,Chart.defaults.global,Chart.defaults[t]),angular.extend(u,a.options,n(u,r)),i=i[t](a.dataset,u),a.$watch("dataset",function(t){i.initialize(t)},!0),a.$watch("options",function(){angular.extend(i.options,a.options)},!0)}}}})}(); \ No newline at end of file +!function(){"use strict";var e=angular.module("chartjs",[]),n={line:"Line",bar:"Bar",radar:"Radar",polar:"PolarArea",pie:"Pie",doughnut:"Doughnut"},t=function(n){var t=n.charAt(0).toUpperCase()+n.slice(1);e.directive("cjs"+t,["ChartFactory",function(e){return new e(n)}])};for(var r in n)t(r);e.factory("ChartFactory",function(){return function(e){e=n[e];var t=function(e,n){var t,r,a={};for(t in e)r=n[t],"undefined"!=typeof r&&(a[t]=r);return a};if("undefined"!=typeof e)return{restrict:"EAC",template:'
',replace:!0,require:"?legend",scope:{dataset:"=",options:"=",legend:"@"},link:function(n,r,a){var i,d;"before"===a.legend&&(r.prepend('
'),i=r[0].children[1],d=r[0].children[0]),"after"!==a.legend&&a.legend||(r.append('
'),i=r[0].children[0],d=r[0].children[1]);var c=i.getContext("2d"),o=new Chart(c),l={};angular.extend(l,Chart.defaults.global,Chart.defaults[e]),angular.extend(l,n.options,t(l,a)),o=o[e](n.dataset,l),d.innerHTML=o.generateLegend(),n.$watch("dataset",function(e){o.initialize(e),d.innerHTML=o.generateLegend()},!0),n.$watch("options",function(){angular.extend(o.options,n.options)},!0)}}}}),e.directive("legend",function(){return{controller:function(){}}})}(); \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index c7ab230..799d129 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -1,6 +1,6 @@ (function () { 'use strict'; - + var chartjs = angular.module('chartjs', []), chartTypes = { line: 'Line', @@ -44,48 +44,73 @@ return { restrict: 'EAC', - template: '
', + template: '
', replace: true, + require: '?legend', scope: { dataset: '=', - options: '=' + options: '=', + legend: '@' }, link: function postLink(scope, element, attrs) { - var ctx = element[0].children[0].getContext('2d'), + var chartEl; + var legendEl; + + if(attrs.legend === 'before') { + element.prepend('
'); + chartEl = element[0].children[1]; + legendEl = element[0].children[0]; + } + + if (attrs.legend === 'after' || !attrs.legend ) { + element.append('
'); + chartEl = element[0].children[0]; + legendEl = element[0].children[1]; + } + + var ctx = chartEl.getContext('2d'), chart = new Chart(ctx), chartOpts = {}; angular.extend( - chartOpts, + chartOpts, Chart.defaults.global, Chart.defaults[chartType] ); angular.extend( - chartOpts, + chartOpts, scope.options, extractSpecOpts( chartOpts, attrs ) ); - + chart = chart[chartType](scope.dataset, chartOpts); - element[0].children[1].innerHTML = chart.generateLegend(); + legendEl.innerHTML = chart.generateLegend(); scope.$watch('dataset', function (newData, oldData) { chart.initialize(newData); + legendEl.innerHTML = chart.generateLegend(); }, true); scope.$watch('options', function (newData, oldData) { angular.extend( - chart.options, + chart.options, scope.options ); }, true); - + } }; }; }); + + chartjs.directive('legend', function() { + return { + controller: function($scope) {} + } + }); + })(); From 3e6f63e3321fe62742ca3948314c091c80d2d61a Mon Sep 17 00:00:00 2001 From: Marco Martins Date: Mon, 2 Feb 2015 18:08:21 +0000 Subject: [PATCH 2/3] updated readme and added null option for legend --- README.md | 9 +++++---- src/js/main.js | 13 +++++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index fc859b3..c494a9f 100644 --- a/README.md +++ b/README.md @@ -49,7 +49,7 @@ In the template... ```html
- +
``` +Legend is optional, the default behavior is to apear before. Available options: before, after, none. In the controller... @@ -67,8 +68,8 @@ In the controller... myapp.controller('testCtrl', function ($scope) { $scope.someData = { labels: [ - 'Apr', - 'May', + 'Apr', + 'May', 'Jun' ], datasets: [ @@ -88,7 +89,7 @@ myapp.controller('testCtrl', function ($scope) { }); ``` -This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000 and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility. +This will result in a Doughnut chart using the dataset from the controller with a StrokeColor of #000, a legend apearing before the graph and a StrokeWidth of 5 because options set on the directive attributes override controller level settings for maximum flexibility. ### Examples diff --git a/src/js/main.js b/src/js/main.js index 799d129..ced6ca8 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -68,6 +68,11 @@ legendEl = element[0].children[1]; } + if(attrs.legend === 'none') { + chartEl = element[0].children[0]; + legendEl = null; + } + var ctx = chartEl.getContext('2d'), chart = new Chart(ctx), chartOpts = {}; @@ -88,11 +93,15 @@ ); chart = chart[chartType](scope.dataset, chartOpts); - legendEl.innerHTML = chart.generateLegend(); + if(attrs.legend != 'none') { + legendEl.innerHTML = chart.generateLegend(); + } scope.$watch('dataset', function (newData, oldData) { chart.initialize(newData); - legendEl.innerHTML = chart.generateLegend(); + if(attrs.legend != 'none') { + legendEl.innerHTML = chart.generateLegend(); + } }, true); scope.$watch('options', function (newData, oldData) { From a3369048f64f4fa4ce0df7f56730c4d6cd049d6c Mon Sep 17 00:00:00 2001 From: Marco Martins Date: Mon, 2 Feb 2015 18:34:32 +0000 Subject: [PATCH 3/3] updated version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index d213d80..31eb434 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "ng-chartjs", - "version": "0.0.5", + "version": "0.0.6", "homepage": "https://github.com/petermelias/angular-chartjs", "authors": [ "Peter M. Elias "