[IMP] charts: allow to reorder data series

src/components/icons/icons.xml

@@ -761,6 +761,15 @@
       <i class="fa fa-exclamation-circle"/>
     </div>
   </t>
+  <t t-name="o-spreadsheet-Icon.REORDER_INPUT">
+    <svg class="o-icon">
+      <path
+        fill="currentColor"
+        transform="scale(.6,.6)translate(6,5)"
+        d="M9.9 6.4A1 1 0 0 1 9 7H6v10a1 1 0 0 1-2 0V7H1a1 1 0 0 1-.9-.6 1 1 0 0 1 .1-1l4-5a1 1 0 0 1 1.6 0l4 5a1 1 0 0 1 .1 1m8 5.2a1 1 0 0 0-.9-.6h-3V1a1 1 0 0 0-2 0v10H9a1 1 0 0 0-.9.6 1 1 0 0 0 .1 1l4 5a1 1 0 0 0 1.6 0l4-5a1 1 0 0 0 .1-1"
+      />
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.DISPLAY_HEADER">
     <svg class="o-icon" width="18" height="18">
       <path
@@ -841,6 +850,13 @@
       <circle cx="2" cy="12.5" r="1"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-Icon.SHORT_THIN_DRAG_HANDLE">
+    <svg class="o-icon" viewBox="0 0 4 12" fill="currentColor">
+      <circle cx="2" cy="3.5" r="1"/>
+      <circle cx="2" cy="6.5" r="1"/>
+      <circle cx="2" cy="9.5" r="1"/>
+    </svg>
+  </t>
   <t t-name="o-spreadsheet-Icon.EDIT_TABLE">
     <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
       <path

src/components/selection_input/selection_input.ts

@@ -3,6 +3,7 @@ import { ALERT_DANGER_BG } from "../../constants";
 import { Store, useLocalStore } from "../../store_engine";
 import { Color, SpreadsheetChildEnv } from "../../types";
 import { css, cssPropertiesToCss } from "../helpers/css";
+import { useDragAndDropListItems } from "../helpers/drag_and_drop_hook";
 import { updateSelectionWithArrowKeys } from "../helpers/selection_helpers";
 import { RangeInputValue, SelectionInputStore } from "./selection_input_store";
 
@@ -39,6 +40,7 @@ interface Props {
   isInvalid?: boolean;
   class?: string;
   onSelectionChanged?: (ranges: string[]) => void;
+  onSelectionReordered?: (indexes: number[]) => void;
   onSelectionConfirmed?: () => void;
   colors?: Color[];
 }
@@ -73,13 +75,16 @@ export class SelectionInput extends Component<Props, SpreadsheetChildEnv> {
     class: { type: String, optional: true },
     onSelectionChanged: { type: Function, optional: true },
     onSelectionConfirmed: { type: Function, optional: true },
+    onSelectionReordered: { type: Function, optional: true },
     colors: { type: Array, optional: true, default: [] },
   };
   private state: State = useState({
     isMissing: false,
     mode: "select-range",
   });
+  private dragAndDrop = useDragAndDropListItems();
   private focusedInput = useRef("focusedInput");
+  private selectionRef = useRef("o-selection");
   private store!: Store<SelectionInputStore>;
 
   get ranges(): SelectionRange[] {
@@ -126,6 +131,54 @@ export class SelectionInput extends Component<Props, SpreadsheetChildEnv> {
     });
   }
 
+  startDragAndDrop(rangeId: number, event: MouseEvent) {
+    if (event.button !== 0 || (event.target as HTMLElement).tagName === "SELECT") {
+      return;
+    }
+
+    const rects = this.getDimensionElementsRects();
+    const draggableIds = this.ranges.map((range) => range.id);
+    const offset = 1; // column title
+    const draggableItems = draggableIds.map((id, index) => ({
+      id: id.toString(),
+      size: rects[index + offset].height,
+      position: rects[index + offset].y,
+    }));
+    this.dragAndDrop.start("vertical", {
+      draggedItemId: rangeId.toString(),
+      initialMousePosition: event.clientY,
+      items: draggableItems,
+      containerEl: this.selectionRef.el!,
+      onDragEnd: (dimensionName, finalIndex) => {
+        const originalIndex = draggableIds.findIndex((id) => id === rangeId);
+        if (originalIndex === finalIndex) {
+          return;
+        }
+        const draggedItems = [...draggableIds];
+        draggedItems.splice(originalIndex, 1);
+        draggedItems.splice(finalIndex, 0, rangeId);
+        this.props.onSelectionReordered?.(
+          this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id))
+        );
+        this.props.onSelectionConfirmed?.();
+      },
+    });
+  }
+
+  getDimensionElementsRects() {
+    return Array.from(this.selectionRef.el!.children).map((el) => {
+      const style = getComputedStyle(el)!;
+      const rect = el.getBoundingClientRect();
+      return {
+        x: rect.x,
+        y: rect.y,
+        width: rect.width + parseInt(style.marginLeft || "0") + parseInt(style.marginRight || "0"),
+        height:
+          rect.height + parseInt(style.marginTop || "0") + parseInt(style.marginBottom || "0"),
+      };
+    });
+  }
+
   getColor(range: SelectionRange) {
     if (!range.color) {
       return "";

src/components/selection_input/selection_input.xml

@@ -1,12 +1,20 @@
 <templates>
   <t t-name="o-spreadsheet-SelectionInput">
-    <div class="o-selection">
+    <div class="o-selection" t-ref="o-selection">
       <div
         t-foreach="ranges"
         t-as="range"
         t-key="range.id"
         class="o-selection-input d-flex flex-row"
+        t-on-pointerdown="(ev) => this.startDragAndDrop(range.id, ev)"
+        t-att-style="dragAndDrop.itemsStyle[range.id]"
         t-att-class="props.class">
+        <span
+          t-if="ranges.length > 1"
+          title="Reorder input"
+          style="display:flex; align-items:center; margin-bottom: .5rem; cursor:pointer;">
+          <t t-call="o-spreadsheet-Icon.SHORT_THIN_DRAG_HANDLE"/>
+        </span>
         <div class="position-relative w-100">
           <input
             type="text"

src/components/side_panel/chart/bar_chart/bar_chart_config_panel.xml

@@ -13,6 +13,7 @@
         ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+        onSelectionReordered="(indexes) => this.onDataSeriesReordered(indexes)"
       />
       <ChartLabelRange
         range="this.getLabelRange()"

src/components/side_panel/chart/building_blocks/data_series/data_series.ts

@@ -8,6 +8,7 @@ interface Props {
   ranges: CustomizedDataSet[];
   hasSingleRange?: boolean;
   onSelectionChanged: (ranges: string[]) => void;
+  onSelectionReordered?: (indexes: number[]) => void;
   onSelectionConfirmed: () => void;
 }
 
@@ -18,6 +19,7 @@ export class ChartDataSeries extends Component<Props, SpreadsheetChildEnv> {
     ranges: Array,
     hasSingleRange: { type: Boolean, optional: true },
     onSelectionChanged: Function,
+    onSelectionReordered: { type: Function, optional: true },
     onSelectionConfirmed: Function,
   };
 

src/components/side_panel/chart/building_blocks/data_series/data_series.xml

@@ -8,6 +8,7 @@
         hasSingleRange="props.hasSingleRange"
         onSelectionChanged="(ranges) => props.onSelectionChanged(ranges)"
         onSelectionConfirmed="() => props.onSelectionConfirmed()"
+        onSelectionReordered="(indexes) => props.onSelectionReordered(indexes)"
         colors="colors"
       />
     </Section>

src/components/side_panel/chart/building_blocks/generic_side_panel/config_panel.ts

@@ -119,6 +119,13 @@ export class GenericChartConfigPanel extends Component<Props, SpreadsheetChildEn
     });
   }
 
+  onDataSeriesReordered(indexes: number[]) {
+    this.dataSeriesRanges = indexes.map((i) => this.dataSeriesRanges[i]);
+    this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+      dataSets: this.dataSeriesRanges,
+    });
+  }
+
   onDataSeriesConfirmed() {
     this.dataSeriesRanges = spreadRange(this.env.model.getters, this.dataSeriesRanges);
     this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {

src/components/side_panel/chart/building_blocks/generic_side_panel/config_panel.xml

@@ -5,6 +5,7 @@
         ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+        onSelectionReordered="(indexes) => this.onDataSeriesReordered(indexes)"
       />
       <ChartLabelRange
         range="this.getLabelRange()"

src/components/side_panel/chart/line_chart/line_chart_config_panel.xml

@@ -20,6 +20,7 @@
         ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+        onSelectionReordered="(indexes) => this.onDataSeriesReordered(indexes)"
       />
       <ChartLabelRange
         range="this.getLabelRange()"

src/components/side_panel/chart/scatter_chart/scatter_chart_config_panel.xml

@@ -5,6 +5,7 @@
         ranges="this.getDataSeriesRanges()"
         onSelectionChanged="(ranges) => this.onDataSeriesRangesChanged(ranges)"
         onSelectionConfirmed="() => this.onDataSeriesConfirmed()"
+        onSelectionReordered="(indexes) => this.onDataSeriesReordered(indexes)"
       />
       <ChartLabelRange
         range="this.getLabelRange()"

tests/pivots/spreadsheet_pivot/__snapshots__/spreadsheet_pivot_side_panel.test.ts.snap

@@ -109,6 +109,7 @@ exports[`Spreadsheet pivot side panel It should correctly be displayed 1`] = `
               <div
                 class="o-selection-input d-flex flex-row"
               >
+
                 <div
                   class="position-relative w-100"
                 >
@@ -319,6 +320,7 @@ exports[`Spreadsheet pivot side panel It should display only the selection input
               <div
                 class="o-selection-input d-flex flex-row"
               >
+
                 <div
                   class="position-relative w-100"
                 >

tests/side_panels/building_blocks/__snapshots__/data_series.test.ts.snap

@@ -17,6 +17,7 @@ exports[`Data Series Can render a data series component 1`] = `
       <div
         class="o-selection-input d-flex flex-row"
       >
+
         <div
           class="position-relative w-100"
         >

tests/side_panels/building_blocks/__snapshots__/label_range.test.ts.snap

@@ -17,6 +17,7 @@ exports[`Label range Can add options to the label range component 1`] = `
       <div
         class="o-selection-input d-flex flex-row"
       >
+
         <div
           class="position-relative w-100"
         >
@@ -74,6 +75,7 @@ exports[`Label range Can render a label range component 1`] = `
       <div
         class="o-selection-input d-flex flex-row"
       >
+
         <div
           class="position-relative w-100"
         >