Merge pull request #6757 from plotly/fix4729-candlestick-react

Clear empty boxes and candlestick using react
plotly · Oct 20, 2023 · 9b0b2ff · 9b0b2ff
2 parents 3dc3b09 + e7a690c
commit 9b0b2ff
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
diff --git a/src/traces/box/plot.js b/src/traces/box/plot.js
@@ -81,7 +81,7 @@ function plotBoxAndWhiskers(sel, axes, trace, t, isStatic) {
     paths.exit().remove();
 
     paths.each(function(d) {
-        if(d.empty) return 'M0,0Z';
+        if(d.empty) return d3.select(this).attr('d', 'M0,0Z');
 
         var lcenter = posAxis.c2l(d.pos + bPos, true);
 

diff --git a/test/jasmine/tests/finance_test.js b/test/jasmine/tests/finance_test.js
@@ -1047,6 +1047,48 @@ describe('finance charts updates:', function() {
         })
         .then(done, done.fail);
     });
+
+    it('should clear empty candlestick boxes using react', function(done) {
+        var type = 'candlestick';
+        var x = [0, 1];
+
+        var steps = [{
+            data: [{
+                close: [132, null],
+                high: [204, 20],
+                low: [30, 193],
+                open: [78, 79],
+                type: type,
+                x: x
+            }],
+            layout: {}
+        },
+        {
+            data: [{
+                close: [140, 78],
+                high: [91, 117],
+                low: [115, 78],
+                open: [null, 97],
+                type: type,
+                x: x
+            }],
+            layout: {}
+        }];
+
+        Plotly.newPlot(gd, steps[0])
+        .then(function() {
+            return Plotly.react(gd, steps[1]);
+        }).then(function() {
+            expect(
+                d3Select('g.cartesianlayer')
+                .selectAll('g.trace.boxes')
+                .selectAll('path')
+                .node()
+                .getAttribute('d')
+            ).toEqual('M0,0Z');
+        })
+        .then(done, done.fail);
+    });
 });
 
 describe('finance charts *special* handlers:', function() {