Merge pull request #6481 from plotly/label-alias

Add `labelalias` to various axes

Author: archmoj

draftlogs/6481_add.md

@@ -0,0 +1 @@
+ - Add `labelalias` to various axes namely cartesian, gl3d, polar, smith, ternary, carpet, indicator and colorbar [[#6481](https://github.com/plotly/plotly.js/pull/6481)]

src/components/colorbar/attributes.js

@@ -168,6 +168,7 @@ module.exports = overrideAll({
     tickcolor: axesAttrs.tickcolor,
     ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
+    labelalias: axesAttrs.labelalias,
     tickfont: fontAttrs({
         description: 'Sets the color bar\'s tick label font'
     }),

src/components/colorbar/draw.js

@@ -931,6 +931,7 @@ function mockColorBarAxis(gd, opts, zrange) {
         tickwidth: opts.tickwidth,
         tickcolor: opts.tickcolor,
         showticklabels: opts.showticklabels,
+        labelalias: opts.labelalias,
         ticklabelposition: opts.ticklabelposition,
         ticklabeloverflow: opts.ticklabeloverflow,
         ticklabelstep: opts.ticklabelstep,

src/plots/cartesian/axes.js

@@ -1660,6 +1660,11 @@ axes.tickText = function(ax, x, hover, noSuffixPrefix) {
         if(ax.ticksuffix && !isHidden(ax.showticksuffix)) out.text += ax.ticksuffix;
     }
 
+    if(ax.labelalias && ax.labelalias.hasOwnProperty(out.text)) {
+        var t = ax.labelalias[out.text];
+        if(typeof t === 'string') out.text = t;
+    }
+
     // Setup ticks and grid lines boundaries
     // at 1/2 a 'category' to the left/bottom
     if(ax.tickson === 'boundaries' || ax.showdividers) {

src/plots/cartesian/layout_attributes.js

@@ -633,6 +633,19 @@ module.exports = {
         editType: 'ticks',
         description: 'Determines whether or not the tick labels are drawn.'
     },
+    labelalias: {
+        valType: 'any',
+        dflt: false,
+        editType: 'ticks',
+        description: [
+            'Replacement text for specific tick or hover labels.',
+            'For example using {US: \'USA\', CA: \'Canada\'} changes US to USA',
+            'and CA to Canada. The labels we would have shown must match',
+            'the keys exactly, after adding any tickprefix or ticksuffix.',
+            'labelalias can be used with any axis type, and both keys (if needed)',
+            'and values (if desired) can include html-like tags or MathJax.'
+        ].join(' ')
+    },
     automargin: {
         valType: 'flaglist',
         flags: ['height', 'width', 'left', 'right', 'top', 'bottom'],

src/plots/cartesian/tick_label_defaults.js

@@ -8,6 +8,10 @@ var handleArrayContainerDefaults = require('../array_container_defaults');
 
 module.exports = function handleTickLabelDefaults(containerIn, containerOut, coerce, axType, options) {
     if(!options) options = {};
+
+    var labelalias = coerce('labelalias');
+    if(!Lib.isPlainObject(labelalias)) delete containerOut.labelalias;
+
     var showAttrDflt = getShowAttrDflt(containerIn);
 
     var showTickLabels = coerce('showticklabels');

src/plots/gl3d/layout/axis_attributes.js

@@ -86,6 +86,7 @@ module.exports = overrideAll({
     tickwidth: axesAttrs.tickwidth,
     tickcolor: axesAttrs.tickcolor,
     showticklabels: axesAttrs.showticklabels,
+    labelalias: axesAttrs.labelalias,
     tickfont: axesAttrs.tickfont,
     tickangle: axesAttrs.tickangle,
     tickprefix: axesAttrs.tickprefix,

src/plots/polar/layout_attributes.js

@@ -35,6 +35,7 @@ var axisTickAttrs = overrideAll({
     tickcolor: axesAttrs.tickcolor,
     ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
+    labelalias: axesAttrs.labelalias,
     showtickprefix: axesAttrs.showtickprefix,
     tickprefix: axesAttrs.tickprefix,
     showticksuffix: axesAttrs.showticksuffix,

src/plots/smith/layout_attributes.js

@@ -22,6 +22,7 @@ var axisTickAttrs = overrideAll({
     tickwidth: extendFlat({}, axesAttrs.tickwidth, {dflt: 2}),
     tickcolor: axesAttrs.tickcolor,
     showticklabels: axesAttrs.showticklabels,
+    labelalias: axesAttrs.labelalias,
     showtickprefix: axesAttrs.showtickprefix,
     tickprefix: axesAttrs.tickprefix,
     showticksuffix: axesAttrs.showticksuffix,

src/plots/ternary/layout_attributes.js

@@ -27,6 +27,7 @@ var ternaryAxesAttrs = {
     tickcolor: axesAttrs.tickcolor,
     ticklabelstep: axesAttrs.ticklabelstep,
     showticklabels: axesAttrs.showticklabels,
+    labelalias: axesAttrs.labelalias,
     showtickprefix: axesAttrs.showtickprefix,
     tickprefix: axesAttrs.tickprefix,
     showticksuffix: axesAttrs.showticksuffix,

src/traces/carpet/axis_attributes.js

@@ -185,6 +185,7 @@ module.exports = {
             'the high side, both, or neither side of the axis.'
         ].join(' ')
     },
+    labelalias: extendFlat({}, axesAttrs.labelalias, {editType: 'calc'}),
     tickfont: fontAttrs({
         editType: 'calc',
         description: 'Sets the tick font.'

src/traces/indicator/attributes.js

@@ -319,6 +319,7 @@ module.exports = {
             tickcolor: axesAttrs.tickcolor,
             ticklabelstep: axesAttrs.ticklabelstep,
             showticklabels: axesAttrs.showticklabels,
+            labelalias: axesAttrs.labelalias,
             tickfont: fontAttrs({
                 description: 'Sets the color bar\'s tick label font'
             }),

test/image/baselines/carpet_grid_dash.png

@@ -37,6 +37,7 @@
         "minorgriddash": "dash"
       },
       "baxis": {
+        "labelalias": { "0": "ZERO<sup>2</sup>" },
         "minorgridcount": 3,
         "gridcolor": "black",
         "minorgridcolor": "red",

test/image/baselines/grid_subplot_types.png

@@ -13,18 +13,23 @@
       "domain": {"row": 2, "column": 0}
     },
     {"type": "scattergeo", "lon": [0, -75], "lat": [0, 45], "marker": {"size": [20, 30]}},
-    {"type": "heatmap", "z": [[1, 2], [4, 1]], "showscale": false, "xaxis": "x3", "yaxis": "y3"}
+    {"type": "heatmap", "z": [[1, 2], [4, 1]], "showscale": true, "xaxis": "x3", "yaxis": "y3", "colorbar": {
+      "yanchor": "bottom",
+      "y": 0,
+      "len": 0.3,
+      "labelalias": {"3": "2+1", "4": "2<sup>2</sup>"}
+    }}
   ],
   "layout": {
-    "xaxis": {"title": {"text": "x"}},
-    "xaxis2": {"title": {"text": "x2"}},
-    "yaxis": {"title": {"text": "y"}},
-    "yaxis2": {"title": {"text": "y2"}},
-    "xaxis3": {"title": {"text": "x3"}},
-    "yaxis3": {"title": {"text": "y3"}},
+    "xaxis": {"title": {"text": "x"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
+    "xaxis2": {"title": {"text": "x2"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
+    "yaxis": {"title": {"text": "y"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
+    "yaxis2": {"title": {"text": "y2"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
+    "xaxis3": {"title": {"text": "x3"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
+    "yaxis3": {"title": {"text": "y3"}, "labelalias": {"0": "ZERO<sup>2</sup>"}},
     "grid": {"rows": 3, "columns": 3, "xgap": 0.3, "ygap": 0.3},
-    "scene": {"domain": {"row": 1, "column": 1}},
-    "ternary": {"domain": {"row": 1, "column": 2}},
+    "scene": {"domain": {"row": 1, "column": 1}, "zaxis": {"labelalias": {"1": "", "1.5": "1+½", "2": "√4", "2.5": "5/<sub>2</sub>", "3.5": ""}}},
+    "ternary": {"domain": {"row": 1, "column": 2}, "caxis": {"labelalias": {"1": "ONE"}}},
     "geo": {"domain": {"row": 2, "column": 1}},
     "width": 700,
     "height": 700

test/image/baselines/indicator_bullet.png

@@ -14,6 +14,9 @@
     "gauge": {
       "shape": "bullet",
       "axis": {
+        "labelalias": {
+          "0": "ZERO<sup>2</sup>"
+        },
         "range": [null, 300]
       },
       "threshold": {

test/image/baselines/indicator_format_extremes.png

@@ -171,6 +171,13 @@
         {
             "type": "indicator",
             "mode": "number+delta+gauge",
+            "gauge": {
+                "axis": {
+                    "labelalias": {
+                        "1": "ONE"
+                    }
+                }
+            },
             "title": {
                 "text": "null"
             },

test/image/baselines/mathjax3___ternary-mathjax.png

@@ -33,6 +33,9 @@
         "x": [0, 0.46],
         "y": [0.56, 1]
       },
+      "angularaxis": {
+        "labelalias": { "0°": "ZERO<sup>2</sup>" }
+      },
       "radialaxis": {
         "title": {"text": "blank"},
         "angle": 180

test/image/baselines/polar_blank.png

@@ -41,6 +41,9 @@
         "x": [0, 0.46],
         "y": [0.56, 1]
       },
+      "imaginaryaxis": {
+        "labelalias": { "0": "ZERO<sup>2</sup>" }
+      },
       "realaxis": {
         "side": "top"
       }

test/image/baselines/smith_blank.png

@@ -31,6 +31,8 @@
         "title": {
           "text": "$B^2$"
         },
+        "tickprefix": "$\\sqrt",
+        "ticksuffix": "^2$",
         "showline": true,
         "showgrid": true
       },
@@ -39,7 +41,11 @@
           "text": "$C^2$"
         },
         "showline": true,
-        "showgrid": true
+        "showgrid": true,
+        "labelalias": {
+          "20": "$(\\sqrt20)^2$",
+          "60": "<i><b>Sixty<b><i>"
+        }
       }
     },
     "annotations": [