[IMP] Controls of 0 or less or more than 100 percent are removed. It is...

[IMP] Controls of 0 or less or more than 100 percent are removed. It is calculated in both cases. Changes in the colors of the bars according to the percentage. And the excess above 100 is now calculated linearly and proportionally.

Author: Alvaro Garcia alvaro.garcia@somit.coop

OP#821

energy_selfconsumption/static/src/js/progress_bar.js

 /** @odoo-module **/
 
-import {Component, useState} from "@odoo/owl";
-import {registry} from "@web/core/registry";
+import { Component, useState } from "@odoo/owl";
+import { registry } from "@web/core/registry";
 
 class ProgressBarWidget extends Component {
   setup() {
     // Obtener valores desde this.props
-    const {record} = this.props;
+    const { record } = this.props;
 
     // Configurar el estado inicial usando hooks de OWL
     this.state = useState({
@@ -16,17 +16,21 @@ class ProgressBarWidget extends Component {
     });
 
     // Calcular el porcentaje basado en los valores actuales
-    this.state.percentage = Math.min(
-      (this.state.current_quantity / this.state.max_quantity) * 100,
-      100
-    );
+    this.state.percentage = (this.state.current_quantity / this.state.max_quantity) * 100;
   }
 
   get progressStyle() {
+    let background_color = '#7C7BAD';
+    if (this.state.percentage > 100) {
+      background_color = '#a10000';
+    } else if (this.state.percentage == 100) {
+      background_color = '#00a12a';
+    }
+    let width = this.state.percentage > 100 ? 100 : this.state.percentage;
     return `
-      width: ${this.state.percentage}%;
+      width: ${width}%;
       height: 100%;
-      background-color: #7C7BAD;
+      background-color: ${background_color};
     `;
   }