@fluentui/react-charting 5.12.25 → 5.12.26

package/lib-amd/components/StackedBarChart/StackedBarChart.base.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { IAccessibilityProps, IChartDataPoint } from './index';
+import { IStackedBarChartProps } from '../../index';
+export interface IStackedBarChartState {
+    isCalloutVisible: boolean;
+    selectedLegendTitle: string;
+    refSelected: any;
+    dataForHoverCard: number;
+    color: string;
+    isLegendHovered: boolean;
+    isLegendSelected: boolean;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {
+    static defaultProps: Partial<IStackedBarChartProps>;
+    private _classNames;
+    private _calloutId;
+    private _refArray;
+    private _calloutAnchorPoint;
+    constructor(props: IStackedBarChartProps);
+    render(): JSX.Element;
+    private _adjustProps;
+    private _createBarsAndLegends;
+    private _onBarFocus;
+    private _addLegend;
+    private _generateEmptyBar;
+    private _refCallback;
+    private _onClick;
+    private _onHover;
+    private _onLeave;
+    private _onBarHover;
+    private _onBarLeave;
+    private _handleChartMouseLeave;
+    private _redirectToUrl;
+    private _closeCallout;
+}

package/lib-amd/components/StackedBarChart/StackedBarChart.base.js

@@ -0,0 +1,295 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "../Legends/index", "@fluentui/react/lib/Callout", "@fluentui/react-focus", "../../utilities/index"], function (require, exports, tslib_1, React, Utilities_1, index_1, Callout_1, react_focus_1, index_2) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.StackedBarChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    var StackedBarChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(StackedBarChartBase, _super);
+        function StackedBarChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this.state = {
+                isCalloutVisible: false,
+                selectedLegendTitle: '',
+                refSelected: null,
+                dataForHoverCard: 0,
+                color: '',
+                isLegendHovered: false,
+                isLegendSelected: false,
+                xCalloutValue: '',
+                yCalloutValue: '',
+            };
+            _this._refArray = [];
+            _this._onLeave = _this._onLeave.bind(_this);
+            _this._refCallback = _this._refCallback.bind(_this);
+            _this._onBarLeave = _this._onBarLeave.bind(_this);
+            _this._calloutId = Utilities_1.getId('callout');
+            return _this;
+        }
+        StackedBarChartBase.prototype.render = function () {
+            this._adjustProps();
+            var _a = this.props, data = _a.data, benchmarkData = _a.benchmarkData, targetData = _a.targetData, hideNumberDisplay = _a.hideNumberDisplay, ignoreFixStyle = _a.ignoreFixStyle, culture = _a.culture;
+            var palette = this.props.theme.palette;
+            var barHeight = ignoreFixStyle || data.chartData.length > 2 ? this.props.barHeight : 8;
+            if (benchmarkData) {
+                // benchmark color is used to render color for benchmark triangle and benchmark legend
+                benchmarkData.color = benchmarkData.color || palette.neutralTertiary;
+            }
+            if (targetData) {
+                // target color is used to render color for target triangle and target legend
+                targetData.color = targetData.color || palette.neutralSecondary;
+            }
+            var bars = this._createBarsAndLegends(data, barHeight, palette, benchmarkData, targetData);
+            var showRatio = hideNumberDisplay === false && !ignoreFixStyle && data.chartData.length === 2;
+            var showNumber = hideNumberDisplay === false && !ignoreFixStyle && data.chartData.length === 1;
+            var total = data.chartData.reduce(function (acc, value) { return acc + (value.data ? value.data : 0); }, 0);
+            var benchmarkRatio = 0;
+            if (benchmarkData && total) {
+                benchmarkRatio = (benchmarkData.data / total) * 100;
+            }
+            var targetRatio = 0;
+            if (targetData && total) {
+                targetRatio = (targetData.data / total) * 100;
+            }
+            var showLegend = this.props.hideLegend === false && (ignoreFixStyle || data.chartData.length > 2);
+            this._classNames = getClassNames(this.props.styles, {
+                legendColor: this.state.color,
+                theme: this.props.theme,
+                benchmarkColor: benchmarkData ? benchmarkData.color : '',
+                benchmarkRatio: benchmarkRatio,
+                targetColor: targetData ? targetData.color : '',
+                targetRatio: targetRatio,
+            });
+            var getChartData = function () { return index_2.convertToLocaleString(data.chartData[0].data ? data.chartData[0].data : 0, culture); };
+            return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
+                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("span", { className: this._classNames.ratioNumerator }, getChartData()),
+                            !this.props.hideDenominator && (React.createElement("span", null,
+                                "/",
+                                React.createElement("span", { className: this._classNames.ratioDenominator }, index_2.convertToLocaleString(total, culture)))))),
+                        showNumber && (React.createElement("div", tslib_1.__assign({}, index_2.getAccessibleDataObject(data.chartDataAccessibilityData)),
+                            React.createElement("strong", null, getChartData())))),
+                    (benchmarkData || targetData) && (React.createElement("div", { className: this._classNames.benchmarkContainer },
+                        benchmarkData && React.createElement("div", { className: this._classNames.benchmark, role: "text" }),
+                        targetData && React.createElement("div", { className: this._classNames.target, role: "text" })))),
+                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 },
+                            React.createElement("g", null, bars[0]),
+                            React.createElement(Callout_1.Callout, tslib_1.__assign({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && this.state.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: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, color: this.state.color, culture: culture }))))))),
+                showLegend && React.createElement("div", { className: this._classNames.legendContainer }, bars[1])));
+        };
+        StackedBarChartBase.prototype._adjustProps = function () {
+            this._classNames = getClassNames(this.props.styles, {
+                legendColor: this.state.color,
+                theme: this.props.theme,
+                width: this.props.width,
+                barHeight: this.props.barHeight,
+                className: this.props.className,
+            });
+        };
+        StackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, benchmarkData, targetData) {
+            var _this = this;
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            var legendDataItems = [];
+            // 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 : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                var pointData = point.data ? point.data : 0;
+                // mapping data to the format Legends component needs
+                var legend = {
+                    title: point.legend,
+                    color: color,
+                    action: total > 0
+                        ? function () {
+                            _this._onClick(point.legend);
+                        }
+                        : undefined,
+                    hoverAction: total > 0
+                        ? function () {
+                            _this._onHover(point.legend);
+                        }
+                        : undefined,
+                    onMouseOutAction: total > 0
+                        ? function (isLegendFocused) {
+                            _this._onLeave(isLegendFocused);
+                        }
+                        : undefined,
+                };
+                if (!point.placeHolder) {
+                    legendDataItems.push(legend);
+                }
+                if (index > 0) {
+                    prevPosition += value;
+                }
+                value = (pointData / total) * 100;
+                if (value < 1 && value !== 0) {
+                    value = 1;
+                }
+                else if (value > 99 && value !== 100) {
+                    value = 99;
+                }
+                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: _this.props.href,
+                });
+                if (value < 1) {
+                    return React.createElement(React.Fragment, { key: index }, " ");
+                }
+                return (React.createElement("g", { key: index, className: _this._classNames.opacityChangeOnHover, ref: function (e) {
+                        _this._refCallback(e, legend.title);
+                    }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, "aria-label": "Stacked bar chart", role: "img", "aria-labelledby": _this._calloutId, onMouseOver: _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: _this._onBarLeave, pointerEvents: "all", onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : point.onClick },
+                    React.createElement("rect", { key: index, x: startingPoint[index] + '%', y: 0, width: value + '%', height: barHeight, fill: color })));
+            });
+            // add benchmark legends
+            this._addLegend(legendDataItems, benchmarkData);
+            this._addLegend(legendDataItems, targetData);
+            var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: legendDataItems, enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps)));
+            return [
+                total === 0
+                    ? [
+                        this._generateEmptyBar(barHeight, this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralTertiary),
+                    ]
+                    : bars,
+                legends,
+            ];
+        };
+        StackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
+            var _this = this;
+            if (this.state.isLegendSelected === false ||
+                (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) {
+                this._refArray.forEach(function (obj) {
+                    if (obj.index === 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,
+                        });
+                    }
+                });
+            }
+        };
+        StackedBarChartBase.prototype._addLegend = function (legendDataItems, data) {
+            if (data) {
+                var legend = {
+                    title: data.legend,
+                    color: data.color,
+                    shape: 'triangle',
+                };
+                legendDataItems.push(legend);
+            }
+        };
+        StackedBarChartBase.prototype._generateEmptyBar = function (barHeight, color) {
+            return (React.createElement("g", { key: 0, className: this._classNames.opacityChangeOnHover },
+                React.createElement("rect", { key: 0, x: '0%', y: 0, width: '100%', height: barHeight, fill: color })));
+        };
+        StackedBarChartBase.prototype._refCallback = function (element, legendTitle) {
+            this._refArray.push({ index: legendTitle, refElement: element });
+        };
+        StackedBarChartBase.prototype._onClick = function (customMessage) {
+            if (this.state.isLegendSelected) {
+                if (this.state.selectedLegendTitle === customMessage) {
+                    this.setState({
+                        isLegendSelected: false,
+                        selectedLegendTitle: customMessage,
+                        isLegendHovered: true,
+                    });
+                }
+                else {
+                    this.setState({
+                        selectedLegendTitle: customMessage,
+                    });
+                }
+            }
+            else {
+                this.setState({
+                    isLegendSelected: true,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        };
+        StackedBarChartBase.prototype._onHover = function (customMessage) {
+            if (this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: true,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        };
+        StackedBarChartBase.prototype._onLeave = function (isLegendFocused) {
+            if (!!isLegendFocused || this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: false,
+                    selectedLegendTitle: '',
+                    isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+                });
+            }
+        };
+        StackedBarChartBase.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,
+                });
+            }
+        };
+        StackedBarChartBase.prototype._onBarLeave = function () {
+            /**/
+        };
+        StackedBarChartBase.prototype._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        StackedBarChartBase.defaultProps = {
+            barHeight: 16,
+            hideNumberDisplay: false,
+            hideLegend: false,
+            ignoreFixStyle: false,
+        };
+        return StackedBarChartBase;
+    }(React.Component));
+    exports.StackedBarChartBase = StackedBarChartBase;
+});
+//# sourceMappingURL=StackedBarChart.base.js.map

package/lib-amd/components/StackedBarChart/StackedBarChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.base.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { ILegend, Legends } from '../Legends/index';\nimport { IAccessibilityProps, IChartDataPoint, IChartProps } from './index';\nimport { IRefArrayData, IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } 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<IStackedBarChartStyleProps, IStackedBarChartStyles>();\nexport interface IStackedBarChartState {\n  isCalloutVisible: boolean;\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 StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {\n  public static defaultProps: Partial<IStackedBarChartProps> = {\n    barHeight: 16,\n    hideNumberDisplay: false,\n    hideLegend: false,\n    ignoreFixStyle: false,\n  };\n  private _classNames: IProcessedStyleSet<IStackedBarChartStyles>;\n  private _calloutId: string;\n  private _refArray: IRefArrayData[];\n  private _calloutAnchorPoint: IChartDataPoint | null;\n\n  public constructor(props: IStackedBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      selectedLegendTitle: '',\n      refSelected: null,\n      dataForHoverCard: 0,\n      color: '',\n      isLegendHovered: false,\n      isLegendSelected: false,\n      xCalloutValue: '',\n      yCalloutValue: '',\n    };\n    this._refArray = [];\n    this._onLeave = this._onLeave.bind(this);\n    this._refCallback = this._refCallback.bind(this);\n    this._onBarLeave = this._onBarLeave.bind(this);\n    this._calloutId = getId('callout');\n  }\n\n  public render(): JSX.Element {\n    this._adjustProps();\n    const { data, benchmarkData, targetData, hideNumberDisplay, ignoreFixStyle, culture } = this.props;\n    const { palette } = this.props.theme!;\n    const barHeight = ignoreFixStyle || data!.chartData!.length > 2 ? this.props.barHeight : 8;\n\n    if (benchmarkData) {\n      // benchmark color is used to render color for benchmark triangle and benchmark legend\n      benchmarkData.color = benchmarkData.color || palette.neutralTertiary;\n    }\n\n    if (targetData) {\n      // target color is used to render color for target triangle and target legend\n      targetData.color = targetData.color || palette.neutralSecondary;\n    }\n\n    const bars = this._createBarsAndLegends(data!, barHeight!, palette, benchmarkData, targetData);\n\n    const showRatio = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 2;\n    const showNumber = hideNumberDisplay === false && !ignoreFixStyle && data!.chartData!.length === 1;\n    const total = data!.chartData!.reduce(\n      (acc: number, value: IChartDataPoint) => acc + (value.data ? value.data : 0),\n      0,\n    );\n\n    let benchmarkRatio = 0;\n    if (benchmarkData && total) {\n      benchmarkRatio = (benchmarkData.data! / total) * 100;\n    }\n    let targetRatio = 0;\n    if (targetData && total) {\n      targetRatio = (targetData.data! / total) * 100;\n    }\n\n    const showLegend = this.props.hideLegend === false && (ignoreFixStyle || data!.chartData!.length > 2);\n    this._classNames = getClassNames(this.props.styles!, {\n      legendColor: this.state.color,\n      theme: this.props.theme!,\n      benchmarkColor: benchmarkData ? benchmarkData.color : '',\n      benchmarkRatio,\n      targetColor: targetData ? targetData.color : '',\n      targetRatio,\n    });\n    const getChartData = () => convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n    return (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\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                <span className={this._classNames.ratioNumerator}>{getChartData()}</span>\n                {!this.props.hideDenominator && (\n                  <span>\n                    /<span className={this._classNames.ratioDenominator}>{convertToLocaleString(total, culture)}</span>\n                  </span>\n                )}\n              </div>\n            )}\n            {showNumber && (\n              <div {...getAccessibleDataObject(data!.chartDataAccessibilityData)}>\n                <strong>{getChartData()}</strong>\n              </div>\n            )}\n          </div>\n          {(benchmarkData || targetData) && (\n            <div className={this._classNames.benchmarkContainer}>\n              {benchmarkData && <div className={this._classNames.benchmark} role=\"text\" />}\n              {targetData && <div className={this._classNames.target} role=\"text\" />}\n            </div>\n          )}\n        </FocusZone>\n        <FocusZone direction={FocusZoneDirection.horizontal}>\n          <div>\n            <svg className={this._classNames.chart} aria-label={data?.chartTitle}>\n              <g>{bars[0]}</g>\n              <Callout\n                gapSpace={15}\n                isBeakVisible={false}\n                target={this.state.refSelected}\n                setInitialFocus={true}\n                hidden={!(!this.props.hideTooltip && this.state.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\n                      Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.selectedLegendTitle}\n                      YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard}\n                      color={this.state.color}\n                      culture={culture}\n                    />\n                  )}\n                </>\n              </Callout>\n            </svg>\n          </div>\n        </FocusZone>\n        {showLegend && <div className={this._classNames.legendContainer}>{bars[1]}</div>}\n      </div>\n    );\n  }\n\n  private _adjustProps(): void {\n    this._classNames = getClassNames(this.props.styles!, {\n      legendColor: this.state.color,\n      theme: this.props.theme!,\n      width: this.props.width!,\n      barHeight: this.props.barHeight!,\n      className: this.props.className!,\n    });\n  }\n\n  private _createBarsAndLegends(\n    data: IChartProps,\n    barHeight: number,\n    palette: IPalette,\n    benchmarkData?: IChartDataPoint,\n    targetData?: IChartDataPoint,\n  ): [JSX.Element[], JSX.Element] {\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n    const legendDataItems: ILegend[] = [];\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    let prevPosition = 0;\n    let value = 0;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.data ? point.data : 0;\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color: color,\n        action:\n          total > 0\n            ? () => {\n                this._onClick(point.legend!);\n              }\n            : undefined,\n        hoverAction:\n          total > 0\n            ? () => {\n                this._onHover(point.legend!);\n              }\n            : undefined,\n        onMouseOutAction:\n          total > 0\n            ? (isLegendFocused?: boolean) => {\n                this._onLeave(isLegendFocused);\n              }\n            : undefined,\n      };\n      if (!point.placeHolder) {\n        legendDataItems.push(legend);\n      }\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 1 && value !== 0) {\n        value = 1;\n      } else if (value > 99 && value !== 100) {\n        value = 99;\n      }\n      startingPoint.push(prevPosition);\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      this._classNames = getClassNames(styles!, {\n        theme: this.props.theme!,\n        shouldHighlight: shouldHighlight,\n        href: this.props.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={this._classNames.opacityChangeOnHover}\n          ref={(e: SVGGElement) => {\n            this._refCallback(e, legend.title);\n          }}\n          data-is-focusable={!this.props.hideTooltip}\n          onFocus={this._onBarFocus.bind(this, pointData, color, point)}\n          onBlur={this._onBarLeave}\n          aria-label=\"Stacked bar chart\"\n          role=\"img\"\n          aria-labelledby={this._calloutId}\n          onMouseOver={this._onBarHover.bind(this, pointData, color, point)}\n          onMouseMove={this._onBarHover.bind(this, pointData, color, point)}\n          onMouseLeave={this._onBarLeave}\n          pointerEvents=\"all\"\n          onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : point.onClick}\n        >\n          <rect key={index} x={startingPoint[index] + '%'} y={0} width={value + '%'} height={barHeight} fill={color} />\n        </g>\n      );\n    });\n\n    // add benchmark legends\n    this._addLegend(legendDataItems, benchmarkData);\n    this._addLegend(legendDataItems, targetData);\n    const legends = (\n      <Legends\n        legends={legendDataItems}\n        enabledWrapLines={this.props.enabledLegendsWrapLines}\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n    return [\n      total === 0\n        ? [\n            this._generateEmptyBar(\n              barHeight,\n              this.props.barBackgroundColor ? this.props.barBackgroundColor : palette.neutralTertiary,\n            ),\n          ]\n        : bars,\n      legends,\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._refArray.forEach((obj: IRefArrayData) => {\n        if (obj.index === 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 _addLegend(legendDataItems: ILegend[], data?: IChartDataPoint): void {\n    if (data) {\n      const legend: ILegend = {\n        title: data.legend!,\n        color: data.color!,\n        shape: 'triangle',\n      };\n      legendDataItems.push(legend);\n    }\n  }\n\n  private _generateEmptyBar(barHeight: number, color: string): JSX.Element {\n    return (\n      <g key={0} className={this._classNames.opacityChangeOnHover}>\n        <rect key={0} x={'0%'} y={0} width={'100%'} height={barHeight} fill={color} />\n      </g>\n    );\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string): void {\n    this._refArray.push({ index: legendTitle, refElement: element });\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          isLegendHovered: true,\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 _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 _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    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-amd/components/StackedBarChart/StackedBarChart.d.ts

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

package/lib-amd/components/StackedBarChart/StackedBarChart.js

@@ -0,0 +1,8 @@
+define(["require", "exports", "@fluentui/react/lib/Utilities", "./StackedBarChart.base", "./StackedBarChart.styles"], function (require, exports, Utilities_1, StackedBarChart_base_1, StackedBarChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.StackedBarChart = void 0;
+    // Create a StackedBarChart variant which uses these default styles and this styled subcomponent.
+    exports.StackedBarChart = Utilities_1.styled(StackedBarChart_base_1.StackedBarChartBase, StackedBarChart_styles_1.getStyles);
+});
+//# sourceMappingURL=StackedBarChart.js.map

package/lib-amd/components/StackedBarChart/StackedBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.tsx"],"names":[],"mappings":";;;;IAMA,iGAAiG;IACpF,QAAA,eAAe,GAAmD,kBAAM,CAInF,0CAAmB,EAAE,kCAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IStackedBarChartProps, IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { StackedBarChartBase } from './StackedBarChart.base';\nimport { getStyles } from './StackedBarChart.styles';\n\n// Create a StackedBarChart variant which uses these default styles and this styled subcomponent.\nexport const StackedBarChart: React.FunctionComponent<IStackedBarChartProps> = styled<\n  IStackedBarChartProps,\n  IStackedBarChartStyleProps,\n  IStackedBarChartStyles\n>(StackedBarChartBase, getStyles);\n"]}

package/lib-amd/components/StackedBarChart/StackedBarChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';
+export declare const getStyles: (props: IStackedBarChartStyleProps) => IStackedBarChartStyles;

package/lib-amd/components/StackedBarChart/StackedBarChart.styles.js

@@ -0,0 +1,98 @@
+define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var _a, _b;
+        var className = props.className, width = props.width, barHeight = props.barHeight, shouldHighlight = props.shouldHighlight, theme = props.theme, href = props.href, benchmarkColor = props.benchmarkColor, benchmarkRatio = props.benchmarkRatio, targetColor = props.targetColor, targetRatio = props.targetRatio;
+        return {
+            root: [
+                theme.fonts.medium,
+                'ms-StackedBarChart',
+                {
+                    width: width ? width : '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                },
+                className,
+            ],
+            chart: {
+                width: '100%',
+                height: barHeight ? barHeight : 16,
+                marginBottom: '12px',
+            },
+            chartTitle: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+            legendContainer: {
+                margin: '4px 0px 0px 4px',
+            },
+            opacityChangeOnHover: {
+                opacity: shouldHighlight ? '' : '0.1',
+                cursor: href ? 'pointer' : 'default',
+                stroke: theme.palette.white,
+                strokeWidth: 2,
+                selectors: {
+                    '&:focus': {
+                        stroke: theme.palette.black,
+                        strokeWidth: '2px',
+                    },
+                },
+            },
+            ratioNumerator: {
+                fontSize: Styling_1.FontSizes.small,
+                fontWeight: Styling_1.FontWeights.semibold,
+                color: theme.palette.black,
+            },
+            ratioDenominator: {
+                fontSize: Styling_1.FontSizes.small,
+                color: theme.palette.black,
+                opacity: '0.6',
+            },
+            benchmarkContainer: {
+                position: 'relative',
+                height: '12px',
+            },
+            benchmark: {
+                position: 'absolute',
+                left: 'calc(' + benchmarkRatio + '% - 4.5px)',
+                width: '0',
+                height: '0',
+                borderLeft: '4.5px solid transparent',
+                borderRight: '4.5px solid transparent',
+                borderTop: '7.8px solid',
+                borderTopColor: benchmarkColor,
+                marginBottom: '4px',
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelector] = {
+                        border: '0px',
+                        height: '7.8px',
+                        width: '7.8px',
+                        clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+                        backgroundImage: "linear-gradient(to right, " + benchmarkColor + ", " + benchmarkColor + ")",
+                    },
+                    _a),
+            },
+            target: {
+                position: 'absolute',
+                left: 'calc(' + targetRatio + '% - 4.5px)',
+                width: '0',
+                height: '0',
+                borderLeft: '4.5px solid transparent',
+                borderRight: '4.5px solid transparent',
+                borderTop: '7.8px solid',
+                borderTopColor: targetColor,
+                marginBottom: '4px',
+                selectors: (_b = {},
+                    _b[Styling_1.HighContrastSelector] = {
+                        border: '0px',
+                        height: '7.8px',
+                        width: '7.8px',
+                        clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+                        backgroundImage: "linear-gradient(to right, " + targetColor + ", " + targetColor + ")",
+                    },
+                    _b),
+            },
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=StackedBarChart.styles.js.map

package/lib-amd/components/StackedBarChart/StackedBarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.styles.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { IStackedBarChartStyleProps, IStackedBarChartStyles } from './StackedBarChart.types';\nimport { FontSizes, FontWeights, HighContrastSelector, IStyle } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IStackedBarChartStyleProps): IStackedBarChartStyles => {\n  const {\n    className,\n    width,\n    barHeight,\n    shouldHighlight,\n    theme,\n    href,\n    benchmarkColor,\n    benchmarkRatio,\n    targetColor,\n    targetRatio,\n  } = props;\n  return {\n    root: [\n      theme.fonts.medium,\n      'ms-StackedBarChart',\n      {\n        width: width ? width : '100%',\n        display: 'flex',\n        flexDirection: 'column',\n      },\n      className,\n    ],\n    chart: {\n      width: '100%',\n      height: barHeight ? barHeight : 16,\n      marginBottom: '12px',\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '3px',\n    },\n    legendContainer: {\n      margin: '4px 0px 0px 4px',\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    ratioNumerator: {\n      fontSize: FontSizes.small,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.black,\n    },\n    ratioDenominator: {\n      fontSize: FontSizes.small,\n      color: theme.palette.black,\n      opacity: '0.6',\n    },\n    benchmarkContainer: {\n      position: 'relative',\n      height: '12px',\n    },\n    benchmark: {\n      position: 'absolute',\n      left: 'calc(' + benchmarkRatio + '% - 4.5px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4.5px solid transparent',\n      borderRight: '4.5px solid transparent',\n      borderTop: '7.8px solid',\n      borderTopColor: benchmarkColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7.8px',\n          width: '7.8px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${benchmarkColor}, ${benchmarkColor})`,\n        } as IStyle,\n      },\n    },\n    target: {\n      position: 'absolute',\n      left: 'calc(' + targetRatio + '% - 4.5px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4.5px solid transparent',\n      borderRight: '4.5px solid transparent',\n      borderTop: '7.8px solid',\n      borderTopColor: targetColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7.8px',\n          width: '7.8px',\n          clipPath: 'polygon(50% 100%, 0 0, 100% 0)',\n          backgroundImage: `linear-gradient(to right, ${targetColor}, ${targetColor})`,\n        } as IStyle,\n      },\n    },\n  };\n};\n"]}