From 79cc375f9f0d6b6b9656fc5db8b4f195010330bc Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Mon, 26 Mar 2018 14:05:27 +0300 Subject: [PATCH 1/2] Add axis extremes event (#310) * Add setExtreme event to xAxis * Add test for setExtremes * Update grid dependency --- analysis.json | 153 ++++++++++++++++++++-------------- bower.json | 2 +- test/element-events-test.html | 23 ++++- vaadin-chart.html | 24 ++++++ 4 files changed, 136 insertions(+), 66 deletions(-) diff --git a/analysis.json b/analysis.json index e7cfaa73..f14b6b41 100644 --- a/analysis.json +++ b/analysis.json @@ -8,11 +8,11 @@ "sourceRange": { "file": "vaadin-chart.html", "start": { - "line": 994, + "line": 1018, "column": 6 }, "end": { - "line": 994, + "line": 1018, "column": 48 } }, @@ -212,11 +212,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 330, + "line": 333, "column": 10 }, "end": { - "line": 330, + "line": 333, "column": 29 } }, @@ -314,11 +314,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 336, + "line": 339, "column": 8 }, "end": { - "line": 346, + "line": 349, "column": 9 } }, @@ -331,11 +331,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 588, + "line": 603, "column": 8 }, "end": { - "line": 595, + "line": 610, "column": 9 } }, @@ -348,11 +348,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 597, + "line": 612, "column": 8 }, "end": { - "line": 604, + "line": 619, "column": 9 } }, @@ -365,11 +365,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 606, + "line": 621, "column": 8 }, "end": { - "line": 612, + "line": 627, "column": 9 } }, @@ -382,11 +382,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 614, + "line": 629, "column": 8 }, "end": { - "line": 616, + "line": 631, "column": 9 } }, @@ -403,11 +403,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 618, + "line": 633, "column": 8 }, "end": { - "line": 632, + "line": 647, "column": 9 } }, @@ -424,11 +424,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 634, + "line": 649, "column": 8 }, "end": { - "line": 636, + "line": 651, "column": 9 } }, @@ -445,11 +445,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 638, + "line": 653, "column": 8 }, "end": { - "line": 647, + "line": 662, "column": 9 } }, @@ -466,11 +466,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 650, + "line": 665, "column": 8 }, "end": { - "line": 654, + "line": 669, "column": 9 } }, @@ -483,11 +483,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 691, + "line": 706, "column": 8 }, "end": { - "line": 729, + "line": 744, "column": 9 } }, @@ -511,11 +511,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 731, + "line": 746, "column": 8 }, "end": { - "line": 740, + "line": 755, "column": 9 } }, @@ -535,11 +535,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 742, + "line": 757, "column": 8 }, "end": { - "line": 757, + "line": 772, "column": 9 } }, @@ -562,11 +562,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 759, + "line": 774, "column": 8 }, "end": { - "line": 775, + "line": 790, "column": 9 } }, @@ -583,11 +583,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 777, + "line": 792, "column": 8 }, "end": { - "line": 781, + "line": 797, "column": 9 } }, @@ -604,11 +604,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 783, + "line": 799, "column": 8 }, "end": { - "line": 785, + "line": 801, "column": 9 } }, @@ -625,11 +625,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 787, + "line": 803, "column": 8 }, "end": { - "line": 789, + "line": 805, "column": 9 } }, @@ -646,11 +646,32 @@ "privacy": "private", "sourceRange": { "start": { - "line": 791, + "line": 807, + "column": 8 + }, + "end": { + "line": 809, + "column": 9 + } + }, + "metadata": {}, + "params": [ + { + "name": "configuration" + } + ] + }, + { + "name": "__initXAxisEventsListeners", + "description": "", + "privacy": "private", + "sourceRange": { + "start": { + "line": 811, "column": 8 }, "end": { - "line": 793, + "line": 817, "column": 9 } }, @@ -667,11 +688,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 795, + "line": 819, "column": 8 }, "end": { - "line": 841, + "line": 865, "column": 9 } }, @@ -697,11 +718,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 843, + "line": 867, "column": 8 }, "end": { - "line": 853, + "line": 877, "column": 9 } }, @@ -721,11 +742,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 855, + "line": 879, "column": 8 }, "end": { - "line": 861, + "line": 885, "column": 9 } }, @@ -742,11 +763,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 863, + "line": 887, "column": 8 }, "end": { - "line": 876, + "line": 900, "column": 9 } }, @@ -766,11 +787,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 878, + "line": 902, "column": 8 }, "end": { - "line": 886, + "line": 910, "column": 9 } }, @@ -787,11 +808,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 888, + "line": 912, "column": 8 }, "end": { - "line": 895, + "line": 919, "column": 9 } }, @@ -811,11 +832,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 897, + "line": 921, "column": 8 }, "end": { - "line": 905, + "line": 929, "column": 9 } }, @@ -832,11 +853,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 907, + "line": 931, "column": 8 }, "end": { - "line": 919, + "line": 943, "column": 9 } }, @@ -853,11 +874,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 921, + "line": 945, "column": 8 }, "end": { - "line": 929, + "line": 953, "column": 9 } }, @@ -874,11 +895,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 931, + "line": 955, "column": 8 }, "end": { - "line": 940, + "line": 964, "column": 9 } }, @@ -898,11 +919,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 942, + "line": 966, "column": 8 }, "end": { - "line": 975, + "line": 999, "column": 9 } }, @@ -925,11 +946,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 977, + "line": 1001, "column": 8 }, "end": { - "line": 986, + "line": 1010, "column": 9 } }, @@ -961,7 +982,7 @@ "column": 6 }, "end": { - "line": 987, + "line": 1011, "column": 7 } }, @@ -1019,6 +1040,12 @@ } ], "events": [ + { + "type": "CustomEvent", + "name": "axis-extremes", + "description": "axis-extremes Fired when when the minimum and maximum is set for the axis", + "metadata": {} + }, { "type": "CustomEvent", "name": "chart-add-series", diff --git a/bower.json b/bower.json index 4be3738e..f5aadf2d 100755 --- a/bower.json +++ b/bower.json @@ -43,6 +43,6 @@ "webcomponentsjs": "^1.0.0", "web-component-tester": "^6.1.5", "vaadin-board": "^2.0.0", - "vaadin-grid": "4.0.0-beta1" + "vaadin-grid": "4.1.7" } } diff --git a/test/element-events-test.html b/test/element-events-test.html index a6be7f88..36f66f0a 100644 --- a/test/element-events-test.html +++ b/test/element-events-test.html @@ -11,8 +11,11 @@ + + + + + diff --git a/vaadin-chart.html b/vaadin-chart.html index 25292298..aed2fdac 100644 --- a/vaadin-chart.html +++ b/vaadin-chart.html @@ -303,6 +303,9 @@ }, title: { text: null + }, + xAxis: { + } }; @@ -586,6 +589,18 @@ }; } + get __axisEventNames() { + return { + /** + * + * @event axis-extremes Fired when when the minimum and maximum is set for the axis + * @param {Object} detail.originalEvent object with details about the event sent + * @param {Object} axis Point object where the event was sent from + */ + setExtremes: 'axis-extremes', + }; + } + __reflow() { if (!this.configuration) { return; @@ -779,6 +794,7 @@ this.__initChartEventsListeners(configuration); this.__initSeriesEventsListeners(configuration); this.__initPointsEventsListeners(configuration); + this.__initXAxisEventsListeners(configuration); } __initChartEventsListeners(configuration) { @@ -793,6 +809,14 @@ this.__createEventListeners(this.__pointEventNames, configuration, 'plotOptions.series.point.events', 'point'); } + __initXAxisEventsListeners(configuration) { + if (Array.isArray(configuration.xAxis)) { + configuration.xAxis.forEach(axis => this.__createEventListeners(this.__axisEventNames, axis, 'events', 'axis')); + } else { + this.__createEventListeners(this.__axisEventNames, configuration.xAxis, 'events', 'axis'); + } + } + __createEventListeners(eventList, configuration, pathToAdd, eventType) { const self = this; const eventObject = this.__ensureObjectPath(configuration, pathToAdd); From dc2ef6e84a3ab96c24982c71e2a2545300e6ab4c Mon Sep 17 00:00:00 2001 From: Diego Cardoso Date: Wed, 28 Mar 2018 15:13:27 +0300 Subject: [PATCH 2/2] Add set extremes event for yAxis (#311) --- analysis.json | 153 ++++++++++++++++++---------------- test/element-events-test.html | 18 +++- vaadin-chart.html | 42 ++++++++-- 3 files changed, 131 insertions(+), 82 deletions(-) diff --git a/analysis.json b/analysis.json index f14b6b41..d30db433 100644 --- a/analysis.json +++ b/analysis.json @@ -8,11 +8,11 @@ "sourceRange": { "file": "vaadin-chart.html", "start": { - "line": 1018, + "line": 1044, "column": 6 }, "end": { - "line": 1018, + "line": 1044, "column": 48 } }, @@ -212,11 +212,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 333, + "line": 336, "column": 10 }, "end": { - "line": 333, + "line": 336, "column": 29 } }, @@ -314,11 +314,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 339, + "line": 342, "column": 8 }, "end": { - "line": 349, + "line": 352, "column": 9 } }, @@ -331,11 +331,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 603, + "line": 618, "column": 8 }, "end": { - "line": 610, + "line": 625, "column": 9 } }, @@ -348,11 +348,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 612, + "line": 627, "column": 8 }, "end": { - "line": 619, + "line": 634, "column": 9 } }, @@ -365,11 +365,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 621, + "line": 636, "column": 8 }, "end": { - "line": 627, + "line": 642, "column": 9 } }, @@ -382,11 +382,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 629, + "line": 644, "column": 8 }, "end": { - "line": 631, + "line": 646, "column": 9 } }, @@ -403,11 +403,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 633, + "line": 648, "column": 8 }, "end": { - "line": 647, + "line": 662, "column": 9 } }, @@ -424,11 +424,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 649, + "line": 664, "column": 8 }, "end": { - "line": 651, + "line": 666, "column": 9 } }, @@ -445,11 +445,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 653, + "line": 668, "column": 8 }, "end": { - "line": 662, + "line": 677, "column": 9 } }, @@ -466,11 +466,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 665, + "line": 680, "column": 8 }, "end": { - "line": 669, + "line": 684, "column": 9 } }, @@ -483,11 +483,11 @@ "privacy": "public", "sourceRange": { "start": { - "line": 706, + "line": 721, "column": 8 }, "end": { - "line": 744, + "line": 759, "column": 9 } }, @@ -511,11 +511,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 746, + "line": 761, "column": 8 }, "end": { - "line": 755, + "line": 770, "column": 9 } }, @@ -535,11 +535,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 757, + "line": 772, "column": 8 }, "end": { - "line": 772, + "line": 787, "column": 9 } }, @@ -562,11 +562,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 774, + "line": 789, "column": 8 }, "end": { - "line": 790, + "line": 805, "column": 9 } }, @@ -583,11 +583,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 792, + "line": 807, "column": 8 }, "end": { - "line": 797, + "line": 813, "column": 9 } }, @@ -604,11 +604,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 799, + "line": 815, "column": 8 }, "end": { - "line": 801, + "line": 817, "column": 9 } }, @@ -625,11 +625,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 803, + "line": 819, "column": 8 }, "end": { - "line": 805, + "line": 821, "column": 9 } }, @@ -646,11 +646,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 807, + "line": 823, "column": 8 }, "end": { - "line": 809, + "line": 825, "column": 9 } }, @@ -662,16 +662,16 @@ ] }, { - "name": "__initXAxisEventsListeners", + "name": "__initAxisEventsListeners", "description": "", "privacy": "private", "sourceRange": { "start": { - "line": 811, + "line": 827, "column": 8 }, "end": { - "line": 817, + "line": 843, "column": 9 } }, @@ -679,6 +679,9 @@ "params": [ { "name": "configuration" + }, + { + "name": "isXAxis" } ] }, @@ -688,11 +691,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 819, + "line": 845, "column": 8 }, "end": { - "line": 865, + "line": 891, "column": 9 } }, @@ -718,11 +721,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 867, + "line": 893, "column": 8 }, "end": { - "line": 877, + "line": 903, "column": 9 } }, @@ -742,11 +745,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 879, + "line": 905, "column": 8 }, "end": { - "line": 885, + "line": 911, "column": 9 } }, @@ -763,11 +766,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 887, + "line": 913, "column": 8 }, "end": { - "line": 900, + "line": 926, "column": 9 } }, @@ -787,11 +790,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 902, + "line": 928, "column": 8 }, "end": { - "line": 910, + "line": 936, "column": 9 } }, @@ -808,11 +811,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 912, + "line": 938, "column": 8 }, "end": { - "line": 919, + "line": 945, "column": 9 } }, @@ -832,11 +835,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 921, + "line": 947, "column": 8 }, "end": { - "line": 929, + "line": 955, "column": 9 } }, @@ -853,11 +856,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 931, + "line": 957, "column": 8 }, "end": { - "line": 943, + "line": 969, "column": 9 } }, @@ -874,11 +877,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 945, + "line": 971, "column": 8 }, "end": { - "line": 953, + "line": 979, "column": 9 } }, @@ -895,11 +898,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 955, + "line": 981, "column": 8 }, "end": { - "line": 964, + "line": 990, "column": 9 } }, @@ -919,11 +922,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 966, + "line": 992, "column": 8 }, "end": { - "line": 999, + "line": 1025, "column": 9 } }, @@ -946,11 +949,11 @@ "privacy": "private", "sourceRange": { "start": { - "line": 1001, + "line": 1027, "column": 8 }, "end": { - "line": 1010, + "line": 1036, "column": 9 } }, @@ -982,7 +985,7 @@ "column": 6 }, "end": { - "line": 1011, + "line": 1037, "column": 7 } }, @@ -1040,12 +1043,6 @@ } ], "events": [ - { - "type": "CustomEvent", - "name": "axis-extremes", - "description": "axis-extremes Fired when when the minimum and maximum is set for the axis", - "metadata": {} - }, { "type": "CustomEvent", "name": "chart-add-series", @@ -1201,6 +1198,18 @@ "name": "series-show", "description": "series-show Fired when the series is show after chart generation time", "metadata": {} + }, + { + "type": "CustomEvent", + "name": "xaxes-extremes-set", + "description": "xaxes-extremes-set Fired when when the minimum and maximum is set for the x axis", + "metadata": {} + }, + { + "type": "CustomEvent", + "name": "yaxes-extremes-set", + "description": "yaxes-extremes-set Fired when when the minimum and maximum is set for the y axis", + "metadata": {} } ], "styling": { diff --git a/test/element-events-test.html b/test/element-events-test.html index 36f66f0a..2fb0fe0e 100644 --- a/test/element-events-test.html +++ b/test/element-events-test.html @@ -134,7 +134,7 @@ }); }); - it('should trigger setExtremes event', done => { + it('should trigger setExtremes event for xAxis', done => { const minExtreme = 10; const maxExtreme = 20; function setExtremesListener(e) { @@ -144,9 +144,23 @@ done(); } - timelineChart.addEventListener('axis-extremes', setExtremesListener); + timelineChart.addEventListener('xaxes-extremes-set', setExtremesListener); timelineChart.configuration.xAxis[0].setExtremes(minExtreme, maxExtreme); }); + + it('should trigger setExtremes event for yAxis', done => { + const minExtreme = 10; + const maxExtreme = 20; + function setExtremesListener(e) { + const {min, max} = e.detail.originalEvent; + expect(min).to.be.equal(minExtreme); + expect(max).to.be.equal(maxExtreme); + done(); + } + + timelineChart.addEventListener('yaxes-extremes-set', setExtremesListener); + timelineChart.configuration.yAxis[0].setExtremes(minExtreme, maxExtreme); + }); }); diff --git a/vaadin-chart.html b/vaadin-chart.html index aed2fdac..24708c60 100644 --- a/vaadin-chart.html +++ b/vaadin-chart.html @@ -306,6 +306,9 @@ }, xAxis: { + }, + yAxis: { + } }; @@ -589,15 +592,27 @@ }; } - get __axisEventNames() { + get __xAxesEventNames() { return { /** * - * @event axis-extremes Fired when when the minimum and maximum is set for the axis + * @event xaxes-extremes-set Fired when when the minimum and maximum is set for the x axis * @param {Object} detail.originalEvent object with details about the event sent * @param {Object} axis Point object where the event was sent from */ - setExtremes: 'axis-extremes', + afterSetExtremes: 'xaxes-extremes-set', + }; + } + + get __yAxesEventNames() { + return { + /** + * + * @event yaxes-extremes-set Fired when when the minimum and maximum is set for the y axis + * @param {Object} detail.originalEvent object with details about the event sent + * @param {Object} axis Point object where the event was sent from + */ + afterSetExtremes: 'yaxes-extremes-set', }; } @@ -794,7 +809,8 @@ this.__initChartEventsListeners(configuration); this.__initSeriesEventsListeners(configuration); this.__initPointsEventsListeners(configuration); - this.__initXAxisEventsListeners(configuration); + this.__initAxisEventsListeners(configuration, true); + this.__initAxisEventsListeners(configuration, false); } __initChartEventsListeners(configuration) { @@ -809,11 +825,21 @@ this.__createEventListeners(this.__pointEventNames, configuration, 'plotOptions.series.point.events', 'point'); } - __initXAxisEventsListeners(configuration) { - if (Array.isArray(configuration.xAxis)) { - configuration.xAxis.forEach(axis => this.__createEventListeners(this.__axisEventNames, axis, 'events', 'axis')); + __initAxisEventsListeners(configuration, isXAxis) { + let eventNames, axes; + + if (isXAxis) { + eventNames = this.__xAxesEventNames; + axes = configuration.xAxis; + } else { + eventNames = this.__yAxesEventNames; + axes = configuration.yAxis; + } + + if (Array.isArray(axes)) { + axes.forEach(axis => this.__createEventListeners(eventNames, axis, 'events', 'axis')); } else { - this.__createEventListeners(this.__axisEventNames, configuration.xAxis, 'events', 'axis'); + this.__createEventListeners(eventNames, axes, 'events', 'axis'); } }