@fluentui/react-charting 5.24.29 → 5.24.31
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 +43 -1
- package/CHANGELOG.md +22 -2
- package/dist/react-charting.d.ts +4 -0
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +1 -0
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +12 -7
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.js +50 -26
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/types/IDataPoint.d.ts +4 -0
- package/lib/types/IDataPoint.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +12 -7
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.js +50 -26
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/types/IDataPoint.d.ts +4 -0
- package/lib-amd/types/IDataPoint.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +12 -7
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.js +50 -26
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/types/IDataPoint.d.ts +4 -0
- package/lib-commonjs/types/IDataPoint.js.map +1 -1
- package/package.json +4 -4
|
@@ -780,7 +780,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
780
780
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
781
781
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
782
782
|
var _this_1 = this;
|
|
783
|
-
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;
|
|
783
|
+
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;
|
|
784
784
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
785
785
|
var lines = [];
|
|
786
786
|
if (this.state.isSelectedLegend) {
|
|
@@ -824,7 +824,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
824
824
|
})
|
|
825
825
|
: 0;
|
|
826
826
|
if (this_1._points[i].data.length === 1) {
|
|
827
|
-
var
|
|
827
|
+
var _27 = this_1._points[i].data[0], x1_1 = _27.x, y1 = _27.y, xAxisCalloutData_1 = _27.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _27.xAxisCalloutAccessibilityData;
|
|
828
828
|
var xPoint = this_1._xAxisScale(x1_1);
|
|
829
829
|
var yPoint = yScale(y1);
|
|
830
830
|
if (isPlottable(xPoint, yPoint)) {
|
|
@@ -873,20 +873,44 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
873
873
|
this_1._points[i].data[k].y,
|
|
874
874
|
]);
|
|
875
875
|
}
|
|
876
|
-
if
|
|
877
|
-
|
|
876
|
+
// Check if lines should be drawn based on mode
|
|
877
|
+
var lineMode = (_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.mode;
|
|
878
|
+
var shouldDrawLines = lineMode !== 'markers';
|
|
879
|
+
if (shouldDrawLines && isLegendSelected) {
|
|
880
|
+
var lineBorderWidth = ((_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.lineBorderWidth)
|
|
878
881
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
879
882
|
: 0;
|
|
880
883
|
if (lineBorderWidth > 0) {
|
|
881
|
-
bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (
|
|
884
|
+
bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_k = (_j = this_1._points[i].lineOptions) === null || _j === void 0 ? void 0 : _j.strokeLinecap) !== null && _k !== void 0 ? _k : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
882
885
|
}
|
|
883
|
-
linesForLine.push(React.createElement("path", __assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (
|
|
886
|
+
linesForLine.push(React.createElement("path", __assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_o = (_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap) !== null && _o !== void 0 ? _o : 'round', strokeDasharray: (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeDasharray, onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1 })));
|
|
884
887
|
}
|
|
885
|
-
else {
|
|
886
|
-
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (
|
|
888
|
+
else if (shouldDrawLines) {
|
|
889
|
+
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_r = (_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.strokeLinecap) !== null && _r !== void 0 ? _r : 'round', strokeDasharray: (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeDasharray, opacity: 0.1 }));
|
|
887
890
|
}
|
|
888
891
|
var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
|
|
892
|
+
// Always add the highlight circle for large dataset hover
|
|
889
893
|
pointsForLine.push(React.createElement("circle", { id: "".concat(this_1._staticHighlightCircle, "_").concat(i), key: "".concat(this_1._staticHighlightCircle, "_").concat(i), r: 5.5, cx: 0, cy: 0, fill: theme.semanticColors.bodyBackground, strokeWidth: DEFAULT_LINE_STROKE_SIZE, stroke: lineColor, visibility: isPointHighlighted ? 'visibility' : 'hidden', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight, yScale), onMouseOut: this_1._handleMouseOut }));
|
|
894
|
+
// Add individual markers if mode includes 'markers'
|
|
895
|
+
var showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
|
|
896
|
+
if (showMarkers) {
|
|
897
|
+
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
898
|
+
var _28 = this_1._points[i].data[k], x = _28.x, y = _28.y;
|
|
899
|
+
var xPoint = this_1._xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
900
|
+
var yPoint = yScale(y);
|
|
901
|
+
if (isPlottable(xPoint, yPoint)) {
|
|
902
|
+
var markerSize = this_1._points[i].data[k].markerSize;
|
|
903
|
+
var perPointColor = (_t = this_1._points[i].data[k]) === null || _t === void 0 ? void 0 : _t.markerColor;
|
|
904
|
+
pointsForLine.push(React.createElement("circle", { key: "".concat(this_1._circleId, "_").concat(i, "_").concat(k, "_marker"), r: markerSize
|
|
905
|
+
? (markerSize * extraMaxPixels * 0.3) / maxMarkerSize
|
|
906
|
+
: activePoint === this_1._circleId
|
|
907
|
+
? 5.5
|
|
908
|
+
: 3.5, cx: xPoint, cy: yPoint, fill: activePoint === this_1._circleId
|
|
909
|
+
? theme.semanticColors.bodyBackground
|
|
910
|
+
: perPointColor || ((_u = this_1._points[i]) === null || _u === void 0 ? void 0 : _u.color) || lineColor, stroke: perPointColor || lineColor, strokeWidth: 1, opacity: isLegendSelected ? 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 }));
|
|
911
|
+
}
|
|
912
|
+
}
|
|
913
|
+
}
|
|
890
914
|
}
|
|
891
915
|
else if (!this_1.props.optimizeLargeData) {
|
|
892
916
|
var _loop_2 = function (j) {
|
|
@@ -896,74 +920,74 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
896
920
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
897
921
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
898
922
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
899
|
-
var
|
|
900
|
-
var
|
|
923
|
+
var _29 = this_1._points[i].data[j - 1], x1 = _29.x, y1 = _29.y, xAxisCalloutData = _29.xAxisCalloutData, xAxisCalloutAccessibilityData = _29.xAxisCalloutAccessibilityData;
|
|
924
|
+
var _30 = this_1._points[i].data[j], x2 = _30.x, y2 = _30.y;
|
|
901
925
|
var xPoint1 = this_1._xAxisScale(x1);
|
|
902
926
|
var yPoint1 = yScale(y1);
|
|
903
927
|
var xPoint2 = this_1._xAxisScale(x2);
|
|
904
928
|
var yPoint2 = yScale(y2);
|
|
905
|
-
var strokeWidth = ((
|
|
929
|
+
var strokeWidth = ((_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
906
930
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
907
931
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
908
|
-
var supportsTextMode = (
|
|
932
|
+
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');
|
|
909
933
|
var text = this_1._points[i].data[j - 1].text;
|
|
910
934
|
var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
|
|
911
935
|
if (isPlottable(xPoint1, yPoint1)) {
|
|
912
936
|
var path = this_1._getPath(xPoint1, yPoint1, circleId, j, false, this_1._points[i].index);
|
|
913
|
-
pointsForLine.push(((
|
|
937
|
+
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,
|
|
914
938
|
React.createElement("circle", __assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint1, cy: yPoint1, "data-is-focusable": isLegendSelected, 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 () {
|
|
915
939
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
916
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (
|
|
940
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !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) })),
|
|
917
941
|
!this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: xPoint1, y: yPoint1 +
|
|
918
942
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
919
943
|
12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, 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 () {
|
|
920
944
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
921
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
|
|
945
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !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) }))));
|
|
922
946
|
}
|
|
923
947
|
if (j + 1 === this_1._points[i].data.length) {
|
|
924
948
|
// If this is last point of the line segment.
|
|
925
949
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
926
950
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
927
951
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
928
|
-
var
|
|
952
|
+
var _31 = this_1._points[i].data[j], lastCirlceXCallout_1 = _31.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _31.xAxisCalloutAccessibilityData;
|
|
929
953
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
930
|
-
var lastSupportsTextMode = (
|
|
954
|
+
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');
|
|
931
955
|
var lastText = this_1._points[i].data[j].text;
|
|
932
956
|
if (isPlottable(xPoint2, yPoint2)) {
|
|
933
957
|
var path = this_1._getPath(xPoint2, yPoint2, lastCircleId_1, j, true, this_1._points[i].index);
|
|
934
958
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
935
|
-
((
|
|
959
|
+
((_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,
|
|
936
960
|
React.createElement("circle", __assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: xPoint2, cy: yPoint2, "data-is-focusable": isLegendSelected, 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 () {
|
|
937
961
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
938
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (
|
|
962
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !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) })),
|
|
939
963
|
!this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: xPoint2, y: yPoint2 +
|
|
940
964
|
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
941
965
|
12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", __assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, 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 () {
|
|
942
966
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
943
|
-
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j) }))),
|
|
967
|
+
}, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !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) }))),
|
|
944
968
|
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 })));
|
|
945
969
|
}
|
|
946
970
|
}
|
|
947
971
|
if (isPlottable(xPoint1, yPoint1) &&
|
|
948
972
|
isPlottable(xPoint2, yPoint2) &&
|
|
949
|
-
(!this_1._hasMarkersMode || ((
|
|
973
|
+
(!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')))) {
|
|
950
974
|
if (isLegendSelected) {
|
|
951
975
|
// don't draw line if it is in a gap
|
|
952
976
|
if (!isInGap) {
|
|
953
|
-
var lineBorderWidth = ((
|
|
977
|
+
var lineBorderWidth = ((_14 = this_1._points[i].lineOptions) === null || _14 === void 0 ? void 0 : _14.lineBorderWidth)
|
|
954
978
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
955
979
|
: 0;
|
|
956
980
|
if (lineBorderWidth > 0) {
|
|
957
|
-
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeLinecap: (
|
|
981
|
+
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeLinecap: (_16 = (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeLinecap) !== null && _16 !== void 0 ? _16 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_17 = this_1._points[i].lineOptions) === null || _17 === void 0 ? void 0 : _17.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
958
982
|
}
|
|
959
983
|
linesForLine.push(React.createElement("line", __assign({ id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, ref: function (e) {
|
|
960
984
|
_this_1._refCallback(e, lineId);
|
|
961
|
-
}, 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, stroke: lineColor, strokeLinecap: (
|
|
985
|
+
}, 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, stroke: lineColor, strokeLinecap: (_19 = (_18 = this_1._points[i].lineOptions) === null || _18 === void 0 ? void 0 : _18.strokeLinecap) !== null && _19 !== void 0 ? _19 : 'round', strokeDasharray: (_20 = this_1._points[i].lineOptions) === null || _20 === void 0 ? void 0 : _20.strokeDasharray, strokeDashoffset: (_21 = this_1._points[i].lineOptions) === null || _21 === void 0 ? void 0 : _21.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
|
|
962
986
|
}
|
|
963
987
|
}
|
|
964
988
|
else {
|
|
965
989
|
if (!isInGap) {
|
|
966
|
-
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (
|
|
990
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: xPoint1, y1: yPoint1, x2: xPoint2, y2: yPoint2, strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_23 = (_22 = this_1._points[i].lineOptions) === null || _22 === void 0 ? void 0 : _22.strokeLinecap) !== null && _23 !== void 0 ? _23 : 'round', strokeDasharray: (_24 = this_1._points[i].lineOptions) === null || _24 === void 0 ? void 0 : _24.strokeDasharray, strokeDashoffset: (_25 = this_1._points[i].lineOptions) === null || _25 === void 0 ? void 0 : _25.strokeDashoffset, opacity: 0.1 }));
|
|
967
991
|
}
|
|
968
992
|
}
|
|
969
993
|
}
|
|
@@ -977,7 +1001,7 @@ var LineChartBase = /** @class */ (function (_super) {
|
|
|
977
1001
|
xAxisScale: this_1._xAxisScale,
|
|
978
1002
|
yAxisScale: yScale,
|
|
979
1003
|
className: classNames.markerLabel || '',
|
|
980
|
-
lineOptions: (
|
|
1004
|
+
lineOptions: (_26 = this_1._points[i]) === null || _26 === void 0 ? void 0 : _26.lineOptions,
|
|
981
1005
|
}));
|
|
982
1006
|
}
|
|
983
1007
|
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.") },
|