Merge pull request #1349 from plotly/finance-legend-fix

Finance trace editable legend fix

Author: etpinard

src/components/legend/draw.js

@@ -384,7 +384,7 @@ function drawTexts(g, gd) {
                     var transforms = legendItem.trace.transforms,
                         direction = transforms[transforms.length - 1].direction;
 
-                    astr = direction + '.legenditem.name';
+                    astr = direction + '.name';
                 }
                 else astr = 'name';
 

test/jasmine/tests/finance_test.js

@@ -1003,3 +1003,87 @@ describe('finance charts updates:', function() {
     });
 
 });
+
+describe('finance charts *special* handlers:', function() {
+
+    afterEach(destroyGraphDiv);
+
+    it('`editable: true` handlers should work', function(done) {
+
+        var gd = createGraphDiv();
+
+        function editText(itemNumber, newText) {
+            var textNode = d3.selectAll('text.legendtext')
+                .filter(function(_, i) { return i === itemNumber; }).node();
+            textNode.dispatchEvent(new window.MouseEvent('click'));
+
+            var editNode = d3.select('.plugin-editable.editable').node();
+            editNode.dispatchEvent(new window.FocusEvent('focus'));
+
+            editNode.textContent = newText;
+            editNode.dispatchEvent(new window.FocusEvent('focus'));
+            editNode.dispatchEvent(new window.FocusEvent('blur'));
+        }
+
+        // makeEditable in svg_text_utils clears the edit <div> in
+        // a 0-second transition, so push the resolve call at the back
+        // of the rendering queue to make sure the edit <div> is properly
+        // cleared after each mocked text edits.
+        function delayedResolve(resolve) {
+            setTimeout(function() { return resolve(gd); }, 0);
+        }
+
+        Plotly.plot(gd, [
+            Lib.extendDeep({}, mock0, { type: 'ohlc' }),
+            Lib.extendDeep({}, mock0, { type: 'candlestick' })
+        ], {}, {
+            editable: true
+        })
+        .then(function(gd) {
+            return new Promise(function(resolve) {
+                gd.once('plotly_restyle', function(eventData) {
+                    expect(eventData[0]['increasing.name']).toEqual('0');
+                    expect(eventData[1]).toEqual([0]);
+                    delayedResolve(resolve);
+                });
+
+                editText(0, '0');
+            });
+        })
+        .then(function(gd) {
+            return new Promise(function(resolve) {
+                gd.once('plotly_restyle', function(eventData) {
+                    expect(eventData[0]['decreasing.name']).toEqual('1');
+                    expect(eventData[1]).toEqual([0]);
+                    delayedResolve(resolve);
+                });
+
+                editText(1, '1');
+            });
+        })
+        .then(function(gd) {
+            return new Promise(function(resolve) {
+                gd.once('plotly_restyle', function(eventData) {
+                    expect(eventData[0]['decreasing.name']).toEqual('2');
+                    expect(eventData[1]).toEqual([1]);
+                    delayedResolve(resolve);
+                });
+
+                editText(3, '2');
+            });
+        })
+        .then(function(gd) {
+            return new Promise(function(resolve) {
+                gd.once('plotly_restyle', function(eventData) {
+                    expect(eventData[0]['increasing.name']).toEqual('3');
+                    expect(eventData[1]).toEqual([1]);
+                    delayedResolve(resolve);
+                });
+
+                editText(2, '3');
+            });
+        })
+        .then(done);
+    });
+
+});