[FIX] charts: correctly humanize decimal numbers

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

@@ -1,4 +1,6 @@
 import { Component } from "@odoo/owl";
+import { formatLargeNumber, formatValue } from "../../../../../helpers";
+import { _t } from "../../../../../translation";
 import {
   ChartWithDataSetDefinition,
   DispatchResult,
@@ -25,4 +27,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>

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

@@ -12,6 +12,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";
@@ -36,6 +37,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

@@ -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 { 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";
@@ -51,6 +52,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/waterfall_chart/waterfall_chart_design_panel.xml

@@ -23,7 +23,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/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"/>

src/helpers/format/format.ts

@@ -1,4 +1,4 @@
-import { toNumber } from "../../functions/helpers";
+import { toNumber, tryToNumber } from "../../functions/helpers";
 import { _t } from "../../translation";
 import {
   CellValue,
@@ -682,14 +682,18 @@ function _roundFormat<T extends InternalFormat>(internalFormat: T): T {
 }
 
 export function humanizeNumber({ value, format }: FunctionResultObject, locale: Locale): string {
-  const numberFormat = formatLargeNumber(
-    {
-      value,
-      format,
-    },
-    undefined,
-    locale
-  );
+  const numberValue = tryToNumber(value, locale);
+  if (numberValue === undefined) {
+    return "";
+  }
+  let numberFormat: Format | undefined = format;
+  if (Math.abs(numberValue) < 1000) {
+    const hasDecimal = numberValue % 1 !== 0;
+    numberFormat = !format && hasDecimal ? "0.####" : format;
+  } else {
+    numberFormat = formatLargeNumber({ value, format }, undefined, locale);
+  }
+
   return formatValue(value, { format: numberFormat, locale });
 }
 

tests/figures/chart/chart_plugin.test.ts

@@ -3874,12 +3874,12 @@ describe("Can make numbers human-readable", () => {
         "1"
       );
       let axis = getChartConfiguration(model, "1").options.scales.y;
-      const valuesBefore = [1e3, 1e6].map(axis.ticks.callback);
-      expect(valuesBefore).toEqual(["1,000", "1,000,000"]);
+      const valuesBefore = [1e3, 1e6, 0.1, 0.123456789].map(axis.ticks.callback);
+      expect(valuesBefore).toEqual(["1,000", "1,000,000", "0.1", "0.123456789"]);
       updateChart(model, "1", { humanize: true });
       axis = getChartConfiguration(model, "1").options.scales.y;
-      const valuesAfter = [1e3, 1e6].map(axis.ticks.callback);
-      expect(valuesAfter).toEqual(["1,000", "1,000k"]);
+      const valuesAfter = [1e3, 1e6, 0.1, 0.123456789].map(axis.ticks.callback);
+      expect(valuesAfter).toEqual(["1,000", "1,000k", "0.1", "0.1235"]);
     }
   );
 

tests/figures/chart/charts_component.test.ts

@@ -1851,6 +1851,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",