Shapes are misplaced when using numbers as categoryarray values

If X axis type is category, and categoryarray contains (string type) numbers, then shapes are horizontally misplaced, as x0 and x1 values in the shape are not considered as items, but as indices of the categoryarray.

Eg.

This one works perfectly:

<div id="tester"></div>
<script>
    var layout = {
      "xaxis": {
        "type": "category",
        "categoryarray": [
          "red", "green", "blue", "purple", "cyan", "yellow", "magenta"
        ],
      },
      "shapes": [
        {
          "type": "rect",
          "xref": "x",
          "yref": "y",
          "x0": "purple",
          "x1": "yellow",
          "y0": 10,
          "y1": 20,
          "fillcolor": "rgba(45,180,135,0.3)",
        }
      ]
    };

    var data = [
      {
        "x": [ "red", "blue", "cyan", "magenta" ],
        "y": [ 10, 20, 30, 40],
      },
    ];
    
    TESTER = document.getElementById('tester');
    Plotly.newPlot( TESTER, data, layout );
</script>

But if I replace the color names to numbers:

  // in "categoryarray":
      "10", "20", "30", "40", "50", "60", "70"
...
  // in "shapes" this won't work:
      "x0": "40",
      "x1": "60",
...
 // in data:
    "x": [ "10", "30", "50", "70" ],

It will work only if I replace the category values to their indices in the shapes:

      "x0": 3,
      "x1": 5,

Note: if this is not intended to be a bug, but an undocumented feature, please document it, so I can rely on it later. 😃

issue 内の inline JavaScript による再現から始め、カラーラベルと数値文字列ラベルについて、カテゴリ軸と shape の挙動を比較してください。位置がずれた shape を再現し、数値のカテゴリ値を使用する shape の座標が、単にインデックスに対応するのではなく、対応するカテゴリに合っていることを確認してください。