audrius/reporting-engine
1
0
Fork 1
mirror of https://github.com/OCA/reporting-engine.git synced 2025-02-16 16:30:38 +02:00
Code Issues Packages Projects Releases Wiki Activity

[FIX] kpi_dashboard: Meter widget supports customization using parameters

Browse Source 
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
This commit is contained in:
Lijo Antony
2022-07-26 16:43:51 +04:00
committed by Lijo Antony
parent 838a06d0be
commit e14f77b618
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
kpi_dashboard/demo/demo_dashboard.xml
View File

@@ -29,17 +29,19 @@
/> />
<record id="widget_meter_01" model="kpi.kpi"> <record id="widget_meter_01" model="kpi.kpi">
<field name="name">Meter 01</field> <field name="name">Meter 01</field>
<field name="suffix">€</field> <field name="suffix">%</field>
<field name="computation_method">code</field> <field name="computation_method">code</field>
<field name="widget">meter</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>
<record id="widget_meter_02" model="kpi.kpi"> <record id="widget_meter_02" model="kpi.kpi">
<field name="name">Meter 02</field> <field name="name">Meter 02</field>
<field name="prefix">$</field> <field name="prefix">$</field>
<field name="computation_method">code</field> <field name="computation_method">code</field>
<field name="widget">meter</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> </record>
<function <function
model="kpi.kpi" model="kpi.kpi"

2
kpi_dashboard/readme/CONFIGURE.rst
View File

@@ -5,7 +5,7 @@ Configure KPIs
#. Create a new KPI specifying the computation method and the kpi type #. Create a new KPI specifying the computation method and the kpi type
#. Number: result must contain a `value` and, if needed, a `previous` #. 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` #. 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 #. In order to compute the KPI you can use a predefined function from a model or

3
kpi_dashboard/static/src/js/widget/meter_widget.js
View File

@@ -17,7 +17,6 @@ odoo.define("kpi_dashboard.MeterWidget", function (require) {
_getMeterOptions: function (values) { _getMeterOptions: function (values) {
var size = Math.min(this.widget_size_x, this.widget_size_y - 40) - 10; var size = Math.min(this.widget_size_x, this.widget_size_y - 40) - 10;
return { return {
percent: values.value.value,
style: "Arch", style: "Arch",
width: 10, width: 10,
size: size, size: size,
@@ -25,6 +24,8 @@ odoo.define("kpi_dashboard.MeterWidget", function (require) {
append: values.suffix === undefined ? "" : values.suffix, append: values.suffix === undefined ? "" : values.suffix,
color: values.font_color, color: values.font_color,
animate_text_colors: true, animate_text_colors: true,
...(values.value.value && {percent: values.value.value}),
...values.value,
}; };
}, },
}); });