feat(react-charting): enable multiplot image export

change/@fluentui-react-charting-5834c1f0-46f1-421b-b9c0-d755d1925d76.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: enable multiplot image export",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charting/src/components/AnnotationOnlyChart/AnnotationOnlyChart.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { useTheme } from '@fluentui/react';
+import { getRTL, useTheme } from '@fluentui/react';
 import { mergeStyles } from '@fluentui/react/lib/Styling';
 import { ChartAnnotationLayer } from '../CommonComponents/Annotations/ChartAnnotationLayer';
-import { toImage as exportToImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import type { IAnnotationOnlyChartProps } from './AnnotationOnlyChart.types';
 import type { IChart, IImageExportOptions } from '../../types/index';
 import type { IChartAnnotationContext } from '../CommonComponents/Annotations/ChartAnnotationLayer.types';
@@ -189,17 +189,13 @@ export const AnnotationOnlyChart: React.FC<IAnnotationOnlyChartProps> = props =>
       const chartHandle: IChart = {
         chartContainer: containerRef.current,
         toImage: (opts?: IImageExportOptions) => {
-          if (!containerRef.current) {
-            return Promise.reject(new Error('Chart container is not defined'));
-          }
-
-          return exportToImage(containerRef.current, undefined, !!theme?.rtl, opts);
+          return exportChartsAsImage([{ container: containerRef.current }], undefined, getRTL(), opts);
         },
       };
 
       return chartHandle;
     },
-    [theme?.rtl],
+    [],
   );
 
   return (

packages/charts/react-charting/src/components/AreaChart/AreaChart.base.tsx

@@ -49,7 +49,7 @@ import {
 import { ILegend, ILegendContainer, Legends } from '../Legends/index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { IChart, IImageExportOptions } from '../../types/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { ScaleLinear } from 'd3-scale';
 import type { JSXElement } from '@fluentui/utilities';
 
@@ -305,7 +305,12 @@ export class AreaChartBase extends React.Component<IAreaChartProps, IAreaChartSt
   }
 
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._cartesianChartRef.current?.chartContainer, this._legendsRef.current?.toSVG, getRTL(), opts);
+    return exportChartsAsImage(
+      [{ container: this._cartesianChartRef.current?.chartContainer }],
+      this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,
+      getRTL(),
+      opts,
+    );
   };
 
   private _getMinMaxOfYAxis = (points: ILineChartPoints[], yAxisType: YAxisType, useSecondaryYScale: boolean) =>

packages/charts/react-charting/src/components/ChartTable/ChartTable.base.tsx

@@ -3,7 +3,7 @@ import { IChartTableProps } from './ChartTable.types';
 import { IChartTableStyleProps, IChartTableStyles } from '../../index';
 import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
 import { IImageExportOptions } from '../../types/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
 import { ITheme } from '@fluentui/react';
@@ -62,7 +62,7 @@ export class ChartTableBase extends React.Component<IChartTableProps> {
     this._isRTL = getRTL(props.theme);
   }
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._rootElem, undefined, this._isRTL, opts);
+    return exportChartsAsImage([{ container: this._rootElem }], undefined, this._isRTL, opts);
   };
 
   // eslint-disable-next-line @typescript-eslint/no-deprecated

packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import * as React from 'react';
 import { useTheme } from '@fluentui/react';
-import { IRefObject } from '@fluentui/react/lib/Utilities';
+import { getRTL, IRefObject } from '@fluentui/react/lib/Utilities';
 import { AnnotationOnlyChart } from '../AnnotationOnlyChart/AnnotationOnlyChart';
 import { DonutChart } from '../DonutChart/index';
 import { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';
@@ -49,8 +49,10 @@ import { ScatterChart } from '../ScatterChart/index';
 import { ChartTable } from '../ChartTable/index';
 import { FunnelChart } from '../FunnelChart/FunnelChart';
 import { GanttChart } from '../GanttChart/index';
-import { ILegendsProps, Legends } from '../Legends/index';
+import { ILegendContainer, ILegendsProps, Legends } from '../Legends/index';
 import type { JSXElement } from '@fluentui/utilities';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
+import { resolveCSSVariables } from '../../utilities/utilities';
 
 const ResponsiveDonutChart = withResponsiveContainer(DonutChart);
 const ResponsiveVerticalStackedBarChart = withResponsiveContainer(VerticalStackedBarChart);
@@ -319,7 +321,7 @@ const chartMap: ChartTypeMap = {
 export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<
   HTMLDivElement,
   DeclarativeChartProps
->(({ colorwayType = 'default', ...props }, forwardedRef) => {
+>(({ colorwayType = 'default', onSchemaChange, ...props }, forwardedRef) => {
   const { plotlySchema } = sanitizeJson(props.chartSchema);
   const chart: OutputChartType = mapFluentChart(plotlySchema);
   if (!chart.isValid) {
@@ -345,20 +347,25 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   const colorMap = useColorMapping();
   const theme = useTheme();
   const isDarkTheme = theme?.isInverted ?? false;
-  const chartRef = React.useRef<IChart>(null);
+  const chartRefs = React.useRef<{ compRef: IChart | null; row: number; col: number }[]>([]);
   const isMultiPlot = React.useRef(false);
+  const legendsRef = React.useRef<ILegendContainer>(null);
+  const containerRef = React.useRef<HTMLDivElement>(null);
 
   if (!isArrayOrTypedArray(selectedLegends)) {
     selectedLegends = [];
   }
 
   const [activeLegends, setActiveLegends] = React.useState<string[]>(selectedLegends);
-  const onActiveLegendsChange = (keys: string[]) => {
-    setActiveLegends(keys);
-    if (props.onSchemaChange) {
-      props.onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });
-    }
-  };
+  const onActiveLegendsChange = React.useCallback(
+    (keys: string[]) => {
+      setActiveLegends(keys);
+      if (onSchemaChange) {
+        onSchemaChange({ plotlySchema: { plotlyInput, selectedLegends: keys } });
+      }
+    },
+    [onSchemaChange, plotlyInput],
+  );
 
   React.useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
@@ -374,41 +381,53 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     selectedLegends: activeLegends,
   };
 
-  const baseCommonProps = {
-    componentRef: chartRef,
-  };
-
   const interactiveCommonProps = {
-    ...baseCommonProps,
     legendProps: multiSelectLegendProps,
     calloutProps: { layerProps: { eventBubblingEnabled: true } },
   };
 
   // eslint-disable-next-line @typescript-eslint/no-deprecated
   function createLegends(legendProps: ILegendsProps): JSXElement {
     // eslint-disable-next-line react/jsx-no-bind
-    return <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} />;
+    return (
+      <Legends {...legendProps} selectedLegends={activeLegends} onChange={onActiveLegendsChange} ref={legendsRef} />
+    );
   }
 
   const exportAsImage = React.useCallback(
-    (opts?: IImageExportOptions): Promise<string> => {
-      return new Promise((resolve, reject) => {
-        if (isMultiPlot.current) {
-          return reject(Error('Exporting multi plot charts as image is not supported'));
-        }
-        if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
-          return reject(Error('Chart cannot be exported as image'));
+    async (opts?: IImageExportOptions) => {
+      if (!containerRef.current) {
+        throw new Error('Container reference is null');
+      }
+
+      const imgExpOpts = {
+        background: resolveCSSVariables(containerRef.current, theme.semanticColors.bodyBackground),
+        scale: 5,
+        ...opts,
+      };
+
+      if (!isMultiPlot.current) {
+        if (!chartRefs.current[0]?.compRef?.toImage) {
+          throw new Error('Chart cannot be exported as image');
         }
 
-        chartRef.current
-          .toImage({
-            background: theme.semanticColors.bodyBackground,
-            scale: 5,
-            ...opts,
-          })
-          .then(resolve)
-          .catch(reject);
-      });
+        return chartRefs.current[0].compRef.toImage(imgExpOpts);
+      }
+
+      return exportChartsAsImage(
+        chartRefs.current.map(item => ({
+          container: item.compRef?.chartContainer,
+          row: item.row,
+          col: item.col,
+        })),
+        legendsRef.current?.toSVG,
+        getRTL(),
+        {
+          background: resolveCSSVariables(containerRef.current, theme.semanticColors.bodyBackground),
+          scale: 5,
+          ...opts,
+        },
+      );
     },
     [theme],
   );
@@ -510,8 +529,9 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
           gridTemplateRows: gridProperties.templateRows,
           gridTemplateColumns: gridProperties.templateColumns,
         }}
+        ref={containerRef}
       >
-        {Object.entries(groupedTraces).map(([xAxisKey, index]) => {
+        {Object.entries(groupedTraces).map(([xAxisKey, index], chartIdx) => {
           const plotlyInputForGroup: PlotlySchema = {
             ...plotlyInputWithValidData,
             data: index.map(idx => plotlyInputWithValidData.data[idx]),
@@ -541,7 +561,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
 
               const resolvedCommonProps = (
                 chartType === 'annotation'
-                  ? baseCommonProps
+                  ? {}
                   : {
                       ...interactiveCommonProps,
                       xAxisAnnotation: cellProperties?.xAnnotation,
@@ -557,6 +577,13 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
                   ...resolvedCommonProps,
                   xAxisAnnotation: cellProperties?.xAnnotation,
                   yAxisAnnotation: cellProperties?.yAnnotation,
+                  componentRef: (ref: IChart | null) => {
+                    chartRefs.current[chartIdx] = {
+                      compRef: ref,
+                      row: cellProperties?.row ?? 1,
+                      col: cellProperties?.column ?? 1,
+                    };
+                  },
                 },
                 cellProperties?.row ?? 1,
                 cellProperties?.column ?? 1,

packages/charts/react-charting/src/components/DonutChart/DonutChart.base.tsx

@@ -17,7 +17,7 @@ import {
 } from '../../utilities/index';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { IChart, IImageExportOptions } from '../../types/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { ILegendContainer } from '../Legends/index';
 import type { JSXElement } from '@fluentui/utilities';
 
@@ -234,7 +234,12 @@ export class DonutChartBase extends React.Component<IDonutChartProps, IDonutChar
   }
 
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._rootElem, this._legendsRef.current?.toSVG, getRTL(), opts);
+    return exportChartsAsImage(
+      [{ container: this._rootElem }],
+      this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,
+      getRTL(),
+      opts,
+    );
   };
 
   private _closeCallout = () => {

packages/charts/react-charting/src/components/FunnelChart/FunnelChart.base.tsx

@@ -12,7 +12,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { IImageExportOptions } from '../../types/index';
-import { toImage as convertToImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { getContrastTextColor } from '../../utilities/utilities';
 import {
   getHorizontalFunnelSegmentGeometry,
@@ -53,10 +53,15 @@ export const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React
     () => ({
       chartContainer: chartContainerRef ?? null,
       toImage: (opts?: IImageExportOptions): Promise<string> => {
-        return convertToImage(chartContainerRef.current, legendsRef.current?.toSVG, getRTL(), opts);
+        return exportChartsAsImage(
+          [{ container: chartContainerRef.current }],
+          props.hideLegend ? undefined : legendsRef.current?.toSVG,
+          getRTL(),
+          opts,
+        );
       },
     }),
-    [],
+    [props.hideLegend],
   );
 
   function _handleHover(data: IFunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {

packages/charts/react-charting/src/components/GanttChart/GanttChart.base.tsx

@@ -26,7 +26,7 @@ import {
   getScalePadding,
   getDateFormatLevel,
 } from '../../utilities/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { formatDateToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
 import type { JSXElement } from '@fluentui/utilities';
 
@@ -73,10 +73,15 @@ export const GanttChartBase: React.FunctionComponent<IGanttChartProps> = React.f
     () => ({
       chartContainer: _cartesianChartRef.current?.chartContainer ?? null,
       toImage: (opts?: IImageExportOptions): Promise<string> => {
-        return toImage(_cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, getRTL(), opts);
+        return exportChartsAsImage(
+          [{ container: _cartesianChartRef.current?.chartContainer }],
+          props.hideLegend ? undefined : _legendsRef.current?.toSVG,
+          getRTL(),
+          opts,
+        );
       },
     }),
-    [],
+    [props.hideLegend],
   );
 
   const _points = React.useMemo(() => {

packages/charts/react-charting/src/components/GaugeChart/GaugeChart.base.tsx

@@ -28,7 +28,7 @@ import { IYValueHover } from '../../index';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
 import { select as d3Select } from 'd3-selection';
 import { IChart, IImageExportOptions } from '../../types/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 
 const GAUGE_MARGIN = 16;
 const LABEL_WIDTH = 36;
@@ -364,7 +364,12 @@ export class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChar
   }
 
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._rootElem, this._legendsRef.current?.toSVG, this._isRTL, opts);
+    return exportChartsAsImage(
+      [{ container: this._rootElem }],
+      this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,
+      this._isRTL,
+      opts,
+    );
   };
 
   private _getMargins = () => {

packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx

@@ -56,7 +56,7 @@ import {
   IYValueHover,
 } from '../../index';
 import { IChart, IImageExportOptions, IBarSeries, ILineSeries } from '../../types/index';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { ILegendContainer } from '../Legends/index';
 import { rgb } from 'd3-color';
 import type { JSXElement } from '@fluentui/utilities';
@@ -288,7 +288,12 @@ export class GroupedVerticalBarChartBase
   }
 
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._cartesianChartRef.current?.chartContainer, this._legendsRef.current?.toSVG, this._isRtl, opts);
+    return exportChartsAsImage(
+      [{ container: this._cartesianChartRef.current?.chartContainer }],
+      this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,
+      this._isRtl,
+      opts,
+    );
   };
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx

@@ -38,7 +38,7 @@ import {
 import { Target } from '@fluentui/react';
 import { format as d3Format } from 'd3-format';
 import { timeFormat as d3TimeFormat } from 'd3-time-format';
-import { toImage } from '../../utilities/image-export-utils';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import type { JSXElement } from '@fluentui/utilities';
 
 type DataSet = {
@@ -282,7 +282,12 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
   }
 
   public toImage = (opts?: IImageExportOptions): Promise<string> => {
-    return toImage(this._cartesianChartRef.current?.chartContainer, this._legendsRef.current?.toSVG, getRTL(), opts);
+    return exportChartsAsImage(
+      [{ container: this._cartesianChartRef.current?.chartContainer }],
+      this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,
+      getRTL(),
+      opts,
+    );
   };
 
   private _getMinMaxOfYAxis = () => {