@odoo/o-spreadsheet 14.0.1 → 15.0.0

package/src/plugins/chart.ts

@@ -1,404 +0,0 @@
-import { ChartColor, ChartConfiguration, ChartData, ChartTooltipItem, ChartType } from "chart.js";
-import { BasePlugin } from "../base_plugin";
-import { chartTerms } from "../components/side_panel/translations_terms";
-import { rangeReference } from "../formulas/parser";
-import { deepCopy, isInside, toXC, toZone, uuidv4, zoneToXc } from "../helpers/index";
-import {
-  CancelledReason,
-  ChartDefinition,
-  Command,
-  CommandResult,
-  CreateChartDefinition,
-  DataSet,
-  Figure,
-  LAYERS,
-  WorkbookData,
-  Zone,
-} from "../types/index";
-
-/**
- * Chart plugin
- *
- * This plugin creates and displays charts
- * */
-
-const GraphColors = [
-  // the same colors as those used in odoo reporting
-  "rgb(31,119,180)",
-  "rgb(255,127,14)",
-  "rgb(174,199,232)",
-  "rgb(255,187,120)",
-  "rgb(44,160,44)",
-  "rgb(152,223,138)",
-  "rgb(214,39,40)",
-  "rgb(255,152,150)",
-  "rgb(148,103,189)",
-  "rgb(197,176,213)",
-  "rgb(140,86,75)",
-  "rgb(196,156,148)",
-  "rgb(227,119,194)",
-  "rgb(247,182,210)",
-  "rgb(127,127,127)",
-  "rgb(199,199,199)",
-  "rgb(188,189,34)",
-  "rgb(219,219,141)",
-  "rgb(23,190,207)",
-  "rgb(158,218,229)",
-];
-
-export class ChartPlugin extends BasePlugin {
-  static getters = ["getChartRuntime"];
-  static layers = [LAYERS.Chart];
-
-  private chartFigures: Set<string> = new Set();
-
-  // contains the configuration of the chart with it's values like they should be displayed,
-  // as well as all the options needed for the chart library to work correctly
-  private chartRuntime: { [figureId: string]: ChartConfiguration } = {};
-  private outOfDate: Set<string> = new Set<string>();
-
-  allowDispatch(cmd: Command): CommandResult {
-    const success: CommandResult = { status: "SUCCESS" };
-    switch (cmd.type) {
-      case "UPDATE_CHART":
-      case "CREATE_CHART":
-        const invalidRanges =
-          cmd.definition.dataSets.find((range) => !rangeReference.test(range.split("!").pop()!)) !==
-          undefined;
-        const invalidLabels = !rangeReference.test(cmd.definition.labelRange.split("!").pop()!);
-        return invalidRanges || invalidLabels
-          ? { status: "CANCELLED", reason: CancelledReason.InvalidChartDefinition }
-          : success;
-      default:
-        return success;
-    }
-  }
-
-  handle(cmd: Command) {
-    switch (cmd.type) {
-      case "CREATE_CHART":
-        this.addChartFigure(cmd.sheetId, {
-          id: cmd.id,
-          data: this.createChartDefinition(cmd.definition, cmd.sheetId),
-          x: 0,
-          y: 0,
-          height: 500,
-          width: 800,
-          tag: "chart",
-        });
-        break;
-      case "UPDATE_CHART": {
-        const chartDefinition = this.createChartDefinition(
-          cmd.definition,
-          this.getChartDefinition(cmd.id).sheetId
-        );
-        this.dispatch("UPDATE_FIGURE", {
-          id: cmd.id,
-          data: chartDefinition,
-        });
-        this.history.updateLocalState(
-          ["chartRuntime", cmd.id],
-          this.mapDefinitionToRuntime(chartDefinition)
-        );
-        break;
-      }
-      case "DELETE_FIGURE":
-        if (this.chartFigures.has(cmd.id)) {
-          const figures = new Set(this.chartFigures);
-          figures.delete(cmd.id);
-          this.history.updateLocalState(["chartFigures"], figures);
-          this.history.updateLocalState(["chartRuntime", cmd.id], undefined);
-        }
-        break;
-      case "DUPLICATE_SHEET": {
-        const newSheetId = cmd.id;
-        const figures = [...this.chartFigures]
-          .map((figureId) => this.getters.getFigure<ChartDefinition>(figureId))
-          .filter((figure) => figure.data.sheetId === cmd.sheet)
-          .map(deepCopy);
-        for (let figure of figures) {
-          figure.data.sheetId = newSheetId;
-          figure.id = uuidv4();
-          this.addChartFigure(newSheetId, figure);
-        }
-        break;
-      }
-      case "DELETE_SHEET":
-        const figures = new Set(this.chartFigures);
-        const runtime = { ...this.chartRuntime };
-        for (let figureId of this.chartFigures) {
-          const figure = this.getters.getFigure(figureId);
-          if (!figure) {
-            figures.delete(figureId);
-            delete runtime[figureId];
-          }
-        }
-        this.history.updateLocalState(["chartFigures"], figures);
-        this.history.updateLocalState(["chartRuntime"], runtime);
-        break;
-      case "UPDATE_CELL":
-        for (let chartId of this.chartFigures) {
-          const chart = this.getChartDefinition(chartId);
-          if (this.isCellUsedInChart(chart, cmd.col, cmd.row)) {
-            this.outOfDate.add(chartId);
-          }
-        }
-        break;
-    }
-  }
-
-  finalize(cmd: Command) {
-    switch (cmd.type) {
-      case "EVALUATE_CELLS":
-      case "START":
-        // if there was an async evaluation of cell, there is no way to know which was updated so all charts must be updated
-        for (let id in this.chartRuntime) {
-          this.outOfDate.add(id);
-        }
-        break;
-    }
-  }
-
-  import(data: WorkbookData) {
-    for (let sheet of data.sheets) {
-      for (let f of sheet.figures) {
-        if (f.tag === "chart") {
-          this.outOfDate.add(f.id);
-          this.chartFigures.add(f.id);
-        }
-      }
-    }
-  }
-
-  // ---------------------------------------------------------------------------
-  // Getters
-  // ---------------------------------------------------------------------------
-  getChartRuntime(figureId: string): ChartConfiguration | undefined {
-    if (this.outOfDate.has(figureId)) {
-      this.chartRuntime[figureId] = this.mapDefinitionToRuntime(this.getChartDefinition(figureId));
-      this.outOfDate.delete(figureId);
-    }
-    return this.chartRuntime[figureId];
-  }
-
-  // ---------------------------------------------------------------------------
-  // Private
-  // ---------------------------------------------------------------------------
-
-  private getChartDefinition(figureId: string): ChartDefinition {
-    return this.getters.getFigure<ChartDefinition>(figureId).data;
-  }
-
-  private createChartDefinition(
-    createCommand: CreateChartDefinition,
-    sheetId: string
-  ): ChartDefinition {
-    let dataSets: DataSet[] = [];
-
-    for (let range of createCommand.dataSets) {
-      let zone = toZone(range);
-      if (zone.left !== zone.right && zone.top !== zone.bottom) {
-        // It's a rectangle. We treat all columns (arbitrary) as different data series.
-        for (let column = zone.left; column <= zone.right; column++) {
-          const columnZone = {
-            left: column,
-            right: column,
-            top: zone.top,
-            bottom: zone.bottom,
-          };
-          dataSets.push(this.createDataset(columnZone, createCommand.seriesHasTitle));
-        }
-      } else if (zone.left === zone.right && zone.top === zone.bottom) {
-        // A single cell. If it's only the title, the dataset is not added.
-        if (!createCommand.seriesHasTitle) {
-          dataSets.push({ dataRange: zoneToXc(zone) });
-        }
-      } else {
-        dataSets.push(this.createDataset(zone, createCommand.seriesHasTitle));
-      }
-    }
-
-    return {
-      title: createCommand.title,
-      type: createCommand.type,
-      dataSets: dataSets,
-      labelRange: createCommand.labelRange,
-      sheetId: sheetId,
-    };
-  }
-
-  /**
-   * Create a chart dataset from a Zone.
-   * The zone should be a single column or a single row
-   */
-  private createDataset(zone: Zone, withTitle: boolean): DataSet {
-    if (zone.left !== zone.right && zone.top !== zone.bottom) {
-      throw new Error(`Zone should be a single column or row: ${zoneToXc(zone)}`);
-    }
-    const labelCell = withTitle ? toXC(zone.left, zone.top) : undefined;
-    const offset = withTitle ? 1 : 0;
-    const isColumn = zone.top !== zone.bottom && zone.left === zone.right;
-    const dataRange = zoneToXc({
-      top: isColumn ? zone.top + offset : zone.top,
-      bottom: zone.bottom,
-      left: isColumn ? zone.left : zone.left + offset,
-      right: zone.right,
-    });
-    return { labelCell, dataRange };
-  }
-
-  private getDefaultConfiguration(
-    type: ChartType,
-    title: string | undefined,
-    labels: string[]
-  ): ChartConfiguration {
-    const config: ChartConfiguration = {
-      type,
-      options: {
-        // https://www.chartjs.org/docs/latest/general/responsive.html
-        responsive: true, // will resize when its container is resized
-        maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
-        layout: { padding: { left: 20, right: 20, top: 10, bottom: 10 } },
-        elements: {
-          line: {
-            fill: false, // do not fill the area under line charts
-          },
-          point: {
-            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
-          },
-        },
-        animation: {
-          duration: 0, // general animation time
-        },
-        hover: {
-          animationDuration: 10, // duration of animations when hovering an item
-        },
-        responsiveAnimationDuration: 0, // animation duration after a resize
-        title: {
-          display: true,
-          fontSize: 22,
-          fontStyle: "normal",
-          text: title,
-        },
-      },
-      data: {
-        labels,
-        datasets: [],
-      },
-    };
-
-    if (type !== "pie") {
-      config.options!.scales = {
-        xAxes: [
-          {
-            ticks: {
-              // x axis configuration
-              maxRotation: 60,
-              minRotation: 15,
-              padding: 5,
-              labelOffset: 2,
-            },
-          },
-        ],
-        yAxes: [
-          {
-            ticks: {
-              // y axis configuration
-              beginAtZero: true, // the origin of the y axis is always zero
-            },
-          },
-        ],
-      };
-    } else {
-      config.options!.tooltips = {
-        callbacks: {
-          title: function (tooltipItems: ChartTooltipItem[], data: ChartData) {
-            return data.datasets![tooltipItems[0]!.datasetIndex!].label!;
-          },
-        },
-      };
-    }
-    return config;
-  }
-
-  private extractDataFromRange(sheetId: string, reference?: string): any[] {
-    return reference ? this.getters.getRangeValues(reference, sheetId).flat(1) : [];
-  }
-
-  private mapDefinitionToRuntime(definition: ChartDefinition): ChartConfiguration {
-    const labels =
-      definition.labelRange !== ""
-        ? this.getters.getRangeFormattedValues(definition.labelRange, definition.sheetId).flat(1)
-        : [];
-    const runtime = this.getDefaultConfiguration(definition.type, definition.title, labels);
-
-    let graphColorIndex = 0;
-    const pieColors: ChartColor[] = [];
-    if (definition.type === "pie") {
-      const maxLength = Math.max(
-        ...definition.dataSets.map(
-          (ds) => this.extractDataFromRange(definition.sheetId, ds.dataRange).length
-        )
-      );
-      for (let i = 0; i <= maxLength; i++) {
-        pieColors.push(GraphColors[graphColorIndex]);
-        graphColorIndex = ++graphColorIndex % GraphColors.length;
-      }
-    }
-    for (const [dsIndex, ds] of Object.entries(definition.dataSets)) {
-      let label;
-      if (ds.labelCell) {
-        try {
-          label = this.getters.evaluateFormula(ds.labelCell, definition.sheetId);
-        } catch (e) {
-          // We want here to catch issue linked to async formula
-          label = `${chartTerms.Series} ${parseInt(dsIndex) + 1}`;
-        }
-      } else {
-        label = `${chartTerms.Series} ${parseInt(dsIndex) + 1}`;
-      }
-      const dataset = {
-        label,
-        data: this.extractDataFromRange(definition.sheetId, ds.dataRange),
-        lineTension: 0, // 0 -> render straight lines, which is much faster
-        borderColor: definition.type !== "pie" ? GraphColors[graphColorIndex] : "#FFFFFF", // white border for pie chart
-        backgroundColor: GraphColors[graphColorIndex],
-      };
-      if (definition.type === "pie") {
-        // In case of pie graph, dataset.backgroundColor is an array of string
-        // @ts-ignore
-        dataset.backgroundColor = pieColors;
-      }
-      graphColorIndex = ++graphColorIndex % GraphColors.length;
-      runtime.data!.datasets!.push(dataset);
-    }
-    return runtime;
-  }
-
-  private addChartFigure(sheetId: string, figure: Figure<ChartDefinition>) {
-    this.dispatch("CREATE_FIGURE", {
-      sheet: sheetId,
-      figure,
-    });
-    this.history.updateLocalState(["chartFigures"], new Set(this.chartFigures).add(figure.id));
-    this.history.updateLocalState(
-      ["chartRuntime", figure.id],
-      this.mapDefinitionToRuntime(figure.data)
-    );
-  }
-
-  private isCellUsedInChart(chart: ChartDefinition, col: number, row: number): boolean {
-    if (isInside(col, row, toZone(chart.labelRange))) {
-      return true;
-    }
-    for (let db of chart.dataSets) {
-      if (db.dataRange && db.dataRange.length > 0 && isInside(col, row, toZone(db.dataRange))) {
-        return true;
-      }
-      if (db.labelCell && db.labelCell.length > 0 && isInside(col, row, toZone(db.labelCell))) {
-        return true;
-      }
-    }
-    return false;
-  }
-}