@fluentui/react-charting 5.24.32 → 5.24.34
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/CHANGELOG.json +66 -1
- package/CHANGELOG.md +22 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/ChartTable/ChartTable.base.js +12 -6
- package/lib/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.js +40 -23
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/ChartTable/ChartTable.base.js +12 -7
- package/lib-amd/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.js +40 -23
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/ChartTable/ChartTable.base.js +12 -6
- package/lib-commonjs/components/ChartTable/ChartTable.base.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +94 -16
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.js +40 -23
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/package.json +2 -5
- package/project.json +2 -1
|
@@ -776,7 +776,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
776
776
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
777
777
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
778
778
|
var _this_1 = this;
|
|
779
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26;
|
|
779
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27;
|
|
780
780
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
781
781
|
var lines = [];
|
|
782
782
|
if (this.state.isSelectedLegend) {
|
|
@@ -820,12 +820,12 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
820
820
|
})
|
|
821
821
|
: 0;
|
|
822
822
|
if (this_1._points[i].data.length === 1) {
|
|
823
|
-
var
|
|
823
|
+
var _28 = this_1._points[i].data[0], x1_1 = _28.x, y1 = _28.y, xAxisCalloutData_1 = _28.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _28.xAxisCalloutAccessibilityData;
|
|
824
824
|
var xPoint = this_1._xAxisScale(x1_1);
|
|
825
825
|
var yPoint = yScale(y1);
|
|
826
826
|
if ((0, index_3.isPlottable)(xPoint, yPoint)) {
|
|
827
827
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
828
|
-
var
|
|
828
|
+
var isLegendSelected_1 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
829
829
|
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
830
830
|
var supportsTextMode = (_b = (_a = this_1._points[i].lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes('text');
|
|
831
831
|
var text = this_1._points[i].data[0].text;
|
|
@@ -834,14 +834,14 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
834
834
|
? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
|
|
835
835
|
: activePoint === circleId_1
|
|
836
836
|
? 5.5
|
|
837
|
-
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity:
|
|
837
|
+
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected_1 ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected_1, ref: function (e) {
|
|
838
838
|
_this_1._refCallback(e, circleId_1);
|
|
839
839
|
}, onFocus: function () {
|
|
840
840
|
return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1);
|
|
841
841
|
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))),
|
|
842
842
|
!this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: xPoint, y: yPoint +
|
|
843
843
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
|
|
844
|
-
12, className: classNames.markerLabel, opacity:
|
|
844
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_1 ? 1 : 0.1 }, text))));
|
|
845
845
|
}
|
|
846
846
|
}
|
|
847
847
|
var gapIndex = 0;
|
|
@@ -859,7 +859,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
859
859
|
var lineId = "".concat(this_1._lineId, "_").concat(i);
|
|
860
860
|
var borderId = "".concat(this_1._borderId, "_").concat(i);
|
|
861
861
|
var strokeWidth = ((_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
862
|
-
var
|
|
862
|
+
var isLegendSelected_2 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
863
863
|
var lineData = [];
|
|
864
864
|
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
865
865
|
lineData.push([
|
|
@@ -872,7 +872,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
872
872
|
// Check if lines should be drawn based on mode
|
|
873
873
|
var lineMode = (_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.mode;
|
|
874
874
|
var shouldDrawLines = lineMode !== 'markers';
|
|
875
|
-
if (shouldDrawLines &&
|
|
875
|
+
if (shouldDrawLines && isLegendSelected_2) {
|
|
876
876
|
var lineBorderWidth = ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.lineBorderWidth)
|
|
877
877
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
878
878
|
: 0;
|
|
@@ -891,7 +891,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
891
891
|
var showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
|
|
892
892
|
if (showMarkers) {
|
|
893
893
|
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
894
|
-
var
|
|
894
|
+
var _29 = this_1._points[i].data[k], x = _29.x, y = _29.y;
|
|
895
895
|
var xPoint = this_1._xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
896
896
|
var yPoint = yScale(y);
|
|
897
897
|
if ((0, index_3.isPlottable)(xPoint, yPoint)) {
|
|
@@ -903,7 +903,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
903
903
|
? 5.5
|
|
904
904
|
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === this_1._circleId
|
|
905
905
|
? theme.semanticColors.bodyBackground
|
|
906
|
-
: perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity:
|
|
906
|
+
: perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity: isLegendSelected_2 ? 1 : 0.1, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
|
|
907
907
|
}
|
|
908
908
|
}
|
|
909
909
|
}
|
|
@@ -916,14 +916,14 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
916
916
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
917
917
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
918
918
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
919
|
-
var
|
|
920
|
-
var
|
|
919
|
+
var _30 = this_1._points[i].data[j - 1], x1 = _30.x, y1 = _30.y, xAxisCalloutData = _30.xAxisCalloutData, xAxisCalloutAccessibilityData = _30.xAxisCalloutAccessibilityData;
|
|
920
|
+
var _31 = this_1._points[i].data[j], x2 = _31.x, y2 = _31.y;
|
|
921
921
|
var xPoint1 = this_1._xAxisScale(x1);
|
|
922
922
|
var yPoint1 = yScale(y1);
|
|
923
923
|
var xPoint2 = this_1._xAxisScale(x2);
|
|
924
924
|
var yPoint2 = yScale(y2);
|
|
925
925
|
var strokeWidth = ((_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
926
|
-
var
|
|
926
|
+
var isLegendSelected_3 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
927
927
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
928
928
|
var supportsTextMode = (_x = (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.mode) === null || _x === void 0 ? void 0 : _x.includes('text');
|
|
929
929
|
var text = this_1._points[i].data[j - 1].text;
|
|
@@ -931,21 +931,21 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
931
931
|
if ((0, index_3.isPlottable)(xPoint1, yPoint1)) {
|
|
932
932
|
var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
|
|
933
933
|
pointsForLine.push(((_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('markers')) || supportsTextMode ? (React.createElement(React.Fragment, null,
|
|
934
|
-
React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable":
|
|
934
|
+
React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
935
935
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
936
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity:
|
|
936
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01, fill: ((_0 = this_1._points[i].data[j - 1]) === null || _0 === void 0 ? void 0 : _0.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_1 = this_1._points[i].data[j - 1]) === null || _1 === void 0 ? void 0 : _1.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j - 1].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j - 1) })),
|
|
937
937
|
!this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: xPoint1, y: yPoint1 +
|
|
938
938
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
939
|
-
12, className: classNames.markerLabel, opacity:
|
|
939
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
940
940
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
941
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity:
|
|
941
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01, fill: ((_3 = this_1._points[i].data[j - 1]) === null || _3 === void 0 ? void 0 : _3.markerColor) || this_1._getPointFill(lineColor, circleId, j, false), stroke: ((_4 = this_1._points[i].data[j - 1]) === null || _4 === void 0 ? void 0 : _4.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
|
|
942
942
|
}
|
|
943
943
|
if (j + 1 === this_1._points[i].data.length) {
|
|
944
944
|
// If this is last point of the line segment.
|
|
945
945
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
946
946
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
947
947
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
948
|
-
var
|
|
948
|
+
var _32 = this_1._points[i].data[j], lastCirlceXCallout_1 = _32.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _32.xAxisCalloutAccessibilityData;
|
|
949
949
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
950
950
|
var lastSupportsTextMode = (_6 = (_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.mode) === null || _6 === void 0 ? void 0 : _6.includes('text');
|
|
951
951
|
var lastText = this_1._points[i].data[j].text;
|
|
@@ -953,21 +953,21 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
953
953
|
var path = this_1._getPath(xPoint2, yPoint2, lastCircleId_1, j, true, this_1._points[i].index);
|
|
954
954
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
955
955
|
((_8 = (_7 = this_1._points[i].lineOptions) === null || _7 === void 0 ? void 0 : _7.mode) === null || _8 === void 0 ? void 0 : _8.includes('markers')) || lastSupportsTextMode ? (React.createElement(React.Fragment, null,
|
|
956
|
-
React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable":
|
|
956
|
+
React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
957
957
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
958
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity:
|
|
958
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected_3 && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_9 = this_1._points[i].data[j].text) !== null && _9 !== void 0 ? _9 : this_1._getAriaLabel(i, j) })),
|
|
959
959
|
!this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: xPoint2, y: yPoint2 +
|
|
960
960
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
961
|
-
12, className: classNames.markerLabel, opacity:
|
|
961
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected_3, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
962
962
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
963
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity:
|
|
963
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected_3 && !lastPointHidden ? 1 : 0.01, fill: ((_10 = this_1._points[i].data[j]) === null || _10 === void 0 ? void 0 : _10.markerColor) || this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: ((_11 = this_1._points[i].data[j]) === null || _11 === void 0 ? void 0 : _11.markerColor) || lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
|
|
964
964
|
React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: xPoint2, cy: yPoint2, opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
|
|
965
965
|
}
|
|
966
966
|
}
|
|
967
967
|
if ((0, index_3.isPlottable)(xPoint1, yPoint1) &&
|
|
968
968
|
(0, index_3.isPlottable)(xPoint2, yPoint2) &&
|
|
969
969
|
(!this_1._hasMarkersMode || ((_13 = (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.mode) === null || _13 === void 0 ? void 0 : _13.includes('lines')))) {
|
|
970
|
-
if (
|
|
970
|
+
if (isLegendSelected_3) {
|
|
971
971
|
// don't draw line if it is in a gap
|
|
972
972
|
if (!isInGap) {
|
|
973
973
|
var lineBorderWidth = ((_14 = this_1._points[i].lineOptions) === null || _14 === void 0 ? void 0 : _14.lineBorderWidth)
|
|
@@ -992,12 +992,29 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
992
992
|
_loop_2(j);
|
|
993
993
|
}
|
|
994
994
|
}
|
|
995
|
+
// Add filled area for scatterpolar charts
|
|
996
|
+
var fillMode = (_26 = this_1._points[i].lineOptions) === null || _26 === void 0 ? void 0 : _26.fill;
|
|
997
|
+
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
998
|
+
if (fillMode === 'toself' && this_1._points[i].data.length >= 3 && isLegendSelected && this_1._isScatterPolar) {
|
|
999
|
+
var getScaledXValue_1 = function (dataPoint) {
|
|
1000
|
+
return _this_1._xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
|
|
1001
|
+
};
|
|
1002
|
+
var fillPathGenerator = (0, d3_shape_1.line)()
|
|
1003
|
+
.x(function (dataPoint) { return getScaledXValue_1(dataPoint); })
|
|
1004
|
+
.y(function (dataPoint) { return yScale(dataPoint.y); })
|
|
1005
|
+
.curve((0, index_3.getCurveFactory)(lineCurve))
|
|
1006
|
+
.defined(function (dataPoint) { return (0, index_3.isPlottable)(getScaledXValue_1(dataPoint), yScale(dataPoint.y)); });
|
|
1007
|
+
var fillPath = fillPathGenerator(this_1._points[i].data);
|
|
1008
|
+
if (fillPath) {
|
|
1009
|
+
linesForLine.push(React.createElement("path", { key: "scatterpolar_fill_".concat(i), d: "".concat(fillPath, "Z"), fill: lineColor, fillOpacity: 0.5, stroke: lineColor, strokeWidth: 2, strokeOpacity: 0.8, pointerEvents: "none" }));
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
995
1012
|
if (this_1._isScatterPolar) {
|
|
996
1013
|
pointsForLine.push.apply(pointsForLine, (0, scatterpolar_utils_1.renderScatterPolarCategoryLabels)({
|
|
997
1014
|
xAxisScale: this_1._xAxisScale,
|
|
998
1015
|
yAxisScale: yScale,
|
|
999
1016
|
className: classNames.markerLabel || '',
|
|
1000
|
-
lineOptions: (
|
|
1017
|
+
lineOptions: (_27 = this_1._points[i]) === null || _27 === void 0 ? void 0 : _27.lineOptions,
|
|
1001
1018
|
}));
|
|
1002
1019
|
}
|
|
1003
1020
|
lines.push(React.createElement("g", { key: "line_".concat(i), role: "region", "aria-label": "".concat(legendVal, ", line ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") },
|