[WIP]

Author: matho-odoo

packages/o-spreadsheet-engine/src/helpers/figures/charts/abstract_chart.ts

@@ -25,12 +25,16 @@ export abstract class AbstractChart {
   abstract readonly type: ChartType;
   protected readonly getters: CoreGetters;
   readonly humanize: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 
   constructor(definition: ChartDefinition, sheetId: UID, getters: CoreGetters) {
     this.title = definition.title;
     this.sheetId = sheetId;
     this.getters = getters;
     this.humanize = definition.humanize ?? true;
+    this.annotationText = definition.annotationText;
+    this.annotationLink = definition.annotationLink;
   }
 
   /**

packages/o-spreadsheet-engine/src/helpers/figures/charts/scorecard_chart.ts

@@ -287,6 +287,8 @@ export class ScorecardChart extends AbstractChart {
         : undefined,
       keyDescr: this.keyDescr,
       humanize: this.humanize,
+      annotationText: this.annotationText,
+      annotationLink: this.annotationLink,
     };
   }
 

packages/o-spreadsheet-engine/src/types/chart/common_chart.ts

@@ -15,4 +15,6 @@ export interface CommonChartDefinition {
   readonly axesDesign?: AxesDesign;
   readonly showValues?: boolean;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }

packages/o-spreadsheet-engine/src/types/chart/funnel_chart.ts

@@ -18,6 +18,8 @@ export interface FunnelChartDefinition {
   readonly funnelColors?: FunnelChartColors;
   readonly cumulative?: boolean;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }
 
 export type FunnelChartRuntime = {

packages/o-spreadsheet-engine/src/types/chart/gauge_chart.ts

@@ -9,6 +9,8 @@ export interface GaugeChartDefinition {
   readonly sectionRule: SectionRule;
   readonly background?: Color;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }
 
 export interface SectionRule {

packages/o-spreadsheet-engine/src/types/chart/scorecard_chart.ts

@@ -13,6 +13,8 @@ export interface ScorecardChartDefinition {
   readonly baselineColorUp: Color;
   readonly baselineColorDown: Color;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }
 
 export type BaselineMode = "text" | "difference" | "percentage" | "progress";

packages/o-spreadsheet-engine/src/types/chart/sunburst_chart.ts

@@ -17,6 +17,8 @@ export interface SunburstChartDefinition {
   readonly groupColors?: (Color | undefined | null)[];
   readonly pieHolePercentage?: number;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }
 
 export type SunburstChartRuntime = {

packages/o-spreadsheet-engine/src/types/chart/tree_map_chart.ts

@@ -19,6 +19,8 @@ export interface TreeMapChartDefinition {
   readonly valuesDesign?: TitleDesign;
   readonly coloringOptions?: TreeMapColoringOptions;
   readonly humanize?: boolean;
+  readonly annotationText?: string;
+  readonly annotationLink?: string;
 }
 
 export type TreeMapCategoryColorOptions = {

src/components/figures/figure/figure.ts

@@ -13,6 +13,7 @@ import {
 } from "../../../types/index";
 import { getRefBoundingRect, keyboardEventToShortcutString } from "../../helpers/dom_helpers";
 import { withZoom } from "../../helpers/zoom";
+import { InfoPopover, InfoState } from "../../info_popover/info_popover";
 import { MenuPopover, MenuState } from "../../menu_popover/menu_popover";
 
 type ResizeAnchor =
@@ -49,17 +50,19 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
     onMouseDown: { type: Function, optional: true },
     onClickAnchor: { type: Function, optional: true },
   };
-  static components = { MenuPopover };
+  static components = { MenuPopover, InfoPopover };
   static defaultProps = {
     onMouseDown: () => {},
     onClickAnchor: () => {},
   };
 
   private menuState: MenuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
+  private infoState: InfoState = useState({ isOpen: false, anchorRect: null });
 
   private figureRef = useRef("figure");
   private figureWrapperRef = useRef("figureWrapper");
   private menuButtonRef = useRef("menuButton");
+  private infoButtonRef = useRef("infoButton");
 
   private borderWidth!: number;
 
@@ -280,4 +283,19 @@ export class FigureComponent extends Component<Props, SpreadsheetChildEnv> {
       !this.env.model.getters.isCurrentSheetLocked()
     );
   }
+
+  showInfo() {
+    this.infoState.isOpen = true;
+    this.infoState.anchorRect = getRefBoundingRect(this.infoButtonRef);
+  }
+
+  getAnnotationText() {
+    const chart = this.env.model.getters.getChartFromFigureId(this.props.figureUI.id);
+    return chart?.annotationText;
+  }
+
+  getAnnotationLink() {
+    const chart = this.env.model.getters.getChartFromFigureId(this.props.figureUI.id);
+    return chart?.annotationLink;
+  }
 }

src/components/figures/figure/figure.xml

@@ -25,6 +25,20 @@
           openContextMenu.bind="openContextMenu"
         />
         <div class="o-figure-menu position-absolute m-2" t-if="!env.isDashboard()">
+          <div
+            class="o-info-icon d-flex flex-row align-items-center text-muted me-2"
+            t-if="getAnnotationText() or getAnnotationLink()"
+            t-on-click="showInfo"
+            t-ref="infoButton">
+            <t t-call="o-spreadsheet-Icon.CIRCLE_INFO"/>
+          </div>
+          <InfoPopover
+            t-if="infoState.isOpen"
+            anchorRect="infoState.anchorRect"
+            onClose="() => this.infoState.isOpen=false"
+            infoText="getAnnotationText()"
+            infoLink="getAnnotationLink()"
+          />
           <div
             class="o-figure-menu-item d-flex-align-items-center"
             t-if="!env.model.getters.isReadonly() and props.figureUI.tag !== 'carousel'"