[IMP] charts: allows to customize axis scales and gridlines

Task Description

This commit aims to add the possibility for the user to customize
the axes scale (linear vs logarithmic type and mix/max values) for
linear scale. We also add the possibility to show/hide major and
minor gridlines (minor gridlines being only available for linear
scale and line/scatter chart (for x axis), while avalaible for
bar/line/scatter/combo chart for both y axes.

Related Task

Task: 5159370

Author: anhe-odoo

packages/o-spreadsheet-engine/src/types/chart/chart.ts

@@ -103,8 +103,19 @@ export interface DatasetDesign {
   readonly label?: string;
 }
 
+export type AxisScaleType = "linear" | "logarithmic";
+
+export interface AxisGridDesign {
+  readonly major?: boolean;
+  readonly minor?: boolean;
+}
+
 export interface AxisDesign {
   readonly title?: TitleDesign;
+  readonly min?: number;
+  readonly max?: number;
+  readonly scaleType?: AxisScaleType;
+  readonly grid?: AxisGridDesign;
 }
 
 export interface AxesDesign {

packages/o-spreadsheet-engine/src/types/chart/scatter_chart.ts

@@ -1,7 +1,7 @@
 import { LineChartDefinition, LineChartRuntime } from "./line_chart";
 
 export interface ScatterChartDefinition
-  extends Omit<LineChartDefinition, "type" | "stacked" | "cumulative"> {
+  extends Omit<LineChartDefinition, "type" | "stacked" | "cumulative" | "zoomable"> {
   readonly type: "scatter";
 }
 

src/components/figures/chart/chartJs/chartjs.ts

@@ -12,6 +12,7 @@ import {
   getFunnelChartController,
   getFunnelChartElement,
 } from "./chartjs_funnel_chart";
+import { chartMinorGridPlugin } from "./chartjs_minor_grid_plugin";
 import { chartShowValuesPlugin } from "./chartjs_show_values_plugin";
 import { sunburstHoverPlugin } from "./chartjs_sunburst_hover_plugin";
 import { sunburstLabelsPlugin } from "./chartjs_sunburst_labels_plugin";
@@ -26,6 +27,10 @@ chartJsExtensionRegistry.add("chartShowValuesPlugin", {
   register: (Chart) => Chart.register(chartShowValuesPlugin),
   unregister: (Chart) => Chart.unregister(chartShowValuesPlugin),
 });
+chartJsExtensionRegistry.add("chartMinorGridPlugin", {
+  register: (Chart) => Chart.register(chartMinorGridPlugin),
+  unregister: (Chart) => Chart.unregister(chartMinorGridPlugin),
+});
 chartJsExtensionRegistry.add("waterfallLinesPlugin", {
   register: (Chart) => Chart.register(waterfallLinesPlugin),
   unregister: (Chart) => Chart.unregister(waterfallLinesPlugin),

src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts

@@ -0,0 +1,82 @@
+import { Chart } from "chart.js";
+import { Color } from "../../../..";
+
+interface MinorGridOptions {
+  display?: boolean;
+  divisions?: number;
+  color?: Color;
+  lineWidth?: number;
+  borderDash?: number[];
+  opacity?: number;
+}
+
+export const chartMinorGridPlugin = {
+  id: "o-spreadsheet-minor-gridlines",
+  beforeDatasetsDraw(chart: Chart) {
+    const ctx = chart.ctx;
+    const chartArea = chart.chartArea;
+    if (!chartArea) {
+      return;
+    }
+
+    for (const scaleId of Object.keys(chart.scales)) {
+      const scale = chart.scales[scaleId];
+      const options = scale.options as any;
+      const minor: MinorGridOptions | undefined = options?.grid?.minor;
+      if (!minor?.display) {
+        continue;
+      }
+      const ticks = scale.ticks;
+      if (!ticks || ticks.length < 2) {
+        continue;
+      }
+      const divisions = minor.divisions ?? 4;
+      if (!divisions || divisions < 1) {
+        continue;
+      }
+
+      const strokeStyle = minor.color ?? options?.grid?.color ?? "#bdbdbd";
+      const lineWidth = minor.lineWidth ?? options?.grid?.lineWidth ?? 1 / 2;
+      const dash = minor.borderDash ?? options?.grid?.borderDash ?? [];
+      const opacity = minor.opacity ?? 0.6;
+
+      ctx.save();
+      ctx.lineWidth = lineWidth;
+      ctx.strokeStyle = strokeStyle;
+      ctx.setLineDash(dash);
+      ctx.globalAlpha = opacity;
+
+      const drawVerticalLine = (x: number) => {
+        ctx.beginPath();
+        ctx.moveTo(x, chartArea.top);
+        ctx.lineTo(x, chartArea.bottom);
+        ctx.stroke();
+      };
+      const drawHorizontalLine = (y: number) => {
+        ctx.beginPath();
+        ctx.moveTo(chartArea.left, y);
+        ctx.lineTo(chartArea.right, y);
+        ctx.stroke();
+      };
+
+      for (let i = 0; i < ticks.length - 1; i++) {
+        const start = scale.getPixelForTick(i);
+        const end = scale.getPixelForTick(i + 1);
+        if (!isFinite(start) || !isFinite(end)) {
+          continue;
+        }
+        for (let j = 1; j < divisions; j++) {
+          const ratio = j / divisions;
+          const position = start + (end - start) * ratio;
+          if (scale.isHorizontal()) {
+            drawVerticalLine(position);
+          } else {
+            drawHorizontalLine(position);
+          }
+        }
+      }
+
+      ctx.restore();
+    }
+  },
+};

src/components/side_panel/chart/building_blocks/axis_design/axis_design_editor.ts

@@ -1,9 +1,20 @@
+import { _t } from "@odoo/o-spreadsheet-engine";
 import { CHART_AXIS_TITLE_FONT_SIZE } from "@odoo/o-spreadsheet-engine/constants";
+import { LineChartRuntime } from "@odoo/o-spreadsheet-engine/types/chart";
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, useState } from "@odoo/owl";
 import { deepCopy } from "../../../../../helpers";
-import { ChartWithAxisDefinition, DispatchResult, TitleDesign, UID } from "../../../../../types";
+import { getDefinedAxis } from "../../../../../helpers/figures/charts";
+import {
+  AxisDesign,
+  AxisScaleType,
+  ChartWithAxisDefinition,
+  DispatchResult,
+  TitleDesign,
+  UID,
+} from "../../../../../types";
 import { BadgeSelection } from "../../../components/badge_selection/badge_selection";
+import { Checkbox } from "../../../components/checkbox/checkbox";
 import { Section } from "../../../components/section/section";
 import { ChartTitle } from "../chart_title/chart_title";
 
@@ -21,7 +32,7 @@ interface Props {
 
 export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-AxisDesignEditor";
-  static components = { Section, ChartTitle, BadgeSelection };
+  static components = { Section, ChartTitle, BadgeSelection, Checkbox };
   static props = { chartId: String, definition: Object, updateChart: Function, axesList: Array };
 
   state = useState({ currentAxis: "x" });
@@ -42,7 +53,7 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
 
   getAxisTitle() {
     const axesDesign = this.props.definition.axesDesign ?? {};
-    return axesDesign[this.state.currentAxis]?.title.text || "";
+    return axesDesign[this.state.currentAxis]?.title?.text || "";
   }
 
   updateAxisTitle(text: string) {
@@ -65,4 +76,141 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     };
     this.props.updateChart(this.props.chartId, { axesDesign });
   }
+
+  get axisMin(): number | undefined {
+    return this.currentAxisDesign?.min;
+  }
+
+  get axisMax(): number | undefined {
+    return this.currentAxisDesign?.max;
+  }
+
+  get axisScaleType(): AxisScaleType {
+    return this.currentAxisDesign?.scaleType ?? "linear";
+  }
+
+  get isMajorGridEnabled(): boolean {
+    const designValue = this.currentAxisDesign?.grid?.major;
+    if (designValue !== undefined) {
+      return designValue;
+    }
+    return this.getDefaultMajorGridValue(this.state.currentAxis);
+  }
+
+  get isMinorGridEnabled(): boolean {
+    return !!this.currentAxisDesign?.grid?.minor;
+  }
+
+  get majorGridLabel() {
+    return this.state.currentAxis === "x"
+      ? _t("Vertical major gridlines")
+      : _t("Horizontal major gridlines");
+  }
+
+  get minorGridLabel() {
+    return this.state.currentAxis === "x"
+      ? _t("Vertical minor gridlines")
+      : _t("Horizontal minor gridlines");
+  }
+
+  updateAxisMin(ev: InputEvent) {
+    const value = (ev.target as HTMLInputElement).value.trim();
+    const parsed = value === "" ? undefined : Number(value);
+    if (parsed === undefined || !isNaN(parsed)) {
+      const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+      axesDesign[this.state.currentAxis] = {
+        ...axesDesign[this.state.currentAxis],
+        min: parsed,
+      };
+      this.props.updateChart(this.props.chartId, { axesDesign });
+    }
+  }
+
+  updateAxisMax(ev: InputEvent) {
+    const value = (ev.target as HTMLInputElement).value.trim();
+    const parsed = value === "" ? undefined : Number(value);
+    if (parsed === undefined || !isNaN(parsed)) {
+      const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+      axesDesign[this.state.currentAxis] = {
+        ...axesDesign[this.state.currentAxis],
+        max: parsed,
+      };
+      this.props.updateChart(this.props.chartId, { axesDesign });
+    }
+  }
+
+  updateAxisScaleType(ev: InputEvent) {
+    const type = (ev.target as HTMLSelectElement).value as AxisScaleType;
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      scaleType: type === "linear" ? undefined : type,
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
+  }
+
+  toggleMajorGrid(major: boolean) {
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      grid: {
+        ...axesDesign[this.state.currentAxis]?.grid,
+        major,
+      },
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
+  }
+
+  toggleMinorGrid(minor: boolean) {
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      grid: {
+        ...axesDesign[this.state.currentAxis]?.grid,
+        minor,
+      },
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
+  }
+
+  private get currentAxisDesign(): AxisDesign | undefined {
+    return this.props.definition.axesDesign?.[this.state.currentAxis];
+  }
+
+  private getDefaultMajorGridValue(axisId: string): boolean {
+    const { useLeftAxis, useRightAxis } = getDefinedAxis(this.props.definition);
+    if (axisId === "x") {
+      if ("horizontal" in this.props.definition && this.props.definition.horizontal) {
+        return true;
+      }
+      if (this.props.definition.type === "scatter") {
+        return true;
+      }
+    } else if (axisId === "y") {
+      return true;
+    } else if (axisId === "y1") {
+      return !useLeftAxis && useRightAxis;
+    }
+    return false;
+  }
+
+  get isCategoricalAxis(): boolean {
+    if (this.state.currentAxis !== "x") {
+      return false;
+    }
+    const runtime = this.env.model.getters.getChartRuntime(this.props.chartId) as LineChartRuntime;
+    const axisType = runtime?.chartJsConfig.options?.scales?.x?.type;
+    return axisType === undefined || axisType === "time";
+  }
+
+  get canChangeMinorGridVisibility(): boolean {
+    if (this.state.currentAxis !== "x") {
+      return true;
+    }
+    if (this.isCategoricalAxis) {
+      return false;
+    }
+    const type = this.props.definition.type;
+    return type === "line" || type === "scatter";
+  }
 }

src/components/side_panel/chart/building_blocks/axis_design/axis_design_editor.xml

@@ -16,5 +16,60 @@
       style="axisTitleStyle"
       defaultStyle="{align: 'center', color: '', fontSize: defaultFontSize}"
     />
+    <Section
+      t-if="!isCategoricalAxis"
+      class="'pt-0 o-axis-bounds-section'"
+      title.translate="Axis range">
+      <div class="d-flex">
+        <div class="w-50">
+          <span class="o-section-subtitle my-0">Minimum</span>
+          <input
+            type="number"
+            class="o-input w-100"
+            data-testid="axis-min-input"
+            t-att-value="axisMin"
+            t-on-change="updateAxisMin"
+          />
+        </div>
+        <div class="w-50 ms-3">
+          <span class="o-section-subtitle my-0">Maximum</span>
+          <input
+            type="number"
+            class="o-input w-100"
+            data-testid="axis-max-input"
+            t-att-value="axisMax"
+            t-on-change="updateAxisMax"
+          />
+        </div>
+      </div>
+    </Section>
+    <Section
+      t-if="!isCategoricalAxis"
+      class="'pt-0 o-axis-scale-section'"
+      title.translate="Scale type">
+      <select
+        class="o-input w-100"
+        data-testid="axis-scale-select"
+        t-att-value="axisScaleType"
+        t-on-change="updateAxisScaleType">
+        <option value="linear">Linear</option>
+        <option value="logarithmic">Logarithmic</option>
+      </select>
+    </Section>
+    <Section class="'pt-0'" title.translate="Gridlines">
+      <Checkbox
+        className="'o-axis-grid-major'"
+        label="majorGridLabel"
+        value="isMajorGridEnabled"
+        onChange.bind="toggleMajorGrid"
+      />
+      <Checkbox
+        t-if="canChangeMinorGridVisibility"
+        className="'o-axis-grid-minor'"
+        label="minorGridLabel"
+        value="isMinorGridEnabled"
+        onChange.bind="toggleMinorGrid"
+      />
+    </Section>
   </t>
 </templates>

src/components/side_panel/chart/index.ts

@@ -46,7 +46,7 @@ chartSidePanelComponentRegistry
   })
   .add("scatter", {
     configuration: ScatterConfigPanel,
-    design: GenericZoomableChartDesignPanel,
+    design: ChartWithAxisDesignPanel,
   })
   .add("bar", {
     configuration: BarConfigPanel,