1 import Ember from 'ember'; |
1 import Ember from 'ember'; |
2 |
2 |
3 export default Ember.Component.extend({ |
3 export default Ember.Component.extend({ |
4 didInsertElement: function(){ |
4 didInsertElement: function(){ |
|
5 var _this = this; |
|
6 |
5 var data = google.visualization.arrayToDataTable([ |
7 var data = google.visualization.arrayToDataTable([ |
6 ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'], |
8 ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'], |
7 ['Global', null, 0, 0], |
9 ['Global', null, 0, 0], |
8 ['Français', 'Global', 859, 859], |
10 ['Français', 'Global', 859, 859], |
9 ['Alsacien', 'Global', 851, 851], |
11 ['Alsacien', 'Global', 851, 851], |
48 ['Numee (kdk)', 'Nouvelle-Calédonie', 1, 1], |
50 ['Numee (kdk)', 'Nouvelle-Calédonie', 1, 1], |
49 ['Yuaga (nua)', 'Nouvelle-Calédonie', 1, 1], |
51 ['Yuaga (nua)', 'Nouvelle-Calédonie', 1, 1], |
50 ['Bwatoo (bwa)', 'Nouvelle-Calédonie', 4, 4] |
52 ['Bwatoo (bwa)', 'Nouvelle-Calédonie', 4, 4] |
51 ]); |
53 ]); |
52 |
54 |
53 |
|
54 |
|
55 |
|
56 |
|
57 var tree = new google.visualization.TreeMap(document.getElementById('chart_div')); |
55 var tree = new google.visualization.TreeMap(document.getElementById('chart_div')); |
58 |
56 |
59 tree.draw(data, { |
57 tree.draw(data, { |
60 minColor: '#E0EEEF', |
58 minColor: '#E0EEEF', |
61 midColor: '#7CACAE', |
59 midColor: '#7CACAE', |
62 maxColor: '#2D7073', |
60 maxColor: '#2D7073', |
63 headerHeight: 15, |
61 headerHeight: 15, |
64 fontColor: 'black', |
62 fontColor: 'black', |
65 showScale: true |
63 showScale: true |
66 }); |
64 }); |
|
65 |
|
66 function selectHandler (){ |
|
67 console.log(data.getValue(tree.getSelection()[0].row, 0)); |
|
68 _this.sendAction('action', data.getValue(tree.getSelection()[0].row, 0)); |
|
69 } |
|
70 |
|
71 google.visualization.events.addListener(tree, 'select', selectHandler); |
|
72 |
67 } |
73 } |
68 }); |
74 }); |