[FIX] web: fix percentpie value rounding

Fix the rounding of the percentpie field value as it was sometimes
displaying a very long number due to python rounding precision.
The value is now displayed rounded to 2 decimals without trailing zeros.

Task-3648755

closes odoo/odoo#149226

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/views/fields/percent_pie/percent_pie_field.js

@@ -2,6 +2,7 @@
 
 import { registry } from "@web/core/registry";
 import { _t } from "@web/core/l10n/translation";
+import { formatFloat } from "../formatters";
 import { standardFieldProps } from "../standard_field_props";
 
 import { Component } from "@odoo/owl";
@@ -12,6 +13,15 @@ export class PercentPieField extends Component {
         ...standardFieldProps,
         string: { type: String, optional: true },
     };
+
+    /**
+     * Format to 2 decimals without trailing zeros.
+     */
+    get formattedValue() {
+        return formatFloat(this.props.record.data[this.props.name], {
+            trailingZeros: false,
+        });
+    }
 }
 
 export const percentPieField = {

addons/web/static/src/views/fields/percent_pie/percent_pie_field.xml

@@ -10,7 +10,7 @@
         />
 
         <div class="o_pie_info">
-            <span class="o_pie_value" t-esc="props.record.data[props.name] + '%'"/>
+            <span class="o_pie_value" t-esc="formattedValue + '%'"/>
             <span class="o_pie_text" t-esc="props.string"/>
         </div>
     </t>

addons/web/static/tests/views/fields/percent_pie_field_tests.js

@@ -26,10 +26,17 @@ QUnit.module("Fields", (hooks) => {
                             sortable: true,
                             searchable: true,
                         },
+                        float_field: {
+                            string: "float_field",
+                            type: "float",
+                            sortable: true,
+                            searchable: true,
+                        },
                     },
                     records: [
                         { id: 1, foo: "yop", int_field: 10 },
                         { id: 2, foo: "gnap", int_field: 80 },
+                        { id: 3, foo: "blip", float_field: 33.3333 },
                     ],
                     onchanges: {},
                 },
@@ -112,4 +119,40 @@ QUnit.module("Fields", (hooks) => {
             "pie should have a background computed for its value of 80%"
         );
     });
+
+    QUnit.test("PercentPieField in form view with float value", async function (assert) {
+        await makeView({
+            serverData,
+            type: "form",
+            resModel: "partner",
+            arch: `
+                <form>
+                    <sheet>
+                        <group>
+                            <field name="float_field" widget="percentpie"/>
+                        </group>
+                    </sheet>
+                </form>`,
+            resId: 3,
+        });
+
+        assert.containsOnce(
+            target,
+            ".o_field_percent_pie.o_field_widget .o_pie",
+            "should have a pie chart"
+        );
+        assert.strictEqual(
+            target.querySelector(".o_field_percent_pie.o_field_widget .o_pie_info .o_pie_value")
+                .textContent,
+            "33.33%",
+            "should have 33.33% as pie value since float_field=33.3333 and its value is rounded to 2 decimals"
+        );
+        assert.strictEqual(
+            target
+                .querySelector(".o_field_percent_pie.o_field_widget .o_pie")
+                .style.background.replaceAll(/\s+/g, " "),
+            "conic-gradient( var(--PercentPieField-color-active) 0% 33.3333%, var(--PercentPieField-color-static) 0% 100% )",
+            "pie should have a background computed for its value of 33.3333%"
+        );
+    });
 });