feat(react-charts): support image export in v9 (#34929)

Co-authored-by: Anush <anushgupta@microsoft.com>

Author: Anush2303

change/@fluentui-react-charts-6fe93f46-8c03-4204-b3b7-a499e989ecac.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "support image export in v9 charts",
+  "packageName": "@fluentui/react-charts",
+  "email": "anushgupta@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/etc/react-charts.api.md

@@ -229,6 +229,8 @@ export interface CartesianChartStyles {
 export interface Chart {
     // (undocumented)
     chartContainer: HTMLElement | null;
+    // (undocumented)
+    toImage?: (opts?: ImageExportOptions) => Promise<string>;
 }
 
 // @public
@@ -959,6 +961,16 @@ export interface Legend {
     title: string;
 }
 
+// @public (undocumented)
+export interface LegendContainer {
+    // (undocumented)
+    toSVG: (svgWidth: number, isRTL?: boolean) => {
+        node: SVGGElement | null;
+        width: number;
+        height: number;
+    };
+}
+
 // @public (undocumented)
 export interface LegendDataItem {
     legendColor: string;
@@ -980,6 +992,7 @@ export interface LegendsProps {
     defaultSelectedLegend?: string;
     defaultSelectedLegends?: string[];
     enabledWrapLines?: boolean;
+    legendRef?: React_2.RefObject<LegendContainer>;
     legends: Legend[];
     onChange?: (selectedLegends: string[], event: React_2.MouseEvent<HTMLButtonElement>, currentLegend?: Legend) => void;
     overflowStyles?: React_2.CSSProperties;

packages/charts/react-charts/library/src/components/AreaChart/AreaChart.tsx

@@ -17,6 +17,7 @@ import {
   YValueHover,
   ChartPopoverProps,
   Chart,
+  ImageExportOptions,
 } from '../../index';
 import {
   calloutData,
@@ -38,10 +39,12 @@ import {
   domainRangeOfNumericForAreaChart,
   domainRangeOfDateForAreaLineVerticalBarChart,
   createStringYAxis,
+  useRtl,
 } from '../../utilities/index';
 import { useId } from '@fluentui/react-utilities';
-import { Legend, Legends } from '../Legends/index';
+import { Legend, LegendContainer, Legends } from '../Legends/index';
 import { ScaleLinear } from 'd3-scale';
+import { toImage } from '../../utilities/image-export-utils';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const bisect = bisector((d: any) => d.x).left;
@@ -103,6 +106,8 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
     // determines if the given area chart has multiple stacked bar charts
     let _isMultiStackChart: boolean;
     const cartesianChartRef = React.useRef<Chart>(null);
+    const _legendsRef = React.useRef<LegendContainer>(null);
+    const _isRTL: boolean = useRtl();
 
     const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);
     const [activeLegend, setActiveLegend] = React.useState<string | undefined>(undefined);
@@ -135,6 +140,9 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
       props.componentRef,
       () => ({
         chartContainer: cartesianChartRef.current?.chartContainer ?? null,
+        toImage: (opts?: ImageExportOptions): Promise<string> => {
+          return toImage(cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, _isRTL, opts);
+        },
       }),
       [],
     );
@@ -508,6 +516,7 @@ export const AreaChart: React.FunctionComponent<AreaChartProps> = React.forwardR
           enabledWrapLines={props.enabledLegendsWrapLines}
           {...props.legendProps}
           onChange={_onLegendSelectionChange}
+          legendRef={_legendsRef}
         />
       );
     }

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

@@ -39,8 +39,7 @@ import { SankeyChart } from '../SankeyChart/SankeyChart';
 import { GaugeChart } from '../GaugeChart/index';
 import { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';
 import { VerticalBarChart } from '../VerticalBarChart/index';
-import { ImageExportOptions, toImage } from './imageExporter';
-import { Chart } from '../../types/index';
+import { Chart, ImageExportOptions } from '../../types/index';
 import { ScatterChart } from '../ScatterChart/index';
 
 import { withResponsiveContainer } from '../ResponsiveContainer/withResponsiveContainer';
@@ -229,11 +228,20 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
   };
 
   // TODO
-  const exportAsImage = React.useCallback((opts?: ImageExportOptions) => {
-    return toImage(chartRef.current?.chartContainer, {
-      background: tokens.colorNeutralBackground1,
-      scale: 5,
-      ...opts,
+  const exportAsImage = React.useCallback((opts?: ImageExportOptions): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      if (!chartRef.current || typeof chartRef.current.toImage !== 'function') {
+        return reject(Error('Chart cannot be exported as image'));
+      }
+
+      chartRef.current
+        .toImage({
+          background: tokens.colorNeutralBackground1,
+          scale: 5,
+          ...opts,
+        })
+        .then(resolve)
+        .catch(reject);
     });
   }, []);
 

packages/charts/react-charts/library/src/components/DeclarativeChart/index.ts

@@ -1,2 +1 @@
 export * from './DeclarativeChart';
-export type { ImageExportOptions } from './imageExporter';

packages/charts/react-charts/library/src/components/DonutChart/DonutChart.tsx

@@ -5,11 +5,13 @@ import { DonutChartProps } from './DonutChart.types';
 import { useDonutChartStyles } from './useDonutChartStyles.styles';
 import { ChartDataPoint } from '../../DonutChart';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
-import { getColorFromToken, getNextColor } from '../../utilities/index';
-import { Legend, Legends } from '../../index';
+import { getColorFromToken, getNextColor, useRtl } from '../../utilities/index';
+import { Legend, Legends, LegendContainer } from '../../index';
 import { useId } from '@fluentui/react-utilities';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { ImageExportOptions } from '../../types/index';
+import { toImage } from '../../utilities/image-export-utils';
 
 const MIN_LEGEND_CONTAINER_HEIGHT = 40;
 
@@ -41,6 +43,8 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
     const [dataPointCalloutProps, setDataPointCalloutProps] = React.useState<ChartDataPoint | undefined>();
     const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const _legendsRef = React.useRef<LegendContainer>(null);
+    const _isRTL: boolean = useRtl();
 
     React.useEffect(() => {
       _fitParentContainer();
@@ -58,6 +62,9 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
       props.componentRef,
       () => ({
         chartContainer: _rootElem.current,
+        toImage: (opts?: ImageExportOptions): Promise<string> => {
+          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);
+        },
       }),
       [],
     );
@@ -113,6 +120,7 @@ export const DonutChart: React.FunctionComponent<DonutChartProps> = React.forwar
           centerLegends
           overflowText={props.legendsOverflowText}
           {...props.legendProps}
+          legendRef={_legendsRef}
         />
       );
       return legends;

packages/charts/react-charts/library/src/components/FunnelChart/FunnelChart.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useId } from '@fluentui/react-utilities';
 import { useRtl } from '../../utilities/index';
 import { FunnelChartDataPoint, FunnelChartProps } from './FunnelChart.types';
-import { Legend, Legends } from '../Legends/index';
+import { Legend, Legends, LegendContainer } from '../Legends/index';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
@@ -15,7 +15,8 @@ import {
   getStackedHorizontalFunnelSegmentGeometry,
   getStackedVerticalFunnelSegmentGeometry,
 } from './funnelGeometry';
-import { ChartPopoverProps } from '../../index';
+import { ChartPopoverProps, ImageExportOptions } from '../../index';
+import { toImage } from '../../utilities/image-export-utils';
 
 export const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forwardRef<
   HTMLDivElement,
@@ -31,13 +32,24 @@ export const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forw
   const [isPopoverOpen, setPopoverOpen] = React.useState(false);
   const chartContainerRef = React.useRef<HTMLDivElement | null>(null);
   const isStacked = isStackedFunnelData(props.data);
+  const _legendsRef = React.useRef<LegendContainer>(null);
 
   React.useEffect(() => {
     if (props.legendProps?.selectedLegends) {
       setSelectedLegends(props.legendProps.selectedLegends);
     }
   }, [props.legendProps?.selectedLegends]);
 
+  React.useImperativeHandle(
+    props.componentRef,
+    () => ({
+      toImage: (opts?: ImageExportOptions): Promise<string> => {
+        return toImage(chartContainerRef.current, _legendsRef.current?.toSVG, isRTL, opts);
+      },
+    }),
+    [],
+  );
+
   function _handleHover(data: FunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {
     mouseEvent?.persist();
     updatePosition(mouseEvent.clientX, mouseEvent.clientY);
@@ -404,6 +416,7 @@ export const FunnelChart: React.FunctionComponent<FunnelChartProps> = React.forw
           centerLegends={true}
           onChange={_onLegendSelectionChangeCallback}
           {...props.legendProps}
+          legendRef={_legendsRef}
         />
       </div>
     );

packages/charts/react-charts/library/src/components/GanttChart/GanttChart.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { ScaleLinear, ScaleBand, ScaleTime } from 'd3-scale';
 import { useId } from '@fluentui/react-utilities';
-import { Legend, Legends } from '../Legends/index';
+import { Legend, Legends, LegendContainer } from '../Legends/index';
 import { Margins, GanttChartDataPoint } from '../../types/DataPoint';
 import { CartesianChart, ModifiedCartesianChartProps } from '../CommonComponents/index';
 import { GanttChartProps } from './GanttChart.types';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
-import { ChartPopoverProps } from '../../index';
+import { ChartPopoverProps, ImageExportOptions, Chart } from '../../index';
 import {
   ChartTypes,
   YAxisType,
@@ -25,8 +25,10 @@ import {
   getColorFromToken,
   getScalePadding,
   getDateFormatLevel,
+  useRtl,
 } from '../../utilities/index';
 import { formatDateToLocaleString, getMultiLevelDateTimeFormatOptions } from '@fluentui/chart-utilities';
+import { toImage } from '../../utilities/image-export-utils';
 
 type NumberScale = ScaleLinear<number, number>;
 type StringScale = ScaleBand<string>;
@@ -54,6 +56,9 @@ export const GanttChart: React.FunctionComponent<GanttChartProps> = React.forwar
     const [calloutDataPoint, setCalloutDataPoint] = React.useState<GanttChartDataPoint>();
     const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });
     const [isPopoverOpen, setPopoverOpen] = React.useState(false);
+    const cartesianChartRef = React.useRef<Chart>(null);
+    const _legendsRef = React.useRef<LegendContainer>(null);
+    const _isRTL = useRtl();
 
     React.useEffect(() => {
       if (!areArraysEqual(_prevProps.current.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {
@@ -62,6 +67,17 @@ export const GanttChart: React.FunctionComponent<GanttChartProps> = React.forwar
       _prevProps.current = props;
     }, [props]);
 
+    React.useImperativeHandle(
+      props.componentRef,
+      () => ({
+        chartContainer: cartesianChartRef.current?.chartContainer ?? null,
+        toImage: (opts?: ImageExportOptions): Promise<string> => {
+          return toImage(cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, _isRTL, opts);
+        },
+      }),
+      [],
+    );
+
     const _points = React.useMemo(() => {
       _legendMap.current = {};
       let colorIndex = 0;
@@ -494,6 +510,7 @@ export const GanttChart: React.FunctionComponent<GanttChartProps> = React.forwar
           overflowText={props.legendsOverflowText}
           onChange={_onLegendSelectionChange}
           {...props.legendProps}
+          legendRef={_legendsRef}
         />
       );
       return legends;
@@ -585,6 +602,7 @@ export const GanttChart: React.FunctionComponent<GanttChartProps> = React.forwar
           chartType={ChartTypes.GanttChart}
           xAxisType={_xAxisType}
           yAxisType={_yAxisType}
+          componentRef={cartesianChartRef}
           stringDatasetForYAxisDomain={_yAxisLabels}
           calloutProps={calloutProps}
           tickParams={tickParams}

packages/charts/react-charts/library/src/components/GaugeChart/GaugeChart.tsx

@@ -15,10 +15,12 @@ import {
 } from '../../utilities/index';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { SVGTooltipText } from '../../utilities/SVGTooltipText';
-import { Legend, LegendShape, Legends, Shape } from '../Legends/index';
+import { Legend, LegendShape, Legends, Shape, LegendContainer } from '../Legends/index';
 import { GaugeChartVariant, GaugeValueFormat, GaugeChartProps, GaugeChartSegment } from './GaugeChart.types';
 import { useFocusableGroup } from '@fluentui/react-tabster';
 import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { ImageExportOptions } from '../../types/index';
+import { toImage } from '../../utilities/image-export-utils';
 
 const GAUGE_MARGIN = 16;
 const LABEL_WIDTH = 36;
@@ -101,6 +103,7 @@ export interface ExtendedSegment extends GaugeChartSegment {
 
 export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwardRef<HTMLDivElement, GaugeChartProps>(
   (props, forwardedRef) => {
+    const _legendsRef = React.useRef<LegendContainer>(null);
     const _getMargins = () => {
       const { hideMinMax, chartTitle, sublabel } = props;
       return {
@@ -159,6 +162,9 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
       props.componentRef,
       () => ({
         chartContainer: _rootElem.current,
+        toImage: (opts?: ImageExportOptions): Promise<string> => {
+          return toImage(_rootElem.current, _legendsRef.current?.toSVG, _isRTL, opts);
+        },
       }),
       [],
     );
@@ -307,6 +313,7 @@ export const GaugeChart: React.FunctionComponent<GaugeChartProps> = React.forwar
             {...props.legendProps}
             // eslint-disable-next-line react/jsx-no-bind
             onChange={_onLegendSelectionChange}
+            legendRef={_legendsRef}
           />
         </div>
       );

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -43,7 +43,10 @@ import {
   getColorFromToken,
   ChartPopoverProps,
   Chart,
+  ImageExportOptions,
+  LegendContainer,
 } from '../../index';
+import { toImage } from '../../utilities/image-export-utils';
 
 type StringAxis = D3Axis<string>;
 type NumericAxis = D3Axis<number | { valueOf(): number }>;
@@ -89,6 +92,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
   let _xAxisOuterPadding: number = 0;
   const cartesianChartRef = React.useRef<Chart>(null);
   const Y_ORIGIN: number = 0;
+  const _legendsRef = React.useRef<LegendContainer>(null);
 
   const [color, setColor] = React.useState<string>('');
   const [dataForHoverCard, setDataForHoverCard] = React.useState<number>(0);
@@ -116,6 +120,9 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
     props.componentRef,
     () => ({
       chartContainer: cartesianChartRef.current?.chartContainer ?? null,
+      toImage: (opts?: ImageExportOptions): Promise<string> => {
+        return toImage(cartesianChartRef.current?.chartContainer, _legendsRef.current?.toSVG, _useRtl, opts);
+      },
     }),
     [],
   );
@@ -231,6 +238,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
         overflowText={props.legendsOverflowText}
         {...props.legendProps}
         onChange={onLegendSelectionChange}
+        legendRef={_legendsRef}
       />
     );
   };