feat(react-charting): support chart title from plotly schema (#35643)

Co-authored-by: Anush <[email protected]>

Author: Anush2303

change/@fluentui-react-charting-5e9fcc1c-4429-4e2e-9005-78ee9a2a7257.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "support chart title from plotly schema",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

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

@@ -6,6 +6,7 @@
 
 import { CurveFactory } from 'd3-shape';
 import { FocusZoneDirection } from '@fluentui/react-focus';
+import type { Font } from '@fluentui/chart-utilities';
 import { ICalloutContentStyleProps } from '@fluentui/react/lib/Callout';
 import { ICalloutContentStyles } from '@fluentui/react/lib/Callout';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
@@ -448,6 +449,8 @@ export interface ICartesianChartProps {
     tickPadding?: number;
     tickValues?: number[] | Date[] | string[];
     timeFormatLocale?: TimeLocaleDefinition;
+    // Warning: (ae-forgotten-export) The symbol "ITitleStyles" needs to be exported by the entry point index.d.ts
+    titleStyles?: ITitleStyles;
     useUTC?: boolean;
     width?: number;
     wrapXAxisLables?: boolean;
@@ -591,6 +594,7 @@ export interface IChartProps {
 
 // @public
 export interface IChartTableProps {
+    chartTitle?: string;
     className?: string;
     componentRef?: IRefObject<IChart>;
     headers: {
@@ -604,6 +608,7 @@ export interface IChartTableProps {
     }[][];
     styles?: IStyleFunctionOrObject<IChartTableStyleProps, IChartTableStyles>;
     theme?: ITheme;
+    titleStyles?: ITitleStyles;
     width?: string | number;
 }
 
@@ -622,10 +627,14 @@ export interface IChartTableStyles {
     // (undocumented)
     chart?: IStyle;
     // (undocumented)
+    chartTitle?: IStyle;
+    // (undocumented)
     headerCell?: IStyle;
     // (undocumented)
     root?: IStyle;
     // (undocumented)
+    svgTooltip?: IStyle;
+    // (undocumented)
     table?: IStyle;
 }
 
@@ -744,6 +753,7 @@ export interface IDonutChartProps extends ICartesianChartProps {
     roundCorners?: boolean;
     showLabelsInPercent?: boolean;
     styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;
+    titleStyles?: ITitleStyles;
     valueInsideDonut?: string | number;
 }
 
@@ -755,9 +765,11 @@ export interface IDonutChartStyleProps extends ICartesianChartStyleProps {
 export interface IDonutChartStyles {
     axisAnnotation?: IStyle;
     chart?: IStyle;
+    chartTitle?: IStyle;
     chartWrapper?: IStyle;
     legendContainer: IStyle;
     root?: IStyle;
+    svgTooltip?: IStyle;
 }
 
 // @public (undocumented)
@@ -793,6 +805,7 @@ export interface IFunnelChartProps {
     orientation?: 'horizontal' | 'vertical';
     styles?: IStyleFunctionOrObject<IFunnelChartStyleProps, IFunnelChartStyles>;
     theme?: ITheme;
+    titleStyles?: ITitleStyles;
     width?: number;
 }
 
@@ -807,10 +820,12 @@ export interface IFunnelChartStyleProps {
 // @public
 export interface IFunnelChartStyles {
     chart?: IStyle;
+    chartTitle?: IStyle;
     root?: IStyle;
     subComponentStyles: {
         calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
     };
+    svgTooltip?: IStyle;
     text?: IStyle;
 }
 
@@ -875,6 +890,7 @@ export interface IGaugeChartProps {
     styles?: IStyleFunctionOrObject<IGaugeChartStyleProps, IGaugeChartStyles>;
     sublabel?: string;
     theme?: ITheme;
+    titleStyles?: ITitleStyles;
     variant?: GaugeChartVariant;
     width?: number;
 }
@@ -924,6 +940,7 @@ export interface IGaugeChartStyles {
     segment?: IStyle;
     shapeStyles?: IStyle;
     sublabel?: IStyle;
+    svgTooltip?: IStyle;
 }
 
 // @public (undocumented)
@@ -1637,12 +1654,14 @@ export interface ISankeyChartProps {
     enableReflow?: boolean;
     formatNumberOptions?: Intl.NumberFormatOptions;
     height?: number;
+    hideLegend?: boolean;
     parentRef?: HTMLElement | null;
     pathColor?: string;
     shouldResize?: number;
     strings?: ISankeyChartStrings;
     styles?: IStyleFunctionOrObject<ISankeyChartStyleProps, ISankeyChartStyles>;
     theme?: ITheme;
+    titleStyles?: ITitleStyles;
     width?: number;
 }
 
@@ -1671,11 +1690,13 @@ export interface ISankeyChartStyleProps {
 export interface ISankeyChartStyles {
     calloutContentRoot?: IStyle;
     chart?: IStyle;
+    chartTitle?: IStyle;
     chartWrapper?: IStyle;
     links?: IStyle;
     nodes?: IStyle;
     nodeTextContainer?: IStyle;
     root?: IStyle;
+    svgTooltip?: IStyle;
     toolTip?: IStyle;
 }
 

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

@@ -4,6 +4,7 @@ import { IChartTableStyleProps, IChartTableStyles } from '../../index';
 import { classNamesFunction, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
 import { IImageExportOptions } from '../../types/index';
 import { exportChartsAsImage } from '../../utilities/image-export-utils';
+import { ChartTitle } from '../../utilities/index';
 import * as d3 from 'd3-color';
 import { getColorContrast } from '../../utilities/colors';
 import { ITheme } from '@fluentui/react';
@@ -66,7 +67,7 @@ export class ChartTableBase extends React.Component<IChartTableProps> {
   };
 
   public render(): JSXElement {
-    const { headers, rows, width, height, styles, theme } = this.props;
+    const { headers, rows, width, height, styles, theme, chartTitle } = this.props;
 
     const classNames = getClassNames(styles!, {
       theme: theme!,
@@ -108,16 +109,33 @@ export class ChartTableBase extends React.Component<IChartTableProps> {
       }
     }
 
+    const titleHeight = chartTitle ? 30 : 0;
+    const totalHeight = typeof height === 'number' ? height : 650;
+    const tableHeight = `${totalHeight - titleHeight}px`;
+    const svgWidth = typeof width === 'number' ? width : '100%';
+    const titleMaxWidth = typeof width === 'number' ? width - 20 : undefined;
+    const titleX = typeof width === 'number' ? width / 2 : 0;
+
     return (
       <div
         ref={el => {
           this._rootElem = el;
         }}
         className={classNames.root}
-        style={{ height: height ? `${height}px` : '650px', overflow: 'hidden' }}
+        style={{ height: `${totalHeight}px`, overflow: 'hidden' }}
       >
-        <svg width={width ?? '100%'} height={height ?? '650px'} className={classNames.chart}>
-          <foreignObject x="0" y="0" width="100%" height="100%">
+        <svg width={svgWidth} height={`${totalHeight}px`} className={classNames.chart}>
+          {chartTitle && (
+            <ChartTitle
+              title={chartTitle}
+              x={titleX}
+              maxWidth={titleMaxWidth}
+              className={classNames.chartTitle}
+              titleStyles={this.props.titleStyles}
+              tooltipClassName={classNames.svgTooltip}
+            />
+          )}
+          <foreignObject x="0" y={titleHeight} width="100%" height={tableHeight}>
             <div
               style={{
                 maxHeight: height ? `${height}px` : '650px',

packages/charts/react-charting/src/components/ChartTable/ChartTable.styles.ts

@@ -1,5 +1,6 @@
 import { IChartTableStyleProps, IChartTableStyles } from './ChartTable.types';
 import { FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';
+import { getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/Common.styles';
 
 export const getStyles = (props: IChartTableStyleProps): IChartTableStyles => {
   const { theme } = props;
@@ -40,5 +41,7 @@ export const getStyles = (props: IChartTableStyleProps): IChartTableStyles => {
         },
       },
     },
+    chartTitle: getChartTitleStyle(theme!),
+    svgTooltip: getSvgTooltipStyle(theme!),
   };
 };

packages/charts/react-charting/src/components/ChartTable/ChartTable.types.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ITheme, IStyle } from '@fluentui/react/lib/Styling';
 import { IRefObject, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { IChart } from '../../types/index';
+import { ITitleStyles } from '../../utilities/Common.styles';
 
 export interface IChartTableStyleProps {
   theme: ITheme;
@@ -13,6 +14,11 @@ export interface IChartTableStyleProps {
  * {@docCategory ChartTable}
  */
 export interface IChartTableProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * 1d or 2d Array of header values.
    */
@@ -35,6 +41,11 @@ export interface IChartTableProps {
    */
   height?: string | number;
 
+  /**
+   * Chart title to display above the table
+   */
+  chartTitle?: string;
+
   /**
    * Theme (provided through customization)
    */
@@ -67,4 +78,6 @@ export interface IChartTableStyles {
   headerCell?: IStyle;
   bodyCell?: IStyle;
   chart?: IStyle;
+  chartTitle?: IStyle;
+  svgTooltip?: IStyle;
 }

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.base.tsx

@@ -32,6 +32,7 @@ import {
   truncateString,
   tooltipOfAxislabels,
   DEFAULT_WRAP_WIDTH,
+  getChartTitleInlineStyles,
   autoLayoutXAxisLabels,
 } from '../../utilities/index';
 import { LegendShape, Shape } from '../Legends/index';
@@ -585,20 +586,58 @@ export class CartesianChartBase
                 {...commonSvgToolTipProps}
               />
             )}
-            {this.props.xAxisAnnotation !== undefined && this.props.xAxisAnnotation !== '' && (
-              <SVGTooltipText
-                content={this.props.xAxisAnnotation}
-                textProps={{
-                  x: this.margins.left! + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2,
-                  y: VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING,
-                  className: this._classNames.axisAnnotation!,
-                  textAnchor: 'middle',
-                  'aria-hidden': true,
-                }}
-                maxWidth={xAxisTitleMaxWidth}
-                {...commonSvgToolTipProps}
-              />
-            )}
+            {this.props.xAxisAnnotation !== undefined &&
+              this.props.xAxisAnnotation !== '' &&
+              (() => {
+                const { titleFont, titleXAnchor, titleYAnchor, titlePad } = this.props.titleStyles ?? {};
+                const fontSize = typeof titleFont?.size === 'number' ? titleFont.size : 13;
+                const padL = titlePad?.l ?? 0;
+                const padR = titlePad?.r ?? 0;
+                const padT = titlePad?.t ?? 0;
+                const padB = titlePad?.b ?? 0;
+
+                const xPos =
+                  (titleXAnchor === 'left'
+                    ? this.margins.left! + AXIS_TITLE_PADDING
+                    : titleXAnchor === 'right'
+                    ? this.margins.left! + AXIS_TITLE_PADDING + xAxisTitleMaxWidth
+                    : this.margins.left! + AXIS_TITLE_PADDING + xAxisTitleMaxWidth / 2) +
+                  padL -
+                  padR;
+
+                const yPos =
+                  Math.max(fontSize + AXIS_TITLE_PADDING, VERTICAL_MARGIN_FOR_XAXIS_TITLE - AXIS_TITLE_PADDING) +
+                  padT -
+                  padB;
+
+                const textAnchor = titleXAnchor === 'left' ? 'start' : titleXAnchor === 'right' ? 'end' : 'middle';
+
+                const dominantBaseline =
+                  titleYAnchor === 'top'
+                    ? 'hanging'
+                    : titleYAnchor === 'bottom'
+                    ? 'alphabetic'
+                    : titleYAnchor === 'middle'
+                    ? 'central'
+                    : 'auto';
+
+                return (
+                  <SVGTooltipText
+                    content={this.props.xAxisAnnotation}
+                    textProps={{
+                      x: xPos,
+                      y: yPos,
+                      className: this._classNames.axisAnnotation!,
+                      textAnchor,
+                      dominantBaseline,
+                      'aria-hidden': true,
+                      style: getChartTitleInlineStyles(titleFont),
+                    }}
+                    maxWidth={xAxisTitleMaxWidth}
+                    {...commonSvgToolTipProps}
+                  />
+                );
+              })()}
             <g
               ref={(e: SVGSVGElement | null) => {
                 this.yAxisElement = e;

packages/charts/react-charting/src/components/CommonComponents/CartesianChart.types.ts

@@ -5,6 +5,7 @@ import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
 import { IFocusZoneProps, FocusZoneDirection } from '@fluentui/react-focus';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
+import { ITitleStyles } from '../../utilities/Common.styles';
 import {
   AxisCategoryOrder,
   AxisProps,
@@ -221,6 +222,11 @@ export interface ICartesianChartStyles {
  * {@docCategory CartesianChart}
  */
 export interface ICartesianChartProps {
+  /**
+   * Title styles configuration for the chart title
+   */
+  titleStyles?: ITitleStyles;
+
   /**
    * Below height used for resizing of the chart
    * Wrap chart in your container and send the updated height and width to these props.