Add a config option to legends to allow HTML in them.

amyboyd · Jun 15, 2014 · 96b0c22 · 96b0c22
1 parent 45807cc
commit 96b0c22
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 22 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -14,3 +14,6 @@ insert_final_newline = true
 
 [*.html]
 indent_style = tab
+
+[examples/main.controller.js]
+indent_style = tab
diff --git a/examples/main.controller.js b/examples/main.controller.js
@@ -1,10 +1,9 @@
-
 angular.module('example', ['angularCharts']);
 
 function MainController($scope, $timeout) {
 	$timeout(function() {
 		$scope.data1 = {
-			series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
+			series: ['Sales', 'Income', '<i>Expense</i>', 'Laptops', 'Keyboards'],
 			data : [{
 				x : "Sales",
 				y: [100,500, 0],
@@ -25,33 +24,28 @@ function MainController($scope, $timeout) {
 		};
 	}, 100);
 
-
 	$scope.data2 = {
-		series: ['Sales', 'Income', 'Expense', 'Laptops', 'Keyboards'],
+		series: ['<em>500</em> Keyboards', '<em>105</em> Laptops', '<em>100</em> TVs'],
 		data : [{
 			x : "Sales",
-			y: [100,500, 0],
+			y: [100, 500, 0],
 			tooltip:"this is tooltip"
 		},
 		{
-			x : "Not Sales",
+			x : "Income",
 			y: [300, 100, 100]
 		},
 		{
-			x : "Tax",
-			y: [351]
-		},
-		{
-			x : "Not Tax",
-			y: [54, 0, 879]
+			x : "Expense",
+			y: [351, 50, 25]
 		}]
 	}
 
 	$scope.chartType = 'bar';
 
 	$scope.config1 = {
 		labels: false,
-		title : "Not Products",
+		title : "Products",
 		legend : {
 			display:true,
 			position:'left'
@@ -61,9 +55,10 @@ function MainController($scope, $timeout) {
 
 	$scope.config2 = {
 		labels: false,
-		title : "Products",
+		title : "HTML-enabled legend",
 		legend : {
 			display:true,
+			htmlEnabled: true,
 			position:'right'
 		},
 		lineLegend: 'traditional'

diff --git a/src/angular-charts.js b/src/angular-charts.js
@@ -8,7 +8,7 @@ angular.module('angularCharts', ['angularChartsTemplates']);
 /**
 * Main directive handling drawing of all charts
 */
-angular.module('angularCharts').directive('acChart', function($templateCache, $compile, $rootElement, $window, $timeout) {
+angular.module('angularCharts').directive('acChart', function($templateCache, $compile, $rootElement, $window, $timeout, $sce) {
   /**
    * Initialize some constants
    * @type Array
@@ -73,9 +73,9 @@ angular.module('angularCharts').directive('acChart', function($templateCache, $c
       mouseout: function() {},
       click: function() {},
       legend: {
-        display: true,
-        //could be 'left, right'
-        position: 'left'
+        display: true, // can be either 'left' or 'right'.
+        position: 'left',
+        htmlEnabled: false
       },
       colors: ['steelBlue', 'rgb(255,153,0)', 'rgb(220,57,18)', 'rgb(70,132,238)', 'rgb(73,66,204)', 'rgb(0,128,0)'],
       innerRadius: 0, // Only on pie Charts
@@ -910,17 +910,36 @@ angular.module('angularCharts').directive('acChart', function($templateCache, $c
       scope.legends = [];
       if(chartType == 'pie') {
         angular.forEach(points, function(value, key){
-          scope.legends.push({color : config.colors[key], title: value.x});
+          scope.legends.push({color : config.colors[key], title: getBindableTextForLegend(value.x)});
         });
       }
       if(chartType == 'bar' || chartType == 'area' || chartType == 'point' ||
         (chartType == 'line' && config.lineLegend === 'traditional')) {
         angular.forEach(series, function(value, key){
-          scope.legends.push({color : config.colors[key], title: value});
+          scope.legends.push({color : config.colors[key], title: getBindableTextForLegend(value)});
         });
       }
     }
 
+    var HTML_ENTITY_MAP = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': '&quot;',
+      "'": '&#39;',
+      "/": '&#x2F;'
+    };
+
+    function escapeHtml(string) {
+      return String(string).replace(/[&<>"'\/]/g, function (char) {
+        return HTML_ENTITY_MAP[char];
+      });
+    }
+
+    function getBindableTextForLegend(text) {
+      return $sce.trustAsHtml(config.legend.htmlEnabled ? text : escapeHtml(text));
+    }
+
     /**
      * Checks if index is available in color
      * else returns a random color

diff --git a/src/templates/left.html b/src/templates/left.html
@@ -4,7 +4,7 @@
 		<table>
 		<tr ng-repeat="l in legends">
 			<td><div ng-attr-style='background:{{l.color}}; height:15px;width:15px;'></div></td>
-			<td ng-bind='l.title'></td>
+			<td ng-bind-html='l.title'></td>
 		</tr>
 		</table>
 	</div>

diff --git a/src/templates/right.html b/src/templates/right.html
@@ -6,7 +6,7 @@
 		<table>
 		<tr ng-repeat="l in legends | limitTo:yMaxData">
 			<td><div ng-attr-style='background:{{l.color}}; height:15px;width:15px;'></div></td>
-			<td ng-bind='l.title'></td>
+			<td ng-bind-html='l.title'></td>
 		</tr>
 		</table>
 	</div>

diff --git a/test/angular-charts.js b/test/angular-charts.js
@@ -105,6 +105,26 @@ describe('angularCharts', function() {
 
   })
 
+  describe('legends', function() {
+
+    it('should escape HTML in the legend if HTML legends are disabled', function() {
+      $scope.config.legend.htmlEnabled = false;
+      $scope.data.series[0] = '<b>hello</b>';
+      compileChart()
+      $scope.$digest()
+      expect($chart.querySelector('.ac-legend tbody').innerHTML).toContain('&lt;b&gt;hello&lt;/b&gt;');
+    })
+
+    it('should preserve HTML in the legend if HTML legends are enabled', function() {
+      $scope.config.legend.htmlEnabled = true;
+      $scope.data.series[0] = '<b>hello</b>';
+      compileChart()
+      $scope.$digest()
+      expect($chart.querySelector('.ac-legend tbody').innerHTML).toContain('<b>hello</b>');
+    })
+
+  })
+
   describe('bars', function() {
 
     it('should have the same amount of graphic items as there are datas', function() {