Merge pull request #135 from spadgett/ie-donut-title-fix

Don't use innerHTML on SVG elements when setting donut title

Author: dtaylor113

dist/angular-patternfly.js

@@ -700,7 +700,7 @@ angular.module('patternfly.card').directive('pfCard', function () {
  * <li>.units          - unit label for values, ex: 'MHz','GB', etc..
  * <li>.thresholds     - warning and error percentage thresholds used to determine the Usage Percentage fill color (optional)
  * <li>.tooltipFn(d)   - user defined function to customize the tool tip (optional)
- * <li>.centerLabelFn  - user defined function to customize the center label (optional)
+ * <li>.centerLabelFn  - user defined function to customize the text of the center label (optional)
  * <li>.onClickFn(d,i) - user defined function to handle when donut arc is clicked upon.
  * </ul>
  *
@@ -892,8 +892,7 @@ angular.module('patternfly.card').directive('pfCard', function () {
                   '</span>';
            },
          'centerLabelFn': function () {
-           return '<tspan dy="0" x="0" class="donut-title-big-pf">' + $scope.custData.available + '</tspan>' +
-                    '<tspan dy="20" x="0" class="donut-title-small-pf">Free</tspan>';
+           return $scope.custData.available + " GB";
            },
          'onClickFn': function (d, i) {
            alert("You Clicked On The Donut!");
@@ -1042,23 +1041,20 @@ angular.module('patternfly.charts').directive('pfDonutPctChart', ["c3ChartDefaul
         $timeout(function () {
           var donutChartTitle, centerLabelText;
 
-          donutChartTitle = element[0].querySelector('text.c3-chart-arcs-title');
+          donutChartTitle = d3.select(element[0]).select('text.c3-chart-arcs-title');
           if (!donutChartTitle) {
             return;
           }
 
           centerLabelText = scope.getCenterLabelText();
 
+          // Remove any existing title.
+          donutChartTitle.selectAll('*').remove();
           if (centerLabelText.bigText && !centerLabelText.smText) {
-            donutChartTitle.innerHTML = centerLabelText.bigText;
+            donutChartTitle.text(centerLabelText.bigText);
           } else {
-            donutChartTitle.innerHTML =
-              '<tspan dy="0" x="0" class="donut-title-big-pf">' +
-              centerLabelText.bigText +
-              '</tspan>' +
-              '<tspan dy="20" x="0" class="donut-title-small-pf">' +
-              centerLabelText.smText +
-              '</tspan>';
+            donutChartTitle.insert('tspan').text(centerLabelText.bigText).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
+            donutChartTitle.insert('tspan').text(centerLabelText.smText).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
           }
         }, 300);
       };