npm - @fluentui/react-charting - Versions diffs - 5.23.22 → 5.23.23 - Mend

@fluentui/react-charting 5.23.22 → 5.23.23

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 (41) hide show

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

@@ -11,7 +11,7 @@ var LegendsBase = /** @class */ (function (_super) {
     __extends(LegendsBase, _super);
     function LegendsBase(props) {
         var _a;
-        var _b;
+        var _b, _c, _d;
         var _this = _super.call(this, props) || this;
         /** Boolean variable to check if one or more legends are selected */
         _this._isLegendSelected = false;
@@ -47,11 +47,20 @@ var LegendsBase = /** @class */ (function (_super) {
             return { primary: primary, overflow: overflow };
         };
         /**
-         * This function will get called when there is an ability to
-         * select  multiple legends
-         * @param legend ILegend
+         * Determine whether the component is in "controlled" mode for selections, where the selected legend(s) are
+         * determined entirely by props passed in from the parent component.
          */
-        _this._canSelectMultipleLegends = function (legend) {
+        _this._isInControlledMode = function () {
+            return _this.props.canSelectMultipleLegends
+                ? _this.props.selectedLegends !== undefined
+                : _this.props.selectedLegend !== undefined;
+        };
+        /**
+         * Get the new selected legends based on the legend that was clicked when multi-select is enabled.
+         * @param legend The legend that was clicked
+         * @returns An object with the new selected legend(s) state data.
+         */
+        _this._getNewSelectedLegendsForMultiselect = function (legend) {
             var selectedLegends = __assign({}, _this.state.selectedLegends);
             if (selectedLegends[legend.title]) {
                 // Delete entry for the deselected legend to make
@@ -65,38 +74,27 @@ var LegendsBase = /** @class */ (function (_super) {
                     selectedLegends = {};
                 }
             }
-            _this.setState({ selectedLegends: selectedLegends });
             return selectedLegends;
         };
         /**
-         * This function will get called when there is
-         * ability to select only single legend
-         * @param legend ILegend
+         * Get the new selected legends based on the legend that was clicked when single-select is enabled.
+         * @param legend The legend that was clicked
+         * @returns An object with the new selected legend state data.
          */
-        _this._canSelectOnlySingleLegend = function (legend) {
+        _this._getNewSelectedLegendsForSingleSelect = function (legend) {
             var _a;
-            if (_this.state.selectedLegends[legend.title]) {
-                _this.setState({ selectedLegends: {} });
-                return false;
-            }
-            else {
-                _this.setState({ selectedLegends: (_a = {}, _a[legend.title] = true, _a) });
-                return true;
-            }
+            return _this.state.selectedLegends[legend.title] ? {} : (_a = {}, _a[legend.title] = true, _a);
         };
         _this._onClick = function (legend, event) {
             var _a, _b, _c;
             var _d = _this.props.canSelectMultipleLegends, canSelectMultipleLegends = _d === void 0 ? false : _d;
-            var selectedLegends = [];
-            if (canSelectMultipleLegends) {
-                var nextSelectedLegends = _this._canSelectMultipleLegends(legend);
-                selectedLegends = Object.keys(nextSelectedLegends);
-            }
-            else {
-                var isSelected = _this._canSelectOnlySingleLegend(legend);
-                selectedLegends = isSelected ? [legend.title] : [];
+            var nextSelectedLegends = canSelectMultipleLegends
+                ? _this._getNewSelectedLegendsForMultiselect(legend)
+                : _this._getNewSelectedLegendsForSingleSelect(legend);
+            if (!_this._isInControlledMode()) {
+                _this.setState({ selectedLegends: nextSelectedLegends });
             }
-            (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, selectedLegends, event, legend);
+            (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, Object.keys(nextSelectedLegends), event, legend);
             (_c = legend.action) === null || _c === void 0 ? void 0 : _c.call(legend);
         };
         _this._onRenderCompactCard = function (expandingCard) {
@@ -219,24 +217,45 @@ var LegendsBase = /** @class */ (function (_super) {
                 shape,
                 React.createElement("div", { className: classNames.text }, legend.title)));
         };
-        var defaultSelectedLegends = {};
+        //let defaultSelectedLegends = {};
+        var initialSelectedLegends = (_b = props.selectedLegends) !== null && _b !== void 0 ? _b : props.defaultSelectedLegends;
+        var initialSelectedLegend = (_c = props.selectedLegend) !== null && _c !== void 0 ? _c : props.defaultSelectedLegend;
+        var selectedLegendsState = {};
         if (props.canSelectMultipleLegends) {
-            defaultSelectedLegends =
-                ((_b = props.defaultSelectedLegends) === null || _b === void 0 ? void 0 : _b.reduce(function (combinedDict, key) {
+            selectedLegendsState =
+                ((_d = (initialSelectedLegends !== null && initialSelectedLegends !== void 0 ? initialSelectedLegends : [])) === null || _d === void 0 ? void 0 : _d.reduce(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                function (combineDict, key) {
                     var _a;
-                    return (__assign((_a = {}, _a[key] = true, _a), combinedDict));
+                    return (__assign((_a = {}, _a[key] = true, _a), combineDict));
                 }, {})) || {};
         }
-        else if (props.defaultSelectedLegend) {
-            defaultSelectedLegends = (_a = {}, _a[props.defaultSelectedLegend] = true, _a);
+        else if (initialSelectedLegend) {
+            selectedLegendsState = (_a = {}, _a[initialSelectedLegend] = true, _a);
         }
         _this.state = {
             activeLegend: '',
             isHoverCardVisible: false,
-            selectedLegends: defaultSelectedLegends,
+            selectedLegends: selectedLegendsState,
         };
         return _this;
     }
+    LegendsBase.getDerivedStateFromProps = function (newProps, prevState) {
+        var _a;
+        var selectedLegend = newProps.selectedLegend, selectedLegends = newProps.selectedLegends;
+        if (newProps.canSelectMultipleLegends && selectedLegends !== undefined) {
+            return __assign(__assign({}, prevState), { selectedLegends: selectedLegends.reduce(
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                function (combinedDict, key) {
+                    var _a;
+                    return (__assign((_a = {}, _a[key] = true, _a), combinedDict));
+                }, {}) });
+        }
+        if (!newProps.canSelectMultipleLegends && selectedLegend !== undefined) {
+            return __assign(__assign({}, prevState), { selectedLegends: (_a = {}, _a[selectedLegend] = true, _a) });
+        }
+        return prevState;
+    };
     LegendsBase.prototype.render = function () {
         var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
         this._classNames = getClassNames(styles, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport {\n ILegend,\n ILegendsProps,\n LegendShape,\n ILegendsStyles,\n ILegendStyleProps,\n ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n name?: string;\n title: string;\n action: VoidFunction;\n hoverAction: VoidFunction;\n onMouseOutAction: VoidFunction;\n color: string;\n shape?: LegendShape;\n key: number;\n opacity?: number;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendState {\n activeLegend: string;\n isHoverCardVisible: boolean;\n /** Set of legends selected, both for multiple selection and single selection /\n selectedLegends: { [key: string]: boolean };\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n private _hoverCardRef: HTMLDivElement;\n private _classNames: IProcessedStyleSet<ILegendsStyles>;\n /* Boolean variable to check if one or more legends are selected /\n private _isLegendSelected = false;\n\n public constructor(props: ILegendsProps) {\n super(props);\n let defaultSelectedLegends = {};\n if (props.canSelectMultipleLegends) {\n defaultSelectedLegends =\n props.defaultSelectedLegends?.reduce((combinedDict, key) => ({ [key]: true, ...combinedDict }), {}) \|\| {};\n } else if (props.defaultSelectedLegend) {\n defaultSelectedLegends = { [props.defaultSelectedLegend]: true };\n }\n\n this.state = {\n activeLegend: '',\n isHoverCardVisible: false,\n selectedLegends: defaultSelectedLegends,\n };\n }\n\n public render(): JSX.Element {\n const { theme, className, styles } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n this._isLegendSelected = Object.keys(this.state.selectedLegends).length > 0;\n const dataToRender = this._generateData();\n return (\n <div className={this._classNames.root}>\n {this.props.enabledWrapLines ? (\n this._onRenderData(dataToRender)\n ) : (\n <ResizeGroup\n data={dataToRender}\n onReduceData={this._onReduceData}\n onRenderData={this._onRenderData}\n onGrowData={this._onGrowData}\n />\n )}\n </div>\n );\n }\n\n private _generateData(): ILegendOverflowData {\n const { allowFocusOnLegends = true, shape } = this.props;\n const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n return {\n ...(allowFocusOnLegends && {\n nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n 'title',\n ]),\n 'aria-setsize': this.props.legends.length,\n 'aria-posinset': index + 1,\n }),\n title: legend.title,\n action: legend.action!,\n hoverAction: legend.hoverAction!,\n onMouseOutAction: legend.onMouseOutAction!,\n color: legend.color,\n shape: shape ? shape : legend.shape,\n stripePattern: legend.stripePattern,\n isLineLegendInBarChart: legend.isLineLegendInBarChart,\n opacity: legend.opacity,\n key: index,\n };\n });\n const result: ILegendOverflowData = {\n primary: dataItems,\n overflow: [],\n };\n return result;\n }\n\n private _onRenderData = (data: IOverflowSetItemProps \| ILegendOverflowData): JSX.Element => {\n const { overflowProps, allowFocusOnLegends = true, canSelectMultipleLegends = false } = this.props;\n const rootStyles = {\n root: {\n justifyContent: this.props.centerLegends ? 'center' : 'unset',\n flexWrap: 'wrap',\n },\n };\n return (\n <FocusZone\n {...(allowFocusOnLegends && {\n role: 'listbox',\n 'aria-label': 'Legends',\n 'aria-multiselectable': canSelectMultipleLegends,\n })}\n >\n <OverflowSet\n items={data.primary}\n overflowItems={data.overflow}\n onRenderItem={this._renderButton}\n onRenderOverflowButton={this._renderOverflowItems}\n {...overflowProps}\n styles={{ ...rootStyles, ...overflowProps?.styles }}\n />\n </FocusZone>\n );\n };\n\n private _onReduceData = (currentdata: IOverflowSetItemProps): {} \| void => {\n if (currentdata.primary.length === 0) {\n return;\n }\n const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n const primary = currentdata.primary.slice(0, -1);\n return { primary, overflow };\n };\n\n private _onGrowData = (currentdata: IOverflowSetItemProps): {} \| void => {\n if (currentdata.overflow.length === 0) {\n return;\n }\n const overflow = currentdata.overflow.slice(1);\n const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n return { primary, overflow };\n };\n\n /\n This function will get called when there is an ability to\n * select multiple legends\n * @param legend ILegend\n /\n private _canSelectMultipleLegends = (legend: ILegend): { [key: string]: boolean } => {\n let selectedLegends = { ...this.state.selectedLegends };\n if (selectedLegends[legend.title]) {\n // Delete entry for the deselected legend to make\n // the number of keys equal to the number of selected legends\n delete selectedLegends[legend.title];\n } else {\n selectedLegends[legend.title] = true;\n // Clear set if all legends are selected\n if (Object.keys(selectedLegends).length === this.props.legends.length) {\n selectedLegends = {};\n }\n }\n this.setState({ selectedLegends });\n return selectedLegends;\n };\n\n /\n This function will get called when there is\n * ability to select only single legend\n * @param legend ILegend\n /\n\n private _canSelectOnlySingleLegend = (legend: ILegend): boolean => {\n if (this.state.selectedLegends[legend.title]) {\n this.setState({ selectedLegends: {} });\n return false;\n } else {\n this.setState({ selectedLegends: { [legend.title]: true } });\n return true;\n }\n };\n\n private _onClick = (legend: ILegend, event: React.MouseEvent<HTMLButtonElement>): void => {\n const { canSelectMultipleLegends = false } = this.props;\n let selectedLegends: string[] = [];\n if (canSelectMultipleLegends) {\n const nextSelectedLegends = this._canSelectMultipleLegends(legend);\n selectedLegends = Object.keys(nextSelectedLegends);\n } else {\n const isSelected = this._canSelectOnlySingleLegend(legend);\n selectedLegends = isSelected ? [legend.title] : [];\n }\n this.props.onChange?.(selectedLegends, event, legend);\n legend.action?.();\n };\n\n private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n const { allowFocusOnLegends = true, className, styles, theme, canSelectMultipleLegends = false } = this.props;\n const overflowHoverCardLegends: JSX.Element[] = [];\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n const hoverCardElement = this._renderButton(legend, index, true);\n overflowHoverCardLegends.push(hoverCardElement);\n });\n const hoverCardData = (\n <FocusZone\n {...(allowFocusOnLegends && {\n role: 'listbox',\n 'aria-label': 'Legends',\n 'aria-multiselectable': canSelectMultipleLegends,\n })}\n direction={FocusZoneDirection.vertical}\n handleTabKey={FocusZoneTabbableElements.all}\n isCircularNavigation={true}\n {...this.props.focusZonePropsInHoverCard}\n className={classNames.hoverCardRoot}\n >\n {overflowHoverCardLegends}\n </FocusZone>\n );\n return hoverCardData;\n };\n\n private _renderOverflowItems = (legends: ILegend[]) => {\n const { allowFocusOnLegends = true } = this.props;\n const items: IContextualMenuItem[] = [];\n legends.forEach((legend: ILegend, i: number) => {\n items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n });\n const renderOverflowData: IExpandingCardProps = { renderData: legends };\n const { theme, className, styles, overflowText } = this.props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n const plainCardProps = {\n onRenderPlainCard: this._onRenderCompactCard,\n renderData: renderOverflowData,\n };\n\n const overflowString = overflowText ? overflowText : 'more';\n // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n const onHoverCardHideHandler = () => {\n this.setState({ isHoverCardVisible: false });\n // Unhighlight the focused legend in the hover card\n const activeOverflowItem = find(legends, (legend: ILegend) => legend.title === this.state.activeLegend);\n if (activeOverflowItem) {\n this.setState({ activeLegend: '' });\n if (activeOverflowItem.onMouseOutAction) {\n activeOverflowItem.onMouseOutAction();\n }\n }\n };\n return (\n <HoverCard\n type={HoverCardType.plain}\n plainCardProps={plainCardProps}\n instantOpenOnClick={true}\n // eslint-disable-next-line react/jsx-no-bind\n onCardHide={onHoverCardHideHandler}\n setInitialFocus={true}\n trapFocus={true}\n onCardVisible={this._hoverCardVisible}\n styles={classNames.subComponentStyles.hoverCardStyles}\n cardDismissDelay={300}\n target={this._hoverCardRef}\n >\n {/ \"button\" role is not allowed as a child of parent role \"listbox\" /}\n <div role=\"option\">\n <div\n className={classNames.overflowIndicationTextStyle}\n ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n {...(allowFocusOnLegends && {\n role: 'button',\n 'aria-expanded': this.state.isHoverCardVisible,\n 'aria-label': `${items.length} ${overflowString}`,\n })}\n data-is-focusable={allowFocusOnLegends}\n >\n {items.length} {overflowString}\n </div>\n </div>\n </HoverCard>\n );\n };\n\n private _hoverCardVisible = () => {\n this.setState({ isHoverCardVisible: true });\n };\n\n private _onHoverOverLegend = (legend: ILegend) => {\n if (legend.hoverAction) {\n this.setState({ activeLegend: legend.title });\n legend.hoverAction();\n }\n };\n\n private _onLeave = (legend: ILegend) => {\n if (legend.onMouseOutAction) {\n this.setState({ activeLegend: '' });\n legend.onMouseOutAction();\n }\n };\n\n private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n const { allowFocusOnLegends = true } = this.props;\n const legend: ILegend = {\n title: data.title,\n color: data.color,\n shape: data.shape,\n action: data.action,\n hoverAction: data.hoverAction,\n onMouseOutAction: data.onMouseOutAction,\n stripePattern: data.stripePattern,\n isLineLegendInBarChart: data.isLineLegendInBarChart,\n opacity: data.opacity,\n };\n const color = this._getColor(legend.title, legend.color);\n const { theme, className, styles } = this.props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n colorOnSelectedState: color,\n borderColor: legend.color,\n overflow,\n stripePattern: legend.stripePattern,\n isLineLegendInBarChart: legend.isLineLegendInBarChart,\n opacity: legend.opacity,\n });\n const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n this._onClick(legend, event);\n };\n const onHoverHandler = () => {\n this._onHoverOverLegend(legend);\n };\n const onMouseOut = () => {\n this._onLeave(legend);\n };\n const shape = this._getShape(classNames, legend, color);\n return (\n <button\n {...(allowFocusOnLegends && {\n 'aria-selected': !!this.state.selectedLegends[legend.title],\n role: 'option',\n 'aria-label': `${legend.title}`,\n 'aria-setsize': data['aria-setsize'],\n 'aria-posinset': data['aria-posinset'],\n })}\n {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n key={index}\n className={classNames.legend}\n onClick={onClickHandler}\n onMouseOver={onHoverHandler}\n onMouseOut={onMouseOut}\n onFocus={onHoverHandler}\n onBlur={onMouseOut}\n data-is-focusable={allowFocusOnLegends}\n / eslint-enable react/jsx-no-bind */\n >\n {shape}\n <div className={classNames.text}>{legend.title}</div>\n </button>\n );\n };\n\n private _getShape(\n classNames: IProcessedStyleSet<ILegendsStyles>,\n legend: ILegend,\n color: string,\n ): React.ReactNode \| string {\n const svgParentProps: React.SVGAttributes<SVGElement> = {\n className: classNames.shape,\n };\n const svgChildProps: React.SVGAttributes<SVGElement> = {\n fill: color,\n strokeWidth: 2,\n stroke: legend.color,\n };\n return (\n <Shape\n svgProps={svgParentProps}\n pathProps={svgChildProps}\n shape={legend.shape as LegendShape}\n classNameForNonSvg={classNames.rect}\n />\n );\n }\n\n private _getColor(title: string, color: string): string {\n const { theme } = this.props;\n let legendColor = color;\n // if one or more legends are selected\n if (this._isLegendSelected) {\n // if the given legend (title) is one of the selected legends\n if (this.state.selectedLegends[title]) {\n legendColor = color;\n }\n // if the given legend is unselected\n else {\n legendColor = theme!.semanticColors.buttonBackground;\n }\n }\n // if no legend is selected\n else {\n // if the given legend is hovered\n // or none of the legends is hovered\n if (this.state.activeLegend === title \|\| this.state.activeLegend === '') {\n legendColor = color;\n }\n // if there is a hovered legend but the given legend is not the one\n else {\n legendColor = theme!.semanticColors.buttonBackground;\n }\n }\n return legendColor;\n }\n}\n"]}
1	+ {"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport {\n ILegend,\n ILegendsProps,\n LegendShape,\n ILegendsStyles,\n ILegendStyleProps,\n ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n name?: string;\n title: string;\n action: VoidFunction;\n hoverAction: VoidFunction;\n onMouseOutAction: VoidFunction;\n color: string;\n shape?: LegendShape;\n key: number;\n opacity?: number;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendState {\n activeLegend: string;\n isHoverCardVisible: boolean;\n /** Set of legends selected, both for multiple selection and single selection /\n selectedLegends: { [key: string]: boolean };\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n private _hoverCardRef: HTMLDivElement;\n private _classNames: IProcessedStyleSet<ILegendsStyles>;\n /* Boolean variable to check if one or more legends are selected /\n private _isLegendSelected = false;\n\n public static getDerivedStateFromProps(newProps: ILegendsProps, prevState: ILegendState): ILegendState {\n const { selectedLegend, selectedLegends } = newProps;\n\n if (newProps.canSelectMultipleLegends && selectedLegends !== undefined) {\n return {\n ...prevState,\n selectedLegends: selectedLegends.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (combinedDict: any, key: any) => ({ [key]: true, ...combinedDict }),\n {},\n ),\n };\n }\n\n if (!newProps.canSelectMultipleLegends && selectedLegend !== undefined) {\n return {\n ...prevState,\n selectedLegends: { [selectedLegend]: true },\n };\n }\n\n return prevState;\n }\n\n public constructor(props: ILegendsProps) {\n super(props);\n //let defaultSelectedLegends = {};\n const initialSelectedLegends = props.selectedLegends ?? props.defaultSelectedLegends;\n const initialSelectedLegend = props.selectedLegend ?? props.defaultSelectedLegend;\n let selectedLegendsState = {};\n\n if (props.canSelectMultipleLegends) {\n selectedLegendsState =\n (initialSelectedLegends ?? [])?.reduce(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (combineDict: any, key: any) => ({ [key]: true, ...combineDict }),\n {},\n ) \|\| {};\n } else if (initialSelectedLegend) {\n selectedLegendsState = { [initialSelectedLegend]: true };\n }\n\n this.state = {\n activeLegend: '',\n isHoverCardVisible: false,\n selectedLegends: selectedLegendsState,\n };\n }\n\n public render(): JSX.Element {\n const { theme, className, styles } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n this._isLegendSelected = Object.keys(this.state.selectedLegends).length > 0;\n const dataToRender = this._generateData();\n return (\n <div className={this._classNames.root}>\n {this.props.enabledWrapLines ? (\n this._onRenderData(dataToRender)\n ) : (\n <ResizeGroup\n data={dataToRender}\n onReduceData={this._onReduceData}\n onRenderData={this._onRenderData}\n onGrowData={this._onGrowData}\n />\n )}\n </div>\n );\n }\n\n private _generateData(): ILegendOverflowData {\n const { allowFocusOnLegends = true, shape } = this.props;\n const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n return {\n ...(allowFocusOnLegends && {\n nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n 'title',\n ]),\n 'aria-setsize': this.props.legends.length,\n 'aria-posinset': index + 1,\n }),\n title: legend.title,\n action: legend.action!,\n hoverAction: legend.hoverAction!,\n onMouseOutAction: legend.onMouseOutAction!,\n color: legend.color,\n shape: shape ? shape : legend.shape,\n stripePattern: legend.stripePattern,\n isLineLegendInBarChart: legend.isLineLegendInBarChart,\n opacity: legend.opacity,\n key: index,\n };\n });\n const result: ILegendOverflowData = {\n primary: dataItems,\n overflow: [],\n };\n return result;\n }\n\n private _onRenderData = (data: IOverflowSetItemProps \| ILegendOverflowData): JSX.Element => {\n const { overflowProps, allowFocusOnLegends = true, canSelectMultipleLegends = false } = this.props;\n const rootStyles = {\n root: {\n justifyContent: this.props.centerLegends ? 'center' : 'unset',\n flexWrap: 'wrap',\n },\n };\n return (\n <FocusZone\n {...(allowFocusOnLegends && {\n role: 'listbox',\n 'aria-label': 'Legends',\n 'aria-multiselectable': canSelectMultipleLegends,\n })}\n >\n <OverflowSet\n items={data.primary}\n overflowItems={data.overflow}\n onRenderItem={this._renderButton}\n onRenderOverflowButton={this._renderOverflowItems}\n {...overflowProps}\n styles={{ ...rootStyles, ...overflowProps?.styles }}\n />\n </FocusZone>\n );\n };\n\n private _onReduceData = (currentdata: IOverflowSetItemProps): {} \| void => {\n if (currentdata.primary.length === 0) {\n return;\n }\n const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n const primary = currentdata.primary.slice(0, -1);\n return { primary, overflow };\n };\n\n private _onGrowData = (currentdata: IOverflowSetItemProps): {} \| void => {\n if (currentdata.overflow.length === 0) {\n return;\n }\n const overflow = currentdata.overflow.slice(1);\n const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n return { primary, overflow };\n };\n\n /\n Determine whether the component is in \"controlled\" mode for selections, where the selected legend(s) are\n * determined entirely by props passed in from the parent component.\n /\n private _isInControlledMode = (): boolean => {\n return this.props.canSelectMultipleLegends\n ? this.props.selectedLegends !== undefined\n : this.props.selectedLegend !== undefined;\n };\n\n /\n Get the new selected legends based on the legend that was clicked when multi-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend(s) state data.\n /\n private _getNewSelectedLegendsForMultiselect = (legend: ILegend): { [key: string]: boolean } => {\n let selectedLegends = { ...this.state.selectedLegends };\n if (selectedLegends[legend.title]) {\n // Delete entry for the deselected legend to make\n // the number of keys equal to the number of selected legends\n delete selectedLegends[legend.title];\n } else {\n selectedLegends[legend.title] = true;\n // Clear set if all legends are selected\n if (Object.keys(selectedLegends).length === this.props.legends.length) {\n selectedLegends = {};\n }\n }\n return selectedLegends;\n };\n\n /\n Get the new selected legends based on the legend that was clicked when single-select is enabled.\n * @param legend The legend that was clicked\n * @returns An object with the new selected legend state data.\n /\n\n private _getNewSelectedLegendsForSingleSelect = (legend: ILegend): { [key: string]: boolean } => {\n return this.state.selectedLegends[legend.title] ? {} : { [legend.title]: true };\n };\n\n private _onClick = (legend: ILegend, event: React.MouseEvent<HTMLButtonElement>): void => {\n const { canSelectMultipleLegends = false } = this.props;\n const nextSelectedLegends = canSelectMultipleLegends\n ? this._getNewSelectedLegendsForMultiselect(legend)\n : this._getNewSelectedLegendsForSingleSelect(legend);\n\n if (!this._isInControlledMode()) {\n this.setState({ selectedLegends: nextSelectedLegends });\n }\n this.props.onChange?.(Object.keys(nextSelectedLegends), event, legend);\n legend.action?.();\n };\n\n private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n const { allowFocusOnLegends = true, className, styles, theme, canSelectMultipleLegends = false } = this.props;\n const overflowHoverCardLegends: JSX.Element[] = [];\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n const hoverCardElement = this._renderButton(legend, index, true);\n overflowHoverCardLegends.push(hoverCardElement);\n });\n const hoverCardData = (\n <FocusZone\n {...(allowFocusOnLegends && {\n role: 'listbox',\n 'aria-label': 'Legends',\n 'aria-multiselectable': canSelectMultipleLegends,\n })}\n direction={FocusZoneDirection.vertical}\n handleTabKey={FocusZoneTabbableElements.all}\n isCircularNavigation={true}\n {...this.props.focusZonePropsInHoverCard}\n className={classNames.hoverCardRoot}\n >\n {overflowHoverCardLegends}\n </FocusZone>\n );\n return hoverCardData;\n };\n\n private _renderOverflowItems = (legends: ILegend[]) => {\n const { allowFocusOnLegends = true } = this.props;\n const items: IContextualMenuItem[] = [];\n legends.forEach((legend: ILegend, i: number) => {\n items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n });\n const renderOverflowData: IExpandingCardProps = { renderData: legends };\n const { theme, className, styles, overflowText } = this.props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n });\n const plainCardProps = {\n onRenderPlainCard: this._onRenderCompactCard,\n renderData: renderOverflowData,\n };\n\n const overflowString = overflowText ? overflowText : 'more';\n // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n const onHoverCardHideHandler = () => {\n this.setState({ isHoverCardVisible: false });\n // Unhighlight the focused legend in the hover card\n const activeOverflowItem = find(legends, (legend: ILegend) => legend.title === this.state.activeLegend);\n if (activeOverflowItem) {\n this.setState({ activeLegend: '' });\n if (activeOverflowItem.onMouseOutAction) {\n activeOverflowItem.onMouseOutAction();\n }\n }\n };\n return (\n <HoverCard\n type={HoverCardType.plain}\n plainCardProps={plainCardProps}\n instantOpenOnClick={true}\n // eslint-disable-next-line react/jsx-no-bind\n onCardHide={onHoverCardHideHandler}\n setInitialFocus={true}\n trapFocus={true}\n onCardVisible={this._hoverCardVisible}\n styles={classNames.subComponentStyles.hoverCardStyles}\n cardDismissDelay={300}\n target={this._hoverCardRef}\n >\n {/ \"button\" role is not allowed as a child of parent role \"listbox\" /}\n <div role=\"option\">\n <div\n className={classNames.overflowIndicationTextStyle}\n ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n {...(allowFocusOnLegends && {\n role: 'button',\n 'aria-expanded': this.state.isHoverCardVisible,\n 'aria-label': `${items.length} ${overflowString}`,\n })}\n data-is-focusable={allowFocusOnLegends}\n >\n {items.length} {overflowString}\n </div>\n </div>\n </HoverCard>\n );\n };\n\n private _hoverCardVisible = () => {\n this.setState({ isHoverCardVisible: true });\n };\n\n private _onHoverOverLegend = (legend: ILegend) => {\n if (legend.hoverAction) {\n this.setState({ activeLegend: legend.title });\n legend.hoverAction();\n }\n };\n\n private _onLeave = (legend: ILegend) => {\n if (legend.onMouseOutAction) {\n this.setState({ activeLegend: '' });\n legend.onMouseOutAction();\n }\n };\n\n private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n const { allowFocusOnLegends = true } = this.props;\n const legend: ILegend = {\n title: data.title,\n color: data.color,\n shape: data.shape,\n action: data.action,\n hoverAction: data.hoverAction,\n onMouseOutAction: data.onMouseOutAction,\n stripePattern: data.stripePattern,\n isLineLegendInBarChart: data.isLineLegendInBarChart,\n opacity: data.opacity,\n };\n const color = this._getColor(legend.title, legend.color);\n const { theme, className, styles } = this.props;\n const classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n colorOnSelectedState: color,\n borderColor: legend.color,\n overflow,\n stripePattern: legend.stripePattern,\n isLineLegendInBarChart: legend.isLineLegendInBarChart,\n opacity: legend.opacity,\n });\n const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n this._onClick(legend, event);\n };\n const onHoverHandler = () => {\n this._onHoverOverLegend(legend);\n };\n const onMouseOut = () => {\n this._onLeave(legend);\n };\n const shape = this._getShape(classNames, legend, color);\n return (\n <button\n {...(allowFocusOnLegends && {\n 'aria-selected': !!this.state.selectedLegends[legend.title],\n role: 'option',\n 'aria-label': `${legend.title}`,\n 'aria-setsize': data['aria-setsize'],\n 'aria-posinset': data['aria-posinset'],\n })}\n {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n key={index}\n className={classNames.legend}\n onClick={onClickHandler}\n onMouseOver={onHoverHandler}\n onMouseOut={onMouseOut}\n onFocus={onHoverHandler}\n onBlur={onMouseOut}\n data-is-focusable={allowFocusOnLegends}\n / eslint-enable react/jsx-no-bind */\n >\n {shape}\n <div className={classNames.text}>{legend.title}</div>\n </button>\n );\n };\n\n private _getShape(\n classNames: IProcessedStyleSet<ILegendsStyles>,\n legend: ILegend,\n color: string,\n ): React.ReactNode \| string {\n const svgParentProps: React.SVGAttributes<SVGElement> = {\n className: classNames.shape,\n };\n const svgChildProps: React.SVGAttributes<SVGElement> = {\n fill: color,\n strokeWidth: 2,\n stroke: legend.color,\n };\n return (\n <Shape\n svgProps={svgParentProps}\n pathProps={svgChildProps}\n shape={legend.shape as LegendShape}\n classNameForNonSvg={classNames.rect}\n />\n );\n }\n\n private _getColor(title: string, color: string): string {\n const { theme } = this.props;\n let legendColor = color;\n // if one or more legends are selected\n if (this._isLegendSelected) {\n // if the given legend (title) is one of the selected legends\n if (this.state.selectedLegends[title]) {\n legendColor = color;\n }\n // if the given legend is unselected\n else {\n legendColor = theme!.semanticColors.buttonBackground;\n }\n }\n // if no legend is selected\n else {\n // if the given legend is hovered\n // or none of the legends is hovered\n if (this.state.activeLegend === title \|\| this.state.activeLegend === '') {\n legendColor = color;\n }\n // if there is a hovered legend but the given legend is not the one\n else {\n legendColor = theme!.semanticColors.buttonBackground;\n }\n }\n return legendColor;\n }\n}\n"]}

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

@@ -185,16 +185,51 @@ export interface ILegendsProps {
      */
     onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;
     /**
-     * Keys (title) that will be initially used to set selected items.
-     * This prop is used for multiSelect scenarios.
-     * In other cases, defaultSelectedLegend should be used.
+     * Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when
+     * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegends instead.
+     *
+     * @see selectedLegends for setting the selected legends in controlled mode.
+     * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.
      */
     defaultSelectedLegends?: string[];
     /**
-     * Key that will be initially used to set selected item.
-     * This prop is used for singleSelect scenarios.
+     * Key that will be initially used to set selected item. This prop is used for single-select scenarios when
+     * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.
+     *
+     * Updating this prop does not change the selection after the component has been initialized. For controlled
+     * selections, use selectedLegend instead.
+     *
+     * @see selectedLegend for setting the selected legend in controlled mode.
+     * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.
      */
     defaultSelectedLegend?: string;
+    /**
+     * Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is
+     * true. For single-select, use selectedLegend.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.
+     * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.
+     */
+    selectedLegends?: string[];
+    /**
+     * Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is
+     * false or unspecified. For multi-select, use selectedLegends.
+     *
+     * When this prop is provided, the component is controlled and does not automatically update the selection based on
+     * user interactions; the parent component must update the value passed to this property by handling the onChange
+     * event.
+     *
+     * @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.
+     * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.
+     */
+    selectedLegend?: string;
     /**
      * The shape for the legend.
      */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/*\n @public\n * {@docCategory Legends}\n /\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/\n @public\n * Legends styles\n * {@docCategory Legends}\n /\nexport interface ILegendsStyles {\n /\n Style set for the root of the legend component\n /\n root: IStyle;\n\n /\n Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n /\n legend: IStyle;\n\n /\n Style set for the rectangle that represents a legend\n /\n rect: IStyle;\n\n /\n styles set for the shape that represents a legend\n /\n shape: IStyle;\n\n /\n Style set for the triangle that represents a legend\n /\n triangle: IStyle;\n\n /\n Style for the legend text\n /\n text: IStyle;\n\n /\n Style for the legend text\n /\n hoverChange: IStyle;\n\n /\n Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n /\n overflowIndicationTextStyle: IStyle;\n\n /\n Style for the overflow container\n /\n hoverCardRoot: IStyle;\n\n /\n sub component styles\n /\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/\n @public\n * ILegend interface\n * {@docCategory Legends}\n /\nexport interface ILegend {\n /\n Defines the title of the legend\n /\n title: string;\n\n /\n Defines the function that is executed on clicking this legend\n /\n action?: VoidFunction;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverAction?: VoidFunction;\n\n /\n Defines the function that is executed upon moving the mouse away from the legend\n /\n onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n /\n The color for the legend\n /\n color: string;\n\n /\n The opacity of the legend color\n /\n opacity?: number;\n\n /\n The shape for the legend\n /\n shape?: LegendShape;\n\n /\n Indicated whether or not to apply stripe pattern\n /\n stripePattern?: boolean;\n\n /\n Indicates if the legend belongs to a line in the Bar Chart\n /\n isLineLegendInBarChart?: boolean;\n\n /\n * native button props for the legend button\n /\n nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/\n @public\n * Legend style properties\n * {@docCategory Legends}\n /\nexport interface ILegendStyleProps {\n theme?: ITheme;\n className?: string;\n colorOnSelectedState?: string;\n borderColor?: string;\n opacity?: number;\n overflow?: boolean;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\n/\n @public\n * Legend properties\n * {@docCategory Legends}\n /\nexport interface ILegendsProps {\n /\n Prop that takes list of legends\n /\n legends: ILegend[];\n\n /\n Additional CSS class(es) to apply to the legneds component.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n /\n This prop makes the legends component align itself to the center in the container it is sitting in\n /\n centerLegends?: boolean;\n\n /\n Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n /\n enabledWrapLines?: boolean;\n\n /\n props for the overflow set component\n /\n overflowProps?: Partial<IOverflowSetProps>;\n\n /\n focus zone props in hover card\n /\n focusZonePropsInHoverCard?: IFocusZoneProps;\n\n /\n text for overflow legends string\n /\n overflowText?: string;\n\n /\n prop that decides if legends are focusable\n * @default true\n /\n allowFocusOnLegends?: boolean;\n\n /\n prop that decide if we can select multiple legends or single legend at a time\n * @default false\n /\n canSelectMultipleLegends?: boolean;\n\n /\n Defines the function that is executed upon hiding of hover card\n * make sure to send prop when the prop is canSelectMultipleLegends is set to true\n * and empty the selected state legends\n /\n onLegendHoverCardLeave?: VoidFunction;\n\n /\n Callback issued when the selected option changes.\n /\n onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;\n\n /\n Keys (title) that will be initially used to set selected items.\n * This prop is used for ~~multiSelect~~ scenarios.\n * In ~~other~~ ~~cases~~, defaultSelectedLegend ~~should~~ be used.\n /\n ~~defaultSelectedLegends~~?: string[];\n\n /\n Key that will be ~~initially~~ used to set selected item.\n * ~~This~~ prop is ~~used~~ for ~~singleSelect~~ ~~scenarios~~.\n /\n ~~defaultSelectedLegend~~?: string;\n\n /\n The shape for the legend.\n /\n shape?: LegendShape;\n}\n\n/\n @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' \| 'triangle' \| keyof typeof Points \| keyof typeof CustomPoints;\n"]}
1	+ {"version":3,"file":"Legends.types.js","sourceRoot":"../src/","sources":["components/Legends/Legends.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ITheme, IStyle } from '@fluentui/react/lib/Styling';\nimport { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IHoverCardStyleProps, IHoverCardStyles } from '@fluentui/react/lib/HoverCard';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { CustomPoints, Points } from '../../utilities/utilities';\n\nexport interface ILegendOverflowData {\n primary: ILegend[];\n\n overflow?: ILegend[];\n}\n\n/*\n @public\n * {@docCategory Legends}\n /\nexport interface ILegendSubComponentStyles {\n hoverCardStyles: IStyleFunctionOrObject<IHoverCardStyleProps, IHoverCardStyles>;\n}\n\n/\n @public\n * Legends styles\n * {@docCategory Legends}\n /\nexport interface ILegendsStyles {\n /\n Style set for the root of the legend component\n /\n root: IStyle;\n\n /\n Style set for Legend. This is a wrapping class for text of legend and the rectange box that represents a legend\n /\n legend: IStyle;\n\n /\n Style set for the rectangle that represents a legend\n /\n rect: IStyle;\n\n /\n styles set for the shape that represents a legend\n /\n shape: IStyle;\n\n /\n Style set for the triangle that represents a legend\n /\n triangle: IStyle;\n\n /\n Style for the legend text\n /\n text: IStyle;\n\n /\n Style for the legend text\n /\n hoverChange: IStyle;\n\n /\n Style for the text that indicates the no.of legends that are in hovercard due to lack of space\n /\n overflowIndicationTextStyle: IStyle;\n\n /\n Style for the overflow container\n /\n hoverCardRoot: IStyle;\n\n /\n sub component styles\n /\n subComponentStyles: ILegendSubComponentStyles;\n}\n\n/\n @public\n * ILegend interface\n * {@docCategory Legends}\n /\nexport interface ILegend {\n /\n Defines the title of the legend\n /\n title: string;\n\n /\n Defines the function that is executed on clicking this legend\n /\n action?: VoidFunction;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverAction?: VoidFunction;\n\n /\n Defines the function that is executed upon moving the mouse away from the legend\n /\n onMouseOutAction?: (isLegendFocused?: boolean) => void;\n\n /\n The color for the legend\n /\n color: string;\n\n /\n The opacity of the legend color\n /\n opacity?: number;\n\n /\n The shape for the legend\n /\n shape?: LegendShape;\n\n /\n Indicated whether or not to apply stripe pattern\n /\n stripePattern?: boolean;\n\n /\n Indicates if the legend belongs to a line in the Bar Chart\n /\n isLineLegendInBarChart?: boolean;\n\n /\n * native button props for the legend button\n /\n nativeButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;\n}\n\n/\n @public\n * Legend style properties\n * {@docCategory Legends}\n /\nexport interface ILegendStyleProps {\n theme?: ITheme;\n className?: string;\n colorOnSelectedState?: string;\n borderColor?: string;\n opacity?: number;\n overflow?: boolean;\n stripePattern?: boolean;\n isLineLegendInBarChart?: boolean;\n}\n\n/\n @public\n * Legend properties\n * {@docCategory Legends}\n /\nexport interface ILegendsProps {\n /\n Prop that takes list of legends\n /\n legends: ILegend[];\n\n /\n Additional CSS class(es) to apply to the legneds component.\n /\n className?: string;\n\n /\n Theme (provided through customization.)\n /\n theme?: ITheme;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<ILegendStyleProps, ILegendsStyles>;\n\n /\n This prop makes the legends component align itself to the center in the container it is sitting in\n /\n centerLegends?: boolean;\n\n /\n Enable the legends to wrap lines if there is not enough space to show all legends on a single line\n /\n enabledWrapLines?: boolean;\n\n /\n props for the overflow set component\n /\n overflowProps?: Partial<IOverflowSetProps>;\n\n /\n focus zone props in hover card\n /\n focusZonePropsInHoverCard?: IFocusZoneProps;\n\n /\n text for overflow legends string\n /\n overflowText?: string;\n\n /\n prop that decides if legends are focusable\n * @default true\n /\n allowFocusOnLegends?: boolean;\n\n /\n prop that decide if we can select multiple legends or single legend at a time\n * @default false\n /\n canSelectMultipleLegends?: boolean;\n\n /\n Defines the function that is executed upon hiding of hover card\n * make sure to send prop when the prop is canSelectMultipleLegends is set to true\n * and empty the selected state legends\n /\n onLegendHoverCardLeave?: VoidFunction;\n\n /\n Callback issued when the selected option changes.\n /\n onChange?: (selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => void;\n\n /\n Keys (title) that will be initially used to set selected items. This prop is used for multi-select scenarios when\n * canSelectMultipleLegends is true; for single-select, use defaultSelectedLegend.\n \n Updating this prop does not change the selection after the component has been initialized. For controlled\n * selections, use selectedLegends instead.\n \n @see selectedLegends for setting the selected legends in controlled mode.\n * @see defaultSelectedLegend for setting the initially selected legend when canSelectMultipleLegends is false.\n /\n defaultSelectedLegends?: string[];\n\n /\n Key that will be initially used to set selected item. This prop is used for single-select scenarios when\n * canSelectMultipleLegends is false or unspecified; for multi-select, use defaultSelectedLegends.\n \n Updating this prop does not change the selection after the component has been initialized. For controlled\n * selections, use selectedLegend instead.\n \n @see selectedLegend for setting the selected legend in controlled mode.\n * @see defaultSelectedLegends for setting the initially selected legends when canSelectMultipleLegends is true.\n /\n defaultSelectedLegend?: string;\n\n /\n Keys (title) that will be used to set selected items in multi-select scenarios when canSelectMultipleLegends is\n * true. For single-select, use selectedLegend.\n \n When this prop is provided, the component is controlled and does not automatically update the selection based on\n * user interactions; the parent component must update the value passed to this property by handling the onChange\n * event.\n \n @see defaultSelectedLegends for setting the initially-selected legends in uncontrolled mode.\n * @see selectedLegends for setting the selected legends when `canSelectMultipleLegends` is `true`.\n /\n selectedLegends?: string[];\n\n /\n Key (title) that will be used to set the selected item in single-select scenarios when canSelectMultipleLegends is\n * false or unspecified. For multi-select, use selectedLegends.\n \n When this prop is provided, the component is controlled and does not automatically update the selection based on\n * user interactions; the parent component must update the value passed to this property by handling the onChange\n * event.\n \n @see defaultSelectedLegend for setting the initially-selected legend in uncontrolled mode.\n * @see selectedLegend for setting the selected legend when `canSelectMultipleLegends` is `false`.\n /\n selectedLegend?: string;\n\n /\n The shape for the legend.\n /\n shape?: LegendShape;\n}\n\n/\n @public\n * The shape for the legend\n * default: show the rect legend\n * triangle: show the triangle legend\n * {@docCategory Legends}\n */\nexport type LegendShape = 'default' \| 'triangle' \| keyof typeof Points \| keyof typeof CustomPoints;\n"]}

package/lib-amd/components/DeclarativeChart/DeclarativeChart.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import * as React from 'react';
+export declare const UseIsDarkTheme: () => boolean;
 export interface Schema {
     /**
      * Plotly schema represented as JSON object

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js CHANGED Viewed

@@ -1,7 +1,12 @@
-define(["require", "exports", "tslib", "react", "../DonutChart/index", "../VerticalStackedBarChart/index", "./PlotlySchemaAdapter", "../LineChart/index", "../HorizontalBarChartWithAxis/index", "../AreaChart/index", "../HeatMapChart/index", "../SankeyChart/SankeyChart", "../GaugeChart/index", "../GroupedVerticalBarChart/index", "../VerticalBarChart/index"], function (require, exports, tslib_1, React, index_1, index_2, PlotlySchemaAdapter_1, index_3, index_4, index_5, index_6, SankeyChart_1, index_7, index_8, index_9) {
+define(["require", "exports", "tslib", "react", "../DonutChart/index", "../VerticalStackedBarChart/index", "./PlotlySchemaAdapter", "../LineChart/index", "../HorizontalBarChartWithAxis/index", "../AreaChart/index", "../HeatMapChart/index", "../SankeyChart/SankeyChart", "../GaugeChart/index", "../GroupedVerticalBarChart/index", "../VerticalBarChart/index", "@fluentui/react"], function (require, exports, tslib_1, React, index_1, index_2, PlotlySchemaAdapter_1, index_3, index_4, index_5, index_6, SankeyChart_1, index_7, index_8, index_9, react_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.DeclarativeChart = void 0;
+    exports.DeclarativeChart = exports.UseIsDarkTheme = void 0;
+    var UseIsDarkTheme = function () {
+        var theme = (0, react_1.useTheme)();
+        return theme.isInverted;
+    };
+    exports.UseIsDarkTheme = UseIsDarkTheme;
     var useColorMapping = function () {
         var colorMap = React.useRef(new Map());
         return colorMap;
@@ -17,40 +22,41 @@ define(["require", "exports", "tslib", "react", "../DonutChart/index", "../Verti
         var isXDate = (0, PlotlySchemaAdapter_1.isDateArray)(xValues);
         var isXNumber = (0, PlotlySchemaAdapter_1.isNumberArray)(xValues);
         var colorMap = useColorMapping();
+        var isDarkTheme = (0, exports.UseIsDarkTheme)();
         switch (plotlySchema.data[0].type) {
             case 'pie':
-                return React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap)));
+                return React.createElement(index_1.DonutChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToDonutProps)(plotlySchema, colorMap, isDarkTheme)));
             case 'bar':
                 var orientation_1 = plotlySchema.data[0].orientation;
                 if (orientation_1 === 'h') {
-                    return (React.createElement(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlySchema, colorMap))));
+                    return (React.createElement(index_4.HorizontalBarChartWithAxis, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHorizontalBarWithAxisProps)(plotlySchema, colorMap, isDarkTheme))));
                 }
                 else {
                     if (['group', 'overlay'].includes((_a = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.layout) === null || _a === void 0 ? void 0 : _a.barmode)) {
-                        return React.createElement(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap)));
+                        return React.createElement(index_8.GroupedVerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGVBCProps)(plotlySchema, colorMap, isDarkTheme)));
                     }
-                    return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap)));
+                    return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme)));
                 }
             case 'scatter':
                 var isAreaChart = plotlySchema.data.some(function (series) { return series.fill === 'tonexty'; });
                 if (isXDate || isXNumber) {
                     if (isAreaChart) {
-                        return React.createElement(index_5.AreaChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, true, colorMap)));
+                        return React.createElement(index_5.AreaChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, true, colorMap, isDarkTheme)));
                     }
-                    return React.createElement(index_3.LineChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, false, colorMap)));
+                    return React.createElement(index_3.LineChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToScatterChartProps)(plotlySchema, false, colorMap, isDarkTheme)));
                 }
-                return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap)));
+                return React.createElement(index_2.VerticalStackedBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVSBCProps)(plotlySchema, colorMap, isDarkTheme)));
             case 'heatmap':
                 return React.createElement(index_6.HeatMapChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToHeatmapProps)(plotlySchema)));
             case 'sankey':
-                return React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToSankeyProps)(plotlySchema, colorMap)));
+                return React.createElement(SankeyChart_1.SankeyChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToSankeyProps)(plotlySchema, colorMap, isDarkTheme)));
             case 'indicator':
                 if ((_d = (_c = (_b = plotlySchema === null || plotlySchema === void 0 ? void 0 : plotlySchema.data) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.mode) === null || _d === void 0 ? void 0 : _d.includes('gauge')) {
-                    return React.createElement(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGaugeProps)(plotlySchema, colorMap)));
+                    return React.createElement(index_7.GaugeChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToGaugeProps)(plotlySchema, colorMap, isDarkTheme)));
                 }
                 return React.createElement("div", null, "Unsupported Schema");
             case 'histogram':
-                return React.createElement(index_9.VerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVBCProps)(plotlySchema, colorMap)));
+                return React.createElement(index_9.VerticalBarChart, tslib_1.__assign({}, (0, PlotlySchemaAdapter_1.transformPlotlyJsonToVBCProps)(plotlySchema, colorMap, isDarkTheme)));
             default:
                 return React.createElement("div", null, "Unsupported Schema");
         }

package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":";;;;~~IA4DA~~,IAAM,eAAe,GAAG;QACtB,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,IAAI,GAAG,EAAkB,CAAC,CAAC;QACzD,OAAO,QAAQ,CAAC;IAClB,CAAC,CAAC;IAEF;;;OAGG;IACU,QAAA,gBAAgB,GAAmD,KAAK,CAAC,UAAU,CAG9F,UAAC,KAAK,EAAE,YAAY;;QACZ,IAAA,YAAY,GAAK,KAAK,CAAC,WAAW,aAAtB,CAAuB;QAC3C,IAAM,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACvC,IAAM,OAAO,GAAG,IAAA,iCAAW,EAAC,OAAO,CAAC,CAAC;QACrC,IAAM,SAAS,GAAG,IAAA,mCAAa,EAAC,OAAO,CAAC,CAAC;QACzC,IAAM,QAAQ,GAAG,eAAe,EAAE,CAAC;~~QAEnC~~,QAAQ,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE;YACjC,KAAK,KAAK;gBACR,OAAO,oBAAC,kBAAU,uBAAK,IAAA,qDAA+B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~YACrF~~,KAAK,KAAK;gBACR,IAAM,aAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC;gBACrD,IAAI,aAAW,KAAK,GAAG,EAAE;oBACvB,OAAO,CACL,oBAAC,kCAA0B,~~uBAAK~~,IAAA,qEAA+C,EAAC,YAAY,EAAE,QAAQ,CAAC,~~EAAI~~,~~CAC5G~~,CAAC;iBACH;qBAAM;oBACL,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,0CAAE,OAAO,CAAC,EAAE;wBAChE,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~qBAChG~~;oBACD,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~iBAChG~~;YACH,KAAK,SAAS;gBACZ,IAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,UAAC,MAAW,IAAK,OAAA,MAAM,CAAC,IAAI,KAAK,SAAS,EAAzB,CAAyB,CAAC,CAAC;gBACvF,IAAI,OAAO,IAAI,SAAS,EAAE;oBACxB,IAAI,WAAW,EAAE;wBACf,OAAO,oBAAC,iBAAS,uBAAK,IAAA,4DAAsC,EAAC,YAAY,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAI,CAAC;~~qBAChG~~;oBACD,OAAO,oBAAC,iBAAS,uBAAK,IAAA,4DAAsC,EAAC,YAAY,EAAE,KAAK,EAAE,QAAQ,CAAC,EAAI,CAAC;~~iBACjG~~;gBACD,OAAO,oBAAC,+BAAuB,uBAAK,IAAA,oDAA8B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~YACjG~~,KAAK,SAAS;gBACZ,OAAO,oBAAC,oBAAY,uBAAK,IAAA,uDAAiC,EAAC,YAAY,CAAC,EAAI,CAAC;YAC/E,KAAK,QAAQ;gBACX,OAAO,oBAAC,yBAAW,uBAAK,IAAA,sDAAgC,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~YACvF~~,KAAK,WAAW;gBACd,IAAI,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAG,CAAC,CAAC,0CAAE,IAAI,0CAAE,QAAQ,CAAC,OAAO,CAAC,EAAE;oBACpD,OAAO,oBAAC,kBAAU,uBAAK,IAAA,qDAA+B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~iBACpF~~;gBACD,OAAO,sDAA6B,CAAC;YACvC,KAAK,WAAW;gBACd,OAAO,oBAAC,wBAAgB,uBAAK,IAAA,mDAA6B,EAAC,YAAY,EAAE,QAAQ,CAAC,EAAI,CAAC;~~YACzF~~;gBACE,OAAO,sDAA6B,CAAC;SACxC;IACH,CAAC,CAAC,CAAC;IACH,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport as React from 'react';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n isDateArray,\n isNumberArray,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\n\nexport interface Schema {\n /*\n Plotly schema represented as JSON object\n /\n plotlySchema: any;\n\n /\n The legends selected by the user to persist in the chart\n /\n selectedLegends?: string[];\n\n /\n Dictionary for localizing the accessibility labels\n /\n accesibilityLabels?: { [key: string]: string };\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = props.chartSchema;\n const xValues = plotlySchema.data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const colorMap = useColorMapping();\n\n switch (plotlySchema.data[0].type) {\n case 'pie':\n return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap)} />;\n case 'bar':\n const orientation = plotlySchema.data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap)} />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return <GroupedVerticalBarChart {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap)} />;\n }\n return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)} />;\n }\n case 'scatter':\n const isAreaChart = plotlySchema.data.some((series: any) => series.fill === 'tonexty');\n if (isXDate \|\| isXNumber) {\n if (isAreaChart) {\n return <AreaChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, true, colorMap)} />;\n }\n return <LineChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, false, colorMap)} />;\n }\n return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap)} />;\n case 'heatmap':\n return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;\n case 'sankey':\n return <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap)} />;\n case 'indicator':\n if (plotlySchema?.data?.[0]?.mode?.includes('gauge')) {\n return <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap)} />;\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return <VerticalBarChart {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap)} />;\n default:\n return <div>Unsupported Schema</div>;\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}
1	+ {"version":3,"file":"DeclarativeChart.js","sourceRoot":"../src/","sources":["components/DeclarativeChart/DeclarativeChart.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/naming-convention /\n/ eslint-disable @typescript-eslint/no-explicit-any /\nimport as React from 'react';\nimport { DonutChart } from '../DonutChart/index';\nimport { VerticalStackedBarChart } from '../VerticalStackedBarChart/index';\nimport {\n transformPlotlyJsonToDonutProps,\n transformPlotlyJsonToVSBCProps,\n transformPlotlyJsonToScatterChartProps,\n transformPlotlyJsonToHorizontalBarWithAxisProps,\n isDateArray,\n isNumberArray,\n transformPlotlyJsonToHeatmapProps,\n transformPlotlyJsonToSankeyProps,\n transformPlotlyJsonToGaugeProps,\n transformPlotlyJsonToGVBCProps,\n transformPlotlyJsonToVBCProps,\n} from './PlotlySchemaAdapter';\nimport { LineChart } from '../LineChart/index';\nimport { HorizontalBarChartWithAxis } from '../HorizontalBarChartWithAxis/index';\nimport { AreaChart } from '../AreaChart/index';\nimport { HeatMapChart } from '../HeatMapChart/index';\nimport { SankeyChart } from '../SankeyChart/SankeyChart';\nimport { GaugeChart } from '../GaugeChart/index';\nimport { GroupedVerticalBarChart } from '../GroupedVerticalBarChart/index';\nimport { VerticalBarChart } from '../VerticalBarChart/index';\n\nimport { useTheme } from '@fluentui/react';\n\nexport const UseIsDarkTheme = (): boolean => {\n const theme = useTheme();\n return theme.isInverted;\n};\n\nexport interface Schema {\n /*\n Plotly schema represented as JSON object\n /\n plotlySchema: any;\n\n /\n The legends selected by the user to persist in the chart\n /\n selectedLegends?: string[];\n\n /\n Dictionary for localizing the accessibility labels\n /\n accesibilityLabels?: { [key: string]: string };\n}\n\n/\n DeclarativeChart props.\n * {@docCategory DeclarativeChart}\n /\nexport interface DeclarativeChartProps extends React.RefAttributes<HTMLDivElement> {\n /\n The schema representing the chart data, layout and configuration\n /\n chartSchema: Schema;\n\n /\n Callback when an event occurs\n /\n onSchemaChange?: (eventData: Schema) => void;\n}\n\nconst useColorMapping = () => {\n const colorMap = React.useRef(new Map<string, string>());\n return colorMap;\n};\n\n/\n DeclarativeChart component.\n * {@docCategory DeclarativeChart}\n */\nexport const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> = React.forwardRef<\n HTMLDivElement,\n DeclarativeChartProps\n>((props, forwardedRef) => {\n const { plotlySchema } = props.chartSchema;\n const xValues = plotlySchema.data[0].x;\n const isXDate = isDateArray(xValues);\n const isXNumber = isNumberArray(xValues);\n const colorMap = useColorMapping();\n const isDarkTheme = UseIsDarkTheme();\n\n switch (plotlySchema.data[0].type) {\n case 'pie':\n return <DonutChart {...transformPlotlyJsonToDonutProps(plotlySchema, colorMap, isDarkTheme)} />;\n case 'bar':\n const orientation = plotlySchema.data[0].orientation;\n if (orientation === 'h') {\n return (\n <HorizontalBarChartWithAxis\n {...transformPlotlyJsonToHorizontalBarWithAxisProps(plotlySchema, colorMap, isDarkTheme)}\n />\n );\n } else {\n if (['group', 'overlay'].includes(plotlySchema?.layout?.barmode)) {\n return <GroupedVerticalBarChart {...transformPlotlyJsonToGVBCProps(plotlySchema, colorMap, isDarkTheme)} />;\n }\n return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)} />;\n }\n case 'scatter':\n const isAreaChart = plotlySchema.data.some((series: any) => series.fill === 'tonexty');\n if (isXDate \|\| isXNumber) {\n if (isAreaChart) {\n return <AreaChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, true, colorMap, isDarkTheme)} />;\n }\n return <LineChart {...transformPlotlyJsonToScatterChartProps(plotlySchema, false, colorMap, isDarkTheme)} />;\n }\n return <VerticalStackedBarChart {...transformPlotlyJsonToVSBCProps(plotlySchema, colorMap, isDarkTheme)} />;\n case 'heatmap':\n return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;\n case 'sankey':\n return <SankeyChart {...transformPlotlyJsonToSankeyProps(plotlySchema, colorMap, isDarkTheme)} />;\n case 'indicator':\n if (plotlySchema?.data?.[0]?.mode?.includes('gauge')) {\n return <GaugeChart {...transformPlotlyJsonToGaugeProps(plotlySchema, colorMap, isDarkTheme)} />;\n }\n return <div>Unsupported Schema</div>;\n case 'histogram':\n return <VerticalBarChart {...transformPlotlyJsonToVBCProps(plotlySchema, colorMap, isDarkTheme)} />;\n default:\n return <div>Unsupported Schema</div>;\n }\n});\nDeclarativeChart.displayName = 'DeclarativeChart';\n"]}

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts CHANGED Viewed

@@ -11,16 +11,16 @@ import { IGroupedVerticalBarChartProps } from '../GroupedVerticalBarChart/index'
 import { IVerticalBarChartProps } from '../VerticalBarChart/index';
 export declare const isDateArray: (array: any[]) => boolean;
 export declare const isNumberArray: (array: any[]) => boolean;
-export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>) => string;
-export declare const transformPlotlyJsonToDonutProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IDonutChartProps;
-export declare const transformPlotlyJsonToVSBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IVerticalStackedBarChartProps;
-export declare const transformPlotlyJsonToGVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IGroupedVerticalBarChartProps;
-export declare const transformPlotlyJsonToVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IVerticalBarChartProps;
-export declare const transformPlotlyJsonToScatterChartProps: (jsonObj: any, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>) => ILineChartProps | IAreaChartProps;
-export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IHorizontalBarChartWithAxisProps;
+export declare const getColor: (legendLabel: string, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const transformPlotlyJsonToDonutProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IDonutChartProps;
+export declare const transformPlotlyJsonToVSBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IVerticalStackedBarChartProps;
+export declare const transformPlotlyJsonToGVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;
+export declare const transformPlotlyJsonToVBCProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IVerticalBarChartProps;
+export declare const transformPlotlyJsonToScatterChartProps: (jsonObj: any, isAreaChart: boolean, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ILineChartProps | IAreaChartProps;
+export declare const transformPlotlyJsonToHorizontalBarWithAxisProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IHorizontalBarChartWithAxisProps;
 export declare const transformPlotlyJsonToHeatmapProps: (jsonObj: any) => IHeatMapChartProps;
-export declare const transformPlotlyJsonToSankeyProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => ISankeyChartProps;
-export declare const transformPlotlyJsonToGaugeProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>) => IGaugeChartProps;
+export declare const transformPlotlyJsonToSankeyProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => ISankeyChartProps;
+export declare const transformPlotlyJsonToGaugeProps: (jsonObj: any, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => IGaugeChartProps;
 /**
  * Interate iteratively through the trace object and find all the array attributes.
  * 1 trace record = 1 series of data