[FIX] charts: missing humanizeNumbers checkbox in some panels

The `humanizeNumbers` checkbox was missing in the design panels of
sunburst, treemap and bar charts.

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

Author: hokolomopo

src/components/side_panel/chart/sunburst_chart/sunburst_chart_design_panel.ts

@@ -13,6 +13,7 @@ import { SidePanelCollapsible } from "../../components/collapsible/side_panel_co
 import { RoundColorPicker } from "../../components/round_color_picker/round_color_picker";
 import { Section } from "../../components/section/section";
 import { GeneralDesignEditor } from "../building_blocks/general_design/general_design_editor";
+import { ChartHumanizeNumbers } from "../building_blocks/humanize_numbers/humanize_numbers";
 import { ChartLegend } from "../building_blocks/legend/legend";
 import { PieHoleSize } from "../building_blocks/pie_hole_size/pie_hole_size";
 import { ChartShowValues } from "../building_blocks/show_values/show_values";
@@ -37,6 +38,7 @@ export class SunburstChartDesignPanel extends Component<Props, SpreadsheetChildE
     RoundColorPicker,
     ChartLegend,
     PieHoleSize,
+    ChartHumanizeNumbers,
   };
   static props = {
     chartId: String,

src/components/side_panel/chart/sunburst_chart/sunburst_chart_design_panel.xml

@@ -3,6 +3,9 @@
     <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
 

src/components/side_panel/chart/treemap_chart/treemap_chart_design_panel.ts

@@ -14,6 +14,7 @@ import { SidePanelCollapsible } from "../../components/collapsible/side_panel_co
 import { RoundColorPicker } from "../../components/round_color_picker/round_color_picker";
 import { Section } from "../../components/section/section";
 import { GeneralDesignEditor } from "../building_blocks/general_design/general_design_editor";
+import { ChartHumanizeNumbers } from "../building_blocks/humanize_numbers/humanize_numbers";
 import { ChartShowValues } from "../building_blocks/show_values/show_values";
 import { TextStyler } from "../building_blocks/text_styler/text_styler";
 import { TreeMapCategoryColors } from "./treemap_category_color/treemap_category_color";
@@ -52,6 +53,7 @@ export class TreeMapChartDesignPanel extends Component<Props, SpreadsheetChildEn
     BadgeSelection,
     TreeMapCategoryColors,
     TreeMapColorScale,
+    ChartHumanizeNumbers,
   };
   static props = {
     chartId: String,

src/components/side_panel/chart/treemap_chart/treemap_chart_design_panel.xml

@@ -69,6 +69,9 @@
             hasVerticalAlign="true"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </SidePanelCollapsible>
   </t>

src/components/side_panel/chart/zoomable_chart/design_panel.ts

@@ -5,6 +5,7 @@ import {
   ZoomableChartDefinition,
 } from "../../../../types/index";
 import { Checkbox } from "../../components/checkbox/checkbox";
+import { ChartHumanizeNumbers } from "../building_blocks/humanize_numbers/humanize_numbers";
 import { ChartWithAxisDesignPanel } from "../chart_with_axis/design_panel";
 
 interface Props {
@@ -27,6 +28,7 @@ export class GenericZoomableChartDesignPanel<
   static components = {
     ...ChartWithAxisDesignPanel.components,
     Checkbox,
+    ChartHumanizeNumbers,
   };
 
   onToggleZoom(zoomable: boolean) {

src/components/side_panel/chart/zoomable_chart/design_panel.xml

@@ -15,6 +15,9 @@
             className="'mb-2'"
           />
         </Section>
+        <Section class="'pt-0'" title.translate="Number formatting">
+          <ChartHumanizeNumbers t-props="props"/>
+        </Section>
       </t>
     </GeneralDesignEditor>
     <SeriesWithAxisDesignEditor t-props="props"/>

tests/figures/chart/charts_component.test.ts

@@ -1840,6 +1840,20 @@ describe("charts", () => {
     }
   );
 
+  test.each<ChartType>(["bar", "line", "waterfall", "treemap", "sunburst"])(
+    "humanizeNumbers checkbox updates the chart",
+    async (type: ChartType) => {
+      createTestChart(type);
+      await mountChartSidePanel();
+      await openChartDesignSidePanel(model, env, fixture, chartId);
+
+      expect(model.getters.getChartDefinition(chartId).humanize).toBe(true);
+
+      await simulateClick("input[name='humanizeNumbers']");
+      expect(model.getters.getChartDefinition(chartId).humanize).toBe(false);
+    }
+  );
+
   describe("aggregate", () => {
     test.each(["bar", "pie", "line", "scatter", "combo"] as const)(
       "aggregate checkbox is checked for string-count charts",