Add button active + label

static/src/js/operation_graph.js

@@ -15,6 +15,7 @@ odoo.define('enercoop_cdc.operation_graph', function (require) {
         _render: async function () {
             var self = this;
             await this._super(...arguments);
+
             var result = self.state.chartValues;
             var options = { options: {
                 scales: {
@@ -76,13 +77,20 @@ odoo.define('enercoop_cdc.operation_graph', function (require) {
 	    		histo_prod,
 	    		Object.assign({}, result.histo_chart_prod, options_stacked)
 	    	);
-
-            console.log(result)
+            this.$el.find('.o_enercoop_button').removeClass('active');
+            if (this.state.scale) {
+                var $but = this.$el.find('.o_enercoop_button[data-mode="' + this.state.scale + '"]')
+            }
+            else {
+                var $but = this.$el.find('.o_enercoop_button[data-mode="month"]')
+            }
+            $but.addClass('active');
         },
 
         _onChartClicked: function (e) {
             e.preventDefault();
             var $action = $(e.currentTarget);
+            $action.addClass('active');
             this.trigger_up('chart_open_action', {
                 action_name: $action.attr('name'),
                 action_context: $action.attr('context'),
@@ -178,6 +186,8 @@ odoo.define('enercoop_cdc.operation_graph', function (require) {
          */
         _onChartClicked: function (e) {
             this.model.setScale(e.data.action_name);
+            var state = this.model.get();
+            state.scale = e.data.action_name
             this.reload();
         },
     });

views/enercoop_operation_templates.xml

@@ -21,11 +21,11 @@
                     <div class="o_timesheet_plan_sale_timesheet">
                         <div class="o_timesheet_plan_sale_timesheet_dashboard">
                             <div class="container text-center mt32 mb32">
-                                <button name="day" class="btn btn-secondary o_enercoop_button" title="Dernier jour" aria-label="Dernier jour" ><strong>Dernière journée</strong><br/><t t-esc="data_values['last_day']"/></button>
-                                <button name="week" class="btn btn-secondary o_enercoop_button" title="7 derniers jours" aria-label="7 derniers jours"><strong>7 derniers jours</strong><br/><t t-esc="data_values['last_week']"/></button>
-                                <button name="month" class="btn btn-secondary o_enercoop_button" title="Dernier mois" aria-label="Dernier mois"><strong>Dernier mois</strong><br/><t t-esc="data_values['last_month']"/></button>
-                                <button name="semestre" class="btn btn-secondary o_enercoop_button" title="6 derniers mois" aria-label="6 derniers mois"><strong>6 derniers mois</strong><br/><t t-esc="data_values['last_semestre']"/></button>
-                                <button name="year" class="btn btn-secondary o_enercoop_button" title="12 derniers mois" aria-label="12 derniers mois"><strong>12 derniers mois</strong><br/><t t-esc="data_values['last_year']"/></button>
+                                <button name="day" class="btn btn-secondary o_enercoop_button" title="Dernier jour" aria-label="Dernier jour" data-mode="day"><strong>Dernière journée</strong><br/><t t-esc="data_values['last_day']"/></button>
+                                <button name="week" class="btn btn-secondary o_enercoop_button" title="7 derniers jours" aria-label="7 derniers jours" data-mode="week"><strong>7 derniers jours</strong><br/><t t-esc="data_values['last_week']"/></button>
+                                <button name="month" class="btn btn-secondary o_enercoop_button" title="Dernier mois" aria-label="Dernier mois" data-mode="month"><strong>Dernier mois</strong><br/><t t-esc="data_values['last_month']"/></button>
+                                <button name="semestre" class="btn btn-secondary o_enercoop_button" title="6 derniers mois" aria-label="6 derniers mois" data-mode="semestre"><strong>6 derniers mois</strong><br/><t t-esc="data_values['last_semestre']"/></button>
+                                <button name="year" class="btn btn-secondary o_enercoop_button" title="12 derniers mois" aria-label="12 derniers mois" data-mode="year"><strong>12 derniers mois</strong><br/><t t-esc="data_values['last_year']"/></button>
                             </div>
                             <div class="text-center o_title mt32">
                                 <h2>Vues Consommateurs</h2>