hover labe test OK - todo candlestick y axis multicategory

Author: richardnm-2

devtools/test_dashboard/index.html

@@ -24,7 +24,7 @@
     <section id="mocks-list"></section>
     <div id="plots">
       <div id="graph">
-        <div id="tester" style="width: 600px; height: 250px"></div>
+        <div id="tester" style="width: 600px; height: 450px"></div>
       </div>
     </div>
     <div id="snapshot"></div>
@@ -173,7 +173,69 @@
         },
       ];
 
-      Plotly.newPlot("tester", data);
+      // Plotly.newPlot("tester", data);
+    </script>
+    <script>
+      let data2 = [
+        {
+          name: "ohlc",
+          type: "ohlc",
+          open: [10, 11, 12, 13, 12, 13, 14, 15, 16],
+          high: [15, 16, 17, 18, 17, 18, 19, 20, 21],
+          low: [7, 8, 9, 10, 9, 10, 11, 12, 13],
+          close: [9, 10, 12, 13, 13, 12, 14, 14, 17],
+          x: [
+            [
+              "Group 1",
+              "Group 1",
+              "Group 1",
+              "Group 2",
+              "Group 2",
+              "Group 2",
+              "Group 3",
+              "Group 3",
+              "Group 3",
+            ],
+            ["a", "b", "c", "a", "b", "c", "a", "b", "c"],
+          ],
+        },
+        {
+          name: "candlestick",
+          type: "candlestick",
+          open: [20, 21, 22, 23, 22, 23, 24, 25, 26],
+          high: [25, 26, 27, 28, 27, 28, 29, 30, 31],
+          low: [17, 18, 19, 20, 19, 20, 21, 22, 23],
+          close: [19, 20, 22, 23, 23, 22, 24, 24, 27],
+          x: [
+            [
+              "Group 1",
+              "Group 1",
+              "Group 1",
+              "Group 2",
+              "Group 2",
+              "Group 2",
+              "Group 3",
+              "Group 3",
+              "Group 3",
+            ],
+            ["a", "b", "c", "a", "b", "c", "a", "b", "c"],
+          ],
+        },
+      ];
+      let layout = {
+        title: {
+          text: "Finance traces on multicategory x-axis",
+          xref: "paper",
+          x: 0,
+        },
+        legend: {
+          x: 1,
+          xanchor: "right",
+          y: 1,
+          yanchor: "bottom",
+        },
+      };
+      Plotly.newPlot("tester", data2);
     </script>
   </body>
 </html>

src/plots/cartesian/axes.js

@@ -2514,6 +2514,12 @@ axes.drawOne = function(gd, ax, opts) {
     var tickNames = ['tick'];
 
     if(ax.type === 'multicategory') {
+        // TODO ax.levels is not beeing set for y axis for candlestick plot, because ax.setupMultiCategory is not called for y axis (should not be multicategory)
+        if(!ax.levels) {
+            ax.levelNr = 2;
+            ax.levels = [0, 1];
+        }
+        // debugger;
         ax.levels.slice().reverse().slice(0, ax.levelNr - 1).forEach(function(_lvl) {
             var pad = {x: 0 * _lvl, y: 10}[axLetter];
 
@@ -2772,7 +2778,8 @@ function getDividerVals(ax, vals) {
         }
     };
 
-    if(ax.showdividers && vals.length) {
+    // debugger
+    if(ax.showdividers && vals.length && ax.levels) {
         ax.levels.forEach(function(_lvl) {
             current = undefined;
             for(i = 0; i < vals.length; i++) {

src/plots/cartesian/set_convert.js

@@ -395,10 +395,13 @@ module.exports = function setConvert(ax, fullLayout) {
                         var arrays = arrayIn.map(function(x) {
                             return x;
                         });
-
                         var valLetter;
-
-                        if(trace.z) {
+                        if(trace.type === 'ohlc' | trace.type === 'candlestick') {
+                            var t = trace;
+                            var valsTransform = sortLib.transpose([t.open, t.high, t.low, t.close]);
+                            arrays.push(valsTransform);
+                        }
+                        else if(trace.z) {
                             if(axLetter === 'x') {
                                 arrays.push(sortLib.transpose(trace.z));
                             } else {
@@ -424,19 +427,31 @@ module.exports = function setConvert(ax, fullLayout) {
                         if(valLetter === 'z' & axLetter === 'x') {
                             axVals = sortLib.transpose(axVals);
                         }
+
+                        if(trace.type === 'ohlc' | trace.type === 'candlestick') {
+                            var sortedValsTransform = sortLib.transpose(axVals);
+                            // debugger;
+                            gd._fullData[i].open = sortedValsTransform[0];
+                            gd._fullData[i].high = sortedValsTransform[1];
+                            gd._fullData[i].low = sortedValsTransform[2];
+                            gd._fullData[i].close = sortedValsTransform[3];
+                        }
                         // Could/should set sorted y axis values for each trace as the sorted values are already available.
                         // Need write access to gd._fullData, bad? Should probably be done right at newPlot, or on setting gd._fullData
                         // debugger;
+
                         var transposedAxLabels = sortLib.transpose(axLabels);
                         gd._fullData[i][axLetter] = transposedAxLabels;
-                        gd._fullData[i][valLetter] = axVals;
+                        if(valLetter) {
+                            gd._fullData[i][valLetter] = axVals;
+                        }
                     }
                 }
             }
             ax.levelNr = axLabels[0].length;
             ax.levels = axLabels[0].map(function(_, idx) {return idx;});
 
-
+            // debugger
             var fullSortedObjectList = sortLib.sortObjectList(cols, fullObjectList.slice());
             var fullList = sortLib.objectListToList(fullSortedObjectList);
             var fullSortedMatrix = sortLib.sortedMatrix(fullList);

test/jasmine/tests/hover_label_test.js

@@ -5863,6 +5863,7 @@ describe('hovermode: (x|y)unified', function() {
         var mockOhlc = require('@mocks/finance_multicategory.json');
         var mockCopy = Lib.extendDeep({}, mockOhlc);
         mockCopy.layout.hovermode = 'x unified';
+        debugger;
         Plotly.newPlot(gd, mockCopy)
             .then(function(gd) {
                 _hover(gd, {curveNumber: 0, pointNumber: 0});