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

[spadgett]

Fixes an issue on IE where the donut title is not set. innerHTML cannot be used reliably on SVG elements.

/cc @jwforres

[jeff-phillips-18]

Running the ng-docs viewer (grunt ngdocs:view) shows that this does not work when customizing the center label HTML using the config.centerLabelFn attribute.

[spadgett]

@jeff-phillips-18 Thanks, I wasn't sure how to test locally.

Any recommendation to fix? Not all browsers let you set HTML on an SVG element, so I'm not sure a custom label function that returns markup will work cross browser. I believe it's a problem on both IE and iOS.

[spadgett]

Screenshot of issue on IE:

Not fixed by this pull request, but there is also a problem with the utilization bar chart:

[dtaylor113]

Created #136 to track the Utilization Bar Chart issue

[waldenraines]

Thoughts on having all of this in the html and then conditionally showing it via an ng-if or ng-show? To me, that would be more readable than html in JS.

[jeff-phillips-18]

The donutChartTitle html is in D3/C3

[dtaylor113]

Hi, what we'd like to do is approve this change in order to get the donut chart working in IE and Safari. Next, we'll file another issue about allowing one to specify HTML in the center label.

For now, in order to get this fix in, we should update the ngdoc and specify that, at the moment, only text is supported for the centerLabelFn.

So, could you please:

1. update donut chart's ngdoc example

   centerLabelFn - user defined function to customize the center label (optional)
   ..to...
   centerLabelFn - user defined function to customize the text of the center label (optional)

2. update the script.js of the donut chart ngdoc from:
   $scope.custConfig = {

    '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>';
        },
   

   ...to...
   'centerLabelFn': function () {
   return $scope.custData.available + " GB";
   },

[spadgett]

@dtaylor113 Thanks, I've made the suggested changes.

[dtaylor113]

Hi, this needs to be rebased.
Thanks,

• Dave

[spadgett]

@dtaylor113 Rebased.

[spadgett]

@erundle @rhamilto We were using angular-patternfly 2.3.1 for the hot fix.

[dtaylor113]

angular-patternfly v2.5.0 should be released tomorrow which will have this fix; will you be able to update to it?

[erundle]

@dtaylor113 they need a patch release. I have already created a 2.3.x branch for them.