|
| 1 | +var Plotly = require('@lib/index'); |
| 2 | +var Plots = require('@src/plots/plots'); |
| 3 | +var Lib = require('@src/lib'); |
| 4 | + |
| 5 | +var d3 = require('d3'); |
| 6 | +var createGraphDiv = require('../assets/create_graph_div'); |
| 7 | +var destroyGraphDiv = require('../assets/destroy_graph_div'); |
| 8 | +var fail = require('../assets/fail_test'); |
| 9 | +var mouseEvent = require('../assets/mouse_event'); |
| 10 | + |
| 11 | +describe('Test sort transform defaults:', function() { |
| 12 | + function _supply(trace, layout) { |
| 13 | + layout = layout || {}; |
| 14 | + return Plots.supplyTraceDefaults(trace, 0, layout); |
| 15 | + } |
| 16 | + |
| 17 | + it('should coerce all attributes', function() { |
| 18 | + var out = _supply({ |
| 19 | + x: [1, 2, 3], |
| 20 | + y: [0, 2, 1], |
| 21 | + transforms: [{ |
| 22 | + type: 'sort', |
| 23 | + target: 'marker.size', |
| 24 | + order: 'descending' |
| 25 | + }] |
| 26 | + }); |
| 27 | + |
| 28 | + expect(out.transforms[0].type).toEqual('sort'); |
| 29 | + expect(out.transforms[0].target).toEqual('marker.size'); |
| 30 | + expect(out.transforms[0].order).toEqual('descending'); |
| 31 | + expect(out.transforms[0].enabled).toBe(true); |
| 32 | + }); |
| 33 | + |
| 34 | + it('should skip unsettable attribute when `enabled: false`', function() { |
| 35 | + var out = _supply({ |
| 36 | + x: [1, 2, 3], |
| 37 | + y: [0, 2, 1], |
| 38 | + transforms: [{ |
| 39 | + type: 'sort', |
| 40 | + enabled: false, |
| 41 | + target: 'marker.size', |
| 42 | + order: 'descending' |
| 43 | + }] |
| 44 | + }); |
| 45 | + |
| 46 | + expect(out.transforms[0].type).toEqual('sort'); |
| 47 | + expect(out.transforms[0].target).toBeUndefined(); |
| 48 | + expect(out.transforms[0].order).toBeUndefined(); |
| 49 | + expect(out.transforms[0].enabled).toBe(false); |
| 50 | + }); |
| 51 | +}); |
| 52 | + |
| 53 | +describe('Test sort transform calc:', function() { |
| 54 | + var base = { |
| 55 | + x: [-2, -1, -2, 0, 1, 3, 1], |
| 56 | + y: [1, 2, 3, 1, 2, 3, 1], |
| 57 | + ids: ['n0', 'n1', 'n2', 'z', 'p1', 'p2', 'p3'], |
| 58 | + marker: { |
| 59 | + color: [0.1, 0.2, 0.3, 0.1, 0.2, 0.3, 0.4], |
| 60 | + size: [10, 20, 5, 1, 6, 0, 10] |
| 61 | + }, |
| 62 | + transforms: [{ type: 'sort' }] |
| 63 | + }; |
| 64 | + |
| 65 | + function extend(update) { |
| 66 | + return Lib.extendDeep({}, base, update); |
| 67 | + } |
| 68 | + |
| 69 | + function calcDatatoTrace(calcTrace) { |
| 70 | + return calcTrace[0].trace; |
| 71 | + } |
| 72 | + |
| 73 | + function _transform(data, layout) { |
| 74 | + var gd = { |
| 75 | + data: data, |
| 76 | + layout: layout || {} |
| 77 | + }; |
| 78 | + |
| 79 | + Plots.supplyDefaults(gd); |
| 80 | + Plots.doCalcdata(gd); |
| 81 | + |
| 82 | + return gd.calcdata.map(calcDatatoTrace); |
| 83 | + } |
| 84 | + |
| 85 | + it('should sort all array attributes (ascending case)', function() { |
| 86 | + var out = _transform([extend({})]); |
| 87 | + |
| 88 | + expect(out[0].x).toEqual([-2, -2, -1, 0, 1, 1, 3]); |
| 89 | + expect(out[0].y).toEqual([1, 3, 2, 1, 2, 1, 3]); |
| 90 | + expect(out[0].ids).toEqual(['n0', 'n2', 'n1', 'z', 'p1', 'p3', 'p2']); |
| 91 | + expect(out[0].marker.color).toEqual([0.1, 0.3, 0.2, 0.1, 0.2, 0.4, 0.3]); |
| 92 | + expect(out[0].marker.size).toEqual([10, 5, 20, 1, 6, 10, 0]); |
| 93 | + }); |
| 94 | + |
| 95 | + it('should sort all array attributes (descending case)', function() { |
| 96 | + var out = _transform([extend({ |
| 97 | + transforms: [{ |
| 98 | + order: 'descending' |
| 99 | + }] |
| 100 | + })]); |
| 101 | + |
| 102 | + expect(out[0].x).toEqual([3, 1, 1, 0, -1, -2, -2]); |
| 103 | + expect(out[0].y).toEqual([3, 2, 1, 1, 2, 1, 3]); |
| 104 | + expect(out[0].ids).toEqual(['p2', 'p1', 'p3', 'z', 'n1', 'n0', 'n2']); |
| 105 | + expect(out[0].marker.color).toEqual([0.3, 0.2, 0.4, 0.1, 0.2, 0.1, 0.3]); |
| 106 | + expect(out[0].marker.size).toEqual([0, 6, 10, 1, 20, 10, 5]); |
| 107 | + }); |
| 108 | + |
| 109 | + it('should sort via nested targets', function() { |
| 110 | + var out = _transform([extend({ |
| 111 | + transforms: [{ |
| 112 | + target: 'marker.size', |
| 113 | + order: 'descending' |
| 114 | + }] |
| 115 | + })]); |
| 116 | + |
| 117 | + expect(out[0].x).toEqual([-1, -2, 1, 1, -2, 0, 3]); |
| 118 | + expect(out[0].y).toEqual([2, 1, 1, 2, 3, 1, 3]); |
| 119 | + expect(out[0].ids).toEqual(['n1', 'n0', 'p3', 'p1', 'n2', 'z', 'p2']); |
| 120 | + expect(out[0].marker.color).toEqual([0.2, 0.1, 0.4, 0.2, 0.3, 0.1, 0.3]); |
| 121 | + expect(out[0].marker.size).toEqual([20, 10, 10, 6, 5, 1, 0]); |
| 122 | + }); |
| 123 | + |
| 124 | + it('should sort via dates targets', function() { |
| 125 | + var out = _transform([{ |
| 126 | + x: ['2015-07-20', '2016-12-02', '2016-09-01', '2016-10-21', '2016-10-20'], |
| 127 | + y: [0, 1, 2, 3, 4, 5], |
| 128 | + transforms: [{ type: 'sort' }] |
| 129 | + }]); |
| 130 | + |
| 131 | + expect(out[0].x).toEqual([ |
| 132 | + '2015-07-20', '2016-09-01', '2016-10-20', '2016-10-21', '2016-12-02' |
| 133 | + ]); |
| 134 | + expect(out[0].y).toEqual([0, 2, 4, 3, 1]); |
| 135 | + }); |
| 136 | + |
| 137 | + it('should sort via custom targets', function() { |
| 138 | + var out = _transform([extend({ |
| 139 | + transforms: [{ |
| 140 | + target: [10, 20, 30, 10, 20, 30, 0] |
| 141 | + }] |
| 142 | + })]); |
| 143 | + |
| 144 | + expect(out[0].x).toEqual([1, -2, 0, -1, 1, -2, 3]); |
| 145 | + expect(out[0].y).toEqual([1, 1, 1, 2, 2, 3, 3]); |
| 146 | + expect(out[0].ids).toEqual(['p3', 'n0', 'z', 'n1', 'p1', 'n2', 'p2']); |
| 147 | + expect(out[0].marker.color).toEqual([0.4, 0.1, 0.1, 0.2, 0.2, 0.3, 0.3]); |
| 148 | + expect(out[0].marker.size).toEqual([10, 10, 1, 20, 6, 5, 0]); |
| 149 | + }); |
| 150 | + |
| 151 | + it('should truncate transformed arrays to target array length (short target case)', function() { |
| 152 | + var out = _transform([ |
| 153 | + extend({ |
| 154 | + transforms: [{ |
| 155 | + order: 'descending', |
| 156 | + target: [0, 1] |
| 157 | + }] |
| 158 | + } |
| 159 | + ), extend({ |
| 160 | + text: ['A', 'B'], |
| 161 | + transforms: [{ target: 'text' }] |
| 162 | + })]); |
| 163 | + |
| 164 | + expect(out[0].x).toEqual([-1, -2]); |
| 165 | + expect(out[0].y).toEqual([2, 1]); |
| 166 | + expect(out[0].ids).toEqual(['n1', 'n0']); |
| 167 | + expect(out[0].marker.color).toEqual([0.2, 0.1]); |
| 168 | + expect(out[0].marker.size).toEqual([20, 10]); |
| 169 | + |
| 170 | + expect(out[1].x).toEqual([-2, -1]); |
| 171 | + expect(out[1].y).toEqual([1, 2]); |
| 172 | + expect(out[1].ids).toEqual(['n0', 'n1']); |
| 173 | + expect(out[1].marker.color).toEqual([0.1, 0.2]); |
| 174 | + expect(out[1].marker.size).toEqual([10, 20]); |
| 175 | + }); |
| 176 | + |
| 177 | + it('should truncate transformed arrays to target array length (long target case)', function() { |
| 178 | + var out = _transform([ |
| 179 | + extend({ |
| 180 | + transforms: [{ |
| 181 | + order: 'descending', |
| 182 | + target: [0, 1, 2, 0, 1, 2, 3, 0, 1, 2, 3] |
| 183 | + }] |
| 184 | + } |
| 185 | + ), extend({ |
| 186 | + text: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'], |
| 187 | + transforms: [{ target: 'text' }] |
| 188 | + })]); |
| 189 | + |
| 190 | + expect(out[0].x).toEqual([1, undefined, -2, 3, undefined, -1, 1, undefined, -2, 0, undefined]); |
| 191 | + expect(out[0].y).toEqual([1, undefined, 3, 3, undefined, 2, 2, undefined, 1, 1, undefined]); |
| 192 | + expect(out[0].ids).toEqual(['p3', undefined, 'n2', 'p2', undefined, 'n1', 'p1', undefined, 'n0', 'z', undefined]); |
| 193 | + expect(out[0].marker.color).toEqual([0.4, undefined, 0.3, 0.3, undefined, 0.2, 0.2, undefined, 0.1, 0.1, undefined]); |
| 194 | + expect(out[0].marker.size).toEqual([10, undefined, 5, 0, undefined, 20, 6, undefined, 10, 1, undefined]); |
| 195 | + |
| 196 | + expect(out[1].x).toEqual([-2, -1, -2, 0, 1, 3, 1, undefined, undefined]); |
| 197 | + expect(out[1].y).toEqual([1, 2, 3, 1, 2, 3, 1, undefined, undefined]); |
| 198 | + expect(out[1].ids).toEqual(['n0', 'n1', 'n2', 'z', 'p1', 'p2', 'p3', undefined, undefined]); |
| 199 | + expect(out[1].marker.color).toEqual([0.1, 0.2, 0.3, 0.1, 0.2, 0.3, 0.4, undefined, undefined]); |
| 200 | + expect(out[1].marker.size).toEqual([10, 20, 5, 1, 6, 0, 10, undefined, undefined]); |
| 201 | + }); |
| 202 | +}); |
| 203 | + |
| 204 | +describe('Test sort transform interactions:', function() { |
| 205 | + afterEach(destroyGraphDiv); |
| 206 | + |
| 207 | + function _assertFirst(p) { |
| 208 | + var parts = d3.select('.point').attr('d').split(',').slice(0, 3).join(','); |
| 209 | + expect(parts).toEqual(p); |
| 210 | + } |
| 211 | + |
| 212 | + it('should respond to restyle calls', function(done) { |
| 213 | + Plotly.plot(createGraphDiv(), [{ |
| 214 | + x: [-2, -1, -2, 0, 1, 3, 1], |
| 215 | + y: [1, 2, 3, 1, 2, 3, 1], |
| 216 | + marker: { |
| 217 | + size: [10, 20, 5, 1, 6, 0, 10] |
| 218 | + }, |
| 219 | + transforms: [{ |
| 220 | + type: 'sort', |
| 221 | + target: 'marker.size', |
| 222 | + }] |
| 223 | + }]) |
| 224 | + .then(function(gd) { |
| 225 | + _assertFirst('M0,0A0,0 0 1'); |
| 226 | + |
| 227 | + return Plotly.restyle(gd, 'transforms[0].order', 'descending'); |
| 228 | + }) |
| 229 | + .then(function(gd) { |
| 230 | + _assertFirst('M10,0A10,10 0 1'); |
| 231 | + |
| 232 | + return Plotly.restyle(gd, 'transforms[0].enabled', false); |
| 233 | + }) |
| 234 | + .then(function(gd) { |
| 235 | + _assertFirst('M5,0A5,5 0 1'); |
| 236 | + |
| 237 | + return Plotly.restyle(gd, 'transforms[0].enabled', true); |
| 238 | + }) |
| 239 | + .then(function() { |
| 240 | + _assertFirst('M10,0A10,10 0 1'); |
| 241 | + }) |
| 242 | + .catch(fail) |
| 243 | + .then(done); |
| 244 | + }); |
| 245 | + |
| 246 | + it('does not preserve hover/click `pointNumber` value', function(done) { |
| 247 | + var gd = createGraphDiv(); |
| 248 | + |
| 249 | + function getPxPos(gd, id) { |
| 250 | + var trace = gd.data[0]; |
| 251 | + var fullLayout = gd._fullLayout; |
| 252 | + var index = trace.ids.indexOf(id); |
| 253 | + |
| 254 | + return [ |
| 255 | + fullLayout.xaxis.d2p(trace.x[index]), |
| 256 | + fullLayout.yaxis.d2p(trace.y[index]) |
| 257 | + ]; |
| 258 | + } |
| 259 | + |
| 260 | + function hover(gd, id) { |
| 261 | + return new Promise(function(resolve) { |
| 262 | + gd.once('plotly_hover', function(eventData) { |
| 263 | + resolve(eventData); |
| 264 | + }); |
| 265 | + |
| 266 | + var pos = getPxPos(gd, id); |
| 267 | + mouseEvent('mousemove', pos[0], pos[1]); |
| 268 | + }); |
| 269 | + } |
| 270 | + |
| 271 | + function click(gd, id) { |
| 272 | + return new Promise(function(resolve) { |
| 273 | + gd.once('plotly_click', function(eventData) { |
| 274 | + resolve(eventData); |
| 275 | + }); |
| 276 | + |
| 277 | + var pos = getPxPos(gd, id); |
| 278 | + mouseEvent('mousemove', pos[0], pos[1]); |
| 279 | + mouseEvent('mousedown', pos[0], pos[1]); |
| 280 | + mouseEvent('mouseup', pos[0], pos[1]); |
| 281 | + }); |
| 282 | + } |
| 283 | + |
| 284 | + function wait() { |
| 285 | + return new Promise(function(resolve) { |
| 286 | + setTimeout(resolve, 60); |
| 287 | + }); |
| 288 | + } |
| 289 | + |
| 290 | + function assertPt(eventData, x, y, pointNumber, id) { |
| 291 | + var pt = eventData.points[0]; |
| 292 | + |
| 293 | + expect(pt.x).toEqual(x, 'x'); |
| 294 | + expect(pt.y).toEqual(y, 'y'); |
| 295 | + expect(pt.pointNumber).toEqual(pointNumber, 'pointNumber'); |
| 296 | + expect(pt.fullData.ids[pt.pointNumber]).toEqual(id, 'id'); |
| 297 | + } |
| 298 | + |
| 299 | + Plotly.plot(gd, [{ |
| 300 | + mode: 'markers', |
| 301 | + x: [-2, -1, -2, 0, 1, 3, 1], |
| 302 | + y: [1, 2, 3, 1, 2, 3, 1], |
| 303 | + ids: ['A', 'B', 'C', 'D', 'E', 'F', 'G'], |
| 304 | + marker: { |
| 305 | + size: [10, 20, 5, 1, 6, 0, 10] |
| 306 | + }, |
| 307 | + transforms: [{ |
| 308 | + enabled: false, |
| 309 | + type: 'sort', |
| 310 | + target: 'marker.size', |
| 311 | + }] |
| 312 | + }], { |
| 313 | + width: 500, |
| 314 | + height: 500, |
| 315 | + margin: {l: 0, t: 0, r: 0, b: 0}, |
| 316 | + hovermode: 'closest' |
| 317 | + }) |
| 318 | + .then(function() { return hover(gd, 'D'); }) |
| 319 | + .then(function(eventData) { |
| 320 | + assertPt(eventData, 0, 1, 3, 'D'); |
| 321 | + }) |
| 322 | + .then(wait) |
| 323 | + .then(function() { return click(gd, 'G'); }) |
| 324 | + .then(function(eventData) { |
| 325 | + assertPt(eventData, 1, 1, 6, 'G'); |
| 326 | + }) |
| 327 | + .then(wait) |
| 328 | + .then(function() { |
| 329 | + return Plotly.restyle(gd, 'transforms[0].enabled', true); |
| 330 | + }) |
| 331 | + .then(function() { return hover(gd, 'D'); }) |
| 332 | + .then(function(eventData) { |
| 333 | + assertPt(eventData, 0, 1, 1, 'D'); |
| 334 | + }) |
| 335 | + .then(wait) |
| 336 | + .then(function() { return click(gd, 'G'); }) |
| 337 | + .then(function(eventData) { |
| 338 | + assertPt(eventData, 1, 1, 5, 'G'); |
| 339 | + }) |
| 340 | + .catch(fail) |
| 341 | + .then(done); |
| 342 | + }); |
| 343 | +}); |
0 commit comments