fix(settings-charts): Make donut chart title spacing consistent across browsers

fix #1168

Author: ddelabru

src/js/patternfly-settings-charts.js

@@ -8,8 +8,8 @@
   patternfly.pfSetDonutChartTitle = function (selector, primary, secondary) {
     var donutChartRightTitle = window.d3.select(selector).select('text.c3-chart-arcs-title');
     donutChartRightTitle.text("");
-    donutChartRightTitle.insert('tspan').text(primary).classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-    donutChartRightTitle.insert('tspan').text(secondary).classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+    donutChartRightTitle.insert('tspan').text(primary).classed('donut-title-big-pf', true).attr('y', 0).attr('x', 0);
+    donutChartRightTitle.insert('tspan').text(secondary).classed('donut-title-small-pf', true).attr('y', 20).attr('x', 0);
   };
 
   patternfly.pfDonutTooltipContents = function (d, defaultTitleFormat, defaultValueFormat, color) {

tests/pages/_includes/widgets/cards/utilization-trend-multiple-metrics.html

@@ -46,8 +46,8 @@ <h3 class="card-pf-subtitle">CPU</h3>
           var chart1 = c3.generate(donutConfig);
           var donutChartTitle = d3.select("#{{include.id3}}").select('text.c3-chart-arcs-title');
           donutChartTitle.text("");
-          donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-          donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+          donutChartTitle.insert('tspan').text("950").classed('donut-title-big-pf', true).attr('y', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("MHz Used").classed('donut-title-small-pf', true).attr('y', 20).attr('x', 0);
 
           var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
           sparklineConfig.bindto = '#{{include.id4}}';
@@ -99,8 +99,8 @@ <h3 class="card-pf-subtitle">Memory</h3>
           var chart3 = c3.generate(donutConfig);
           var donutChartTitle = d3.select("#{{include.id5}}").select('text.c3-chart-arcs-title');
           donutChartTitle.text("");
-          donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-          donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+          donutChartTitle.insert('tspan').text("176").classed('donut-title-big-pf', true).attr('y', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("GB Used").classed('donut-title-small-pf', true).attr('y', 20).attr('x', 0);
 
           var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
           sparklineConfig.bindto = '#{{include.id6}}';
@@ -152,8 +152,8 @@ <h3 class="card-pf-subtitle">Network</h3>
           var chart5 = c3.generate(donutConfig);
           var donutChartTitle = d3.select("#{{include.id7}}").select('text.c3-chart-arcs-title');
           donutChartTitle.text("");
-          donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-          donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+          donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('y', 0).attr('x', 0);
+          donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('y', 20).attr('x', 0);
 
           var sparklineConfig = $().c3ChartDefaults().getDefaultSparklineConfig();
           sparklineConfig.bindto = '#{{include.id8}}';

tests/pages/_includes/widgets/cards/utilization-trend-single-metric.html

@@ -42,8 +42,8 @@ <h2 class="card-pf-title">
       var chart1 = c3.generate(donutConfig);
       var donutChartTitle = d3.select("#{{include.id1}}").select('text.c3-chart-arcs-title');
       donutChartTitle.text("");
-      donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('dy', 0).attr('x', 0);
-      donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('dy', 20).attr('x', 0);
+      donutChartTitle.insert('tspan').text("1100").classed('donut-title-big-pf', true).attr('y', 0).attr('x', 0);
+      donutChartTitle.insert('tspan').text("Gbps Used").classed('donut-title-small-pf', true).attr('y', 20).attr('x', 0);
 
       var sparklineConfig = c3ChartDefaults.getDefaultSparklineConfig();
       sparklineConfig.bindto = '#{{include.id2}}';