From e14f77b6184c8c58964645afa12e2ada6a966eed Mon Sep 17 00:00:00 2001
From: Lijo Antony <lijo@boxitstorage.com>
Date: Tue, 26 Jul 2022 16:43:51 +0400
Subject: [PATCH] [FIX] kpi_dashboard: Meter widget supports customization
 using parameters

Meter widget is implemented with GaugeMeter (https://github.com/Mictronics/GaugeMeter). GaugeMeter provides a number of parameters to customize its display.  See https://github.com/Mictronics/GaugeMeter#parameter-definitions for details.

Allow user to customize GaugeMeter by setting the customization parameters in the result.
This mechanism can be used to show actual values instead of percentages by setting total, used & showvalue parameter in the result.
Fixes #428
---
 kpi_dashboard/demo/demo_dashboard.xml              | 8 +++++---
 kpi_dashboard/readme/CONFIGURE.rst                 | 2 +-
 kpi_dashboard/static/src/js/widget/meter_widget.js | 3 ++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/kpi_dashboard/demo/demo_dashboard.xml b/kpi_dashboard/demo/demo_dashboard.xml
index 7b04070a9..c8249bdd8 100644
--- a/kpi_dashboard/demo/demo_dashboard.xml
+++ b/kpi_dashboard/demo/demo_dashboard.xml
@@ -29,17 +29,19 @@
     />
     <record id="widget_meter_01" model="kpi.kpi">
         <field name="name">Meter 01</field>
-        <field name="suffix">€</field>
+        <field name="suffix">%</field>
         <field name="computation_method">code</field>
         <field name="widget">meter</field>
-        <field name="code">result = {"min": 0, "max": 100, "value": 90}</field>
+        <field name="code">result = {"value": 90}</field>
     </record>
     <record id="widget_meter_02" model="kpi.kpi">
         <field name="name">Meter 02</field>
         <field name="prefix">$</field>
         <field name="computation_method">code</field>
         <field name="widget">meter</field>
-        <field name="code">result = {"min": 0, "max": 100, "value": 40}</field>
+        <field
+            name="code"
+        >result = {"min": 0, "total": 200, "used": 90, showvalue: True}</field>
     </record>
     <function
         model="kpi.kpi"
diff --git a/kpi_dashboard/readme/CONFIGURE.rst b/kpi_dashboard/readme/CONFIGURE.rst
index a4e700e98..68bfbc7a1 100644
--- a/kpi_dashboard/readme/CONFIGURE.rst
+++ b/kpi_dashboard/readme/CONFIGURE.rst
@@ -5,7 +5,7 @@ Configure KPIs
 #. Create a new KPI specifying the computation method and the kpi type
 
    #. Number: result must contain a `value` and, if needed, a `previous`
-   #. Meter: result must contain `value`, `min` and `max`
+   #. Meter: To show a percentage value, result must contain `value`. `value` must be a positive integer between 0 to 100. Meter is implemented with GaugeMeter (https://github.com/Mictronics/GaugeMeter). It can be customized by setting parameters for GaugeMeter in result. See https://github.com/Mictronics/GaugeMeter#parameter-definitions for details.
    #. Graph: result must contain a list on `graphs` containing `values`, `title` and `key`
 
 #. In order to compute the KPI you can use a predefined function from a model or
diff --git a/kpi_dashboard/static/src/js/widget/meter_widget.js b/kpi_dashboard/static/src/js/widget/meter_widget.js
index 9ca051f59..062f03e51 100644
--- a/kpi_dashboard/static/src/js/widget/meter_widget.js
+++ b/kpi_dashboard/static/src/js/widget/meter_widget.js
@@ -17,7 +17,6 @@ odoo.define("kpi_dashboard.MeterWidget", function (require) {
         _getMeterOptions: function (values) {
             var size = Math.min(this.widget_size_x, this.widget_size_y - 40) - 10;
             return {
-                percent: values.value.value,
                 style: "Arch",
                 width: 10,
                 size: size,
@@ -25,6 +24,8 @@ odoo.define("kpi_dashboard.MeterWidget", function (require) {
                 append: values.suffix === undefined ? "" : values.suffix,
                 color: values.font_color,
                 animate_text_colors: true,
+                ...(values.value.value && {percent: values.value.value}),
+                ...values.value,
             };
         },
     });