BarGauge: Fix when font|opacity option is applied to BarGauge labels …

…(T1238556) (DevExpress#27625)
tongsonbarbs · Jun 24, 2024 · a0c0b28 · a0c0b28
1 parent 5f7a547
commit a0c0b28
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 7 deletions.
diff --git a/packages/devextreme/js/viz/gauges/bar_gauge.js b/packages/devextreme/js/viz/gauges/bar_gauge.js
@@ -118,29 +118,27 @@ export const dxBarGauge = BaseGauge.inherit({
     _renderContent: function() {
         const that = this;
         let labelOptions = that.option('label');
-        let text;
-        let bBox;
         const context = that._context;
 
         that._barsGroup.linkAppend();
         context.textEnabled = labelOptions === undefined || (labelOptions && (!('visible' in labelOptions) || labelOptions.visible));
 
         if(context.textEnabled) {
-            context.textColor = (labelOptions && labelOptions.font && labelOptions.font.color) || null;
+            context.fontStyles = _patchFontOptions(_extend({}, that._themeManager.theme().label.font, labelOptions?.font, { color: labelOptions?.font?.color || null }));
+
             labelOptions = _extend(true, {}, that._themeManager.theme().label, labelOptions);
             context.formatOptions = {
                 format: labelOptions.format !== undefined ? labelOptions.format : that._defaultFormatOptions,
                 customizeText: labelOptions.customizeText
             };
             context.textOptions = { align: 'center' };
-            context.fontStyles = _patchFontOptions(_extend({}, that._themeManager.theme().label.font, labelOptions.font, { color: null }));
 
             that._textIndent = labelOptions.indent > 0 ? _Number(labelOptions.indent) : 0;
             context.lineWidth = labelOptions.connectorWidth > 0 ? _Number(labelOptions.connectorWidth) : 0;
             context.lineColor = labelOptions.connectorColor || null;
 
-            text = that._renderer.text(_getSampleText(that._translator, context.formatOptions), 0, 0).attr(context.textOptions).css(context.fontStyles).append(that._barsGroup);
-            bBox = text.getBBox();
+            const text = that._renderer.text(_getSampleText(that._translator, context.formatOptions), 0, 0).attr(context.textOptions).css(context.fontStyles).append(that._barsGroup);
+            const bBox = text.getBBox();
             text.remove();
 
             context.textY = bBox.y;
@@ -611,7 +609,7 @@ _extend(BarWrapper.prototype, {
         that._tracker.attr(that._settings);
         if(context.textEnabled) {
             that._line.attr({ points: [context.x, context.y - that._settings.innerRadius, context.x, context.y - context.textRadius - context.textIndent], stroke: context.lineColor || that._color }).sharp();
-            that._text.css({ fill: context.textColor || that._color });
+            that._text.css({ fill: context.fontStyles.fill || that._color });
         }
         return that;
     },

diff --git a/packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge.tests.js b/packages/devextreme/testing/tests/DevExpress.viz.gauges/barGauge.tests.js
@@ -1072,6 +1072,38 @@ QUnit.test('Font color', function(assert) {
     this.checkColors(assert, '#e0e0e0', ['#5f8b95', '#ba4d51', '#af8a53'], null, 'blue');
 });
 
+[0, .5, 1].forEach(opacity => {
+    QUnit.test('Font opacity should be set correctly at initialization (T1238556)', function(assert) {
+        this.$container.dxBarGauge({
+            values: [10, 20, 30],
+            palette: 'office',
+            label: {
+                font: {
+                    color: 'blue',
+                    opacity: opacity
+                }
+            }
+        });
+        this.checkColors(assert, '#e0e0e0', ['#5f8b95', '#ba4d51', '#af8a53'], null, `rgba(0,0,255,${opacity})`);
+    });
+
+    QUnit.test('Font opacity should be set correctly at runtime change (T1238556)', function(assert) {
+        this.$container.dxBarGauge({
+            values: [10, 20, 30],
+            palette: 'office',
+            label: {
+                font: {
+                    color: 'blue',
+                }
+            }
+        });
+
+        this.$container.dxBarGauge('instance').option('label.font.opacity', opacity);
+
+        this.checkColors(assert, '#e0e0e0', ['#5f8b95', '#ba4d51', '#af8a53'], null, `rgba(0,0,255,${opacity})`);
+    });
+});
+
 QUnit.module('Animation', $.extend({}, environment, {
     check: function(assert, angle) {
         assert.strictEqual(this.getBarsGroup().children[1]._stored_settings.startAngle, angle, 'bar position');