@fluentui/react-charting 5.23.81 → 5.23.82
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 +34 -1
- package/CHANGELOG.md +14 -2
- package/dist/react-charting.js +1 -1
- package/dist/react-charting.min.js +1 -1
- package/lib/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib/components/AreaChart/AreaChart.base.js +192 -34
- package/lib/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-amd/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib-amd/components/AreaChart/AreaChart.base.js +192 -34
- package/lib-amd/components/AreaChart/AreaChart.base.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.base.d.ts +6 -0
- package/lib-commonjs/components/AreaChart/AreaChart.base.js +192 -34
- package/lib-commonjs/components/AreaChart/AreaChart.base.js.map +1 -1
- package/package.json +4 -4
|
@@ -17,6 +17,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
17
17
|
var _a;
|
|
18
18
|
var _this = _super.call(this, props) || this;
|
|
19
19
|
_this._containsSecondaryYAxis = false;
|
|
20
|
+
_this._hasDuplicateXValues = false;
|
|
21
|
+
_this._hasMissingXValues = false;
|
|
20
22
|
_this.toImage = function (opts) {
|
|
21
23
|
var _a, _b;
|
|
22
24
|
return (0, image_export_utils_1.toImage)((_a = _this._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, (0, Utilities_1.getRTL)(), opts);
|
|
@@ -207,7 +209,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
207
209
|
};
|
|
208
210
|
};
|
|
209
211
|
_this._createDataSet = function (points) {
|
|
210
|
-
if (_this.props.enablePerfOptimization && _this._enableComputationOptimization) {
|
|
212
|
+
if (_this.props.enablePerfOptimization && _this._enableComputationOptimization && !_this._hasDuplicateXValues) {
|
|
211
213
|
var allChartPoints_1 = [];
|
|
212
214
|
var dataSet_1 = [];
|
|
213
215
|
var colors_1 = [];
|
|
@@ -264,40 +266,58 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
264
266
|
var colors_2 = [];
|
|
265
267
|
var opacity_2 = [];
|
|
266
268
|
var calloutPoints = (0, index_2.calloutData)(points);
|
|
269
|
+
var data = {};
|
|
270
|
+
var keys = [];
|
|
271
|
+
var index_4 = 0;
|
|
267
272
|
points &&
|
|
268
273
|
points.length &&
|
|
269
274
|
points.forEach(function (singleChartPoint) {
|
|
275
|
+
// if legend is not populated, then assign a legend
|
|
276
|
+
if (_this._hasDuplicateXValues && !singleChartPoint.legend) {
|
|
277
|
+
singleChartPoint.legend = "chart".concat(index_4);
|
|
278
|
+
++index_4;
|
|
279
|
+
}
|
|
280
|
+
singleChartPoint.data.forEach(function (point) {
|
|
281
|
+
point.legend = singleChartPoint.legend;
|
|
282
|
+
});
|
|
270
283
|
colors_2.push(singleChartPoint.color);
|
|
271
284
|
opacity_2.push(singleChartPoint.opacity || 1);
|
|
272
285
|
allChartPoints_2.push.apply(allChartPoints_2, singleChartPoint.data);
|
|
273
286
|
});
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
var
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
singleDataset
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
287
|
+
if (!_this._hasDuplicateXValues) {
|
|
288
|
+
var tempArr = allChartPoints_2;
|
|
289
|
+
var _loop_1 = function () {
|
|
290
|
+
var valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
|
|
291
|
+
var filteredChartPoints = tempArr.filter(function (point) {
|
|
292
|
+
return (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck;
|
|
293
|
+
});
|
|
294
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
295
|
+
var singleDataset = {};
|
|
296
|
+
filteredChartPoints.forEach(function (singleDataPoint, id) {
|
|
297
|
+
singleDataset.xVal = singleDataPoint.x;
|
|
298
|
+
singleDataset["chart".concat(id)] = singleDataPoint.y;
|
|
299
|
+
});
|
|
300
|
+
dataSet.push(singleDataset);
|
|
301
|
+
// removing compared objects from array
|
|
302
|
+
var val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
|
|
303
|
+
tempArr = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val; });
|
|
304
|
+
};
|
|
305
|
+
while (tempArr.length) {
|
|
306
|
+
_loop_1();
|
|
307
|
+
}
|
|
308
|
+
// get keys from dataset, used to create stacked data
|
|
309
|
+
var keysLength = dataSet && Object.keys(dataSet[0]).length;
|
|
310
|
+
for (var i = 0; i < keysLength - 1; i++) {
|
|
311
|
+
var keyVal = "chart".concat(i);
|
|
312
|
+
keys.push(keyVal);
|
|
313
|
+
}
|
|
314
|
+
// Data used to draw graph
|
|
315
|
+
data = _this._getDataPoints(keys, dataSet);
|
|
291
316
|
}
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
for (var i = 0; i < keysLength - 1; i++) {
|
|
296
|
-
var keyVal = "chart".concat(i);
|
|
297
|
-
keys.push(keyVal);
|
|
317
|
+
else {
|
|
318
|
+
var datasetForDuplicateValues = _this._createDatasetForXCoordinateWithMultipleYValues(allChartPoints_2);
|
|
319
|
+
data = _this._getDataPoints(datasetForDuplicateValues.keys, datasetForDuplicateValues.filteredDataSet);
|
|
298
320
|
}
|
|
299
|
-
// Data used to draw graph
|
|
300
|
-
var data = _this._getDataPoints(keys, dataSet);
|
|
301
321
|
return {
|
|
302
322
|
colors: colors_2,
|
|
303
323
|
opacity: opacity_2,
|
|
@@ -307,6 +327,54 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
307
327
|
};
|
|
308
328
|
}
|
|
309
329
|
};
|
|
330
|
+
_this._createDatasetForXCoordinateWithMultipleYValues = function (allChartPoints) {
|
|
331
|
+
var dataSet = [];
|
|
332
|
+
// Group data points by x-axis value
|
|
333
|
+
var groupedData = {};
|
|
334
|
+
allChartPoints.forEach(function (dataPoint) {
|
|
335
|
+
var xValue = dataPoint.x instanceof Date ? dataPoint.x.toLocaleString() : dataPoint.x;
|
|
336
|
+
if (!groupedData[xValue]) {
|
|
337
|
+
groupedData[xValue] = [];
|
|
338
|
+
}
|
|
339
|
+
groupedData[xValue].push(dataPoint);
|
|
340
|
+
});
|
|
341
|
+
// Aggregate data points for each x-axis value
|
|
342
|
+
Object.keys(groupedData).forEach(function (xValue) {
|
|
343
|
+
var dataPoints = groupedData[xValue];
|
|
344
|
+
dataPoints.forEach(function (dataPoint, id) {
|
|
345
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
346
|
+
var singleDataset = { xVal: dataPoints[0].x };
|
|
347
|
+
var key = dataPoint.legend ? dataPoint.legend : "chart".concat(id);
|
|
348
|
+
singleDataset[key] = dataPoint.y;
|
|
349
|
+
dataSet.push(singleDataset);
|
|
350
|
+
});
|
|
351
|
+
});
|
|
352
|
+
// get all unique keys from each array within the dataSet
|
|
353
|
+
var allLegends = [];
|
|
354
|
+
dataSet.forEach(function (item) {
|
|
355
|
+
Object.keys(item).forEach(function (key) {
|
|
356
|
+
if (key !== 'xVal' && !allLegends.includes(key)) {
|
|
357
|
+
allLegends.push(key);
|
|
358
|
+
}
|
|
359
|
+
});
|
|
360
|
+
});
|
|
361
|
+
dataSet.forEach(function (item) {
|
|
362
|
+
allLegends.forEach(function (legend) {
|
|
363
|
+
if (!item[legend]) {
|
|
364
|
+
item[legend] = 0; // Fill with 0 if the legend is missing
|
|
365
|
+
}
|
|
366
|
+
});
|
|
367
|
+
});
|
|
368
|
+
// exclude all items within dataset having all legend values 0
|
|
369
|
+
var filteredDataSet = dataSet.filter(function (item) {
|
|
370
|
+
return allLegends.some(function (legend) { return item[legend] !== 0; });
|
|
371
|
+
});
|
|
372
|
+
var keys = Array.from(new Set(filteredDataSet.flatMap(function (item) { return Object.keys(item).filter(function (key) { return key !== 'xVal'; }); })));
|
|
373
|
+
return {
|
|
374
|
+
keys: keys,
|
|
375
|
+
filteredDataSet: filteredDataSet,
|
|
376
|
+
};
|
|
377
|
+
};
|
|
310
378
|
_this._getCustomizedCallout = function () {
|
|
311
379
|
return _this.props.onRenderCalloutPerStack
|
|
312
380
|
? _this.props.onRenderCalloutPerStack(_this.state.stackCalloutProps)
|
|
@@ -394,9 +462,9 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
394
462
|
var lineColor;
|
|
395
463
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
396
464
|
_this._data.forEach(function (singleStackedData, index) {
|
|
397
|
-
var _a, _b, _c, _d, _e, _f;
|
|
398
|
-
var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
399
|
-
var curveFactory = (0, index_2.getCurveFactory)((
|
|
465
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
466
|
+
var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
467
|
+
var curveFactory = (0, index_2.getCurveFactory)((_c = (_b = points[index]) === null || _b === void 0 ? void 0 : _b.lineOptions) === null || _c === void 0 ? void 0 : _c.curve, d3_shape_1.curveMonotoneX);
|
|
400
468
|
var area = (0, d3_shape_1.area)()
|
|
401
469
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
402
470
|
.x(function (d) { return xScale(d.xVal); })
|
|
@@ -417,7 +485,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
417
485
|
React.createElement("linearGradient", { id: "gradient_".concat(index), x1: "0%", x2: "0%", y1: "0%", y2: "100%" },
|
|
418
486
|
React.createElement("stop", { offset: "0", stopColor: _this._colors[index] }),
|
|
419
487
|
React.createElement("stop", { offset: "100%", stopColor: "transparent" })))),
|
|
420
|
-
React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (
|
|
488
|
+
React.createElement("path", { id: "".concat(index, "-line-").concat(_this._uniqueIdForGraph), d: line(singleStackedData), fill: 'transparent', strokeWidth: (_f = (_e = (_d = points[index]) === null || _d === void 0 ? void 0 : _d.lineOptions) === null || _e === void 0 ? void 0 : _e.strokeWidth) !== null && _f !== void 0 ? _f : 3, stroke: _this._colors[index], opacity: _this._getLineOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, strokeDasharray: (_h = (_g = points[index]) === null || _g === void 0 ? void 0 : _g.lineOptions) === null || _h === void 0 ? void 0 : _h.strokeDasharray, strokeDashoffset: (_k = (_j = points[index]) === null || _j === void 0 ? void 0 : _j.lineOptions) === null || _k === void 0 ? void 0 : _k.strokeDashoffset, strokeLinecap: (_m = (_l = points[index]) === null || _l === void 0 ? void 0 : _l.lineOptions) === null || _m === void 0 ? void 0 : _m.strokeLinecap }),
|
|
421
489
|
singleStackedData.length === 1 ? (React.createElement("circle", { id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), cx: xScale(singleStackedData[0].xVal), cy: yScale(singleStackedData[0].values[1]), r: 6, stroke: _this._colors[index], strokeWidth: 3, fill: _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove })) : (React.createElement("path", tslib_1.__assign({ id: "".concat(index, "-graph-").concat(_this._uniqueIdForGraph), d: area(singleStackedData), fill: _this.props.enableGradient ? "url(#gradient_".concat(index, ")") : _this._colors[index], opacity: layerOpacity, fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, (_this.props.optimizeLargeData && {
|
|
422
490
|
'data-is-focusable': _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(),
|
|
423
491
|
role: 'img',
|
|
@@ -427,10 +495,11 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
427
495
|
var circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
|
|
428
496
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
429
497
|
_this._data.forEach(function (singleStackedData, index) {
|
|
498
|
+
var _a;
|
|
430
499
|
if (points.length === index) {
|
|
431
500
|
return;
|
|
432
501
|
}
|
|
433
|
-
var yScale = points[index].useSecondaryYScale && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
502
|
+
var yScale = ((_a = points[index]) === null || _a === void 0 ? void 0 : _a.useSecondaryYScale) && yScaleSecondary ? yScaleSecondary : yScalePrimary;
|
|
434
503
|
if (!_this.props.optimizeLargeData || singleStackedData.length === 1) {
|
|
435
504
|
// Render circles for all data points
|
|
436
505
|
graph.push(React.createElement("g", { key: "".concat(index, "-dots-").concat(_this._uniqueIdForGraph), clipPath: "url(#clip)", role: "region", "aria-label": "".concat(points[index].legend, ", series ").concat(index + 1, " of ").concat(points.length, " with ").concat(points[index].data.length, " data points.") }, singleStackedData.map(function (singlePoint, pointIndex) {
|
|
@@ -438,7 +507,8 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
438
507
|
var xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
|
|
439
508
|
lineColor = points[index].color;
|
|
440
509
|
var legend = points[index].legend;
|
|
441
|
-
return (React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove,
|
|
510
|
+
return (React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, "data-is-focusable": _this._legendHighlighted(points[index].legend) || _this._noLegendHighlighted(), cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), { onFocus: function () { return _this._handleFocus(index, pointIndex, circleId); }, onBlur: _this._handleBlur }, (0, index_2.getSecureProps)(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend), role: "img", "aria-label": (!_this._hasDuplicateXValues && !_this._hasMissingXValues && _this._getAriaLabel(index, pointIndex)) ||
|
|
511
|
+
undefined })));
|
|
442
512
|
})));
|
|
443
513
|
}
|
|
444
514
|
else {
|
|
@@ -449,7 +519,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
449
519
|
var circleId = "".concat(_this._circleId, "_").concat(index * _this._data[0].length + pointIndex);
|
|
450
520
|
lineColor = points[index].color;
|
|
451
521
|
var legend = points[index].legend;
|
|
452
|
-
graph.push(React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove,
|
|
522
|
+
graph.push(React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, _this._getOnClickHandler(points, index, pointIndex), (0, index_2.getSecureProps)(pointOptions), { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId, legend) })));
|
|
453
523
|
}
|
|
454
524
|
});
|
|
455
525
|
}
|
|
@@ -483,6 +553,12 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
483
553
|
}
|
|
484
554
|
return graph;
|
|
485
555
|
};
|
|
556
|
+
_this._getOnClickHandler = function (points, index, pointIndex) {
|
|
557
|
+
return (!_this._hasDuplicateXValues &&
|
|
558
|
+
!_this._hasMissingXValues && {
|
|
559
|
+
onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick),
|
|
560
|
+
});
|
|
561
|
+
};
|
|
486
562
|
_this._getCircleRadius = function (xDataPoint, circleRadius, circleId, legend) {
|
|
487
563
|
var _a = _this.state, isCircleClicked = _a.isCircleClicked, nearestCircleToHighlight = _a.nearestCircleToHighlight, activePoint = _a.activePoint;
|
|
488
564
|
// Show the circle if no legends are selected or if the point's legend is in the selected legends
|
|
@@ -520,6 +596,38 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
520
596
|
return _this._getHighlightedLegend().length === 0;
|
|
521
597
|
};
|
|
522
598
|
_this._addDefaultColors = function (lineChartData) {
|
|
599
|
+
if (_this._hasMissingXValues) {
|
|
600
|
+
// get union of all x values
|
|
601
|
+
var allXValues_1 = new Set();
|
|
602
|
+
lineChartData &&
|
|
603
|
+
lineChartData.forEach(function (line) {
|
|
604
|
+
line.data.forEach(function (point) {
|
|
605
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
606
|
+
allXValues_1.add(xValue);
|
|
607
|
+
});
|
|
608
|
+
});
|
|
609
|
+
lineChartData &&
|
|
610
|
+
lineChartData.forEach(function (line) {
|
|
611
|
+
allXValues_1.forEach(function (xValue) {
|
|
612
|
+
var point = line.data.find(function (item) {
|
|
613
|
+
return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
|
|
614
|
+
});
|
|
615
|
+
if (!point) {
|
|
616
|
+
line.data.push({
|
|
617
|
+
x: typeof xValue === 'string' ? new Date(xValue) : xValue,
|
|
618
|
+
y: 0,
|
|
619
|
+
legend: line.legend,
|
|
620
|
+
});
|
|
621
|
+
}
|
|
622
|
+
});
|
|
623
|
+
// sort the data points by x value
|
|
624
|
+
line.data.sort(function (a, b) {
|
|
625
|
+
var xA = a.x instanceof Date ? a.x.getTime() : a.x;
|
|
626
|
+
var xB = b.x instanceof Date ? b.x.getTime() : b.x;
|
|
627
|
+
return xA < xB ? -1 : xA > xB ? 1 : 0;
|
|
628
|
+
});
|
|
629
|
+
});
|
|
630
|
+
}
|
|
523
631
|
return lineChartData
|
|
524
632
|
? lineChartData.map(function (item, index) {
|
|
525
633
|
var _a, _b;
|
|
@@ -594,6 +702,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
594
702
|
(0, Utilities_2.warnDeprecations)(COMPONENT_NAME, props, {
|
|
595
703
|
showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
|
|
596
704
|
});
|
|
705
|
+
_this._hasMissingXValues = _this._containsMissingXValues();
|
|
597
706
|
_this._uniqueIdForGraph = (0, Utilities_1.getId)('areaChart_');
|
|
598
707
|
_this._verticalLineId = (0, Utilities_1.getId)('verticalLine_');
|
|
599
708
|
_this._circleId = (0, Utilities_1.getId)('circle');
|
|
@@ -626,6 +735,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
626
735
|
if (!this._isChartEmpty()) {
|
|
627
736
|
var lineChartData = this.props.data.lineChartData;
|
|
628
737
|
var points = this._addDefaultColors(lineChartData);
|
|
738
|
+
this._hasDuplicateXValues = this._xCoordinateContainsMultipleY();
|
|
629
739
|
this._containsSecondaryYAxis =
|
|
630
740
|
!!this.props.secondaryYScaleOptions && points.some(function (point) { return point.useSecondaryYScale; });
|
|
631
741
|
var _a = this._createSet(points), colors = _a.colors, opacity = _a.opacity, data = _a.data, calloutPoints = _a.calloutPoints;
|
|
@@ -639,7 +749,7 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
639
749
|
tickValues: this.props.tickValues,
|
|
640
750
|
tickFormat: this.props.tickFormat,
|
|
641
751
|
};
|
|
642
|
-
var calloutProps = tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
|
|
752
|
+
var calloutProps = tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible && !this._hasDuplicateXValues && !this._hasMissingXValues, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip".concat(this._uniqueCallOutID), gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
|
|
643
753
|
return (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_2.ChartTypes.AreaChart, calloutProps: calloutProps, legendBars: legends, createYAxis: index_2.createNumericYAxis, isCalloutForStack: true, xAxisType: isXAxisDateType ? index_2.XAxisTypes.DateAxis : index_2.XAxisTypes.NumericAxis, tickParams: tickParams, maxOfYVal: data.maxOfYVal, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_2.createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: index_2.findNumericMinMaxOfY, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef,
|
|
644
754
|
/* eslint-disable react/jsx-no-bind */
|
|
645
755
|
// eslint-disable-next-line react/no-children-prop
|
|
@@ -713,6 +823,54 @@ define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-
|
|
|
713
823
|
// which means chart is not empty
|
|
714
824
|
);
|
|
715
825
|
};
|
|
826
|
+
AreaChartBase.prototype._xCoordinateContainsMultipleY = function () {
|
|
827
|
+
var lineChartData = this.props.data.lineChartData;
|
|
828
|
+
if (!lineChartData) {
|
|
829
|
+
return false;
|
|
830
|
+
}
|
|
831
|
+
for (var _i = 0, lineChartData_1 = lineChartData; _i < lineChartData_1.length; _i++) {
|
|
832
|
+
var item = lineChartData_1[_i];
|
|
833
|
+
var xValueMap = {};
|
|
834
|
+
for (var _a = 0, _b = item.data; _a < _b.length; _a++) {
|
|
835
|
+
var point = _b[_a];
|
|
836
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
837
|
+
if (!xValueMap[xValue]) {
|
|
838
|
+
xValueMap[xValue] = [];
|
|
839
|
+
}
|
|
840
|
+
xValueMap[xValue].push(point.y);
|
|
841
|
+
if (xValueMap[xValue].length > 1) {
|
|
842
|
+
return true;
|
|
843
|
+
}
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
return false;
|
|
847
|
+
};
|
|
848
|
+
AreaChartBase.prototype._containsMissingXValues = function () {
|
|
849
|
+
var lineChartData = this.props.data.lineChartData;
|
|
850
|
+
if (!lineChartData) {
|
|
851
|
+
return false;
|
|
852
|
+
}
|
|
853
|
+
var allXValues = new Set();
|
|
854
|
+
lineChartData.forEach(function (line) {
|
|
855
|
+
line.data.forEach(function (point) {
|
|
856
|
+
var xValue = point.x instanceof Date ? point.x.toLocaleString() : point.x;
|
|
857
|
+
allXValues.add(xValue);
|
|
858
|
+
});
|
|
859
|
+
});
|
|
860
|
+
// for all x values, check if the x value is present in all series
|
|
861
|
+
var hasMissingValues = false;
|
|
862
|
+
lineChartData.forEach(function (line) {
|
|
863
|
+
allXValues.forEach(function (xValue) {
|
|
864
|
+
var point = line.data.find(function (item) {
|
|
865
|
+
return item.x instanceof Date ? item.x.toLocaleString() === xValue : item.x === xValue;
|
|
866
|
+
});
|
|
867
|
+
if (!point) {
|
|
868
|
+
hasMissingValues = true;
|
|
869
|
+
}
|
|
870
|
+
});
|
|
871
|
+
});
|
|
872
|
+
return hasMissingValues;
|
|
873
|
+
};
|
|
716
874
|
AreaChartBase.prototype._shouldFillToZeroY = function () {
|
|
717
875
|
return this.props.mode === 'tozeroy' || this._containsSecondaryYAxis;
|
|
718
876
|
};
|