[IMP] chart: detect hierarchical chart at chart creation

With this commit, at the chart creation we will check if the data in
the selected zone looks like a hierarchical dataset (multiple
columns with string values, and one column with numeric values).
If so, we will create a sunburst chart instead of a car chart.

closes #6092

Task: 4724420
Signed-off-by: Pierre Rousseau (pro) <[email protected]>

Author: hokolomopo

src/helpers/figures/charts/chart_factory.ts

@@ -13,7 +13,7 @@ import {
   UID,
   Zone,
 } from "../../../types";
-import { LineChartDefinition } from "../../../types/chart";
+import { LineChartDefinition, SunburstChartDefinition } from "../../../types/chart";
 import { ChartDefinition, ChartRuntime } from "../../../types/chart/chart";
 import { CoreGetters, Getters } from "../../../types/getters";
 import { Validator } from "../../../types/validator";
@@ -92,10 +92,15 @@ export function transformDefinition(
  *
  * The type of chart will be :
  * - If the zone is a single non-empty cell, returns a scorecard
+ * - If the dataset starts with multiple string columns, returns a sunburst chart
  * - If the all the labels are numbers/date, returns a line chart
  * - Else returns a bar chart
  */
 export function getSmartChartDefinition(zone: Zone, getters: Getters): ChartDefinition {
+  const hierarchicalDefinition = tryToMakeHierarchicalChart(getters, zone);
+  if (hierarchicalDefinition) {
+    return hierarchicalDefinition;
+  }
   const sheetId = getters.getActiveSheetId();
   let dataSetZone = zone;
   const singleColumn = zoneToDimension(zone).numberOfCols === 1;
@@ -175,3 +180,56 @@ export function getSmartChartDefinition(zone: Zone, getters: Getters): ChartDefi
     legendPosition: newLegendPos,
   };
 }
+
+/**
+ * Return a sunburst chart definition if the data in the zone looks like hierarchical data.
+ */
+function tryToMakeHierarchicalChart(
+  getters: Getters,
+  zone: Zone
+): SunburstChartDefinition | undefined {
+  const sheetId = getters.getActiveSheetId();
+  const numberOfCols = zoneToDimension(zone).numberOfCols;
+  if (zone.top === zone.bottom || numberOfCols <= 2) {
+    return undefined;
+  }
+
+  const firstCellOfValues = getters.getEvaluatedCell({ sheetId, col: zone.right, row: zone.top });
+  const dataSetsHaveTitle = firstCellOfValues.type !== CellValueType.number;
+
+  const getColumnType = (col: number) => {
+    const cells = getters.getEvaluatedCellsInZone(sheetId, {
+      ...zone,
+      left: col,
+      right: col,
+      top: zone.top + (dataSetsHaveTitle ? 1 : 0),
+    });
+    if (cells.every((cell) => cell.type !== CellValueType.number)) {
+      return "string";
+    } else if (cells.every((cell) => cell.type !== CellValueType.text)) {
+      return "number";
+    }
+    return undefined;
+  };
+
+  for (let col = zone.left; col < zone.right; col++) {
+    const columnType = getColumnType(col);
+    if (col !== zone.right && columnType !== "string") {
+      return undefined;
+    } else if (col === zone.right && columnType !== "number") {
+      return undefined;
+    }
+  }
+
+  const dataSetZone = { ...zone, right: zone.right - 1 };
+  const labelsZone = { ...zone, left: zone.right };
+
+  return {
+    title: {},
+    dataSets: [{ dataRange: zoneToXc(dataSetZone) }],
+    type: "sunburst",
+    legendPosition: "none",
+    labelRange: zoneToXc(labelsZone),
+    dataSetsHaveTitle: dataSetsHaveTitle,
+  };
+}

tests/figures/chart/menu_item_insert_chart.test.ts

@@ -24,6 +24,7 @@ import {
   mockChart,
   mountSpreadsheet,
   nextTick,
+  setGrid,
   spyModelDispatch,
 } from "../../test_helpers/helpers";
 
@@ -556,6 +557,44 @@ describe("Insert chart menu item", () => {
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
   });
 
+  test("Chart with multiple string columns is a sunburst chart (without headers)", () => {
+    // prettier-ignore
+    const grid = {
+      K1: "Group1",    L1: "SubGroup1",    M1: "40",
+      K2: "Group1",    L2: "SubGroup2",    M2: "20",
+      K3: "Group2",    L3: "SubGroup1",    M3: "10",
+    };
+    setGrid(model, grid);
+    setSelection(model, ["K1"]);
+    insertChart();
+    const chartId = model.getters.getFigures(model.getters.getActiveSheetId()).at(-1)!.id;
+    expect(model.getters.getChartDefinition(chartId)).toMatchObject({
+      type: "sunburst",
+      dataSets: [{ dataRange: "K1:K3" }, { dataRange: "L1:L3" }],
+      dataSetsHaveTitle: false,
+      labelRange: "M1:M3",
+    });
+  });
+
+  test("Chart with multiple string columns is a sunburst chart (with headers)", () => {
+    // prettier-ignore
+    const grid = {
+      K1: "Header1",   L1: "Header2",      M1: "Header3",
+      K2: "Group1",    L2: "SubGroup1",    M2: "20",
+                       L3: "SubGroup2",    M3: "10",
+    };
+    setGrid(model, grid);
+    setSelection(model, ["K1"]);
+    insertChart();
+    const chartId = model.getters.getFigures(model.getters.getActiveSheetId()).at(-1)!.id;
+    expect(model.getters.getChartDefinition(chartId)).toMatchObject({
+      type: "sunburst",
+      dataSets: [{ dataRange: "K1:K3" }, { dataRange: "L1:L3" }],
+      dataSetsHaveTitle: true,
+      labelRange: "M1:M3",
+    });
+  });
+
   test("Chart can be inserted with unbounded ranges", () => {
     setSelection(model, ["A1:B100"], { unbounded: true });
     insertChart();