diff -r 4fbe94af93e8 -r 5ef3bfef0bff cms/app-client/app/components/visu-chrono-year.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/components/visu-chrono-year.js	Sun Nov 06 03:44:16 2016 +0100
@@ -0,0 +1,61 @@
+import Ember from 'ember';
+import _ from 'lodash/lodash';
+
+export default Ember.Component.extend({
+
+    colors: Ember.inject.service(),
+    filter: Ember.inject.service(),
+
+    tagName: 'li',
+    classNameBindings: ['isDisabled:disabled', 'isDark:light-color', 'isHighlighted:highlighted'],
+    attributeBindings: ['style', 'title', 'id'],
+
+    isDisabled: Ember.computed('range', 'year', 'count', function() {
+        let year = parseInt(this.get('year'));
+        let count = this.get('count');
+        return (!_.inRange(year, this.get('range')[0], this.get('range')[1]+1)) || count === 0;
+    }),
+
+    isHighlighted: Ember.computed('filter.dateList.[]', function() {
+        return _.contains(this.get('filter.dateList'), this.get('year'));
+    }),
+    isDark: Ember.computed('backgroundColor', 'isDisabled', function() {
+        let backgroundColor = this.get('backgroundColor');
+        if(this.get('isDisabled')) {
+            return false;
+        }
+        return this.get('colors').getPerceptiveLuminance(this.get('backgroundColor')) >= 0.5;
+    }),
+
+    backgroundColor: Ember.computed('count', 'maxCount', 'minCount', function() {
+        return this.get('colors').shadeLinear(this.get('count'), this.get('minCount'), this.get('maxCount'));
+    }),
+
+    style: Ember.computed('backgroundColor', 'isDisabled', 'isHighlighted', function() {
+        let backgroundColor = this.get('backgroundColor');
+        if(this.get('isDisabled') || this.get('isHighlighted')) {
+          return null;
+        }
+        return Ember.String.htmlSafe(`background-color: ${backgroundColor};`);
+    }),
+    id: Ember.computed.alias('year'),
+    count: Ember.computed('datestats.[]', function() {
+        let year = this.get('year');
+        let count = this.get('datestats').get(`${year}`);
+        return count?count:0;
+    }),
+    title: Ember.computed('count', 'isDsabled', function() {
+        if(this.get('isDisabled')) {
+            return null;
+        }
+        let year = this.get('year');
+        let count = this.get('count');
+        return `${year} (${count})`;
+    }),
+
+    year: null,
+    datestats: null,
+    range: null,
+    maxCount: null,
+    minCount: null,
+});