4 import * as commonConstants from 'corpus-common-addon/utils/constants'; |
4 import * as commonConstants from 'corpus-common-addon/utils/constants'; |
5 import * as commonUtils from 'corpus-common-addon/utils/utils'; |
5 import * as commonUtils from 'corpus-common-addon/utils/utils'; |
6 |
6 |
7 export default Ember.Component.extend({ |
7 export default Ember.Component.extend({ |
8 |
8 |
9 constants: Ember.inject.service(), |
9 constants: Ember.inject.service(), |
10 colors: Ember.inject.service(), |
10 colors: Ember.inject.service(), |
11 |
11 |
12 map: null, |
12 map: null, |
13 |
13 |
14 continentsMapVar: AmCharts.maps.continentsLow, |
14 continentsMapVar: AmCharts.maps.continentsLow, |
15 continentsAreas: [], |
15 continentsAreas: [], |
16 countriesMapVar: AmCharts.maps.worldLow, |
16 countriesMapVar: AmCharts.maps.worldLow, |
17 countriesAreas: [], |
17 countriesAreas: [], |
18 franceMapVar: AmCharts.maps.france2016Low, |
18 franceMapVar: AmCharts.maps.france2016Low, |
19 franceAreas: [], |
19 franceAreas: [], |
20 |
20 |
21 dataProvider: {}, |
21 dataProvider: {}, |
22 |
22 |
23 color: 'rgba(113,132,141,.2)', |
23 |
24 |
24 area: null, |
25 filter: Ember.inject.service(), |
25 originalZoomLevel: null, |
26 locationObserver: Ember.observer('filter.location', function() { |
26 originalZoomLongitude: null, |
27 if(this.get('filter').get('location') === null) { |
27 originalZoomLatitude: null, |
28 this.sendAction('setLocation', this.get('constants').GEONAMES['world']); |
28 |
29 this.get('map').selectObject(); |
29 color: 'rgba(113,132,141,.2)', |
30 } else { |
30 |
31 this.sendAction('setLocation', commonUtils.getGeonamesCode(this.get('filter').get('location'))); |
31 filter: Ember.inject.service(), |
|
32 locationObserver: Ember.observer('filter.location', function () { |
|
33 if (this.get('filter').get('location') === null) { |
|
34 this.sendAction('setLocation', this.get('constants').GEONAMES['world']); |
|
35 this.get('map').selectObject(); |
|
36 } else { |
|
37 this.sendAction('setLocation', commonUtils.getGeonamesCode(this.get('filter').get('location'))); |
|
38 } |
|
39 }), |
|
40 |
|
41 geostats: [], |
|
42 observerGeostats: Ember.observer('geostats', function () { |
|
43 let map = this.get('map'); |
|
44 if(!map) { |
|
45 return; |
|
46 } |
|
47 let selectedObject = map.selectedObject; |
|
48 if (selectedObject.id) { |
|
49 if (selectedObject.parentObject.mapVar === this.get('countriesMapVar')) { |
|
50 if (selectedObject.id === this.get('constants').GEONAMES['france']) { |
|
51 this.setProperties({ |
|
52 area: 'france', |
|
53 originalZoomLevel: null, |
|
54 originalZoomLongitude: null, |
|
55 originalZoomLatitude: null, |
|
56 }); |
|
57 this.setFranceAreas(); |
|
58 this.set('dataProvider', { |
|
59 'mapVar': this.get('franceMapVar'), |
|
60 'getAreasFromMap': true, |
|
61 'areas': this.get('franceAreas') |
|
62 }); |
|
63 map['zoomControl'] = { |
|
64 'zoomControlEnabled': false |
|
65 }; |
|
66 map['dragMap'] = false; |
|
67 map['dataProvider'] = this.get('dataProvider'); |
|
68 map.validateData(); |
32 } |
69 } |
33 }), |
70 } else if (selectedObject.parentObject.mapVar === this.get('continentsMapVar')) { |
34 |
71 this.setProperties({ |
35 geostats: [], |
72 area: 'countries', |
36 observerGeostats: Ember.observer('geostats', function() { |
73 originalZoomLevel: map.zoomLevel(), |
37 if(this.get('map')) { |
74 originalZoomLongitude: map.zoomLongitude(), |
38 if(this.get('map').selectedObject.id) { |
75 originalZoomLatitude: map.zoomLatitude() |
39 if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) { |
76 }); |
40 if(this.get('map').selectedObject.id === this.get('constants').GEONAMES['france']) { |
77 |
41 this.setFranceAreas(); |
78 this.setCountriesAreas(); |
42 this.set('dataProvider', { |
79 this.set('dataProvider', { |
43 'mapVar': this.get('franceMapVar'), |
80 'mapVar': this.get('countriesMapVar'), |
44 'getAreasFromMap': true, |
81 'getAreasFromMap': true, |
45 'areas': this.get('franceAreas') |
82 'areas': this.get('countriesAreas'), |
46 }); |
83 'zoomLevel': map.zoomLevel(), |
47 this.get('map')['dataProvider'] = this.get('dataProvider'); |
84 'zoomLatitude': map.zoomLatitude(), |
48 this.get('map').validateData(); |
85 'zoomLongitude': map.zoomLongitude() |
49 } |
86 }); |
50 } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) { |
87 map['dataProvider'] = this.get('dataProvider'); |
51 this.setCountriesAreas(); |
88 map['zoomControl'] = { |
52 this.set('dataProvider', { |
89 'zoomControlEnabled': true |
53 'mapVar': this.get('countriesMapVar'), |
90 }; |
54 'getAreasFromMap': true, |
91 map['dragMap'] = true; |
55 'areas': this.get('countriesAreas'), |
92 map.validateData(); |
56 'zoomLevel': this.get('map').zoomLevel(), |
93 } |
57 'zoomLatitude': this.get('map').zoomLatitude(), |
94 } else { |
58 'zoomLongitude': this.get('map').zoomLongitude() |
95 this.setProperties({ |
59 }); |
96 area: 'continents', |
60 this.get('map')['dataProvider'] = this.get('dataProvider'); |
97 originalZoomLevel: null, |
61 this.get('map').validateData(); |
98 originalZoomLongitude: null, |
62 } |
99 originalZoomLatitude: null, |
63 } else { |
100 }); |
64 this.setContinentsAreas(); |
101 this.setContinentsAreas(); |
65 this.set('dataProvider', { |
102 this.set('dataProvider', { |
66 'mapVar': this.get('continentsMapVar'), |
103 'mapVar': this.get('continentsMapVar'), |
67 'areas': this.get('continentsAreas') |
104 'areas': this.get('continentsAreas') |
68 }); |
105 }); |
69 this.createAmMap(); |
106 map['zoomControl'] = { |
70 } |
107 'zoomControlEnabled': false |
|
108 }; |
|
109 map['dragMap'] = false; |
|
110 this.createAmMap(); |
|
111 } |
|
112 }), |
|
113 |
|
114 init: function () { |
|
115 this._super(...arguments); |
|
116 if (ENV.environment === 'development') { |
|
117 this.set('color', '#f3f3f3'); |
|
118 } |
|
119 this.get('service'); // gotcha cf: https://github.com/emberjs/ember.js/issues/10821 |
|
120 }, |
|
121 |
|
122 setFranceAreas: function () { |
|
123 var self = this; |
|
124 var france2016LowAreas = []; |
|
125 this.get('franceMapVar')['svg']['g']['path'].forEach(function (area) { |
|
126 var object = { |
|
127 'id': area.id, |
|
128 'passZoomValuesToTarget': false, |
|
129 'autoZoom': false |
|
130 }; |
|
131 var departments = self.get('geostats').find(geostat => geostat.id === area.id); |
|
132 if (typeof departments === 'undefined') { |
|
133 object['mouseEnabled'] = false; |
|
134 object['color'] = self.get('color'); |
|
135 } else { |
|
136 object['value'] = departments.get('count'); |
|
137 object['title'] = area.title + " (" + departments.get('count') + ")"; |
|
138 } |
|
139 france2016LowAreas.push(object); |
|
140 }); |
|
141 this.set('franceAreas', france2016LowAreas); |
|
142 }, |
|
143 |
|
144 setCountriesAreas: function () { |
|
145 var self = this; |
|
146 var worldLowAreas = []; |
|
147 this.get('countriesMapVar')['svg']['g']['path'].forEach(function (area) { |
|
148 var countries = self.get('geostats').find(geostat => geostat.id === area.id); |
|
149 if (typeof countries === 'undefined') { |
|
150 worldLowAreas.push({ |
|
151 'id': area.id, |
|
152 'mouseEnabled': false, |
|
153 'color': self.get('color') |
|
154 }); |
|
155 } else { |
|
156 if (typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { |
|
157 var object = { |
|
158 'id': area.id, |
|
159 'selectable': true, |
|
160 'value': countries.get('count'), |
|
161 'title': area.title + " (" + countries.get('count') + ")" |
|
162 }; |
|
163 if (area.id === 'FR') { |
|
164 object['autoZoom'] = true; |
|
165 } |
|
166 worldLowAreas.push(object); |
71 } |
167 } |
72 }), |
168 } |
73 |
169 }); |
74 init: function() { |
170 this.set('countriesAreas', worldLowAreas); |
75 this._super(...arguments); |
171 }, |
76 if (ENV.environment === 'development') { |
172 |
77 this.set('color', '#f3f3f3'); |
173 setContinentsAreas: function () { |
78 } |
174 var self = this; |
79 this.get('service'); // gotcha cf: https://github.com/emberjs/ember.js/issues/10821 |
175 var continentsLowAreas = []; |
80 }, |
176 this.get('continentsMapVar')['svg']['g']['path'].forEach(function (area) { |
81 |
177 var object = { |
82 setFranceAreas: function() { |
178 'id': area.id, |
83 var self = this; |
179 'passZoomValuesToTarget': true, |
84 var france2016LowAreas = []; |
180 'selectable': true, |
85 this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) { |
181 'mouseEnabled': true, |
86 var object = { |
182 'autoZoom': true |
87 'id': area.id, |
183 }; |
88 'passZoomValuesToTarget': false, |
184 var continent = self.get('geostats').find(geostat => geostat.id === area.id); |
89 'autoZoom': false |
185 if (typeof continent === 'undefined') { |
90 }; |
186 object['mouseEnabled'] = false; |
91 var departments = self.get('geostats').find(geostat => geostat.id === area.id); |
187 object['color'] = self.get('color'); |
92 if(typeof departments === 'undefined') { |
188 } else { |
93 object['mouseEnabled'] = false; |
189 object['value'] = continent.get('count'); |
94 object['color'] = self.get('color'); |
190 object['title'] = area.title + " (" + continent.get('count') + ")"; |
95 } else { |
191 } |
96 object['value'] = departments.get('count'); |
192 continentsLowAreas.push(object); |
97 object['title'] = area.title + " (" + departments.get('count') + ")"; |
193 }); |
98 } |
194 this.set('continentsAreas', continentsLowAreas); |
99 france2016LowAreas.push(object); |
195 }, |
100 }); |
196 |
101 this.set('franceAreas', france2016LowAreas); |
197 didInsertElement: function () { |
102 }, |
198 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
103 |
199 this.createAmMap(); |
104 setCountriesAreas: function() { |
200 }, |
105 var self = this; |
201 |
106 var worldLowAreas = []; |
202 createAmMap: function () { |
107 this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) { |
203 |
108 var countries = self.get('geostats').find(geostat => geostat.id === area.id); |
204 this.setContinentsAreas(); |
109 if(typeof countries === 'undefined') { |
205 this.set('dataProvider', { |
110 worldLowAreas.push({ |
206 'mapVar': this.get('continentsMapVar'), |
111 'id': area.id, |
207 'areas': this.get('continentsAreas') |
112 'mouseEnabled': false, |
208 }); |
113 'color': self.get('color') |
209 this.set('map', AmCharts.makeChart('mapdiv', { |
114 }); |
210 'type': 'map', |
115 } else { |
211 'accessible': true, |
116 if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') { |
212 'fontFamily': 'sans-serif', |
117 var object = { |
213 'fontSize': '12px', |
118 'id': area.id, |
214 'dragMap': false, |
119 'selectable': true, |
215 'zoomOnDoubleClick': false, |
120 'value': countries.get('count'), |
216 'language': 'fr', |
121 'title': area.title + " (" + countries.get('count') + ")" |
217 'areasSettings': { |
122 }; |
218 'autoZoom': false, |
123 if(area.id === 'FR') { |
219 'selectable': true, |
124 object['autoZoom'] = true; |
220 'color': this.get('colors').LINEAR_COLOR_START, |
125 } |
221 'colorSolid': this.get('colors').LINEAR_COLOR_END, |
126 worldLowAreas.push(object); |
222 'colorOutline': '#253946', |
127 } |
223 'selectedColor': '#0085cb', |
128 } |
224 'rollOverColor': '#0085cb', |
129 }); |
225 'rollOverOutlineColor': '#ffffff' |
130 this.set('countriesAreas', worldLowAreas); |
226 }, |
131 }, |
227 'zoomControl': { |
132 |
228 'zoomControlEnabled': false, |
133 setContinentsAreas: function() { |
229 }, |
134 var self = this; |
230 'dataProvider': this.get('dataProvider'), |
135 var continentsLowAreas = []; |
231 listeners: [{ |
136 this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) { |
232 'event': 'clickMapObject', |
137 var object = { |
233 'method': Ember.run.bind(this, 'clickMapObject') |
138 'id': area.id, |
234 }, { |
139 'passZoomValuesToTarget': true, |
235 'event': 'homeButtonClicked', |
140 'selectable': true, |
236 'method': Ember.run.bind(this, 'homeButtonClicked') |
141 'mouseEnabled': true, |
237 }] |
142 'autoZoom': true |
238 })); |
143 }; |
239 }, |
144 var continent = self.get('geostats').find(geostat => geostat.id === area.id); |
240 |
145 if(typeof continent === 'undefined') { |
241 clickMapObject: function (event) { |
146 object['mouseEnabled'] = false; |
242 this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id); |
147 object['color'] = self.get('color'); |
243 }, |
148 } else { |
244 |
149 object['value'] = continent.get('count'); |
245 homeButtonClicked: function () { |
150 object['title'] = area.title + " (" + continent.get('count') + ")"; |
246 const map = this.get('map'); |
151 } |
247 const { area, originalZoomLevel, originalZoomLongitude, originalZoomLatitude } = |
152 continentsLowAreas.push(object); |
248 this.getProperties('area', 'originalZoomLevel', 'originalZoomLongitude', 'originalZoomLatitude'); |
153 }); |
249 |
154 this.set('continentsAreas', continentsLowAreas); |
250 if(area === 'countries' && ( |
155 }, |
251 (originalZoomLevel && originalZoomLevel !== map.zoomLevel()) || |
156 |
252 (originalZoomLatitude && originalZoomLatitude !== map.zoomLatitude()) || |
157 didInsertElement: function(){ |
253 (originalZoomLongitude && originalZoomLongitude !== map.zoomLongitude()) |
158 this.$('#mapdiv').height(Ember.$('.corpus-app-container').height()); |
254 )) { |
159 this.createAmMap(); |
255 // in mode countries, the map has been moved or zoomed, just reset the view |
160 }, |
256 return; |
161 |
257 } |
162 createAmMap: function() { |
258 this.get('filter').removeFilter('location', null); |
163 |
259 this.sendAction('setLocation', this.get('constants').GEONAMES['world']); |
164 this.setContinentsAreas(); |
260 } |
165 this.set('dataProvider', { |
|
166 'mapVar': this.get('continentsMapVar'), |
|
167 'areas': this.get('continentsAreas') |
|
168 }); |
|
169 this.set('map', AmCharts.makeChart('mapdiv', { |
|
170 'type': 'map', |
|
171 'fontFamily': 'sans-serif', |
|
172 'fontSize': '12px', |
|
173 'dragMap': false, |
|
174 'zoomOnDoubleClick': false, |
|
175 'language': 'fr', |
|
176 'areasSettings': { |
|
177 'autoZoom': false, |
|
178 'selectable': true, |
|
179 'color': this.get('colors').LINEAR_COLOR_START, |
|
180 'colorSolid': this.get('colors').LINEAR_COLOR_END, |
|
181 'colorOutline': '#253946', |
|
182 'selectedColor': '#0085cb', |
|
183 'rollOverColor': '#0085cb', |
|
184 'rollOverOutlineColor': '#ffffff' |
|
185 }, |
|
186 'zoomControl': { |
|
187 'zoomControlEnabled': false, |
|
188 }, |
|
189 'dataProvider': this.get('dataProvider'), |
|
190 listeners: [{ |
|
191 'event':'clickMapObject', |
|
192 'method': Ember.run.bind(this, 'clickMapObject') |
|
193 }, { |
|
194 'event':'homeButtonClicked', |
|
195 'method': Ember.run.bind(this, 'homeButtonClicked') |
|
196 }] |
|
197 })); |
|
198 }, |
|
199 |
|
200 clickMapObject: function(event) { |
|
201 this.get('filter').setFilter('location', commonConstants.GEONAMES_BASE_URL + event.mapObject.id); |
|
202 }, |
|
203 |
|
204 homeButtonClicked: function() { |
|
205 this.get('filter').removeFilter('location', null); |
|
206 this.sendAction('setLocation', this.get('constants').GEONAMES['world']); |
|
207 } |
|
208 |
261 |
209 }); |
262 }); |