fix(settings-charts): Make donut chart title spacing consistent acros…

…s browsers fix #1168
patternfly · Jun 13, 2019 · fe9e7c4 · fe9e7c4
1 parent a1c2e5f
commit fe9e7c4
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/src/js/patternfly-settings-charts.js b/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) {

diff --git a/tests/pages/_includes/widgets/cards/utilization-trend-multiple-metrics.html b/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}}';

diff --git a/tests/pages/_includes/widgets/cards/utilization-trend-single-metric.html b/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}}';