Merge pull request #1257 from plotly/array-to-calcdata-in-calc

Convert arrayOk attribute to calcdata in calc step

Author: etpinard

src/plot_api/subroutines.js

@@ -236,7 +236,7 @@ exports.doTraceStyle = function(gd) {
             _module = ((cdi[0] || {}).trace || {})._module || {},
             arraysToCalcdata = _module.arraysToCalcdata;
 
-        if(arraysToCalcdata) arraysToCalcdata(cdi);
+        if(arraysToCalcdata) arraysToCalcdata(cdi, cdi[0].trace);
     }
 
     Plots.style(gd);

src/traces/bar/arrays_to_calcdata.js

@@ -13,18 +13,18 @@ var mergeArray = require('../../lib').mergeArray;
 
 
 // arrayOk attributes, merge them into calcdata array
-module.exports = function arraysToCalcdata(cd) {
-    var trace = cd[0].trace,
-        marker = trace.marker;
-
+module.exports = function arraysToCalcdata(cd, trace) {
     mergeArray(trace.text, cd, 'tx');
 
-    if(marker && marker.line) {
-        var markerLine = marker.line;
-
+    var marker = trace.marker;
+    if(marker) {
         mergeArray(marker.opacity, cd, 'mo');
         mergeArray(marker.color, cd, 'mc');
-        mergeArray(markerLine.color, cd, 'mlc');
-        mergeArray(markerLine.width, cd, 'mlw');
+
+        var markerLine = marker.line;
+        if(markerLine) {
+            mergeArray(markerLine.color, cd, 'mlc');
+            mergeArray(markerLine.width, cd, 'mlw');
+        }
     }
 };

src/traces/bar/calc.js

@@ -15,6 +15,8 @@ var Axes = require('../../plots/cartesian/axes');
 var hasColorscale = require('../../components/colorscale/has_colorscale');
 var colorscaleCalc = require('../../components/colorscale/calc');
 
+var arraysToCalcdata = require('./arrays_to_calcdata');
+
 
 module.exports = function calc(gd, trace) {
     // depending on bar direction, set position and size axes
@@ -97,5 +99,7 @@ module.exports = function calc(gd, trace) {
         colorscaleCalc(trace, trace.marker.line.color, 'marker.line', 'c');
     }
 
+    arraysToCalcdata(cd, trace);
+
     return cd;
 };

src/traces/bar/plot.js

@@ -20,8 +20,6 @@ var Color = require('../../components/color');
 var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
-var arraysToCalcdata = require('./arrays_to_calcdata');
-
 var attributes = require('./attributes'),
     attributeText = attributes.text,
     attributeTextPosition = attributes.textposition,
@@ -53,8 +51,6 @@ module.exports = function plot(gd, plotinfo, cdbar) {
                 barwidth = t.barwidth,
                 barwidthIsArray = Array.isArray(barwidth);
 
-            arraysToCalcdata(d);
-
             d3.select(this).selectAll('g.point')
                 .data(Lib.identity)
               .enter().append('g').classed('point', true)

src/traces/scatter/arrays_to_calcdata.js

@@ -13,9 +13,7 @@ var Lib = require('../../lib');
 
 
 // arrayOk attributes, merge them into calcdata array
-module.exports = function arraysToCalcdata(cd) {
-    var trace = cd[0].trace,
-        marker = trace.marker;
+module.exports = function arraysToCalcdata(cd, trace) {
 
     Lib.mergeArray(trace.text, cd, 'tx');
     Lib.mergeArray(trace.textposition, cd, 'tp');
@@ -25,12 +23,17 @@ module.exports = function arraysToCalcdata(cd) {
         Lib.mergeArray(trace.textfont.family, cd, 'tf');
     }
 
-    if(marker && marker.line) {
-        var markerLine = marker.line;
+    var marker = trace.marker;
+    if(marker) {
+        Lib.mergeArray(marker.size, cd, 'ms');
         Lib.mergeArray(marker.opacity, cd, 'mo');
         Lib.mergeArray(marker.symbol, cd, 'mx');
         Lib.mergeArray(marker.color, cd, 'mc');
-        Lib.mergeArray(markerLine.color, cd, 'mlc');
-        Lib.mergeArray(markerLine.width, cd, 'mlw');
+
+        var markerLine = marker.line;
+        if(marker.line) {
+            Lib.mergeArray(markerLine.color, cd, 'mlc');
+            Lib.mergeArray(markerLine.width, cd, 'mlw');
+        }
     }
 };

src/traces/scatter/calc.js

@@ -12,10 +12,10 @@
 var isNumeric = require('fast-isnumeric');
 
 var Axes = require('../../plots/cartesian/axes');
-var Lib = require('../../lib');
 
 var subTypes = require('./subtypes');
 var calcColorscale = require('./colorscale_calc');
+var arraysToCalcdata = require('./arrays_to_calcdata');
 
 
 module.exports = function calc(gd, trace) {
@@ -121,8 +121,7 @@ module.exports = function calc(gd, trace) {
         }
     }
 
-    // this has migrated up from arraysToCalcdata as we have a reference to 's' here
-    if(typeof s !== 'undefined') Lib.mergeArray(s, cd, 'ms');
+    arraysToCalcdata(cd, trace);
 
     gd.firstscatter = false;
     return cd;

src/traces/scatter/plot.js

@@ -16,7 +16,6 @@ var Drawing = require('../../components/drawing');
 var ErrorBars = require('../../components/errorbars');
 
 var subTypes = require('./subtypes');
-var arraysToCalcdata = require('./arrays_to_calcdata');
 var linePoints = require('./line_points');
 var linkTraces = require('./link_traces');
 var polygonTester = require('../../lib/polygon').tester;
@@ -179,8 +178,6 @@ function plotOne(gd, idx, plotinfo, cdscatter, cdscatterAll, element, transition
     // store node for tweaking by selectPoints
     cdscatter[0].node3 = tr;
 
-    arraysToCalcdata(cdscatter);
-
     var prevRevpath = '';
     var prevPolygons = [];
     var prevtrace = trace._prevtrace;

src/traces/scatter3d/calc.js

@@ -20,7 +20,7 @@ var calcColorscales = require('../scatter/colorscale_calc');
 module.exports = function calc(gd, trace) {
     var cd = [{x: false, y: false, trace: trace, t: {}}];
 
-    arraysToCalcdata(cd);
+    arraysToCalcdata(cd, trace);
     calcColorscales(trace);
 
     return cd;

src/traces/scatterternary/calc.js

@@ -12,10 +12,10 @@
 var isNumeric = require('fast-isnumeric');
 
 var Axes = require('../../plots/cartesian/axes');
-var Lib = require('../../lib');
 
 var subTypes = require('../scatter/subtypes');
 var calcColorscale = require('../scatter/colorscale_calc');
+var arraysToCalcdata = require('../scatter/arrays_to_calcdata');
 
 var dataArrays = ['a', 'b', 'c'];
 var arraysToFill = {a: ['b', 'c'], b: ['a', 'c'], c: ['a', 'b']};
@@ -89,9 +89,7 @@ module.exports = function calc(gd, trace) {
     }
 
     calcColorscale(trace);
-
-    // this has migrated up from arraysToCalcdata as we have a reference to 's' here
-    if(typeof s !== 'undefined') Lib.mergeArray(s, cd, 'ms');
+    arraysToCalcdata(cd, trace);
 
     return cd;
 };

test/jasmine/tests/transform_filter_test.js

@@ -847,6 +847,7 @@ describe('filter transforms interactions', function() {
     var mockData0 = [{
         x: [-2, -1, -2, 0, 1, 2, 3],
         y: [1, 2, 3, 1, 2, 3, 1],
+        text: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
         transforms: [{
             type: 'filter',
             operation: '>'
@@ -856,6 +857,7 @@ describe('filter transforms interactions', function() {
     var mockData1 = [Lib.extendDeep({}, mockData0[0]), {
         x: [20, 11, 12, 0, 1, 2, 3],
         y: [1, 2, 3, 2, 5, 2, 0],
+        text: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
         transforms: [{
             type: 'filter',
             operation: '<',
@@ -988,4 +990,30 @@ describe('filter transforms interactions', function() {
             done();
         });
     });
+
+    it('zooming in/out should not change filtered data', function(done) {
+        var data = Lib.extendDeep([], mockData1);
+
+        var gd = createGraphDiv();
+
+        function getTx(p) { return p.tx; }
+
+        Plotly.plot(gd, data).then(function() {
+            expect(gd.calcdata[0].map(getTx)).toEqual(['e', 'f', 'g']);
+            expect(gd.calcdata[1].map(getTx)).toEqual(['D', 'E', 'F', 'G']);
+
+            return Plotly.relayout(gd, 'xaxis.range', [-1, 1]);
+        })
+        .then(function() {
+            expect(gd.calcdata[0].map(getTx)).toEqual(['e', 'f', 'g']);
+            expect(gd.calcdata[1].map(getTx)).toEqual(['D', 'E', 'F', 'G']);
+
+            return Plotly.relayout(gd, 'xaxis.autorange', true);
+        })
+        .then(function() {
+            expect(gd.calcdata[0].map(getTx)).toEqual(['e', 'f', 'g']);
+            expect(gd.calcdata[1].map(getTx)).toEqual(['D', 'E', 'F', 'G']);
+        })
+        .then(done);
+    });
 });