[FIX] charts: wrong padding for humanize number section

closes #7368

Task: 5155591
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Adrien Minne (adrm) <[email protected]>

Author: hokolomopo

src/components/side_panel/chart/building_blocks/humanize_numbers/humanize_numbers.ts

@@ -1,3 +1,5 @@
+import { _t } from "@odoo/o-spreadsheet-engine";
+import { formatLargeNumber, formatValue } from "@odoo/o-spreadsheet-engine/helpers/format/format";
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component } from "@odoo/owl";
 import { ChartWithDataSetDefinition, DispatchResult, UID } from "../../../../../types";
@@ -21,4 +23,11 @@ export class ChartHumanizeNumbers extends Component<Props, SpreadsheetChildEnv>
     updateChart: Function,
     canUpdateChart: Function,
   };
+
+  get title() {
+    const locale = this.env.model.getters.getLocale();
+    const format = formatLargeNumber({ value: 1234567 }, undefined, locale);
+    const value = formatValue(1234567, { format, locale });
+    return _t("E.g. 1234567 -> %(value)s", { value });
+  }
 }

src/components/side_panel/chart/building_blocks/humanize_numbers/humanize_numbers.xml

@@ -2,7 +2,8 @@
   <t t-name="o-spreadsheet-ChartHumanizeNumbers">
     <Checkbox
       name="'humanizeNumbers'"
-      label.translate="Make numbers human-readable"
+      label.translate="Use compact format"
+      title="title"
       value="props.definition.humanize ?? true"
       onChange="(humanize) => props.updateChart(this.props.chartId, { humanize })"
     />

src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml

@@ -16,7 +16,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/funnel_chart_panel/funnel_chart_design_panel.xml

@@ -5,7 +5,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/gauge_chart_panel/gauge_chart_design_panel.xml

@@ -2,7 +2,7 @@
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/geo_chart_panel/geo_chart_design_panel.xml

@@ -14,7 +14,7 @@
             <option value="left">Bottom left</option>
           </select>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/line_chart/line_chart_design_panel.xml

@@ -16,7 +16,7 @@
             className="'mb-2'"
           />
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/pie_chart/pie_chart_design_panel.xml

@@ -6,7 +6,7 @@
         <Section class="'pt-0'" title.translate="Values">
           <ChartShowValues t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
         <PieHoleSize

src/components/side_panel/chart/radar_chart/radar_chart_design_panel.xml

@@ -7,7 +7,7 @@
           <ChartShowValues t-props="props"/>
           <ChartShowDataMarkers t-props="props"/>
         </Section>
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>

src/components/side_panel/chart/scorecard_chart_panel/scorecard_chart_design_panel.xml

@@ -4,7 +4,7 @@
     <t t-set="color_down">Color Down</t>
     <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
-        <Section class="'pt-1'" title.translate="Number formatting">
+        <Section class="'pt-0'" title.translate="Number formatting">
           <ChartHumanizeNumbers t-props="props"/>
         </Section>
       </t>