npm - @fluentui/react-charting - Versions diffs - 5.14.11 → 5.14.13 - Mend

@fluentui/react-charting 5.14.11 → 5.14.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js CHANGED Viewed

@@ -39,11 +39,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     : null;
             };
             _this._getOpacity = function (legendTitle) {
-                var shouldHighlight = true;
-                if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
-                    shouldHighlight = _this.state.titleForHoverCard === legendTitle;
-                }
-                return shouldHighlight ? '' : '0.1';
+                var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '' : '0.1';
+                return opacity;
             };
             _this._onBarHover = function (pointData,
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -54,8 +51,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     _this.setState({
                         refSelected: mouseEvent,
                         /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
-                        isCalloutVisible: _this.state.isLegendSelected === false ||
-                            (_this.state.isLegendSelected === true && _this.state.titleForHoverCard === pointData.legend),
+                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === pointData.legend,
                         calloutLegend: pointData.legend,
                         dataForHoverCard: pointData.data,
                         color: pointData.color,
@@ -85,8 +81,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                         _this.setState({
                             refSelected: obj.refElement,
                             /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
-                            isCalloutVisible: _this.state.isLegendSelected === false ||
-                                (_this.state.isLegendSelected === true && _this.state.titleForHoverCard === pointData.legend),
+                            isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === pointData.legend,
                             calloutLegend: pointData.legend,
                             dataForHoverCard: pointData.data,
                             color: pointData.color,
@@ -226,8 +221,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                             hoverAction: function () {
                                 _this._onLegendHover(point.legend);
                             },
-                            onMouseOutAction: function (isLegendSelected) {
-                                _this._onLegendLeave(isLegendSelected);
+                            onMouseOutAction: function () {
+                                _this._onLegendLeave();
                             },
                         };
                         actions.push(legend);
@@ -241,20 +236,35 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
                     _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
                 }
             };
+            /**
+             * 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._createSet = Utilities_1.memoizeFunction(function (data) { return _this._createDataSetOfGVBC(data); });
             _this.state = {
                 color: '',
                 dataForHoverCard: 0,
                 isCalloutVisible: false,
-                isLegendSelected: false,
-                isLegendHovered: false,
                 refSelected: null,
-                titleForHoverCard: '',
+                selectedLegend: '',
                 xCalloutValue: '',
                 yCalloutValue: '',
                 YValueHover: [],
                 hoverXValue: '',
                 calloutLegend: '',
+                activeLegend: '',
             };
             Utilities_1.warnDeprecations(COMPONENT_NAME, props, {
                 showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
@@ -301,43 +311,27 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
         GroupedVerticalBarChartBase.prototype._refCallback = function (element, legendTitle, refIndexNumber) {
             this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };
         };
-        GroupedVerticalBarChartBase.prototype._onLegendClick = function (customMessage) {
-            if (this.state.isLegendSelected) {
-                if (this.state.titleForHoverCard === customMessage) {
-                    this.setState({
-                        isLegendSelected: false,
-                        titleForHoverCard: customMessage,
-                    });
-                }
-                else {
-                    this.setState({
-                        titleForHoverCard: customMessage,
-                    });
-                }
-            }
-            else {
+        GroupedVerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
+            if (this.state.selectedLegend === legendTitle) {
                 this.setState({
-                    isLegendSelected: true,
-                    titleForHoverCard: customMessage,
+                    selectedLegend: '',
                 });
             }
-        };
-        GroupedVerticalBarChartBase.prototype._onLegendHover = function (customMessage) {
-            if (this.state.isLegendSelected === false) {
+            else {
                 this.setState({
-                    isLegendHovered: true,
-                    titleForHoverCard: customMessage,
+                    selectedLegend: legendTitle,
                 });
             }
         };
-        GroupedVerticalBarChartBase.prototype._onLegendLeave = function (isLegendFocused) {
-            if (!!isLegendFocused || this.state.isLegendSelected === false) {
-                this.setState({
-                    isLegendHovered: false,
-                    titleForHoverCard: '',
-                    isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
-                });
-            }
+        GroupedVerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
+            this.setState({
+                activeLegend: legendTitle,
+            });
+        };
+        GroupedVerticalBarChartBase.prototype._onLegendLeave = function () {
+            this.setState({
+                activeLegend: '',
+            });
         };
         return GroupedVerticalBarChartBase;
     }(React.Component));

package/lib-amd/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GroupedVerticalBarChart.base.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { max as d3Max } from 'd3-array';\nimport { select as d3Select } from 'd3-selection';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n ChartTypes,\n IAxisData,\n getAccessibleDataObject,\n tooltipOfXAxislabels,\n XAxisTypes,\n getTypeOfAxis,\n} from '../../utilities/index';\nimport {\n IAccessibilityProps,\n CartesianChart,\n ILegend,\n IGroupedVerticalBarChartData,\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartStyleProps,\n IGroupedVerticalBarChartStyles,\n IGVBarChartSeriesPoint,\n IMargins,\n IBasestate,\n IRefArrayData,\n Legends,\n} from '../../index';\n\nconst COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';\nconst BAR_SPACE = 2.5;\nconst getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();\ntype StringAxis = D3Axis<string>;\ntype NumericAxis = D3Axis<number \| { valueOf(): number }>;\n\n// This interface used for - While forming datapoints from given prop \"data\" in code\ninterface IGVDataPoint {\n [key: string]: number \| string;\n}\n\n// While forming datapoints from given prop \"data\" in code. These datapoints are used for to draw graph easily.\ninterface IGVSingleDataPoint {\n [key: string]: IGVDataPoint;\n}\nexport interface IGroupedVerticalBarChartState extends IBasestate {\n titleForHoverCard: string;\n dataPointCalloutProps?: IGVBarChartSeriesPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n calloutLegend: string;\n}\n\nexport class GroupedVerticalBarChartBase extends React.Component<\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartState\n> {\n private _createSet: (\n data: IGroupedVerticalBarChartData[],\n ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\n { keys: string[]; xAxisLabels: string[]; datasetForBars: any };\n private _dataset: IGVDataPoint[];\n private _keys: string[];\n private _xAxisLabels: string[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _datasetForBars: any;\n private margins: IMargins;\n private _groupedVerticalBarGraph: JSX.Element[];\n private _classNames: IProcessedStyleSet<IGroupedVerticalBarChartStyles>;\n private _refArray: IRefArrayData[];\n private _yMax: number;\n private _calloutId: string;\n private _tooltipId: string;\n private _isNumeric: XAxisTypes;\n private _isRtl: boolean = getRTL();\n private _isCustomBarWidth: boolean;\n private _x1TotalBandWidth: number;\n private _calloutAnchorPoint: IGVBarChartSeriesPoint \| null;\n\n public constructor(props: IGroupedVerticalBarChartProps) {\n super(props);\n this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data));\n this.state = {\n color: '',\n dataForHoverCard: 0,\n isCalloutVisible: false,\n isLegendSelected: false,\n isLegendHovered: false,\n refSelected: null,\n titleForHoverCard: '',\n xCalloutValue: '',\n yCalloutValue: '',\n YValueHover: [],\n hoverXValue: '',\n calloutLegend: '',\n };\n warnDeprecations(COMPONENT_NAME, props, {\n showYAxisGridLines: 'Dont use this property. Lines are drawn by default',\n showXAxisPath: 'Dont use this property. Axis line removed default.',\n showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',\n showXAxisGridLines: 'Dont use this property. Handling with default value.',\n legendColor: 'Dont use this property. colour will pick from given data.',\n });\n this._refArray = [];\n this._calloutId = getId('callout');\n this._tooltipId = getId('GVBCTooltipId_');\n }\n\n public render(): React.ReactNode {\n const points = this.props.data;\n const { keys, xAxisLabels, datasetForBars } = this._createSet(points);\n this._keys = keys;\n this._xAxisLabels = xAxisLabels;\n this._datasetForBars = datasetForBars;\n this._isNumeric = getTypeOfAxis(points[0].name, true) as XAxisTypes;\n const legends: JSX.Element = this._getLegendData(points, this.props.theme!.palette);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const yMax = d3Max(this._dataset, (point: any) => d3Max(this._keys, (key: string) => point[key]));\n this._yMax = Math.max(yMax, this.props.yMaxValue \|\| 0);\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n href: this.props.href!,\n });\n const calloutProps = {\n target: this.state.refSelected,\n isCalloutVisible: this.state.isCalloutVisible,\n directionalHint: DirectionalHint.topAutoEdge,\n id: `toolTip${this._calloutId}`,\n gapSpace: 15,\n isBeakVisible: false,\n setInitialFocus: true,\n color: this.state.color,\n Legend: this.state.calloutLegend,\n XValue: this.state.xCalloutValue,\n YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,\n YValueHover: this.state.YValueHover,\n hoverXValue: this.state.hoverXValue,\n onDismiss: this._closeCallout,\n ...this.props.calloutProps,\n preventDismissOnLostFocus: true,\n ...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false),\n };\n const tickParams = {\n tickValues: this.props.tickValues!,\n tickFormat: this.props.tickFormat!,\n };\n\n return (\n <CartesianChart\n {...this.props}\n points={this._datasetForBars}\n chartType={ChartTypes.GroupedVerticalBarChart}\n calloutProps={calloutProps}\n legendBars={legends}\n xAxisType={this._isNumeric}\n datasetForXAxisDomain={this._xAxisLabels}\n tickParams={tickParams}\n tickPadding={this.props.tickPadding \|\| 5}\n maxOfYVal={this._yMax}\n svgFocusZoneProps={{\n direction: FocusZoneDirection.horizontal,\n }}\n customizedCallout={this._getCustomizedCallout()}\n getmargins={this._getMargins}\n getGraphData={this._getGraphData}\n getAxisData={this._getAxisData}\n onChartMouseLeave={this._handleChartMouseLeave}\n /* eslint-disable react/jsx-no-bind /\n // eslint-disable-next-line react/no-children-prop\n children={() => {\n return <g>{this._groupedVerticalBarGraph}</g>;\n }}\n />\n );\n }\n\n private _getGraphData = (\n xScale: StringAxis \| NumericAxis,\n yScale: NumericAxis,\n containerHeight: number,\n containerWidth: number,\n xElement?: SVGElement \| null,\n ) => {\n const xScale0 = this._createX0Scale(containerWidth);\n const xScale1 = this._createX1Scale(xScale0);\n const allGroupsBars: JSX.Element[] = [];\n this._datasetForBars.forEach((singleSet: IGVSingleDataPoint) => {\n allGroupsBars.push(this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement!));\n });\n this._groupedVerticalBarGraph = allGroupsBars;\n };\n\n private _getMargins = (margins: IMargins) => (this.margins = margins);\n\n private _createDataSetOfGVBC = (points: IGroupedVerticalBarChartData[]) => {\n const keys: string[] = [];\n const xAxisLabels: string[] = points.map(singlePoint => singlePoint.name);\n points[0].series.forEach((singleKey: IGVBarChartSeriesPoint) => {\n keys.push(singleKey.key);\n });\n const datasetForBars = this._createDataset(points);\n return {\n keys,\n xAxisLabels,\n datasetForBars,\n };\n };\n\n private _getCustomizedCallout = () => {\n return this.props.onRenderCalloutPerDataPoint\n ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n : null;\n };\n\n private _getOpacity = (legendTitle: string): string => {\n let shouldHighlight = true;\n if (this.state.isLegendHovered \|\| this.state.isLegendSelected) {\n shouldHighlight = this.state.titleForHoverCard === legendTitle;\n }\n return shouldHighlight ? '' : '0.1';\n };\n\n private _onBarHover = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n mouseEvent: React.MouseEvent<SVGElement>,\n ): void => {\n mouseEvent.persist();\n if (this._calloutAnchorPoint !== pointData) {\n this._calloutAnchorPoint = pointData;\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:\n this.state.isLegendSelected === false \|\|\n (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend),\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n };\n\n private _onBarLeave = (): void => {\n //\n };\n\n private _handleChartMouseLeave = (): void => {\n this._calloutAnchorPoint = null;\n this.setState({ isCalloutVisible: false });\n };\n\n private _onBarFocus = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n refArrayIndexNumber: number,\n ): void => {\n this._refArray.forEach((obj: IRefArrayData, index: number) => {\n if (obj.index === pointData.legend && refArrayIndexNumber === index) {\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:\n this.state.isLegendSelected === false \|\|\n (this.state.isLegendSelected === true && this.state.titleForHoverCard === pointData.legend),\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n });\n };\n\n private _redirectToUrl = (href: string \| undefined): void => {\n href ? (window.location.href = href) : '';\n };\n\n private _refCallback(element: SVGRectElement, legendTitle: string, refIndexNumber: number): void {\n this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };\n }\n\n private _buildGraph = (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n singleSet: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale0: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale1: any,\n containerHeight: number,\n xElement: SVGElement,\n ): JSX.Element => {\n const singleGroup: JSX.Element[] = [];\n\n const yBarScale = d3ScaleLinear()\n .domain([0, this._yMax])\n .range([0, containerHeight! - this.margins.bottom! - this.margins.top!]);\n\n let widthOfBar: number;\n if (this.props.barwidth && this.props.barwidth < xScale1.bandwidth()) {\n widthOfBar = this.props.barwidth;\n } else {\n widthOfBar = xScale1.bandwidth();\n }\n const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n tempDataSet.forEach((datasetKey: string, index: number) => {\n const refIndexNumber = singleSet.indexNum tempDataSet.length + index;\n const pointData = singleSet[datasetKey];\n // Not rendering data with 0.\n pointData.data &&\n singleGroup.push(\n <rect\n className={this._classNames.opacityChangeOnHover}\n key={`${singleSet.indexNum}-${index}`}\n height={Math.max(yBarScale(pointData.data), 0)}\n width={widthOfBar}\n x={xScale1(datasetKey)!}\n y={Math.max(containerHeight! - this.margins.bottom! - yBarScale(pointData.data), 0)}\n data-is-focusable={!this.props.hideTooltip}\n opacity={this._getOpacity(pointData.legend)}\n ref={(e: SVGRectElement \| null) => {\n this._refCallback(e!, pointData.legend, refIndexNumber);\n }}\n fill={pointData.color}\n onMouseOver={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseMove={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseOut={this._onBarLeave}\n onFocus={this._onBarFocus.bind(this, pointData, singleSet, refIndexNumber)}\n onBlur={this._onBarLeave}\n onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : pointData.onClick}\n aria-labelledby={`toolTip${this._calloutId}`}\n role=\"text\"\n />,\n );\n });\n // Used to display tooltip at x axis labels.\n if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n const xAxisElement = d3Select(xElement).call(xScale0);\n try {\n document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n const tooltipProps = {\n tooltipCls: this._classNames.tooltip!,\n id: this._tooltipId,\n xAxis: xAxisElement,\n };\n xAxisElement && tooltipOfXAxislabels(tooltipProps);\n }\n const customXScale = this._isCustomBarWidth ? (xScale0.bandwidth() - this._x1TotalBandWidth) / 2 : 0;\n return (\n <g key={singleSet.indexNum} transform={`translate(${xScale0(singleSet.xAxisPoint) + customXScale}, 0)`}>\n {singleGroup}\n </g>\n );\n };\n\n private _createDataset = (points: IGroupedVerticalBarChartData[]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const datasetForBars: any = [];\n const dataset: IGVDataPoint[] = [];\n\n points.forEach((point: IGroupedVerticalBarChartData, index: number) => {\n const singleDatasetPoint: IGVDataPoint = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const singleDatasetPointForBars: any = {};\n const singleDataSeries: IGVBarChartSeriesPoint[] = [];\n\n point.series.forEach((seriesPoint: IGVBarChartSeriesPoint) => {\n singleDatasetPoint[seriesPoint.key] = seriesPoint.data;\n singleDatasetPointForBars[seriesPoint.key] = {\n ...seriesPoint,\n };\n singleDataSeries.push(seriesPoint);\n });\n\n singleDatasetPointForBars.xAxisPoint = point.name;\n singleDatasetPointForBars.indexNum = index;\n singleDatasetPointForBars.groupSeries = singleDataSeries;\n singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;\n datasetForBars.push(singleDatasetPointForBars);\n dataset.push(singleDatasetPoint);\n });\n this._dataset = dataset;\n return datasetForBars;\n };\n\n // For grouped vertical bar chart, First need to define total scale (from start to end)\n // From that need to define scale for single group of bars - done by createX1Scale\n private _createX0Scale = (containerWidth: number) => {\n const x0Axis = d3ScaleBand()\n .domain(this._xAxisLabels)\n .range(\n this._isRtl\n ? [containerWidth! - this.margins.right!, this.margins.left!]\n : [this.margins.left!, containerWidth! - this.margins.right!],\n )\n .padding(0.1);\n return x0Axis;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _createX1Scale = (xScale0: any): any => {\n let bandWidth = xScale0.bandwidth();\n if (this.props.barwidth) {\n const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n const totalWidth = (this.props.barwidth! + BAR_SPACE) * tempDataSet.length;\n this._isCustomBarWidth = totalWidth < xScale0.bandwidth();\n bandWidth = this._isCustomBarWidth ? totalWidth : xScale0.bandwidth();\n this._x1TotalBandWidth = bandWidth;\n }\n\n return d3ScaleBand()\n .domain(this._keys)\n .range(this._isRtl ? [bandWidth, 0] : [0, bandWidth])\n .padding(0.05);\n };\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _onLegendClick(customMessage: string): void {\n if (this.state.isLegendSelected) {\n if (this.state.titleForHoverCard === customMessage) {\n this.setState({\n isLegendSelected: false,\n titleForHoverCard: customMessage,\n });\n } else {\n this.setState({\n titleForHoverCard: customMessage,\n });\n }\n } else {\n this.setState({\n isLegendSelected: true,\n titleForHoverCard: customMessage,\n });\n }\n }\n\n private _onLegendHover(customMessage: string): void {\n if (this.state.isLegendSelected === false) {\n this.setState({\n isLegendHovered: true,\n titleForHoverCard: customMessage,\n });\n }\n }\n\n private _onLegendLeave(isLegendFocused?: boolean): void {\n if (!!isLegendFocused \|\| this.state.isLegendSelected === false) {\n this.setState({\n isLegendHovered: false,\n titleForHoverCard: '',\n isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,\n });\n }\n }\n\n private _getLegendData = (points: IGroupedVerticalBarChartData[], palette: IPalette): JSX.Element => {\n const data = points;\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const actions: ILegend[] = [];\n\n data.forEach((singleChartData: IGroupedVerticalBarChartData) => {\n singleChartData.series.forEach((point: IGVBarChartSeriesPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const checkSimilarLegends = actions.filter((leg: ILegend) => leg.title === point.legend && leg.color === color);\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend,\n color: color,\n action: () => {\n this._onLegendClick(point.legend);\n },\n hoverAction: () => {\n this._onLegendHover(point.legend);\n },\n onMouseOutAction: (isLegendSelected?: boolean) => {\n this._onLegendLeave(isLegendSelected);\n },\n };\n\n actions.push(legend);\n });\n });\n return (\n <Legends\n legends={actions}\n overflowProps={this.props.legendsOverflowProps}\n enabledWrapLines={this.props.enabledLegendsWrapLines}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n {...this.props.legendProps}\n />\n );\n };\n\n private _getAxisData = (yAxisData: IAxisData) => {\n if (yAxisData && yAxisData.yAxisDomainValues.length) {\n const { yAxisDomainValues: domainValue } = yAxisData;\n this._yMax = Math.max(domainValue[domainValue.length - 1], this.props.yMaxValue \|\| 0);\n }\n };\n}\n"]}
1	+ {"version":3,"file":"GroupedVerticalBarChart.base.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { max as d3Max } from 'd3-array';\nimport { select as d3Select } from 'd3-selection';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n ChartTypes,\n IAxisData,\n getAccessibleDataObject,\n tooltipOfXAxislabels,\n XAxisTypes,\n getTypeOfAxis,\n} from '../../utilities/index';\nimport {\n IAccessibilityProps,\n CartesianChart,\n ILegend,\n IGroupedVerticalBarChartData,\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartStyleProps,\n IGroupedVerticalBarChartStyles,\n IGVBarChartSeriesPoint,\n IMargins,\n IBasestate,\n IRefArrayData,\n Legends,\n} from '../../index';\n\nconst COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';\nconst BAR_SPACE = 2.5;\nconst getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();\ntype StringAxis = D3Axis<string>;\ntype NumericAxis = D3Axis<number \| { valueOf(): number }>;\n\n// This interface used for - While forming datapoints from given prop \"data\" in code\ninterface IGVDataPoint {\n [key: string]: number \| string;\n}\n\n// While forming datapoints from given prop \"data\" in code. These datapoints are used for to draw graph easily.\ninterface IGVSingleDataPoint {\n [key: string]: IGVDataPoint;\n}\nexport interface IGroupedVerticalBarChartState extends IBasestate {\n dataPointCalloutProps?: IGVBarChartSeriesPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n calloutLegend: string;\n}\n\nexport class GroupedVerticalBarChartBase extends React.Component<\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartState\n> {\n private _createSet: (\n data: IGroupedVerticalBarChartData[],\n ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\n { keys: string[]; xAxisLabels: string[]; datasetForBars: any };\n private _dataset: IGVDataPoint[];\n private _keys: string[];\n private _xAxisLabels: string[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _datasetForBars: any;\n private margins: IMargins;\n private _groupedVerticalBarGraph: JSX.Element[];\n private _classNames: IProcessedStyleSet<IGroupedVerticalBarChartStyles>;\n private _refArray: IRefArrayData[];\n private _yMax: number;\n private _calloutId: string;\n private _tooltipId: string;\n private _isNumeric: XAxisTypes;\n private _isRtl: boolean = getRTL();\n private _isCustomBarWidth: boolean;\n private _x1TotalBandWidth: number;\n private _calloutAnchorPoint: IGVBarChartSeriesPoint \| null;\n\n public constructor(props: IGroupedVerticalBarChartProps) {\n super(props);\n this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data));\n this.state = {\n color: '',\n dataForHoverCard: 0,\n isCalloutVisible: false,\n refSelected: null,\n selectedLegend: '',\n xCalloutValue: '',\n yCalloutValue: '',\n YValueHover: [],\n hoverXValue: '',\n calloutLegend: '',\n activeLegend: '',\n };\n warnDeprecations(COMPONENT_NAME, props, {\n showYAxisGridLines: 'Dont use this property. Lines are drawn by default',\n showXAxisPath: 'Dont use this property. Axis line removed default.',\n showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',\n showXAxisGridLines: 'Dont use this property. Handling with default value.',\n legendColor: 'Dont use this property. colour will pick from given data.',\n });\n this._refArray = [];\n this._calloutId = getId('callout');\n this._tooltipId = getId('GVBCTooltipId_');\n }\n\n public render(): React.ReactNode {\n const points = this.props.data;\n const { keys, xAxisLabels, datasetForBars } = this._createSet(points);\n this._keys = keys;\n this._xAxisLabels = xAxisLabels;\n this._datasetForBars = datasetForBars;\n this._isNumeric = getTypeOfAxis(points[0].name, true) as XAxisTypes;\n const legends: JSX.Element = this._getLegendData(points, this.props.theme!.palette);\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const yMax = d3Max(this._dataset, (point: any) => d3Max(this._keys, (key: string) => point[key]));\n this._yMax = Math.max(yMax, this.props.yMaxValue \|\| 0);\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n href: this.props.href!,\n });\n const calloutProps = {\n target: this.state.refSelected,\n isCalloutVisible: this.state.isCalloutVisible,\n directionalHint: DirectionalHint.topAutoEdge,\n id: `toolTip${this._calloutId}`,\n gapSpace: 15,\n isBeakVisible: false,\n setInitialFocus: true,\n color: this.state.color,\n Legend: this.state.calloutLegend,\n XValue: this.state.xCalloutValue,\n YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,\n YValueHover: this.state.YValueHover,\n hoverXValue: this.state.hoverXValue,\n onDismiss: this._closeCallout,\n ...this.props.calloutProps,\n preventDismissOnLostFocus: true,\n ...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false),\n };\n const tickParams = {\n tickValues: this.props.tickValues!,\n tickFormat: this.props.tickFormat!,\n };\n\n return (\n <CartesianChart\n {...this.props}\n points={this._datasetForBars}\n chartType={ChartTypes.GroupedVerticalBarChart}\n calloutProps={calloutProps}\n legendBars={legends}\n xAxisType={this._isNumeric}\n datasetForXAxisDomain={this._xAxisLabels}\n tickParams={tickParams}\n tickPadding={this.props.tickPadding \|\| 5}\n maxOfYVal={this._yMax}\n svgFocusZoneProps={{\n direction: FocusZoneDirection.horizontal,\n }}\n customizedCallout={this._getCustomizedCallout()}\n getmargins={this._getMargins}\n getGraphData={this._getGraphData}\n getAxisData={this._getAxisData}\n onChartMouseLeave={this._handleChartMouseLeave}\n /* eslint-disable react/jsx-no-bind /\n // eslint-disable-next-line react/no-children-prop\n children={() => {\n return <g>{this._groupedVerticalBarGraph}</g>;\n }}\n />\n );\n }\n\n private _getGraphData = (\n xScale: StringAxis \| NumericAxis,\n yScale: NumericAxis,\n containerHeight: number,\n containerWidth: number,\n xElement?: SVGElement \| null,\n ) => {\n const xScale0 = this._createX0Scale(containerWidth);\n const xScale1 = this._createX1Scale(xScale0);\n const allGroupsBars: JSX.Element[] = [];\n this._datasetForBars.forEach((singleSet: IGVSingleDataPoint) => {\n allGroupsBars.push(this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement!));\n });\n this._groupedVerticalBarGraph = allGroupsBars;\n };\n\n private _getMargins = (margins: IMargins) => (this.margins = margins);\n\n private _createDataSetOfGVBC = (points: IGroupedVerticalBarChartData[]) => {\n const keys: string[] = [];\n const xAxisLabels: string[] = points.map(singlePoint => singlePoint.name);\n points[0].series.forEach((singleKey: IGVBarChartSeriesPoint) => {\n keys.push(singleKey.key);\n });\n const datasetForBars = this._createDataset(points);\n return {\n keys,\n xAxisLabels,\n datasetForBars,\n };\n };\n\n private _getCustomizedCallout = () => {\n return this.props.onRenderCalloutPerDataPoint\n ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n : null;\n };\n\n private _getOpacity = (legendTitle: string): string => {\n const opacity = this._legendHighlighted(legendTitle) \|\| this._noLegendHighlighted() ? '' : '0.1';\n return opacity;\n };\n\n private _onBarHover = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n mouseEvent: React.MouseEvent<SVGElement>,\n ): void => {\n mouseEvent.persist();\n if (this._calloutAnchorPoint !== pointData) {\n this._calloutAnchorPoint = pointData;\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 === pointData.legend,\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n };\n\n private _onBarLeave = (): void => {\n //\n };\n\n private _handleChartMouseLeave = (): void => {\n this._calloutAnchorPoint = null;\n this.setState({ isCalloutVisible: false });\n };\n\n private _onBarFocus = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n refArrayIndexNumber: number,\n ): void => {\n this._refArray.forEach((obj: IRefArrayData, index: number) => {\n if (obj.index === pointData.legend && refArrayIndexNumber === index) {\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 === pointData.legend,\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n });\n };\n\n private _redirectToUrl = (href: string \| undefined): void => {\n href ? (window.location.href = href) : '';\n };\n\n private _refCallback(element: SVGRectElement, legendTitle: string, refIndexNumber: number): void {\n this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };\n }\n\n private _buildGraph = (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n singleSet: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale0: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale1: any,\n containerHeight: number,\n xElement: SVGElement,\n ): JSX.Element => {\n const singleGroup: JSX.Element[] = [];\n\n const yBarScale = d3ScaleLinear()\n .domain([0, this._yMax])\n .range([0, containerHeight! - this.margins.bottom! - this.margins.top!]);\n\n let widthOfBar: number;\n if (this.props.barwidth && this.props.barwidth < xScale1.bandwidth()) {\n widthOfBar = this.props.barwidth;\n } else {\n widthOfBar = xScale1.bandwidth();\n }\n const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n tempDataSet.forEach((datasetKey: string, index: number) => {\n const refIndexNumber = singleSet.indexNum tempDataSet.length + index;\n const pointData = singleSet[datasetKey];\n // Not rendering data with 0.\n pointData.data &&\n singleGroup.push(\n <rect\n className={this._classNames.opacityChangeOnHover}\n key={`${singleSet.indexNum}-${index}`}\n height={Math.max(yBarScale(pointData.data), 0)}\n width={widthOfBar}\n x={xScale1(datasetKey)!}\n y={Math.max(containerHeight! - this.margins.bottom! - yBarScale(pointData.data), 0)}\n data-is-focusable={!this.props.hideTooltip}\n opacity={this._getOpacity(pointData.legend)}\n ref={(e: SVGRectElement \| null) => {\n this._refCallback(e!, pointData.legend, refIndexNumber);\n }}\n fill={pointData.color}\n onMouseOver={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseMove={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseOut={this._onBarLeave}\n onFocus={this._onBarFocus.bind(this, pointData, singleSet, refIndexNumber)}\n onBlur={this._onBarLeave}\n onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : pointData.onClick}\n aria-labelledby={`toolTip${this._calloutId}`}\n role=\"text\"\n />,\n );\n });\n // Used to display tooltip at x axis labels.\n if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n const xAxisElement = d3Select(xElement).call(xScale0);\n try {\n document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n // eslint-disable-next-line no-empty\n } catch (e) {}\n const tooltipProps = {\n tooltipCls: this._classNames.tooltip!,\n id: this._tooltipId,\n xAxis: xAxisElement,\n };\n xAxisElement && tooltipOfXAxislabels(tooltipProps);\n }\n const customXScale = this._isCustomBarWidth ? (xScale0.bandwidth() - this._x1TotalBandWidth) / 2 : 0;\n return (\n <g key={singleSet.indexNum} transform={`translate(${xScale0(singleSet.xAxisPoint) + customXScale}, 0)`}>\n {singleGroup}\n </g>\n );\n };\n\n private _createDataset = (points: IGroupedVerticalBarChartData[]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const datasetForBars: any = [];\n const dataset: IGVDataPoint[] = [];\n\n points.forEach((point: IGroupedVerticalBarChartData, index: number) => {\n const singleDatasetPoint: IGVDataPoint = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const singleDatasetPointForBars: any = {};\n const singleDataSeries: IGVBarChartSeriesPoint[] = [];\n\n point.series.forEach((seriesPoint: IGVBarChartSeriesPoint) => {\n singleDatasetPoint[seriesPoint.key] = seriesPoint.data;\n singleDatasetPointForBars[seriesPoint.key] = {\n ...seriesPoint,\n };\n singleDataSeries.push(seriesPoint);\n });\n\n singleDatasetPointForBars.xAxisPoint = point.name;\n singleDatasetPointForBars.indexNum = index;\n singleDatasetPointForBars.groupSeries = singleDataSeries;\n singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;\n datasetForBars.push(singleDatasetPointForBars);\n dataset.push(singleDatasetPoint);\n });\n this._dataset = dataset;\n return datasetForBars;\n };\n\n // For grouped vertical bar chart, First need to define total scale (from start to end)\n // From that need to define scale for single group of bars - done by createX1Scale\n private _createX0Scale = (containerWidth: number) => {\n const x0Axis = d3ScaleBand()\n .domain(this._xAxisLabels)\n .range(\n this._isRtl\n ? [containerWidth! - this.margins.right!, this.margins.left!]\n : [this.margins.left!, containerWidth! - this.margins.right!],\n )\n .padding(0.1);\n return x0Axis;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _createX1Scale = (xScale0: any): any => {\n let bandWidth = xScale0.bandwidth();\n if (this.props.barwidth) {\n const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n const totalWidth = (this.props.barwidth! + BAR_SPACE) * tempDataSet.length;\n this._isCustomBarWidth = totalWidth < xScale0.bandwidth();\n bandWidth = this._isCustomBarWidth ? totalWidth : xScale0.bandwidth();\n this._x1TotalBandWidth = bandWidth;\n }\n\n return d3ScaleBand()\n .domain(this._keys)\n .range(this._isRtl ? [bandWidth, 0] : [0, bandWidth])\n .padding(0.05);\n };\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _onLegendClick(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 _onLegendHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\n });\n }\n\n private _onLegendLeave(): void {\n this.setState({\n activeLegend: '',\n });\n }\n\n private _getLegendData = (points: IGroupedVerticalBarChartData[], palette: IPalette): JSX.Element => {\n const data = points;\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const actions: ILegend[] = [];\n\n data.forEach((singleChartData: IGroupedVerticalBarChartData) => {\n singleChartData.series.forEach((point: IGVBarChartSeriesPoint) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n const checkSimilarLegends = actions.filter((leg: ILegend) => leg.title === point.legend && leg.color === color);\n if (checkSimilarLegends!.length > 0) {\n return;\n }\n const legend: ILegend = {\n title: point.legend,\n color: color,\n action: () => {\n this._onLegendClick(point.legend);\n },\n hoverAction: () => {\n this._onLegendHover(point.legend);\n },\n onMouseOutAction: () => {\n this._onLegendLeave();\n },\n };\n\n actions.push(legend);\n });\n });\n return (\n <Legends\n legends={actions}\n overflowProps={this.props.legendsOverflowProps}\n enabledWrapLines={this.props.enabledLegendsWrapLines}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n {...this.props.legendProps}\n />\n );\n };\n\n private _getAxisData = (yAxisData: IAxisData) => {\n if (yAxisData && yAxisData.yAxisDomainValues.length) {\n const { yAxisDomainValues: domainValue } = yAxisData;\n this._yMax = Math.max(domainValue[domainValue.length - 1], this.props.yMaxValue \|\| 0);\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"]}

package/lib-amd/components/HeatMapChart/HeatMapChart.base.d.ts CHANGED Viewed

@@ -4,19 +4,13 @@ import { IHeatMapChartProps } from './HeatMapChart.types';
 import { Target } from '@fluentui/react';
 export interface IHeatMapChartState {
     /**
-     * determines if the legend any of the legend is selected or not
-     * @default false
+     * contains the selected legend string
      */
-    isLegendSelected: boolean;
+    selectedLegend: string;
     /**
-     * contains the seleted legend string
+     * contains the hovered legend string
      */
     activeLegend: string;
-    /**
-     * determines if the legend is hovered or not
-     * @default false
-     */
-    isLegendHovered: boolean;
     /**
      * determines wethere to show or hide the callout
      * @default false
@@ -90,17 +84,13 @@ export declare class HeatMapChartBase extends React.Component<IHeatMapChartProps
     /**
      * when the legend is hovered we need to highlight
      * all the rectangles which fall under that category
-     * and un-highlight the rest of them, this functionality
-     * should happen only when there no legend Selected
+     * and un-highlight the rest of them
      * @param legendTitle
      */
     private _onLegendHover;
     /**
      * when the mouse is out from the legend , we need
-     * to show the graph in initial mode. isLegendFocused will
-     * be useful at the scenario where mouseout happend for
-     * the legends which are in overflow card
-     * @param isLegendFocused
+     * to show the graph in initial mode.
      */
     private _onLegendLeave;
     /**
@@ -142,4 +132,15 @@ export declare class HeatMapChartBase extends React.Component<IHeatMapChartProps
     private _getFormattedLabelForXAxisDataPoint;
     private _getFormattedLabelForYAxisDataPoint;
     private _closeCallout;
+    /**
+     * 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
+     */
+    private _legendHighlighted;
+    /**
+     * This function checks if none of the legends is selected or hovered.
+     */
+    private _noLegendHighlighted;
 }

package/lib-amd/components/HeatMapChart/HeatMapChart.base.js CHANGED Viewed

@@ -25,11 +25,8 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
                 return { x: x, y: y };
             };
             _this._getOpacity = function (legendTitle) {
-                var shouldHighlight = true;
-                if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
-                    shouldHighlight = legendTitle === _this.state.activeLegend;
-                }
-                return shouldHighlight ? '1' : '0.1';
+                var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '1' : '0.1';
+                return opacity;
             };
             _this._rectRefCallback = function (rectElement, index, dataPointObject) {
                 _this._rectRefArray[index] = { data: dataPointObject, refElement: rectElement };
@@ -38,8 +35,7 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
                 _this.setState({
                     target: _this._rectRefArray[id].refElement,
                     /** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */
-                    isCalloutVisible: _this.state.isLegendSelected === false ||
-                        (_this.state.isLegendSelected === true && _this.state.activeLegend === data.legend),
+                    isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
                     calloutYValue: "" + data.rectText,
                     calloutTextColor: _this._colorScale(data.value),
                     calloutLegend: data.legend,
@@ -56,8 +52,7 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
                     _this.setState({
                         target: _this._rectRefArray[id].refElement,
                         /** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */
-                        isCalloutVisible: _this.state.isLegendSelected === false ||
-                            (_this.state.isLegendSelected === true && _this.state.activeLegend === data.legend),
+                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === data.legend,
                         calloutYValue: "" + data.rectText,
                         calloutTextColor: _this._colorScale(data.value),
                         calloutLegend: data.legend,
@@ -111,33 +106,22 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
             /**
              * when the legend is hovered we need to highlight
              * all the rectangles which fall under that category
-             * and un-highlight the rest of them, this functionality
-             * should happen only when there no legend Selected
+             * and un-highlight the rest of them
              * @param legendTitle
              */
             _this._onLegendHover = function (legendTitle) {
-                if (_this.state.isLegendSelected === false) {
-                    _this.setState({
-                        activeLegend: legendTitle,
-                        isLegendHovered: true,
-                    });
-                }
+                _this.setState({
+                    activeLegend: legendTitle,
+                });
             };
             /**
              * when the mouse is out from the legend , we need
-             * to show the graph in initial mode. isLegendFocused will
-             * be useful at the scenario where mouseout happend for
-             * the legends which are in overflow card
-             * @param isLegendFocused
+             * to show the graph in initial mode.
              */
-            _this._onLegendLeave = function (isLegendFocused) {
-                if (!!isLegendFocused || _this.state.isLegendSelected === false) {
-                    _this.setState({
-                        activeLegend: '',
-                        isLegendHovered: false,
-                        isLegendSelected: isLegendFocused ? false : _this.state.isLegendSelected,
-                    });
-                }
+            _this._onLegendLeave = function () {
+                _this.setState({
+                    activeLegend: '',
+                });
             };
             /**
              * @param legendTitle
@@ -148,29 +132,17 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
             _this._onLegendClick = function (legendTitle) {
                 /**
                  * check if the legend is already selceted,
-                 * if yes, then check if the consumer has clicked already
-                 * seleceted legend if yes un-select the legend, else
-                 * set the acitve legend state to legendTitle
-                 *
-                 * if legend is not alredy selceted, simply set the isLegendSelected to true
-                 * and the active legend to the legendTitle of selected legend
+                 * if yes, un-select the legend, else
+                 * set the selected legend state to legendTitle
                  */
-                if (_this.state.isLegendSelected) {
-                    if (_this.state.activeLegend === legendTitle) {
-                        _this.setState({
-                            activeLegend: '',
-                            isLegendSelected: false,
-                        });
-                    }
-                    else {
-                        _this.setState({ activeLegend: legendTitle });
-                    }
+                if (_this.state.selectedLegend === legendTitle) {
+                    _this.setState({
+                        selectedLegend: '',
+                    });
                 }
                 else {
                     _this.setState({
-                        activeLegend: legendTitle,
-                        isLegendSelected: true,
-                        isLegendHovered: false,
+                        selectedLegend: legendTitle,
                     });
                 }
             };
@@ -187,8 +159,8 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
                         hoverAction: function () {
                             _this._onLegendHover(item.legend);
                         },
-                        onMouseOutAction: function (isLegendSelected) {
-                            _this._onLegendLeave(isLegendSelected);
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
                         },
                     };
                     legends.push(legend);
@@ -439,6 +411,22 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
                     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 === '';
+            };
             var _a = _this._getXandY(), x = _a.x, y = _a.y;
             _this._xAxisType = utilities_1.getTypeOfAxis(x, true);
             _this._yAxisType = utilities_1.getTypeOfAxis(y, false);
@@ -451,9 +439,8 @@ define(["require", "exports", "tslib", "../../index", "d3-scale", "@fluentui/rea
              */
             _this._createSet = Utilities_1.memoizeFunction(function (data, xDate, xNum, yDate, yNum) { return _this._createNewDataSet(data, xDate, xNum, yDate, yNum); });
             _this.state = {
-                isLegendSelected: false,
+                selectedLegend: '',
                 activeLegend: '',
-                isLegendHovered: false,
                 isCalloutVisible: false,
                 target: null,
                 calloutLegend: '',