@fluentui/react-charting 5.12.24 → 5.12.27

package/lib/components/HorizontalBarChart/HorizontalBarChart.styles.js

@@ -0,0 +1,49 @@
+import { __assign } from "tslib";
+import { FontWeights } from '@fluentui/react/lib/Styling';
+export var getHorizontalBarChartStyles = function (props) {
+    var className = props.className, theme = props.theme, width = props.width;
+    var palette = theme.palette;
+    return {
+        root: [
+            {
+                display: 'flex',
+                flexDirection: 'column',
+                width: width ? width : '100%',
+            },
+            className,
+        ],
+        items: {
+            height: '32px',
+            marginTop: '5px',
+            position: 'relative',
+        },
+        chart: {
+            width: '100%',
+            height: '8px',
+            marginBottom: '11px',
+        },
+        barWrapper: {
+            stroke: theme.palette.white,
+            strokeWidth: 2,
+        },
+        chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between', marginBottom: '3px' }),
+        chartDataText: {
+            fontWeight: FontWeights.bold,
+        },
+        chartDataTextDenominator: {
+            fontWeight: FontWeights.semibold,
+        },
+        triangle: {
+            width: '0',
+            height: '0',
+            borderLeft: '4px solid transparent',
+            borderRight: '4px solid transparent',
+            borderTop: '8px solid',
+            borderTopColor: palette.blue,
+            marginBottom: '4px',
+            position: 'absolute',
+            top: '12px',
+        },
+    };
+};
+//# sourceMappingURL=HorizontalBarChart.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,GAAmB,KAAK,UAAxB,EAAE,KAAK,GAAY,KAAK,MAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IAClC,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;YACd,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,UAAU;SACrB;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,KAAK;YACb,YAAY,EAAE,MAAM;SACrB;QACD,UAAU,EAAE;YACV,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;YAC3B,WAAW,EAAE,CAAC;SACf;QACD,UAAU,wBACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,KAAK,GACpB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,WAAW,CAAC,IAAI;SAC7B;QACD,wBAAwB,EAAE;YACxB,UAAU,EAAE,WAAW,CAAC,QAAQ;SACjC;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,MAAM;SACZ;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IHorizontalBarChartStyleProps, IHorizontalBarChartStyles } from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n  const { className, theme, width } = props;\n  const { palette } = theme!;\n\n  return {\n    root: [\n      {\n        display: 'flex',\n        flexDirection: 'column',\n        width: width ? width : '100%',\n      },\n      className,\n    ],\n    items: {\n      height: '32px',\n      marginTop: '5px',\n      position: 'relative',\n    },\n    chart: {\n      width: '100%',\n      height: '8px',\n      marginBottom: '11px',\n    },\n    barWrapper: {\n      stroke: theme.palette.white,\n      strokeWidth: 2,\n    },\n    chartTitle: {\n      ...theme.fonts.small,\n      display: 'flex',\n      justifyContent: 'space-between',\n      marginBottom: '3px',\n    },\n    chartDataText: {\n      fontWeight: FontWeights.bold,\n    },\n    chartDataTextDenominator: {\n      fontWeight: FontWeights.semibold,\n    },\n    triangle: {\n      width: '0',\n      height: '0',\n      borderLeft: '4px solid transparent',\n      borderRight: '4px solid transparent',\n      borderTop: '8px solid',\n      borderTopColor: palette.blue,\n      marginBottom: '4px',\n      position: 'absolute',\n      top: '12px',\n    },\n  };\n};\n"]}

package/lib/components/HorizontalBarChart/HorizontalBarChart.types.d.ts

@@ -0,0 +1,130 @@
+import { IChartProps, IChartDataPoint } from './index';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { ICalloutProps } from '@fluentui/react/lib/Callout';
+import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
+export interface IHorizontalBarChartProps {
+    /**
+     * An array of chart data points for the Horizontal bar chart
+     */
+    data?: IChartProps[];
+    /**
+     * Width of bar chart
+     */
+    width?: number;
+    /**
+     * Height of bar chart
+     * @default 15
+     */
+    barHeight?: number;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Theme (provided through customization.)
+     */
+    theme?: ITheme;
+    /**
+     * This property tells whether to show ratio on top of stacked bar chart or not.
+     */
+    hideRatio?: boolean[];
+    /**
+     * Do not show tooltips in chart
+     *
+     * @default false
+     */
+    hideTooltip?: boolean;
+    /**
+     * This property tells how to show data text on top right of bar chart.
+     * If barChartCustomData props added, then this props will be overrided.
+     * @default 'default'
+     */
+    chartDataMode?: ChartDataMode;
+    /**
+     * Call to provide customized styling that will layer on top of the variant rules.
+     */
+    styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;
+    /**
+     * Define a custom callout renderer for a horizontal bar
+     */
+    onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;
+    /**
+     * props for the callout in the chart
+     */
+    calloutProps?: Partial<ICalloutProps>;
+    /**
+     * Custom text to the chart (right side of the chart)
+     * IChartProps will be available as props to the method prop.
+     * If this method not given, default values (IHorizontalDataPoint {x,y})
+     * will be used to display the data/text based on given chartModeData prop.
+     */
+    barChartCustomData?: IRenderFunction<IChartProps>;
+    /**
+     * The prop used to define the culture to localized the numbers
+     */
+    culture?: string;
+}
+export interface IHorizontalBarChartStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
+    /**
+     * Additional CSS class(es) to apply to the StackedBarChart.
+     */
+    className?: string;
+    /**
+     * Width of the chart.
+     */
+    width: number | undefined;
+    /**
+     * line color for callout
+     */
+    color?: string;
+    /**
+     * Height of bar chart
+     * @default 15
+     */
+    barHeight?: number;
+}
+export interface IHorizontalBarChartStyles {
+    /**
+     * Styling for the root container
+     */
+    root: IStyle;
+    /**
+     * Styling for each item in the container
+     */
+    items: IStyle;
+    /**
+     * Style for the chart.
+     */
+    chart: IStyle;
+    /**
+     * Style for the chart Title.
+     */
+    chartTitle: IStyle;
+    /**
+     * Style for the bars.
+     */
+    barWrapper: IStyle;
+    /**
+     * Style for the chart data text.
+     */
+    chartDataText: IStyle;
+    /**
+     * Style for the chart data text denominator.
+     */
+    chartDataTextDenominator: IStyle;
+    /**
+     * Style for the benchmark triangle
+     */
+    triangle: IStyle;
+}
+/**
+ * Chart data mode for chart data text
+ * default: show the datapoint.x value
+ * fraction: show the fraction of datapoint.x/datapoint.y
+ * percentage: show the percentage of (datapoint.x/datapoint.y)%
+ */
+export declare type ChartDataMode = 'default' | 'fraction' | 'percentage';

package/lib/components/HorizontalBarChart/HorizontalBarChart.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=HorizontalBarChart.types.js.map

package/lib/components/HorizontalBarChart/HorizontalBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarChart.types.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IChartProps, IChartDataPoint } from './index';\nimport { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\n\nexport interface IHorizontalBarChartProps {\n  /**\n   * An array of chart data points for the Horizontal bar chart\n   */\n  data?: IChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Theme (provided through customization.)\n   */\n  theme?: ITheme;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * This property tells how to show data text on top right of bar chart.\n   * If barChartCustomData props added, then this props will be overrided.\n   * @default 'default'\n   */\n  chartDataMode?: ChartDataMode;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>;\n\n  /**\n   * Define a custom callout renderer for a horizontal bar\n   */\n  onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>;\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: Partial<ICalloutProps>;\n\n  /**\n   * Custom text to the chart (right side of the chart)\n   * IChartProps will be available as props to the method prop.\n   * If this method not given, default values (IHorizontalDataPoint {x,y})\n   * will be used to display the data/text based on given chartModeData prop.\n   */\n  barChartCustomData?: IRenderFunction<IChartProps>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\nexport interface IHorizontalBarChartStyleProps {\n  /**\n   * Theme (provided through customization.)\n   */\n  theme: ITheme;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * Width of the chart.\n   */\n  width: number | undefined;\n\n  /**\n   * line color for callout\n   */\n  color?: string;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n}\n\nexport interface IHorizontalBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: IStyle;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: IStyle;\n  /**\n   * Style for the chart.\n   */\n  chart: IStyle;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: IStyle;\n\n  /**\n   * Style for the bars.\n   */\n  barWrapper: IStyle;\n\n  /**\n   * Style for the chart data text.\n   */\n  chartDataText: IStyle;\n\n  /**\n   * Style for the chart data text denominator.\n   */\n  chartDataTextDenominator: IStyle;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  triangle: IStyle;\n}\n\n/**\n * Chart data mode for chart data text\n * default: show the datapoint.x value\n * fraction: show the fraction of datapoint.x/datapoint.y\n * percentage: show the percentage of (datapoint.x/datapoint.y)%\n */\nexport type ChartDataMode = 'default' | 'fraction' | 'percentage';\n"]}

package/lib/components/HorizontalBarChart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './HorizontalBarChart';
+export * from './HorizontalBarChart.types';
+export * from '../../types/index';

package/lib/components/HorizontalBarChart/index.js

@@ -0,0 +1,4 @@
+export * from './HorizontalBarChart';
+export * from './HorizontalBarChart.types';
+export * from '../../types/index';
+//# sourceMappingURL=index.js.map

package/lib/components/HorizontalBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './HorizontalBarChart';\nexport * from './HorizontalBarChart.types';\nexport * from '../../types/index';\n"]}

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { ILegendsProps } from './Legends.types';
+export interface ILegendState {
+    selectedLegend: string;
+    selecetedLegendInHoverCard: string;
+    selectedState: boolean;
+    hoverState: boolean;
+    isHoverCardVisible: boolean;
+    selectedLegends: string[];
+}
+export declare class LegendsBase extends React.Component<ILegendsProps, ILegendState> {
+    private _hoverCardRef;
+    private _classNames;
+    constructor(props: ILegendsProps);
+    componentDidUpdate(prevProps: ILegendsProps): void;
+    render(): JSX.Element;
+    private _generateData;
+    private _onRenderData;
+    private _onReduceData;
+    private _onGrowData;
+    /**
+     * This function will get called when there is an ability to
+     * select  multiple legends
+     * @param legend ILegend
+     */
+    private _canSelectMultipleLegends;
+    /**
+     * This function will get called when there is
+     * ability to select only single legend
+     * @param legend ILegend
+     */
+    private _canSelectOnlySingleLegend;
+    private _onClick;
+    private _onRenderCompactCard;
+    private _renderOverflowItems;
+    private _hoverCardVisible;
+    private _onHoverOverLegend;
+    private _onLeave;
+    private _renderButton;
+    private _getShape;
+    private _getColor;
+}

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

@@ -0,0 +1,311 @@
+import { __assign, __extends, __spreadArray } from "tslib";
+import * as React from 'react';
+import { HoverCard, HoverCardType } from '@fluentui/react/lib/HoverCard';
+import { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';
+import { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';
+import { OverflowSet } from '@fluentui/react/lib/OverflowSet';
+import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
+import { Shape } from './shape';
+import { silceOrAppendToArray } from '../../utilities/utilities';
+var getClassNames = classNamesFunction();
+var LegendsBase = /** @class */ (function (_super) {
+    __extends(LegendsBase, _super);
+    function LegendsBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._onRenderData = function (data) {
+            var _a = _this.props, overflowProps = _a.overflowProps, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b;
+            var rootStyles = {
+                root: {
+                    justifyContent: _this.props.centerLegends ? 'center' : 'unset',
+                    flexWrap: 'wrap',
+                },
+            };
+            return (React.createElement(FocusZone, __assign({}, (allowFocusOnLegends && { role: 'listbox', 'aria-label': 'Legends' })),
+                React.createElement(OverflowSet, __assign({ items: data.primary, overflowItems: data.overflow, onRenderItem: _this._renderButton, onRenderOverflowButton: _this._renderOverflowItems }, overflowProps, { styles: __assign(__assign({}, rootStyles), overflowProps === null || overflowProps === void 0 ? void 0 : overflowProps.styles) }))));
+        };
+        _this._onReduceData = function (currentdata) {
+            if (currentdata.primary.length === 0) {
+                return;
+            }
+            var overflow = __spreadArray(__spreadArray([], currentdata.primary.slice(-1)), currentdata.overflow);
+            var primary = currentdata.primary.slice(0, -1);
+            return { primary: primary, overflow: overflow };
+        };
+        _this._onGrowData = function (currentdata) {
+            if (currentdata.overflow.length === 0) {
+                return;
+            }
+            var overflow = currentdata.overflow.slice(1);
+            var primary = __spreadArray(__spreadArray([], currentdata.primary), currentdata.overflow.slice(0, 1));
+            return { primary: primary, overflow: overflow };
+        };
+        /**
+         * This function will get called when there is an ability to
+         * select  multiple legends
+         * @param legend ILegend
+         */
+        _this._canSelectMultipleLegends = function (legend) {
+            var selectedLegends = silceOrAppendToArray(_this.state.selectedLegends, legend.title);
+            _this.setState({
+                //check if user selected all legends then empty it get the default behaviour
+                selectedLegends: selectedLegends.length === _this.props.legends.length ? [] : selectedLegends,
+                // make selectedState to false if none or all the legends selected
+                selectedState: selectedLegends.length === 0 || selectedLegends.length === _this.props.legends.length ? false : true,
+                selecetedLegendInHoverCard: _this.state.isHoverCardVisible ? legend.title : 'none',
+                selectedLegend: 'none',
+                hoverState: false,
+            });
+        };
+        /**
+         * This function will get called when there is
+         * ability to select only single legend
+         * @param legend ILegend
+         */
+        _this._canSelectOnlySingleLegend = function (legend) {
+            if (_this.state.selectedState === true && _this.state.selectedLegend === legend.title) {
+                _this.setState({
+                    selectedLegend: 'none',
+                    selectedState: false,
+                    selecetedLegendInHoverCard: _this.state.isHoverCardVisible ? legend.title : 'none',
+                });
+            }
+            else {
+                _this.setState({
+                    hoverState: true,
+                    selectedState: true,
+                    selectedLegend: legend.title,
+                    selecetedLegendInHoverCard: _this.state.isHoverCardVisible ? legend.title : 'none',
+                });
+            }
+        };
+        _this._onClick = function (legend) {
+            if (legend.action) {
+                var _a = _this.props.canSelectMultipleLegends, canSelectMultipleLegends = _a === void 0 ? false : _a;
+                if (canSelectMultipleLegends) {
+                    _this._canSelectMultipleLegends(legend);
+                }
+                else {
+                    _this._canSelectOnlySingleLegend(legend);
+                }
+                legend.action();
+            }
+        };
+        _this._onRenderCompactCard = function (expandingCard) {
+            var _a = _this.props, _b = _a.allowFocusOnLegends, allowFocusOnLegends = _b === void 0 ? true : _b, className = _a.className, styles = _a.styles, theme = _a.theme;
+            var overflowHoverCardLegends = [];
+            var classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+            });
+            expandingCard.renderData.forEach(function (legend, index) {
+                var hoverCardElement = _this._renderButton(legend, index, true);
+                overflowHoverCardLegends.push(hoverCardElement);
+            });
+            var hoverCardData = (React.createElement(FocusZone, __assign({}, (allowFocusOnLegends && { role: 'listbox' }), { direction: FocusZoneDirection.vertical }, _this.props.focusZonePropsInHoverCard, { className: classNames.hoverCardRoot }), overflowHoverCardLegends));
+            return hoverCardData;
+        };
+        _this._renderOverflowItems = function (legends) {
+            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
+            var items = [];
+            legends.forEach(function (legend, i) {
+                items.push({ key: i.toString(), name: legend.title, onClick: legend.action });
+            });
+            var renderOverflowData = { renderData: legends };
+            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles, overflowText = _b.overflowText;
+            var classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+            });
+            var plainCardProps = {
+                onRenderPlainCard: _this._onRenderCompactCard,
+                renderData: renderOverflowData,
+            };
+            var overflowString = overflowText ? overflowText : 'more';
+            // execute similar to "_onClick" and "_onLeave" logic at HoverCard onCardHide event
+            var onHoverCardHideHandler = function () {
+                var _a = _this.props.canSelectMultipleLegends, canSelectMultipleLegends = _a === void 0 ? false : _a;
+                var selectedOverflowItem = find(legends, function (legend) {
+                    return legend.title === _this.state.selecetedLegendInHoverCard || legend.title === _this.state.selectedLegend;
+                });
+                _this.setState({
+                    isHoverCardVisible: false,
+                    selecetedLegendInHoverCard: 'none',
+                    selectedLegends: [],
+                }, function () {
+                    if (selectedOverflowItem) {
+                        _this.setState({ selectedLegend: 'none', selectedState: false }, function () {
+                            if (selectedOverflowItem.action && !canSelectMultipleLegends) {
+                                selectedOverflowItem.action();
+                            }
+                            if (_this.props.onLegendHoverCardLeave && canSelectMultipleLegends) {
+                                _this.props.onLegendHoverCardLeave();
+                            }
+                            _this.setState({ hoverState: false }, function () {
+                                if (selectedOverflowItem.onMouseOutAction) {
+                                    selectedOverflowItem.onMouseOutAction(true);
+                                }
+                            });
+                        });
+                    }
+                });
+            };
+            return (React.createElement(HoverCard, { type: HoverCardType.plain, plainCardProps: plainCardProps, instantOpenOnClick: true, 
+                // eslint-disable-next-line react/jsx-no-bind
+                onCardHide: onHoverCardHideHandler, setInitialFocus: true, trapFocus: true, onCardVisible: _this._hoverCardVisible, styles: classNames.subComponentStyles.hoverCardStyles, cardDismissDelay: 300, target: _this._hoverCardRef },
+                React.createElement("div", __assign({ className: classNames.overflowIndicationTextStyle, ref: function (rootElem) { return (_this._hoverCardRef = rootElem); } }, (allowFocusOnLegends && {
+                    role: 'link',
+                    'aria-expanded': _this.state.isHoverCardVisible,
+                    'aria-label': items.length + " " + overflowString,
+                }), { "data-is-focusable": allowFocusOnLegends }),
+                    items.length,
+                    " ",
+                    overflowString)));
+        };
+        _this._hoverCardVisible = function () {
+            _this.setState({ isHoverCardVisible: true });
+        };
+        _this._onHoverOverLegend = function (legend) {
+            if (!_this.state.selectedState) {
+                if (legend.hoverAction) {
+                    _this.setState({ hoverState: true, selectedLegend: legend.title });
+                    legend.hoverAction();
+                }
+            }
+        };
+        _this._onLeave = function (legend) {
+            if (!_this.state.selectedState) {
+                if (legend.onMouseOutAction) {
+                    _this.setState({ hoverState: false, selectedLegend: 'none' });
+                    legend.onMouseOutAction();
+                }
+            }
+        };
+        _this._renderButton = function (data, index, overflow) {
+            var _a = _this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
+            var legend = {
+                title: data.title,
+                color: data.color,
+                shape: data.shape,
+                action: data.action,
+                hoverAction: data.hoverAction,
+                onMouseOutAction: data.onMouseOutAction,
+                stripePattern: data.stripePattern,
+                isLineLegendInBarChart: data.isLineLegendInBarChart,
+                opacity: data.opacity,
+            };
+            var color = _this._getColor(legend.title, legend.color);
+            var _b = _this.props, theme = _b.theme, className = _b.className, styles = _b.styles;
+            var classNames = getClassNames(styles, {
+                theme: theme,
+                className: className,
+                colorOnSelectedState: color,
+                borderColor: legend.color,
+                overflow: overflow,
+                stripePattern: legend.stripePattern,
+                isLineLegendInBarChart: legend.isLineLegendInBarChart,
+                opacity: legend.opacity,
+            });
+            var onClickHandler = function () {
+                _this._onClick(legend);
+            };
+            var onHoverHandler = function () {
+                _this._onHoverOverLegend(legend);
+            };
+            var onMouseOut = function () {
+                _this._onLeave(legend);
+            };
+            var shape = _this._getShape(classNames, legend, color);
+            return (React.createElement("button", __assign({}, (allowFocusOnLegends && {
+                'aria-selected': _this.state.selectedLegend === legend.title,
+                role: 'option',
+                'aria-label': legend.title + " selected",
+                'aria-setsize': data['aria-setsize'],
+                'aria-posinset': data['aria-posinset'],
+            }), (data.nativeButtonProps && __assign({}, data.nativeButtonProps)), { key: index, className: classNames.legend, onClick: onClickHandler, onMouseOver: onHoverHandler, onMouseOut: onMouseOut, onFocus: onHoverHandler, onBlur: onMouseOut, "data-is-focusable": allowFocusOnLegends }),
+                shape,
+                React.createElement("div", { className: classNames.text }, legend.title)));
+        };
+        _this.state = {
+            selectedLegend: 'none',
+            selectedState: false,
+            hoverState: false,
+            isHoverCardVisible: false,
+            selecetedLegendInHoverCard: 'none',
+            selectedLegends: [],
+        };
+        return _this;
+    }
+    LegendsBase.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.selectedLegend !== this.props.selectedLegend) {
+            this.setState({ selectedLegend: this.props.selectedLegend });
+        }
+    };
+    LegendsBase.prototype.render = function () {
+        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
+        this._classNames = getClassNames(styles, {
+            theme: theme,
+            className: className,
+        });
+        var dataToRender = this._generateData();
+        return (React.createElement("div", { className: this._classNames.root }, this.props.enabledWrapLines ? (this._onRenderData(dataToRender)) : (React.createElement(ResizeGroup, { data: dataToRender, onReduceData: this._onReduceData, onRenderData: this._onRenderData, onGrowData: this._onGrowData }))));
+    };
+    LegendsBase.prototype._generateData = function () {
+        var _this = this;
+        var _a = this.props.allowFocusOnLegends, allowFocusOnLegends = _a === void 0 ? true : _a;
+        var dataItems = this.props.legends.map(function (legend, index) {
+            return __assign(__assign({}, (allowFocusOnLegends && {
+                nativeButtonProps: getNativeProps(legend, buttonProperties, [
+                    'title',
+                ]),
+                'aria-setsize': _this.props.legends.length,
+                'aria-posinset': index + 1,
+            })), { title: legend.title, action: legend.action, hoverAction: legend.hoverAction, onMouseOutAction: legend.onMouseOutAction, color: legend.color, shape: legend.shape, stripePattern: legend.stripePattern, isLineLegendInBarChart: legend.isLineLegendInBarChart, opacity: legend.opacity, key: index });
+        });
+        var result = {
+            primary: dataItems,
+            overflow: [],
+        };
+        return result;
+    };
+    LegendsBase.prototype._getShape = function (classNames, legend, color) {
+        var svgParentProps = {
+            className: classNames.shape,
+        };
+        var svgChildProps = {
+            fill: color,
+            strokeWidth: 2,
+            stroke: legend.color,
+        };
+        return (React.createElement(Shape, { svgProps: svgParentProps, pathProps: svgChildProps, shape: legend.shape, classNameForNonSvg: classNames.rect }));
+    };
+    LegendsBase.prototype._getColor = function (title, color) {
+        var _a = this.props, theme = _a.theme, _b = _a.canSelectMultipleLegends, canSelectMultipleLegends = _b === void 0 ? false : _b;
+        var palette = theme.palette;
+        var legendColor = color;
+        // below if statement  will get executed for the hovered legend.
+        // (which is also the slected legend see fucntion:-_onHoverOverLegend)
+        if (this.state.hoverState && this.state.selectedLegend === title) {
+            legendColor = color;
+        } // below esle if statement will get executed for  the  unselected-legend which is  hovered
+        else if (this.state.hoverState && this.state.selectedLegend !== 'none' && this.state.selectedLegend !== title) {
+            legendColor = palette.white;
+        } // below else if statement will get executed if the legends are in the selected state
+        // this is will only get executed  when we have ability to select multiple legends
+        else if (!!canSelectMultipleLegends && this.state.selectedState && this.state.selectedLegends.indexOf(title) > -1) {
+            legendColor = color;
+        } // below else if statement will get executed when no legend is selected and hovered
+        //(for example:- initial render of legends)
+        else if ((!this.state.selectedState && this.state.selectedLegend === 'none') ||
+            this.state.selectedLegend === title ||
+            this.state.selectedLegends.length <= 0) {
+            legendColor = color;
+        }
+        else {
+            legendColor = palette.white;
+        }
+        return legendColor;
+    };
+    return LegendsBase;
+}(React.Component));
+export { LegendsBase };
+//# sourceMappingURL=Legends.base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Legends.base.js","sourceRoot":"../src/","sources":["components/Legends/Legends.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { IContextualMenuItem } from '@fluentui/react/lib/ContextualMenu';\nimport { HoverCard, HoverCardType, IExpandingCardProps } from '@fluentui/react/lib/HoverCard';\nimport { classNamesFunction, find, getNativeProps, buttonProperties } from '@fluentui/react/lib/Utilities';\nimport { ResizeGroup } from '@fluentui/react/lib/ResizeGroup';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport { OverflowSet, IOverflowSetItemProps } from '@fluentui/react/lib/OverflowSet';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ILegend,\n  ILegendsProps,\n  LegendShape,\n  ILegendsStyles,\n  ILegendStyleProps,\n  ILegendOverflowData,\n} from './Legends.types';\nimport { Shape } from './shape';\n\nimport { silceOrAppendToArray } from '../../utilities/utilities';\n\nconst getClassNames = classNamesFunction<ILegendStyleProps, ILegendsStyles>();\n\n// This is an internal interface used for rendering the legends with unique key\ninterface ILegendItem extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  name?: string;\n  title: string;\n  action: VoidFunction;\n  hoverAction: VoidFunction;\n  onMouseOutAction: VoidFunction;\n  color: string;\n  shape?: LegendShape;\n  key: number;\n  opacity?: number;\n  stripePattern?: boolean;\n  isLineLegendInBarChart?: boolean;\n}\n\nexport interface ILegendState {\n  selectedLegend: string;\n  selecetedLegendInHoverCard: string;\n  selectedState: boolean;\n  hoverState: boolean;\n  isHoverCardVisible: boolean;\n  selectedLegends: string[];\n}\nexport class LegendsBase extends React.Component<ILegendsProps, ILegendState> {\n  private _hoverCardRef: HTMLDivElement;\n  private _classNames: IProcessedStyleSet<ILegendsStyles>;\n\n  public constructor(props: ILegendsProps) {\n    super(props);\n    this.state = {\n      selectedLegend: 'none',\n      selectedState: false,\n      hoverState: false,\n      isHoverCardVisible: false,\n      selecetedLegendInHoverCard: 'none',\n      selectedLegends: [],\n    };\n  }\n\n  public componentDidUpdate(prevProps: ILegendsProps) {\n    if (prevProps.selectedLegend !== this.props.selectedLegend) {\n      this.setState({ selectedLegend: this.props.selectedLegend! });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { theme, className, styles } = this.props;\n    this._classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const dataToRender = this._generateData();\n    return (\n      <div className={this._classNames.root}>\n        {this.props.enabledWrapLines ? (\n          this._onRenderData(dataToRender)\n        ) : (\n          <ResizeGroup\n            data={dataToRender}\n            onReduceData={this._onReduceData}\n            onRenderData={this._onRenderData}\n            onGrowData={this._onGrowData}\n          />\n        )}\n      </div>\n    );\n  }\n\n  private _generateData(): ILegendOverflowData {\n    const { allowFocusOnLegends = true } = this.props;\n    const dataItems: ILegendItem[] = this.props.legends.map((legend: ILegend, index: number) => {\n      return {\n        ...(allowFocusOnLegends && {\n          nativeButtonProps: getNativeProps<React.HTMLAttributes<HTMLButtonElement>>(legend, buttonProperties, [\n            'title',\n          ]),\n          'aria-setsize': this.props.legends.length,\n          'aria-posinset': index + 1,\n        }),\n        title: legend.title,\n        action: legend.action!,\n        hoverAction: legend.hoverAction!,\n        onMouseOutAction: legend.onMouseOutAction!,\n        color: legend.color,\n        shape: legend.shape,\n        stripePattern: legend.stripePattern,\n        isLineLegendInBarChart: legend.isLineLegendInBarChart,\n        opacity: legend.opacity,\n        key: index,\n      };\n    });\n    const result: ILegendOverflowData = {\n      primary: dataItems,\n      overflow: [],\n    };\n    return result;\n  }\n\n  private _onRenderData = (data: IOverflowSetItemProps | ILegendOverflowData): JSX.Element => {\n    const { overflowProps, allowFocusOnLegends = true } = this.props;\n    const rootStyles = {\n      root: {\n        justifyContent: this.props.centerLegends ? 'center' : 'unset',\n        flexWrap: 'wrap',\n      },\n    };\n    return (\n      <FocusZone {...(allowFocusOnLegends && { role: 'listbox', 'aria-label': 'Legends' })}>\n        <OverflowSet\n          items={data.primary}\n          overflowItems={data.overflow}\n          onRenderItem={this._renderButton}\n          onRenderOverflowButton={this._renderOverflowItems}\n          {...overflowProps}\n          styles={{ ...rootStyles, ...overflowProps?.styles }}\n        />\n      </FocusZone>\n    );\n  };\n\n  private _onReduceData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.primary.length === 0) {\n      return;\n    }\n    const overflow = [...currentdata.primary.slice(-1), ...currentdata.overflow];\n    const primary = currentdata.primary.slice(0, -1);\n    return { primary, overflow };\n  };\n\n  private _onGrowData = (currentdata: IOverflowSetItemProps): {} | void => {\n    if (currentdata.overflow.length === 0) {\n      return;\n    }\n    const overflow = currentdata.overflow.slice(1);\n    const primary = [...currentdata.primary, ...currentdata.overflow.slice(0, 1)];\n    return { primary, overflow };\n  };\n\n  /**\n   * This function will get called when there is an ability to\n   * select  multiple legends\n   * @param legend ILegend\n   */\n  private _canSelectMultipleLegends = (legend: ILegend): void => {\n    const selectedLegends = silceOrAppendToArray(this.state.selectedLegends, legend.title);\n    this.setState({\n      //check if user selected all legends then empty it get the default behaviour\n      selectedLegends: selectedLegends.length === this.props.legends.length ? [] : selectedLegends,\n      // make selectedState to false if none or all the legends selected\n      selectedState:\n        selectedLegends.length === 0 || selectedLegends.length === this.props.legends.length ? false : true,\n      selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      selectedLegend: 'none',\n      hoverState: false,\n    });\n  };\n\n  /**\n   * This function will get called when there is\n   * ability to select only single legend\n   * @param legend ILegend\n   */\n\n  private _canSelectOnlySingleLegend = (legend: ILegend): void => {\n    if (this.state.selectedState === true && this.state.selectedLegend === legend.title) {\n      this.setState({\n        selectedLegend: 'none',\n        selectedState: false,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    } else {\n      this.setState({\n        hoverState: true,\n        selectedState: true,\n        selectedLegend: legend.title,\n        selecetedLegendInHoverCard: this.state.isHoverCardVisible ? legend.title : 'none',\n      });\n    }\n  };\n\n  private _onClick = (legend: ILegend): void => {\n    if (legend.action) {\n      const { canSelectMultipleLegends = false } = this.props;\n      if (canSelectMultipleLegends) {\n        this._canSelectMultipleLegends(legend);\n      } else {\n        this._canSelectOnlySingleLegend(legend);\n      }\n      legend.action();\n    }\n  };\n\n  private _onRenderCompactCard = (expandingCard: IExpandingCardProps): JSX.Element => {\n    const { allowFocusOnLegends = true, className, styles, theme } = this.props;\n    const overflowHoverCardLegends: JSX.Element[] = [];\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    expandingCard.renderData.forEach((legend: IOverflowSetItemProps, index: number) => {\n      const hoverCardElement = this._renderButton(legend, index, true);\n      overflowHoverCardLegends.push(hoverCardElement);\n    });\n    const hoverCardData = (\n      <FocusZone\n        {...(allowFocusOnLegends && { role: 'listbox' })}\n        direction={FocusZoneDirection.vertical}\n        {...this.props.focusZonePropsInHoverCard}\n        className={classNames.hoverCardRoot}\n      >\n        {overflowHoverCardLegends}\n      </FocusZone>\n    );\n    return hoverCardData;\n  };\n\n  private _renderOverflowItems = (legends: ILegend[]) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const items: IContextualMenuItem[] = [];\n    legends.forEach((legend: ILegend, i: number) => {\n      items.push({ key: i.toString(), name: legend.title, onClick: legend.action });\n    });\n    const renderOverflowData: IExpandingCardProps = { renderData: legends };\n    const { theme, className, styles, overflowText } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n    });\n    const plainCardProps = {\n      onRenderPlainCard: this._onRenderCompactCard,\n      renderData: renderOverflowData,\n    };\n\n    const overflowString = overflowText ? overflowText : 'more';\n    // execute similar to \"_onClick\" and \"_onLeave\" logic at HoverCard onCardHide event\n    const onHoverCardHideHandler = () => {\n      const { canSelectMultipleLegends = false } = this.props;\n      const selectedOverflowItem = find(\n        legends,\n        (legend: ILegend) =>\n          legend.title === this.state.selecetedLegendInHoverCard || legend.title === this.state.selectedLegend,\n      );\n      this.setState(\n        {\n          isHoverCardVisible: false,\n          selecetedLegendInHoverCard: 'none',\n          selectedLegends: [],\n        },\n        () => {\n          if (selectedOverflowItem) {\n            this.setState({ selectedLegend: 'none', selectedState: false }, () => {\n              if (selectedOverflowItem.action && !canSelectMultipleLegends) {\n                selectedOverflowItem.action();\n              }\n              if (this.props.onLegendHoverCardLeave && canSelectMultipleLegends) {\n                this.props.onLegendHoverCardLeave();\n              }\n              this.setState({ hoverState: false }, () => {\n                if (selectedOverflowItem.onMouseOutAction) {\n                  selectedOverflowItem.onMouseOutAction(true);\n                }\n              });\n            });\n          }\n        },\n      );\n    };\n    return (\n      <HoverCard\n        type={HoverCardType.plain}\n        plainCardProps={plainCardProps}\n        instantOpenOnClick={true}\n        // eslint-disable-next-line react/jsx-no-bind\n        onCardHide={onHoverCardHideHandler}\n        setInitialFocus={true}\n        trapFocus={true}\n        onCardVisible={this._hoverCardVisible}\n        styles={classNames.subComponentStyles.hoverCardStyles}\n        cardDismissDelay={300}\n        target={this._hoverCardRef}\n      >\n        <div\n          className={classNames.overflowIndicationTextStyle}\n          ref={(rootElem: HTMLDivElement) => (this._hoverCardRef = rootElem)}\n          {...(allowFocusOnLegends && {\n            role: 'link',\n            'aria-expanded': this.state.isHoverCardVisible,\n            'aria-label': `${items.length} ${overflowString}`,\n          })}\n          data-is-focusable={allowFocusOnLegends}\n        >\n          {items.length} {overflowString}\n        </div>\n      </HoverCard>\n    );\n  };\n\n  private _hoverCardVisible = () => {\n    this.setState({ isHoverCardVisible: true });\n  };\n\n  private _onHoverOverLegend = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.hoverAction) {\n        this.setState({ hoverState: true, selectedLegend: legend.title });\n        legend.hoverAction();\n      }\n    }\n  };\n\n  private _onLeave = (legend: ILegend) => {\n    if (!this.state.selectedState) {\n      if (legend.onMouseOutAction) {\n        this.setState({ hoverState: false, selectedLegend: 'none' });\n        legend.onMouseOutAction();\n      }\n    }\n  };\n\n  private _renderButton = (data: IOverflowSetItemProps, index?: number, overflow?: boolean) => {\n    const { allowFocusOnLegends = true } = this.props;\n    const legend: ILegend = {\n      title: data.title,\n      color: data.color,\n      shape: data.shape,\n      action: data.action,\n      hoverAction: data.hoverAction,\n      onMouseOutAction: data.onMouseOutAction,\n      stripePattern: data.stripePattern,\n      isLineLegendInBarChart: data.isLineLegendInBarChart,\n      opacity: data.opacity,\n    };\n    const color = this._getColor(legend.title, legend.color);\n    const { theme, className, styles } = this.props;\n    const classNames = getClassNames(styles!, {\n      theme: theme!,\n      className,\n      colorOnSelectedState: color,\n      borderColor: legend.color,\n      overflow: overflow,\n      stripePattern: legend.stripePattern,\n      isLineLegendInBarChart: legend.isLineLegendInBarChart,\n      opacity: legend.opacity,\n    });\n    const onClickHandler = () => {\n      this._onClick(legend);\n    };\n    const onHoverHandler = () => {\n      this._onHoverOverLegend(legend);\n    };\n    const onMouseOut = () => {\n      this._onLeave(legend);\n    };\n    const shape = this._getShape(classNames, legend, color);\n    return (\n      <button\n        {...(allowFocusOnLegends && {\n          'aria-selected': this.state.selectedLegend === legend.title,\n          role: 'option',\n          'aria-label': `${legend.title} selected`,\n          'aria-setsize': data['aria-setsize'],\n          'aria-posinset': data['aria-posinset'],\n        })}\n        {...(data.nativeButtonProps && { ...data.nativeButtonProps })}\n        key={index}\n        className={classNames.legend}\n        onClick={onClickHandler}\n        onMouseOver={onHoverHandler}\n        onMouseOut={onMouseOut}\n        onFocus={onHoverHandler}\n        onBlur={onMouseOut}\n        data-is-focusable={allowFocusOnLegends}\n        /* eslint-enable react/jsx-no-bind */\n      >\n        {shape}\n        <div className={classNames.text}>{legend.title}</div>\n      </button>\n    );\n  };\n\n  private _getShape(\n    classNames: IProcessedStyleSet<ILegendsStyles>,\n    legend: ILegend,\n    color: string,\n  ): React.ReactNode | string {\n    const svgParentProps: React.SVGAttributes<SVGElement> = {\n      className: classNames.shape,\n    };\n    const svgChildProps: React.SVGAttributes<SVGElement> = {\n      fill: color,\n      strokeWidth: 2,\n      stroke: legend.color,\n    };\n    return (\n      <Shape\n        svgProps={svgParentProps}\n        pathProps={svgChildProps}\n        shape={legend.shape as LegendShape}\n        classNameForNonSvg={classNames.rect}\n      />\n    );\n  }\n\n  private _getColor(title: string, color: string): string {\n    const { theme, canSelectMultipleLegends = false } = this.props;\n    const { palette } = theme!;\n    let legendColor = color;\n    // below if statement  will get executed for the hovered legend.\n    // (which is also the slected legend see fucntion:-_onHoverOverLegend)\n    if (this.state.hoverState && this.state.selectedLegend === title) {\n      legendColor = color;\n    } // below esle if statement will get executed for  the  unselected-legend which is  hovered\n    else if (this.state.hoverState && this.state.selectedLegend !== 'none' && this.state.selectedLegend !== title) {\n      legendColor = palette.white;\n    } // below else if statement will get executed if the legends are in the selected state\n    // this is will only get executed  when we have ability to select multiple legends\n    else if (!!canSelectMultipleLegends && this.state.selectedState && this.state.selectedLegends.indexOf(title) > -1) {\n      legendColor = color;\n    } // below else if statement will get executed when no legend is selected and hovered\n    //(for example:- initial render of legends)\n    else if (\n      (!this.state.selectedState && this.state.selectedLegend === 'none') ||\n      this.state.selectedLegend === title ||\n      this.state.selectedLegends.length <= 0\n    ) {\n      legendColor = color;\n    } else {\n      legendColor = palette.white;\n    }\n    return legendColor;\n  }\n}\n"]}

package/lib/components/Legends/Legends.d.ts

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

package/lib/components/Legends/Legends.js

@@ -0,0 +1,5 @@
+import { styled } from '@fluentui/react/lib/Utilities';
+import { LegendsBase } from './Legends.base';
+import { getStyles } from './Legends.styles';
+export var Legends = styled(LegendsBase, getStyles);
+//# sourceMappingURL=Legends.js.map

package/lib/components/Legends/Legends.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legends.js","sourceRoot":"../src/","sources":["components/Legends/Legends.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,CAAC,IAAM,OAAO,GAA2C,MAAM,CACnE,WAAW,EACX,SAAS,CACV,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { ILegendsProps, ILegendStyleProps, ILegendsStyles } from './Legends.types';\nimport { LegendsBase } from './Legends.base';\nimport { getStyles } from './Legends.styles';\n\nexport const Legends: React.FunctionComponent<ILegendsProps> = styled<ILegendsProps, ILegendStyleProps, ILegendsStyles>(\n  LegendsBase,\n  getStyles,\n);\n"]}