@fluentui/react-charting 5.25.0 → 5.25.2

package/etc/react-charting.api.md

@@ -22,6 +22,7 @@ import { IStyleFunctionOrObject as IStyleFunctionOrObject_2 } from '@fluentui/re
 import { ITheme } from '@fluentui/react/lib/Styling';
 import { ITheme as ITheme_2 } from '@fluentui/react';
 import type { JSXElement } from '@fluentui/utilities';
+import type { Margin } from '@fluentui/chart-utilities';
 import * as React_2 from 'react';
 import { SankeyLink } from 'd3-sankey';
 import { SankeyNode } from 'd3-sankey';
@@ -29,6 +30,9 @@ import { ScaleBand } from 'd3-scale';
 import { ScaleLinear } from 'd3-scale';
 import { TimeLocaleDefinition } from 'd3-time-format';
 
+// @public (undocumented)
+export const AnnotationOnlyChart: React_2.FC<IAnnotationOnlyChartProps>;
+
 // @public
 export const AreaChart: React_2.FunctionComponent<IAreaChartProps>;
 
@@ -114,6 +118,7 @@ export interface ChartAnnotationStyleProps {
     fontWeight?: React_2.CSSProperties['fontWeight'];
     opacity?: number;
     padding?: string;
+    rotation?: number;
     textColor?: string;
 }
 
@@ -289,6 +294,21 @@ export interface IAccessibilityProps {
     ariaLabelledBy?: string;
 }
 
+// @public
+export interface IAnnotationOnlyChartProps {
+    annotations: ChartAnnotation[];
+    chartTitle?: string;
+    componentRef?: React_2.RefObject<IChart>;
+    description?: string;
+    fontColor?: string;
+    fontFamily?: string;
+    height?: number;
+    margin?: Partial<Margin>;
+    paperBackgroundColor?: string;
+    plotBackgroundColor?: string;
+    width?: number;
+}
+
 // @public
 export interface IAreaChartProps extends ICartesianChartProps {
     culture?: string;
@@ -416,6 +436,8 @@ export interface ICartesianChartProps {
     };
     secondaryYScaleType?: AxisScaleType;
     showXAxisLablesTooltip?: boolean;
+    showYAxisLables?: boolean;
+    showYAxisLablesTooltip?: boolean;
     strokeWidth?: number;
     styles?: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
     supportNegativeData?: boolean;
@@ -814,8 +836,6 @@ export interface IGanttChartProps extends ICartesianChartProps {
     maxBarHeight?: number;
     onRenderCalloutPerDataPoint?: IRenderFunction<IGanttChartDataPoint>;
     roundCorners?: boolean;
-    showYAxisLables?: boolean;
-    showYAxisLablesTooltip?: boolean;
     styles?: IStyleFunctionOrObject<IGanttChartStyleProps, IGanttChartStyles>;
     yAxisPadding?: number;
 }
@@ -1008,8 +1028,6 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
     domainValuesForColorScale: number[];
     legendProps?: Partial<ILegendsProps>;
     rangeValuesForColorScale: string[];
-    showYAxisLables?: boolean;
-    showYAxisLablesTooltip?: boolean;
     sortOrder?: 'none' | 'alphabetical';
     styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
     xAxisDateFormatString?: string;
@@ -1109,8 +1127,6 @@ export interface IHorizontalBarChartWithAxisProps extends ICartesianChartProps {
     enableGradient?: boolean;
     onRenderCalloutPerDataPoint?: IRenderFunction<IHorizontalBarChartWithAxisDataPoint>;
     roundCorners?: boolean;
-    showYAxisLables?: boolean;
-    showYAxisLablesTooltip?: boolean;
     styles?: IStyleFunctionOrObject<IHorizontalBarChartWithAxisStyleProps, IHorizontalBarChartWithAxisStyles>;
     useSingleColor?: boolean;
     yAxisPadding?: number;
@@ -1377,7 +1393,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     // Warning: (ae-forgotten-export) The symbol "ChartTypes" needs to be exported by the entry point index.d.ts
     chartType: ChartTypes;
     children(props: IChildProps): React_2.ReactNode;
-    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
+    createStringYAxis: (yAxisParams: IYAxisParams, dataPoints: string[], isRtl: boolean, axisData: IAxisData, barWidth: number | undefined, chartType?: ChartTypes) => ScaleBand<string>;
     // Warning: (ae-forgotten-export) The symbol "IYAxisParams" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "IAxisData" needs to be exported by the entry point index.d.ts
     createYAxis: (yAxisParams: IYAxisParams, isRtl: boolean, axisData: IAxisData, isIntegralDataset: boolean, useSecondaryYScale?: boolean, supportNegativeData?: boolean, roundedTicks?: boolean, scaleType?: AxisScaleType) => ScaleLinear<number, number, never>;
@@ -1390,7 +1406,7 @@ export interface IModifiedCartesianChartProps extends ICartesianChartProps {
     getAxisData?: any;
     getDomainMargins?: (containerWidth: number) => IMargins;
     // Warning: (ae-forgotten-export) The symbol "IDomainNRange" needs to be exported by the entry point index.d.ts
-    getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[] | IGanttChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined, shiftX: number) => IDomainNRange;
+    getDomainNRangeValues: (points: ILineChartPoints[] | IVerticalBarChartDataPoint[] | IVerticalStackedBarDataPoint[] | IHorizontalBarChartWithAxisDataPoint[] | IGroupedVerticalBarChartData[] | IHeatMapChartDataPoint[] | IGanttChartDataPoint[], margins: IMargins, width: number, chartType: ChartTypes, isRTL: boolean, xAxisType: XAxisTypes, barWidth: number, tickValues: Date[] | number[] | string[] | undefined) => IDomainNRange;
     getGraphData?: any;
     getmargins?: (margins: IMargins) => void;
     getMinMaxOfYAxis: (points: ILineChartPoints[] | IHorizontalBarChartWithAxisDataPoint[] | IVerticalBarChartDataPoint[] | IDataPoint[] | IScatterChartPoints[] | IGanttChartDataPoint[], yAxisType: YAxisType | undefined, useSecondaryYScale?: boolean) => {
@@ -1633,7 +1649,6 @@ export interface IScatterChartProps extends ICartesianChartProps {
     data: IChartProps;
     getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;
     onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;
-    showYAxisLablesTooltip?: boolean;
     styles?: IScatterChartStyles;
 }
 
@@ -1895,8 +1910,6 @@ export interface IVerticalStackedBarChartProps extends ICartesianChartProps {
     onRenderCalloutPerDataPoint?: IRenderFunction<IVSChartDataPoint>;
     onRenderCalloutPerStack?: IRenderFunction<IVerticalStackedChartProps>;
     roundCorners?: boolean;
-    showYAxisLables?: boolean;
-    showYAxisLablesTooltip?: boolean;
     styles?: IStyleFunctionOrObject<IVerticalStackedBarChartStyleProps, IVerticalStackedBarChartStyles>;
     xAxisInnerPadding?: number;
     xAxisOuterPadding?: number;

package/lib/AnnotationOnlyChart.d.ts

@@ -0,0 +1 @@
+export * from './components/AnnotationOnlyChart/index';

package/lib/AnnotationOnlyChart.js

@@ -0,0 +1,2 @@
+export * from './components/AnnotationOnlyChart/index';
+//# sourceMappingURL=AnnotationOnlyChart.js.map

package/lib/AnnotationOnlyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationOnlyChart.js","sourceRoot":"../src/","sources":["AnnotationOnlyChart.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC","sourcesContent":["export * from './components/AnnotationOnlyChart/index';\n"]}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { IAnnotationOnlyChartProps } from './AnnotationOnlyChart.types';
+export declare const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps>;

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { getRTL, useTheme } from '@fluentui/react';
+import { mergeStyles } from '@fluentui/react/lib/Styling';
+import { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
+var DEFAULT_HEIGHT = 650;
+var FALLBACK_WIDTH = 400;
+var buildPadding = function (margin) {
+    var _a, _b, _c, _d;
+    if (!margin) {
+        return undefined;
+    }
+    var top = (_a = margin.t) !== null && _a !== void 0 ? _a : 0;
+    var right = (_b = margin.r) !== null && _b !== void 0 ? _b : 0;
+    var bottom = (_c = margin.b) !== null && _c !== void 0 ? _c : 0;
+    var left = (_d = margin.l) !== null && _d !== void 0 ? _d : 0;
+    if (top === 0 && right === 0 && bottom === 0 && left === 0) {
+        return undefined;
+    }
+    return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
+};
+export var AnnotationOnlyChart = function (props) {
+    var annotations = props.annotations, chartTitle = props.chartTitle, description = props.description, width = props.width, height = props.height, paperBackgroundColor = props.paperBackgroundColor, plotBackgroundColor = props.plotBackgroundColor, fontColor = props.fontColor, fontFamily = props.fontFamily, margin = props.margin, componentRef = props.componentRef;
+    var theme = useTheme();
+    var containerRef = React.useRef(null);
+    var contentRef = React.useRef(null);
+    var _a = React.useState(width !== null && width !== void 0 ? width : 0), measuredWidth = _a[0], setMeasuredWidth = _a[1];
+    var _b = React.useState(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT), contentHeight = _b[0], setContentHeight = _b[1];
+    React.useEffect(function () {
+        if (typeof width === 'number' && width > 0) {
+            setMeasuredWidth(width);
+            return;
+        }
+        var node = containerRef.current;
+        if (!node || typeof ResizeObserver === 'undefined') {
+            var rect_1 = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+            if (rect_1 && rect_1.width > 0) {
+                setMeasuredWidth(rect_1.width);
+            }
+            else {
+                setMeasuredWidth(function (prev) { return (prev > 0 ? prev : FALLBACK_WIDTH); });
+            }
+            return;
+        }
+        var observer = new ResizeObserver(function (entries) {
+            var entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            var newWidth = entry.contentRect.width;
+            if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {
+                setMeasuredWidth(newWidth);
+            }
+        });
+        var rect = node.getBoundingClientRect();
+        if (rect.width > 0) {
+            setMeasuredWidth(rect.width);
+        }
+        observer.observe(node);
+        return function () { return observer.disconnect(); };
+    }, [width, measuredWidth]);
+    var resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);
+    var resolvedHeight = Math.max(height !== null && height !== void 0 ? height : DEFAULT_HEIGHT, 1);
+    React.useEffect(function () {
+        var node = contentRef.current;
+        if (!node) {
+            setContentHeight(function (prev) { return (prev > 0 ? prev : resolvedHeight); });
+            return;
+        }
+        if (typeof ResizeObserver === 'undefined') {
+            var rect_2 = node.getBoundingClientRect();
+            setContentHeight(function (prev) { return (rect_2.height > 0 ? rect_2.height : prev > 0 ? prev : resolvedHeight); });
+            return;
+        }
+        var observer = new ResizeObserver(function (entries) {
+            var entry = entries[0];
+            if (!entry) {
+                return;
+            }
+            var newHeight = entry.contentRect.height;
+            if (newHeight > 0) {
+                setContentHeight(function (prev) { return (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev); });
+            }
+        });
+        var rect = node.getBoundingClientRect();
+        setContentHeight(function (prev) { return (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight); });
+        observer.observe(node);
+        return function () { return observer.disconnect(); };
+    }, [
+        resolvedHeight,
+        resolvedWidth,
+        annotations,
+        chartTitle,
+        description,
+        margin,
+        plotBackgroundColor,
+        paperBackgroundColor,
+        fontColor,
+        fontFamily,
+        theme,
+    ]);
+    var svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);
+    var context = {
+        plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },
+        svgRect: { width: resolvedWidth, height: resolvedHeight },
+        isRtl: theme === null || theme === void 0 ? void 0 : theme.rtl,
+    };
+    var padding = buildPadding(margin);
+    var rootClassName = React.useMemo(function () {
+        return mergeStyles({
+            position: 'relative',
+            width: width ? "".concat(width, "px") : '100%',
+            minHeight: resolvedHeight,
+            backgroundColor: paperBackgroundColor !== null && paperBackgroundColor !== void 0 ? paperBackgroundColor : theme.semanticColors.bodyBackground,
+            color: fontColor !== null && fontColor !== void 0 ? fontColor : theme.semanticColors.bodyText,
+            fontFamily: fontFamily !== null && fontFamily !== void 0 ? fontFamily : theme.fonts.medium.fontFamily,
+            padding: padding,
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: '8px',
+        });
+    }, [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, theme, width]);
+    var contentClassName = React.useMemo(function () {
+        var _a;
+        return mergeStyles({
+            position: 'relative',
+            flexGrow: 1,
+            backgroundColor: plotBackgroundColor !== null && plotBackgroundColor !== void 0 ? plotBackgroundColor : 'transparent',
+            borderRadius: (_a = theme.effects.roundedCorner2) !== null && _a !== void 0 ? _a : 4,
+            boxSizing: 'border-box',
+        });
+    }, [plotBackgroundColor, theme.effects.roundedCorner2]);
+    var titleClassName = React.useMemo(function () {
+        return mergeStyles({
+            textAlign: 'center',
+        });
+    }, []);
+    var resolvedAnnotations = annotations !== null && annotations !== void 0 ? annotations : [];
+    var hasAnnotations = resolvedAnnotations.length > 0;
+    var ariaLabel = hasAnnotations ? description !== null && description !== void 0 ? description : chartTitle : undefined;
+    React.useImperativeHandle(componentRef, function () {
+        var chartHandle = {
+            chartContainer: containerRef.current,
+            toImage: function (opts) {
+                return exportChartsAsImage([{ container: containerRef.current }], undefined, getRTL(), opts);
+            },
+        };
+        return chartHandle;
+    }, []);
+    return (React.createElement("div", { ref: containerRef, "data-chart-annotation-container": "true" },
+        React.createElement("svg", { width: resolvedWidth, height: svgHeight, viewBox: "0 0 ".concat(resolvedWidth, " ").concat(svgHeight), style: { width: width ? "".concat(width, "px") : '100%', height: "".concat(svgHeight, "px"), display: 'block' }, role: ariaLabel ? 'img' : undefined, "aria-label": ariaLabel },
+            React.createElement("foreignObject", { x: 0, y: 0, width: resolvedWidth, height: svgHeight },
+                React.createElement("div", { ref: contentRef, className: rootClassName, "data-chart-annotation-only": "true", "aria-label": ariaLabel },
+                    chartTitle && (React.createElement("span", { className: titleClassName, "aria-hidden": "true" }, chartTitle)),
+                    React.createElement("div", { className: contentClassName, role: "presentation" }, hasAnnotations ? (React.createElement(ChartAnnotationLayer, { annotations: resolvedAnnotations, context: context, theme: theme })) : null))))));
+};
+AnnotationOnlyChart.displayName = 'AnnotationOnlyChart';
+//# sourceMappingURL=AnnotationOnlyChart.js.map

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationOnlyChart.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/AnnotationOnlyChart.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getRTL, useTheme } from '@fluentui/react';\nimport { mergeStyles } from '@fluentui/react/lib/Styling';\nimport { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport type { IAnnotationOnlyChartProps } from './AnnotationOnlyChart.types';\nimport type { IChart, IImageExportOptions } from '../../types/index';\nimport type { IChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';\n\nconst DEFAULT_HEIGHT = 650;\nconst FALLBACK_WIDTH = 400;\n\nconst buildPadding = (margin: IAnnotationOnlyChartProps['margin']): string | undefined => {\n  if (!margin) {\n    return undefined;\n  }\n\n  const top = margin.t ?? 0;\n  const right = margin.r ?? 0;\n  const bottom = margin.b ?? 0;\n  const left = margin.l ?? 0;\n\n  if (top === 0 && right === 0 && bottom === 0 && left === 0) {\n    return undefined;\n  }\n\n  return `${top}px ${right}px ${bottom}px ${left}px`;\n};\n\nexport const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps> = props => {\n  const {\n    annotations,\n    chartTitle,\n    description,\n    width,\n    height,\n    paperBackgroundColor,\n    plotBackgroundColor,\n    fontColor,\n    fontFamily,\n    margin,\n    componentRef,\n  } = props;\n\n  const theme = useTheme();\n  const containerRef = React.useRef<HTMLDivElement | null>(null);\n  const contentRef = React.useRef<HTMLDivElement | null>(null);\n  const [measuredWidth, setMeasuredWidth] = React.useState<number>(width ?? 0);\n  const [contentHeight, setContentHeight] = React.useState<number>(height ?? DEFAULT_HEIGHT);\n\n  React.useEffect(() => {\n    if (typeof width === 'number' && width > 0) {\n      setMeasuredWidth(width);\n      return;\n    }\n\n    const node = containerRef.current;\n    if (!node || typeof ResizeObserver === 'undefined') {\n      const rect = node?.getBoundingClientRect();\n      if (rect && rect.width > 0) {\n        setMeasuredWidth(rect.width);\n      } else {\n        setMeasuredWidth(prev => (prev > 0 ? prev : FALLBACK_WIDTH));\n      }\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n      const newWidth = entry.contentRect.width;\n      if (newWidth > 0 && Math.abs(newWidth - measuredWidth) > 0.5) {\n        setMeasuredWidth(newWidth);\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    if (rect.width > 0) {\n      setMeasuredWidth(rect.width);\n    }\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [width, measuredWidth]);\n\n  const resolvedWidth = Math.max(measuredWidth || FALLBACK_WIDTH, 1);\n  const resolvedHeight = Math.max(height ?? DEFAULT_HEIGHT, 1);\n\n  React.useEffect(() => {\n    const node = contentRef.current;\n    if (!node) {\n      setContentHeight(prev => (prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    if (typeof ResizeObserver === 'undefined') {\n      const rect = node.getBoundingClientRect();\n      setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n      return;\n    }\n\n    const observer = new ResizeObserver(entries => {\n      const entry = entries[0];\n      if (!entry) {\n        return;\n      }\n\n      const newHeight = entry.contentRect.height;\n      if (newHeight > 0) {\n        setContentHeight(prev => (Math.abs(prev - newHeight) > 0.5 ? newHeight : prev));\n      }\n    });\n\n    const rect = node.getBoundingClientRect();\n    setContentHeight(prev => (rect.height > 0 ? rect.height : prev > 0 ? prev : resolvedHeight));\n\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [\n    resolvedHeight,\n    resolvedWidth,\n    annotations,\n    chartTitle,\n    description,\n    margin,\n    plotBackgroundColor,\n    paperBackgroundColor,\n    fontColor,\n    fontFamily,\n    theme,\n  ]);\n\n  const svgHeight = Math.max(Math.ceil(contentHeight || 0), resolvedHeight);\n\n  const context: IChartAnnotationContext = {\n    plotRect: { x: 0, y: 0, width: resolvedWidth, height: resolvedHeight },\n    svgRect: { width: resolvedWidth, height: resolvedHeight },\n    isRtl: theme?.rtl,\n  };\n\n  const padding = buildPadding(margin);\n\n  const rootClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        position: 'relative',\n        width: width ? `${width}px` : '100%',\n        minHeight: resolvedHeight,\n        backgroundColor: paperBackgroundColor ?? theme.semanticColors.bodyBackground,\n        color: fontColor ?? theme.semanticColors.bodyText,\n        fontFamily: fontFamily ?? theme.fonts.medium.fontFamily,\n        padding,\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: '8px',\n      }),\n    [fontColor, fontFamily, paperBackgroundColor, padding, resolvedHeight, theme, width],\n  );\n\n  const contentClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        position: 'relative',\n        flexGrow: 1,\n        backgroundColor: plotBackgroundColor ?? 'transparent',\n        borderRadius: theme.effects.roundedCorner2 ?? 4,\n        boxSizing: 'border-box',\n      }),\n    [plotBackgroundColor, theme.effects.roundedCorner2],\n  );\n\n  const titleClassName = React.useMemo(\n    () =>\n      mergeStyles({\n        textAlign: 'center',\n      }),\n    [],\n  );\n\n  const resolvedAnnotations = annotations ?? [];\n  const hasAnnotations = resolvedAnnotations.length > 0;\n  const ariaLabel = hasAnnotations ? description ?? chartTitle : undefined;\n\n  React.useImperativeHandle(\n    componentRef,\n    () => {\n      const chartHandle: IChart = {\n        chartContainer: containerRef.current,\n        toImage: (opts?: IImageExportOptions) => {\n          return exportChartsAsImage([{ container: containerRef.current }], undefined, getRTL(), opts);\n        },\n      };\n\n      return chartHandle;\n    },\n    [],\n  );\n\n  return (\n    <div ref={containerRef} data-chart-annotation-container=\"true\">\n      <svg\n        width={resolvedWidth}\n        height={svgHeight}\n        viewBox={`0 0 ${resolvedWidth} ${svgHeight}`}\n        style={{ width: width ? `${width}px` : '100%', height: `${svgHeight}px`, display: 'block' }}\n        role={ariaLabel ? 'img' : undefined}\n        aria-label={ariaLabel}\n      >\n        <foreignObject x={0} y={0} width={resolvedWidth} height={svgHeight}>\n          <div ref={contentRef} className={rootClassName} data-chart-annotation-only=\"true\" aria-label={ariaLabel}>\n            {chartTitle && (\n              <span className={titleClassName} aria-hidden=\"true\">\n                {chartTitle}\n              </span>\n            )}\n            <div className={contentClassName} role=\"presentation\">\n              {hasAnnotations ? (\n                <ChartAnnotationLayer annotations={resolvedAnnotations} context={context} theme={theme} />\n              ) : null}\n            </div>\n          </div>\n        </foreignObject>\n      </svg>\n    </div>\n  );\n};\n\nAnnotationOnlyChart.displayName = 'AnnotationOnlyChart';\n"]}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import type { IChartAnnotation } from '../../types/IChartAnnotation';
+import type { IChart } from '../../types/index';
+import type { Margin } from '@fluentui/chart-utilities';
+/**
+ * Props for the annotation-only chart renderer.
+ */
+export interface IAnnotationOnlyChartProps {
+    /**
+     * Collection of annotations to render.
+     */
+    annotations: IChartAnnotation[];
+    /** Optional layout title extracted from the Plotly schema. */
+    chartTitle?: string;
+    /** Optional descriptive text for accessibility. */
+    description?: string;
+    /** Desired width in pixels (if absent the chart will grow to fit the container). */
+    width?: number;
+    /** Desired height in pixels. */
+    height?: number;
+    /** Paper/background colour specified in the Plotly layout. */
+    paperBackgroundColor?: string;
+    /** Plot area background colour specified in the Plotly layout. */
+    plotBackgroundColor?: string;
+    /** Global layout font colour. */
+    fontColor?: string;
+    /** Global layout font family. */
+    fontFamily?: string;
+    /** Layout margin converted to padding for the outer wrapper. */
+    margin?: Partial<Margin>;
+    /** Component ref propagated by the DeclarativeChart surface. */
+    componentRef?: React.RefObject<IChart>;
+}

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AnnotationOnlyChart.types.js.map

package/lib/components/AnnotationOnlyChart/AnnotationOnlyChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnotationOnlyChart.types.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/AnnotationOnlyChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { IChartAnnotation } from '../../types/IChartAnnotation';\nimport type { IChart } from '../../types/index';\nimport type { Margin } from '@fluentui/chart-utilities';\n\n/**\n * Props for the annotation-only chart renderer.\n */\nexport interface IAnnotationOnlyChartProps {\n  /**\n   * Collection of annotations to render.\n   */\n  annotations: IChartAnnotation[];\n  /** Optional layout title extracted from the Plotly schema. */\n  chartTitle?: string;\n  /** Optional descriptive text for accessibility. */\n  description?: string;\n  /** Desired width in pixels (if absent the chart will grow to fit the container). */\n  width?: number;\n  /** Desired height in pixels. */\n  height?: number;\n  /** Paper/background colour specified in the Plotly layout. */\n  paperBackgroundColor?: string;\n  /** Plot area background colour specified in the Plotly layout. */\n  plotBackgroundColor?: string;\n  /** Global layout font colour. */\n  fontColor?: string;\n  /** Global layout font family. */\n  fontFamily?: string;\n  /** Layout margin converted to padding for the outer wrapper. */\n  margin?: Partial<Margin>;\n  /** Component ref propagated by the DeclarativeChart surface. */\n  componentRef?: React.RefObject<IChart>;\n}\n"]}

package/lib/components/AnnotationOnlyChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnnotationOnlyChart';
+export * from './AnnotationOnlyChart.types';

package/lib/components/AnnotationOnlyChart/index.js

@@ -0,0 +1,3 @@
+export * from './AnnotationOnlyChart';
+export * from './AnnotationOnlyChart.types';
+//# sourceMappingURL=index.js.map

package/lib/components/AnnotationOnlyChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/AnnotationOnlyChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './AnnotationOnlyChart';\nexport * from './AnnotationOnlyChart.types';\n"]}

package/lib/components/AreaChart/AreaChart.base.js

@@ -11,7 +11,7 @@ import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 import { calloutData, getXAxisType, ChartTypes, XAxisTypes, getTypeOfAxis, tooltipOfAxislabels, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfNumericForAreaLineScatterCharts, domainRangeOfDateForAreaLineScatterVerticalBarCharts, createStringYAxis, getSecureProps, areArraysEqual, getCurveFactory, findCalloutPoints, } from '../../utilities/index';
 import { Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 var bisect = bisector(function (d) { return d.x; }).left;
@@ -31,7 +31,7 @@ var AreaChartBase = /** @class */ (function (_super) {
         _this._hasMissingXValues = false;
         _this.toImage = function (opts) {
             var _a, _b;
-            return toImage((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, getRTL(), opts);
+            return exportChartsAsImage([{ container: (_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer }], _this.props.hideLegend ? undefined : (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, getRTL(), opts);
         };
         _this._getMinMaxOfYAxis = function (points, yAxisType, useSecondaryYScale) {
             return findNumericMinMaxOfY(points, yAxisType, useSecondaryYScale);