@odoo/o-spreadsheet 18.4.0-alpha.1 → 18.4.0-alpha.3

package/dist/o_spreadsheet.xml

@@ -1,9 +1,9 @@
 <!--
  This file is generated by o-spreadsheet build tools. Do not edit it.
  @see https://github.com/odoo/o-spreadsheet
- @version 18.4.0-alpha.1
- @date 2025-05-02T12:35:37.038Z
- @hash 50d42e1
+ @version 18.4.0-alpha.3
+ @date 2025-05-13T17:55:42.200Z
+ @hash 70ad365
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -849,7 +849,7 @@
           fields="props.unusedGroupableFields"
         />
       </div>
-      <t t-foreach="props.definition.columns" t-as="col" t-key="col.nameWithGranularity">
+      <t t-foreach="props.definition.columns" t-as="col" t-key="col_index">
         <div
           t-on-pointerdown="(ev) => this.startDragAndDrop(col, ev)"
           t-att-style="dragAndDrop.itemsStyle[col.nameWithGranularity]"
@@ -875,7 +875,7 @@
           fields="props.unusedGroupableFields"
         />
       </div>
-      <t t-foreach="props.definition.rows" t-as="row" t-key="row.nameWithGranularity">
+      <t t-foreach="props.definition.rows" t-as="row" t-key="row_index">
         <div
           t-on-pointerdown="(ev) => this.startDragAndDrop(row, ev)"
           t-att-style="dragAndDrop.itemsStyle[row.nameWithGranularity]"
@@ -1017,7 +1017,7 @@
   <t t-name="o-spreadsheet-PivotDimensionGranularity">
     <div class="d-flex flex-row">
       <div class="d-flex flex-row py-1 px-2 w-100 small">
-        <t t-set="granularity" t-value="props.dimension.granularity"/>
+        <t t-set="granularityProps" t-value="props.dimension.granularity || 'month'"/>
         <div class="pivot-dim-operator-label">Granularity</div>
         <select
           class="o-input flex-grow-1"
@@ -1026,10 +1026,10 @@
             t-foreach="props.allGranularities"
             t-as="granularity"
             t-key="granularity"
-            t-if="props.availableGranularities.has(granularity) || granularity === props.dimension.granularity"
+            t-if="props.availableGranularities.has(granularity) || granularity === granularityProps"
             t-att-value="granularity"
             t-esc="periods[granularity]"
-            t-att-selected="granularity === props.dimension.granularity or (granularity === 'month' and !props.dimension.granularity)"
+            t-att-selected="granularity === granularityProps or (granularity === 'month' and !granularityProps)"
           />
         </select>
       </div>
@@ -1324,7 +1324,88 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationValueInRangeCriterionForm">
+  <t t-name="o-spreadsheet-CustomCurrencyPanel">
+    <div class="o-custom-currency">
+      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
+        <select
+          class="o-input o-available-currencies"
+          t-on-change="(ev) => this.updateSelectCurrency(ev)">
+          <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
+            <option
+              t-att-value="currency_index"
+              t-esc="currencyDisplayName(currency)"
+              t-att-selected="currency_index === state.selectedCurrencyIndex"
+            />
+          </t>
+        </select>
+      </Section>
+      <Section>
+        <div class="o-subsection-left">
+          <div class="o-section-title">Code</div>
+          <input
+            type="text"
+            class="o-input"
+            t-model="state.currencyCode"
+            placeholder="code"
+            t-on-input="(ev) => this.updateCode(ev)"
+          />
+        </div>
+        <div class="o-subsection-right">
+          <div class="o-section-title">Symbol</div>
+          <input
+            type="text"
+            class="o-input"
+            placeholder="symbol"
+            t-model="state.currencySymbol"
+            t-on-input="(ev) => this.updateSymbol(ev)"
+          />
+        </div>
+      </Section>
+      <Section title.translate="Format">
+        <select
+          class="o-input o-format-proposals mb-1"
+          t-on-change="(ev) => this.updateSelectFormat(ev)"
+          t-att-disabled="!formatProposals.length">
+          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
+            <option
+              t-att-value="proposal_index"
+              t-esc="proposal.example"
+              t-att-selected="proposal_index === state.selectedFormatIndex"
+            />
+          </t>
+        </select>
+        <t t-set="accounting_format_label">Accounting format</t>
+        <Checkbox
+          name="'accountingFormat'"
+          label="accounting_format_label"
+          value="state.isAccountingFormat"
+          onChange.bind="toggleAccountingFormat"
+        />
+        <div class="o-format-examples mt-4" t-if="selectedFormat">
+          <table class="w-100">
+            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
+              <tr>
+                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
+                <td class="w-75 text-truncate" t-esc="example.value"/>
+              </tr>
+            </t>
+          </table>
+        </div>
+      </Section>
+      <Section>
+        <div class="o-sidePanelButtons">
+          <button
+            class="o-button primary"
+            t-on-click="() => this.apply()"
+            t-att-disabled="!formatProposals.length || isSameFormat">
+            Apply
+          </button>
+        </div>
+      </Section>
+    </div>
+  </t>
+
+  <t t-name="o-spreadsheet-ValueInRangeCriterionForm">
     <SelectionInput
       ranges="[props.criterion.values[0] || '']"
       onSelectionChanged="(ranges) => this.onRangeChanged(ranges[0])"
@@ -1341,16 +1422,17 @@
     </select>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationListCriterionForm">
+  <t t-name="o-spreadsheet-ListCriterionForm">
     <t t-foreach="displayedValues" t-as="value" t-key="value_index">
       <div class="o-dv-list-values d-flex align-items-center">
-        <DataValidationInput
+        <CriterionInput
           value="props.criterion.values[value_index]"
           onValueChanged="(v) => this.onValueChanged(v, value_index)"
           criterionType="props.criterion.type"
           onKeyDown="(ev) => this.onKeyDown(ev, value_index)"
           focused="value_index === state.focusedValueIndex"
           onBlur.bind="onBlurInput"
+          disableFormulas="props.disableFormulas"
         />
         <div
           class="o-dv-list-item-delete ms-2 o-button-icon"
@@ -1373,56 +1455,27 @@
     </select>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationSingleInput">
-    <DataValidationInput
+  <t t-name="o-spreadsheet-SingleInputCriterionForm">
+    <CriterionInput
       value="props.criterion.values[0]"
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationInput">
-    <div class="o-dv-input position-relative w-100 p-1">
-      <t t-if="allowedValues === 'onlyLiterals'">
-        <input
-          type="text"
-          t-ref="input"
-          t-on-input="onInputValueChanged"
-          t-att-value="props.value"
-          class="o-input"
-          t-att-class="{
-              'o-invalid border-danger position-relative': errorMessage,
-            }"
-          t-att-title="errorMessage"
-          t-att-placeholder="placeholder"
-          t-on-keydown="props.onKeyDown"
-          t-on-blur="props.onBlur"
-        />
-      </t>
-      <t t-else="">
-        <StandaloneComposer t-props="getDataValidationRuleInputComposerProps()"/>
-      </t>
-      <span
-        t-if="errorMessage"
-        class="error-icon text-danger position-absolute d-flex align-items-center"
-        t-att-title="errorMessage">
-        <t t-call="o-spreadsheet-Icon.ERROR"/>
-      </span>
-    </div>
-  </t>
-
-  <t t-name="o-spreadsheet-DataValidationDoubleInput">
-    <DataValidationInput
+  <t t-name="o-spreadsheet-DoubleInputCriterionForm">
+    <CriterionInput
       value="props.criterion.values[0]"
       onValueChanged.bind="onFirstValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
-
-    <div class="o-section-subtitle ms-1 my-2">and</div>
-    <DataValidationInput
+    <CriterionInput
       value="props.criterion.values[1]"
       onValueChanged.bind="onSecondValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
@@ -1438,92 +1491,42 @@
       />
     </select>
 
-    <DataValidationInput
+    <CriterionInput
       t-if="props.criterion.dateValue === 'exactDate'"
       value="props.criterion.values[0]"
       onValueChanged.bind="onValueChanged"
       criterionType="props.criterion.type"
+      disableFormulas="props.disableFormulas"
     />
   </t>
 
-  <t t-name="o-spreadsheet-CustomCurrencyPanel">
-    <div class="o-custom-currency">
-      <Section t-if="availableCurrencies.length > 1" title.translate="Currency">
-        <select
-          class="o-input o-available-currencies"
-          t-on-change="(ev) => this.updateSelectCurrency(ev)">
-          <t t-foreach="availableCurrencies" t-as="currency" t-key="currency_index">
-            <option
-              t-att-value="currency_index"
-              t-esc="currencyDisplayName(currency)"
-              t-att-selected="currency_index === state.selectedCurrencyIndex"
-            />
-          </t>
-        </select>
-      </Section>
-      <Section>
-        <div class="o-subsection-left">
-          <div class="o-section-title">Code</div>
-          <input
-            type="text"
-            class="o-input"
-            t-model="state.currencyCode"
-            placeholder="code"
-            t-on-input="(ev) => this.updateCode(ev)"
-          />
-        </div>
-        <div class="o-subsection-right">
-          <div class="o-section-title">Symbol</div>
-          <input
-            type="text"
-            class="o-input"
-            placeholder="symbol"
-            t-model="state.currencySymbol"
-            t-on-input="(ev) => this.updateSymbol(ev)"
-          />
-        </div>
-      </Section>
-      <Section title.translate="Format">
-        <select
-          class="o-input o-format-proposals mb-1"
-          t-on-change="(ev) => this.updateSelectFormat(ev)"
-          t-att-disabled="!formatProposals.length">
-          <t t-foreach="formatProposals" t-as="proposal" t-key="proposal_index">
-            <option
-              t-att-value="proposal_index"
-              t-esc="proposal.example"
-              t-att-selected="proposal_index === state.selectedFormatIndex"
-            />
-          </t>
-        </select>
-        <t t-set="accounting_format_label">Accounting format</t>
-        <Checkbox
-          name="'accountingFormat'"
-          label="accounting_format_label"
-          value="state.isAccountingFormat"
-          onChange.bind="toggleAccountingFormat"
+  <t t-name="o-spreadsheet-CriterionInput">
+    <div class="o-dv-input position-relative w-100 p-1">
+      <t t-if="allowedValues === 'onlyLiterals'">
+        <input
+          type="text"
+          t-ref="input"
+          t-on-input="onInputValueChanged"
+          t-att-value="props.value"
+          class="o-input"
+          t-att-class="{
+              'o-invalid border-danger position-relative': errorMessage,
+            }"
+          t-att-title="errorMessage"
+          t-att-placeholder="placeholder"
+          t-on-keydown="props.onKeyDown"
+          t-on-blur="props.onBlur"
         />
-        <div class="o-format-examples mt-4" t-if="selectedFormat">
-          <table class="w-100">
-            <t t-foreach="getFormatExamples()" t-as="example" t-key="example_index">
-              <tr>
-                <td class="w-25 pe-3 o-fw-bold" t-esc="example.label"/>
-                <td class="w-75 text-truncate" t-esc="example.value"/>
-              </tr>
-            </t>
-          </table>
-        </div>
-      </Section>
-      <Section>
-        <div class="o-sidePanelButtons">
-          <button
-            class="o-button primary"
-            t-on-click="() => this.apply()"
-            t-att-disabled="!formatProposals.length || isSameFormat">
-            Apply
-          </button>
-        </div>
-      </Section>
+      </t>
+      <t t-else="">
+        <StandaloneComposer t-props="getDataValidationRuleInputComposerProps()"/>
+      </t>
+      <span
+        t-if="errorMessage"
+        class="error-icon text-danger position-absolute d-flex align-items-center"
+        t-att-title="errorMessage">
+        <t t-call="o-spreadsheet-Icon.ERROR"/>
+      </span>
     </div>
   </t>
 
@@ -1937,27 +1940,20 @@
     <t t-set="text_color">Text Color</t>
     <div class="o-cf-cell-is-rule">
       <div class="o-section-subtitle">Format cells if...</div>
-      <select
-        class="o-input o-cell-is-operator mb-3"
-        t-on-change="(ev) => this.editOperator(ev.target.value)">
-        <t t-foreach="cellIsOperators" t-as="op" t-key="op_index">
-          <option
-            t-att-value="op"
-            t-esc="cellIsOperators[op]"
-            t-att-selected="rule.operator === op"
-          />
-        </t>
-      </select>
-      <t t-if="rule.operator !== 'IsEmpty' and rule.operator !== 'IsNotEmpty'">
-        <div class="o-cell-is-value mb-3">
-          <StandaloneComposer t-props="getCellIsRuleComposerProps(0)"/>
-        </div>
-        <t t-if="rule.operator === 'Between' || rule.operator === 'NotBetween'">
-          <div class="o-cell-is-value o-secondary-value mb-3">
-            <StandaloneComposer t-props="getCellIsRuleComposerProps(1)"/>
-          </div>
-        </t>
-      </t>
+      <SelectMenu
+        class="'o-cell-is-operator o-input mb-2'"
+        menuItems="cfCriterionMenuItems"
+        selectedValue="selectedCriterionName"
+      />
+
+      <t
+        t-if="criterionComponent"
+        t-component="criterionComponent"
+        t-key="state.rules.cellIs.operator"
+        criterion="genericCriterion"
+        onCriterionChanged.bind="onRuleValuesChanged"
+      />
+
       <div class="o-section-subtitle pt-3">Formatting style</div>
 
       <t t-call="o-spreadsheet-CellIsRuleEditorPreview">
@@ -2426,6 +2422,10 @@
             defaultStyle="defaults.valuesDesign"
           />
         </Section>
+        <PieHoleSize
+          value="props.definition.pieHolePercentage ?? 25"
+          onValueChange.bind="onPieHoleSizeChange"
+        />
       </t>
     </SidePanelCollapsible>
   </t>
@@ -2527,6 +2527,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2583,6 +2586,11 @@
             onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
           />
         </Section>
+        <PieHoleSize
+          t-if="props.definition.isDoughnut"
+          value="props.definition.pieHolePercentage ?? 50"
+          onValueChange.bind="onPieHoleSizeChange"
+        />
       </t>
     </GeneralDesignEditor>
   </t>
@@ -2654,6 +2662,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -2787,9 +2798,14 @@
 
       <ChartDataSeries
         ranges="dataRanges"
-        onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
-        onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
-        hasSingleRange="true"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3610,6 +3626,22 @@
     </SidePanelCollapsible>
   </t>
 
+  <t t-name="o-spreadsheet.PieHoleSize">
+    <Section class="'pt-0'" title.translate="Center radius">
+      <div class="d-flex flex-row">
+        <input
+          t-att-value="props.value"
+          type="number"
+          class="o-input o-pie-hole-size-input"
+          min="0"
+          max="95"
+          t-on-change="(ev) => debouncedOnChange(ev.target.value)"
+        />
+        %
+      </div>
+    </Section>
+  </t>
+
   <t t-name="o-spreadsheet-ChartLegend">
     <Section class="'pt-0'" title.translate="Legend position">
       <select
@@ -3641,6 +3673,7 @@
           value="option.value"
           onChange="option.onChange"
           className="'mt-2'"
+          disabled="option.disabled"
         />
       </t>
     </Section>
@@ -3654,6 +3687,10 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
+        datasetOrientation="datasetOrientation"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3697,7 +3734,28 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartDataSeries">
-    <Section class="'o-data-series'" title="title">
+    <Section class="'o-data-series'">
+      <t t-set-slot="title">
+        <div class="d-flex flex-row justify-content-between">
+          <t t-esc="title"/>
+          <div t-if="props.onFlipAxis and props.canChangeDatasetOrientation" class="d-flex">
+            <span
+              t-if="props.datasetOrientation !== 'rows'"
+              title="Split dataset by rows"
+              t-on-click="(ev) => props.onFlipAxis('rows')"
+              class="p-1 o-hoverable-button o-split-by-rows">
+              <t t-call="o-spreadsheet-Icon.INSERT_ROW_BEFORE"/>
+            </span>
+            <span
+              t-else=""
+              title="Split dataset by columns"
+              t-on-click="(ev) => props.onFlipAxis('columns')"
+              class="p-1 o-hoverable-button o-split-by-columns">
+              <t t-call="o-spreadsheet-Icon.INSERT_COL_BEFORE"/>
+            </span>
+          </div>
+        </div>
+      </t>
       <SelectionInput
         ranges="ranges"
         required="true"
@@ -3707,6 +3765,8 @@
         onSelectionReordered="props.onSelectionReordered"
         onSelectionRemoved="props.onSelectionRemoved"
         colors="colors"
+        disabledRanges="disabledRanges"
+        disabledRangeTitle.translate="Excluded due to chart limits. Drag to swap with another range."
       />
     </Section>
   </t>
@@ -3769,6 +3829,9 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        canChangeDatasetOrientation="canChangeDatasetOrientation"
+        datasetOrientation="datasetOrientation"
+        onFlipAxis.bind="setDatasetOrientation"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3810,6 +3873,7 @@
             t-att-style="getColor(range)"
             class="o-input mb-2"
             t-att-class="{
+              'o-disabled-ranges' : range.disabled and !range.isFocused,
               'o-focused' : range.isFocused,
               'o-invalid border-danger position-relative': isInvalid || !range.isValidRange,
               'text-decoration-underline': range.xc and range.isFocused and state.mode === 'select-range'
@@ -3818,10 +3882,16 @@
           />
           <span
             t-if="isInvalid || !range.isValidRange"
-            class="error-icon text-danger position-absolute d-flex align-items-center"
+            class="input-icon text-danger position-absolute d-flex align-items-center"
             title="This range is invalid">
             <t t-call="o-spreadsheet-Icon.ERROR"/>
           </span>
+          <span
+            class="input-icon o-disabled-ranges position-absolute d-flex align-items-center"
+            t-if="!range.isFocused and range.disabled"
+            t-att-title="props.disabledRangeTitle">
+            <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
+          </span>
         </div>
         <button
           class="border-0 bg-transparent fw-bold o-remove-selection o-button-icon pe-0"
@@ -3830,7 +3900,6 @@
           <t t-call="o-spreadsheet-Icon.TRASH_FILLED"/>
         </button>
       </div>
-
       <div class="d-flex flex-row w-100 o-selection-input">
         <button class="o-button o-add-selection" t-if="canAddRange" t-on-click="addEmptyInput">
           Add range
@@ -3866,11 +3935,62 @@
         t-on-wheel="props.onMouseWheel"
         t-att-style="popoverStyle"
         t-on-click.stop="">
-        <t t-slot="default"/>
+        <div class="o-popover-content" t-ref="popoverContent">
+          <t t-slot="default"/>
+        </div>
       </div>
     </t>
   </t>
 
+  <t t-name="o_spreadsheet.PivotHTMLRenderer">
+    <div class="o_pivot_html_renderer">
+      <Checkbox
+        name="'missing_values'"
+        label.translate="Display missing cells only"
+        value="state.showMissingValuesOnly"
+        onChange.bind="(value) => this.state.showMissingValuesOnly = value"
+        className="'m-2'"
+      />
+      <t t-set="tableData" t-value="getTableData()"/>
+      <table
+        class="o_pivot_html_renderer"
+        t-if="tableData.values.length > 0 or tableData.rows.length > 0">
+        <tr t-foreach="tableData.columns" t-as="row" t-key="row_index">
+          <t t-if="row_index === 0">
+            <th t-att-rowspan="tableData.columns.length"/>
+          </t>
+          <t t-foreach="row" t-as="cell" t-key="cell_index">
+            <th
+              t-att-colspan="cell.span"
+              t-att-style="cell.style"
+              t-att-class="{ o_missing_value: cell.isMissing }"
+              t-on-click="() => props.onCellClicked(cell.formula)">
+              <t t-esc="cell.value"/>
+            </th>
+          </t>
+        </tr>
+        <t t-foreach="tableData.rows" t-as="row" t-key="row_index">
+          <tr>
+            <th
+              t-att-style="row.style"
+              t-att-class="{ o_missing_value: row.isMissing }"
+              t-on-click="() => props.onCellClicked(row.formula)">
+              <t t-esc="row.value"/>
+            </th>
+            <t t-foreach="tableData.values" t-as="col" t-key="col_index">
+              <td
+                t-att-class="{ o_missing_value: col[row_index].isMissing }"
+                t-on-click="() => props.onCellClicked(col[row_index].formula)">
+                <t t-esc="col[row_index].value"/>
+              </td>
+            </t>
+          </tr>
+        </t>
+      </table>
+      <div class="alert alert-info" t-else="1">This pivot has no cell missing on this sheet</div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-PaintFormatButton">
     <span
       class="o-menu-item-button"
@@ -5568,6 +5688,47 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FilterMenuValueList">
+    <div class="o-filter-menu-actions d-flex">
+      <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
+      <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
+    </div>
+    <div class="position-relative">
+      <input
+        class="w-100 o-input my-2"
+        t-ref="filterMenuSearchBar"
+        type="text"
+        t-model="state.textFilter"
+        placeholder="Search..."
+        t-on-keydown="onKeyDown"
+      />
+      <i class="o-search-icon position-absolute">
+        <t t-call="o-spreadsheet-Icon.SEARCH"/>
+      </i>
+    </div>
+    <div
+      class="o-filter-menu-list d-flex flex-column"
+      t-ref="filterValueList"
+      t-on-click="this.clearScrolledToValue"
+      t-on-scroll="this.clearScrolledToValue">
+      <t t-foreach="displayedValues" t-as="value" t-key="value.string">
+        <FilterMenuValueItem
+          onClick="() => this.checkValue(value)"
+          onMouseMove="() => this.onMouseMove(value)"
+          value="value.string"
+          isChecked="value.checked"
+          isSelected="value.string === state.selectedValue"
+          scrolledTo="value.scrolledTo"
+        />
+      </t>
+      <div
+        t-if="displayedValues.length === 0"
+        class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
+        No results
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-FilterMenuValueItem">
     <div
       t-on-pointermove="this.props.onMouseMove"
@@ -5589,61 +5750,72 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FilterMenuCriterion">
+    <SelectMenu
+      class="'o-filter-criterion-type o-input m-1 mb-2'"
+      menuItems="criterionMenuItems"
+      selectedValue="selectedCriterionName"
+    />
+
+    <t
+      t-if="criterionComponent"
+      t-component="criterionComponent"
+      t-key="selectedCriterionName"
+      criterion="state.criterion"
+      onCriterionChanged.bind="onCriterionChanged"
+      disableFormulas="true"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-FilterMenu">
     <div class="o-filter-menu d-flex flex-column bg-white" t-on-wheel.stop="">
       <t t-if="isSortable">
         <div>
-          <div class="o-filter-menu-item my-2 mb-3" t-on-click="() => this.sortFilterZone('asc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2 mb-1"
+            t-on-click="() => this.sortFilterZone('asc')">
             Sort ascending (A ⟶ Z)
           </div>
-          <div class="o-filter-menu-item my-2" t-on-click="() => this.sortFilterZone('desc')">
+          <div
+            class="o-filter-menu-item o-sort-item py-2"
+            t-on-click="() => this.sortFilterZone('desc')">
             Sort descending (Z ⟶ A)
           </div>
         </div>
-        <div class="o-separator"/>
       </t>
-      <div class="o-filter-menu-actions d-flex">
-        <div class="o-button-link me-4" t-on-click="selectAll">Select all</div>
-        <div class="o-button-link me-4" t-on-click="clearAll">Clear</div>
-      </div>
-      <div class="position-relative">
-        <input
-          class="w-100 o-input my-2"
-          t-ref="filterMenuSearchBar"
-          type="text"
-          t-model="state.textFilter"
-          placeholder="Search..."
-          t-on-keydown="onKeyDown"
-        />
-        <i class="o-search-icon position-absolute">
-          <t t-call="o-spreadsheet-Icon.SEARCH"/>
-        </i>
-      </div>
-      <div
-        class="o-filter-menu-list d-flex flex-column"
-        t-ref="filterValueList"
-        t-on-click="this.clearScrolledToValue"
-        t-on-scroll="this.clearScrolledToValue">
-        <t t-foreach="displayedValues" t-as="value" t-key="value.string">
-          <FilterMenuValueItem
-            onClick="() => this.checkValue(value)"
-            onMouseMove="() => this.onMouseMove(value)"
-            value="value.string"
-            isChecked="value.checked"
-            isSelected="value.string === state.selectedValue"
-            scrolledTo="value.scrolledTo"
-          />
-        </t>
-        <div
-          t-if="displayedValues.length === 0"
-          class="o-filter-menu-no-values d-flex align-items-center justify-content-center w-100 h-100 ">
-          No results
+      <div class="o-filter-menu-content">
+        <div class="o-separator"/>
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType !== 'criterion'"
+          title.translate="Filter by criterion">
+          <t t-set-slot="content">
+            <FilterMenuCriterion
+              filterPosition="props.filterPosition"
+              onCriterionChanged.bind="onCriterionChanged"
+              criterionOperators="criterionOperators"
+            />
+            <div class="mb-3"/>
+          </t>
+        </SidePanelCollapsible>
+
+        <SidePanelCollapsible
+          isInitiallyCollapsed="filterValueType === 'criterion'"
+          title.translate="Filter by values">
+          <t t-set-slot="content">
+            <FilterMenuValueList
+              filterPosition="props.filterPosition"
+              onUpdateHiddenValues.bind="onUpdateHiddenValues"
+            />
+          </t>
+        </SidePanelCollapsible>
+
+        <div class="o-filter-menu-buttons d-flex justify-content-end">
+          <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
+          <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">
+            Confirm
+          </button>
         </div>
       </div>
-      <div class="o-filter-menu-buttons d-flex justify-content-end">
-        <button class="o-button o-filter-menu-cancel me-2" t-on-click="cancel">Cancel</button>
-        <button class="o-button primary o-filter-menu-confirm" t-on-click="confirm">Confirm</button>
-      </div>
     </div>
   </t>
 
@@ -5716,6 +5888,9 @@
         t-key="this.props.figureUI.id"
       />
     </div>
+    <div t-if="env.isDashboard()" class="position-absolute top-0 end-0">
+      <ChartDashboardMenu figureUI="props.figureUI"/>
+    </div>
   </t>
 
   <t t-name="o-spreadsheet-FigureComponent">
@@ -5811,6 +5986,32 @@
     <canvas class="o-figure-canvas o-gauge-chart w-100 h-100" t-ref="chartContainer"/>
   </t>
 
+  <t t-name="spreadsheet.ChartDashboardMenu">
+    <div class="o-dashboard-chart-select position-absolute top-0 end-0" t-on-click.stop="">
+      <div class="d-flex flex-row px-1" t-att-style="backgroundColor">
+        <t t-foreach="getAvailableTypes()" t-as="type" t-key="type.chartSubtype">
+          <button
+            t-attf-class=" {{type.icon}} {{type.chartType === selectedChartType ? 'active' : ''}}"
+            class="o-chart-dashboard-item btn mt-1 me-1 p-1 "
+            t-att-title="type.displayName"
+            t-on-click="() => this.onTypeChange(type.chartSubtype)"
+            t-att-data-id="type.chartSubtype"
+          />
+        </t>
+        <button
+          class="o-chart-dashboard-item btn mt-1 p-1 fa fa-ellipsis-v"
+          t-on-click="openContextMenu"
+        />
+      </div>
+      <Menu
+        t-if="menuState.isOpen"
+        anchorRect="menuState.anchorRect"
+        menuItems="menuState.menuItems"
+        onClose="() => this.menuState.isOpen=false"
+      />
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-ChartJsComponent">
     <canvas class="o-figure-canvas w-100 h-100" t-att-style="canvasStyle" t-ref="graphContainer"/>
   </t>
@@ -6063,12 +6264,17 @@
           t-on-dblclick="onDblClick"
           t-on-contextmenu="onContextMenu"
           t-on-blur="onBlur"
+          t-on-wheel="onWheel"
         />
       </div>
       <div
         class="o-composer-assistant-container shadow position-absolute z-1"
         t-att-style="assistantContainerStyle"
-        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable">
+        t-if="props.focus !== 'inactive' and !assistant.forcedClosed and assistantIsAvailable"
+        t-on-wheel.stop=""
+        t-on-pointerdown.prevent.stop=""
+        t-on-pointerup.prevent.stop=""
+        t-on-click.prevent.stop="">
         <span
           role="button"
           t-on-click="closeAssistant"
@@ -6076,13 +6282,7 @@
           <i class="fa fa-circle fa-stack-1x fa-inverse"/>
           <i class="fa fa-times-circle fa-stack-1x text-muted"/>
         </span>
-        <div
-          class="o-composer-assistant overflow-auto"
-          t-att-style="assistantStyle"
-          t-on-wheel.stop=""
-          t-on-pointerdown.prevent.stop=""
-          t-on-click.prevent.stop=""
-          t-on-pointerup.prevent.stop="">
+        <div class="o-composer-assistant overflow-auto" t-att-style="assistantStyle">
           <FunctionDescriptionProvider
             t-if="functionDescriptionState.showDescription"
             functionDescription="functionDescriptionState.functionDescription"