@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
|
@@ -773,7 +773,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
773
773
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
774
774
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
775
775
|
var _this_1 = this;
|
|
776
|
-
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;
|
|
776
|
+
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;
|
|
777
777
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
778
778
|
var lines = [];
|
|
779
779
|
if (this.state.isSelectedLegend) {
|
|
@@ -817,12 +817,12 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
817
817
|
})
|
|
818
818
|
: 0;
|
|
819
819
|
if (this_1._points[i].data.length === 1) {
|
|
820
|
-
var
|
|
820
|
+
var _28 = this_1._points[i].data[0], x1_1 = _28.x, y1 = _28.y, xAxisCalloutData_1 = _28.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _28.xAxisCalloutAccessibilityData;
|
|
821
821
|
var xPoint = this_1._xAxisScale(x1_1);
|
|
822
822
|
var yPoint = yScale(y1);
|
|
823
823
|
if (isPlottable(xPoint, yPoint)) {
|
|
824
824
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
825
|
-
var
|
|
825
|
+
var isLegendSelected_1 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
826
826
|
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
827
827
|
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');
|
|
828
828
|
var text = this_1._points[i].data[0].text;
|
|
@@ -831,14 +831,14 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
831
831
|
? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
|
|
832
832
|
: activePoint === circleId_1
|
|
833
833
|
? 5.5
|
|
834
|
-
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity:
|
|
834
|
+
: 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) {
|
|
835
835
|
_this_1._refCallback(e, circleId_1);
|
|
836
836
|
}, onFocus: function () {
|
|
837
837
|
return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1);
|
|
838
838
|
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))),
|
|
839
839
|
!this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: xPoint, y: yPoint +
|
|
840
840
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
|
|
841
|
-
12, className: classNames.markerLabel, opacity:
|
|
841
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_1 ? 1 : 0.1 }, text))));
|
|
842
842
|
}
|
|
843
843
|
}
|
|
844
844
|
var gapIndex = 0;
|
|
@@ -856,7 +856,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
856
856
|
var lineId = "".concat(this_1._lineId, "_").concat(i);
|
|
857
857
|
var borderId = "".concat(this_1._borderId, "_").concat(i);
|
|
858
858
|
var strokeWidth = ((_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
859
|
-
var
|
|
859
|
+
var isLegendSelected_2 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
860
860
|
var lineData = [];
|
|
861
861
|
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
862
862
|
lineData.push([
|
|
@@ -869,7 +869,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
869
869
|
// Check if lines should be drawn based on mode
|
|
870
870
|
var lineMode = (_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.mode;
|
|
871
871
|
var shouldDrawLines = lineMode !== 'markers';
|
|
872
|
-
if (shouldDrawLines &&
|
|
872
|
+
if (shouldDrawLines && isLegendSelected_2) {
|
|
873
873
|
var lineBorderWidth = ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.lineBorderWidth)
|
|
874
874
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
875
875
|
: 0;
|
|
@@ -888,7 +888,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
888
888
|
var showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
|
|
889
889
|
if (showMarkers) {
|
|
890
890
|
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
891
|
-
var
|
|
891
|
+
var _29 = this_1._points[i].data[k], x = _29.x, y = _29.y;
|
|
892
892
|
var xPoint = this_1._xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
893
893
|
var yPoint = yScale(y);
|
|
894
894
|
if (isPlottable(xPoint, yPoint)) {
|
|
@@ -900,7 +900,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
900
900
|
? 5.5
|
|
901
901
|
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === this_1._circleId
|
|
902
902
|
? theme.semanticColors.bodyBackground
|
|
903
|
-
: perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity:
|
|
903
|
+
: 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 }));
|
|
904
904
|
}
|
|
905
905
|
}
|
|
906
906
|
}
|
|
@@ -913,14 +913,14 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
913
913
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
914
914
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
915
915
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
916
|
-
var
|
|
917
|
-
var
|
|
916
|
+
var _30 = this_1._points[i].data[j - 1], x1 = _30.x, y1 = _30.y, xAxisCalloutData = _30.xAxisCalloutData, xAxisCalloutAccessibilityData = _30.xAxisCalloutAccessibilityData;
|
|
917
|
+
var _31 = this_1._points[i].data[j], x2 = _31.x, y2 = _31.y;
|
|
918
918
|
var xPoint1 = this_1._xAxisScale(x1);
|
|
919
919
|
var yPoint1 = yScale(y1);
|
|
920
920
|
var xPoint2 = this_1._xAxisScale(x2);
|
|
921
921
|
var yPoint2 = yScale(y2);
|
|
922
922
|
var strokeWidth = ((_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
923
|
-
var
|
|
923
|
+
var isLegendSelected_3 = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
924
924
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
925
925
|
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');
|
|
926
926
|
var text = this_1._points[i].data[j - 1].text;
|
|
@@ -928,21 +928,21 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
928
928
|
if (isPlottable(xPoint1, yPoint1)) {
|
|
929
929
|
var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
|
|
930
930
|
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,
|
|
931
|
-
React.createElement("circle", __assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable":
|
|
931
|
+
React.createElement("circle", __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 () {
|
|
932
932
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
933
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity:
|
|
933
|
+
}, 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) })),
|
|
934
934
|
!this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: xPoint1, y: yPoint1 +
|
|
935
935
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
936
|
-
12, className: classNames.markerLabel, opacity:
|
|
936
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __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 () {
|
|
937
937
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
938
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity:
|
|
938
|
+
}, 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) }))));
|
|
939
939
|
}
|
|
940
940
|
if (j + 1 === this_1._points[i].data.length) {
|
|
941
941
|
// If this is last point of the line segment.
|
|
942
942
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
943
943
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
944
944
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
945
|
-
var
|
|
945
|
+
var _32 = this_1._points[i].data[j], lastCirlceXCallout_1 = _32.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _32.xAxisCalloutAccessibilityData;
|
|
946
946
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
947
947
|
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');
|
|
948
948
|
var lastText = this_1._points[i].data[j].text;
|
|
@@ -950,21 +950,21 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
950
950
|
var path = this_1._getPath(xPoint2, yPoint2, lastCircleId_1, j, true, this_1._points[i].index);
|
|
951
951
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
952
952
|
((_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,
|
|
953
|
-
React.createElement("circle", __assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable":
|
|
953
|
+
React.createElement("circle", __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 () {
|
|
954
954
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
955
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity:
|
|
955
|
+
}, 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) })),
|
|
956
956
|
!this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: xPoint2, y: yPoint2 +
|
|
957
957
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
958
|
-
12, className: classNames.markerLabel, opacity:
|
|
958
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected_3 && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __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 () {
|
|
959
959
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
960
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity:
|
|
960
|
+
}, 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) }))),
|
|
961
961
|
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 })));
|
|
962
962
|
}
|
|
963
963
|
}
|
|
964
964
|
if (isPlottable(xPoint1, yPoint1) &&
|
|
965
965
|
isPlottable(xPoint2, yPoint2) &&
|
|
966
966
|
(!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')))) {
|
|
967
|
-
if (
|
|
967
|
+
if (isLegendSelected_3) {
|
|
968
968
|
// don't draw line if it is in a gap
|
|
969
969
|
if (!isInGap) {
|
|
970
970
|
var lineBorderWidth = ((_14 = this_1._points[i].lineOptions) === null || _14 === void 0 ? void 0 : _14.lineBorderWidth)
|
|
@@ -989,12 +989,29 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
989
989
|
_loop_2(j);
|
|
990
990
|
}
|
|
991
991
|
}
|
|
992
|
+
// Add filled area for scatterpolar charts
|
|
993
|
+
var fillMode = (_26 = this_1._points[i].lineOptions) === null || _26 === void 0 ? void 0 : _26.fill;
|
|
994
|
+
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
995
|
+
if (fillMode === 'toself' && this_1._points[i].data.length >= 3 && isLegendSelected && this_1._isScatterPolar) {
|
|
996
|
+
var getScaledXValue_1 = function (dataPoint) {
|
|
997
|
+
return _this_1._xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
|
|
998
|
+
};
|
|
999
|
+
var fillPathGenerator = d3Line()
|
|
1000
|
+
.x(function (dataPoint) { return getScaledXValue_1(dataPoint); })
|
|
1001
|
+
.y(function (dataPoint) { return yScale(dataPoint.y); })
|
|
1002
|
+
.curve(getCurveFactory(lineCurve))
|
|
1003
|
+
.defined(function (dataPoint) { return isPlottable(getScaledXValue_1(dataPoint), yScale(dataPoint.y)); });
|
|
1004
|
+
var fillPath = fillPathGenerator(this_1._points[i].data);
|
|
1005
|
+
if (fillPath) {
|
|
1006
|
+
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" }));
|
|
1007
|
+
}
|
|
1008
|
+
}
|
|
992
1009
|
if (this_1._isScatterPolar) {
|
|
993
1010
|
pointsForLine.push.apply(pointsForLine, renderScatterPolarCategoryLabels({
|
|
994
1011
|
xAxisScale: this_1._xAxisScale,
|
|
995
1012
|
yAxisScale: yScale,
|
|
996
1013
|
className: classNames.markerLabel || '',
|
|
997
|
-
lineOptions: (
|
|
1014
|
+
lineOptions: (_27 = this_1._points[i]) === null || _27 === void 0 ? void 0 : _27.lineOptions,
|
|
998
1015
|
}));
|
|
999
1016
|
}
|
|
1000
1017
|
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.") },
|