@fluentui/react-charting 5.23.63 → 5.23.65

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

@@ -0,0 +1,366 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { classNamesFunction, getId, getRTL } 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, getAccessibleDataObject, getNextGradient } from '../../utilities/index';
+import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
+import { convertToLocaleString } from '../../utilities/locale-util';
+var getClassNames = classNamesFunction();
+var StackedBarChartBase = /** @class */ (function (_super) {
+    __extends(StackedBarChartBase, _super);
+    function StackedBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRTL = getRTL();
+        _this._handleChartMouseLeave = function () {
+            _this._calloutAnchorPoint = null;
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        _this._closeCallout = function () {
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        /**
+         * This function checks if the given legend is highlighted or not.
+         * A legend can be highlighted in 2 ways:
+         * 1. selection: if the user clicks on it
+         * 2. hovering: if there is no selected legend and the user hovers over it
+         */
+        _this._legendHighlighted = function (legendTitle) {
+            return (_this.state.selectedLegend === legendTitle ||
+                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+        };
+        /**
+         * This function checks if none of the legends is selected or hovered.
+         */
+        _this._noLegendHighlighted = function () {
+            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+        };
+        _this._getAriaLabel = function (point) {
+            var _a;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData || point.data || 0;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".");
+        };
+        _this.state = {
+            isCalloutVisible: false,
+            selectedLegend: '',
+            activeLegend: '',
+            refSelected: null,
+            dataForHoverCard: 0,
+            color: '',
+            xCalloutValue: '',
+            yCalloutValue: '',
+            calloutLegend: '',
+            barSpacingInPercent: 0,
+        };
+        _this._refArray = [];
+        _this._onLeave = _this._onLeave.bind(_this);
+        _this._refCallback = _this._refCallback.bind(_this);
+        _this._onBarLeave = _this._onBarLeave.bind(_this);
+        _this._calloutId = getId('callout');
+        _this._emptyChartId = getId('_SBC_empty');
+        _this.barChartSvgRef = React.createRef();
+        return _this;
+    }
+    StackedBarChartBase.prototype.componentDidMount = function () {
+        var _a;
+        var svgWidth = ((_a = this.barChartSvgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        var MARGIN_WIDTH_IN_PX = 3;
+        if (svgWidth) {
+            var currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+            this.setState({ barSpacingInPercent: currentBarSpacing });
+        }
+    };
+    StackedBarChartBase.prototype.render = function () {
+        if (!this._isChartEmpty()) {
+            this._adjustProps();
+            var _a = this.props, data_1 = _a.data, benchmarkData = _a.benchmarkData, targetData = _a.targetData, hideNumberDisplay = _a.hideNumberDisplay, ignoreFixStyle = _a.ignoreFixStyle, culture_1 = _a.culture;
+            var palette = this.props.theme.palette;
+            var barHeight = ignoreFixStyle || data_1.chartData.length > 2 ? this.props.barHeight : 12;
+            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_1, barHeight, palette, benchmarkData, targetData);
+            var showRatio = hideNumberDisplay === false && !ignoreFixStyle && data_1.chartData.length === 2;
+            var showNumber = hideNumberDisplay === false && !ignoreFixStyle && data_1.chartData.length === 1;
+            var total = data_1.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_1.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,
+                showTriangle: !!(benchmarkData || targetData),
+            });
+            var getChartData = function () {
+                return convertToLocaleString(data_1.chartData[0].data ? data_1.chartData[0].data : 0, culture_1);
+            };
+            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_1.chartTitle && (React.createElement(FocusableTooltipText, { className: this._classNames.chartTitleLeft, content: data_1.chartTitle, accessibilityData: data_1.chartTitleAccessibilityData })),
+                        showRatio && (React.createElement("div", __assign({}, getAccessibleDataObject(data_1.chartDataAccessibilityData, 'text', false)),
+                            React.createElement("span", { className: this._classNames.ratioNumerator }, getChartData()),
+                            !this.props.hideDenominator && (React.createElement("span", { className: this._classNames.ratioDenominator }, ' / ' + convertToLocaleString(total, culture_1))))),
+                        showNumber && (React.createElement("div", __assign({ className: this._classNames.ratioNumerator }, getAccessibleDataObject(data_1.chartDataAccessibilityData, 'text', false)), 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", { ref: this.barChartSvgRef, className: this._classNames.chart, "aria-label": data_1 === null || data_1 === void 0 ? void 0 : data_1.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, 
+                                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                                preventDismissOnLostFocus: true, 
+                                /** Keep the callout updated with details of focused/hovered bar */
+                                shouldUpdateWhenHidden: 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.calloutLegend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, color: this.state.color, culture: culture_1 }))))))),
+                showLegend && React.createElement("div", { className: this._classNames.legendContainer }, bars[1])));
+        }
+        return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    };
+    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,
+        });
+    };
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
+    StackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, benchmarkData, targetData) {
+        var _this = this;
+        var _a;
+        var noOfBars = ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.reduce(function (count, point) { return (count += (point.data || 0) > 0 ? 1 : 0); }, 0)) ||
+            1;
+        var totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
+        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 sumOfPercent = 0;
+        data.chartData.map(function (point, index) {
+            var pointData = point.data ? point.data : 0;
+            value = (pointData / total) * 100;
+            if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            else if (value > 99 && value !== 100) {
+                value = 99;
+            }
+            sumOfPercent += value;
+            return sumOfPercent;
+        });
+        /**
+         * The %age of the space occupied by the margin needs to subtracted
+         * while computing the scaling ratio, since the margins are not being
+         * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+         * Eg: 95% of the space is taken by the bars, 5% by the margins
+         * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+         * since that's only space available to the bars
+         */
+        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;
+        var bars = data.chartData.map(function (point, index) {
+            var _a, _b, _c, _d;
+            var startColor = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+            var endColor = startColor;
+            if (_this.props.enableGradient) {
+                startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || getNextGradient(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
+            }
+            var pointData = point.data ? point.data : 0;
+            // mapping data to the format Legends component needs
+            var legend = {
+                title: point.legend,
+                color: startColor,
+                action: total > 0
+                    ? function () {
+                        _this._onClick(point.legend);
+                    }
+                    : undefined,
+                hoverAction: total > 0
+                    ? function () {
+                        _this._handleChartMouseLeave();
+                        _this._onHover(point.legend);
+                    }
+                    : undefined,
+                onMouseOutAction: total > 0
+                    ? function () {
+                        _this._onLeave();
+                    }
+                    : undefined,
+            };
+            if (!point.placeHolder) {
+                legendDataItems.push(legend);
+            }
+            if (index > 0) {
+                prevPosition += value;
+            }
+            value = (pointData / total) * 100;
+            if (value < 1 && value !== 0) {
+                value = 1 / scalingRatio;
+            }
+            else if (value > 99 && value !== 100) {
+                value = 99 / scalingRatio;
+            }
+            else {
+                value = value / scalingRatio;
+            }
+            startingPoint.push(prevPosition);
+            var styles = _this.props.styles;
+            var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
+            _this._classNames = getClassNames(styles, {
+                theme: _this.props.theme,
+                shouldHighlight: shouldHighlight,
+                href: _this.props.href,
+            });
+            var gradientId = getId('SBC_Gradient') + "_".concat(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 && shouldHighlight, onFocus: _this._onBarFocus.bind(_this, pointData, startColor, point), onBlur: _this._onBarLeave, "aria-label": _this._getAriaLabel(point), role: "img", onMouseOver: _this._onBarHover.bind(_this, pointData, startColor, point), onMouseMove: _this._onBarHover.bind(_this, pointData, startColor, point), onMouseLeave: _this._onBarLeave, pointerEvents: "all", onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : point.onClick },
+                _this.props.enableGradient && (React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: gradientId },
+                        React.createElement("stop", { offset: "0", stopColor: startColor }),
+                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                React.createElement("rect", { key: index, id: getId('_SBC_bar'), x: "".concat(_this._isRTL
+                        ? 100 - startingPoint[index] - value - _this.state.barSpacingInPercent * index
+                        : startingPoint[index] + _this.state.barSpacingInPercent * index, "%"), y: 0, width: value + '%', height: barHeight, rx: _this.props.roundCorners ? 3 : 0, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor })));
+        });
+        // 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.neutralLight),
+                ]
+                : bars,
+            legends,
+        ];
+    };
+    StackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
+        var _this = this;
+        this._refArray.forEach(function (obj) {
+            if (obj.index === point.legend) {
+                _this.setState({
+                    refSelected: obj.refElement,
+                    /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+                    isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
+                    calloutLegend: point.legend,
+                    dataForHoverCard: pointData,
+                    color: color,
+                    xCalloutValue: point.xAxisCalloutData,
+                    yCalloutValue: point.yAxisCalloutData,
+                    dataPointCalloutProps: __assign(__assign({}, point), { color: color }),
+                    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, id: getId('_SBC_empty_bar_'), 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 (legendTitle) {
+        if (this.state.selectedLegend === legendTitle) {
+            this.setState({
+                selectedLegend: '',
+            });
+        }
+        else {
+            this.setState({
+                selectedLegend: legendTitle,
+            });
+        }
+    };
+    StackedBarChartBase.prototype._onHover = function (legendTitle) {
+        this.setState({
+            activeLegend: legendTitle,
+        });
+    };
+    StackedBarChartBase.prototype._onLeave = function () {
+        this.setState({
+            activeLegend: '',
+        });
+    };
+    StackedBarChartBase.prototype._onBarHover = function (pointData, color, point, mouseEvent) {
+        mouseEvent.persist();
+        if (this._calloutAnchorPoint !== point) {
+            this._calloutAnchorPoint = point;
+            this.setState({
+                refSelected: mouseEvent,
+                /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+                isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                calloutLegend: point.legend,
+                dataForHoverCard: pointData,
+                color: color,
+                xCalloutValue: point.xAxisCalloutData,
+                yCalloutValue: point.yAxisCalloutData,
+                dataPointCalloutProps: __assign(__assign({}, point), { color: color }),
+                callOutAccessibilityData: point.callOutAccessibilityData,
+            });
+        }
+    };
+    StackedBarChartBase.prototype._onBarLeave = function () {
+        /**/
+    };
+    StackedBarChartBase.prototype._redirectToUrl = function (href) {
+        href ? (window.location.href = href) : '';
+    };
+    StackedBarChartBase.prototype._isChartEmpty = function () {
+        return !(this.props.data && this.props.data.chartData && this.props.data.chartData.length > 0);
+    };
+    StackedBarChartBase.defaultProps = {
+        barHeight: 12,
+        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

@@ -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, getRTL } 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, getAccessibleDataObject, getNextGradient } from '../../utilities/index';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { convertToLocaleString } from '../../utilities/locale-util';\n\nconst getClassNames = classNamesFunction<IStackedBarChartStyleProps, IStackedBarChartStyles>();\nexport interface IStackedBarChartState {\n  isCalloutVisible: boolean;\n  selectedLegend: string;\n  activeLegend: string;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  refSelected: any;\n  dataForHoverCard: number;\n  color: string;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  dataPointCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n  calloutLegend: string;\n  barSpacingInPercent: number;\n}\n\nexport class StackedBarChartBase extends React.Component<IStackedBarChartProps, IStackedBarChartState> {\n  public static defaultProps: Partial<IStackedBarChartProps> = {\n    barHeight: 12,\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  private _emptyChartId: string;\n  private barChartSvgRef: React.RefObject<SVGSVGElement>;\n  private _isRTL = getRTL();\n\n  public constructor(props: IStackedBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      selectedLegend: '',\n      activeLegend: '',\n      refSelected: null,\n      dataForHoverCard: 0,\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      calloutLegend: '',\n      barSpacingInPercent: 0,\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    this._emptyChartId = getId('_SBC_empty');\n    this.barChartSvgRef = React.createRef<SVGSVGElement>();\n  }\n\n  public componentDidMount(): void {\n    const svgWidth = this.barChartSvgRef.current?.getBoundingClientRect().width || 0;\n    const MARGIN_WIDTH_IN_PX = 3;\n    if (svgWidth) {\n      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n      this.setState({ barSpacingInPercent: currentBarSpacing });\n    }\n  }\n\n  public render(): JSX.Element {\n    if (!this._isChartEmpty()) {\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 : 12;\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        showTriangle: !!(benchmarkData || targetData),\n      });\n      const getChartData = () =>\n        convertToLocaleString(data!.chartData![0].data ? data!.chartData![0].data : 0, culture);\n\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                <FocusableTooltipText\n                  className={this._classNames.chartTitleLeft}\n                  content={data!.chartTitle}\n                  accessibilityData={data!.chartTitleAccessibilityData}\n                />\n              )}\n              {showRatio && (\n                <div {...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}>\n                  <span className={this._classNames.ratioNumerator}>{getChartData()}</span>\n                  {!this.props.hideDenominator && (\n                    <span className={this._classNames.ratioDenominator}>\n                      {' / ' + convertToLocaleString(total, culture)}\n                    </span>\n                  )}\n                </div>\n              )}\n              {showNumber && (\n                <div\n                  className={this._classNames.ratioNumerator}\n                  {...getAccessibleDataObject(data!.chartDataAccessibilityData, 'text', false)}\n                >\n                  {getChartData()}\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 ref={this.barChartSvgRef} 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                  // eslint-disable-next-line @typescript-eslint/no-deprecated\n                  preventDismissOnLostFocus={true}\n                  /** Keep the callout updated with details of focused/hovered bar */\n                  shouldUpdateWhenHidden={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.calloutLegend}\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    return (\n      <div\n        id={this._emptyChartId}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  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  /**\n   * The Create bar functions returns an array of <rect> elements, which form the bars\n   * For each bar an x value, and a width needs to be specified\n   * The computations are done based on percentages\n   * Extra margin is also provided, in the x value to provide some spacing\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 noOfBars =\n      data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n      1;\n    const totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);\n\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    let sumOfPercent = 0;\n\n    data.chartData!.map((point: IChartDataPoint, index: number) => {\n      const pointData = point.data ? point.data : 0;\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      sumOfPercent += value;\n\n      return sumOfPercent;\n    });\n\n    /**\n     * The %age of the space occupied by the margin needs to subtracted\n     * while computing the scaling ratio, since the margins are not being\n     * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n     * Eg: 95% of the space is taken by the bars, 5% by the margins\n     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n     * since that's only space available to the bars\n     */\n    const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;\n\n    const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n      let startColor: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      let endColor: string = startColor;\n      if (this.props.enableGradient) {\n        startColor = point.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0];\n        endColor = point.gradient?.[1] || getNextGradient(index, 0, this.props.theme?.isInverted)[1];\n      }\n\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: startColor,\n        action:\n          total > 0\n            ? () => {\n                this._onClick(point.legend!);\n              }\n            : undefined,\n        hoverAction:\n          total > 0\n            ? () => {\n                this._handleChartMouseLeave();\n                this._onHover(point.legend!);\n              }\n            : undefined,\n        onMouseOutAction:\n          total > 0\n            ? () => {\n                this._onLeave();\n              }\n            : undefined,\n      };\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 / scalingRatio;\n      } else if (value > 99 && value !== 100) {\n        value = 99 / scalingRatio;\n      } else {\n        value = value / scalingRatio;\n      }\n\n      startingPoint.push(prevPosition);\n      const styles = this.props.styles;\n      const shouldHighlight = this._legendHighlighted(point.legend!) || this._noLegendHighlighted() ? true : false;\n      this._classNames = getClassNames(styles!, {\n        theme: this.props.theme!,\n        shouldHighlight,\n        href: this.props.href!,\n      });\n\n      const gradientId = getId('SBC_Gradient') + `_${index}`;\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 && shouldHighlight}\n          onFocus={this._onBarFocus.bind(this, pointData, startColor, point)}\n          onBlur={this._onBarLeave}\n          aria-label={this._getAriaLabel(point)}\n          role=\"img\"\n          onMouseOver={this._onBarHover.bind(this, pointData, startColor, point)}\n          onMouseMove={this._onBarHover.bind(this, pointData, startColor, point)}\n          onMouseLeave={this._onBarLeave}\n          pointerEvents=\"all\"\n          onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : point.onClick}\n        >\n          {this.props.enableGradient && (\n            <defs>\n              <linearGradient id={gradientId}>\n                <stop offset=\"0\" stopColor={startColor} />\n                <stop offset=\"100%\" stopColor={endColor} />\n              </linearGradient>\n            </defs>\n          )}\n          <rect\n            key={index}\n            id={getId('_SBC_bar')}\n            x={`${\n              this._isRTL\n                ? 100 - startingPoint[index] - value - this.state.barSpacingInPercent * index\n                : startingPoint[index] + this.state.barSpacingInPercent * index\n            }%`}\n            y={0}\n            width={value + '%'}\n            height={barHeight}\n            rx={this.props.roundCorners ? 3 : 0}\n            fill={this.props.enableGradient ? `url(#${gradientId})` : startColor}\n          />\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.neutralLight,\n            ),\n          ]\n        : bars,\n      legends,\n    ];\n  }\n\n  private _onBarFocus(pointData: number, color: string, point: IChartDataPoint): void {\n    this._refArray.forEach((obj: IRefArrayData) => {\n      if (obj.index === point.legend!) {\n        this.setState({\n          refSelected: obj.refElement,\n          /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */\n          isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,\n          calloutLegend: point.legend!,\n          dataForHoverCard: pointData,\n          color,\n          xCalloutValue: point.xAxisCalloutData!,\n          yCalloutValue: point.yAxisCalloutData!,\n          dataPointCalloutProps: { ...point, color },\n          callOutAccessibilityData: point.callOutAccessibilityData!,\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} id={getId('_SBC_empty_bar_')} 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(legendTitle: string): void {\n    if (this.state.selectedLegend === legendTitle) {\n      this.setState({\n        selectedLegend: '',\n      });\n    } else {\n      this.setState({\n        selectedLegend: legendTitle,\n      });\n    }\n  }\n\n  private _onHover(legendTitle: string): void {\n    this.setState({\n      activeLegend: legendTitle,\n    });\n  }\n\n  private _onLeave(): void {\n    this.setState({\n      activeLegend: '',\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 (this._calloutAnchorPoint !== point) {\n      this._calloutAnchorPoint = point;\n      this.setState({\n        refSelected: mouseEvent,\n        /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */\n        isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend!,\n        calloutLegend: point.legend!,\n        dataForHoverCard: pointData,\n        color,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        dataPointCalloutProps: { ...point, color },\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  /**\n   * This function checks if the given legend is highlighted or not.\n   * A legend can be highlighted in 2 ways:\n   * 1. selection: if the user clicks on it\n   * 2. hovering: if there is no selected legend and the user hovers over it\n   */\n  private _legendHighlighted = (legendTitle: string) => {\n    return (\n      this.state.selectedLegend === legendTitle ||\n      (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n    );\n  };\n\n  /**\n   * This function checks if none of the legends is selected or hovered.\n   */\n  private _noLegendHighlighted = () => {\n    return this.state.selectedLegend === '' && this.state.activeLegend === '';\n  };\n\n  private _getAriaLabel = (point: IChartDataPoint): string => {\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue = point.yAxisCalloutData || point.data || 0;\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  private _isChartEmpty(): boolean {\n    return !(this.props.data && this.props.data.chartData && this.props.data.chartData.length > 0);\n  }\n}\n"]}

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

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

package/lib/components/StackedBarChart/StackedBarChart.js

@@ -0,0 +1,10 @@
+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.
+/**
+ * StackedBarchart component
+ * {@docCategory StackedBarChart}
+ */
+export var StackedBarChart = styled(StackedBarChartBase, getStyles);
+//# sourceMappingURL=StackedBarChart.js.map

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

@@ -0,0 +1 @@
+{"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;;;GAGG;AACH,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.\n/**\n * StackedBarchart component\n * {@docCategory StackedBarChart}\n */\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

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

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

@@ -0,0 +1,103 @@
+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, showTriangle = props.showTriangle;
+    return {
+        root: [
+            theme.fonts.medium,
+            'ms-StackedBarChart',
+            {
+                width: width ? width : '100%',
+                display: 'flex',
+                flexDirection: 'column',
+            },
+            className,
+        ],
+        chart: {
+            width: '100%',
+            height: barHeight ? barHeight : 12,
+            display: 'block',
+            marginBottom: showTriangle ? '16px' : '10px',
+            overflow: 'visible',
+        },
+        chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
+        chartTitleLeft: {
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            display: 'block',
+            color: theme.palette.neutralPrimary,
+            marginBottom: '5px',
+        },
+        legendContainer: {
+            margin: '4px 0px 0px 4px',
+        },
+        opacityChangeOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+            cursor: href ? 'pointer' : 'default',
+            selectors: {
+                '&:focus': {
+                    stroke: theme.palette.black,
+                    strokeWidth: '2px',
+                },
+            },
+        },
+        ratioNumerator: {
+            fontSize: FontSizes.medium,
+            fontWeight: FontWeights.semibold,
+            color: theme.palette.neutralPrimary,
+        },
+        ratioDenominator: {
+            fontSize: FontSizes.medium,
+            color: theme.palette.neutralPrimary,
+        },
+        benchmarkContainer: {
+            position: 'relative',
+            height: '7px',
+            marginTop: '-3px',
+            marginBottom: '-1px',
+        },
+        benchmark: {
+            position: 'absolute',
+            left: 'calc(' + benchmarkRatio + '% - 4px)',
+            width: '0',
+            height: '0',
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '7px solid',
+            borderTopColor: benchmarkColor,
+            marginBottom: '4px',
+            selectors: (_a = {},
+                _a[HighContrastSelector] = {
+                    border: '0px',
+                    height: '7px',
+                    width: '7px',
+                    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+                    backgroundImage: "linear-gradient(to right, ".concat(benchmarkColor, ", ").concat(benchmarkColor, ")"),
+                },
+                _a),
+        },
+        target: {
+            position: 'absolute',
+            left: 'calc(' + targetRatio + '% - 4px)',
+            width: '0',
+            height: '0',
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '7px solid',
+            borderTopColor: targetColor,
+            marginBottom: '4px',
+            selectors: (_b = {},
+                _b[HighContrastSelector] = {
+                    border: '0px',
+                    height: '7px',
+                    width: '7px',
+                    clipPath: 'polygon(50% 100%, 0 0, 100% 0)',
+                    backgroundImage: "linear-gradient(to right, ".concat(targetColor, ", ").concat(targetColor, ")"),
+                },
+                _b),
+        },
+    };
+};
+//# sourceMappingURL=StackedBarChart.styles.js.map

package/lib/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    showTriangle,\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 : 12,\n      display: 'block',\n      marginBottom: showTriangle ? '16px' : '10px',\n      overflow: 'visible',\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n    },\n    chartTitleLeft: {\n      textOverflow: 'ellipsis',\n      overflow: 'hidden',\n      whiteSpace: 'nowrap',\n      display: 'block',\n      color: theme.palette.neutralPrimary,\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      selectors: {\n        '&:focus': {\n          stroke: theme.palette.black,\n          strokeWidth: '2px',\n        },\n      },\n    },\n    ratioNumerator: {\n      fontSize: FontSizes.medium,\n      fontWeight: FontWeights.semibold,\n      color: theme.palette.neutralPrimary,\n    },\n    ratioDenominator: {\n      fontSize: FontSizes.medium,\n      color: theme.palette.neutralPrimary,\n    },\n    benchmarkContainer: {\n      position: 'relative',\n      height: '7px',\n      marginTop: '-3px',\n      marginBottom: '-1px',\n    },\n    benchmark: {\n      position: 'absolute',\n      left: 'calc(' + benchmarkRatio + '% - 4px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '7px solid',\n      borderTopColor: benchmarkColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7px',\n          width: '7px',\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 + '% - 4px)',\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '7px solid',\n      borderTopColor: targetColor,\n      marginBottom: '4px',\n      selectors: {\n        [HighContrastSelector]: {\n          border: '0px',\n          height: '7px',\n          width: '7px',\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"]}