add delta.prefix and delta.suffix in Indicator trace

draftlogs/6246_add.md

@@ -0,0 +1 @@
+ - Add `delta.prefix` and `delta.suffix` to Indicator trace [[#6246](https://github.com/plotly/plotly.js/pull/6246)]

src/traces/indicator/attributes.js

@@ -248,6 +248,22 @@ module.exports = {
                 'Set the font used to display the delta'
             ].join(' ')
         }),
+        prefix: {
+            valType: 'string',
+            dflt: '',
+            editType: 'plot',
+            description: [
+                'Sets a prefix appearing before the delta.'
+            ].join(' ')
+        },
+        suffix: {
+            valType: 'string',
+            dflt: '',
+            editType: 'plot',
+            description: [
+                'Sets a suffix appearing next to the delta.'
+            ].join(' ')
+        },
         editType: 'calc'
     },
     gauge: {

src/traces/indicator/defaults.js

@@ -63,6 +63,8 @@ function supplyDefaults(traceIn, traceOut, defaultColor, layout) {
         coerce('delta.decreasing.symbol');
         coerce('delta.decreasing.color');
         coerce('delta.position');
+        coerce('delta.prefix');
+        coerce('delta.suffix');
         deltaFontSize = traceOut.delta.font.size;
     }
     traceOut._scaleNumbers = (!traceOut._hasNumber || auto[0]) && (!traceOut._hasDelta || auto[1]) || false;

src/traces/indicator/plot.js

@@ -571,15 +571,15 @@ function drawNumbers(gd, plotGroup, cd, opts) {
         bignumberAx.setScale();
         Axes.prepTicks(bignumberAx);
 
-        var fmt = function(v) { return Axes.tickText(bignumberAx, v).text;};
+        var bignumberFmt = function(v) { return Axes.tickText(bignumberAx, v).text;};
         var bignumberSuffix = trace.number.suffix;
         var bignumberPrefix = trace.number.prefix;
 
         var number = numbers.select('text.number');
 
         function writeNumber() {
             var txt = typeof cd[0].y === 'number' ?
-                bignumberPrefix + fmt(cd[0].y) + bignumberSuffix :
+                bignumberPrefix + bignumberFmt(cd[0].y) + bignumberSuffix :
                 '-';
             number.text(txt)
                 .call(Drawing.font, trace.number.font)
@@ -598,7 +598,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
                     var interpolator = interpolateNumber(cd[0].lastY, cd[0].y);
                     trace._lastValue = cd[0].y;
 
-                    var transitionFmt = transitionFormat(trace.number.valueformat, fmt, cd[0].lastY, cd[0].y);
+                    var transitionFmt = transitionFormat(trace.number.valueformat, bignumberFmt, cd[0].lastY, cd[0].y);
                     return function(t) {
                         that.text(bignumberPrefix + transitionFmt(interpolator(t)) + bignumberSuffix);
                     };
@@ -607,7 +607,7 @@ function drawNumbers(gd, plotGroup, cd, opts) {
             writeNumber();
         }
 
-        bignumberbBox = measureText(bignumberPrefix + fmt(cd[0].y) + bignumberSuffix, trace.number.font, numbersAnchor, gd);
+        bignumberbBox = measureText(bignumberPrefix + bignumberFmt(cd[0].y) + bignumberSuffix, trace.number.font, numbersAnchor, gd);
         return number;
     }
 
@@ -617,13 +617,16 @@ function drawNumbers(gd, plotGroup, cd, opts) {
         Axes.prepTicks(deltaAx);
 
         var deltaFmt = function(v) { return Axes.tickText(deltaAx, v).text;};
+        var deltaSuffix = trace.delta.suffix;
+        var deltaPrefix = trace.delta.prefix;
+
         var deltaValue = function(d) {
             var value = trace.delta.relative ? d.relativeDelta : d.delta;
             return value;
         };
         var deltaFormatText = function(value, numberFmt) {
             if(value === 0 || typeof value !== 'number' || isNaN(value)) return '-';
-            return (value > 0 ? trace.delta.increasing.symbol : trace.delta.decreasing.symbol) + numberFmt(value);
+            return (value > 0 ? trace.delta.increasing.symbol : trace.delta.decreasing.symbol) + deltaPrefix + numberFmt(value) + deltaSuffix;
         };
         var deltaFill = function(d) {
             return d.delta >= 0 ? trace.delta.increasing.color : trace.delta.decreasing.color;

test/image/mocks/indicator_scatter.json

@@ -8,17 +8,10 @@
     "type": "indicator",
     "mode": "number+delta",
     "delta": {"reference": 512, "valueformat": ".0f"},
-    "ticker": {
-      "showticker": true
-    },
-    "vmax": 500,
     "value": 492
   }, {
     "name": "Users online",
-    "y": [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492],
-    "marker": {
-      "color": "rgba(255, 255, 255, 0.5)"
-    }
+    "y": [325, 324, 405, 400, 424, 404, 417, 432, 419, 394, 410, 426, 413, 419, 404, 408, 401, 377, 368, 361, 356, 359, 375, 397, 394, 418, 437, 450, 430, 442, 424, 443, 420, 418, 423, 423, 426, 440, 437, 436, 447, 460, 478, 472, 450, 456, 436, 418, 429, 412, 429, 442, 464, 447, 434, 457, 474, 480, 499, 497, 480, 502, 512, 492]
   }],
   "layout": {
     "width": 400,