@fluentui/react-charting 5.23.58 → 5.23.59
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 +16 -1
- package/CHANGELOG.md +11 -2
- package/dist/react-charting.d.ts +9 -0
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +2 -0
- package/lib/components/DeclarativeChart/DeclarativeChart.js +9 -8
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +8 -4
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.d.ts +8 -0
- package/lib/components/LineChart/LineChart.base.js +94 -22
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/components/LineChart/LineChart.types.d.ts +5 -0
- package/lib/components/LineChart/LineChart.types.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/DeclarativeChart.js +9 -8
- package/lib-amd/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +8 -4
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.d.ts +8 -0
- package/lib-amd/components/LineChart/LineChart.base.js +94 -23
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.types.d.ts +5 -0
- package/lib-amd/components/LineChart/LineChart.types.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/DeclarativeChart.js +9 -8
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +8 -4
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.d.ts +8 -0
- package/lib-commonjs/components/LineChart/LineChart.base.js +94 -22
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.types.d.ts +5 -0
- package/lib-commonjs/components/LineChart/LineChart.types.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 +1 -1
- package/src/components/LineChart/LineChart.types.ts +6 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
|
|
1
|
+
define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "d3-array", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "./eventAnnotation/EventAnnotation", "../../utilities/index"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, d3_array_2, Utilities_1, index_2, Callout_1, EventAnnotation_1, index_3) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.LineChartBase = void 0;
|
|
@@ -52,9 +52,17 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
52
52
|
_this_1._yAxisScale = '';
|
|
53
53
|
_this_1.eventLabelHeight = 36;
|
|
54
54
|
_this_1._isRTL = (0, Utilities_1.getRTL)();
|
|
55
|
+
_this_1._xMin = Number.NEGATIVE_INFINITY;
|
|
56
|
+
_this_1._yMin = Number.NEGATIVE_INFINITY;
|
|
57
|
+
_this_1._xMax = Number.POSITIVE_INFINITY;
|
|
58
|
+
_this_1._xPadding = 0;
|
|
59
|
+
_this_1._yPadding = 0;
|
|
55
60
|
_this_1._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
|
|
56
61
|
var domainNRangeValue;
|
|
57
|
-
if (xAxisType === index_3.XAxisTypes.NumericAxis) {
|
|
62
|
+
if (_this_1.props.lineMode === 'scatter' && xAxisType === index_3.XAxisTypes.NumericAxis) {
|
|
63
|
+
domainNRangeValue = _this_1._getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
|
|
64
|
+
}
|
|
65
|
+
else if (xAxisType === index_3.XAxisTypes.NumericAxis) {
|
|
58
66
|
domainNRangeValue = (0, index_3.domainRangeOfNumericForAreaChart)(points, margins, width, isRTL);
|
|
59
67
|
}
|
|
60
68
|
else if (xAxisType === index_3.XAxisTypes.DateAxis) {
|
|
@@ -98,6 +106,18 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
98
106
|
? _this_1.props.onRenderCalloutPerDataPoint(_this_1.state.dataPointCalloutProps)
|
|
99
107
|
: null;
|
|
100
108
|
};
|
|
109
|
+
_this_1._getNumericMinMaxOfY = function (points) {
|
|
110
|
+
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
111
|
+
var _a = (0, index_3.findNumericMinMaxOfY)(points), startValue = _a.startValue, endValue = _a.endValue;
|
|
112
|
+
_this_1._yMin = startValue;
|
|
113
|
+
if (_this_1.props.lineMode === 'scatter') {
|
|
114
|
+
_this_1._yPadding = (endValue - startValue) * 0.1;
|
|
115
|
+
}
|
|
116
|
+
return {
|
|
117
|
+
startValue: startValue - _this_1._yPadding,
|
|
118
|
+
endValue: endValue + _this_1._yPadding,
|
|
119
|
+
};
|
|
120
|
+
};
|
|
101
121
|
_this_1._getMargins = function (margins) {
|
|
102
122
|
_this_1.margins = margins;
|
|
103
123
|
};
|
|
@@ -541,6 +561,34 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
541
561
|
var yValue = point.yAxisCalloutData || point.y;
|
|
542
562
|
return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
|
|
543
563
|
};
|
|
564
|
+
_this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
|
|
565
|
+
_this_1._xMin = (0, d3_array_2.min)(points, function (point) {
|
|
566
|
+
return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
|
|
567
|
+
});
|
|
568
|
+
_this_1._xMax = (0, d3_array_2.max)(points, function (point) {
|
|
569
|
+
return (0, d3_array_2.max)(point.data, function (item) {
|
|
570
|
+
return item.x;
|
|
571
|
+
});
|
|
572
|
+
});
|
|
573
|
+
if (_this_1.props.lineMode === 'scatter') {
|
|
574
|
+
_this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
|
|
575
|
+
}
|
|
576
|
+
var rStartValue = margins.left;
|
|
577
|
+
var rEndValue = width - margins.right;
|
|
578
|
+
return isRTL
|
|
579
|
+
? {
|
|
580
|
+
dStartValue: _this_1._xMax + _this_1._xPadding,
|
|
581
|
+
dEndValue: _this_1._xMin - _this_1._xPadding,
|
|
582
|
+
rStartValue: rStartValue,
|
|
583
|
+
rEndValue: rEndValue,
|
|
584
|
+
}
|
|
585
|
+
: {
|
|
586
|
+
dStartValue: _this_1._xMin - _this_1._xPadding,
|
|
587
|
+
dEndValue: _this_1._xMax + _this_1._xPadding,
|
|
588
|
+
rStartValue: rStartValue,
|
|
589
|
+
rEndValue: rEndValue,
|
|
590
|
+
};
|
|
591
|
+
};
|
|
544
592
|
_this_1._getChartTitle = function () {
|
|
545
593
|
var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
|
|
546
594
|
return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
|
|
@@ -625,7 +673,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
625
673
|
tickValues: tickValues,
|
|
626
674
|
tickFormat: tickFormat,
|
|
627
675
|
};
|
|
628
|
-
return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis:
|
|
676
|
+
return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef,
|
|
629
677
|
/* eslint-disable react/jsx-no-bind */
|
|
630
678
|
// eslint-disable-next-line react/no-children-prop
|
|
631
679
|
children: function (props) {
|
|
@@ -707,6 +755,13 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
707
755
|
: [];
|
|
708
756
|
return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray(tslib_1.__spreadArray([], legendDataItems, true), colorFillBarsLegendDataItems, true), enabledWrapLines: this.props.enabledLegendsWrapLines, overflowProps: this.props.legendsOverflowProps, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: this._onHoverCardHide }), this.props.legendProps)));
|
|
709
757
|
};
|
|
758
|
+
LineChartBase.prototype._getRangeForScatterMarkerSize = function () {
|
|
759
|
+
var extraXPixels = this._isRTL
|
|
760
|
+
? this._xAxisScale(this._xMax - this._xPadding) - this._xAxisScale(this._xMax)
|
|
761
|
+
: this._xAxisScale(this._xMin + this._xPadding) - this._xAxisScale(this._xMin);
|
|
762
|
+
var extraYPixels = this._yAxisScale(this._yMin) - this._yAxisScale(this._yMin + this._yPadding);
|
|
763
|
+
return Math.min(extraXPixels, extraYPixels);
|
|
764
|
+
};
|
|
710
765
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
711
766
|
var _this_1 = this;
|
|
712
767
|
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;
|
|
@@ -717,6 +772,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
717
772
|
else {
|
|
718
773
|
this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
|
|
719
774
|
}
|
|
775
|
+
var extraMaxPixels = this.props.lineMode === 'scatter' ? this._getRangeForScatterMarkerSize() : 0;
|
|
776
|
+
var maxMarkerSize = (0, d3_array_2.max)(this._points, function (point) {
|
|
777
|
+
return (0, d3_array_2.max)(point.data, function (item) {
|
|
778
|
+
return item.markerSize;
|
|
779
|
+
});
|
|
780
|
+
});
|
|
720
781
|
var _loop_1 = function (i) {
|
|
721
782
|
var linesForLine = [];
|
|
722
783
|
var bordersForLine = [];
|
|
@@ -730,7 +791,12 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
730
791
|
var _2 = this_1._points[i].data[0], x1_1 = _2.x, y1 = _2.y, xAxisCalloutData_1 = _2.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _2.xAxisCalloutAccessibilityData;
|
|
731
792
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
732
793
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
733
|
-
|
|
794
|
+
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
795
|
+
pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
|
|
796
|
+
? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
|
|
797
|
+
: activePoint === circleId_1
|
|
798
|
+
? 5.5
|
|
799
|
+
: 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1), 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, ref: function (e) {
|
|
734
800
|
_this_1._refCallback(e, circleId_1);
|
|
735
801
|
}, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))));
|
|
736
802
|
}
|
|
@@ -786,7 +852,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
786
852
|
var strokeWidth = ((_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
787
853
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
788
854
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
789
|
-
|
|
855
|
+
var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
|
|
856
|
+
pointsForLine.push(this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: this_1._yAxisScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, 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) }))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, 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) }))));
|
|
790
857
|
if (j + 1 === this_1._points[i].data.length) {
|
|
791
858
|
// If this is last point of the line segment.
|
|
792
859
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
@@ -794,30 +861,34 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
794
861
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
795
862
|
path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
796
863
|
var _5 = this_1._points[i].data[j], lastCirlceXCallout_1 = _5.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _5.xAxisCalloutAccessibilityData;
|
|
864
|
+
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
797
865
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
798
|
-
React.createElement("
|
|
866
|
+
this_1.props.lineMode === 'scatter' ? (React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
867
|
+
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
868
|
+
}, 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) }))) : (React.createElement("path", tslib_1.__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), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
799
869
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
800
|
-
}, 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) })),
|
|
870
|
+
}, 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) }))),
|
|
801
871
|
React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: this_1._yAxisScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
|
|
802
|
-
/* eslint-enable react/jsx-no-bind */
|
|
803
872
|
}
|
|
804
|
-
if (
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
873
|
+
if (this_1.props.lineMode !== 'scatter') {
|
|
874
|
+
if (isLegendSelected) {
|
|
875
|
+
// don't draw line if it is in a gap
|
|
876
|
+
if (!isInGap) {
|
|
877
|
+
var lineBorderWidth = ((_q = this_1._points[i].lineOptions) === null || _q === void 0 ? void 0 : _q.lineBorderWidth)
|
|
878
|
+
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
879
|
+
: 0;
|
|
880
|
+
if (lineBorderWidth > 0) {
|
|
881
|
+
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeLinecap: (_s = (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeLinecap) !== null && _s !== void 0 ? _s : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
882
|
+
}
|
|
883
|
+
linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
884
|
+
_this_1._refCallback(e, lineId);
|
|
885
|
+
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
|
|
812
886
|
}
|
|
813
|
-
linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
814
|
-
_this_1._refCallback(e, lineId);
|
|
815
|
-
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_v = (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeLinecap) !== null && _v !== void 0 ? _v : 'round', strokeDasharray: (_w = this_1._points[i].lineOptions) === null || _w === void 0 ? void 0 : _w.strokeDasharray, strokeDashoffset: (_x = this_1._points[i].lineOptions) === null || _x === void 0 ? void 0 : _x.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
|
|
816
887
|
}
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
888
|
+
else {
|
|
889
|
+
if (!isInGap) {
|
|
890
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: this_1._yAxisScale(y1), x2: this_1._xAxisScale(x2), y2: this_1._yAxisScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.strokeLinecap) !== null && _z !== void 0 ? _z : 'round', strokeDasharray: (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.strokeDasharray, strokeDashoffset: (_1 = this_1._points[i].lineOptions) === null || _1 === void 0 ? void 0 : _1.strokeDashoffset, opacity: 0.1 }));
|
|
891
|
+
}
|
|
821
892
|
}
|
|
822
893
|
}
|
|
823
894
|
};
|