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

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.2
+ @date 2025-05-12T05:28:52.249Z
+ @hash a11158e
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -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>
@@ -2426,6 +2426,10 @@
             defaultStyle="defaults.valuesDesign"
           />
         </Section>
+        <PieHoleSize
+          value="props.definition.pieHolePercentage ?? 25"
+          onValueChange.bind="onPieHoleSizeChange"
+        />
       </t>
     </SidePanelCollapsible>
   </t>
@@ -2583,6 +2587,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>
@@ -2787,9 +2796,11 @@
 
       <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"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3610,6 +3621,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
@@ -3654,6 +3681,7 @@
         onSelectionConfirmed.bind="onDataSeriesConfirmed"
         onSelectionReordered.bind="onDataSeriesReordered"
         onSelectionRemoved.bind="onDataSeriesRemoved"
+        maxNumberOfUsedRanges="maxNumberOfUsedRanges"
       />
       <ChartLabelRange
         range="this.getLabelRange()"
@@ -3707,6 +3735,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>
@@ -3810,6 +3840,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 +3849,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 +3867,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
@@ -5716,6 +5752,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 +5850,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,6 +6128,7 @@
           t-on-dblclick="onDblClick"
           t-on-contextmenu="onContextMenu"
           t-on-blur="onBlur"
+          t-on-wheel="onWheel"
         />
       </div>
       <div

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "18.4.0-alpha.1",
+  "version": "18.4.0-alpha.2",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",