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

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.3
- @date 2025-05-13T17:55:42.200Z
- @hash 70ad365
+ @version 18.4.0-alpha.5
+ @date 2025-05-26T12:37:23.183Z
+ @hash 398e610
 -->
 <odoo>
   <t t-name="o-spreadsheet-ValidationMessages">
@@ -352,6 +352,7 @@
     <div class="o-spreadsheet h-100 w-100" t-ref="spreadsheet" t-att-style="getStyle()">
       <t t-if="env.isDashboard()">
         <SpreadsheetDashboard/>
+        <FullScreenChart/>
       </t>
       <t t-else="">
         <TopBar onClick="() => this.focusGrid()" dropdownMaxHeight="gridHeight"/>
@@ -971,6 +972,7 @@
             defaultRangeSheetId="measure.computedBy.sheetId"
             contextualAutocomplete="getMeasureAutocomplete()"
             getContextualColoredSymbolToken.bind="getColoredSymbolToken"
+            invalid="isCalculatedMeasureInvalid"
           />
         </div>
       </div>
@@ -2141,10 +2143,7 @@
   </t>
 
   <t t-name="o-spreadsheet-WaterfallChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'o-vertical-axis-selection pt-0'" title.translate="Vertical axis position">
           <RadioSelection
@@ -2154,18 +2153,9 @@
             onChange.bind="updateVerticalAxisPosition"
           />
         </Section>
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-          />
+          <ChartShowValues t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -2234,11 +2224,7 @@
   </t>
 
   <t t-name="o-spreadsheet-TreeMapChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart"
-    />
+    <GeneralDesignEditor t-props="props"/>
 
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Tree map colors">
       <t t-set-slot="content">
@@ -2295,12 +2281,7 @@
               value="showLabels"
               onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
             />
-            <Checkbox
-              name="'showValues'"
-              label.translate="Show values"
-              value="showValues"
-              onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-            />
+            <ChartShowValues t-props="props" defaultValue="defaults.showValues"/>
           </div>
         </Section>
         <Section class="'pt-0'" t-if="showValues || showLabels">
@@ -2369,16 +2350,9 @@
   </t>
 
   <t t-name="o-spreadsheet-SunburstChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
       </t>
     </GeneralDesignEditor>
 
@@ -2406,12 +2380,7 @@
               value="showLabels"
               onChange="(showLabels) => props.updateChart(this.props.figureId, { showLabels })"
             />
-            <Checkbox
-              name="'showValues'"
-              label.translate="Show values"
-              value="showValues"
-              onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-            />
+            <ChartShowValues t-props="props" defaultValue="defaults.showValues"/>
           </div>
         </Section>
         <Section class="'pt-0'" t-if="showValues || showLabels">
@@ -2433,11 +2402,7 @@
   <t t-name="o-spreadsheet-ScorecardChartDesignPanel">
     <t t-set="color_up">Color Up</t>
     <t t-set="color_down">Color Down</t>
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart"
-      defaultChartTitleFontSize="defaultScorecardTitleFontSize">
+    <GeneralDesignEditor t-props="props" defaultChartTitleFontSize="defaultScorecardTitleFontSize">
       <t t-set-slot="general-extension">
         <Section class="'pt-1'" title.translate="Number formatting">
           <Checkbox
@@ -2449,17 +2414,24 @@
         </Section>
       </t>
     </GeneralDesignEditor>
+    <ChartTitle
+      title="this.props.definition.keyDescr?.text ?? ''"
+      updateTitle="(text) => this.setKeyText(text)"
+      name.translate="Key Value Style"
+      placeholder.translate="Add a key value description"
+      updateStyle.bind="updateKeyStyle"
+      style="keyStyle"
+    />
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Baseline">
       <t t-set-slot="content">
-        <Section class="'pt-0'" title.translate="Baseline description">
-          <input
-            type="text"
-            t-att-value="translate(props.definition.baselineDescr)"
-            t-on-change="updateBaselineDescr"
-            class="o-input"
-            placeholder="Baseline description"
-          />
-        </Section>
+        <ChartTitle
+          title="this.props.definition.baselineDescr?.text ?? ''"
+          updateTitle="(text) => this.setBaselineText(text)"
+          name.translate="Baseline Style"
+          placeholder.translate="Add a baseline description"
+          updateStyle.bind="updateBaselineStyle"
+          style="baselineStyle"
+        />
         <Section class="'o-chart-baseline-color pt-0'" title="colorsSectionTitle">
           <div class="d-flex align-items-center mb-2">
             <RoundColorPicker
@@ -2544,23 +2516,12 @@
   </t>
 
   <t t-name="o-spreadsheet-RadarChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-          />
+          <ChartShowValues t-props="props"/>
+          <ChartShowDataMarkers t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -2568,23 +2529,11 @@
   </t>
 
   <t t-name="o-spreadsheet-PieChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-          />
+          <ChartShowValues t-props="props"/>
         </Section>
         <PieHoleSize
           t-if="props.definition.isDoughnut"
@@ -2639,6 +2588,29 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-LineChartDesignPanel">
+    <GeneralDesignEditor t-props="props">
+      <t t-set-slot="general-extension">
+        <ChartLegend t-props="props"/>
+        <Section class="'pt-0'" title.translate="Values">
+          <ChartShowValues t-props="props"/>
+          <ChartShowDataMarkers t-props="props"/>
+        </Section>
+      </t>
+    </GeneralDesignEditor>
+    <SeriesWithAxisDesignEditor t-props="props"/>
+    <SidePanelCollapsible isInitiallyCollapsed="true" title.translate="Axes">
+      <t t-set-slot="content">
+        <AxisDesignEditor
+          axesList="axesList"
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </SidePanelCollapsible>
+  </t>
+
   <t t-name="o-spreadsheet-LineConfigPanel">
     <div>
       <Section class="'pt-0'">
@@ -2716,10 +2688,7 @@
   </t>
 
   <t t-name="o-spreadsheet-GeoChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Legend position">
           <select
@@ -2821,11 +2790,7 @@
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart"
-    />
+    <GeneralDesignEditor t-props="props"/>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="Gauge Design">
       <t t-set-slot="content">
         <Section class="'pt-0'" title.translate="Range">
@@ -2962,18 +2927,10 @@
   </t>
 
   <t t-name="o-spreadsheet-FunnelChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-          />
+          <ChartShowValues t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -2996,23 +2953,12 @@
   </t>
 
   <t t-name="o-spreadsheet-ComboChartDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="showValues => props.updateChart(this.props.figureId, {showValues})"
-          />
+          <ChartShowValues t-props="props"/>
+          <ChartShowDataMarkers t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -3042,23 +2988,11 @@
   </t>
 
   <t t-name="o-spreadsheet-ChartWithAxisDesignPanel">
-    <GeneralDesignEditor
-      figureId="props.figureId"
-      definition="props.definition"
-      updateChart="props.updateChart">
+    <GeneralDesignEditor t-props="props">
       <t t-set-slot="general-extension">
-        <ChartLegend
-          figureId="props.figureId"
-          definition="props.definition"
-          updateChart="props.updateChart"
-        />
+        <ChartLegend t-props="props"/>
         <Section class="'pt-0'" title.translate="Values">
-          <Checkbox
-            name="'showValues'"
-            label.translate="Show values"
-            value="props.definition.showValues"
-            onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
-          />
+          <ChartShowValues t-props="props"/>
         </Section>
       </t>
     </GeneralDesignEditor>
@@ -3496,6 +3430,24 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-ChartShowValues">
+    <Checkbox
+      name="'showValues'"
+      label.translate="Show values"
+      value="props.definition.showValues ?? props.defaultValue"
+      onChange="(showValues) => props.updateChart(this.props.figureId, { showValues })"
+    />
+  </t>
+
+  <t t-name="o-spreadsheet-ChartShowDataMarkers">
+    <Checkbox
+      name="'showDataMarkers'"
+      label.translate="Show data markers"
+      value="!props.definition.hideDataMarkers"
+      onChange="(showDataMarkers) => props.updateChart(this.props.figureId, { hideDataMarkers: !showDataMarkers })"
+    />
+  </t>
+
   <t t-name="o-spreadsheet-SeriesWithAxisDesignEditor">
     <SeriesDesignEditor t-props="props">
       <t t-set-slot="data-series-extension" t-slot-scope="scope">
@@ -3705,7 +3657,6 @@
   </t>
 
   <t t-name="o-spreadsheet-GeneralDesignEditor">
-    <t t-set="chart_title">Chart title</t>
     <SidePanelCollapsible isInitiallyCollapsed="false" title.translate="General">
       <t t-set-slot="content">
         <Section class="'o-chart-background-color pt-0 pb-0'" title.translate="Background color">
@@ -3717,7 +3668,8 @@
         <ChartTitle
           title="title.text"
           updateTitle.bind="updateTitle"
-          name="chart_title"
+          name.translate="Chart title"
+          placeholder.translate="Add a Title"
           updateStyle.bind="updateChartTitleStyle"
           style="title"
           defaultStyle="{align: 'left', fontSize: this.props.defaultChartTitleFontSize}"
@@ -3772,18 +3724,13 @@
   </t>
 
   <t t-name="o-spreadsheet.ChartTitle">
-    <t t-set="placeholder">Add a title</t>
-    <t t-set="title">
-      <t t-if="props.name" t-esc="props.name"/>
-      <t t-else="">Title</t>
-    </t>
-    <Section class="'o-chart-title'" title="title.toString()">
+    <Section class="'o-chart-title'" title="props.name">
       <input
         type="text"
         class="o-input"
         t-att-value="props.title"
         t-on-change="updateTitle"
-        t-att-placeholder="placeholder"
+        t-att-placeholder="props.placeholder"
       />
       <TextStyler
         style="props.style"
@@ -3991,6 +3938,15 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-PivotCollapseIcon">
+    <div
+      class="o-pivot-collapse-icon o-hoverable-button d-flex align-items-center justify-content-center"
+      t-on-click="onClick">
+      <t t-if="isCollapsed" t-call="o-spreadsheet-Icon.PLUS"/>
+      <t t-else="" t-call="o-spreadsheet-Icon.MINUS"/>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-PaintFormatButton">
     <span
       class="o-menu-item-button"
@@ -5538,8 +5494,7 @@
       t-on-pointerdown="onMouseDown"
       t-on-dblclick.self="onDoubleClick"
       t-on-contextmenu.stop.prevent="onContextMenu">
-      <DataValidationOverlay/>
-      <FilterIconsOverlay/>
+      <GridCellIconOverlay/>
       <GridAddRowsFooter
         t-if="!env.model.getters.isReadonly()"
         t-key="env.model.getters.getActiveSheetId()"
@@ -5549,10 +5504,18 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-GridCellIconOverlay">
+    <t t-foreach="icons" t-as="icon" t-key="icon_index">
+      <GridCellIcon icon="icon">
+        <t t-component="icon.component" cellPosition="icon.position"/>
+      </GridCellIcon>
+    </t>
+  </t>
+
   <t t-name="o-spreadsheet-GridCellIcon">
     <div
       class="o-grid-cell-icon position-absolute overflow-hidden"
-      t-if="isPositionVisible(this.props.cellPosition)"
+      t-if="isPositionVisible(this.props.icon.position)"
       t-att-style="iconStyle">
       <t t-slot="default"/>
     </div>
@@ -5608,6 +5571,7 @@
         onInputContextMenu.bind="onInputContextMenu"
       />
       <canvas t-ref="canvas"/>
+      <t t-set="focused" t-value="focusedClients"/>
       <t
         t-foreach="env.model.getters.getClientsToDisplay()"
         t-as="client"
@@ -5617,7 +5581,7 @@
           color="client.color"
           col="client.position.col"
           row="client.position.row"
-          active="isCellHovered(client.position.col, client.position.row)"
+          active="isCellHovered(client.position.col, client.position.row) || focused.has(client.id)"
         />
       </t>
       <GridPopover
@@ -5650,6 +5614,37 @@
     </div>
   </t>
 
+  <t t-name="o-spreadsheet-FullScreenChart">
+    <div
+      class="position-absolute o-fullscreen-chart-overlay w-100 h-100 d-flex"
+      t-if="figureUI"
+      t-on-click="exitFullScreen">
+      <button
+        class="o-exit top-0 end-0 position-absolute o-button primary m-1"
+        t-on-click="exitFullScreen">
+        Exit fullscreen
+      </button>
+      <div class="flex-fill">
+        <div
+          class="o-fullscreen-chart o-figure position-relative"
+          tabindex="1"
+          t-ref="fullScreenChart"
+          t-on-click.stop=""
+          t-on-keydown="(ev) => this.onKeyDown(ev)">
+          <t
+            t-component="chartComponent"
+            figureUI="this.figureUI"
+            isFullScreen="true"
+            t-key="this.figureUI.id"
+          />
+          <div class="position-absolute top-0 end-0">
+            <ChartDashboardMenu figureUI="figureUI"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </t>
+
   <t t-name="o-spreadsheet-FontSizeEditor">
     <div class="o-dropdown" t-ref="FontSizeEditor">
       <div
@@ -5819,17 +5814,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-FilterIconsOverlay">
-    <t
-      t-foreach="getFilterHeadersPositions()"
-      t-as="position"
-      t-key="'filter'+position.col + '_' + position.row">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <FilterIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-FilterIcon">
     <div class="o-filter-icon" t-att-class="iconClass" t-on-click="onClick">
       <t t-if="isFilterActive" t-call="o-spreadsheet-Icon.FILTER_ICON_ACTIVE"/>
@@ -5976,26 +5960,26 @@
 
   <t t-name="o-spreadsheet-ScorecardChart">
     <canvas
-      class="o-figure-canvas o-scorecard w-100 h-100"
+      class="o-figure-canvas o-scorecard w-100 h-100 d-block"
       t-ref="chartContainer"
       t-att-title="title"
     />
   </t>
 
   <t t-name="o-spreadsheet-GaugeChartComponent">
-    <canvas class="o-figure-canvas o-gauge-chart w-100 h-100" t-ref="chartContainer"/>
+    <canvas class="o-figure-canvas o-gauge-chart w-100 h-100 d-block" 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">
+        <t t-foreach="getMenuItems()" t-as="item" t-key="item.id">
           <button
-            t-attf-class=" {{type.icon}} {{type.chartType === selectedChartType ? 'active' : ''}}"
+            t-attf-class=" {{item.iconClass}} {{item.isSelected ? '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-att-title="item.label"
+            t-on-click="item.onClick"
+            t-att-data-id="item.id"
           />
         </t>
         <button
@@ -6042,20 +6026,6 @@
     </div>
   </t>
 
-  <t t-name="o-spreadsheet-DataValidationOverlay">
-    <t t-foreach="checkBoxCellPositions" t-as="position" t-key="'checkbox'+position_index">
-      <GridCellIcon cellPosition="position">
-        <DataValidationCheckbox cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-
-    <t t-foreach="listIconsCellPositions" t-as="position" t-key="'list'+position_index">
-      <GridCellIcon cellPosition="position" horizontalAlign="'right'">
-        <DataValidationListIcon cellPosition="position"/>
-      </GridCellIcon>
-    </t>
-  </t>
-
   <t t-name="o-spreadsheet-DataValidationListIcon">
     <div
       class="o-dv-list-icon d-flex align-items-center justify-content-center"

package/package.json

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

package/readme.md

@@ -15,6 +15,23 @@ a.k.a. "[Owly](https://github.com/odoo/owl) Sheet" 🦉
 
 ![o-spreadsheet screenshot](doc/o-spreadsheet.png "o-spreadsheet demo")
 
+## Run it!
+
+```bash
+# install dependencies
+npm install
+
+# build stuff, start a live server, start a collaborative server, build with --watch
+npm run dev
+```
+
+## Test it!
+
+```bash
+npm run test # run all tests
+npm run test -- --watch # run all tests, rerun on file change
+```
+
 ## Integrating o-spreadsheet
 
 1. [Getting started](doc/integrating/integration.md#getting-started)
@@ -42,26 +59,6 @@ a.k.a. "[Owly](https://github.com/odoo/owl) Sheet" 🦉
 10. [Translations](doc/extending/translations.md)
 11. [API](doc/tsdoc/README.md)
 
-## Run it!
-
-```bash
-# install dependencies
-npm install
-
-# build o_spreadsheet.js in dist/
-npm run build
-
-# build stuff, start a live server, start a collaborative server, build with --watch
-npm run dev
-
-# run the test suite
-npm run test
-npm run test -- --watch
-
-# build documentation
-npm run doc
-```
-
 ## Contributing
 
 - Open a pull request or an issue on this repository.