@fluentui/react-charting 5.16.36 → 5.16.38

package/lib-commonjs/components/LineChart/LineChart.base.d.ts

@@ -13,6 +13,7 @@ export interface ILineChartState extends IBasestate {
     xAxisCalloutAccessibilityData?: IAccessibilityProps;
     nearestCircleToHighlight: ILineChartDataPoint | null;
     activeLine: number | null;
+    emptyChart?: boolean;
 }
 export declare class LineChartBase extends React.Component<ILineChartProps, ILineChartState> {
     private _points;
@@ -36,6 +37,7 @@ export declare class LineChartBase extends React.Component<ILineChartProps, ILin
     private _staticHighlightCircle;
     constructor(props: ILineChartProps);
     componentDidUpdate(prevProps: ILineChartProps): void;
+    componentDidMount(): void;
     render(): JSX.Element;
     private _injectIndexPropertyInLineChartData;
     private _getCustomizedCallout;

package/lib-commonjs/components/LineChart/LineChart.base.js

@@ -52,7 +52,7 @@ var _getPointPath = function (x, y, w, index) {
     return allPointPaths[index];
 };
 var LineChartBase = /** @class */ (function (_super) {
-    (0, tslib_1.__extends)(LineChartBase, _super);
+    tslib_1.__extends(LineChartBase, _super);
     function LineChartBase(props) {
         var _this_1 = _super.call(this, props) || this;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -73,7 +73,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     else {
                         color = (0, index_3.getColorFromToken)(item.color, (_b = _this_1.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
                     }
-                    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), { index: allowMultipleShapesForPoints ? index : -1, color: color });
+                    return tslib_1.__assign(tslib_1.__assign({}, item), { index: allowMultipleShapesForPoints ? index : -1, color: color });
                 })
                 : [];
         };
@@ -422,7 +422,7 @@ var LineChartBase = /** @class */ (function (_super) {
             }, -1);
             var selectedLines;
             if (selectedLineIndex === -1) {
-                selectedLines = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this_1.state.selectedLegendPoints, true), [selectedLine], false);
+                selectedLines = tslib_1.__spreadArray(tslib_1.__spreadArray([], _this_1.state.selectedLegendPoints, true), [selectedLine], false);
             }
             else {
                 selectedLines = _this_1.state.selectedLegendPoints
@@ -462,7 +462,7 @@ var LineChartBase = /** @class */ (function (_super) {
             }, -1);
             var selectedColorFillBars;
             if (selectedColorFillBarIndex === -1) {
-                selectedColorFillBars = (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], _this_1.state.selectedColorBarLegend, true), [selectedColorFillBar], false);
+                selectedColorFillBars = tslib_1.__spreadArray(tslib_1.__spreadArray([], _this_1.state.selectedColorBarLegend, true), [selectedColorFillBar], false);
             }
             else {
                 selectedColorFillBars = _this_1.state.selectedColorBarLegend
@@ -539,6 +539,7 @@ var LineChartBase = /** @class */ (function (_super) {
             activePoint: '',
             nearestCircleToHighlight: null,
             activeLine: null,
+            emptyChart: false,
         };
         _this_1._refArray = [];
         _this_1._points = _this_1._injectIndexPropertyInLineChartData(_this_1.props.data.lineChartData);
@@ -568,6 +569,15 @@ var LineChartBase = /** @class */ (function (_super) {
             this._calloutPoints = (0, index_3.calloutData)(this._points) || [];
         }
     };
+    LineChartBase.prototype.componentDidMount = function () {
+        var isChartEmpty = !(this.props.data &&
+            this.props.data.lineChartData &&
+            this.props.data.lineChartData.length > 0 &&
+            this.props.data.lineChartData.filter(function (item) { return item.data.length; }).length > 0);
+        if (this.state.emptyChart !== isChartEmpty) {
+            this.setState({ emptyChart: isChartEmpty });
+        }
+    };
     LineChartBase.prototype.render = function () {
         var _this_1 = this;
         var _a = this.props, tickValues = _a.tickValues, tickFormat = _a.tickFormat, eventAnnotationProps = _a.eventAnnotationProps, legendProps = _a.legendProps, data = _a.data;
@@ -579,14 +589,14 @@ var LineChartBase = /** @class */ (function (_super) {
             this._calloutPoints = (0, index_3.calloutData)(points);
         }
         var legendBars = this._createLegends(this._points);
-        var calloutProps = (0, tslib_1.__assign)({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
+        var calloutProps = tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: this._closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), descriptionMessage: this.props.getCalloutDescriptionMessage && this.state.stackCalloutProps
                 ? this.props.getCalloutDescriptionMessage(this.state.stackCalloutProps)
                 : undefined, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
         var tickParams = {
             tickValues: tickValues,
             tickFormat: tickFormat,
         };
-        return (React.createElement(index_2.CartesianChart, (0, tslib_1.__assign)({}, this.props, { chartTitle: data.chartTitle, points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: this._getMargins, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, 
+        return !this.state.emptyChart ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: data.chartTitle, points: points, chartType: index_3.ChartTypes.LineChart, isCalloutForStack: true, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: this._getMargins, getGraphData: this._initializeLineChartData, xAxisType: isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, 
             /* eslint-disable react/jsx-no-bind */
             // eslint-disable-next-line react/no-children-prop
             children: function (props) {
@@ -599,8 +609,8 @@ var LineChartBase = /** @class */ (function (_super) {
                         React.createElement("g", null,
                             _this_1._renderedColorFillBars,
                             _this_1.lines),
-                        eventAnnotationProps && (React.createElement(EventAnnotation_1.EventsAnnotation, (0, tslib_1.__assign)({}, eventAnnotationProps, { scale: props.xScale, chartYTop: _this_1.margins.top + _this_1.eventLabelHeight, chartYBottom: props.containerHeight - 35 }))))));
-            } })));
+                        eventAnnotationProps && (React.createElement(EventAnnotation_1.EventsAnnotation, tslib_1.__assign({}, eventAnnotationProps, { scale: props.xScale, chartYTop: _this_1.margins.top + _this_1.eventLabelHeight, chartYBottom: props.containerHeight - 35 }))))));
+            } }))) : (React.createElement("div", { id: (0, Utilities_1.getId)('_LineChart_'), role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
     LineChartBase.prototype._createLegends = function (data) {
         var _this_1 = this;
@@ -609,7 +619,7 @@ var LineChartBase = /** @class */ (function (_super) {
         var legendDataItems = data.map(function (point) {
             var color = point.color;
             // mapping data to the format Legends component needs
-            var legend = (0, tslib_1.__assign)((0, tslib_1.__assign)({ title: point.legend, color: color, action: function () {
+            var legend = tslib_1.__assign(tslib_1.__assign({ title: point.legend, color: color, action: function () {
                     if (isLegendMultiSelectEnabled) {
                         _this_1._handleMultipleLineLegendSelectionAction(point);
                     }
@@ -658,7 +668,7 @@ var LineChartBase = /** @class */ (function (_super) {
                 return legend;
             })
             : [];
-        var legends = (React.createElement(index_1.Legends, (0, tslib_1.__assign)({ legends: (0, tslib_1.__spreadArray)((0, 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)));
+        var legends = (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)));
         return legends;
     };
     LineChartBase.prototype._createLines = function (xElement, containerHeight) {
@@ -683,7 +693,7 @@ var LineChartBase = /** @class */ (function (_super) {
             if (this_1._points[i].data.length === 1) {
                 var _0 = this_1._points[i].data[0], x1_1 = _0.x, y1 = _0.y, xAxisCalloutData_1 = _0.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _0.xAxisCalloutAccessibilityData;
                 var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
-                pointsForLine.push(React.createElement("circle", (0, tslib_1.__assign)({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.palette.white : lineColor, 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": true, ref: function (e) {
+                pointsForLine.push(React.createElement("circle", tslib_1.__assign({ id: circleId_1, key: circleId_1, r: activePoint === circleId_1 ? 5.5 : 3.5, cx: this_1._xAxisScale(x1_1), cy: this_1._yAxisScale(y1), fill: activePoint === circleId_1 ? theme.palette.white : lineColor, 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": true, ref: function (e) {
                         _this_1._refCallback(e, circleId_1);
                     }, 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))));
             }
@@ -717,7 +727,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     if (lineBorderWidth > 0) {
                         bordersForLine.push(React.createElement("path", { id: borderId, key: borderId, d: line(lineData), fill: "transparent", strokeLinecap: (_f = (_e = this_1._points[i].lineOptions) === null || _e === void 0 ? void 0 : _e.strokeLinecap) !== null && _f !== void 0 ? _f : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_g = this_1._points[i].lineOptions) === null || _g === void 0 ? void 0 : _g.lineBorderColor) || theme.palette.white, opacity: 1 }));
                     }
-                    linesForLine.push(React.createElement("path", (0, tslib_1.__assign)({ id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") })));
+                    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: (_j = (_h = this_1._points[i].lineOptions) === null || _h === void 0 ? void 0 : _h.strokeLinecap) !== null && _j !== void 0 ? _j : 'round', onMouseMove: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOver: this_1._onMouseOverLargeDataset.bind(this_1, i, verticaLineHeight), onMouseOut: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].onLineClick), { opacity: 1, role: "img", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") })));
                 }
                 else {
                     linesForLine.push(React.createElement("path", { id: lineId, key: lineId, d: line(lineData), fill: "transparent", "data-is-focusable": true, stroke: lineColor, strokeWidth: strokeWidth, strokeLinecap: (_l = (_k = this_1._points[i].lineOptions) === null || _k === void 0 ? void 0 : _k.strokeLinecap) !== null && _l !== void 0 ? _l : 'round', opacity: 0.1, role: "img", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") }));
@@ -739,14 +749,14 @@ var LineChartBase = /** @class */ (function (_super) {
                     var strokeWidth = ((_m = this_1._points[i].lineOptions) === null || _m === void 0 ? void 0 : _m.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== circleId;
-                    pointsForLine.push(React.createElement("path", (0, tslib_1.__assign)({ id: circleId, key: circleId, d: path, "data-is-focusable": true, 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) })));
+                    pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": true, 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) })));
                     if (j + 1 === this_1._points[i].data.length) {
                         // If this is last point of the line segment.
                         var lastCircleId_1 = "".concat(circleId).concat(j, "L");
                         var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                         path = this_1._getPath(this_1._xAxisScale(x2), this_1._yAxisScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
                         var _3 = this_1._points[i].data[j], lastCirlceXCallout_1 = _3.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _3.xAxisCalloutAccessibilityData;
-                        pointsForLine.push(React.createElement("path", (0, tslib_1.__assign)({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": true, 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 () {
+                        pointsForLine.push(React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": true, 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 () {
                                 return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
                             }, 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) })));
                         /* eslint-enable react/jsx-no-bind */
@@ -760,7 +770,7 @@ var LineChartBase = /** @class */ (function (_super) {
                             if (lineBorderWidth > 0) {
                                 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: (_q = (_p = this_1._points[i].lineOptions) === null || _p === void 0 ? void 0 : _p.strokeLinecap) !== null && _q !== void 0 ? _q : 'round', strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth, stroke: ((_r = this_1._points[i].lineOptions) === null || _r === void 0 ? void 0 : _r.lineBorderColor) || theme.palette.white, opacity: 1 }));
                             }
-                            linesForLine.push(React.createElement("line", (0, 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) {
+                            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) {
                                     _this_1._refCallback(e, lineId);
                                 }, 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: (_t = (_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeLinecap) !== null && _t !== void 0 ? _t : 'round', strokeDasharray: (_u = this_1._points[i].lineOptions) === null || _u === void 0 ? void 0 : _u.strokeDasharray, strokeDashoffset: (_v = this_1._points[i].lineOptions) === null || _v === void 0 ? void 0 : _v.strokeDashoffset, opacity: 1 }, this_1._getClickHandler(this_1._points[i].onLineClick))));
                         }
@@ -775,7 +785,7 @@ var LineChartBase = /** @class */ (function (_super) {
                     _loop_2(j);
                 }
             }
-            lines.push.apply(lines, (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], bordersForLine, false), linesForLine, false), pointsForLine, false));
+            lines.push.apply(lines, tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([], bordersForLine, false), linesForLine, false), pointsForLine, false));
         };
         var this_1 = this;
         for (var i = this._points.length - 1; i >= 0; i--) {