@fluentui/react-charting 5.24.8 → 5.24.9
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 +22 -1
- package/CHANGELOG.md +12 -2
- package/dist/react-charting.d.ts +1 -1
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/etc/react-charting.api.md +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +3 -2
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/LineChart/LineChart.base.d.ts +2 -0
- package/lib/components/LineChart/LineChart.base.js +65 -51
- package/lib/components/LineChart/LineChart.base.js.map +1 -1
- package/lib/types/IDataPoint.d.ts +1 -1
- package/lib/types/IDataPoint.js.map +1 -1
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js +3 -2
- package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-amd/components/LineChart/LineChart.base.d.ts +2 -0
- package/lib-amd/components/LineChart/LineChart.base.js +65 -51
- package/lib-amd/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-amd/types/IDataPoint.d.ts +1 -1
- package/lib-amd/types/IDataPoint.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +3 -2
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.base.d.ts +2 -0
- package/lib-commonjs/components/LineChart/LineChart.base.js +65 -51
- package/lib-commonjs/components/LineChart/LineChart.base.js.map +1 -1
- package/lib-commonjs/types/IDataPoint.d.ts +1 -1
- package/lib-commonjs/types/IDataPoint.js.map +1 -1
- package/package.json +2 -2
|
@@ -49,6 +49,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
|
|
|
49
49
|
private _yScaleSecondary;
|
|
50
50
|
private _yPaddingSecondary;
|
|
51
51
|
private _hasMarkersMode;
|
|
52
|
+
private _isXAxisDateType;
|
|
52
53
|
constructor(props: ILineChartProps);
|
|
53
54
|
componentDidUpdate(prevProps: ILineChartProps): void;
|
|
54
55
|
render(): JSX.Element;
|
|
@@ -104,5 +105,6 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
|
|
|
104
105
|
private _getDomainNRangeValuesWithPadding;
|
|
105
106
|
private _isChartEmpty;
|
|
106
107
|
private _getChartTitle;
|
|
108
|
+
private _setXMinMaxValues;
|
|
107
109
|
}
|
|
108
110
|
export {};
|
|
@@ -58,6 +58,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
58
58
|
_this_1._yPaddingPrimary = 0;
|
|
59
59
|
_this_1._yPaddingSecondary = 0;
|
|
60
60
|
_this_1._hasMarkersMode = false;
|
|
61
|
+
_this_1._isXAxisDateType = false;
|
|
61
62
|
_this_1.toImage = function (opts) {
|
|
62
63
|
var _a, _b;
|
|
63
64
|
return (0, image_export_utils_1.toImage)((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
|
|
@@ -585,17 +586,14 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
585
586
|
};
|
|
586
587
|
_this_1._getDomainNRangeValuesOfDateWithPadding = function (points, margins, width, isRTL, tickValues, chartType, barWidth) {
|
|
587
588
|
if (tickValues === void 0) { tickValues = []; }
|
|
588
|
-
|
|
589
|
-
var lDate;
|
|
590
|
-
sDate = (0, d3_array_2.min)(points, function (point) {
|
|
591
|
-
return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
|
|
592
|
-
});
|
|
593
|
-
lDate = (0, d3_array_2.max)(points, function (point) {
|
|
594
|
-
return (0, d3_array_2.max)(point.data, function (item) { return item.x; });
|
|
595
|
-
});
|
|
589
|
+
_this_1._setXMinMaxValues(points);
|
|
596
590
|
// Include tickValues if present
|
|
597
|
-
sDate =
|
|
598
|
-
|
|
591
|
+
var sDate = tickValues && tickValues.length > 0
|
|
592
|
+
? (0, d3_array_2.min)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMin)], false))
|
|
593
|
+
: new Date(_this_1._xMin);
|
|
594
|
+
var lDate = tickValues && tickValues.length > 0
|
|
595
|
+
? (0, d3_array_2.max)(tslib_1.__spreadArray(tslib_1.__spreadArray([], tickValues, true), [new Date(_this_1._xMax)], false))
|
|
596
|
+
: new Date(_this_1._xMax);
|
|
599
597
|
// Calculate time-based padding (e.g. 10% of the date range)
|
|
600
598
|
var dateRange = lDate.getTime() - sDate.getTime();
|
|
601
599
|
var datePadding = _this_1._hasMarkersMode ? dateRange * 0.1 : 0;
|
|
@@ -618,14 +616,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
618
616
|
};
|
|
619
617
|
};
|
|
620
618
|
_this_1._getDomainNRangeValuesWithPadding = function (points, margins, width, isRTL) {
|
|
621
|
-
_this_1.
|
|
622
|
-
return (0, d3_array_2.min)(point.data, function (item) { return item.x; });
|
|
623
|
-
});
|
|
624
|
-
_this_1._xMax = (0, d3_array_2.max)(points, function (point) {
|
|
625
|
-
return (0, d3_array_2.max)(point.data, function (item) {
|
|
626
|
-
return item.x;
|
|
627
|
-
});
|
|
628
|
-
});
|
|
619
|
+
_this_1._setXMinMaxValues(points);
|
|
629
620
|
if (_this_1._hasMarkersMode) {
|
|
630
621
|
_this_1._xPadding = (_this_1._xMax - _this_1._xMin) * 0.1;
|
|
631
622
|
}
|
|
@@ -649,6 +640,15 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
649
640
|
var _a = _this_1.props.data, chartTitle = _a.chartTitle, lineChartData = _a.lineChartData;
|
|
650
641
|
return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Line chart with ".concat((lineChartData === null || lineChartData === void 0 ? void 0 : lineChartData.length) || 0, " lines. ");
|
|
651
642
|
};
|
|
643
|
+
_this_1._setXMinMaxValues = function (points) {
|
|
644
|
+
var getX = function (item) { return (_this_1._isXAxisDateType ? item.x : item.x); };
|
|
645
|
+
var minVal = (0, d3_array_2.min)(points, function (point) { return (0, d3_array_2.min)(point.data, getX); });
|
|
646
|
+
var maxVal = (0, d3_array_2.max)(points, function (point) { return (0, d3_array_2.max)(point.data, getX); });
|
|
647
|
+
_this_1._xMin = _this_1._isXAxisDateType ? minVal.getTime() : minVal;
|
|
648
|
+
_this_1._xMax = _this_1._isXAxisDateType ? maxVal.getTime() : maxVal;
|
|
649
|
+
_this_1._xMin = _this_1._xMin === Number.NEGATIVE_INFINITY || !_this_1._xMin ? 0 : _this_1._xMin;
|
|
650
|
+
_this_1._xMax = _this_1._xMax === Number.POSITIVE_INFINITY || !_this_1._xMax ? 0 : _this_1._xMax;
|
|
651
|
+
};
|
|
652
652
|
(0, Utilities_1.initializeComponentRef)(_this_1);
|
|
653
653
|
_this_1.state = {
|
|
654
654
|
hoverXValue: '',
|
|
@@ -710,7 +710,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
710
710
|
var _this_1 = this;
|
|
711
711
|
var _a = this.props, tickValues = _a.tickValues, tickFormat = _a.tickFormat, eventAnnotationProps = _a.eventAnnotationProps, legendProps = _a.legendProps, data = _a.data;
|
|
712
712
|
this._points = this._injectIndexPropertyInLineChartData(data.lineChartData);
|
|
713
|
-
|
|
713
|
+
this._isXAxisDateType = (0, index_3.getXAxisType)(this._points);
|
|
714
714
|
var points = this._points;
|
|
715
715
|
if (legendProps && !!legendProps.canSelectMultipleLegends) {
|
|
716
716
|
points = this.state.selectedLegendPoints.length >= 1 ? this.state.selectedLegendPoints : this._points;
|
|
@@ -730,7 +730,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
730
730
|
tickValues: tickValues,
|
|
731
731
|
tickFormat: tickFormat,
|
|
732
732
|
};
|
|
733
|
-
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:
|
|
733
|
+
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: this._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,
|
|
734
734
|
/* eslint-disable react/jsx-no-bind */
|
|
735
735
|
// eslint-disable-next-line react/no-children-prop
|
|
736
736
|
children: function (props) {
|
|
@@ -833,7 +833,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
833
833
|
};
|
|
834
834
|
LineChartBase.prototype._createLines = function (xElement, containerHeight) {
|
|
835
835
|
var _this_1 = this;
|
|
836
|
-
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;
|
|
836
|
+
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;
|
|
837
837
|
var lines = [];
|
|
838
838
|
if (this.state.isSelectedLegend) {
|
|
839
839
|
this._points = this.state.selectedLegendPoints;
|
|
@@ -862,21 +862,27 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
862
862
|
var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
|
|
863
863
|
var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
|
|
864
864
|
if (this_1._points[i].data.length === 1) {
|
|
865
|
-
var
|
|
865
|
+
var _17 = this_1._points[i].data[0], x1_1 = _17.x, y1 = _17.y, xAxisCalloutData_1 = _17.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _17.xAxisCalloutAccessibilityData;
|
|
866
866
|
var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
|
|
867
867
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
868
868
|
var currentMarkerSize = this_1._points[i].data[0].markerSize;
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
869
|
+
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');
|
|
870
|
+
var text = this_1._points[i].data[0].text;
|
|
871
|
+
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(circleId_1, "_fragment") },
|
|
872
|
+
React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: currentMarkerSize
|
|
873
|
+
? (currentMarkerSize * extraMaxPixels) / maxMarkerSize
|
|
874
|
+
: activePoint === circleId_1
|
|
875
|
+
? 5.5
|
|
876
|
+
: 3.5, cx: this_1._xAxisScale(x1_1), cy: yScale(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, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale), 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) {
|
|
877
|
+
_this_1._refCallback(e, circleId_1);
|
|
878
|
+
}, 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))),
|
|
879
|
+
supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: this_1._xAxisScale(x1_1), y: yScale(y1) +
|
|
880
|
+
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
|
|
881
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected ? 1 : 0.1 }, text))));
|
|
876
882
|
}
|
|
877
883
|
var gapIndex = 0;
|
|
878
|
-
var gaps = (
|
|
879
|
-
var lineCurve = (
|
|
884
|
+
var gaps = (_d = (_c = this_1._points[i].gaps) === null || _c === void 0 ? void 0 : _c.sort(function (a, b) { return a.startIndex - b.startIndex; })) !== null && _d !== void 0 ? _d : [];
|
|
885
|
+
var lineCurve = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.curve;
|
|
880
886
|
// Use path rendering technique for larger datasets to optimize performance.
|
|
881
887
|
if ((this_1.props.optimizeLargeData || lineCurve) && this_1._points[i].data.length > 1) {
|
|
882
888
|
var line = (0, d3_shape_1.line)()
|
|
@@ -887,7 +893,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
887
893
|
.curve((0, index_3.getCurveFactory)(lineCurve));
|
|
888
894
|
var lineId = "".concat(this_1._lineId, "_").concat(i);
|
|
889
895
|
var borderId = "".concat(this_1._borderId, "_").concat(i);
|
|
890
|
-
var strokeWidth = ((
|
|
896
|
+
var strokeWidth = ((_f = this_1._points[i].lineOptions) === null || _f === void 0 ? void 0 : _f.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
891
897
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
892
898
|
var lineData = [];
|
|
893
899
|
for (var k = 0; k < this_1._points[i].data.length; k++) {
|
|
@@ -899,16 +905,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
899
905
|
]);
|
|
900
906
|
}
|
|
901
907
|
if (isLegendSelected) {
|
|
902
|
-
var lineBorderWidth = ((
|
|
908
|
+
var lineBorderWidth = ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderWidth)
|
|
903
909
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
904
910
|
: 0;
|
|
905
911
|
if (lineBorderWidth > 0) {
|
|
906
|
-
bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (
|
|
912
|
+
bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
907
913
|
}
|
|
908
|
-
linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (
|
|
914
|
+
linesForLine.push(React.createElement("path", tslib_1.__assign({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_m = (_l = this_1._points[i].lineOptions) === null || _l === void 0 ? void 0 : _l.strokeLinecap) !== null && _m !== void 0 ? _m : 'round', strokeDasharray: (_o = this_1._points[i].lineOptions) === null || _o === void 0 ? void 0 : _o.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 })));
|
|
909
915
|
}
|
|
910
916
|
else {
|
|
911
|
-
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (
|
|
917
|
+
linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": false, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_q = (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeLinecap) !== null && _q !== void 0 ? _q : 'round', strokeDasharray: (_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.strokeDasharray, opacity: 0.1 }));
|
|
912
918
|
}
|
|
913
919
|
var isPointHighlighted = this_1.state.activeLine !== null && this_1.state.activeLine === i;
|
|
914
920
|
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 }));
|
|
@@ -921,54 +927,62 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
|
|
|
921
927
|
var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
|
|
922
928
|
var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
|
|
923
929
|
var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
|
|
924
|
-
var
|
|
925
|
-
var
|
|
930
|
+
var _18 = this_1._points[i].data[j - 1], x1 = _18.x, y1 = _18.y, xAxisCalloutData = _18.xAxisCalloutData, xAxisCalloutAccessibilityData = _18.xAxisCalloutAccessibilityData;
|
|
931
|
+
var _19 = this_1._points[i].data[j], x2 = _19.x, y2 = _19.y;
|
|
926
932
|
var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
|
|
927
|
-
var strokeWidth = ((
|
|
933
|
+
var strokeWidth = ((_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
928
934
|
var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
|
|
929
935
|
var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
|
|
936
|
+
var supportsTextMode = (_u = (_t = this_1._points[i].lineOptions) === null || _t === void 0 ? void 0 : _t.mode) === null || _u === void 0 ? void 0 : _u.includes('text');
|
|
937
|
+
var text = this_1._points[i].data[j - 1].text;
|
|
930
938
|
var currentMarkerSize = this_1._points[i].data[j - 1].markerSize;
|
|
931
|
-
pointsForLine.push(((
|
|
939
|
+
pointsForLine.push(((_w = (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.mode) === null || _w === void 0 ? void 0 : _w.includes('markers')) || supportsTextMode ? (React.createElement(React.Fragment, null,
|
|
932
940
|
React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
933
941
|
return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
|
|
934
|
-
}, 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": (
|
|
935
|
-
|
|
942
|
+
}, 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": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : this_1._getAriaLabel(i, j - 1) })),
|
|
943
|
+
supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) +
|
|
944
|
+
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
945
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (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, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), 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) }))));
|
|
936
946
|
if (j + 1 === this_1._points[i].data.length) {
|
|
937
947
|
// If this is last point of the line segment.
|
|
938
948
|
var lastCircleId_1 = "".concat(circleId).concat(j, "L");
|
|
939
949
|
var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
|
|
940
950
|
var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
|
|
941
951
|
path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
|
|
942
|
-
var
|
|
952
|
+
var _20 = this_1._points[i].data[j], lastCirlceXCallout_1 = _20.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _20.xAxisCalloutAccessibilityData;
|
|
943
953
|
currentMarkerSize = this_1._points[i].data[j].markerSize;
|
|
954
|
+
var lastSupportsTextMode = (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('text');
|
|
955
|
+
var lastText = this_1._points[i].data[j].text;
|
|
944
956
|
pointsForLine.push(React.createElement(React.Fragment, { key: "".concat(lastCircleId_1, "_container") },
|
|
945
|
-
((
|
|
957
|
+
((_1 = (_0 = this_1._points[i].lineOptions) === null || _0 === void 0 ? void 0 : _0.mode) === null || _1 === void 0 ? void 0 : _1.includes('markers')) || lastSupportsTextMode ? (React.createElement(React.Fragment, null,
|
|
946
958
|
React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
947
959
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
948
|
-
}, 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": (
|
|
949
|
-
|
|
960
|
+
}, 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": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j) })),
|
|
961
|
+
lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) +
|
|
962
|
+
Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
|
|
963
|
+
12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (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, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, onFocus: function () {
|
|
950
964
|
return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
|
|
951
965
|
}, 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) }))),
|
|
952
966
|
React.createElement("circle", { id: hiddenHoverCircleId, key: hiddenHoverCircleId, r: 8, cx: this_1._xAxisScale(x2), cy: yScale(y2), opacity: 0, width: 0, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale), onMouseOut: this_1._handleMouseOut, strokeWidth: 0, focusable: false, onBlur: this_1._handleMouseOut })));
|
|
953
967
|
}
|
|
954
|
-
if (!this_1._hasMarkersMode || ((
|
|
968
|
+
if (!this_1._hasMarkersMode || ((_4 = (_3 = this_1._points[i].lineOptions) === null || _3 === void 0 ? void 0 : _3.mode) === null || _4 === void 0 ? void 0 : _4.includes('lines'))) {
|
|
955
969
|
if (isLegendSelected) {
|
|
956
970
|
// don't draw line if it is in a gap
|
|
957
971
|
if (!isInGap) {
|
|
958
|
-
var lineBorderWidth = ((
|
|
972
|
+
var lineBorderWidth = ((_5 = this_1._points[i].lineOptions) === null || _5 === void 0 ? void 0 : _5.lineBorderWidth)
|
|
959
973
|
? Number.parseFloat(this_1._points[i].lineOptions.lineBorderWidth.toString())
|
|
960
974
|
: 0;
|
|
961
975
|
if (lineBorderWidth > 0) {
|
|
962
|
-
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (
|
|
976
|
+
bordersForLine.push(React.createElement("line", { id: borderId, key: borderId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeLinecap: (_7 = (_6 = this_1._points[i].lineOptions) === null || _6 === void 0 ? void 0 : _6.strokeLinecap) !== null && _7 !== void 0 ? _7 : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_8 = this_1._points[i].lineOptions) === null || _8 === void 0 ? void 0 : _8.lineBorderColor) || theme.semanticColors.bodyBackground, opacity: 1 }));
|
|
963
977
|
}
|
|
964
978
|
linesForLine.push(React.createElement("line", tslib_1.__assign({ id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, ref: function (e) {
|
|
965
979
|
_this_1._refCallback(e, lineId);
|
|
966
|
-
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (
|
|
980
|
+
}, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale), onMouseOut: this_1._handleMouseOut, stroke: lineColor, strokeLinecap: (_10 = (_9 = this_1._points[i].lineOptions) === null || _9 === void 0 ? void 0 : _9.strokeLinecap) !== null && _10 !== void 0 ? _10 : 'round', strokeDasharray: (_11 = this_1._points[i].lineOptions) === null || _11 === void 0 ? void 0 : _11.strokeDasharray, strokeDashoffset: (_12 = this_1._points[i].lineOptions) === null || _12 === void 0 ? void 0 : _12.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
|
|
967
981
|
}
|
|
968
982
|
}
|
|
969
983
|
else {
|
|
970
984
|
if (!isInGap) {
|
|
971
|
-
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (
|
|
985
|
+
linesForLine.push(React.createElement("line", { id: lineId, key: lineId, x1: this_1._xAxisScale(x1), y1: yScale(y1), x2: this_1._xAxisScale(x2), y2: yScale(y2), strokeWidth: strokeWidth, stroke: lineColor, strokeLinecap: (_14 = (_13 = this_1._points[i].lineOptions) === null || _13 === void 0 ? void 0 : _13.strokeLinecap) !== null && _14 !== void 0 ? _14 : 'round', strokeDasharray: (_15 = this_1._points[i].lineOptions) === null || _15 === void 0 ? void 0 : _15.strokeDasharray, strokeDashoffset: (_16 = this_1._points[i].lineOptions) === null || _16 === void 0 ? void 0 : _16.strokeDashoffset, opacity: 0.1 }));
|
|
972
986
|
}
|
|
973
987
|
}
|
|
974
988
|
}
|