@fluentui/react-charting 4.23.21 → 4.23.23
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.
- package/dist/react-charting.js +184 -136
- package/dist/react-charting.js.map +1 -1
- package/dist/react-charting.min.js +1 -1
- package/package.json +4 -4
package/dist/react-charting.js
CHANGED
|
@@ -20958,6 +20958,7 @@ var AreaChartBase = /** @class */ (function (_super) {
|
|
|
20958
20958
|
_this._onLegendClick(singleChartData.legend);
|
|
20959
20959
|
},
|
|
20960
20960
|
hoverAction: function () {
|
|
20961
|
+
_this._handleChartMouseLeave();
|
|
20961
20962
|
_this._onLegendHover(singleChartData.legend);
|
|
20962
20963
|
},
|
|
20963
20964
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -21473,10 +21474,12 @@ var CartesianChartBase = /** @class */ (function (_super) {
|
|
|
21473
21474
|
}, id: "yAxisGElement" + this.idForGraph, transform: "translate(" + (this._isRtl ? svgDimensions.width - this.margins.right : this.margins.left) + ", 0)", className: this._classNames.yAxis }),
|
|
21474
21475
|
children)),
|
|
21475
21476
|
!this.props.hideLegend && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { ref: function (e) { return (_this.legendContainer = e); }, className: this._classNames.legendContainer }, this.props.legendBars)),
|
|
21476
|
-
|
|
21477
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_3__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ hidden: !(!this.props.hideTooltip && calloutProps.isCalloutVisible),
|
|
21478
|
+
/** Keep the callout updated with details of focused/hovered chart element */
|
|
21479
|
+
shouldUpdateWhenHidden: true }, calloutProps),
|
|
21477
21480
|
this.props.customizedCallout && this.props.customizedCallout,
|
|
21478
21481
|
!this.props.customizedCallout && this.props.isCalloutForStack && this._multiValueCallout(calloutProps),
|
|
21479
|
-
!this.props.customizedCallout && !this.props.isCalloutForStack && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_utilities_index__WEBPACK_IMPORTED_MODULE_5__["ChartHoverCard"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ XValue: calloutProps.XValue, Legend: calloutProps.legend, YValue: calloutProps.YValue, color: calloutProps.color, culture: this.props.culture }, chartHoverProps))))))
|
|
21482
|
+
!this.props.customizedCallout && !this.props.isCalloutForStack && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_utilities_index__WEBPACK_IMPORTED_MODULE_5__["ChartHoverCard"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ XValue: calloutProps.XValue, Legend: calloutProps.legend, YValue: calloutProps.YValue, color: calloutProps.color, culture: this.props.culture }, chartHoverProps))))));
|
|
21480
21483
|
};
|
|
21481
21484
|
CartesianChartBase.prototype._yValueHoverSubCountsExists = function (yValueHover) {
|
|
21482
21485
|
if (yValueHover) {
|
|
@@ -21844,9 +21847,7 @@ var Arc = /** @class */ (function (_super) {
|
|
|
21844
21847
|
};
|
|
21845
21848
|
Arc.prototype._hoverOn = function (data, mouseEvent) {
|
|
21846
21849
|
mouseEvent.persist();
|
|
21847
|
-
|
|
21848
|
-
this.props.hoverOnCallback(data, mouseEvent);
|
|
21849
|
-
}
|
|
21850
|
+
this.props.hoverOnCallback(data, mouseEvent);
|
|
21850
21851
|
};
|
|
21851
21852
|
Arc.prototype._redirectToUrl = function (href) {
|
|
21852
21853
|
href ? (window.location.href = href) : '';
|
|
@@ -21891,6 +21892,7 @@ var getStyles = function (props) {
|
|
|
21891
21892
|
focusRing: {
|
|
21892
21893
|
stroke: theme.semanticColors.focusBorder,
|
|
21893
21894
|
strokeWidth: 4,
|
|
21895
|
+
fill: 'transparent',
|
|
21894
21896
|
},
|
|
21895
21897
|
insideDonutString: {
|
|
21896
21898
|
fontSize: office_ui_fabric_react_lib_Styling__WEBPACK_IMPORTED_MODULE_0__["FontSizes"].large,
|
|
@@ -21956,12 +21958,11 @@ var DonutChartBase = /** @class */ (function (_super) {
|
|
|
21956
21958
|
_this._focusCallback = function (data, id, element) {
|
|
21957
21959
|
_this._currentHoverElement = element;
|
|
21958
21960
|
_this.setState({
|
|
21959
|
-
|
|
21961
|
+
/** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused */
|
|
21962
|
+
showHover: _this.state.activeLegend === data.legend || _this.state.activeLegend === '',
|
|
21960
21963
|
value: data.data.toString(),
|
|
21961
21964
|
legend: data.legend,
|
|
21962
|
-
activeLegend: data.legend,
|
|
21963
21965
|
color: data.color,
|
|
21964
|
-
selectedLegend: data.legend,
|
|
21965
21966
|
xCalloutValue: data.xAxisCalloutData,
|
|
21966
21967
|
yCalloutValue: data.yAxisCalloutData,
|
|
21967
21968
|
focusedArcId: id,
|
|
@@ -21974,21 +21975,20 @@ var DonutChartBase = /** @class */ (function (_super) {
|
|
|
21974
21975
|
_this._calloutAnchorPoint = data;
|
|
21975
21976
|
_this._currentHoverElement = e;
|
|
21976
21977
|
_this.setState({
|
|
21977
|
-
|
|
21978
|
+
/** Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered */
|
|
21979
|
+
showHover: _this.state.activeLegend === data.legend || _this.state.activeLegend === '',
|
|
21978
21980
|
value: data.data.toString(),
|
|
21979
|
-
selectedLegend: data.legend,
|
|
21980
21981
|
legend: data.legend,
|
|
21981
21982
|
color: data.color,
|
|
21982
21983
|
xCalloutValue: data.xAxisCalloutData,
|
|
21983
21984
|
yCalloutValue: data.yAxisCalloutData,
|
|
21984
|
-
activeLegend: data.legend,
|
|
21985
21985
|
dataPointCalloutProps: data,
|
|
21986
21986
|
callOutAccessibilityData: data.callOutAccessibilityData,
|
|
21987
21987
|
});
|
|
21988
21988
|
}
|
|
21989
21989
|
};
|
|
21990
21990
|
_this._onBlur = function () {
|
|
21991
|
-
_this.setState({
|
|
21991
|
+
_this.setState({ focusedArcId: '' });
|
|
21992
21992
|
};
|
|
21993
21993
|
_this._handleChartMouseLeave = function () {
|
|
21994
21994
|
_this._calloutAnchorPoint = null;
|
|
@@ -22053,7 +22053,9 @@ var DonutChartBase = /** @class */ (function (_super) {
|
|
|
22053
22053
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
|
|
22054
22054
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("svg", { className: this._classNames.chart, "aria-label": (_b = data) === null || _b === void 0 ? void 0 : _b.chartTitle, ref: function (node) { return _this._setViewBox(node); } },
|
|
22055
22055
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_Pie_index__WEBPACK_IMPORTED_MODULE_5__["Pie"], { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this.state.activeLegend, focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme })))),
|
|
22056
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].bottomRightEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true
|
|
22056
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].bottomRightEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
|
|
22057
|
+
/** Keep the callout updated with details of focused/hovered arc */
|
|
22058
|
+
shouldUpdateWhenHidden: true }, this.props.calloutProps, Object(_utilities_index__WEBPACK_IMPORTED_MODULE_7__["getAccessibleDataObject"])(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_index__WEBPACK_IMPORTED_MODULE_6__["ChartHoverCard"], { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),
|
|
22057
22059
|
!hideLegend && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.legendContainer }, legendBars)));
|
|
22058
22060
|
};
|
|
22059
22061
|
DonutChartBase.prototype._setViewBox = function (node) {
|
|
@@ -22091,6 +22093,7 @@ var DonutChartBase = /** @class */ (function (_super) {
|
|
|
22091
22093
|
}
|
|
22092
22094
|
},
|
|
22093
22095
|
hoverAction: function () {
|
|
22096
|
+
_this._handleChartMouseLeave();
|
|
22094
22097
|
if (_this.state.activeLegend !== point.legend || _this.state.activeLegend === '') {
|
|
22095
22098
|
_this.setState({ activeLegend: point.legend });
|
|
22096
22099
|
}
|
|
@@ -22111,7 +22114,7 @@ var DonutChartBase = /** @class */ (function (_super) {
|
|
|
22111
22114
|
return legends;
|
|
22112
22115
|
};
|
|
22113
22116
|
DonutChartBase.prototype._hoverLeave = function () {
|
|
22114
|
-
|
|
22117
|
+
/**/
|
|
22115
22118
|
};
|
|
22116
22119
|
DonutChartBase.prototype._valueInsideDonut = function (valueInsideDonut, data) {
|
|
22117
22120
|
var _this = this;
|
|
@@ -22362,14 +22365,14 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
22362
22365
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22363
22366
|
groupData, mouseEvent) {
|
|
22364
22367
|
mouseEvent.persist();
|
|
22365
|
-
if (
|
|
22366
|
-
(_this.state.isLegendSelected && _this.state.titleForHoverCard === pointData.legend)) &&
|
|
22367
|
-
_this._calloutAnchorPoint !== pointData) {
|
|
22368
|
+
if (_this._calloutAnchorPoint !== pointData) {
|
|
22368
22369
|
_this._calloutAnchorPoint = pointData;
|
|
22369
22370
|
_this.setState({
|
|
22370
22371
|
refSelected: mouseEvent,
|
|
22371
|
-
|
|
22372
|
-
|
|
22372
|
+
/** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
|
|
22373
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
22374
|
+
(_this.state.isLegendSelected === true && _this.state.titleForHoverCard === pointData.legend),
|
|
22375
|
+
calloutLegend: pointData.legend,
|
|
22373
22376
|
dataForHoverCard: pointData.data,
|
|
22374
22377
|
color: pointData.color,
|
|
22375
22378
|
xCalloutValue: pointData.xAxisCalloutData,
|
|
@@ -22393,28 +22396,27 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
22393
22396
|
_this._onBarFocus = function (pointData,
|
|
22394
22397
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
22395
22398
|
groupData, refArrayIndexNumber) {
|
|
22396
|
-
|
|
22397
|
-
(
|
|
22398
|
-
|
|
22399
|
-
|
|
22400
|
-
|
|
22401
|
-
|
|
22402
|
-
|
|
22403
|
-
|
|
22404
|
-
|
|
22405
|
-
|
|
22406
|
-
|
|
22407
|
-
|
|
22408
|
-
|
|
22409
|
-
|
|
22410
|
-
|
|
22411
|
-
|
|
22412
|
-
|
|
22413
|
-
|
|
22414
|
-
|
|
22415
|
-
|
|
22416
|
-
|
|
22417
|
-
}
|
|
22399
|
+
_this._refArray.forEach(function (obj, index) {
|
|
22400
|
+
if (obj.index === pointData.legend && refArrayIndexNumber === index) {
|
|
22401
|
+
_this.setState({
|
|
22402
|
+
refSelected: obj.refElement,
|
|
22403
|
+
/** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
|
|
22404
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
22405
|
+
(_this.state.isLegendSelected === true && _this.state.titleForHoverCard === pointData.legend),
|
|
22406
|
+
calloutLegend: pointData.legend,
|
|
22407
|
+
dataForHoverCard: pointData.data,
|
|
22408
|
+
color: pointData.color,
|
|
22409
|
+
xCalloutValue: pointData.xAxisCalloutData,
|
|
22410
|
+
yCalloutValue: pointData.yAxisCalloutData,
|
|
22411
|
+
dataPointCalloutProps: pointData,
|
|
22412
|
+
callOutAccessibilityData: _this.props.isCalloutForStack
|
|
22413
|
+
? groupData.stackCallOutAccessibilityData
|
|
22414
|
+
: pointData.callOutAccessibilityData,
|
|
22415
|
+
YValueHover: groupData.groupSeries,
|
|
22416
|
+
hoverXValue: pointData.xAxisCalloutData,
|
|
22417
|
+
});
|
|
22418
|
+
}
|
|
22419
|
+
});
|
|
22418
22420
|
};
|
|
22419
22421
|
_this._redirectToUrl = function (href) {
|
|
22420
22422
|
href ? (window.location.href = href) : '';
|
|
@@ -22538,6 +22540,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
22538
22540
|
_this._onLegendClick(point.legend);
|
|
22539
22541
|
},
|
|
22540
22542
|
hoverAction: function () {
|
|
22543
|
+
_this._handleChartMouseLeave();
|
|
22541
22544
|
_this._onLegendHover(point.legend);
|
|
22542
22545
|
},
|
|
22543
22546
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -22575,6 +22578,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
22575
22578
|
yCalloutValue: '',
|
|
22576
22579
|
YValueHover: [],
|
|
22577
22580
|
hoverXValue: '',
|
|
22581
|
+
calloutLegend: '',
|
|
22578
22582
|
};
|
|
22579
22583
|
Object(office_ui_fabric_react_lib_Utilities__WEBPACK_IMPORTED_MODULE_7__["warnDeprecations"])(COMPONENT_NAME, props, {
|
|
22580
22584
|
showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
|
|
@@ -22604,7 +22608,7 @@ var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
22604
22608
|
theme: this.props.theme,
|
|
22605
22609
|
href: this.props.href,
|
|
22606
22610
|
});
|
|
22607
|
-
var calloutProps = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_5__["DirectionalHint"].topRightEdge, id: "toolTip" + this._calloutId, gapSpace: 15, isBeakVisible: false, setInitialFocus: true, color: this.state.color, Legend: this.state.
|
|
22611
|
+
var calloutProps = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_5__["DirectionalHint"].topRightEdge, id: "toolTip" + this._calloutId, gapSpace: 15, isBeakVisible: false, setInitialFocus: true, color: this.state.color, Legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, onDismiss: this._closeCallout }, this.props.calloutProps), { preventDismissOnLostFocus: true }), Object(_utilities_index__WEBPACK_IMPORTED_MODULE_8__["getAccessibleDataObject"])(this.state.callOutAccessibilityData, 'text', false));
|
|
22608
22612
|
var tickParams = {
|
|
22609
22613
|
tickValues: this.props.tickValues,
|
|
22610
22614
|
tickFormat: this.props.tickFormat,
|
|
@@ -22782,7 +22786,9 @@ var HeatMapChartBase = /** @class */ (function (_super) {
|
|
|
22782
22786
|
_this._onRectFocus = function (id, data) {
|
|
22783
22787
|
_this.setState({
|
|
22784
22788
|
target: _this._rectRefArray[id].refElement,
|
|
22785
|
-
|
|
22789
|
+
/** Show the callout if highlighted rectangle is focused and Hide it if unhighlighted rectangle is focused */
|
|
22790
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
22791
|
+
(_this.state.isLegendSelected === true && _this.state.activeLegend === data.legend),
|
|
22786
22792
|
calloutYValue: "" + data.rectText,
|
|
22787
22793
|
calloutTextColor: _this._colorScale(data.value),
|
|
22788
22794
|
calloutLegend: data.legend,
|
|
@@ -22798,7 +22804,9 @@ var HeatMapChartBase = /** @class */ (function (_super) {
|
|
|
22798
22804
|
_this._calloutAnchorPoint = data;
|
|
22799
22805
|
_this.setState({
|
|
22800
22806
|
target: _this._rectRefArray[id].refElement,
|
|
22801
|
-
|
|
22807
|
+
/** Show the callout if highlighted rectangle is hovered and Hide it if unhighlighted rectangle is hovered */
|
|
22808
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
22809
|
+
(_this.state.isLegendSelected === true && _this.state.activeLegend === data.legend),
|
|
22802
22810
|
calloutYValue: "" + data.rectText,
|
|
22803
22811
|
calloutTextColor: _this._colorScale(data.value),
|
|
22804
22812
|
calloutLegend: data.legend,
|
|
@@ -22924,6 +22932,7 @@ var HeatMapChartBase = /** @class */ (function (_super) {
|
|
|
22924
22932
|
_this._onLegendClick(item.legend);
|
|
22925
22933
|
},
|
|
22926
22934
|
hoverAction: function () {
|
|
22935
|
+
_this._handleChartMouseLeave();
|
|
22927
22936
|
_this._onLegendHover(item.legend);
|
|
22928
22937
|
},
|
|
22929
22938
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -24628,6 +24637,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
24628
24637
|
}, onMouseOutAction: function () {
|
|
24629
24638
|
_this_1.setState({ activeLegend: '' });
|
|
24630
24639
|
}, hoverAction: function () {
|
|
24640
|
+
_this_1._handleChartMouseLeave();
|
|
24631
24641
|
_this_1.setState({ activeLegend: point.legend });
|
|
24632
24642
|
} }, (point.legendShape && {
|
|
24633
24643
|
shape: point.legendShape,
|
|
@@ -24654,6 +24664,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
24654
24664
|
_this_1.setState({ activeLegend: '' });
|
|
24655
24665
|
},
|
|
24656
24666
|
hoverAction: function () {
|
|
24667
|
+
_this_1._handleChartMouseLeave();
|
|
24657
24668
|
_this_1.setState({ activeLegend: title });
|
|
24658
24669
|
},
|
|
24659
24670
|
opacity: _this_1._colorFillBarsOpacity,
|
|
@@ -25357,6 +25368,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25357
25368
|
_this._onClick(point.legend);
|
|
25358
25369
|
},
|
|
25359
25370
|
hoverAction: function () {
|
|
25371
|
+
_this._handleChartMouseLeave();
|
|
25360
25372
|
_this._onHover(point.legend);
|
|
25361
25373
|
},
|
|
25362
25374
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -25381,6 +25393,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25381
25393
|
_this._onClick(point.legend);
|
|
25382
25394
|
},
|
|
25383
25395
|
hoverAction: function () {
|
|
25396
|
+
_this._handleChartMouseLeave();
|
|
25384
25397
|
_this._onHover(point.legend);
|
|
25385
25398
|
},
|
|
25386
25399
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -25421,6 +25434,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25421
25434
|
isLegendSelected: false,
|
|
25422
25435
|
xCalloutValue: '',
|
|
25423
25436
|
yCalloutValue: '',
|
|
25437
|
+
calloutLegend: '',
|
|
25424
25438
|
};
|
|
25425
25439
|
_this._onLeave = _this._onLeave.bind(_this);
|
|
25426
25440
|
_this._onBarLeave = _this._onBarLeave.bind(_this);
|
|
@@ -25438,7 +25452,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25438
25452
|
legendColor: this.state.color,
|
|
25439
25453
|
theme: theme,
|
|
25440
25454
|
});
|
|
25441
|
-
var legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.
|
|
25455
|
+
var legendName = this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend;
|
|
25442
25456
|
var calloutYVal = this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard;
|
|
25443
25457
|
var bars = data.map(function (singleChartData, index) {
|
|
25444
25458
|
var singleChartBars = _this._createBarsAndLegends(singleChartData, _this.props.barHeight, palette, _this.props.hideRatio[index], _this.props.hideDenominator[index], _this.props.href);
|
|
@@ -25447,7 +25461,9 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25447
25461
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
|
|
25448
25462
|
bars,
|
|
25449
25463
|
!this.props.hideLegend && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.legendContainer }, legends),
|
|
25450
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && isCalloutVisible), directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].topRightEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true
|
|
25464
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && isCalloutVisible), directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].topRightEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
|
|
25465
|
+
/** Keep the callout updated with details of focused/hovered bar */
|
|
25466
|
+
shouldUpdateWhenHidden: true }, this.props.calloutProps, Object(_utilities_index__WEBPACK_IMPORTED_MODULE_6__["getAccessibleDataObject"])(this.state.callOutAccessibilityData, 'text', false)),
|
|
25451
25467
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_utilities_index__WEBPACK_IMPORTED_MODULE_6__["ChartHoverCard"], { Legend: legendName, YValue: calloutYVal, color: this.state.color, culture: culture }))))));
|
|
25452
25468
|
};
|
|
25453
25469
|
MultiStackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, hideRatio, hideDenominator, href) {
|
|
@@ -25520,24 +25536,23 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25520
25536
|
};
|
|
25521
25537
|
MultiStackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
|
|
25522
25538
|
var _this = this;
|
|
25523
|
-
|
|
25524
|
-
(
|
|
25525
|
-
|
|
25526
|
-
|
|
25527
|
-
|
|
25528
|
-
|
|
25529
|
-
|
|
25530
|
-
|
|
25531
|
-
|
|
25532
|
-
|
|
25533
|
-
|
|
25534
|
-
|
|
25535
|
-
|
|
25536
|
-
|
|
25537
|
-
|
|
25538
|
-
|
|
25539
|
-
|
|
25540
|
-
}
|
|
25539
|
+
this.state.refArray.forEach(function (obj) {
|
|
25540
|
+
if (obj.legendText === point.legend) {
|
|
25541
|
+
_this.setState({
|
|
25542
|
+
refSelected: obj.refElement,
|
|
25543
|
+
/** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
|
|
25544
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
25545
|
+
(_this.state.isLegendSelected && _this.state.selectedLegendTitle === point.legend),
|
|
25546
|
+
calloutLegend: point.legend,
|
|
25547
|
+
dataForHoverCard: pointData,
|
|
25548
|
+
color: color,
|
|
25549
|
+
xCalloutValue: point.xAxisCalloutData,
|
|
25550
|
+
yCalloutValue: point.yAxisCalloutData,
|
|
25551
|
+
dataPointCalloutProps: point,
|
|
25552
|
+
callOutAccessibilityData: point.callOutAccessibilityData,
|
|
25553
|
+
});
|
|
25554
|
+
}
|
|
25555
|
+
});
|
|
25541
25556
|
};
|
|
25542
25557
|
MultiStackedBarChartBase.prototype._refCallback = function (element, legendTitle) {
|
|
25543
25558
|
this.state.refArray.push({ legendText: legendTitle, refElement: element });
|
|
@@ -25582,14 +25597,14 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25582
25597
|
};
|
|
25583
25598
|
MultiStackedBarChartBase.prototype._onBarHover = function (pointData, color, point, mouseEvent) {
|
|
25584
25599
|
mouseEvent.persist();
|
|
25585
|
-
if (
|
|
25586
|
-
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
|
|
25587
|
-
this._calloutAnchorPoint !== point) {
|
|
25600
|
+
if (this._calloutAnchorPoint !== point) {
|
|
25588
25601
|
this._calloutAnchorPoint = point;
|
|
25589
25602
|
this.setState({
|
|
25590
25603
|
refSelected: mouseEvent,
|
|
25591
|
-
|
|
25592
|
-
|
|
25604
|
+
/** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
|
|
25605
|
+
isCalloutVisible: this.state.isLegendSelected === false ||
|
|
25606
|
+
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend),
|
|
25607
|
+
calloutLegend: point.legend,
|
|
25593
25608
|
dataForHoverCard: pointData,
|
|
25594
25609
|
color: color,
|
|
25595
25610
|
xCalloutValue: point.xAxisCalloutData,
|
|
@@ -25759,6 +25774,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25759
25774
|
isLegendSelected: false,
|
|
25760
25775
|
xCalloutValue: '',
|
|
25761
25776
|
yCalloutValue: '',
|
|
25777
|
+
calloutLegend: '',
|
|
25762
25778
|
};
|
|
25763
25779
|
_this._refArray = [];
|
|
25764
25780
|
_this._onLeave = _this._onLeave.bind(_this);
|
|
@@ -25822,8 +25838,10 @@ var StackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25822
25838
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
|
|
25823
25839
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("svg", { className: this._classNames.chart, "aria-label": (_a = data) === null || _a === void 0 ? void 0 : _a.chartTitle },
|
|
25824
25840
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("g", null, bars[0]),
|
|
25825
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].topRightEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true
|
|
25826
|
-
|
|
25841
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["Callout"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ gapSpace: 15, isBeakVisible: false, target: this.state.refSelected, setInitialFocus: true, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_4__["DirectionalHint"].topRightEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
|
|
25842
|
+
/** Keep the callout updated with details of focused/hovered bar */
|
|
25843
|
+
shouldUpdateWhenHidden: true }, this.props.calloutProps, Object(_utilities_index__WEBPACK_IMPORTED_MODULE_6__["getAccessibleDataObject"])(this.state.callOutAccessibilityData, 'text', false)),
|
|
25844
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_utilities_index__WEBPACK_IMPORTED_MODULE_6__["ChartHoverCard"], { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.calloutLegend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, color: this.state.color, culture: culture }))))))),
|
|
25827
25845
|
showLegend && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this._classNames.legendContainer }, bars[1])));
|
|
25828
25846
|
};
|
|
25829
25847
|
StackedBarChartBase.prototype._adjustProps = function () {
|
|
@@ -25858,6 +25876,7 @@ var StackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25858
25876
|
: undefined,
|
|
25859
25877
|
hoverAction: total > 0
|
|
25860
25878
|
? function () {
|
|
25879
|
+
_this._handleChartMouseLeave();
|
|
25861
25880
|
_this._onHover(point.legend);
|
|
25862
25881
|
}
|
|
25863
25882
|
: undefined,
|
|
@@ -25914,24 +25933,23 @@ var StackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25914
25933
|
};
|
|
25915
25934
|
StackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
|
|
25916
25935
|
var _this = this;
|
|
25917
|
-
|
|
25918
|
-
(
|
|
25919
|
-
|
|
25920
|
-
|
|
25921
|
-
|
|
25922
|
-
|
|
25923
|
-
|
|
25924
|
-
|
|
25925
|
-
|
|
25926
|
-
|
|
25927
|
-
|
|
25928
|
-
|
|
25929
|
-
|
|
25930
|
-
|
|
25931
|
-
|
|
25932
|
-
|
|
25933
|
-
|
|
25934
|
-
}
|
|
25936
|
+
this._refArray.forEach(function (obj) {
|
|
25937
|
+
if (obj.index === point.legend) {
|
|
25938
|
+
_this.setState({
|
|
25939
|
+
refSelected: obj.refElement,
|
|
25940
|
+
/** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
|
|
25941
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
25942
|
+
(_this.state.isLegendSelected && _this.state.selectedLegendTitle === point.legend),
|
|
25943
|
+
calloutLegend: point.legend,
|
|
25944
|
+
dataForHoverCard: pointData,
|
|
25945
|
+
color: color,
|
|
25946
|
+
xCalloutValue: point.xAxisCalloutData,
|
|
25947
|
+
yCalloutValue: point.yAxisCalloutData,
|
|
25948
|
+
dataPointCalloutProps: point,
|
|
25949
|
+
callOutAccessibilityData: point.callOutAccessibilityData,
|
|
25950
|
+
});
|
|
25951
|
+
}
|
|
25952
|
+
});
|
|
25935
25953
|
};
|
|
25936
25954
|
StackedBarChartBase.prototype._addLegend = function (legendDataItems, data) {
|
|
25937
25955
|
if (data) {
|
|
@@ -25991,14 +26009,14 @@ var StackedBarChartBase = /** @class */ (function (_super) {
|
|
|
25991
26009
|
};
|
|
25992
26010
|
StackedBarChartBase.prototype._onBarHover = function (pointData, color, point, mouseEvent) {
|
|
25993
26011
|
mouseEvent.persist();
|
|
25994
|
-
if (
|
|
25995
|
-
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
|
|
25996
|
-
this._calloutAnchorPoint !== point) {
|
|
26012
|
+
if (this._calloutAnchorPoint !== point) {
|
|
25997
26013
|
this._calloutAnchorPoint = point;
|
|
25998
26014
|
this.setState({
|
|
25999
26015
|
refSelected: mouseEvent,
|
|
26000
|
-
|
|
26001
|
-
|
|
26016
|
+
/** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
|
|
26017
|
+
isCalloutVisible: this.state.isLegendSelected === false ||
|
|
26018
|
+
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend),
|
|
26019
|
+
calloutLegend: point.legend,
|
|
26002
26020
|
dataForHoverCard: pointData,
|
|
26003
26021
|
color: color,
|
|
26004
26022
|
xCalloutValue: point.xAxisCalloutData,
|
|
@@ -26671,7 +26689,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26671
26689
|
var line = (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", { opacity: shouldHighlight ? 1 : 0.4, d: linePath(lineData), fill: 'none', strokeWidth: 3, stroke: lineLegendColor }));
|
|
26672
26690
|
var dots = lineData.map(function (item, index) {
|
|
26673
26691
|
var _a;
|
|
26674
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.index) + 0.5 * _this._barWidth : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.
|
|
26692
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.index) + 0.5 * _this._barWidth : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
|
|
26675
26693
|
});
|
|
26676
26694
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
|
26677
26695
|
line,
|
|
@@ -26755,34 +26773,33 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26755
26773
|
_this._calloutAnchorPoint = null;
|
|
26756
26774
|
_this.setState({
|
|
26757
26775
|
isCalloutVisible: false,
|
|
26758
|
-
|
|
26776
|
+
activeXdataPoint: null,
|
|
26759
26777
|
YValueHover: [],
|
|
26760
26778
|
hoverXValue: '',
|
|
26761
26779
|
});
|
|
26762
26780
|
};
|
|
26763
26781
|
_this._onBarFocus = function (point, refArrayIndexNumber, color) {
|
|
26764
|
-
|
|
26765
|
-
|
|
26766
|
-
|
|
26767
|
-
|
|
26768
|
-
|
|
26769
|
-
|
|
26770
|
-
|
|
26771
|
-
|
|
26772
|
-
|
|
26773
|
-
|
|
26774
|
-
|
|
26775
|
-
|
|
26776
|
-
|
|
26777
|
-
|
|
26778
|
-
|
|
26779
|
-
|
|
26780
|
-
|
|
26781
|
-
|
|
26782
|
-
|
|
26783
|
-
|
|
26784
|
-
|
|
26785
|
-
}
|
|
26782
|
+
var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
|
|
26783
|
+
_this._refArray.forEach(function (obj, index) {
|
|
26784
|
+
if (obj.index === point.legend && refArrayIndexNumber === index) {
|
|
26785
|
+
_this.setState({
|
|
26786
|
+
refSelected: obj.refElement,
|
|
26787
|
+
/** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
|
|
26788
|
+
isCalloutVisible: _this.state.isLegendSelected === false ||
|
|
26789
|
+
(_this.state.isLegendSelected === true && _this.state.selectedLegendTitle === point.legend),
|
|
26790
|
+
calloutLegend: point.legend,
|
|
26791
|
+
dataForHoverCard: point.y,
|
|
26792
|
+
color: point.color || color,
|
|
26793
|
+
xCalloutValue: point.xAxisCalloutData || point.x.toString(),
|
|
26794
|
+
yCalloutValue: point.yAxisCalloutData,
|
|
26795
|
+
dataPointCalloutProps: point,
|
|
26796
|
+
activeXdataPoint: point.x,
|
|
26797
|
+
YValueHover: YValueHover,
|
|
26798
|
+
hoverXValue: hoverXValue,
|
|
26799
|
+
callOutAccessibilityData: point.callOutAccessibilityData,
|
|
26800
|
+
});
|
|
26801
|
+
}
|
|
26802
|
+
});
|
|
26786
26803
|
};
|
|
26787
26804
|
_this._getScales = function (containerHeight, containerWidth, isNumericScale) {
|
|
26788
26805
|
if (isNumericScale) {
|
|
@@ -26829,6 +26846,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26829
26846
|
_this._onLegendClick(point.legend);
|
|
26830
26847
|
},
|
|
26831
26848
|
hoverAction: function () {
|
|
26849
|
+
_this._handleChartMouseLeave();
|
|
26832
26850
|
_this._onLegendHover(point.legend);
|
|
26833
26851
|
},
|
|
26834
26852
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -26845,6 +26863,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26845
26863
|
_this._onLegendClick(lineLegendText);
|
|
26846
26864
|
},
|
|
26847
26865
|
hoverAction: function () {
|
|
26866
|
+
_this._handleChartMouseLeave();
|
|
26848
26867
|
_this._onLegendHover(lineLegendText);
|
|
26849
26868
|
},
|
|
26850
26869
|
onMouseOutAction: function (isLegendSelected) {
|
|
@@ -26886,9 +26905,10 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26886
26905
|
selectedLegendTitle: '',
|
|
26887
26906
|
xCalloutValue: '',
|
|
26888
26907
|
yCalloutValue: '',
|
|
26889
|
-
|
|
26908
|
+
activeXdataPoint: null,
|
|
26890
26909
|
YValueHover: [],
|
|
26891
26910
|
hoverXValue: '',
|
|
26911
|
+
calloutLegend: '',
|
|
26892
26912
|
};
|
|
26893
26913
|
_this._isHavingLine = _this._checkForLine();
|
|
26894
26914
|
_this._calloutId = Object(office_ui_fabric_react_lib_Utilities__WEBPACK_IMPORTED_MODULE_6__["getId"])('callout');
|
|
@@ -26910,7 +26930,7 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26910
26930
|
var calloutProps = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_7__["DirectionalHint"].topRightEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false }, (this._isHavingLine && {
|
|
26911
26931
|
YValueHover: this.state.YValueHover,
|
|
26912
26932
|
hoverXValue: this.state.hoverXValue,
|
|
26913
|
-
})), { gapSpace: 15, color: this.state.color, legend: this.state.
|
|
26933
|
+
})), { gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }), this.props.calloutProps), Object(_utilities_index__WEBPACK_IMPORTED_MODULE_10__["getAccessibleDataObject"])(this.state.callOutAccessibilityData));
|
|
26914
26934
|
var tickParams = {
|
|
26915
26935
|
tickValues: this.props.tickValues,
|
|
26916
26936
|
tickFormat: this.props.tickFormat,
|
|
@@ -26953,21 +26973,21 @@ var VerticalBarChartBase = /** @class */ (function (_super) {
|
|
|
26953
26973
|
VerticalBarChartBase.prototype._onBarHover = function (point, color, mouseEvent) {
|
|
26954
26974
|
mouseEvent.persist();
|
|
26955
26975
|
var _a = this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
|
|
26956
|
-
if (
|
|
26957
|
-
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
|
|
26958
|
-
this._calloutAnchorPoint !== point) {
|
|
26976
|
+
if (this._calloutAnchorPoint !== point) {
|
|
26959
26977
|
this._calloutAnchorPoint = point;
|
|
26960
26978
|
this.setState({
|
|
26961
26979
|
refSelected: mouseEvent,
|
|
26962
|
-
|
|
26980
|
+
/** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
|
|
26981
|
+
isCalloutVisible: this.state.isLegendSelected === false ||
|
|
26982
|
+
(this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend),
|
|
26963
26983
|
dataForHoverCard: point.y,
|
|
26964
|
-
|
|
26984
|
+
calloutLegend: point.legend,
|
|
26965
26985
|
color: point.color || color,
|
|
26966
26986
|
// To display callout value,If no callout value given, taking given point.x value as a string.
|
|
26967
26987
|
xCalloutValue: point.xAxisCalloutData || point.x.toString(),
|
|
26968
26988
|
yCalloutValue: point.yAxisCalloutData,
|
|
26969
26989
|
dataPointCalloutProps: point,
|
|
26970
|
-
|
|
26990
|
+
activeXdataPoint: point.x,
|
|
26971
26991
|
YValueHover: YValueHover,
|
|
26972
26992
|
hoverXValue: hoverXValue,
|
|
26973
26993
|
callOutAccessibilityData: point.callOutAccessibilityData,
|
|
@@ -27573,6 +27593,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
27573
27593
|
xCalloutValue: '',
|
|
27574
27594
|
yCalloutValue: '',
|
|
27575
27595
|
activeXAxisDataPoint: '',
|
|
27596
|
+
calloutLegend: '',
|
|
27576
27597
|
};
|
|
27577
27598
|
Object(office_ui_fabric_react_lib_Utilities__WEBPACK_IMPORTED_MODULE_5__["warnDeprecations"])(COMPONENT_NAME, props, {
|
|
27578
27599
|
colors: 'IVSChartDataPoint.color',
|
|
@@ -27602,7 +27623,7 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
27602
27623
|
var _a = this.props.isCalloutForStack, isCalloutForStack = _a === void 0 ? false : _a;
|
|
27603
27624
|
this._dataset = this._createDataSetLayer();
|
|
27604
27625
|
var legendBars = this._getLegendData(this._points, this.props.theme.palette, this._createLegendsForLine(this.props.data));
|
|
27605
|
-
var calloutProps = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_6__["DirectionalHint"].topRightEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.
|
|
27626
|
+
var calloutProps = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: office_ui_fabric_react_lib_Callout__WEBPACK_IMPORTED_MODULE_6__["DirectionalHint"].topRightEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps), Object(_utilities_index__WEBPACK_IMPORTED_MODULE_10__["getAccessibleDataObject"])(this.state.callOutAccessibilityData));
|
|
27606
27627
|
var tickParams = {
|
|
27607
27628
|
tickValues: this.props.tickValues,
|
|
27608
27629
|
tickFormat: this.props.tickFormat,
|
|
@@ -27706,7 +27727,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
27706
27727
|
action: function () {
|
|
27707
27728
|
_this._onLegendClick(point.legend);
|
|
27708
27729
|
},
|
|
27709
|
-
hoverAction: allowHoverOnLegend
|
|
27730
|
+
hoverAction: allowHoverOnLegend
|
|
27731
|
+
? function () {
|
|
27732
|
+
_this._handleChartMouseLeave();
|
|
27733
|
+
_this._onLegendHover(point.legend);
|
|
27734
|
+
}
|
|
27735
|
+
: undefined,
|
|
27710
27736
|
onMouseOutAction: allowHoverOnLegend ? function (isLegendSelected) { return _this._onLegendLeave(isLegendSelected); } : undefined,
|
|
27711
27737
|
};
|
|
27712
27738
|
actions.push(legend);
|
|
@@ -27722,7 +27748,12 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
27722
27748
|
action: function () {
|
|
27723
27749
|
_this._onLegendClick(point.title);
|
|
27724
27750
|
},
|
|
27725
|
-
hoverAction: allowHoverOnLegend
|
|
27751
|
+
hoverAction: allowHoverOnLegend
|
|
27752
|
+
? function () {
|
|
27753
|
+
_this._handleChartMouseLeave();
|
|
27754
|
+
_this._onLegendHover(point.title);
|
|
27755
|
+
}
|
|
27756
|
+
: undefined,
|
|
27726
27757
|
onMouseOutAction: allowHoverOnLegend ? function (isLegendSelected) { return _this._onLegendLeave(isLegendSelected); } : undefined,
|
|
27727
27758
|
};
|
|
27728
27759
|
legendsOfLine.push(legend);
|
|
@@ -27736,14 +27767,17 @@ var VerticalStackedBarChartBase = /** @class */ (function (_super) {
|
|
|
27736
27767
|
this._onRectFocusHover(xAxisPoint, point, color, mouseEvent);
|
|
27737
27768
|
};
|
|
27738
27769
|
VerticalStackedBarChartBase.prototype._onRectFocusHover = function (xAxisPoint, point, color, refSelected) {
|
|
27739
|
-
if (
|
|
27740
|
-
(this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
|
|
27741
|
-
this._calloutAnchorPoint !== point) {
|
|
27770
|
+
if (this._calloutAnchorPoint !== point) {
|
|
27742
27771
|
this._calloutAnchorPoint = point;
|
|
27743
27772
|
this.setState({
|
|
27744
27773
|
refSelected: refSelected,
|
|
27745
|
-
|
|
27746
|
-
|
|
27774
|
+
/**
|
|
27775
|
+
* Show the callout if highlighted bar is focused/hovered
|
|
27776
|
+
* and Hide it if unhighlighted bar is focused/hovered
|
|
27777
|
+
*/
|
|
27778
|
+
isCalloutVisible: this.state.isLegendSelected === false ||
|
|
27779
|
+
(this.state.isLegendSelected === true && this.state.selectedLegendTitle === point.legend),
|
|
27780
|
+
calloutLegend: point.legend,
|
|
27747
27781
|
dataForHoverCard: point.data,
|
|
27748
27782
|
color: color,
|
|
27749
27783
|
xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint,
|
|
@@ -29033,7 +29067,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
29033
29067
|
// Do not modify this file; it is generated as part of publish.
|
|
29034
29068
|
// The checked in version is a placeholder only and will not be updated.
|
|
29035
29069
|
|
|
29036
|
-
Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/charting', '4.23.
|
|
29070
|
+
Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('@uifabric/charting', '4.23.22');
|
|
29037
29071
|
|
|
29038
29072
|
|
|
29039
29073
|
/***/ }),
|
|
@@ -34956,6 +34990,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
34956
34990
|
|
|
34957
34991
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2_unstable", function() { return _components_GroupedList_index__WEBPACK_IMPORTED_MODULE_0__["GroupedListV2_unstable"]; });
|
|
34958
34992
|
|
|
34993
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2FC", function() { return _components_GroupedList_index__WEBPACK_IMPORTED_MODULE_0__["GroupedListV2FC"]; });
|
|
34994
|
+
|
|
34995
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2Wrapper", function() { return _components_GroupedList_index__WEBPACK_IMPORTED_MODULE_0__["GroupedListV2Wrapper"]; });
|
|
34996
|
+
|
|
34959
34997
|
/* harmony import */ var _utilities_groupedList_GroupedListUtility__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("../../packages/office-ui-fabric-react/lib/utilities/groupedList/GroupedListUtility.js");
|
|
34960
34998
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GetGroupCount", function() { return _utilities_groupedList_GroupedListUtility__WEBPACK_IMPORTED_MODULE_1__["GetGroupCount"]; });
|
|
34961
34999
|
|
|
@@ -63312,6 +63350,12 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
63312
63350
|
/* harmony import */ var _GroupedListV2__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__("../../packages/office-ui-fabric-react/lib/components/GroupedList/GroupedListV2.js");
|
|
63313
63351
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2_unstable", function() { return _GroupedListV2__WEBPACK_IMPORTED_MODULE_8__["GroupedListV2_unstable"]; });
|
|
63314
63352
|
|
|
63353
|
+
/* harmony import */ var _GroupedListV2_base__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__("../../packages/office-ui-fabric-react/lib/components/GroupedList/GroupedListV2.base.js");
|
|
63354
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2FC", function() { return _GroupedListV2_base__WEBPACK_IMPORTED_MODULE_9__["GroupedListV2FC"]; });
|
|
63355
|
+
|
|
63356
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2Wrapper", function() { return _GroupedListV2_base__WEBPACK_IMPORTED_MODULE_9__["GroupedListV2Wrapper"]; });
|
|
63357
|
+
|
|
63358
|
+
|
|
63315
63359
|
|
|
63316
63360
|
|
|
63317
63361
|
|
|
@@ -87304,6 +87348,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
87304
87348
|
|
|
87305
87349
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2_unstable", function() { return _GroupedList__WEBPACK_IMPORTED_MODULE_33__["GroupedListV2_unstable"]; });
|
|
87306
87350
|
|
|
87351
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2FC", function() { return _GroupedList__WEBPACK_IMPORTED_MODULE_33__["GroupedListV2FC"]; });
|
|
87352
|
+
|
|
87353
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GroupedListV2Wrapper", function() { return _GroupedList__WEBPACK_IMPORTED_MODULE_33__["GroupedListV2Wrapper"]; });
|
|
87354
|
+
|
|
87307
87355
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "GetGroupCount", function() { return _GroupedList__WEBPACK_IMPORTED_MODULE_33__["GetGroupCount"]; });
|
|
87308
87356
|
|
|
87309
87357
|
/* harmony import */ var _GroupedListV2__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__("../../packages/office-ui-fabric-react/lib/GroupedListV2.js");
|
|
@@ -93011,7 +93059,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
93011
93059
|
// Do not modify this file; it is generated as part of publish.
|
|
93012
93060
|
// The checked in version is a placeholder only and will not be updated.
|
|
93013
93061
|
|
|
93014
|
-
Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('office-ui-fabric-react', '7.
|
|
93062
|
+
Object(_uifabric_set_version__WEBPACK_IMPORTED_MODULE_0__["setVersion"])('office-ui-fabric-react', '7.202.0');
|
|
93015
93063
|
|
|
93016
93064
|
|
|
93017
93065
|
/***/ }),
|