add visu-langue with google treemap
authornowmad@23.1.168.192.in-addr.arpa
Tue, 01 Dec 2015 13:36:48 +0100
changeset 39 c693e8673d5b
parent 38 2a2402372b6d
child 40 9887379e627f
add visu-langue with google treemap
cms/app-client/app/components/visu-langues.js
cms/app-client/app/templates/components/visu-langues.hbs
cms/app-client/app/templates/tabs/langues.hbs
cms/app-client/tests/integration/components/visu-langues-test.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/visu-langues.js	Tue Dec 01 13:36:48 2015 +0100
@@ -0,0 +1,48 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  didInsertElement: function(){
+    var data = google.visualization.arrayToDataTable([
+      ['Location', 'Parent', 'Market trade volume (size)', 'Market increase/decrease (color)'],
+      ['Global',    null,                 0,                               0],
+      ['America',   'Global',             0,                               0],
+      ['Europe',    'Global',             0,                               0],
+      ['Asia',      'Global',             0,                               0],
+      ['Australia', 'Global',             0,                               0],
+      ['Africa',    'Global',             0,                               0],
+      ['Brazil',    'America',            11,                              10],
+      ['USA',       'America',            52,                              31],
+      ['Mexico',    'America',            24,                              12],
+      ['Canada',    'America',            16,                              -23],
+      ['France',    'Europe',             42,                              -11],
+      ['Germany',   'Europe',             31,                              -2],
+      ['Sweden',    'Europe',             22,                              -13],
+      ['Italy',     'Europe',             17,                              4],
+      ['UK',        'Europe',             21,                              -5],
+      ['China',     'Asia',               36,                              4],
+      ['Japan',     'Asia',               20,                              -12],
+      ['India',     'Asia',               40,                              63],
+      ['Laos',      'Asia',               4,                               34],
+      ['Mongolia',  'Asia',               1,                               -5],
+      ['Israel',    'Asia',               12,                              24],
+      ['Iran',      'Asia',               18,                              13],
+      ['Pakistan',  'Asia',               11,                              -52],
+      ['Egypt',     'Africa',             21,                              0],
+      ['S. Africa', 'Africa',             30,                              43],
+      ['Sudan',     'Africa',             12,                              2],
+      ['Congo',     'Africa',             10,                              12],
+      ['Zaire',     'Africa',             8,                               10]
+    ]);
+
+    var tree = new google.visualization.TreeMap(document.getElementById('chart_div'));
+
+    tree.draw(data, {
+      minColor: '#f00',
+      midColor: '#ddd',
+      maxColor: '#0d0',
+      headerHeight: 15,
+      fontColor: 'black',
+      showScale: true
+    });
+  }
+});
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/templates/components/visu-langues.hbs	Tue Dec 01 13:36:48 2015 +0100
@@ -0,0 +1,1 @@
+<div id="chart_div" style="width: 560px; height: 780px;"></div>
--- a/cms/app-client/app/templates/tabs/langues.hbs	Tue Dec 01 13:36:29 2015 +0100
+++ b/cms/app-client/app/templates/tabs/langues.hbs	Tue Dec 01 13:36:48 2015 +0100
@@ -1,1 +1,2 @@
 <h2>Recherche par langues</h2>
+{{visu-langues}}
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/tests/integration/components/visu-langues-test.js	Tue Dec 01 13:36:48 2015 +0100
@@ -0,0 +1,26 @@
+import { moduleForComponent, test } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+
+moduleForComponent('visu-langues', 'Integration | Component | visu langues', {
+  integration: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Set any properties with this.set('myProperty', 'value');
+  // Handle any actions with this.on('myAction', function(val) { ... });
+
+  this.render(hbs`{{visu-langues}}`);
+
+  assert.equal(this.$().text().trim(), '');
+
+  // Template block usage:
+  this.render(hbs`
+    {{#visu-langues}}
+      template block text
+    {{/visu-langues}}
+  `);
+
+  assert.equal(this.$().text().trim(), 'template block text');
+});