npm - @fluentui/react-charting - Versions diffs - 5.25.5 → 5.25.7 - Mend

@fluentui/react-charting 5.25.5 → 5.25.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (344) hide show

package/lib/components/DonutChart/DonutChart.base.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export declare class DonutChartBase extends React.Component<IDonutChartProps, ID
     get chartContainer(): HTMLElement | null;
     toImage: (opts?: IImageExportOptions) => Promise<string>;
     private _closeCallout;
+    private _getTitleHeight;
     private _elevateToMinimums;
     private _setViewBox;
     private _createLegends;

package/lib/components/DonutChart/DonutChart.base.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
 import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';
 import { ChartHoverCard, Legends } from '../../index';
 import { Pie } from './Pie/index';
-import { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient, areArraysEqual, MIN_DONUT_RADIUS, } from '../../utilities/index';
+import { getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient, areArraysEqual, MIN_DONUT_RADIUS, ChartTitle, CHART_TITLE_PADDING, } from '../../utilities/index';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { exportChartsAsImage } from '../../utilities/image-export-utils';
 var getClassNames = classNamesFunction();
@@ -127,9 +127,10 @@ var DonutChartBase = /** @class */ (function (_super) {
     };
     DonutChartBase.prototype.componentDidMount = function () {
         if (this._rootElem) {
+            var titleHeight = this._getTitleHeight();
             this.setState({
                 _width: this._rootElem.offsetWidth,
-                _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,
+                _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT - titleHeight,
             });
         }
     };
@@ -153,6 +154,7 @@ var DonutChartBase = /** @class */ (function (_super) {
         var legendBars = this._createLegends(points.filter(function (d) { return d.data >= 0; }));
         var donutMarginHorizontal = this.props.hideLabels ? 0 : 80;
         var donutMarginVertical = this.props.hideLabels ? 0 : 40;
+        var titleHeight = this._getTitleHeight();
         var outerRadius = Math.min(this.state._width - donutMarginHorizontal, this.state._height - donutMarginVertical) / 2;
         var chartData = this._elevateToMinimums(points);
         var valueInsideDonut = this.props.innerRadius > MIN_DONUT_RADIUS
@@ -164,11 +166,13 @@ var DonutChartBase = /** @class */ (function (_super) {
             this.props.xAxisAnnotation && (React.createElement("text", { className: this._classNames.axisAnnotation, x: this.state._width / 2, y: this.state._height - 10, textAnchor: "middle" }, this.props.xAxisAnnotation)),
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, handleTabKey: FocusZoneTabbableElements.all, className: this._classNames.chartWrapper },
                 React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); }, width: this.state._width, height: this.state._height },
-                    React.createElement(Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels }))),
+                    !hideLegend && (data === null || data === void 0 ? void 0 : data.chartTitle) && (React.createElement(ChartTitle, { title: data.chartTitle, x: this.state._width / 2, maxWidth: this.state._width - 20, className: this._classNames.chartTitle, titleStyles: this.props.titleStyles, tooltipClassName: this._classNames.svgTooltip })),
+                    React.createElement("g", { transform: "translate(0, ".concat(titleHeight, ")") },
+                        React.createElement(Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, enableGradient: this.props.enableGradient, roundCorners: this.props.roundCorners, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
             React.createElement(Callout, __assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
                 /** Keep the callout updated with details of focused/hovered arc */
                 shouldUpdateWhenHidden: true }, this.props.calloutProps, getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
-            !hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legendBars))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+            !hideLegend && (React.createElement("div", { className: this._classNames.legendContainer, style: { marginTop: titleHeight } }, legendBars)))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
     Object.defineProperty(DonutChartBase.prototype, "chartContainer", {
         get: function () {
@@ -177,6 +181,14 @@ var DonutChartBase = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DonutChartBase.prototype._getTitleHeight = function () {
+        var _a, _b;
+        var data = this.props.data;
+        return (data === null || data === void 0 ? void 0 : data.chartTitle)
+            ? Math.max((typeof ((_b = (_a = this.props.titleStyles) === null || _a === void 0 ? void 0 : _a.titleFont) === null || _b === void 0 ? void 0 : _b.size) === 'number' ? this.props.titleStyles.titleFont.size : 13) +
+                CHART_TITLE_PADDING, 36)
+            : 0;
+    };
     DonutChartBase.prototype._elevateToMinimums = function (data) {
         var sumOfData = 0;
         var minPercent = 0.01;

package/lib/components/DonutChart/DonutChart.base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport {\n getAccessibleDataObject,\n getColorFromToken,\n getNextColor,\n getNextGradient,\n areArraysEqual,\n MIN_DONUT_RADIUS,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/index';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _emptyChartId: string \| null;\n private _legendsRef: React.RefObject<ILegendContainer \| null>;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n let widthState: { _width: number } \| undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } \| undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 200,\n _height: this.props.height \|\| 200,\n activeLegend: undefined,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n focusedArcId: '',\n selectedLegends: props.legendProps?.selectedLegends \|\| [],\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n this._legendsRef = React.createRef();\n }\n\n public componentDidMount(): void {\n if (this._rootElem) {\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT,\n });\n }\n }\n\n public componentDidUpdate(prevProps: IDonutChartProps): void {\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n this.setState({\n selectedLegends: this.props.legendProps?.selectedLegends \|\| [],\n });\n }\n }\n\n public render(): JSXElement {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points.filter(d => d.data! >= 0));\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points);\n const valueInsideDonut =\n this.props.innerRadius! > MIN_DONUT_RADIUS\n ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!)\n : '';\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => {\n this._rootElem = rootElem;\n }}\n onMouseLeave={this._handleChartMouseLeave}\n >\n {this.props.xAxisAnnotation && (\n <text\n className={this._classNames.axisAnnotation}\n x={this.state._width! / 2}\n y={this.state._height! - 10}\n textAnchor=\"middle\"\n >\n {this.props.xAxisAnnotation}\n </text>\n )}\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n handleTabKey={FocusZoneTabbableElements.all}\n className={this._classNames.chartWrapper}\n >\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n width={this.state._width}\n height={this.state._height}\n >\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </svg>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement \| null {\n return this._rootElem;\n }\n\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: this._rootElem }],\n this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n };\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSXElement {\n if (this.props.order === 'sorted') {\n chartData.sort((a: IChartDataPoint, b: IChartDataPoint) => {\n return b.data! - a.data!;\n });\n }\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] \|\| getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: undefined });\n },\n };\n return legend;\n });\n\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={this._onLegendSelectionChange.bind(this)}\n ref={this._legendsRef}\n />\n );\n return legends;\n }\n\n private _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n this.setState({ selectedLegends });\n } else {\n this.setState({ selectedLegends: selectedLegends.slice(-1) });\n }\n if (this.props.legendProps?.onChange) {\n this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) \|\| 0, 0);\n color = data.gradient?.[0] \|\| getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegends = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 \|\| this.state.showHover)) {\n const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, this.props.culture, this.props.useUTC);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegends.length > 0\n ? this.state.selectedLegends\n : this.state.activeLegend\n ? [this.state.activeLegend]\n : [];\n }\n\n private _isLegendHighlighted = (legend: string \| undefined): boolean => {\n return this._getHighlightedLegend().includes(legend!);\n };\n\n private _noLegendsHighlighted = (): boolean => {\n return this._getHighlightedLegend().length === 0;\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}
1	+ {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';\nimport { ScaleOrdinal } from 'd3-scale';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport {\n getAccessibleDataObject,\n getColorFromToken,\n getNextColor,\n getNextGradient,\n areArraysEqual,\n MIN_DONUT_RADIUS,\n ChartTitle,\n CHART_TITLE_PADDING,\n} from '../../utilities/index';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IChart, IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { ILegendContainer } from '../Legends/index';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\nconst LEGEND_CONTAINER_HEIGHT = 40;\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n selectedLegends: string[];\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> implements IChart {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n hideLabels: true,\n };\n public _colors: ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n private _emptyChartId: string \| null;\n private _legendsRef: React.RefObject<ILegendContainer \| null>;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n let widthState: { _width: number } \| undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } \| undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n heightState = { _height: nextProps.height - LEGEND_CONTAINER_HEIGHT };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n\n initializeComponentRef(this);\n\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 200,\n _height: this.props.height \|\| 200,\n activeLegend: undefined,\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n focusedArcId: '',\n selectedLegends: props.legendProps?.selectedLegends \|\| [],\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n this._emptyChartId = getId('_DonutChart_empty');\n this._legendsRef = React.createRef();\n }\n\n public componentDidMount(): void {\n if (this._rootElem) {\n const titleHeight = this._getTitleHeight();\n this.setState({\n _width: this._rootElem.offsetWidth,\n _height: this._rootElem.offsetHeight - LEGEND_CONTAINER_HEIGHT - titleHeight,\n });\n }\n }\n\n public componentDidUpdate(prevProps: IDonutChartProps): void {\n if (!areArraysEqual(prevProps.legendProps?.selectedLegends, this.props.legendProps?.selectedLegends)) {\n this.setState({\n selectedLegends: this.props.legendProps?.selectedLegends \|\| [],\n });\n }\n }\n\n public render(): JSXElement {\n const { data, hideLegend = false } = this.props;\n const points = this._addDefaultColors(data?.chartData);\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(points.filter(d => d.data! >= 0));\n const donutMarginHorizontal = this.props.hideLabels ? 0 : 80;\n const donutMarginVertical = this.props.hideLabels ? 0 : 40;\n const titleHeight = this._getTitleHeight();\n const outerRadius =\n Math.min(this.state._width! - donutMarginHorizontal, this.state._height! - donutMarginVertical) / 2;\n const chartData = this._elevateToMinimums(points);\n const valueInsideDonut =\n this.props.innerRadius! > MIN_DONUT_RADIUS\n ? this._valueInsideDonut(this.props.valueInsideDonut!, chartData!)\n : '';\n return !this._isChartEmpty() ? (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => {\n this._rootElem = rootElem;\n }}\n onMouseLeave={this._handleChartMouseLeave}\n >\n {this.props.xAxisAnnotation && (\n <text\n className={this._classNames.axisAnnotation}\n x={this.state._width! / 2}\n y={this.state._height! - 10}\n textAnchor=\"middle\"\n >\n {this.props.xAxisAnnotation}\n </text>\n )}\n <FocusZone\n direction={FocusZoneDirection.horizontal}\n handleTabKey={FocusZoneTabbableElements.all}\n className={this._classNames.chartWrapper}\n >\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n width={this.state._width}\n height={this.state._height!}\n >\n {!hideLegend && data?.chartTitle && (\n <ChartTitle\n title={data.chartTitle}\n x={this.state._width! / 2}\n maxWidth={this.state._width! - 20}\n className={this._classNames.chartTitle}\n titleStyles={this.props.titleStyles}\n tooltipClassName={this._classNames.svgTooltip}\n />\n )}\n <g transform={`translate(0, ${titleHeight})`}>\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n enableGradient={this.props.enableGradient}\n roundCorners={this.props.roundCorners}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </g>\n </svg>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && (\n <div className={this._classNames.legendContainer} style={{ marginTop: titleHeight }}>\n {legendBars}\n </div>\n )}\n </div>\n ) : (\n <div\n id={this._emptyChartId!}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n public get chartContainer(): HTMLElement \| null {\n return this._rootElem;\n }\n\n public toImage = (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: this._rootElem }],\n this.props.hideLegend ? undefined : this._legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n };\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _getTitleHeight(): number {\n const { data } = this.props;\n return data?.chartTitle\n ? Math.max(\n (typeof this.props.titleStyles?.titleFont?.size === 'number' ? this.props.titleStyles.titleFont.size : 13) +\n CHART_TITLE_PADDING,\n 36,\n )\n : 0;\n }\n\n private _elevateToMinimums(data: IChartDataPoint[]) {\n let sumOfData = 0;\n const minPercent = 0.01;\n const elevatedData: IChartDataPoint[] = [];\n data.forEach(item => {\n sumOfData += item.data!;\n });\n data.forEach(item => {\n elevatedData.push(\n minPercent sumOfData > item.data! && item.data! > 0\n ? {\n ...item,\n data: minPercent * sumOfData,\n yAxisCalloutData:\n item.yAxisCalloutData === undefined ? item.data!.toLocaleString() : item.yAxisCalloutData,\n }\n : item,\n );\n });\n return elevatedData;\n }\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n\n private _createLegends(chartData: IChartDataPoint[]): JSXElement {\n if (this.props.order === 'sorted') {\n chartData.sort((a: IChartDataPoint, b: IChartDataPoint) => {\n return b.data! - a.data!;\n });\n }\n const legendDataItems = chartData.map((point: IChartDataPoint, index: number) => {\n const color: string = this.props.enableGradient\n ? point.gradient?.[0] \|\| getNextGradient(index, 0, this.props.theme?.isInverted)[0]\n : point.color!;\n\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color,\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: undefined });\n },\n };\n return legend;\n });\n\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n // eslint-disable-next-line react/jsx-no-bind\n onChange={this._onLegendSelectionChange.bind(this)}\n ref={this._legendsRef}\n />\n );\n return legends;\n }\n\n private _onLegendSelectionChange(\n selectedLegends: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (this.props.legendProps && this.props.legendProps?.canSelectMultipleLegends) {\n this.setState({ selectedLegends });\n } else {\n this.setState({ selectedLegends: selectedLegends.slice(-1) });\n }\n if (this.props.legendProps?.onChange) {\n this.props.legendProps.onChange(selectedLegends, event, currentLegend);\n }\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n let color: string = data.color!;\n\n if (this.props.enableGradient) {\n const pointIndex = Math.max(this.props.data?.chartData?.findIndex(item => item.legend === data.legend) \|\| 0, 0);\n color = data.gradient?.[0] \|\| getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this._noLegendsHighlighted() \|\| this._isLegendHighlighted(data.legend),\n value: data.data!.toString(),\n legend: data.legend,\n color,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegends = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && (highlightedLegends.length === 1 \|\| this.state.showHover)) {\n const pointValue = data.find(point => this._isLegendHighlighted(point.legend));\n return pointValue\n ? pointValue.yAxisCalloutData\n ? pointValue.yAxisCalloutData\n : pointValue.data!\n : valueInsideDonut;\n } else if (highlightedLegends.length > 0) {\n let totalValue = 0;\n data.forEach(point => {\n if (highlightedLegends.includes(point.legend!)) {\n totalValue += point.data!;\n }\n });\n return totalValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = formatToLocaleString(data, this.props.culture, this.props.useUTC);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegends.length > 0\n ? this.state.selectedLegends\n : this.state.activeLegend\n ? [this.state.activeLegend]\n : [];\n }\n\n private _isLegendHighlighted = (legend: string \| undefined): boolean => {\n return this._getHighlightedLegend().includes(legend!);\n };\n\n private _noLegendsHighlighted = (): boolean => {\n return this._getHighlightedLegend().length === 0;\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.chartData &&\n this.props.data.chartData!.filter((d: IChartDataPoint) => d.data! > 0).length > 0\n );\n }\n\n private _addDefaultColors = (donutChartDataPoint?: IChartDataPoint[]): IChartDataPoint[] => {\n return donutChartDataPoint\n ? donutChartDataPoint.map((item, index) => {\n let color: string;\n // isInverted property is applicable to v8 themes only\n if (typeof item.color === 'undefined') {\n color = getNextColor(index, 0, this.props.theme?.isInverted);\n } else {\n color = getColorFromToken(item.color, this.props.theme?.isInverted);\n }\n\n return { ...item, color };\n })\n : [];\n };\n}\n"]}

package/lib/components/DonutChart/DonutChart.styles.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { getAxisTitleStyle } from '../../utilities/index';
+import { getAxisTitleStyle, getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/index';
 export var getStyles = function (props) {
     var className = props.className, theme = props.theme;
     return {
@@ -24,7 +24,9 @@ export var getStyles = function (props) {
             paddingTop: '16px',
             width: '100%',
         },
+        chartTitle: getChartTitleStyle(theme),
         axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),
+        svgTooltip: getSvgTooltipStyle(theme),
     };
 };
 //# sourceMappingURL=DonutChart.styles.js.map

package/lib/components/DonutChart/DonutChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;~~AAE1D~~,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA4B;IAC5C,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACnC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,eAAe;YACf;gBACE,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,SAAS,EAAE,aAAa;YACxB,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,QAAQ;YACzB,OAAO,EAAE,OAAO;SACjB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,MAAM;SACd;QACD,cAAc,EAAE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;~~KAC5D~~,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { getAxisTitleStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: '100%',\n },\n axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),\n };\n};\n"]}
1	+ {"version":3,"file":"DonutChart.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAElG,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA4B;IAC5C,IAAA,SAAS,GAAY,KAAK,UAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACnC,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,eAAe;YACf;gBACE,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,SAAS,EAAE,aAAa;YACxB,QAAQ,EAAE,SAAS;YACnB,eAAe,EAAE,QAAQ;YACzB,OAAO,EAAE,OAAO;SACjB;QACD,eAAe,EAAE;YACf,UAAU,EAAE,MAAM;YAClB,KAAK,EAAE,MAAM;SACd;QACD,UAAU,EAAE,kBAAkB,CAAC,KAAK,CAAC;QACrC,cAAc,EAAE,iBAAiB,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;QAC3D,UAAU,EAAE,kBAAkB,CAAC,KAAK,CAAC;KACtC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IDonutChartStyleProps, IDonutChartStyles } from './DonutChart.types';\nimport { getAxisTitleStyle, getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/index';\n\nexport const getStyles = (props: IDonutChartStyleProps): IDonutChartStyles => {\n const { className, theme } = props;\n return {\n root: [\n theme.fonts.medium,\n 'ms-DonutChart',\n {\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n boxSizing: 'content-box',\n overflow: 'visible',\n alignmentAdjust: 'center',\n display: 'block',\n },\n legendContainer: {\n paddingTop: '16px',\n width: '100%',\n },\n chartTitle: getChartTitleStyle(theme),\n axisAnnotation: getAxisTitleStyle(theme, theme.fonts.small),\n svgTooltip: getSvgTooltipStyle(theme),\n };\n};\n"]}

package/lib/components/DonutChart/DonutChart.types.d.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/r
 import { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
 import { IChartProps, IChartDataPoint, IChart } from './index';
+import type { ITitleStyles } from '../../utilities/Common.styles';
 export interface IDonutChart {
 }
 /**
@@ -10,6 +11,10 @@ export interface IDonutChart {
  * {@docCategory DonutChart}
  */
 export interface IDonutChartProps extends ICartesianChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data to render in the chart.
      */
@@ -94,6 +99,10 @@ export interface IDonutChartStyles {
      * Style for the legend container.
      */
     legendContainer: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * styles for axis annotation
      */
@@ -102,4 +111,8 @@ export interface IDonutChartStyles {
      * Styles for the chart wrapper div
      */
     chartWrapper?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
 }

package/lib/components/DonutChart/DonutChart.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the chart\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IChart>;\n\n /\n Rendering order of the legend\n * @default 'default'\n * 'default' - as per data provided\n * 'sorted' - in descending order of value\n /\n order?: 'default' \| 'sorted';\n}\n\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n /\n legendContainer: IStyle;\n\n /\n styles for axis annotation\n /\n axisAnnotation?: IStyle;\n\n /\n Styles for the chart wrapper div\n */\n chartWrapper?: IStyle;\n}\n"]}
1	+ {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRefObject, IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint, IChart } from './index';\nimport type { ITitleStyles } from '../../utilities/Common.styles';\n\nexport interface IDonutChart {}\n\n/*\n Donut Chart properties.\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartProps extends ICartesianChartProps {\n /\n Title styles configuration for the chart title\n /\n titleStyles?: ITitleStyles;\n\n /\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default true\n /\n hideLabels?: boolean;\n\n /\n Prop to enable the gradient in the chart\n * @default false\n /\n enableGradient?: boolean;\n\n /\n Prop to enable the round corners in the chart\n * @default false\n /\n roundCorners?: boolean;\n\n /\n Optional callback to access the IChart interface. Use this instead of ref for accessing\n * the public methods and properties of the component.\n /\n componentRef?: IRefObject<IChart>;\n\n /\n Rendering order of the legend\n * @default 'default'\n * 'default' - as per data provided\n * 'sorted' - in descending order of value\n /\n order?: 'default' \| 'sorted';\n}\n\n/\n Donut Chart style properties\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\n/\n Donut Chart styles\n * {@docCategory DonutChart}\n /\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n /\n legendContainer: IStyle;\n\n /\n Style for the chart title.\n /\n chartTitle?: IStyle;\n\n /\n styles for axis annotation\n /\n axisAnnotation?: IStyle;\n\n /\n Styles for the chart wrapper div\n /\n chartWrapper?: IStyle;\n\n /\n Style for SVG tooltip text\n */\n svgTooltip?: IStyle;\n}\n"]}

package/lib/components/FunnelChart/FunnelChart.base.js CHANGED Viewed

@@ -8,19 +8,20 @@ import { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';
 import { formatToLocaleString } from '@fluentui/chart-utilities';
 import { exportChartsAsImage } from '../../utilities/image-export-utils';
 import { getContrastTextColor } from '../../utilities/utilities';
+import { ChartTitle, CHART_TITLE_PADDING } from '../../utilities/index';
 import { getHorizontalFunnelSegmentGeometry, getVerticalFunnelSegmentGeometry, getSegmentTextProps, getStackedHorizontalFunnelSegmentGeometry, getStackedVerticalFunnelSegmentGeometry, } from './funnelGeometry';
 var getClassNames = classNamesFunction();
 export var FunnelChartBase = React.forwardRef(function (_a, forwardedRef) {
-    var _b;
-    var _c = _a.orientation, orientation = _c === void 0 ? 'vertical' : _c, props = __rest(_a, ["orientation"]);
+    var _b, _c, _d;
+    var _e = _a.orientation, orientation = _e === void 0 ? 'vertical' : _e, props = __rest(_a, ["orientation"]);
     var _tooltipId = getId('FunnelChartTooltipId_');
     var _emptyChartId = getId('_FunnelChart_empty');
     var isRTL = getRTL();
-    var _d = React.useState(null), hoveredStage = _d[0], setHoveredStage = _d[1];
-    var _e = React.useState(false), isCalloutVisible = _e[0], setIsCalloutVisible = _e[1];
-    var _f = React.useState(null), calloutData = _f[0], setCalloutData = _f[1];
-    var _g = React.useState(null), refSelected = _g[0], setRefSelected = _g[1];
-    var _h = React.useState([]), selectedLegends = _h[0], setSelectedLegends = _h[1];
+    var _f = React.useState(null), hoveredStage = _f[0], setHoveredStage = _f[1];
+    var _g = React.useState(false), isCalloutVisible = _g[0], setIsCalloutVisible = _g[1];
+    var _h = React.useState(null), calloutData = _h[0], setCalloutData = _h[1];
+    var _j = React.useState(null), refSelected = _j[0], setRefSelected = _j[1];
+    var _k = React.useState([]), selectedLegends = _k[0], setSelectedLegends = _k[1];
     var chartContainerRef = React.useRef(null);
     var legendsRef = React.useRef(null);
     var isStacked = isStackedFunnelData(props.data);
@@ -272,12 +273,17 @@ export var FunnelChartBase = React.forwardRef(function (_a, forwardedRef) {
         chartWidth: width,
         chartHeight: height,
     });
-    var funnelMarginTop = 40;
+    var titleHeight = props.chartTitle
+        ? Math.max((typeof ((_d = (_c = props.titleStyles) === null || _c === void 0 ? void 0 : _c.titleFont) === null || _d === void 0 ? void 0 : _d.size) === 'number' ? props.titleStyles.titleFont.size : 13) +
+            CHART_TITLE_PADDING, 40)
+        : 40;
+    var funnelMarginTop = titleHeight;
     var funnelWidth = width * 0.8;
     var funnelOffsetX = (width - funnelWidth) / 2;
     return !_isChartEmpty() ? (React.createElement("div", { ref: chartContainerRef, className: classNames.root },
         React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal },
             React.createElement("svg", { width: width, height: height, className: classNames.chart, role: 'img', "aria-label": props.chartTitle },
+                !props.hideLegend && props.chartTitle && (React.createElement(ChartTitle, { title: props.chartTitle, x: width / 2, maxWidth: width - 20, className: classNames.chartTitle, titleStyles: props.titleStyles, tooltipClassName: classNames.svgTooltip })),
                 React.createElement("g", { transform: isRTL
                         ? "translate(".concat(funnelOffsetX + funnelWidth, ", ").concat(funnelMarginTop, ") scale(-1,1)")
                         : "translate(".concat(funnelOffsetX, ", ").concat(funnelMarginTop, ")") }, isStacked

package/lib/components/FunnelChart/FunnelChart.base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FunnelChart.base.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport {\n IFunnelChartDataPoint,\n IFunnelChartProps,\n IFunnelChartStyleProps,\n IFunnelChartStyles,\n} from './FunnelChart.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILegend, ILegendContainer, Legends } from '../Legends/index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { getContrastTextColor } from '../../utilities/utilities';\nimport {\n getHorizontalFunnelSegmentGeometry,\n getVerticalFunnelSegmentGeometry,\n getSegmentTextProps,\n getStackedHorizontalFunnelSegmentGeometry,\n getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IFunnelChartStyleProps, IFunnelChartStyles>();\n\nexport const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React.forwardRef<\n HTMLDivElement,\n IFunnelChartProps\n>(({ orientation = 'vertical', ...props }, forwardedRef) => {\n const _tooltipId: string = getId('FunnelChartTooltipId_');\n const _emptyChartId: string = getId('_FunnelChart_empty');\n const isRTL = getRTL();\n\n const [hoveredStage, setHoveredStage] = React.useState<string \| null>(null);\n const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);\n const [calloutData, setCalloutData] = React.useState<IFunnelChartDataPoint \| null>(null);\n const [refSelected, setRefSelected] = React.useState<SVGElement \| null>(null);\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n const chartContainerRef = React.useRef<HTMLDivElement \| null>(null);\n const legendsRef = React.useRef<ILegendContainer \| null>(null);\n const isStacked = isStackedFunnelData(props.data);\n\n React.useEffect(() => {\n if (props.legendProps?.selectedLegends) {\n setSelectedLegends(props.legendProps.selectedLegends);\n }\n }, [props.legendProps?.selectedLegends]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: chartContainerRef ?? null,\n toImage: (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: chartContainerRef.current }],\n props.hideLegend ? undefined : legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n },\n }),\n [props.hideLegend],\n );\n\n function _handleHover(data: IFunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n mouseEvent?.persist();\n setHoveredStage(data.stage as string);\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(mouseEvent.currentTarget);\n }\n\n function _handleFocus(data: IFunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n focusEvent?.persist();\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.currentTarget);\n }\n\n function _handleStackedHover(\n stage: string,\n subValue: { category: string; value: number; color: string },\n mouseEvent: React.MouseEvent<SVGElement>,\n ) {\n mouseEvent?.persist();\n setHoveredStage(subValue.category);\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(mouseEvent.currentTarget);\n }\n\n function _handleStackedFocus(\n stage: string,\n subValue: { category: string; value: number; color: string },\n focusEvent: React.FocusEvent<SVGPathElement>,\n ) {\n focusEvent?.persist();\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.currentTarget);\n }\n\n function _handleMouseOut() {\n setHoveredStage(null);\n setIsCalloutVisible(false);\n setCalloutData(null);\n setRefSelected(null);\n }\n\n function _onLegendSelectionChange(\n legendsSelected: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(legendsSelected);\n } else {\n setSelectedLegends(legendsSelected.slice(-1));\n }\n\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(legendsSelected, event, currentLegend);\n }\n }\n\n const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [props.legendProps]);\n\n function getHighlightedLegend(): string[] {\n return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [hoveredStage] : [];\n }\n\n function legendHighlighted(legend: string): boolean {\n return getHighlightedLegend().includes(legend);\n }\n\n function noLegendHighlighted(): boolean {\n return getHighlightedLegend().length === 0;\n }\n\n function _getEventHandlerProps(\n data: IFunnelChartDataPoint \| { stage: string; subValue: { category: string; value: number; color: string } },\n opacity?: number,\n ) {\n if ('subValue' in data) {\n return {\n culture: props.culture,\n onMouseOver:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onMouseMove:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n } else {\n return {\n culture: props.culture,\n onMouseOver: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onMouseMove: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n }\n }\n\n function _renderSegmentText({\n show,\n x,\n y,\n value,\n textColor,\n }: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n textColor: string;\n }) {\n if (!show) {\n return null;\n }\n\n const textElement = (\n <text x={isRTL ? funnelWidth - x : x} y={y} textAnchor=\"middle\" alignmentBaseline=\"middle\" fill={textColor}>\n {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n </text>\n );\n\n if (isRTL) {\n return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n }\n return textElement;\n }\n\n function _renderFunnelSegment({\n key,\n pathD,\n fill,\n opacity,\n textProps,\n data,\n isFocusable,\n }: {\n key: string \| number;\n pathD: string;\n fill: string;\n opacity: number;\n textProps?: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n };\n data: IFunnelChartDataPoint \| { stage: string; subValue: { category: string; value: number; color: string } };\n isFocusable?: boolean;\n }) {\n const eventHandlers = _getEventHandlerProps(data, opacity);\n const textColor = getContrastTextColor(fill, props.theme!);\n\n return (\n <g key={key}>\n <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} data-is-focusable={isFocusable} />\n {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor })}</g>}\n </g>\n );\n }\n\n function _createFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\n const { data } = props;\n const funnelWidth = containerWidth;\n const funnelHeight = containerHeight * 0.8;\n\n return data.map((d, i) => {\n const geometryProps =\n orientation === 'vertical'\n ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n const { pathD, textX, textY, availableWidth } = geometryProps;\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps(d);\n const textProps = getSegmentTextProps({\n availableWidth,\n minTextWidth,\n textX,\n textY,\n value: d.value!,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: i,\n pathD,\n fill: d.color!,\n opacity: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: d,\n isFocusable: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? true : false,\n });\n });\n }\n\n function isStackedFunnelData(data: IFunnelChartDataPoint[]): boolean {\n return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n }\n\n function _renderStackedSegment(\n stage: IFunnelChartDataPoint,\n subValue: { value: number; color: string; category: string },\n stageIndex: number,\n subValueIndex: number,\n geometryParams: {\n stages: IFunnelChartDataPoint[];\n totals: number[];\n maxTotal: number;\n funnelWidth: number;\n funnelHeight: number;\n isRTL: boolean;\n },\n ): JSXElement {\n // Ensure stages have subValues for geometry functions\n const stagesWithSubValues = geometryParams.stages.map(s => ({\n ...s,\n subValues: s.subValues \|\| [],\n }));\n\n const geom =\n orientation === 'vertical'\n ? getStackedVerticalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n })\n : getStackedHorizontalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n });\n\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n const textProps = getSegmentTextProps({\n availableWidth: geom.availableWidth,\n minTextWidth,\n textX: geom.textX,\n textY: geom.textY,\n value: subValue.value,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: `${stageIndex}-${subValueIndex}`,\n pathD: geom.pathD,\n fill: subValue.color,\n opacity:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: { stage: stage.stage as string, subValue },\n isFocusable:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted()\n ? true\n : false,\n });\n }\n\n function _createStackedFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\n const { data } = props;\n\n const stages = data;\n const totals = stages.map(s => s?.subValues?.reduce((sum, subValue) => sum + subValue.value, 0) ?? 0);\n const maxTotal = Math.max(...totals);\n\n const funnelWidth = containerWidth;\n const funnelHeight = containerHeight * 0.8;\n\n const paths: JSXElement[] = [];\n\n const geometryParams = {\n stages,\n totals,\n maxTotal,\n funnelWidth,\n funnelHeight,\n isRTL,\n };\n\n for (let i = 0; i < stages.length; i++) {\n const cur = stages[i];\n for (let k = 0; k < (cur.subValues ?? []).length; k++) {\n const v = cur.subValues?.[k];\n if (!v) {\n continue;\n }\n paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));\n }\n }\n return paths;\n }\n\n function _renderLegends(): JSXElement {\n if (props.hideLegend) {\n return <></>;\n }\n let legends: ILegend[];\n\n if (isStacked) {\n // Collect unique categories and their color\n const categoryMap: Record<string, string> = {};\n props.data.forEach((stage: IFunnelChartDataPoint) => {\n (stage.subValues \|\| []).forEach(sub => {\n if (!(sub.category in categoryMap)) {\n categoryMap[sub.category] = sub.color;\n }\n });\n });\n legends = Object.entries(categoryMap).map(([category, color]) => ({\n title: category,\n color,\n hoverAction: () => setHoveredStage(category),\n onMouseOutAction: () => setHoveredStage(null),\n }));\n } else {\n legends = props.data.map((d: IFunnelChartDataPoint) => ({\n title: d.stage as string,\n color: d.color!,\n hoverAction: () => setHoveredStage(d.stage as string),\n onMouseOutAction: () => setHoveredStage(null),\n }));\n }\n\n return (\n <div style={{ display: 'flex', justifyContent: 'center' }}>\n <Legends\n ref={legendsRef}\n legends={legends}\n centerLegends={true}\n onChange={_onLegendSelectionChangeCallback}\n {...props.legendProps}\n />\n </div>\n );\n }\n\n function _isChartEmpty(): boolean {\n return !(props.data && props.data.length > 0);\n }\n\n const calloutProps = {\n isCalloutVisible,\n directionalHint: DirectionalHint.topAutoEdge,\n id: `toolTip${_tooltipId}`,\n target: refSelected,\n color: calloutData?.color,\n XValue: calloutData?.stage,\n YValue: calloutData?.value,\n isBeakVisible: false,\n gapSpace: 15,\n onDismiss: () => {\n setIsCalloutVisible(false);\n },\n preventDismissOnLostFocus: true,\n ...props.calloutProps,\n };\n\n const width = props.width \|\| 350;\n const height = props.height \|\| 500;\n const classNames = getClassNames(props.styles!, {\n theme: props.theme!,\n className: props.className,\n chartWidth: width,\n chartHeight: height,\n });\n\n const funnelMarginTop = 40;\n const funnelWidth = width * 0.8;\n const funnelOffsetX = (width - funnelWidth) / 2;\n\n return !_isChartEmpty() ? (\n <div ref={chartContainerRef} className={classNames.root}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <svg width={width} height={height} className={classNames.chart} role={'img'} aria-label={props.chartTitle}>\n <g\n transform={\n isRTL\n ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)`\n : `translate(${funnelOffsetX}, ${funnelMarginTop})`\n }\n >\n {isStacked\n ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)\n : _createFunnel(height - funnelMarginTop, funnelWidth)}\n </g>\n {isCalloutVisible && (\n <Callout {...calloutProps}>\n <ChartHoverCard\n XValue={calloutProps?.XValue as string}\n YValue={calloutProps?.YValue}\n color={calloutProps?.color}\n />\n </Callout>\n )}\n </svg>\n </FocusZone>\n {_renderLegends()}\n </div>\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n});\nFunnelChartBase.displayName = 'FunnelChart';\n"]}
1	+ {"version":3,"file":"FunnelChart.base.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport {\n IFunnelChartDataPoint,\n IFunnelChartProps,\n IFunnelChartStyleProps,\n IFunnelChartStyles,\n} from './FunnelChart.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ILegend, ILegendContainer, Legends } from '../Legends/index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { ChartHoverCard } from '../../utilities/ChartHoverCard/ChartHoverCard';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { IImageExportOptions } from '../../types/index';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\nimport { getContrastTextColor } from '../../utilities/utilities';\nimport { ChartTitle, CHART_TITLE_PADDING } from '../../utilities/index';\nimport {\n getHorizontalFunnelSegmentGeometry,\n getVerticalFunnelSegmentGeometry,\n getSegmentTextProps,\n getStackedHorizontalFunnelSegmentGeometry,\n getStackedVerticalFunnelSegmentGeometry,\n} from './funnelGeometry';\nimport type { JSXElement } from '@fluentui/utilities';\n\nconst getClassNames = classNamesFunction<IFunnelChartStyleProps, IFunnelChartStyles>();\n\nexport const FunnelChartBase: React.FunctionComponent<IFunnelChartProps> = React.forwardRef<\n HTMLDivElement,\n IFunnelChartProps\n>(({ orientation = 'vertical', ...props }, forwardedRef) => {\n const _tooltipId: string = getId('FunnelChartTooltipId_');\n const _emptyChartId: string = getId('_FunnelChart_empty');\n const isRTL = getRTL();\n\n const [hoveredStage, setHoveredStage] = React.useState<string \| null>(null);\n const [isCalloutVisible, setIsCalloutVisible] = React.useState(false);\n const [calloutData, setCalloutData] = React.useState<IFunnelChartDataPoint \| null>(null);\n const [refSelected, setRefSelected] = React.useState<SVGElement \| null>(null);\n const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n const chartContainerRef = React.useRef<HTMLDivElement \| null>(null);\n const legendsRef = React.useRef<ILegendContainer \| null>(null);\n const isStacked = isStackedFunnelData(props.data);\n\n React.useEffect(() => {\n if (props.legendProps?.selectedLegends) {\n setSelectedLegends(props.legendProps.selectedLegends);\n }\n }, [props.legendProps?.selectedLegends]);\n\n React.useImperativeHandle(\n props.componentRef,\n () => ({\n chartContainer: chartContainerRef ?? null,\n toImage: (opts?: IImageExportOptions): Promise<string> => {\n return exportChartsAsImage(\n [{ container: chartContainerRef.current }],\n props.hideLegend ? undefined : legendsRef.current?.toSVG,\n getRTL(),\n opts,\n );\n },\n }),\n [props.hideLegend],\n );\n\n function _handleHover(data: IFunnelChartDataPoint, mouseEvent: React.MouseEvent<SVGElement>) {\n mouseEvent?.persist();\n setHoveredStage(data.stage as string);\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(mouseEvent.currentTarget);\n }\n\n function _handleFocus(data: IFunnelChartDataPoint, focusEvent: React.FocusEvent<SVGPathElement>) {\n focusEvent?.persist();\n setCalloutData(data);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.currentTarget);\n }\n\n function _handleStackedHover(\n stage: string,\n subValue: { category: string; value: number; color: string },\n mouseEvent: React.MouseEvent<SVGElement>,\n ) {\n mouseEvent?.persist();\n setHoveredStage(subValue.category);\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(mouseEvent.currentTarget);\n }\n\n function _handleStackedFocus(\n stage: string,\n subValue: { category: string; value: number; color: string },\n focusEvent: React.FocusEvent<SVGPathElement>,\n ) {\n focusEvent?.persist();\n setCalloutData({\n stage,\n value: subValue.value,\n color: subValue.color,\n category: subValue.category,\n } as IFunnelChartDataPoint);\n setIsCalloutVisible(true);\n setRefSelected(focusEvent.currentTarget);\n }\n\n function _handleMouseOut() {\n setHoveredStage(null);\n setIsCalloutVisible(false);\n setCalloutData(null);\n setRefSelected(null);\n }\n\n function _onLegendSelectionChange(\n legendsSelected: string[],\n event: React.MouseEvent<HTMLButtonElement>,\n currentLegend?: ILegend,\n ): void {\n if (props.legendProps?.canSelectMultipleLegends) {\n setSelectedLegends(legendsSelected);\n } else {\n setSelectedLegends(legendsSelected.slice(-1));\n }\n\n if (props.legendProps?.onChange) {\n props.legendProps.onChange(legendsSelected, event, currentLegend);\n }\n }\n\n const _onLegendSelectionChangeCallback = React.useCallback(_onLegendSelectionChange, [props.legendProps]);\n\n function getHighlightedLegend(): string[] {\n return selectedLegends.length > 0 ? selectedLegends : hoveredStage ? [hoveredStage] : [];\n }\n\n function legendHighlighted(legend: string): boolean {\n return getHighlightedLegend().includes(legend);\n }\n\n function noLegendHighlighted(): boolean {\n return getHighlightedLegend().length === 0;\n }\n\n function _getEventHandlerProps(\n data: IFunnelChartDataPoint \| { stage: string; subValue: { category: string; value: number; color: string } },\n opacity?: number,\n ) {\n if ('subValue' in data) {\n return {\n culture: props.culture,\n onMouseOver:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onMouseMove:\n opacity === 1\n ? (event: React.MouseEvent<SVGElement>) => _handleStackedHover(data.stage, data.subValue, event)\n : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleStackedFocus(data.stage, data.subValue, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n } else {\n return {\n culture: props.culture,\n onMouseOver: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onMouseMove: opacity === 1 ? (event: React.MouseEvent<SVGElement>) => _handleHover(data, event) : undefined,\n onFocus: (event: React.FocusEvent<SVGPathElement>) => _handleFocus(data, event),\n onBlur: () => _handleMouseOut(),\n onMouseOut: () => _handleMouseOut(),\n };\n }\n }\n\n function _renderSegmentText({\n show,\n x,\n y,\n value,\n textColor,\n }: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n textColor: string;\n }) {\n if (!show) {\n return null;\n }\n\n const textElement = (\n <text x={isRTL ? funnelWidth - x : x} y={y} textAnchor=\"middle\" alignmentBaseline=\"middle\" fill={textColor}>\n {formatToLocaleString(value.toString(), props.culture) as React.ReactNode}\n </text>\n );\n\n if (isRTL) {\n return <g transform={`scale(-1,1) translate(${-funnelWidth},0)`}>{textElement}</g>;\n }\n return textElement;\n }\n\n function _renderFunnelSegment({\n key,\n pathD,\n fill,\n opacity,\n textProps,\n data,\n isFocusable,\n }: {\n key: string \| number;\n pathD: string;\n fill: string;\n opacity: number;\n textProps?: {\n show: boolean;\n x: number;\n y: number;\n value: number;\n };\n data: IFunnelChartDataPoint \| { stage: string; subValue: { category: string; value: number; color: string } };\n isFocusable?: boolean;\n }) {\n const eventHandlers = _getEventHandlerProps(data, opacity);\n const textColor = getContrastTextColor(fill, props.theme!);\n\n return (\n <g key={key}>\n <path d={pathD} fill={fill} opacity={opacity} {...eventHandlers} data-is-focusable={isFocusable} />\n {textProps && <g {...eventHandlers}>{_renderSegmentText({ ...textProps, textColor })}</g>}\n </g>\n );\n }\n\n function _createFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\n const { data } = props;\n const funnelWidth = containerWidth;\n const funnelHeight = containerHeight * 0.8;\n\n return data.map((d, i) => {\n const geometryProps =\n orientation === 'vertical'\n ? getVerticalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL })\n : getHorizontalFunnelSegmentGeometry({ d, i, data, funnelWidth, funnelHeight, isRTL });\n\n const { pathD, textX, textY, availableWidth } = geometryProps;\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps(d);\n const textProps = getSegmentTextProps({\n availableWidth,\n minTextWidth,\n textX,\n textY,\n value: d.value!,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: i,\n pathD,\n fill: d.color!,\n opacity: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: d,\n isFocusable: legendHighlighted(d.stage as string) \|\| noLegendHighlighted() ? true : false,\n });\n });\n }\n\n function isStackedFunnelData(data: IFunnelChartDataPoint[]): boolean {\n return Array.isArray(data) && data.every(stage => Array.isArray(stage.subValues));\n }\n\n function _renderStackedSegment(\n stage: IFunnelChartDataPoint,\n subValue: { value: number; color: string; category: string },\n stageIndex: number,\n subValueIndex: number,\n geometryParams: {\n stages: IFunnelChartDataPoint[];\n totals: number[];\n maxTotal: number;\n funnelWidth: number;\n funnelHeight: number;\n isRTL: boolean;\n },\n ): JSXElement {\n // Ensure stages have subValues for geometry functions\n const stagesWithSubValues = geometryParams.stages.map(s => ({\n ...s,\n subValues: s.subValues \|\| [],\n }));\n\n const geom =\n orientation === 'vertical'\n ? getStackedVerticalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n })\n : getStackedHorizontalFunnelSegmentGeometry({\n ...geometryParams,\n stages: stagesWithSubValues,\n i: stageIndex,\n k: subValueIndex,\n });\n\n const minTextWidth = 16;\n const eventHandlerProps = _getEventHandlerProps({ stage: stage.stage as string, subValue });\n const textProps = getSegmentTextProps({\n availableWidth: geom.availableWidth,\n minTextWidth,\n textX: geom.textX,\n textY: geom.textY,\n value: subValue.value,\n ...eventHandlerProps,\n });\n\n return _renderFunnelSegment({\n key: `${stageIndex}-${subValueIndex}`,\n pathD: geom.pathD,\n fill: subValue.color,\n opacity:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted() ? 1 : 0.1,\n textProps,\n data: { stage: stage.stage as string, subValue },\n isFocusable:\n (isStackedFunnelData(props.data) && legendHighlighted(subValue.category)) \|\| noLegendHighlighted()\n ? true\n : false,\n });\n }\n\n function _createStackedFunnel(containerHeight: number, containerWidth: number): JSXElement[] {\n const { data } = props;\n\n const stages = data;\n const totals = stages.map(s => s?.subValues?.reduce((sum, subValue) => sum + subValue.value, 0) ?? 0);\n const maxTotal = Math.max(...totals);\n\n const funnelWidth = containerWidth;\n const funnelHeight = containerHeight * 0.8;\n\n const paths: JSXElement[] = [];\n\n const geometryParams = {\n stages,\n totals,\n maxTotal,\n funnelWidth,\n funnelHeight,\n isRTL,\n };\n\n for (let i = 0; i < stages.length; i++) {\n const cur = stages[i];\n for (let k = 0; k < (cur.subValues ?? []).length; k++) {\n const v = cur.subValues?.[k];\n if (!v) {\n continue;\n }\n paths.push(_renderStackedSegment(cur, v, i, k, geometryParams));\n }\n }\n return paths;\n }\n\n function _renderLegends(): JSXElement {\n if (props.hideLegend) {\n return <></>;\n }\n let legends: ILegend[];\n\n if (isStacked) {\n // Collect unique categories and their color\n const categoryMap: Record<string, string> = {};\n props.data.forEach((stage: IFunnelChartDataPoint) => {\n (stage.subValues \|\| []).forEach(sub => {\n if (!(sub.category in categoryMap)) {\n categoryMap[sub.category] = sub.color;\n }\n });\n });\n legends = Object.entries(categoryMap).map(([category, color]) => ({\n title: category,\n color,\n hoverAction: () => setHoveredStage(category),\n onMouseOutAction: () => setHoveredStage(null),\n }));\n } else {\n legends = props.data.map((d: IFunnelChartDataPoint) => ({\n title: d.stage as string,\n color: d.color!,\n hoverAction: () => setHoveredStage(d.stage as string),\n onMouseOutAction: () => setHoveredStage(null),\n }));\n }\n\n return (\n <div style={{ display: 'flex', justifyContent: 'center' }}>\n <Legends\n ref={legendsRef}\n legends={legends}\n centerLegends={true}\n onChange={_onLegendSelectionChangeCallback}\n {...props.legendProps}\n />\n </div>\n );\n }\n\n function _isChartEmpty(): boolean {\n return !(props.data && props.data.length > 0);\n }\n\n const calloutProps = {\n isCalloutVisible,\n directionalHint: DirectionalHint.topAutoEdge,\n id: `toolTip${_tooltipId}`,\n target: refSelected,\n color: calloutData?.color,\n XValue: calloutData?.stage,\n YValue: calloutData?.value,\n isBeakVisible: false,\n gapSpace: 15,\n onDismiss: () => {\n setIsCalloutVisible(false);\n },\n preventDismissOnLostFocus: true,\n ...props.calloutProps,\n };\n\n const width = props.width \|\| 350;\n const height = props.height \|\| 500;\n const classNames = getClassNames(props.styles!, {\n theme: props.theme!,\n className: props.className,\n chartWidth: width,\n chartHeight: height,\n });\n\n const titleHeight = props.chartTitle\n ? Math.max(\n (typeof props.titleStyles?.titleFont?.size === 'number' ? props.titleStyles.titleFont.size : 13) +\n CHART_TITLE_PADDING,\n 40,\n )\n : 40;\n const funnelMarginTop = titleHeight;\n const funnelWidth = width * 0.8;\n const funnelOffsetX = (width - funnelWidth) / 2;\n\n return !_isChartEmpty() ? (\n <div ref={chartContainerRef} className={classNames.root}>\n <FocusZone direction={FocusZoneDirection.horizontal}>\n <svg width={width} height={height} className={classNames.chart} role={'img'} aria-label={props.chartTitle}>\n {!props.hideLegend && props.chartTitle && (\n <ChartTitle\n title={props.chartTitle}\n x={width / 2}\n maxWidth={width - 20}\n className={classNames.chartTitle}\n titleStyles={props.titleStyles}\n tooltipClassName={classNames.svgTooltip}\n />\n )}\n <g\n transform={\n isRTL\n ? `translate(${funnelOffsetX + funnelWidth}, ${funnelMarginTop}) scale(-1,1)`\n : `translate(${funnelOffsetX}, ${funnelMarginTop})`\n }\n >\n {isStacked\n ? _createStackedFunnel(height - funnelMarginTop, funnelWidth)\n : _createFunnel(height - funnelMarginTop, funnelWidth)}\n </g>\n {isCalloutVisible && (\n <Callout {...calloutProps}>\n <ChartHoverCard\n XValue={calloutProps?.XValue as string}\n YValue={calloutProps?.YValue}\n color={calloutProps?.color}\n />\n </Callout>\n )}\n </svg>\n </FocusZone>\n {_renderLegends()}\n </div>\n ) : (\n <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n );\n});\nFunnelChartBase.displayName = 'FunnelChart';\n"]}

package/lib/components/FunnelChart/FunnelChart.styles.js CHANGED Viewed

@@ -1,4 +1,5 @@
 import { FontWeights } from '@fluentui/react/lib/Styling';
+import { getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/Common.styles';
 export var getFunnelChartStyles = function (props) {
     var theme = props.theme, className = props.className, chartWidth = props.chartWidth, chartHeight = props.chartHeight;
     return {
@@ -18,6 +19,7 @@ export var getFunnelChartStyles = function (props) {
             width: chartWidth,
             height: chartHeight,
         },
+        chartTitle: getChartTitleStyle(theme),
         text: [
             theme.fonts.medium,
             {
@@ -26,6 +28,7 @@ export var getFunnelChartStyles = function (props) {
                 fill: theme.palette.neutralPrimary,
             },
         ],
+        svgTooltip: getSvgTooltipStyle(theme),
         subComponentStyles: {
             calloutStyles: {
                 root: {

package/lib/components/FunnelChart/FunnelChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FunnelChart.styles.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;~~AAG1D~~,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAA6B;IACxD,IAAA,KAAK,GAAyC,KAAK,MAA9C,EAAE,SAAS,GAA8B,KAAK,UAAnC,EAAE,UAAU,GAAkB,KAAK,WAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;IAC5D,OAAO;QACL,yEAAyE;QACzE,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,gBAAgB;YAChB;gBACE,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;SACpB;QACD,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,aAAa,EAAE,MAAM;gBACrB,UAAU,EAAE,WAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;SACF;QACD,kBAAkB,EAAE;YAClB,aAAa,EAAE;gBACb,IAAI,EAAE;oBACJ,QAAQ,EAAE,OAAO;iBAClB;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';\n\nexport const getFunnelChartStyles = (props: IFunnelChartStyleProps): IFunnelChartStyles => {\n const { theme, className, chartWidth, chartHeight } = props;\n return {\n // root: { minHeight: '200px', minWidth: '200px', position: 'relative' },\n root: [\n theme.fonts.medium,\n 'ms-FunnelChart',\n {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n text: [\n theme.fonts.medium,\n {\n pointerEvents: 'none',\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n ],\n subComponentStyles: {\n calloutStyles: {\n root: {\n maxWidth: '238px',\n },\n },\n },\n };\n};\n"]}
1	+ {"version":3,"file":"FunnelChart.styles.js","sourceRoot":"../src/","sources":["components/FunnelChart/FunnelChart.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAE1D,OAAO,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAEvF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,KAA6B;IACxD,IAAA,KAAK,GAAyC,KAAK,MAA9C,EAAE,SAAS,GAA8B,KAAK,UAAnC,EAAE,UAAU,GAAkB,KAAK,WAAvB,EAAE,WAAW,GAAK,KAAK,YAAV,CAAW;IAC5D,OAAO;QACL,yEAAyE;QACzE,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,gBAAgB;YAChB;gBACE,UAAU,EAAE,QAAQ;gBACpB,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;aACf;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,WAAW;SACpB;QACD,UAAU,EAAE,kBAAkB,CAAC,KAAK,CAAC;QACrC,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,aAAa,EAAE,MAAM;gBACrB,UAAU,EAAE,WAAW,CAAC,QAAQ;gBAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;aACnC;SACF;QACD,UAAU,EAAE,kBAAkB,CAAC,KAAK,CAAC;QACrC,kBAAkB,EAAE;YAClB,aAAa,EAAE;gBACb,IAAI,EAAE;oBACJ,QAAQ,EAAE,OAAO;iBAClB;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IFunnelChartStyleProps, IFunnelChartStyles } from './FunnelChart.types';\nimport { getChartTitleStyle, getSvgTooltipStyle } from '../../utilities/Common.styles';\n\nexport const getFunnelChartStyles = (props: IFunnelChartStyleProps): IFunnelChartStyles => {\n const { theme, className, chartWidth, chartHeight } = props;\n return {\n // root: { minHeight: '200px', minWidth: '200px', position: 'relative' },\n root: [\n theme.fonts.medium,\n 'ms-FunnelChart',\n {\n alignItems: 'center',\n width: '100%',\n height: '100%',\n },\n className,\n ],\n chart: {\n display: 'block',\n width: chartWidth,\n height: chartHeight,\n },\n chartTitle: getChartTitleStyle(theme),\n text: [\n theme.fonts.medium,\n {\n pointerEvents: 'none',\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n ],\n svgTooltip: getSvgTooltipStyle(theme),\n subComponentStyles: {\n calloutStyles: {\n root: {\n maxWidth: '238px',\n },\n },\n },\n };\n};\n"]}

package/lib/components/FunnelChart/FunnelChart.types.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
 import { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';
 import { ILegendsProps } from '../Legends/index';
 import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { ITitleStyles } from '../../utilities/Common.styles';
 /**
  * Data point for funnel chart
  * {@docCategory FunnelChart}
@@ -36,6 +37,10 @@ export interface IFunnelChartDataPoint {
  * {@docCategory FunnelChart}
  */
 export interface IFunnelChartProps {
+    /**
+     * Title styles configuration for the chart title
+     */
+    titleStyles?: ITitleStyles;
     /**
      * Data points for the funnel chart
      */
@@ -126,10 +131,18 @@ export interface IFunnelChartStyles {
      * Styles for the chart
      */
     chart?: IStyle;
+    /**
+     * Style for the chart title.
+     */
+    chartTitle?: IStyle;
     /**
      * Styles for text elements
      */
     text?: IStyle;
+    /**
+     * Style for SVG tooltip text
+     */
+    svgTooltip?: IStyle;
     /**
      * Styles for sub-components
      */