@odoo/o-spreadsheet 17.4.0-alpha.5 → 17.4.0-alpha.7

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 17.4.0-alpha.5
- @date 2024-06-14T10:02:23.996Z
- @hash 9ceed96
+ @version 17.4.0-alpha.7
+ @date 2024-06-21T08:43:10.344Z
+ @hash a99db9a
 -->
 <odoo>
   <t t-name="o-spreadsheet-ActionButton">
@@ -2505,7 +2505,7 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="stackedLabel"
+          label="chartTerms.StackedBarChart"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />
@@ -2751,6 +2751,248 @@
     </Section>
   </t>
 
+  <t t-name="o-spreadsheet-ChartPreview.LINE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+      <path stroke="#eb6d00" style="fill:none" d="M6,40 l12,-12 l6,6 l18,-18"/>
+      <path stroke="#0074d9" style="fill:none" d="M6,25 l12,-12 l18,18 l6,-6"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_AREA_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#c4e4ff" d="M3,45 h36 v-39 l-18,18 l-6,-6 l-12,12"/>
+      <path stroke="#0074d9" style="fill:none" d="M3,30 l12,-12 l6,6 l18,-18"/>
+      <path fill="#ffe1c8" d="M3,45 h36 v-23 l-18,12 l-6,-6 l-12,12"/>
+      <path stroke="#eb6d00" style="fill:none" d="M3,40 l12,-12 l6,6 l18,-12"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.COLUMN_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
+      <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
+      <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
+      <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
+      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_COLUMN_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
+      <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
+      <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
+      <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
+
+      <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
+      <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
+      <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
+      <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
+
+      <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
+      <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
+      <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
+      <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.BAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <g transform="matrix(0 1 -1 0 48 3)">
+        <path fill="#0074d9" d="M7,45 v-28 h6 v28"/>
+        <path fill="#c4e4ff" d="M8,45 v-27 h4 v27"/>
+        <path fill="#eb6d00" d="M14,45 v-14 h6 v14"/>
+        <path fill="#ffe1c8" d="M15,45 v-13 h4 v13"/>
+        <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+        <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+        <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+        <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      </g>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.STACKED_BAR_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <g transform="matrix(0 1 -1 0 48 1)">
+        <path fill="#0074d9" d="M7,45 v-12 h8 v12"/>
+        <path fill="#c4e4ff" d="M8,45 v-11 h6 v11"/>
+        <path fill="#eb6d00" d="M7,33 v-14 h8 v14"/>
+        <path fill="#ffe1c8" d="M8,33 v-13 h6 v13"/>
+        <path fill="#0074d9" d="M20,45 v-8 h8 v8"/>
+        <path fill="#c4e4ff" d="M21,45 v-7 h6 v7"/>
+        <path fill="#eb6d00" d="M20,37 v-9 h8 v9"/>
+        <path fill="#ffe1c8" d="M21,37 v-8 h6 v8"/>
+        <path fill="#0074d9" d="M33,45 v-18 h8 v18"/>
+        <path fill="#c4e4ff" d="M34,45 v-17 h6 v17"/>
+        <path fill="#eb6d00" d="M33,27 v-16 h8 v16"/>
+        <path fill="#ffe1c8" d="M34,27 v-15 h6 v15"/>
+      </g>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.COMBO_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#0074d9" d="M7,45 v-14 h6 v14"/>
+      <path fill="#c4e4ff" d="M8,45 v-13 h4 v13"/>
+      <path fill="#eb6d00" d="M14,45 v-28 h6 v28"/>
+      <path fill="#ffe1c8" d="M15,45 v-27 h4 v27"/>
+      <path fill="#0074d9" d="M26,45 v-22 h6 v22"/>
+      <path fill="#c4e4ff" d="M27,45 v-21 h4 v21"/>
+      <path fill="#eb6d00" d="M33,45 v-32 h6 v32"/>
+      <path fill="#ffe1c8" d="M34,45 v-31 h4 v31"/>
+      <path stroke="#888" style="fill:none;stroke-width:1.5;" d="M4,40 l14,-12 l6,6 l20,-18"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.PIE_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ffe1c8" stroke="#eb6d00" d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v20"/>
+      <path fill="#c4e4ff" stroke="#0074d9" d="M24,24 v-20 A20 20, 0, 0, 1, 41.32, 34 L24,24"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.DOUGHNUT_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#ffe1c8"
+        stroke="#eb6d00"
+        d="M41.32, 34 A20 20, 0, 1, 1, 24, 4 v8 A12,12,0,1,0,34.4,30"
+      />
+      <path
+        fill="#c4e4ff"
+        stroke="#0074d9"
+        d="M24,12 v-8 A20 20, 0, 0, 1, 41.32, 34 L34.4,30 A12,12,0,0,0,24,12"
+      />
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.SCATTER_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <circle fill="#0074d9" cx="10" cy="10" r="2"/>
+      <circle fill="#0074d9" cx="15" cy="30" r="2"/>
+      <circle fill="#0074d9" cx="25" cy="36" r="2"/>
+      <circle fill="#0074d9" cx="32" cy="15" r="2"/>
+      <circle fill="#eb6d00" cx="10" cy="40" r="2"/>
+      <circle fill="#eb6d00" cx="18" cy="20" r="2"/>
+      <circle fill="#eb6d00" cx="30" cy="25" r="2"/>
+      <circle fill="#eb6d00" cx="40" cy="33" r="2"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.GAUGE_CHART">
+    <svg
+      viewBox="0 0 48 48"
+      class="o-chart-preview user-select-none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ccc" d="M2,32 A22,22,0,0,1,46,32 h-6 A16,16,0,0,0,8,32"/>
+      <path fill="#6aa84f" d="M2,32 A22,22,0,0,1,35,13 L32,18.2 A16,16,0,0,0,8,32"/>
+      <text x="17" y="32" style="font-size:12px;">62</text>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.SCORECARD_CHART">
+    <svg
+      viewBox="0 0 48 48"
+      class="o-chart-preview user-select-none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path fill="#ddd" d="M1,8 h46 v32 h-46"/>
+      <path fill="#eee" d="M2,9 h44 v30 h-44"/>
+      <text x="9" y="32" style="font-size:18px;">123</text>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.WATERFALL_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#444" d="M5,45 v-26 h6 v26"/>
+      <path fill="#fff" d="M6,45 v-25 h4 v25"/>
+      <path fill="#eb6d00" d="M13,19 v7 h6 v-7"/>
+      <path fill="#ffe1c8" d="M14,20 v5 h4 v-5"/>
+      <path fill="#eb6d00" d="M21,25 v10 h6 v-10"/>
+      <path fill="#ffe1c8" d="M22,26 v8 h4 v-8"/>
+      <path fill="#0074d9" d="M29,35 v-24 h6 v24"/>
+      <path fill="#c4e4ff" d="M30,34 v-22 h4 v22"/>
+      <path fill="#444" d="M37,45 v-34 h6 v34"/>
+      <path fill="#fff" d="M38,45 v-33 h4 v33"/>
+      <path fill="#444" d="M11,20 v-1 h2 v1 M19,26 v-1 h2 v1 M27,35 v-1 h2 v1 M35,12 v-1 h2 v1"/>
+      <path fill="#444" d="M2,2 v44 h1 v-44 M3,45 h42 v1 h-42"/>
+    </svg>
+  </t>
+  <t t-name="o-spreadsheet-ChartPreview.POPULATION_PYRAMID_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path fill="#eb6d00" d="M23,43 v-6 h22 v6"/>
+      <path fill="#ffe1c8" d="M23,42 v-4 h21 v4"/>
+      <path fill="#eb6d00" d="M23,36 v-6 h18 v6"/>
+      <path fill="#ffe1c8" d="M23,35 v-4 h17 v4"/>
+      <path fill="#eb6d00" d="M23,29 v-6 h12 v6"/>
+      <path fill="#ffe1c8" d="M23,28 v-4 h11 v4"/>
+      <path fill="#eb6d00" d="M23,22 v-6 h8 v6"/>
+      <path fill="#ffe1c8" d="M23,21 v-4 h7 v4"/>
+      <path fill="#eb6d00" d="M23,15 v-6 h4 v6"/>
+      <path fill="#ffe1c8" d="M23,14 v-4 h3 v4"/>
+
+      <path fill="#0074d9" d="M24,43 v-6 h-20 v6"/>
+      <path fill="#c4e4ff" d="M24,42 v-4 h-19 v4"/>
+      <path fill="#0074d9" d="M24,36 v-6 h-18 v6"/>
+      <path fill="#c4e4ff" d="M24,35 v-4 h-17 v4"/>
+      <path fill="#0074d9" d="M24,29 v-6 h-12 v6"/>
+      <path fill="#c4e4ff" d="M24,28 v-4 h-11 v4"/>
+      <path fill="#0074d9" d="M24,22 v-6 h-6 v6"/>
+      <path fill="#c4e4ff" d="M24,21 v-4 h-5 v4"/>
+      <path fill="#0074d9" d="M24,15 v-6 h-4 v6"/>
+      <path fill="#c4e4ff" d="M24,14 v-4 h-3 v4"/>
+
+      <path fill="#444" d="M23,2 v43 h1 v-43 M2,45 h44 v1 h-44"/>
+    </svg>
+  </t>
+
+  <t t-name="o-spreadsheet-ChartTypePicker">
+    <t t-set="selectedChartProperties" t-value="getSelectedChartSubtypeProperties()"/>
+    <Section>
+      <t t-set-slot="title">Chart type</t>
+      <div class="position-relative">
+        <select
+          class="o-input o-type-selector"
+          t-ref="selectRef"
+          t-on-pointerdown.prevent="onPointerDown">
+          <option
+            t-esc="selectedChartProperties.displayName"
+            t-att-value="selectedChartProperties.chartSubtype"
+          />
+        </select>
+        <div class="o-type-selector-preview position-absolute">
+          <t t-call="{{selectedChartProperties.preview}}"/>
+        </div>
+      </div>
+    </Section>
+    <Popover t-if="state.popoverProps" t-props="state.popoverProps">
+      <div
+        t-ref="popoverRef"
+        class="o-chart-select-popover px-3 pb-4"
+        t-att-style="state.popoverStyle">
+        <t t-foreach="categories" t-as="category" t-key="category">
+          <t t-if="chartTypeByCategories[category]">
+            <h5 class="my-3" t-esc="category_value"/>
+            <div class="d-flex flex-wrap">
+              <t
+                t-foreach="chartTypeByCategories[category]"
+                t-as="properties"
+                t-key="properties.chartSubtype">
+                <div
+                  class="o-chart-type-item"
+                  t-att-title="properties.displayName"
+                  t-on-click="() => this.onTypeChange(properties.chartSubtype)"
+                  t-att-data-id="properties.chartSubtype"
+                  t-att-class="{'selected': properties === selectedChartProperties}">
+                  <t t-call="{{properties.preview}}"/>
+                </div>
+              </t>
+            </div>
+          </t>
+        </t>
+      </div>
+    </Popover>
+  </t>
+
   <t t-name="o-spreadsheet-ChartWithAxisDesignPanel">
     <GeneralDesignEditor
       figureId="props.figureId"
@@ -2797,7 +3039,7 @@
               />
             </div>
           </Section>
-          <Section class="'pt-0 px-0'">
+          <Section class="'pt-0 px-0'" t-if="canHaveTwoVerticalAxis">
             <t t-set-slot="title">Vertical axis</t>
             <select
               t-att-value="getDataSerieAxis()"
@@ -2999,13 +3241,13 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="stackedLabel"
+          label="chartTerms.StackedLineChart"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />
         <Checkbox
           name="'cumulative'"
-          label="cumulativeLabel"
+          label="chartTerms.CumulativeData"
           value="props.definition.cumulative"
           onChange.bind="onUpdateCumulative"
         />
@@ -3056,22 +3298,7 @@
 
       <t t-set="definition" t-value="getChartDefinition(this.figureId)"/>
       <t t-if="store.panel === 'configuration'">
-        <Section>
-          <t t-set-slot="title">Chart type</t>
-          <t t-set="types" t-value="chartTypes"/>
-          <select
-            class="o-input o-type-selector"
-            t-on-change="(ev) => this.onTypeChange(ev.target.value)">
-            <option
-              t-foreach="chartTypes"
-              t-as="type"
-              t-key="type"
-              t-att-value="type"
-              t-esc="types[type]"
-              t-att-selected="definition.type === type"
-            />
-          </select>
-        </Section>
+        <ChartTypePicker figureId="props.figureId" chartPanelStore="store"/>
         <t
           t-component="chartPanel.configuration"
           definition="definition"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/o-spreadsheet",
-  "version": "17.4.0-alpha.5",
+  "version": "17.4.0-alpha.7",
   "description": "A spreadsheet component",
   "type": "module",
   "main": "dist/o-spreadsheet.cjs.js",
@@ -14,11 +14,13 @@
   ],
   "scripts": {
     "serve-static": "live-server --open=demo --watch=build/o_spreadsheet.js,build/o_spreadsheet.xml,demo",
-    "dev": "npm-run-all --print-label build --parallel server serve-static watch:*",
+    "dev": "npm-run-all --print-label buildDev --parallel server serve-static watch:*",
     "server": "node tools/server/main.cjs",
     "build:js": "tsc --module es6 --incremental",
-    "build:bundleJs": "rollup -c -m --configDev",
+    "build:bundleJsDev": "rollup -c -m --configDev",
+    "build:bundleJs": "rollup -c -m --configDist",
     "build:bundleXml": "node tools/bundle_xml/main.cjs",
+    "buildDev": "npm-run-all build:js build:bundleJsDev \"build:bundleXml -- --outDir build\"",
     "build": "npm-run-all build:js build:bundleJs \"build:bundleXml -- --outDir build\"",
     "doc": "typedoc",
     "precommit": "npm run prettier && npm run doc",
@@ -28,7 +30,7 @@
     "check-formatting": "prettier . --check",
     "dist": "tsc --module es6 --declaration --declarationDir dist/types && rollup -c && npm run build:bundleXml -- --outDir dist",
     "prepare": "husky install",
-    "watch:bundle": "npm run build:bundleJs -- --watch",
+    "watch:bundle": "npm run build:bundleJsDev -- --watch",
     "watch:ts": "npm run build:js -- --watch",
     "watch:xml": "node tools/bundle_xml/watch_xml_templates.cjs",
     "unzipXlsx": "node tools/bundle_xlsx/unzip_xlsx_demo.cjs",