@fluentui/react-charting 5.24.38 → 5.25.0

package/lib-commonjs/utilities/vbc-utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"vbc-utils.js","sourceRoot":"../src/","sources":["utilities/vbc-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { IMargins } from './utilities';\n\nexport const getClosestPairDiffAndRange = (data: number[] | Date[]): [number, number] | undefined => {\n  if (data.length < 2) {\n    return;\n  }\n  data = data.sort((a, b) =>\n    a instanceof Date ? (a as Date).getTime() - (b as Date).getTime() : (a as number) - (b as number),\n  );\n  let minDiff = Number.MAX_VALUE;\n  for (let i = 1; i < data.length; i++) {\n    const diff =\n      data[i] instanceof Date\n        ? (data[i] as Date).getTime() - (data[i - 1] as Date).getTime()\n        : (data[i] as number) - (data[i - 1] as number);\n    minDiff = Math.min(minDiff, diff);\n  }\n  const range =\n    data[0] instanceof Date\n      ? (data[data.length - 1] as Date).getTime() - (data[0] as Date).getTime()\n      : (data[data.length - 1] as number) - (data[0] as number);\n  return [minDiff, range];\n};\n\nexport const calculateAppropriateBarWidth = (data: number[] | Date[], totalWidth: number, innerPadding: number) => {\n  const result = getClosestPairDiffAndRange(data);\n  if (!result || result[1] === 0) {\n    return 16;\n  }\n  const [closestPairDiff, range] = result;\n  // Refer to https://microsoft.github.io/fluentui-charting-contrib/docs/rfcs/fix-overlapping-bars-on-continuous-axes\n  // for the derivation of the following formula.\n  const barWidth = Math.floor(\n    (totalWidth * closestPairDiff * (1 - innerPadding)) / (range + closestPairDiff * (1 - innerPadding)),\n  );\n  return barWidth;\n};\n\n/**\n * Calculates the total width available for rendering bars.\n */\nexport const calcTotalWidth = (containerWidth: number, margins: IMargins, extraMargin = 0): number => {\n  return containerWidth - (margins.left || 0) - (margins.right || 0) - extraMargin * 2;\n};\n\n/**\n * Calculates the combined size of all bands and the gaps between them, in units relative to the bandwidth.\n */\nexport const calcTotalBandUnits = (numBands: number, innerPadding: number) => {\n  // inner_padding = space_between_bands / (space_between_bands + bandwidth)\n  // => space_between_bands = (inner_padding / (1 - inner_padding)) * bandwidth\n  const gapToBandRatio = innerPadding / (1 - innerPadding);\n  return numBands + (numBands - 1) * gapToBandRatio;\n};\n\n/**\n * Calculates the total width required to render all bands including the gaps between them.\n */\nexport const calcRequiredWidth = (bandwidth: number, numBands: number, innerPadding: number) => {\n  return bandwidth * calcTotalBandUnits(numBands, innerPadding);\n};\n\n/**\n * Calculates the maximum possible bandwidth such that the combined widths of all bands\n * and the gaps between them exactly fill the total available width.\n */\nexport const calcBandwidth = (totalWidth: number, numBands: number, innerPadding: number) => {\n  return totalWidth / calcTotalBandUnits(numBands, innerPadding);\n};\n"]}
+{"version":3,"file":"vbc-utils.js","sourceRoot":"../src/","sources":["utilities/vbc-utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { IMargins } from './utilities';\n\nexport const getClosestPairDiffAndRange = (data: number[] | Date[]): [number, number] | undefined => {\n  if (data.length < 2) {\n    return;\n  }\n  data = data.sort((a, b) =>\n    a instanceof Date ? (a as Date).getTime() - (b as Date).getTime() : (a as number) - (b as number),\n  );\n  let minDiff = Number.MAX_VALUE;\n  for (let i = 1; i < data.length; i++) {\n    const diff =\n      data[i] instanceof Date\n        ? (data[i] as Date).getTime() - (data[i - 1] as Date).getTime()\n        : (data[i] as number) - (data[i - 1] as number);\n    minDiff = Math.min(minDiff, diff);\n  }\n  const range =\n    data[0] instanceof Date\n      ? (data[data.length - 1] as Date).getTime() - (data[0] as Date).getTime()\n      : (data[data.length - 1] as number) - (data[0] as number);\n  return [minDiff, range];\n};\n\nexport const calculateAppropriateBarWidth = (\n  data: number[] | Date[],\n  totalWidth: number,\n  innerPadding: number,\n): number => {\n  const result = getClosestPairDiffAndRange(data);\n  if (!result || result[1] === 0) {\n    return 16;\n  }\n  const [closestPairDiff, range] = result;\n  // Refer to https://microsoft.github.io/fluentui-charting-contrib/docs/rfcs/fix-overlapping-bars-on-continuous-axes\n  // for the derivation of the following formula.\n  const barWidth = Math.floor(\n    (totalWidth * closestPairDiff * (1 - innerPadding)) / (range + closestPairDiff * (1 - innerPadding)),\n  );\n  return barWidth;\n};\n\n/**\n * Calculates the total width available for rendering bars.\n */\nexport const calcTotalWidth = (containerWidth: number, margins: IMargins, extraMargin = 0): number => {\n  return containerWidth - (margins.left || 0) - (margins.right || 0) - extraMargin * 2;\n};\n\n/**\n * Calculates the combined size of all bands and the gaps between them, in units relative to the bandwidth.\n */\nexport const calcTotalBandUnits = (numBands: number, innerPadding: number): number => {\n  // inner_padding = space_between_bands / (space_between_bands + bandwidth)\n  // => space_between_bands = (inner_padding / (1 - inner_padding)) * bandwidth\n  const gapToBandRatio = innerPadding / (1 - innerPadding);\n  return numBands + (numBands - 1) * gapToBandRatio;\n};\n\n/**\n * Calculates the total width required to render all bands including the gaps between them.\n */\nexport const calcRequiredWidth = (bandwidth: number, numBands: number, innerPadding: number): number => {\n  return bandwidth * calcTotalBandUnits(numBands, innerPadding);\n};\n\n/**\n * Calculates the maximum possible bandwidth such that the combined widths of all bands\n * and the gaps between them exactly fill the total available width.\n */\nexport const calcBandwidth = (totalWidth: number, numBands: number, innerPadding: number): number => {\n  return totalWidth / calcTotalBandUnits(numBands, innerPadding);\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-charting",
-  "version": "5.24.38",
+  "version": "5.25.0",
   "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.33",
-    "@fluentui/react-focus": "^8.9.28",
-    "@fluentui/theme-samples": "^8.7.217",
+    "@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.1",
-    "@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,
@@ -26,6 +27,7 @@ import { IChartHoverCardProps } from '../../utilities/index';
 import { TimeLocaleDefinition } from 'd3-time-format';
 import { ChartTypes, IAxisData, IDomainNRange, IYAxisParams, XAxisTypes, YAxisType } from '../../utilities/utilities';
 import { ScaleBand, ScaleLinear } from 'd3-scale';
+import type { JSXElement } from '@fluentui/utilities';
 
 /**
  * Cartesian Chart style properties
@@ -193,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
    */
@@ -335,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
@@ -609,7 +626,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
    * Legends of the chart.
    */
   // eslint-disable-next-line @typescript-eslint/no-deprecated
-  legendBars: JSX.Element | null;
+  legendBars: JSXElement | null;
 
   /**
    * Callout props
@@ -708,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
    */