@fluentui/react-charting 5.12.24 → 5.12.27

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.js

@@ -0,0 +1,296 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiStackedBarChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var index_1 = require("../Legends/index");
+var Callout_1 = require("@fluentui/react/lib-commonjs/Callout");
+var react_focus_1 = require("@fluentui/react-focus");
+var index_2 = require("../../utilities/index");
+var getClassNames = Utilities_1.classNamesFunction();
+var MultiStackedBarChartBase = /** @class */ (function (_super) {
+    tslib_1.__extends(MultiStackedBarChartBase, _super);
+    function MultiStackedBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._adjustProps = function () {
+            var _a = _this.props, theme = _a.theme, className = _a.className, styles = _a.styles, width = _a.width, barHeight = _a.barHeight;
+            _this._classNames = getClassNames(styles, {
+                legendColor: _this.state.color,
+                theme: theme,
+                width: width,
+                className: className,
+                barHeight: barHeight,
+            });
+        };
+        _this._getLegendData = function (data, hideRatio, palette) {
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            var actions = [];
+            data.forEach(function (singleChartData, index) {
+                var validChartData = singleChartData.chartData.filter(function (_) { return !_.placeHolder; });
+                if (validChartData.length < 3) {
+                    var hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];
+                    if (hideNumber) {
+                        validChartData.forEach(function (point) {
+                            var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                            var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                            if (checkSimilarLegends.length > 0) {
+                                return;
+                            }
+                            var legend = {
+                                title: point.legend,
+                                color: color,
+                                action: function () {
+                                    _this._onClick(point.legend);
+                                },
+                                hoverAction: function () {
+                                    _this._onHover(point.legend);
+                                },
+                                onMouseOutAction: function (isLegendSelected) {
+                                    _this._onLeave(isLegendSelected);
+                                },
+                            };
+                            actions.push(legend);
+                        });
+                    }
+                }
+                else {
+                    validChartData.forEach(function (point) {
+                        var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                        var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                        if (checkSimilarLegends.length > 0) {
+                            return;
+                        }
+                        var legend = {
+                            title: point.legend,
+                            color: color,
+                            action: function () {
+                                _this._onClick(point.legend);
+                            },
+                            hoverAction: function () {
+                                _this._onHover(point.legend);
+                            },
+                            onMouseOutAction: function (isLegendSelected) {
+                                _this._onLeave(isLegendSelected);
+                            },
+                        };
+                        actions.push(legend);
+                    });
+                }
+            });
+            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+        };
+        _this._handleChartMouseLeave = function () {
+            _this._calloutAnchorPoint = null;
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        _this._closeCallout = function () {
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        _this.state = {
+            isCalloutVisible: false,
+            refArray: [],
+            selectedLegendTitle: '',
+            refSelected: null,
+            dataForHoverCard: 0,
+            color: '',
+            isLegendHovered: false,
+            isLegendSelected: false,
+            xCalloutValue: '',
+            yCalloutValue: '',
+        };
+        _this._onLeave = _this._onLeave.bind(_this);
+        _this._onBarLeave = _this._onBarLeave.bind(_this);
+        _this._calloutId = Utilities_1.getId('callout');
+        return _this;
+    }
+    MultiStackedBarChartBase.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, data = _a.data, theme = _a.theme, culture = _a.culture;
+        this._adjustProps();
+        var palette = theme.palette;
+        var legends = this._getLegendData(data, this.props.hideRatio, palette);
+        var isCalloutVisible = this.state.isCalloutVisible;
+        this._classNames = getClassNames(this.props.styles, {
+            legendColor: this.state.color,
+            theme: theme,
+        });
+        var legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle;
+        var calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;
+        var bars = data.map(function (singleChartData, index) {
+            var singleChartBars = _this._createBarsAndLegends(singleChartData, _this.props.barHeight, palette, _this.props.hideRatio[index], _this.props.hideDenominator[index], _this.props.href);
+            return React.createElement("div", { key: index }, singleChartBars);
+        });
+        return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
+            bars,
+            !this.props.hideLegend && React.createElement("div", { className: this._classNames.legendContainer }, legends),
+            React.createElement(Callout_1.Callout, tslib_1.__assign({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && isCalloutVisible), directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, index_2.getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)),
+                React.createElement(React.Fragment, null, this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_2.ChartHoverCard, { Legend: legendName, YValue: calloutYVal, color: this.state.color, culture: culture }))))));
+    };
+    MultiStackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, hideRatio, hideDenominator, href) {
+        var _this = this;
+        var culture = this.props.culture;
+        var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+        // calculating starting point of each bar and it's range
+        var startingPoint = [];
+        var total = data.chartData.reduce(function (acc, point) { return acc + (point.data ? point.data : 0); }, 0);
+        var prevPosition = 0;
+        var value = 0;
+        var bars = data.chartData.map(function (point, index) {
+            var color = point.color
+                ? point.color
+                : point.placeHolder
+                    ? palette.neutralTertiaryAlt
+                    : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+            var pointData = point.data ? point.data : 0;
+            if (index > 0) {
+                prevPosition += value;
+            }
+            value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+            startingPoint.push(prevPosition);
+            var styles = _this.props.styles;
+            var shouldHighlight = true;
+            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
+                shouldHighlight = _this.state.selectedLegendTitle === point.legend;
+            }
+            _this._classNames = getClassNames(styles, {
+                theme: _this.props.theme,
+                shouldHighlight: shouldHighlight,
+                href: href,
+            });
+            if (value < 1) {
+                return React.createElement(React.Fragment, { key: index }, " ");
+            }
+            return (React.createElement("g", { key: index, className: point.placeHolder ? _this._classNames.placeHolderOnHover : _this._classNames.opacityChangeOnHover, ref: function (e) {
+                    _this._refCallback(e, point.legend);
+                }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-labelledby": _this._calloutId, role: "img", "aria-label": "Multi stacked bar chart", onMouseOver: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: point.placeHolder ? undefined : _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },
+                React.createElement("rect", { key: index, x: startingPoint[index] + '%', y: 0, width: value + '%', height: barHeight, fill: color })));
+        });
+        if (data.chartData.length === 0) {
+            bars.push(React.createElement("g", { key: 0, className: this._classNames.noData, onClick: this._redirectToUrl.bind(this, href) },
+                React.createElement("rect", { key: 0, x: '0%', y: 0, width: '100%', height: barHeight, fill: palette.neutralTertiaryAlt })));
+        }
+        if (total === 0) {
+            bars.push(React.createElement("g", { key: 'empty', className: this._classNames.noData, onClick: this._redirectToUrl.bind(this, href) },
+                React.createElement("rect", { key: 0, x: '0%', y: 0, width: '100%', height: barHeight, fill: palette.neutralTertiaryAlt })));
+        }
+        var hideNumber = hideRatio === undefined ? false : hideRatio;
+        var showRatio = !hideNumber && data.chartData.length === 2;
+        var showNumber = !hideNumber && data.chartData.length === 1;
+        var getChartData = function () { return index_2.convertToLocaleString(data.chartData[0].data ? data.chartData[0].data : 0, culture); };
+        return (React.createElement("div", { className: this._classNames.singleChartRoot },
+            React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                React.createElement("div", { className: this._classNames.chartTitle },
+                    data.chartTitle && (React.createElement("div", tslib_1.__assign({}, index_2.getAccessibleDataObject(data.chartTitleAccessibilityData)),
+                        React.createElement("strong", null, data.chartTitle))),
+                    showRatio && (React.createElement("div", tslib_1.__assign({}, index_2.getAccessibleDataObject(data.chartDataAccessibilityData)),
+                        React.createElement("strong", null, getChartData()),
+                        !hideDenominator && React.createElement("span", null,
+                            "/",
+                            index_2.convertToLocaleString(total, culture)))),
+                    showNumber && (React.createElement("div", tslib_1.__assign({}, index_2.getAccessibleDataObject(data.chartDataAccessibilityData)),
+                        React.createElement("strong", null, getChartData()))))),
+            React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                React.createElement("div", null,
+                    React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle }, bars)))));
+    };
+    MultiStackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
+        var _this = this;
+        if (this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) {
+            this.state.refArray.forEach(function (obj) {
+                if (obj.legendText === point.legend) {
+                    _this.setState({
+                        refSelected: obj.refElement,
+                        isCalloutVisible: true,
+                        selectedLegendTitle: point.legend,
+                        dataForHoverCard: pointData,
+                        color: color,
+                        xCalloutValue: point.xAxisCalloutData,
+                        yCalloutValue: point.yAxisCalloutData,
+                        dataPointCalloutProps: point,
+                        callOutAccessibilityData: point.callOutAccessibilityData,
+                    });
+                }
+            });
+        }
+    };
+    MultiStackedBarChartBase.prototype._refCallback = function (element, legendTitle) {
+        this.state.refArray.push({ legendText: legendTitle, refElement: element });
+    };
+    MultiStackedBarChartBase.prototype._onHover = function (customMessage) {
+        if (this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: true,
+                selectedLegendTitle: customMessage,
+            });
+        }
+    };
+    MultiStackedBarChartBase.prototype._onClick = function (customMessage) {
+        if (this.state.isLegendSelected) {
+            if (this.state.selectedLegendTitle === customMessage) {
+                this.setState({
+                    isLegendSelected: false,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        }
+        else {
+            this.setState({
+                isLegendSelected: true,
+                selectedLegendTitle: customMessage,
+            });
+        }
+    };
+    MultiStackedBarChartBase.prototype._onLeave = function (isLegendFocused) {
+        if (!!isLegendFocused || this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: false,
+                selectedLegendTitle: '',
+                isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+            });
+        }
+    };
+    MultiStackedBarChartBase.prototype._onBarHover = function (pointData, color, point, mouseEvent) {
+        mouseEvent.persist();
+        if ((this.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
+            this._calloutAnchorPoint !== point) {
+            this._calloutAnchorPoint = point;
+            this.setState({
+                refSelected: mouseEvent,
+                isCalloutVisible: true,
+                selectedLegendTitle: point.legend,
+                dataForHoverCard: pointData,
+                color: color,
+                xCalloutValue: point.xAxisCalloutData,
+                yCalloutValue: point.yAxisCalloutData,
+                dataPointCalloutProps: point,
+                callOutAccessibilityData: point.callOutAccessibilityData,
+            });
+        }
+    };
+    MultiStackedBarChartBase.prototype._onBarLeave = function () {
+        /**/
+    };
+    MultiStackedBarChartBase.prototype._redirectToUrl = function (href) {
+        href ? (window.location.href = href) : '';
+    };
+    MultiStackedBarChartBase.defaultProps = {
+        barHeight: 16,
+        hideRatio: [],
+        hideDenominator: [],
+    };
+    return MultiStackedBarChartBase;
+}(React.Component));
+exports.MultiStackedBarChartBase = MultiStackedBarChartBase;
+//# sourceMappingURL=MultiStackedBarChart.base.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { ILegend, Legends } from '../Legends/index';\nimport {\n  IAccessibilityProps,\n  IChartDataPoint,\n  IChartProps,\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyles,\n  IMultiStackedBarChartStyleProps,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>();\n\nexport interface IRefArrayData {\n  legendText?: string;\n  refElement?: SVGGElement;\n}\n\nexport interface IMultiStackedBarChartState {\n  isCalloutVisible: boolean;\n  refArray: IRefArrayData[];\n  selectedLegendTitle: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected: any;\n  dataForHoverCard: number;\n  color: string;\n  isLegendHovered: boolean;\n  isLegendSelected: boolean;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {\n  public static defaultProps: Partial<IMultiStackedBarChartProps> = {\n    barHeight: 16,\n    hideRatio: [],\n    hideDenominator: [],\n  };\n\n  private _classNames: IProcessedStyleSet<IMultiStackedBarChartStyles>;\n  private _calloutId: string;\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  public constructor(props: IMultiStackedBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      refArray: [],\n      selectedLegendTitle: '',\n      refSelected: null,\n      dataForHoverCard: 0,\n      color: '',\n      isLegendHovered: false,\n      isLegendSelected: false,\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._onLeave = this._onLeave.bind(this);\n    this._onBarLeave = this._onBarLeave.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    const { data, theme, culture } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    const legends = this._getLegendData(data!, this.props.hideRatio!, palette);\n    const { isCalloutVisible } = this.state;\n\n    this._classNames = getClassNames(this.props.styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n    });\n\n    const legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle;\n    const calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;\n\n    const bars: JSX.Element[] = data!.map((singleChartData: IChartProps, index: number) => {\n      const singleChartBars = this._createBarsAndLegends(\n        singleChartData!,\n        this.props.barHeight!,\n        palette,\n        this.props.hideRatio![index],\n        this.props.hideDenominator![index],\n        this.props.href,\n      );\n      return <div key={index}>{singleChartBars}</div>;\n    });\n\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {bars}\n        {!this.props.hideLegend && <div className={this._classNames.legendContainer}>{legends}</div>}\n        <Callout\n          gapSpace={15}\n          isBeakVisible={false}\n          target={this.state.refSelected}\n          setInitialFocus={true}\n          hidden={!(!this.props.hideTooltip && isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n        >\n          <>\n            {this.props.onRenderCalloutPerDataPoint ? (\n              this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n            ) : (\n              <ChartHoverCard Legend={legendName} YValue={calloutYVal} color={this.state.color} culture={culture} />\n            )}\n          </>\n        </Callout>\n      </div>\n    );\n  }\n\n  private _createBarsAndLegends(\n    data: IChartProps,\n    barHeight: number,\n    palette: IPalette,\n    hideRatio: boolean,\n    hideDenominator: boolean,\n    href?: string,\n  ): JSX.Element {\n    const { culture } = this.props;\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: IChartDataPoint) => acc + (point.data ? point.data : 0),\n      0,\n    );\n\n    let prevPosition = 0;\n    let value = 0;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color\n        ? point.color\n        : point.placeHolder\n        ? palette.neutralTertiaryAlt\n        : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.data ? point.data : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;\n\n      startingPoint.push(prevPosition);\n\n      const styles = this.props.styles;\n      let shouldHighlight = true;\n      if (this.state.isLegendHovered || this.state.isLegendSelected) {\n        shouldHighlight = this.state.selectedLegendTitle === point.legend;\n      }\n\n      this._classNames = getClassNames(styles!, {\n        theme: this.props.theme!,\n        shouldHighlight: shouldHighlight,\n        href: href,\n      });\n\n      if (value < 1) {\n        return <React.Fragment key={index}> </React.Fragment>;\n      }\n\n      return (\n        <g\n          key={index}\n          className={point.placeHolder ? this._classNames.placeHolderOnHover : this._classNames.opacityChangeOnHover}\n          ref={(e: SVGGElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          data-is-focusable={!this.props.hideTooltip}\n          onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n          onBlur={this._onBarLeave}\n          aria-labelledby={this._calloutId}\n          role=\"img\"\n          aria-label=\"Multi stacked bar chart\"\n          onMouseOver={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseMove={point.placeHolder ? undefined : this._onBarHover.bind(this, pointData, color, point)}\n          onMouseLeave={point.placeHolder ? undefined : this._onBarLeave}\n          onClick={href ? (point.placeHolder ? undefined : this._redirectToUrl.bind(this, href)) : point.onClick}\n        >\n          <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n        </g>\n      );\n    });\n    if (data.chartData!.length === 0) {\n      bars.push(\n        <g key={0} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    if (total === 0) {\n      bars.push(\n        <g key={'empty'} className={this._classNames.noData} onClick={this._redirectToUrl.bind(this, href)}>\n          <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={palette.neutralTertiaryAlt} />\n        </g>,\n      );\n    }\n    const hideNumber = hideRatio === undefined ? false : hideRatio;\n    const showRatio = !hideNumber && data!.chartData!.length === 2;\n    const showNumber = !hideNumber && data!.chartData!.length === 1;\n    const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n    return (\n      <div className={this._classNames.singleChartRoot}>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div className={this._classNames.chartTitle}>\n            {data!.chartTitle && (\n              <div {...getAccessibleDataObject(data!.chartTitleAccessibilityData)}>\n                <strong>{data!.chartTitle}</strong>\n              </div>\n            )}\n            {showRatio && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n                {!hideDenominator && <span>/{convertToLocaleString(total, culture)}</span>}\n              </div>\n            )}\n            {showNumber && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n              </div>\n            )}\n          </div>\n        </FocusZone>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div>\n            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n              {bars}\n            </svg>\n          </div>\n        </FocusZone>\n      </div>\n    );\n  }\n\n  private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n    if (\n      this.state.isLegendSelected === false ||\n      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)\n    ) {\n      this.state.refArray.forEach((obj: IRefArrayData) => {\n        if (obj.legendText === point.legend!) {\n          this.setState({\n            refSelected: obj.refElement,\n            isCalloutVisible: true,\n            selectedLegendTitle: point.legend!,\n            dataForHoverCard: pointData,\n            color: color,\n            xCalloutValue: point.xAxisCalloutData!,\n            yCalloutValue: point.yAxisCalloutData!,\n            dataPointCalloutProps: point,\n            callOutAccessibilityData: point.callOutAccessibilityData!,\n          });\n        }\n      });\n    }\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string): void {\n    this.state.refArray.push({ legendText: legendTitle, refElement: element });\n  }\n\n  private _adjustProps = (): void => {\n    const { theme, className, styles, width, barHeight } = this.props;\n    this._classNames = getClassNames(styles!, {\n      legendColor: this.state.color,\n      theme: theme!,\n      width: width,\n      className,\n      barHeight: barHeight,\n    });\n  };\n\n  private _onHover(customMessage: string): void {\n    if (this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _getLegendData = (data: IChartProps[], hideRatio: boolean[], palette: IPalette): JSX.Element => {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const actions: ILegend[] = [];\n    data.forEach((singleChartData: IChartProps, index: number) => {\n      const validChartData = singleChartData.chartData!.filter((_: IChartDataPoint) => !_.placeHolder);\n      if (validChartData!.length < 3) {\n        const hideNumber = hideRatio[index] === undefined ? false : hideRatio[index];\n        if (hideNumber) {\n          validChartData!.forEach((point: IChartDataPoint) => {\n            const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n            const checkSimilarLegends = actions.filter(\n              (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n            );\n            if (checkSimilarLegends!.length > 0) {\n              return;\n            }\n            const legend: ILegend = {\n              title: point.legend!,\n              color: color,\n              action: () => {\n                this._onClick(point.legend!);\n              },\n              hoverAction: () => {\n                this._onHover(point.legend!);\n              },\n              onMouseOutAction: (isLegendSelected?: boolean) => {\n                this._onLeave(isLegendSelected);\n              },\n            };\n            actions.push(legend);\n          });\n        }\n      } else {\n        validChartData!.forEach((point: IChartDataPoint) => {\n          const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n          const checkSimilarLegends = actions.filter(\n            (leg: ILegend) => leg.title === point.legend! && leg.color === color,\n          );\n          if (checkSimilarLegends!.length > 0) {\n            return;\n          }\n          const legend: ILegend = {\n            title: point.legend!,\n            color: color,\n            action: () => {\n              this._onClick(point.legend!);\n            },\n            hoverAction: () => {\n              this._onHover(point.legend!);\n            },\n            onMouseOutAction: (isLegendSelected?: boolean) => {\n              this._onLeave(isLegendSelected);\n            },\n          };\n          actions.push(legend);\n        });\n      }\n    });\n    return (\n      <Legends\n        legends={actions}\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n  };\n\n  private _onClick(customMessage: string): void {\n    if (this.state.isLegendSelected) {\n      if (this.state.selectedLegendTitle === customMessage) {\n        this.setState({\n          isLegendSelected: false,\n          selectedLegendTitle: customMessage,\n        });\n      } else {\n        this.setState({\n          selectedLegendTitle: customMessage,\n        });\n      }\n    } else {\n      this.setState({\n        isLegendSelected: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _onLeave(isLegendFocused?: boolean): void {\n    if (!!isLegendFocused || this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: false,\n        selectedLegendTitle: '',\n        isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,\n      });\n    }\n  }\n\n  private _onBarHover(\n    pointData: number,\n    color: string,\n    point: IChartDataPoint,\n    mouseEvent: React.MouseEvent<SVGPathElement>,\n  ): void {\n    mouseEvent.persist();\n\n    if (\n      (this.state.isLegendSelected === false ||\n        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend!)) &&\n      this._calloutAnchorPoint !== point\n    ) {\n      this._calloutAnchorPoint = point;\n      this.setState({\n        refSelected: mouseEvent,\n        isCalloutVisible: true,\n        selectedLegendTitle: point.legend!,\n        dataForHoverCard: pointData,\n        color: color,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        dataPointCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData!,\n      });\n    }\n  }\n\n  private _onBarLeave(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _redirectToUrl(href: string | undefined): void {\n    href ? (window.location.href = href) : '';\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n}\n"]}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IMultiStackedBarChartProps } from './MultiStackedBarChart.types';
+export declare const MultiStackedBarChart: React.FunctionComponent<IMultiStackedBarChartProps>;

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiStackedBarChart = void 0;
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var MultiStackedBarChart_base_1 = require("./MultiStackedBarChart.base");
+var MultiStackedBarChart_styles_1 = require("./MultiStackedBarChart.styles");
+// Create a MultiStackedBarChart variant which uses these default styles and this styled subcomponent.
+exports.MultiStackedBarChart = Utilities_1.styled(MultiStackedBarChart_base_1.MultiStackedBarChartBase, MultiStackedBarChart_styles_1.getMultiStackedBarChartStyles);
+//# sourceMappingURL=MultiStackedBarChart.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAMvD,yEAAuE;AACvE,6EAA8E;AAE9E,sGAAsG;AACzF,QAAA,oBAAoB,GAAwD,kBAAM,CAI7F,oDAAwB,EAAE,2DAA6B,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport {\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyleProps,\n  IMultiStackedBarChartStyles,\n} from './MultiStackedBarChart.types';\nimport { MultiStackedBarChartBase } from './MultiStackedBarChart.base';\nimport { getMultiStackedBarChartStyles } from './MultiStackedBarChart.styles';\n\n// Create a MultiStackedBarChart variant which uses these default styles and this styled subcomponent.\nexport const MultiStackedBarChart: React.FunctionComponent<IMultiStackedBarChartProps> = styled<\n  IMultiStackedBarChartProps,\n  IMultiStackedBarChartStyleProps,\n  IMultiStackedBarChartStyles\n>(MultiStackedBarChartBase, getMultiStackedBarChartStyles);\n"]}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles } from './MultiStackedBarChart.types';
+export declare const getMultiStackedBarChartStyles: (props: IMultiStackedBarChartStyleProps) => IMultiStackedBarChartStyles;

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.styles.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMultiStackedBarChartStyles = void 0;
+var tslib_1 = require("tslib");
+var getMultiStackedBarChartStyles = function (props) {
+    var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-StackedBarChart',
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                width: width ? width : '100%',
+            },
+            className,
+        ],
+        items: {
+            marginBottom: '11px',
+        },
+        chart: {
+            width: '100%',
+            height: barHeight ? barHeight : 16,
+        },
+        chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+        singleChartRoot: {
+            width: width ? width : '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            marginBottom: '16px',
+        },
+        opacityChangeOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: href ? 'pointer' : 'default',
+            stroke: theme.palette.white,
+            strokeWidth: 2,
+            selectors: {
+                '&:focus': {
+                    stroke: theme.palette.black,
+                    strokeWidth: '2px',
+                },
+            },
+        },
+        placeHolderOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: 'default',
+            stroke: theme.palette.white,
+            strokeWidth: '2',
+            selectors: {
+                '&:focus': {
+                    stroke: theme.palette.black,
+                    strokeWidth: '2px',
+                },
+            },
+        },
+        legendContainer: {
+            margin: '5px 0px 0px 4px',
+        },
+        noData: {
+            cursor: href ? 'pointer' : 'default',
+        },
+    };
+};
+exports.getMultiStackedBarChartStyles = getMultiStackedBarChartStyles;
+//# sourceMappingURL=MultiStackedBarChart.styles.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.styles.ts"],"names":[],"mappings":";;;;AAEO,IAAM,6BAA6B,GAAG,UAAC,KAAsC;IAC1E,IAAA,SAAS,GAAqD,KAAK,UAA1D,EAAE,KAAK,GAA8C,KAAK,MAAnD,EAAE,SAAS,GAAmC,KAAK,UAAxC,EAAE,eAAe,GAAkB,KAAK,gBAAvB,EAAE,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC5E,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB,oBAAoB;YACpB;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,YAAY,EAAE,MAAM;SACrB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;SACnC;QACD,UAAU,wCACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,KAAK,GACpB;QACD,eAAe,EAAE;YACf,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YAC7B,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,YAAY,EAAE,MAAM;SACrB;QACD,oBAAoB,EAAE;YACpB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;YACrC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,CAAC;YACd,SAAS,EAAE;gBACT,SAAS,EAAE;oBACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;oBAC3B,WAAW,EAAE,KAAK;iBACnB;aACF;SACF;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;YACrC,MAAM,EAAE,SAAS;YACjB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,GAAG;YAChB,SAAS,EAAE;gBACT,SAAS,EAAE;oBACT,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;oBAC3B,WAAW,EAAE,KAAK;iBACnB;aACF;SACF;QACD,eAAe,EAAE;YACf,MAAM,EAAE,iBAAiB;SAC1B;QACD,MAAM,EAAE;YACN,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;KACF,CAAC;AACJ,CAAC,CAAC;AA/DW,QAAA,6BAA6B,iCA+DxC","sourcesContent":["import { IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles } from './MultiStackedBarChart.types';\n\nexport const getMultiStackedBarChartStyles = (props: IMultiStackedBarChartStyleProps): IMultiStackedBarChartStyles => {\n  const { className, width, barHeight, shouldHighlight, theme, href } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-StackedBarChart',\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        width: width ? width : '100%',\n      },\n      className,\n    ],\n    items: {\n      marginBottom: '11px',\n    },\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 16,\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '3px',\n    },\n    singleChartRoot: {\n      width: width ? width : '100%',\n      display: 'flex',\n      flexDirection: 'column',\n      marginBottom: '16px',\n    },\n    opacityChangeOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: href ? 'pointer' : 'default',\n      stroke: theme.palette.white,\n      strokeWidth: 2,\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    placeHolderOnHover: {\n      opacity: shouldHighlight ? '' : '0.1',\n      cursor: 'default',\n      stroke: theme.palette.white,\n      strokeWidth: '2',\n      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    legendContainer: {\n      margin: '5px 0px 0px 4px',\n    },\n    noData: {\n      cursor: href ? 'pointer' : 'default',\n    },\n  };\n};\n"]}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.d.ts

@@ -0,0 +1,154 @@
+import { IChartProps, IChartDataPoint } from './index';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+import { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';
+import { IFocusZoneProps } from '@fluentui/react-focus';
+import { ILegendsProps } from '../Legends/index';
+export interface IMultiStackedBarChartProps {
+    /**
+     * An array of chart data points for the multistacked bar chart
+     */
+    data?: IChartProps[];
+    /**
+     * Width of bar chart
+     */
+    width?: number;
+    /**
+     * Height of bar chart
+     * @default 15
+     */
+    barHeight?: number;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * This property tells whether to show ratio on top of stacked bar chart or not.
+     */
+    hideRatio?: boolean[];
+    /**
+     * Do not show the legend at the bottom of chart
+     *
+     * @default false
+     */
+    hideLegend?: boolean;
+    /**
+     * Do not show tooltips in chart
+     *
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;
+    /**
+     * Url that the data-viz needs to redirect to upon clicking on it
+     */
+    href?: string;
+    /**
+     * If this value is set to true the denominator will not be shown for the ratio above the chart
+     */
+    hideDenominator?: boolean[];
+    /**
+     * overflow props for legend
+     */
+    legendsOverflowProps?: Partial<IOverflowSetProps>;
+    /**
+     * text for overflow legends string
+     */
+    legendsOverflowText?: string;
+    /**
+     * focus zone props in hover card for legends
+     */
+    focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;
+    /**
+     * props for the legends in the chart
+     */
+    legendProps?: Partial<ILegendsProps>;
+    /**
+     * Define a custom callout renderer for a data point
+     */
+    onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+export interface IMultiStackedBarChartStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width?: number;
+    /**
+     * barHeight for each chart
+     */
+    barHeight?: number;
+    /**
+     * color of the datapoint legend
+     */
+    legendColor?: string;
+    /**
+     * prop to check if the chart is selcted or hovered upon to determine opacity
+     */
+    shouldHighlight?: boolean;
+    /**
+     * prop to check to decide cursor type
+     */
+    href?: string;
+}
+export interface IMultiStackedBarChartStyles {
+    /**
+     * Styling for the root container
+     */
+    root: IStyle;
+    /**
+     * Styling for the root container of each chart in the multistacked bar chart
+     */
+    singleChartRoot: IStyle;
+    /**
+     * Styling for each item in the container
+     */
+    items: IStyle;
+    /**
+     * Styling for each svg in the multistacked bar chart
+     */
+    chart: IStyle;
+    /**
+     * Styling for chart title of the stacked bar chart
+     */
+    chartTitle: IStyle;
+    /**
+     * Style to change the opacity of bars in dataviz when we hover on a single bar or legends
+     */
+    opacityChangeOnHover: IStyle;
+    /**
+     * Style to change the opacity of placeholder data point when we hover a single bar or legend
+     */
+    placeHolderOnHover: IStyle;
+    /**
+     * Style for the legends container
+     */
+    legendContainer: IStyle;
+    /**
+     * Style for stacked bar chart with no data
+     */
+    noData: IStyle;
+}

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=MultiStackedBarChart.types.js.map

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiStackedBarChart.types.js","sourceRoot":"../src/","sources":["components/StackedBarChart/MultiStackedBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { IOverflowSetProps } from '@fluentui/react/lib/OverflowSet';\nimport { IFocusZoneProps } from '@fluentui/react-focus';\nimport { ILegendsProps } from '../Legends/index';\n\nexport interface IMultiStackedBarChartProps {\n  /**\n   * An array of chart data points for the multistacked bar chart\n   */\n  data?: IChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show the legend at the bottom of chart\n   *\n   * @default false\n   */\n  hideLegend?: boolean;\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IMultiStackedBarChartStyleProps, IMultiStackedBarChartStyles>;\n\n  /**\n   * Url that the data-viz needs to redirect to upon clicking on it\n   */\n  href?: string;\n\n  /**\n   * If this value is set to true the denominator will not be shown for the ratio above the chart\n   */\n  hideDenominator?: boolean[];\n\n  /**\n   * overflow props for legend\n   */\n  legendsOverflowProps?: Partial<IOverflowSetProps>;\n\n  /**\n   * text for overflow legends string\n   */\n  legendsOverflowText?: string;\n\n  /**\n   * focus zone props in hover card for legends\n   */\n  focusZonePropsForLegendsInHoverCard?: IFocusZoneProps;\n\n  /**\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<ILegendsProps>;\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\nexport interface IMultiStackedBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width?: number;\n\n  /**\n   * barHeight for each chart\n   */\n  barHeight?: number;\n\n  /**\n   * color of the datapoint legend\n   */\n  legendColor?: string;\n\n  /**\n   * prop to check if the chart is selcted or hovered upon to determine opacity\n   */\n  shouldHighlight?: boolean;\n\n  /**\n   * prop to check to decide cursor type\n   */\n  href?: string;\n}\n\nexport interface IMultiStackedBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for the root container of each chart in the multistacked bar chart\n   */\n  singleChartRoot: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n\n  /**\n   * Styling for each svg in the multistacked bar chart\n   */\n  chart: IStyle;\n\n  /**\n   * Styling for chart title of the stacked bar chart\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style to change the opacity of bars in dataviz when we hover on a single bar or legends\n   */\n  opacityChangeOnHover: IStyle;\n\n  /**\n   * Style to change the opacity of placeholder data point when we hover a single bar or legend\n   */\n  placeHolderOnHover: IStyle;\n\n  /**\n   * Style for the legends container\n   */\n  legendContainer: IStyle;\n\n  /**\n   * Style for stacked bar chart with no data\n   */\n  noData: IStyle;\n}\n"]}