[IMP] chart: add sunburst chart

This commit adds a new chart type: sunburst chart. The sunburst chart
is used to display hierarchical data in a circular chart.

Technically, the chart is implemented using a doughnut chart with
multiple levels and invisible segments.

Task: 4575651

Author: hokolomopo

src/components/figures/chart/chartJs/chartjs.ts

@@ -7,6 +7,7 @@ import { ChartJSRuntime } from "../../../../types/chart/chart";
 import { css } from "../../../helpers";
 import { FunnelChartController, FunnelChartElement } from "./chartjs_funnel_chart";
 import { chartShowValuesPlugin } from "./chartjs_show_values_plugin";
+import { sunburstLabelsPlugin } from "./chartjs_sunburst_labels_plugin";
 import { waterfallLinesPlugin } from "./chartjs_waterfall_plugin";
 
 interface Props {
@@ -16,6 +17,7 @@ interface Props {
 window.Chart?.register(waterfallLinesPlugin);
 window.Chart?.register(chartShowValuesPlugin);
 window.Chart?.register(FunnelChartController, FunnelChartElement);
+window.Chart?.register(sunburstLabelsPlugin);
 
 css/* scss */ `
   .o-spreadsheet {

src/components/figures/chart/chartJs/chartjs_sunburst_labels_plugin.ts

@@ -0,0 +1,108 @@
+import { ChartType, Plugin } from "chart.js";
+import {
+  getDefaultContextFont,
+  isDefined,
+  relativeLuminance,
+  sliceTextToFitWidth,
+} from "../../../../helpers";
+import { GHOST_SUNBURST_VALUE } from "../../../../helpers/figures/charts/runtime";
+import { Style } from "../../../../types";
+import { SunburstChartRawData } from "../../../../types/chart";
+
+export interface ChartSunburstLabelsPluginOptions {
+  showValues: boolean;
+  showLabels: boolean;
+  style: Style;
+  callback: (value: number, axisId?: string) => string;
+}
+
+declare module "chart.js" {
+  interface PluginOptionsByType<TType extends ChartType> {
+    sunburstLabelsPlugin?: ChartSunburstLabelsPluginOptions;
+  }
+}
+
+const Y_PADDING = 3;
+
+export const sunburstLabelsPlugin: Plugin = {
+  id: "sunburstLabelsPlugin",
+  afterDatasetsDraw(chart: any, args, options: ChartSunburstLabelsPluginOptions) {
+    if ((!options.showValues && !options.showLabels) || chart.config.type !== "doughnut") {
+      return;
+    }
+    const ctx = chart.ctx as CanvasRenderingContext2D;
+    drawSunburstChartValues(chart, options, ctx);
+  },
+};
+
+function drawSunburstChartValues(
+  chart: any,
+  options: ChartSunburstLabelsPluginOptions,
+  ctx: CanvasRenderingContext2D
+) {
+  const style = options.style;
+  const fontSize = style.fontSize || 13;
+  const lineHeight = fontSize + Y_PADDING;
+
+  for (const dataset of chart._metasets) {
+    for (let i = 0; i < dataset._dataset.data.length; i++) {
+      const rawData = dataset._dataset.data[i] as SunburstChartRawData;
+      if (rawData.label === GHOST_SUNBURST_VALUE) {
+        continue;
+      }
+      const valuesToDisplay = [
+        options.showLabels ? rawData.label : undefined,
+        options.showValues ? options.callback(rawData.value, "y") : undefined,
+      ].filter(isDefined);
+
+      const arc = dataset.data[i];
+
+      const { startAngle, endAngle, innerRadius, outerRadius } = arc;
+      const midAngle = (startAngle + endAngle) / 2;
+      const midRadius = (innerRadius + outerRadius) / 2;
+
+      const availableWidth = (outerRadius - innerRadius) * 0.9;
+      const angle = endAngle - startAngle;
+      const availableHeight =
+        angle >= Math.PI ? outerRadius : Math.sin(angle / 2) * innerRadius * 2;
+      if (availableHeight < valuesToDisplay.length * lineHeight) {
+        continue;
+      }
+
+      ctx.save();
+
+      const centerX = chart.chartArea.left + chart.chartArea.width / 2;
+      const centerY = chart.chartArea.top + chart.chartArea.height / 2;
+      ctx.translate(centerX, centerY);
+
+      let x: number;
+      if (midAngle > Math.PI / 2) {
+        ctx.rotate(midAngle - Math.PI);
+        x = -midRadius;
+      } else {
+        x = midRadius;
+        ctx.rotate(midAngle);
+      }
+
+      const backgroundColor = arc.options.backgroundColor;
+      const defaultColor = relativeLuminance(backgroundColor) > 0.7 ? "#666666" : "#FFFFFF";
+      ctx.fillStyle = style.textColor || defaultColor;
+      ctx.textAlign = "center";
+      ctx.font = getDefaultContextFont(fontSize, style.bold, style.italic);
+
+      const y = -((valuesToDisplay.length - 1) * lineHeight) / 2;
+      for (let j = 0; j < valuesToDisplay.length; j++) {
+        const fittedText = sliceTextToFitWidth(
+          ctx,
+          availableWidth,
+          valuesToDisplay[j],
+          style,
+          "px"
+        );
+        ctx.fillText(fittedText, x, y + j * lineHeight);
+      }
+
+      ctx.restore();
+    }
+  }
+}

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

@@ -11,6 +11,7 @@ interface Props {
   onSelectionReordered?: (indexes: number[]) => void;
   onSelectionRemoved?: (index: number) => void;
   onSelectionConfirmed: () => void;
+  title?: string;
 }
 
 export class ChartDataSeries extends Component<Props, SpreadsheetChildEnv> {
@@ -23,6 +24,7 @@ export class ChartDataSeries extends Component<Props, SpreadsheetChildEnv> {
     onSelectionReordered: { type: Function, optional: true },
     onSelectionRemoved: { type: Function, optional: true },
     onSelectionConfirmed: Function,
+    title: { type: String, optional: true },
   };
 
   get ranges(): string[] {
@@ -34,6 +36,9 @@ export class ChartDataSeries extends Component<Props, SpreadsheetChildEnv> {
   }
 
   get title() {
+    if (this.props.title) {
+      return this.props.title;
+    }
     return this.props.hasSingleRange ? _t("Data range") : _t("Data series");
   }
 }

src/components/side_panel/chart/chart_type_picker/chart_previews.xml

@@ -269,4 +269,18 @@
       <path stroke="#eb6d00" fill="#ffe1c8" d="M21.5,35.5 h5 l-2.5,7 l-2.5,-7 h1"/>
     </svg>
   </t>
+  <t t-name="o-spreadsheet-ChartPreview.SUNBURST_CHART">
+    <svg viewBox="0 0 48 48" class="o-chart-preview" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fill="#ffe1c8"
+        stroke="#eb6d00"
+        d="M24,12 v8A4,4,0,1,0,27.46,26 L41.32, 34 A20,20,0,0,1,8.679,36.856 L14.807,31.713 A12,12,0,0,1,24,12 M34.4,30 A12,12,0,0,1,14.807,31.713"
+      />
+      <path
+        fill="#c4e4ff"
+        stroke="#0074d9"
+        d="M24,20 v-16 A20 20, 0, 0, 1, 41.32, 34 L27.46,26 A4,4,0,0,0,24,20 M24,12 A12,12,0,0,1,34.4,30 M33.193,16.287 L39.321,11.144 M36,24 L44,24"
+      />
+    </svg>
+  </t>
 </templates>

src/components/side_panel/chart/index.ts

@@ -15,6 +15,8 @@ import { RadarChartDesignPanel } from "./radar_chart/radar_chart_design_panel";
 import { ScatterConfigPanel } from "./scatter_chart/scatter_chart_config_panel";
 import { ScorecardChartConfigPanel } from "./scorecard_chart_panel/scorecard_chart_config_panel";
 import { ScorecardChartDesignPanel } from "./scorecard_chart_panel/scorecard_chart_design_panel";
+import { SunburstChartConfigPanel } from "./sunburst_chart/sunburst_chart_config_panel";
+import { SunburstChartDesignPanel } from "./sunburst_chart/sunburst_chart_design_panel";
 import { WaterfallChartDesignPanel } from "./waterfall_chart/waterfall_chart_design_panel";
 
 export { BarConfigPanel } from "./bar_chart/bar_chart_config_panel";
@@ -74,6 +76,10 @@ chartSidePanelComponentRegistry
     configuration: GenericChartConfigPanel,
     design: RadarChartDesignPanel,
   })
+  .add("sunburst", {
+    configuration: SunburstChartConfigPanel,
+    design: SunburstChartDesignPanel,
+  })
   .add("geo", {
     configuration: GeoChartConfigPanel,
     design: GeoChartDesignPanel,

src/components/side_panel/chart/sunburst_chart/sunburst_chart_config_panel.ts

@@ -0,0 +1,17 @@
+import { GenericChartConfigPanel } from "../building_blocks/generic_side_panel/config_panel";
+
+export class SunburstChartConfigPanel extends GenericChartConfigPanel {
+  static template = "o-spreadsheet-SunburstChartConfigPanel";
+  static components = { ...GenericChartConfigPanel.components };
+
+  getLabelRangeOptions() {
+    return [
+      {
+        name: "dataSetsHaveTitle",
+        label: this.dataSetsHaveTitleLabel,
+        value: this.props.definition.dataSetsHaveTitle,
+        onChange: this.onUpdateDataSetsHaveTitle.bind(this),
+      },
+    ];
+  }
+}

src/components/side_panel/chart/sunburst_chart/sunburst_chart_config_panel.xml

@@ -0,0 +1,24 @@
+<templates>
+  <t t-name="o-spreadsheet-SunburstChartConfigPanel">
+    <div>
+      <ChartDataSeries
+        ranges="this.getDataSeriesRanges()"
+        onSelectionChanged.bind="onDataSeriesRangesChanged"
+        onSelectionConfirmed.bind="onDataSeriesConfirmed"
+        onSelectionReordered.bind="onDataSeriesReordered"
+        onSelectionRemoved.bind="onDataSeriesRemoved"
+        title.translate="Hierarchy"
+      />
+      <ChartLabelRange
+        range="this.getLabelRange()"
+        isInvalid="isLabelInvalid"
+        onSelectionChanged.bind="onLabelRangeChanged"
+        onSelectionConfirmed.bind="onLabelRangeConfirmed"
+        options="this.getLabelRangeOptions()"
+        title.translate="Values"
+      />
+
+      <ChartErrorSection t-if="errorMessages.length" messages="errorMessages"/>
+    </div>
+  </t>
+</templates>

src/components/side_panel/chart/sunburst_chart/sunburst_chart_design_panel.ts

@@ -0,0 +1,65 @@
+import { Component } from "@odoo/owl";
+import { deepCopy } from "../../../../helpers";
+import {
+  SunburstChartDefaults,
+  SunburstChartDefinition,
+  SunburstChartJSDataset,
+  SunburstChartRuntime,
+} from "../../../../types/chart";
+import { DispatchResult, SpreadsheetChildEnv, UID } from "../../../../types/index";
+import { Checkbox } from "../../components/checkbox/checkbox";
+import { SidePanelCollapsible } from "../../components/collapsible/side_panel_collapsible";
+import { RoundColorPicker } from "../../components/round_color_picker/round_color_picker";
+import { Section } from "../../components/section/section";
+import { GeneralDesignEditor } from "../building_blocks/general_design/general_design_editor";
+import { ChartLegend } from "../building_blocks/legend/legend";
+import { TextStyler } from "../building_blocks/text_styler/text_styler";
+
+interface Props {
+  figureId: UID;
+  definition: SunburstChartDefinition;
+  canUpdateChart: (figureID: UID, definition: Partial<SunburstChartDefinition>) => DispatchResult;
+  updateChart: (figureId: UID, definition: Partial<SunburstChartDefinition>) => DispatchResult;
+}
+
+export class SunburstChartDesignPanel extends Component<Props, SpreadsheetChildEnv> {
+  static template = "o-spreadsheet-SunburstChartDesignPanel";
+  static components = {
+    GeneralDesignEditor,
+    Section,
+    SidePanelCollapsible,
+    Checkbox,
+    TextStyler,
+    RoundColorPicker,
+    ChartLegend,
+  };
+  static props = {
+    figureId: String,
+    definition: Object,
+    updateChart: Function,
+    canUpdateChart: { type: Function, optional: true },
+  };
+
+  defaults = SunburstChartDefaults;
+
+  get showValues() {
+    return this.props.definition.showValues ?? SunburstChartDefaults.showValues;
+  }
+
+  get showLabels() {
+    return this.props.definition.showLabels ?? SunburstChartDefaults.showLabels;
+  }
+
+  get groupColors() {
+    const figureId = this.props.figureId;
+    const runtime = this.env.model.getters.getChartRuntime(figureId) as SunburstChartRuntime;
+    const dataset = runtime.chartJsConfig.data.datasets[0] as SunburstChartJSDataset;
+    return dataset?.groupColors || [];
+  }
+
+  onGroupColorChanged(index: number, color: string) {
+    const colors = deepCopy(this.props.definition.groupColors) ?? [];
+    colors[index] = color;
+    this.props.updateChart(this.props.figureId, { groupColors: colors });
+  }
+}

src/components/side_panel/chart/sunburst_chart/sunburst_chart_design_panel.xml

@@ -0,0 +1,59 @@
+<templates>
+  <t t-name="o-spreadsheet-SunburstChartDesignPanel">
+    <GeneralDesignEditor
+      figureId="props.figureId"
+      definition="props.definition"
+      updateChart="props.updateChart">
+      <t t-set-slot="general-extension">
+        <ChartLegend
+          figureId="props.figureId"
+          definition="props.definition"
+          updateChart="props.updateChart"
+        />
+      </t>
+    </GeneralDesignEditor>
+
+    <SidePanelCollapsible collapsedAtInit="false" title.translate="Sunburst options">
+      <t t-set-slot="content">
+        <Section class="'pt-0 o-sunburst-colors'" title.translate="Colors">
+          <t t-foreach="groupColors" t-as="item" t-key="item.label">
+            <div class="d-flex align-items-center mb-2" t-att-data-id="item.label">
+              <RoundColorPicker
+                currentColor="item.color"
+                onColorPicked="(color) => this.onGroupColorChanged(item_index, color)"
+              />
+              <span class="ps-2">
+                <span t-esc="'(#' + (item_index +1 ) + ')'" class="o-text-bolder pe-1"/>
+                <span class="text-muted" t-esc="item.label"/>
+              </span>
+            </div>
+          </t>
+        </Section>
+        <Section title.translate="Labels" class="'pt-0 pb-0'">
+          <div class="d-flex flex-row gap-4">
+            <Checkbox
+              name="'showLabels'"
+              label.translate="Show labels"
+              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 })"
+            />
+          </div>
+        </Section>
+        <Section class="'pt-0'" t-if="showValues || showLabels">
+          <TextStyler
+            class="'o-values-style'"
+            updateStyle="(valuesDesign) => props.updateChart(this.props.figureId, { valuesDesign })"
+            style="props.definition.valuesDesign || {}"
+            defaultStyle="defaults.valuesDesign"
+          />
+        </Section>
+      </t>
+    </SidePanelCollapsible>
+  </t>
+</templates>

src/helpers/color.ts

@@ -542,7 +542,7 @@ export class ColorGenerator {
   private currentColorIndex = 0;
   protected palette: Color[];
 
-  constructor(paletteSize: number, private preferredColors: (string | undefined)[] = []) {
+  constructor(paletteSize: number, private preferredColors: (Color | undefined | null)[] = []) {
     this.palette = getColorsPalette(paletteSize).filter((c) => !preferredColors.includes(c));
   }