[UPD] labels

static/src/js/canvas.js

@@ -37,10 +37,10 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
 
             //            Init chart
             this.chart_line_conso = null;
-            this.chart_donuts_conso = null;
+            this.chart_pie_conso = null;
             this.chart_histo_conso = null;
             this.chart_line_prod = null;
-            this.chart_donuts_prod = null;
+            this.chart_pie_prod = null;
             this.chart_histo_prod = null;
 
             this.date_range_picker = null;
@@ -92,8 +92,8 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
 
             var ctx_line_conso = self.$(".line_chart_conso");
             var ctx_line_prod = self.$(".line_chart_prod");
-            var ctx_donuts_conso = self.$(".donuts_chart_conso");
-            var ctx_donuts_prod = self.$(".donuts_chart_prod");
+            var ctx_pie_conso = self.$(".pie_chart_conso");
+            var ctx_pie_prod = self.$(".pie_chart_prod");
             var ctx_histo_conso = self.$(".histo_chart_conso");
             var ctx_histo_prod = self.$(".histo_chart_prod");
 
@@ -119,10 +119,10 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
                     );
                 }
 
-                if (ctx_donuts_conso.length > 0) {
-                    self.chart_donuts_conso = new Chart(
-                        ctx_donuts_conso,
-                        self._getDoughnutChartConfig("cons")
+                if (ctx_pie_conso.length > 0) {
+                    self.chart_pie_conso = new Chart(
+                        ctx_pie_conso,
+                        self._getPieChartConfig("cons")
                     );
                 }
 
@@ -140,10 +140,10 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
                     );
                 }
 
-                if (ctx_donuts_prod.length > 0) {
-                    self.chart_donuts_prod = new Chart(
-                        ctx_donuts_prod,
-                        self._getDoughnutChartConfig("prod")
+                if (ctx_pie_prod.length > 0) {
+                    self.chart_pie_prod = new Chart(
+                        ctx_pie_prod,
+                        self._getPieChartConfig("prod")
                     );
                 }
 
@@ -323,11 +323,11 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
         },
 
         /**
-         * Returns a Doughnut chart configuration.
+         * Returns a Pie chart configuration.
          *
          * @private
          */
-        _getDoughnutChartData: function (typeData) {
+        _getPieChartData: function (typeData) {
             var data, res;
             var sum_res1 = 0;
             var sum_res2 = 0;
@@ -403,25 +403,30 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
             return data;
         },
 
-        _getDoughnutChartConfig: function (typeData) {
-            var data = this._getDoughnutChartData(typeData);
+        _getPieChartConfig: function (typeData) {
+            var data = this._getPieChartData(typeData);
             return {
-                type: "doughnut",
+                type: "pie",
                 data: data,
                 plugins: [ChartDataLabels],
                 options: {
-                    cutoutPercentage: 60,
                     animation: {
                         animateScale: true,
                     },
                     plugins: {
                         datalabels: {
-                            color: "white",
                             font: {
                                 size: 20,
                                 weight: "bold",
                             },
-                            padding: 6,
+                            formatter: (value, data) => {
+                                var total = 0;
+                                data.dataset.data.forEach((num) => {
+                                    total += num;
+                                });
+                                var labelPercentage = Math.round((value / total) * 100);
+                                return value + " kWh (" + labelPercentage + "%)";
+                            },
                         },
                     },
                     tooltips: {
@@ -639,9 +644,9 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
                 self.chart_line_conso.update();
             }
 
-            if (self.chart_donuts_conso !== null) {
-                self.chart_donuts_conso.data = self._getDoughnutChartData("cons");
-                self.chart_donuts_conso.update();
+            if (self.chart_pie_conso !== null) {
+                self.chart_pie_conso.data = self._getPieChartData("cons");
+                self.chart_pie_conso.update();
             }
             if (self.chart_histo_conso !== null) {
                 self.chart_histo_conso.data = self._getBarChartData("cons");
@@ -655,9 +660,9 @@ odoo.define("oacc_portal_overview_cdc.canvas", function (require) {
                 self.chart_line_prod.update();
             }
 
-            if (self.chart_donuts_prod !== null) {
-                self.chart_donuts_prod.data = self._getDoughnutChartData("prod");
-                self.chart_donuts_prod.update();
+            if (self.chart_pie_prod !== null) {
+                self.chart_pie_prod.data = self._getPieChartData("prod");
+                self.chart_pie_prod.update();
             }
 
             if (self.chart_histo_prod !== null) {

templates/operation_templates_page.xml

@@ -262,8 +262,8 @@
             <h3>Bilan</h3>
             <br /><br />
             <canvas
-                id="donuts_chart_conso"
-                class="donuts_chart_conso"
+                id="pie_chart_conso"
+                class="pie_chart_conso"
                 width="auto"
                 height="200"
             />
@@ -303,8 +303,8 @@
             <h3>Bilan</h3>
             <br /><br />
             <canvas
-                id="donuts_chart_prod"
-                class="donuts_chart_prod"
+                id="pie_chart_prod"
+                class="pie_chart_prod"
                 width="auto"
                 height="200"
             />