--- a/cms/app-client/app/components/visu-chrono.js	Thu Jul 07 11:06:11 2016 +0200
+++ b/cms/app-client/app/components/visu-chrono.js	Thu Jul 07 16:11:59 2016 +0200
@@ -95,6 +95,33 @@
         dates.map(function(date){
             Ember.$("#" + date).toggleClass("highlighted", true);
         });
+    },
+
+    actions : {
+
+        selectDecade: function(decade) {
+            var array = [];
+            var next = decade + 10;
+            var dates = this.get('filter').get('date');
+            while(decade < next) {
+                array.push(decade);
+                decade ++;
+            }
+            if(array.find(function(date){ return dates.indexOf(date) === -1; })) {
+                array = array.filter(function(value) {
+                    return dates.indexOf(value) === -1;
+                });
+                array = dates.concat(array);
+                // Ascending sorting.
+                array.sort(function(a, b) { return a - b; });
+            } else {
+                array = dates.filter(function(value) {
+                    return array.indexOf(value) === -1;
+                });
+            }
+            this.get('filter').set('date', array);
+        }
+
     }
 
 });

--- a/cms/app-client/app/styles/tabs/chrono.scss	Thu Jul 07 11:06:11 2016 +0200
+++ b/cms/app-client/app/styles/tabs/chrono.scss	Thu Jul 07 16:11:59 2016 +0200
@@ -7,12 +7,12 @@
     margin-bottom: 5px;
 }
 
-#chrono-table .tens {
+#chrono-table .decades {
     color: $medium-grey;
     font-size: 13px;
 }
 
-#chrono-table .tens::after {
+#chrono-table .decades::after {
     content: ' -';
 }
 

--- a/cms/app-client/app/templates/components/visu-chrono.hbs	Thu Jul 07 11:06:11 2016 +0200
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs	Thu Jul 07 16:11:59 2016 +0200
@@ -1,5 +1,5 @@
 <div class="interval">
-    <span class="tens">1960</span>
+    <span class="decades"{{ action 'selectDecade' 1960}}>1960</span>
     <ul class="1960">
         <li title="1960" id="1960">1960</li>
         <li title="1961" id="1961">1961</li>
@@ -14,7 +14,7 @@
     </ul>
 </div>
 <div class="interval">
-    <span class="tens">1970</span>
+    <span class="decades"{{ action 'selectDecade' 1970}}>1970</span>
     <ul class="1970">
         <li title="1970" id="1970">1970</li>
         <li title="1971" id="1971">1971</li>
@@ -29,7 +29,7 @@
     </ul>
 </div>
 <div class="interval">
-    <span class="tens">1980</span>
+    <span class="decades"{{ action 'selectDecade' 1980}}>1980</span>
     <ul class="1980">
         <li title="1980" id="1980">1980</li>
         <li title="1981" id="1981">1981</li>
@@ -44,7 +44,7 @@
     </ul>
 </div>
 <div class="interval">
-    <span class="tens">1990</span>
+    <span class="decades"{{ action 'selectDecade' 1990}}>1990</span>
     <ul class="1990">
         <li title="1990" id="1990">1990</li>
         <li title="1991" id="1991">1991</li>
@@ -59,7 +59,7 @@
     </ul>
 </div>
 <div class="interval">
-    <span class="tens">2000</span>
+    <span class="decades"{{ action 'selectDecade' 2000}}>2000</span>
     <ul class="2000">
         <li title="2000" id="2000">2000</li>
         <li title="2001" id="2001">2001</li>
@@ -74,7 +74,7 @@
     </ul>
 </div>
 <div class="interval">
-    <span class="tens">2010</span>
+    <span class="decades"{{ action 'selectDecade' 2010}}>2010</span>
     <ul class="2010">
         <li title="2010" id="2010">2010</li>
         <li title="2011" id="2011">2011</li>