[20.0][FIX] spreadsheet_oca: port the chart integration to the 20.0 data-source API

spreadsheet_oca/static/src/spreadsheet/bundle/chart_panels.esm.js

@@ -38,24 +38,25 @@ const menuChartProps = () => ({
         return [["id", "in", menus]];
     },
     get menuId() {
-        const menu = this.env.model.getters.getChartOdooMenu(this.props.chartId);
-        if (menu) {
-            return [menu.id, menu.name];
+        const odooLink = this.env.model.getters.getChartOdooLink(this.props.chartId);
+        if (odooLink?.type !== "odooMenu") {
+            return false;
         }
-        return false;
+        const menu = this.env.model.getters.getIrMenu(odooLink.odooMenuId);
+        return menu ? [menu.id, menu.name] : false;
     },
     updateMenu(menuId) {
         if (!menuId) {
-            this.env.model.dispatch("LINK_ODOO_MENU_TO_CHART", {
+            this.env.model.dispatch("UPDATE_ODOO_LINK_TO_CHART", {
                 chartId: this.props.chartId,
-                odooMenuId: false,
+                odooLink: undefined,
             });
             return;
         }
         const menu = this.env.model.getters.getIrMenu(menuId[0].id);
-        this.env.model.dispatch("LINK_ODOO_MENU_TO_CHART", {
+        this.env.model.dispatch("UPDATE_ODOO_LINK_TO_CHART", {
             chartId: this.props.chartId,
-            odooMenuId: menu.xmlid || menu.id,
+            odooLink: {type: "odooMenu", odooMenuId: menu.xmlid || menu.id},
         });
     },
     get record() {

spreadsheet_oca/static/src/spreadsheet/bundle/odoo_panels.esm.js

@@ -5,7 +5,8 @@ import {Many2XAutocomplete} from "@web/views/fields/relational_utils";
 import {_t} from "@web/core/l10n/translation";
 import {useService} from "@web/core/utils/hooks";
 
-const {chartSidePanelComponentRegistry} = spreadsheet.registries;
+const {chartSidePanelComponentRegistry, chartDataSourceSidePanelComponentRegistry} =
+    spreadsheet.registries;
 const {
     PieChartDesignPanel,
     ChartWithAxisDesignPanel,
@@ -19,6 +20,24 @@ const {
 } = spreadsheet.components;
 const {Component, useProps} = owl;
 
+/**
+ * Data-source section of the chart side panel for charts fed by an Odoo view.
+ *
+ * Core only registers "range", whose section lets you pick the cell ranges. An
+ * Odoo chart has none to pick -- its data comes from the view it was inserted
+ * from -- so this names that view instead.
+ */
+export class OdooChartDataSourcePanel extends Component {
+    props = useProps();
+
+    get resModel() {
+        return this.props.dataSource?.metaData?.resModel || "";
+    }
+}
+OdooChartDataSourcePanel.template = "spreadsheet_oca.OdooChartDataSourcePanel";
+
+chartDataSourceSidePanelComponentRegistry.add("odoo", OdooChartDataSourcePanel);
+
 export class OdooPanel extends Component {
     props = useProps();
 
@@ -47,24 +66,25 @@ export class OdooPanel extends Component {
         return this.props.chartId;
     }
     get menuId() {
-        const menu = this.env.model.getters.getChartOdooMenu(this.chartId);
-        if (menu) {
-            return [menu.id, menu.name];
+        const odooLink = this.env.model.getters.getChartOdooLink(this.chartId);
+        if (odooLink?.type !== "odooMenu") {
+            return false;
         }
-        return false;
+        const menu = this.env.model.getters.getIrMenu(odooLink.odooMenuId);
+        return menu ? [menu.id, menu.name] : false;
     }
     updateMenu(menuId) {
         if (!menuId) {
-            this.env.model.dispatch("LINK_ODOO_MENU_TO_CHART", {
+            this.env.model.dispatch("UPDATE_ODOO_LINK_TO_CHART", {
                 chartId: this.chartId,
-                odooMenuId: false,
+                odooLink: undefined,
             });
             return;
         }
         const menu = this.env.model.getters.getIrMenu(menuId[0].id);
-        this.env.model.dispatch("LINK_ODOO_MENU_TO_CHART", {
+        this.env.model.dispatch("UPDATE_ODOO_LINK_TO_CHART", {
             chartId: this.chartId,
-            odooMenuId: menu.xmlid || menu.id,
+            odooLink: {type: "odooMenu", odooMenuId: menu.xmlid || menu.id},
         });
     }
     get record() {

spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet.xml

@@ -584,6 +584,12 @@
             </div>
         </div>
     </t>
+    <t t-name="spreadsheet_oca.OdooChartDataSourcePanel" owl="1">
+        <div class="o-section">
+            <div class="o-section-title">Data source</div>
+            <div class="o-section-value" t-esc="this.resModel" />
+        </div>
+    </t>
     <t t-name="spreadsheet_oca.OdooPanel" owl="1">
         <div class="o-section">
             <div class="o-section-title">Link to Odoo menu</div>

spreadsheet_oca/static/src/spreadsheet/bundle/spreadsheet_action.esm.js

@@ -112,22 +112,32 @@ export class ActionSpreadsheetOca extends Component {
             // TODO: Add a way to detect the last row total height
         }
         const dataSourceId = uuidGenerator.uuidv4();
-        const chartType = `odoo_${this.import_data.metaData.mode}`;
+        // 20.0 dropped the `odoo_*` chart types: the chart now carries the plain
+        // o-spreadsheet type and names Odoo as its data source. `metaData.mode` is
+        // no longer stored either -- ChartDataSource derives it from `type`.
+        const chartType = this.import_data.metaData.mode;
         const definition = {
             title: {text: this.import_data.name},
             type: chartType,
-            fillArea: chartType === "odoo_line",
             background: "#FFFFFF",
-            stacked: this.import_data.metaData.stacked,
-            axisType: this.import_data.metaData.axisType,
-            metaData: this.import_data.metaData,
-            searchParams: this.cleanSearchParams(),
-            cumulative: this.import_data.metaData.cumulated,
-            cumulatedStart: this.import_data.metaData.cumulatedStart,
             legendPosition: "top",
-            verticalAxisPosition: "left",
-            actionXmlId: this.import_data.actionXmlId,
+            dataSource: {
+                type: "odoo",
+                metaData: this.import_data.metaData,
+                searchParams: this.cleanSearchParams(),
+                cumulatedStart: this.import_data.metaData.cumulatedStart,
+                actionXmlId: this.import_data.actionXmlId,
+            },
         };
+        // Keys outside a chart type's `allowedDefinitionKeys` are dropped without
+        // a word, so only set the ones that type accepts.
+        if (chartType === "bar" || chartType === "line") {
+            definition.stacked = this.import_data.metaData.stacked;
+        }
+        if (chartType === "line") {
+            definition.fillArea = true;
+            definition.cumulative = this.import_data.metaData.cumulated;
+        }
         spreadsheet_model.dispatch("CREATE_CHART", {
             sheetId,
             figureId: uuidGenerator.uuidv4(),