From 5b5f22a592ce58f6b5f7147300a1309695c50f8f Mon Sep 17 00:00:00 2001 From: Paulo Vieira Date: Tue, 28 Jun 2022 13:56:53 +0100 Subject: [PATCH 1/4] add delta.prefix and delta.suffix in Indicator trace --- src/traces/indicator/attributes.js | 16 ++++++++++++++++ src/traces/indicator/defaults.js | 2 ++ src/traces/indicator/plot.js | 13 ++++++++----- test/image/mocks/indicator_scatter.json | 9 +-------- 4 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/traces/indicator/attributes.js b/src/traces/indicator/attributes.js index c453904e000..eee26149754 100644 --- a/src/traces/indicator/attributes.js +++ b/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: { diff --git a/src/traces/indicator/defaults.js b/src/traces/indicator/defaults.js index 3d93848af32..77457986b99 100644 --- a/src/traces/indicator/defaults.js +++ b/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; diff --git a/src/traces/indicator/plot.js b/src/traces/indicator/plot.js index 88b9d5019b1..8c1a42e5936 100644 --- a/src/traces/indicator/plot.js +++ b/src/traces/indicator/plot.js @@ -571,7 +571,7 @@ 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; @@ -579,7 +579,7 @@ function drawNumbers(gd, plotGroup, cd, opts) { 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; diff --git a/test/image/mocks/indicator_scatter.json b/test/image/mocks/indicator_scatter.json index 94635359f5b..f45cef8fb33 100644 --- a/test/image/mocks/indicator_scatter.json +++ b/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, From dcc4f7815d94ec1b109020d628b99b7dbee1ad63 Mon Sep 17 00:00:00 2001 From: Paulo Vieira Date: Tue, 28 Jun 2022 14:02:46 +0100 Subject: [PATCH 2/4] add draftlog for #6246 --- draftlogs/6246_add.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 draftlogs/6246_add.md diff --git a/draftlogs/6246_add.md b/draftlogs/6246_add.md new file mode 100644 index 00000000000..bb05f239da0 --- /dev/null +++ b/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)] From 878570f07dd7e60b49023d9ea47529c1ff1a2a81 Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> Date: Tue, 5 Jul 2022 18:28:56 -0400 Subject: [PATCH 3/4] Update test/image/mocks/indicator_scatter.json --- test/image/mocks/indicator_scatter.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/image/mocks/indicator_scatter.json b/test/image/mocks/indicator_scatter.json index f45cef8fb33..256332f19b0 100644 --- a/test/image/mocks/indicator_scatter.json +++ b/test/image/mocks/indicator_scatter.json @@ -11,7 +11,10 @@ "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] + "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)" + } }], "layout": { "width": 400, From 6f040fad0284a2407abbf9db99279c5ebe00c9ce Mon Sep 17 00:00:00 2001 From: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com> Date: Tue, 5 Jul 2022 18:31:04 -0400 Subject: [PATCH 4/4] Update draftlogs/6246_add.md --- draftlogs/6246_add.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/draftlogs/6246_add.md b/draftlogs/6246_add.md index bb05f239da0..0e98256a731 100644 --- a/draftlogs/6246_add.md +++ b/draftlogs/6246_add.md @@ -1 +1,2 @@ - - Add `delta.prefix` and `delta.suffix` to Indicator trace [[#6246](https://github.com/plotly/plotly.js/pull/6246)] + - Add `delta.prefix` and `delta.suffix` to Indicator trace [[#6246](https://github.com/plotly/plotly.js/pull/6246)], + with thanks to @paulovieira for the contribution!