|
| 1 | +var Plotly = require('@lib'); |
| 2 | + |
1 | 3 | var Colorscale = require('@src/components/colorscale');
|
| 4 | + |
2 | 5 | var Lib = require('@src/lib');
|
3 | 6 | var Plots = require('@src/plots/plots');
|
4 | 7 | var Heatmap = require('@src/traces/heatmap');
|
5 | 8 | var Scatter = require('@src/traces/scatter');
|
6 | 9 |
|
| 10 | +var d3 = require('d3'); |
| 11 | +var createGraphDiv = require('../assets/create_graph_div'); |
| 12 | +var destroyGraphDiv = require('../assets/destroy_graph_div'); |
| 13 | +var failTest = require('../assets/fail_test'); |
7 | 14 | var supplyAllDefaults = require('../assets/supply_defaults');
|
8 | 15 |
|
9 | 16 | function _supply(trace, layout) {
|
@@ -571,3 +578,289 @@ describe('Test colorscale:', function() {
|
571 | 578 | });
|
572 | 579 | });
|
573 | 580 | });
|
| 581 | + |
| 582 | +describe('Test colorscale restyle calls:', function() { |
| 583 | + var gd; |
| 584 | + |
| 585 | + beforeEach(function() { |
| 586 | + gd = createGraphDiv(); |
| 587 | + }); |
| 588 | + |
| 589 | + afterEach(destroyGraphDiv); |
| 590 | + |
| 591 | + function getFill(q) { |
| 592 | + return d3.select(q).node().style.fill; |
| 593 | + } |
| 594 | + |
| 595 | + it('should be able to toggle between autocolorscale true/false and set colorscales (contour case)', function(done) { |
| 596 | + function _assert(msg, exp) { |
| 597 | + var cc = []; |
| 598 | + cc.push(getFill('.contourbg > path')); |
| 599 | + d3.selectAll('.contourfill > path').each(function() { |
| 600 | + cc.push(getFill(this)); |
| 601 | + }); |
| 602 | + expect(cc).toEqual(exp.contourColors); |
| 603 | + |
| 604 | + expect(gd._fullData[0].colorscale).toEqual(exp.colorscale); |
| 605 | + expect(gd._fullData[0].autocolorscale).toBe(exp.autocolorscale, msg); |
| 606 | + |
| 607 | + expect(gd.data[0].colorscale).toEqual(exp.colorscaleIn); |
| 608 | + expect(gd.data[0].autocolorscale).toBe(exp.autocolorscaleIn, msg); |
| 609 | + } |
| 610 | + |
| 611 | + // update via, assert then assert again (and again ;) after non-calc edits |
| 612 | + function _run(msg, restyleObj, exp) { |
| 613 | + return Plotly.restyle(gd, restyleObj) |
| 614 | + .then(function() { _assert(msg, exp); }) |
| 615 | + .then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); }) |
| 616 | + .then(function() { _assert(msg + ' after axrange relayout', exp); }) |
| 617 | + .then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); }) |
| 618 | + .then(function() { _assert(msg + ' after autorange', exp); }) |
| 619 | + .then(function() { return Plotly.restyle(gd, 'contours.showlines', true); }) |
| 620 | + .then(function() { _assert(msg + ' after contours.showlines restyle', exp); }) |
| 621 | + .then(function() { return Plotly.restyle(gd, 'contours.showlines', false); }) |
| 622 | + .then(function() { _assert(msg + ' back to original contours.showlines', exp); }); |
| 623 | + } |
| 624 | + |
| 625 | + var rdbu = ['rgb(5, 10, 172)', 'rgb(190, 190, 190)', 'rgb(178, 10, 28)']; |
| 626 | + var reds = ['rgb(220, 220, 220)', 'rgb(234, 135, 92)', 'rgb(178, 10, 28)']; |
| 627 | + var grns = ['rgb(0, 68, 27)', 'rgb(116, 196, 118)', 'rgb(247, 252, 245)']; |
| 628 | + |
| 629 | + Plotly.plot(gd, [{ |
| 630 | + type: 'contour', |
| 631 | + z: [ |
| 632 | + [1, 20, 30], |
| 633 | + [20, 1, 60], |
| 634 | + [30, 60, 1] |
| 635 | + ], |
| 636 | + ncontours: 3 |
| 637 | + }]) |
| 638 | + .then(function() { |
| 639 | + _assert('base (autocolorscale:false by dflt)', { |
| 640 | + contourColors: rdbu, |
| 641 | + autocolorscale: false, |
| 642 | + autocolorscaleIn: undefined, |
| 643 | + colorscale: Colorscale.scales.RdBu, |
| 644 | + colorscaleIn: undefined |
| 645 | + }); |
| 646 | + }) |
| 647 | + .then(function() { |
| 648 | + return _run('restyle to autocolorscale:true', {autocolorscale: true}, { |
| 649 | + contourColors: reds, |
| 650 | + autocolorscale: true, |
| 651 | + autocolorscaleIn: true, |
| 652 | + colorscale: Colorscale.scales.Reds, |
| 653 | + colorscaleIn: undefined |
| 654 | + }); |
| 655 | + }) |
| 656 | + .then(function() { |
| 657 | + return _run('restyle to reversescale:true with autocolorscale:true', {reversescale: true}, { |
| 658 | + contourColors: reds.slice().reverse(), |
| 659 | + autocolorscale: true, |
| 660 | + autocolorscaleIn: true, |
| 661 | + colorscale: Colorscale.scales.Reds, |
| 662 | + colorscaleIn: undefined |
| 663 | + }); |
| 664 | + }) |
| 665 | + .then(function() { |
| 666 | + return _run('restyle back to autocolorscale:false with reversescale:true', {autocolorscale: false}, { |
| 667 | + contourColors: rdbu.slice().reverse(), |
| 668 | + autocolorscale: false, |
| 669 | + autocolorscaleIn: false, |
| 670 | + colorscale: Colorscale.scales.RdBu, |
| 671 | + colorscaleIn: undefined |
| 672 | + }); |
| 673 | + }) |
| 674 | + .then(function() { |
| 675 | + return _run('restyle to *Greens* colorscale', {colorscale: 'Greens', reversescale: false}, { |
| 676 | + contourColors: grns, |
| 677 | + autocolorscale: false, |
| 678 | + autocolorscaleIn: false, |
| 679 | + colorscale: Colorscale.scales.Greens, |
| 680 | + colorscaleIn: 'Greens' |
| 681 | + }); |
| 682 | + }) |
| 683 | + .then(function() { |
| 684 | + return _run('restyle back again to autocolorscale:true', {autocolorscale: true}, { |
| 685 | + contourColors: reds, |
| 686 | + autocolorscale: true, |
| 687 | + autocolorscaleIn: true, |
| 688 | + colorscale: Colorscale.scales.Reds, |
| 689 | + colorscaleIn: 'Greens' |
| 690 | + }); |
| 691 | + }) |
| 692 | + .then(function() { |
| 693 | + return _run('restyle back to autocolorscale:false with colorscale:Greens', {autocolorscale: false}, { |
| 694 | + contourColors: grns, |
| 695 | + autocolorscale: false, |
| 696 | + autocolorscaleIn: false, |
| 697 | + colorscale: Colorscale.scales.Greens, |
| 698 | + colorscaleIn: 'Greens' |
| 699 | + }); |
| 700 | + }) |
| 701 | + .catch(failTest) |
| 702 | + .then(done); |
| 703 | + }); |
| 704 | + |
| 705 | + it('should be able to toggle between autocolorscale true/false and set colorscales (scatter marker case)', function(done) { |
| 706 | + function _assert(msg, exp) { |
| 707 | + var mcc = []; |
| 708 | + d3.selectAll('path.point').each(function() { |
| 709 | + mcc.push(getFill(this)); |
| 710 | + }); |
| 711 | + expect(mcc).toEqual(exp.mcc); |
| 712 | + |
| 713 | + expect(gd._fullData[0].marker.colorscale).toEqual(exp.colorscale); |
| 714 | + expect(gd._fullData[0].marker.autocolorscale).toBe(exp.autocolorscale, msg); |
| 715 | + |
| 716 | + expect(gd.data[0].marker.colorscale).toEqual(exp.colorscaleIn); |
| 717 | + expect(gd.data[0].marker.autocolorscale).toBe(exp.autocolorscaleIn, msg); |
| 718 | + } |
| 719 | + |
| 720 | + // update via, assert then assert again (and again ;) after non-calc edits |
| 721 | + function _run(msg, restyleObj, exp) { |
| 722 | + return Plotly.restyle(gd, restyleObj) |
| 723 | + .then(function() { _assert(msg, exp); }) |
| 724 | + .then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); }) |
| 725 | + .then(function() { _assert(msg + ' after axrange relayout', exp); }) |
| 726 | + .then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); }) |
| 727 | + .then(function() { _assert(msg + ' after autorange', exp); }) |
| 728 | + .then(function() { return Plotly.restyle(gd, 'marker.symbol', 'square'); }) |
| 729 | + .then(function() { _assert(msg + ' after marker.symbol restyle', exp); }) |
| 730 | + .then(function() { return Plotly.restyle(gd, 'marker.symbol', null); }) |
| 731 | + .then(function() { _assert(msg + ' back to original marker.symbol', exp); }); |
| 732 | + } |
| 733 | + |
| 734 | + var rdbu = ['rgb(5, 10, 172)', 'rgb(77, 101, 226)', 'rgb(178, 10, 28)']; |
| 735 | + var grns = ['rgb(0, 68, 27)', 'rgb(35, 139, 69)', 'rgb(247, 252, 245)']; |
| 736 | + |
| 737 | + Plotly.plot(gd, [{ |
| 738 | + mode: 'markers', |
| 739 | + y: [1, 2, 3], |
| 740 | + marker: {color: [-1, 0, 3]} |
| 741 | + }]) |
| 742 | + .then(function() { |
| 743 | + _assert('base (autocolorscale:true by dflt)', { |
| 744 | + mcc: rdbu, |
| 745 | + autocolorscale: true, |
| 746 | + autocolorscaleIn: undefined, |
| 747 | + colorscale: Colorscale.scales.RdBu, |
| 748 | + colorscaleIn: undefined |
| 749 | + }); |
| 750 | + }) |
| 751 | + .then(function() { |
| 752 | + return _run('set *Greens* colorscale', {'marker.colorscale': 'Greens'}, { |
| 753 | + mcc: grns, |
| 754 | + autocolorscale: false, |
| 755 | + autocolorscaleIn: false, |
| 756 | + colorscale: Colorscale.scales.Greens, |
| 757 | + colorscaleIn: 'Greens' |
| 758 | + }); |
| 759 | + }) |
| 760 | + .then(function() { |
| 761 | + return _run('back to autocolorscale:true', {'marker.autocolorscale': true}, { |
| 762 | + mcc: rdbu, |
| 763 | + autocolorscale: true, |
| 764 | + autocolorscaleIn: true, |
| 765 | + colorscale: Colorscale.scales.RdBu, |
| 766 | + colorscaleIn: 'Greens' |
| 767 | + }); |
| 768 | + }) |
| 769 | + .then(function() { |
| 770 | + return _run('back to autocolorscale:false w/ colorscale set', {'marker.autocolorscale': false}, { |
| 771 | + mcc: grns, |
| 772 | + autocolorscale: false, |
| 773 | + autocolorscaleIn: false, |
| 774 | + colorscale: Colorscale.scales.Greens, |
| 775 | + colorscaleIn: 'Greens' |
| 776 | + }); |
| 777 | + }) |
| 778 | + .catch(failTest) |
| 779 | + .then(done); |
| 780 | + }); |
| 781 | + |
| 782 | + it('should be able to toggle between autocolorscale true/false and set colorscales (scatter marker line case)', function(done) { |
| 783 | + var mlw0 = 5; |
| 784 | + |
| 785 | + function _assert(msg, exp) { |
| 786 | + var mlcc = []; |
| 787 | + d3.selectAll('path.point').each(function() { |
| 788 | + mlcc.push(d3.select(this).node().style.stroke); |
| 789 | + }); |
| 790 | + expect(mlcc).toEqual(exp.mlcc); |
| 791 | + |
| 792 | + expect(gd._fullData[0].marker.line.colorscale).toEqual(exp.colorscale); |
| 793 | + expect(gd._fullData[0].marker.line.autocolorscale).toBe(exp.autocolorscale, msg); |
| 794 | + |
| 795 | + expect(gd.data[0].marker.line.colorscale).toEqual(exp.colorscaleIn); |
| 796 | + expect(gd.data[0].marker.line.autocolorscale).toBe(exp.autocolorscaleIn, msg); |
| 797 | + } |
| 798 | + |
| 799 | + // update via, assert then assert again (and again ;) after non-calc edits |
| 800 | + function _run(msg, restyleObj, exp) { |
| 801 | + return Plotly.restyle(gd, restyleObj) |
| 802 | + .then(function() { _assert(msg, exp); }) |
| 803 | + .then(function() { return Plotly.relayout(gd, 'xaxis.range', [-1, 5]); }) |
| 804 | + .then(function() { _assert(msg + ' after axrange relayout', exp); }) |
| 805 | + .then(function() { return Plotly.relayout(gd, 'xaxis.autorange', true); }) |
| 806 | + .then(function() { _assert(msg + ' after autorange', exp); }) |
| 807 | + .then(function() { return Plotly.restyle(gd, 'marker.line.width', 10); }) |
| 808 | + .then(function() { _assert(msg + ' after marker lw restyle', exp); }) |
| 809 | + .then(function() { return Plotly.restyle(gd, 'marker.line.width', mlw0); }) |
| 810 | + .then(function() { _assert(msg + ' back to original marker lw', exp); }); |
| 811 | + } |
| 812 | + |
| 813 | + var blues = ['rgb(220, 220, 220)', 'rgb(70, 100, 245)', 'rgb(5, 10, 172)']; |
| 814 | + var grns = ['rgb(247, 252, 245)', 'rgb(116, 196, 118)', 'rgb(0, 68, 27)']; |
| 815 | + |
| 816 | + Plotly.plot(gd, [{ |
| 817 | + mode: 'markers', |
| 818 | + y: [1, 2, 3], |
| 819 | + marker: { |
| 820 | + size: 20, |
| 821 | + line: { |
| 822 | + color: [-1, -2, -3], |
| 823 | + width: mlw0 |
| 824 | + } |
| 825 | + } |
| 826 | + }]) |
| 827 | + .then(function() { |
| 828 | + _assert('base (autocolorscale:true by dflt)', { |
| 829 | + mlcc: blues, |
| 830 | + autocolorscale: true, |
| 831 | + autocolorscaleIn: undefined, |
| 832 | + colorscale: Colorscale.scales.Blues, |
| 833 | + colorscaleIn: undefined |
| 834 | + }); |
| 835 | + }) |
| 836 | + .then(function() { |
| 837 | + return _run('set *Greens* colorscale', {'marker.line.colorscale': 'Greens'}, { |
| 838 | + mlcc: grns, |
| 839 | + autocolorscale: false, |
| 840 | + autocolorscaleIn: false, |
| 841 | + colorscale: Colorscale.scales.Greens, |
| 842 | + colorscaleIn: 'Greens' |
| 843 | + }); |
| 844 | + }) |
| 845 | + .then(function() { |
| 846 | + return _run('back to autocolorscale:true', {'marker.line.autocolorscale': true}, { |
| 847 | + mlcc: blues, |
| 848 | + autocolorscale: true, |
| 849 | + autocolorscaleIn: true, |
| 850 | + colorscale: Colorscale.scales.Blues, |
| 851 | + colorscaleIn: 'Greens' |
| 852 | + }); |
| 853 | + }) |
| 854 | + .then(function() { |
| 855 | + return _run('back to autocolorscale:false w/ colorscale set', {'marker.line.autocolorscale': false}, { |
| 856 | + mlcc: grns, |
| 857 | + autocolorscale: false, |
| 858 | + autocolorscaleIn: false, |
| 859 | + colorscale: Colorscale.scales.Greens, |
| 860 | + colorscaleIn: 'Greens' |
| 861 | + }); |
| 862 | + }) |
| 863 | + .catch(failTest) |
| 864 | + .then(done); |
| 865 | + }); |
| 866 | +}); |
0 commit comments