@fluentui/react-charting 5.12.21 → 5.12.24

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

@@ -1,39 +0,0 @@
-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/components/StackedBarChart/StackedBarChart.base.js

@@ -1,297 +0,0 @@
-import { __assign, __extends } from "tslib";
-import * as React from 'react';
-import { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';
-import { Legends } from '../Legends/index';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';
-var getClassNames = classNamesFunction();
-var StackedBarChartBase = /** @class */ (function (_super) {
-    __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 = 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 convertToLocaleString(data.chartData[0].data ? data.chartData[0].data : 0, culture); };
-        return (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
-            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal },
-                React.createElement("div", { className: this._classNames.chartTitle },
-                    data.chartTitle && (React.createElement("div", __assign({}, getAccessibleDataObject(data.chartTitleAccessibilityData)),
-                        React.createElement("strong", null, data.chartTitle))),
-                    showRatio && (React.createElement("div", __assign({}, 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 }, convertToLocaleString(total, culture)))))),
-                    showNumber && (React.createElement("div", __assign({}, 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(FocusZone, { direction: 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, __assign({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)),
-                            React.createElement(React.Fragment, null, this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(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(Legends, __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));
-export { StackedBarChartBase };
-//# sourceMappingURL=StackedBarChart.base.js.map

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

@@ -1 +0,0 @@
-{"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/components/StackedBarChart/StackedBarChart.d.ts

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

package/lib/components/StackedBarChart/StackedBarChart.js

@@ -1,6 +0,0 @@
-import { styled } from '@fluentui/react/lib/Utilities';
-import { StackedBarChartBase } from './StackedBarChart.base';
-import { getStyles } from './StackedBarChart.styles';
-// Create a StackedBarChart variant which uses these default styles and this styled subcomponent.
-export var StackedBarChart = styled(StackedBarChartBase, getStyles);
-//# sourceMappingURL=StackedBarChart.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"StackedBarChart.js","sourceRoot":"../src/","sources":["components/StackedBarChart/StackedBarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAErD,iGAAiG;AACjG,MAAM,CAAC,IAAM,eAAe,GAAmD,MAAM,CAInF,mBAAmB,EAAE,SAAS,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/components/StackedBarChart/StackedBarChart.styles.d.ts

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

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

@@ -1,94 +0,0 @@
-import { __assign } from "tslib";
-import { FontSizes, FontWeights, HighContrastSelector } from '@fluentui/react/lib/Styling';
-export 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: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }),
-        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: FontSizes.small,
-            fontWeight: FontWeights.semibold,
-            color: theme.palette.black,
-        },
-        ratioDenominator: {
-            fontSize: 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[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[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),
-        },
-    };
-};
-//# sourceMappingURL=StackedBarChart.styles.js.map

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

@@ -1 +0,0 @@
-{"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: '5px',\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"]}