@carbon/charts-vue 0.41.31 → 0.41.32

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.41.31](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.30...v0.41.31) (2021-02-05)
+## [0.41.32](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.31...v0.41.32) (2021-02-12)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
@@ -11,13 +11,13 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
-## [0.41.30](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.29...v0.41.30) (2021-02-01)
+## [0.41.31](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.30...v0.41.31) (2021-02-05)
 
 **Note:** Version bump only for package @carbon/charts-vue
 
+## [0.41.30](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.29...v0.41.30) (2021-02-01)
 
-
-
+**Note:** Version bump only for package @carbon/charts-vue
 
 ## [0.41.29](https://github.com/carbon-design-system/carbon-charts/compare/v0.41.28...v0.41.29) (2021-01-29)
 

package/charts-vue.common.js

@@ -25765,8 +25765,9 @@ var gauge_Gauge = /** @class */ (function (_super) {
         }
         // Add the numbers at the center
         var numbersGroup = dom_utils_DOMUtils.appendOrSelect(svg, 'g.gauge-numbers').attr('transform', "translate(0, " + numbersYPosition + ")");
+        var fontSize = valueFontSize(radius);
         // Add the big number
-        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number').attr('transform', 'translate(-10, 0)'); // Optical centering for the presence of the smaller % symbol
+        var valueNumberGroup = dom_utils_DOMUtils.appendOrSelect(numbersGroup, 'g.gauge-value-number');
         var numberFormatter = tools_Tools.getProperty(options, 'gauge', 'numberFormatter');
         var valueNumber = valueNumberGroup
             .selectAll('text.gauge-value-number')
@@ -25776,15 +25777,22 @@ var gauge_Gauge = /** @class */ (function (_super) {
             .append('text')
             .attr('class', 'gauge-value-number')
             .merge(valueNumber)
-            .style('font-size', valueFontSize(radius) + "px")
+            .style('font-size', fontSize + "px")
             .attr('text-anchor', 'middle')
             .text(function (d) { return numberFormatter(d); });
         // add the percentage symbol beside the valueNumber
         var valueNumberWidth = dom_utils_DOMUtils.getSVGElementSize(dom_utils_DOMUtils.appendOrSelect(svg, 'text.gauge-value-number'), { useBBox: true }).width;
-        dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
-            .style('font-size', valueFontSize(radius) / 2 + "px")
+        var symbolFontSize = fontSize / 2;
+        var symbol = dom_utils_DOMUtils.appendOrSelect(valueNumberGroup, 'text.gauge-value-symbol')
+            .style('font-size', symbolFontSize + "px")
             .attr('x', valueNumberWidth / 2)
             .text('%');
+        var _a = dom_utils_DOMUtils.getSVGElementSize(symbol, { useBBox: true }), symbolWidth = _a.width, symbolHeight = _a.height;
+        // adjust the symbol to superscript using the bbox instead of the font-size cause
+        // we want to align the actual character to the value number
+        symbol.attr('y', "-" + symbolHeight / 2 + "px");
+        // move the value group depending on the symbol's drawn size
+        valueNumberGroup.attr('transform', "translate(-" + symbolWidth / 2 + ", 0)"); // Optical centering for the presence of the smaller % symbol
     };
     /**
      * adds the delta number for the gauge