@fluentui/react-charting 5.24.39 → 5.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.24.39",
+  "version": "5.25.1",
   "description": "React web charting controls for Microsoft fluentui system.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,9 +36,9 @@
     "jest-canvas-mock": "2.4.0"
   },
   "dependencies": {
-    "@fluentui/chart-utilities": "^1.1.34",
-    "@fluentui/react-focus": "^8.9.29",
-    "@fluentui/theme-samples": "^8.7.218",
+    "@fluentui/chart-utilities": "^1.1.35",
+    "@fluentui/react-focus": "^8.10.0",
+    "@fluentui/theme-samples": "^8.7.219",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@types/d3-array": "^3.0.0",
     "@types/d3-axis": "^3.0.0",
@@ -66,11 +66,11 @@
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@fluentui/react": "^8.124.2",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react": "^8.125.0",
+    "@types/react": ">=16.8.0 <20.0.0",
+    "@types/react-dom": ">=16.8.0 <20.0.0",
+    "react": ">=16.8.0 <20.0.0",
+    "react-dom": ">=16.8.0 <20.0.0"
   },
   "exports": {
     ".": {

package/src/components/CommonComponents/Annotations/ChartAnnotationLayer.types.ts

@@ -0,0 +1,58 @@
+import { ITheme } from '@fluentui/react/lib/Styling';
+import { IChartAnnotation, ChartAnnotationArrowHead } from '../../../types/IChartAnnotation';
+
+export interface IAnnotationPoint {
+  x: number;
+  y: number;
+}
+
+export interface IAnnotationPlotRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface IChartAnnotationContext {
+  /** Rectangle describing the drawable area of the chart (without margins) */
+  plotRect: IAnnotationPlotRect;
+  /** Size of the owning SVG element */
+  svgRect: { width: number; height: number };
+  /** Indicates if layout should be mirrored */
+  isRtl?: boolean;
+  /** Primary x scale mapping data domain to pixels */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  xScale?: (value: any) => number;
+  /** Primary y scale mapping data domain to pixels */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  yScalePrimary?: (value: any) => number;
+  /** Secondary y scale when present */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  yScaleSecondary?: (value: any) => number;
+}
+
+export interface IChartAnnotationLayerProps {
+  annotations?: IChartAnnotation[];
+  context: IChartAnnotationContext;
+  theme: ITheme;
+  className?: string;
+}
+
+export interface IResolvedAnnotationPosition {
+  /** Final absolute position after applying layout and offsets */
+  point: IAnnotationPoint;
+  /** Raw anchor position before offsets (used for connectors) */
+  anchor: IAnnotationPoint;
+}
+
+export type ConnectorRenderData = {
+  key: string;
+  start: IAnnotationPoint;
+  end: IAnnotationPoint;
+  strokeColor: string;
+  strokeWidth: number;
+  dashArray?: string;
+  arrow: ChartAnnotationArrowHead;
+  markerSize: number;
+  markerStrokeWidth: number;
+};

package/src/components/CommonComponents/CartesianChart.types.ts

@@ -11,6 +11,7 @@ import {
   AxisScaleType,
   IAccessibilityProps,
   IChart,
+  IChartAnnotation,
   IDataPoint,
   IGanttChartDataPoint,
   IGroupedVerticalBarChartData,
@@ -194,11 +195,21 @@ export interface ICartesianChartStyles {
    */
   chartWrapper?: IStyle;
 
+  /**
+   * Styles for the element wrapping the svg and overlays for annotation
+   */
+  plotContainer?: IStyle;
+
   /**
    * Styles for the svg tooltip
    */
   svgTooltip?: IStyle;
 
+  /**
+   * Styles applied to the annotation layer root element
+   */
+  annotationLayer?: IStyle;
+
   /**
    * Styles for the chart svg element
    */
@@ -336,6 +347,11 @@ export interface ICartesianChartProps {
    */
   xAxistickSize?: number;
 
+  /**
+   * Text annotations rendered on top of the chart area
+   */
+  annotations?: IChartAnnotation[];
+
   /**
    * defines the space between the tick line and the data label
    * @default 10
@@ -709,6 +725,11 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    */
   svgFocusZoneProps?: IFocusZoneProps;
 
+  /**
+   * Annotations to render on top of the chart area.
+   */
+  annotations?: IChartAnnotation[];
+
   /**
    * The prop used to define the culture to localize the numbers and date
    */