@fluentui/react-charts 9.3.1 → 9.3.3
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.md +42 -2
- package/dist/index.d.ts +147 -1
- package/lib/components/AreaChart/AreaChart.js +20 -24
- package/lib/components/AreaChart/AreaChart.js.map +1 -1
- package/lib/components/CommonComponents/ChartPopover.js +2 -1
- package/lib/components/CommonComponents/ChartPopover.js.map +1 -1
- package/lib/components/CommonComponents/ChartPopover.types.js.map +1 -1
- package/lib/components/DeclarativeChart/DeclarativeChart.js +16 -7
- package/lib/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js +63 -18
- package/lib/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js +394 -173
- package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib/components/DonutChart/Arc/Arc.js +8 -7
- package/lib/components/DonutChart/Arc/Arc.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.js +16 -32
- package/lib/components/DonutChart/DonutChart.js.map +1 -1
- package/lib/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib/components/DonutChart/Pie/Pie.js +4 -4
- package/lib/components/DonutChart/Pie/Pie.js.map +1 -1
- package/lib/components/FunnelChart/FunnelChart.js +23 -45
- package/lib/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib/components/GaugeChart/GaugeChart.js +21 -46
- package/lib/components/GaugeChart/GaugeChart.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +332 -114
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js.map +1 -1
- package/lib/components/Legends/Legends.js +1 -1
- package/lib/components/Legends/Legends.js.map +1 -1
- package/lib/components/LineChart/LineChart.js +145 -97
- package/lib/components/LineChart/LineChart.js.map +1 -1
- package/lib/components/ScatterChart/ScatterChart.js +7 -11
- package/lib/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib/types/DataPoint.js +1 -3
- package/lib/types/DataPoint.js.map +1 -1
- package/lib/utilities/utilities.js +14 -8
- package/lib/utilities/utilities.js.map +1 -1
- package/lib-commonjs/components/AreaChart/AreaChart.js +19 -23
- package/lib-commonjs/components/AreaChart/AreaChart.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/ChartPopover.js +2 -1
- package/lib-commonjs/components/CommonComponents/ChartPopover.js.map +1 -1
- package/lib-commonjs/components/CommonComponents/ChartPopover.types.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js +16 -7
- package/lib-commonjs/components/DeclarativeChart/DeclarativeChart.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js +65 -18
- package/lib-commonjs/components/DeclarativeChart/PlotlyColorAdapter.js.map +1 -1
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js +393 -172
- package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Arc/Arc.js +8 -7
- package/lib-commonjs/components/DonutChart/Arc/Arc.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.js +16 -32
- package/lib-commonjs/components/DonutChart/DonutChart.js.map +1 -1
- package/lib-commonjs/components/DonutChart/DonutChart.types.js.map +1 -1
- package/lib-commonjs/components/DonutChart/Pie/Pie.js +4 -4
- package/lib-commonjs/components/DonutChart/Pie/Pie.js.map +1 -1
- package/lib-commonjs/components/FunnelChart/FunnelChart.js +23 -45
- package/lib-commonjs/components/FunnelChart/FunnelChart.js.map +1 -1
- package/lib-commonjs/components/GaugeChart/GaugeChart.js +21 -46
- package/lib-commonjs/components/GaugeChart/GaugeChart.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js +329 -112
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map +1 -1
- package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.types.js.map +1 -1
- package/lib-commonjs/components/Legends/Legends.js +1 -1
- package/lib-commonjs/components/Legends/Legends.js.map +1 -1
- package/lib-commonjs/components/LineChart/LineChart.js +144 -96
- package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
- package/lib-commonjs/components/ScatterChart/ScatterChart.js +6 -10
- package/lib-commonjs/components/ScatterChart/ScatterChart.js.map +1 -1
- package/lib-commonjs/types/DataPoint.js +1 -3
- package/lib-commonjs/types/DataPoint.js.map +1 -1
- package/lib-commonjs/utilities/utilities.js +17 -8
- package/lib-commonjs/utilities/utilities.js.map +1 -1
- package/package.json +9 -9
|
@@ -103,8 +103,6 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
103
103
|
let _isScatterPolar = false;
|
|
104
104
|
let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
|
|
105
105
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
106
|
-
let _calloutPoints = (0, _index1.calloutData)(_points) || [];
|
|
107
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
108
106
|
let _xAxisScale = '';
|
|
109
107
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
110
108
|
let _yScalePrimary = '';
|
|
@@ -134,7 +132,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
134
132
|
props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
|
|
135
133
|
const [hoverXValue, setHoverXValue] = _react.useState('');
|
|
136
134
|
const [activeLegend, setActiveLegend] = _react.useState('');
|
|
137
|
-
const [
|
|
135
|
+
const [yValueHover, setYValueHover] = _react.useState([]);
|
|
138
136
|
const [selectedLegend, setSelectedLegend] = _react.useState('');
|
|
139
137
|
const [selectedLegendPoints, setSelectedLegendPoints] = _react.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
|
|
140
138
|
const [selectedColorBarLegend, setSelectedColorBarLegend] = _react.useState([]);
|
|
@@ -152,8 +150,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
152
150
|
const [YValue, setYValue] = _react.useState('');
|
|
153
151
|
const [legendVal, setLegendVal] = _react.useState('');
|
|
154
152
|
const [lineColor, setLineColor] = _react.useState('');
|
|
153
|
+
const [refSelected, setRefSelected] = _react.useState(null);
|
|
155
154
|
const pointsRef = _react.useRef([]);
|
|
156
|
-
const calloutPointsRef = _react.useRef(
|
|
155
|
+
const calloutPointsRef = _react.useRef({});
|
|
157
156
|
const classes = (0, _useLineChartStylesstyles.useLineChartStyles)(props);
|
|
158
157
|
_react.useEffect(()=>{
|
|
159
158
|
/** note that height and width are not used to resize or set as dimesions of the chart,
|
|
@@ -425,7 +424,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
425
424
|
});
|
|
426
425
|
});
|
|
427
426
|
for(let i = _points.length - 1; i >= 0; i--){
|
|
428
|
-
var _points_i_gaps, _points_i_lineOptions;
|
|
427
|
+
var _points_i_gaps, _points_i_lineOptions, _points_i_lineOptions1;
|
|
429
428
|
const linesForLine = [];
|
|
430
429
|
const bordersForLine = [];
|
|
431
430
|
const pointsForLine = [];
|
|
@@ -450,12 +449,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
450
449
|
const xPoint = _xAxisScale(x1);
|
|
451
450
|
const yPoint = yScale(y1);
|
|
452
451
|
if ((0, _index1.isPlottable)(xPoint, yPoint)) {
|
|
453
|
-
var _points_i_lineOptions_mode,
|
|
452
|
+
var _points_i_lineOptions_mode, _points_i_lineOptions2;
|
|
454
453
|
const circleId = `${_circleId}_${i}`;
|
|
455
454
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
456
455
|
const currentMarkerSize = _points[i].data[0].markerSize;
|
|
457
|
-
const supportsTextMode = (
|
|
456
|
+
const supportsTextMode = (_points_i_lineOptions2 = _points[i].lineOptions) === null || _points_i_lineOptions2 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions2.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
|
|
458
457
|
const text = _points[i].data[0].text;
|
|
458
|
+
const targetElement = document.getElementById(circleId);
|
|
459
459
|
var _points_i_data__text;
|
|
460
460
|
pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_react.Fragment, {
|
|
461
461
|
key: `${circleId}_fragment`
|
|
@@ -468,8 +468,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
468
468
|
fill: activePoint === circleId ? _reacttheme.tokens.colorNeutralBackground1 : lineColor,
|
|
469
469
|
opacity: isLegendSelected ? 1 : 0.1,
|
|
470
470
|
tabIndex: isLegendSelected ? 0 : undefined,
|
|
471
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
472
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
471
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
472
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
473
473
|
onMouseOut: _handleMouseOut,
|
|
474
474
|
strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
|
|
475
475
|
stroke: activePoint === circleId ? lineColor : '',
|
|
@@ -479,7 +479,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
479
479
|
ref: (e)=>{
|
|
480
480
|
_refCallback(e, circleId);
|
|
481
481
|
},
|
|
482
|
-
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
482
|
+
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
483
483
|
onBlur: _handleMouseOut,
|
|
484
484
|
..._getClickHandler(_points[i].data[0].onDataPointClick)
|
|
485
485
|
}), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ _react.createElement("text", {
|
|
@@ -497,13 +497,13 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
497
497
|
const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
|
|
498
498
|
// Use path rendering technique for larger datasets to optimize performance.
|
|
499
499
|
if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
|
|
500
|
-
var
|
|
500
|
+
var _points_i_lineOptions3, _points_i_lineOptions4;
|
|
501
501
|
const line = (0, _d3shape.line)() // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
502
502
|
.x((d)=>_xAxisScale(d[0])) // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
503
503
|
.y((d)=>yScale(d[1])).curve((0, _index1.getCurveFactory)(lineCurve)).defined((d)=>(0, _index1.isPlottable)(_xAxisScale(d[0]), yScale(d[1])));
|
|
504
504
|
const lineId = `${_lineId}_${i}`;
|
|
505
505
|
const borderId = `${_borderId}_${i}`;
|
|
506
|
-
const strokeWidth = ((
|
|
506
|
+
const strokeWidth = ((_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
507
507
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
508
508
|
const lineData = [];
|
|
509
509
|
for(let k = 0; k < _points[i].data.length; k++){
|
|
@@ -512,20 +512,23 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
512
512
|
_points[i].data[k].y
|
|
513
513
|
]);
|
|
514
514
|
}
|
|
515
|
-
if
|
|
516
|
-
|
|
517
|
-
|
|
515
|
+
// Check if lines should be drawn based on mode
|
|
516
|
+
const lineMode = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.mode;
|
|
517
|
+
const shouldDrawLines = lineMode !== 'markers';
|
|
518
|
+
if (shouldDrawLines && isLegendSelected) {
|
|
519
|
+
var _points_i_lineOptions5, _points_i_lineOptions6, _points_i_lineOptions7;
|
|
520
|
+
const lineBorderWidth = ((_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
518
521
|
if (lineBorderWidth > 0) {
|
|
519
|
-
var
|
|
522
|
+
var _points_i_lineOptions8, _points_i_lineOptions9;
|
|
520
523
|
var _points_i_lineOptions_strokeLinecap;
|
|
521
524
|
bordersForLine.push(/*#__PURE__*/ _react.createElement("path", {
|
|
522
525
|
id: borderId,
|
|
523
526
|
key: borderId,
|
|
524
527
|
d: line(lineData),
|
|
525
528
|
fill: "transparent",
|
|
526
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (
|
|
529
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
|
|
527
530
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
528
|
-
stroke: ((
|
|
531
|
+
stroke: ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
|
|
529
532
|
opacity: 1
|
|
530
533
|
}));
|
|
531
534
|
}
|
|
@@ -538,8 +541,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
538
541
|
"data-is-focusable": true,
|
|
539
542
|
stroke: lineColor,
|
|
540
543
|
strokeWidth: strokeWidth,
|
|
541
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (
|
|
542
|
-
strokeDasharray: (
|
|
544
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
|
|
545
|
+
strokeDasharray: (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeDasharray,
|
|
543
546
|
onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
544
547
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
545
548
|
onMouseOut: _handleMouseOut,
|
|
@@ -547,8 +550,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
547
550
|
opacity: 1,
|
|
548
551
|
tabIndex: isLegendSelected ? 0 : undefined
|
|
549
552
|
}));
|
|
550
|
-
} else {
|
|
551
|
-
var
|
|
553
|
+
} else if (shouldDrawLines) {
|
|
554
|
+
var _points_i_lineOptions10, _points_i_lineOptions11;
|
|
552
555
|
var _points_i_lineOptions_strokeLinecap2;
|
|
553
556
|
linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
|
|
554
557
|
id: lineId,
|
|
@@ -558,11 +561,12 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
558
561
|
"data-is-focusable": false,
|
|
559
562
|
stroke: lineColor,
|
|
560
563
|
strokeWidth: strokeWidth,
|
|
561
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (
|
|
562
|
-
strokeDasharray: (
|
|
564
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
|
|
565
|
+
strokeDasharray: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDasharray,
|
|
563
566
|
opacity: 0.1
|
|
564
567
|
}));
|
|
565
568
|
}
|
|
569
|
+
// Always add the highlight circle for large dataset hover
|
|
566
570
|
pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
|
|
567
571
|
id: `${_staticHighlightCircle}_${i}`,
|
|
568
572
|
key: `${_staticHighlightCircle}_${i}`,
|
|
@@ -577,9 +581,36 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
577
581
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
578
582
|
onMouseOut: _handleMouseOut
|
|
579
583
|
}));
|
|
584
|
+
// Add individual markers if mode includes 'markers'
|
|
585
|
+
const showMarkers = !!(lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'));
|
|
586
|
+
if (showMarkers) {
|
|
587
|
+
for(let k = 0; k < _points[i].data.length; k++){
|
|
588
|
+
const { x, y } = _points[i].data[k];
|
|
589
|
+
const xPoint = _xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
590
|
+
const yPoint = yScale(y);
|
|
591
|
+
if ((0, _index1.isPlottable)(xPoint, yPoint)) {
|
|
592
|
+
var _points_i_data_k, _points_i;
|
|
593
|
+
const markerSize = _points[i].data[k].markerSize;
|
|
594
|
+
const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
|
|
595
|
+
pointsForLine.push(/*#__PURE__*/ _react.createElement("circle", {
|
|
596
|
+
key: `${_circleId}_${i}_${k}_marker`,
|
|
597
|
+
r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
|
|
598
|
+
cx: xPoint,
|
|
599
|
+
cy: yPoint,
|
|
600
|
+
fill: activePoint === _circleId ? _reacttheme.tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
|
|
601
|
+
stroke: perPointColor || lineColor,
|
|
602
|
+
strokeWidth: 1,
|
|
603
|
+
opacity: isLegendSelected ? 1 : 0.1,
|
|
604
|
+
onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
605
|
+
onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
606
|
+
onMouseOut: _handleMouseOut
|
|
607
|
+
}));
|
|
608
|
+
}
|
|
609
|
+
}
|
|
610
|
+
}
|
|
580
611
|
} else if (!props.optimizeLargeData) {
|
|
581
612
|
for(let j = 1; j < _points[i].data.length; j++){
|
|
582
|
-
var
|
|
613
|
+
var _points_i_lineOptions12, _points_i_lineOptions_mode1, _points_i_lineOptions13, _points_i_lineOptions_mode2, _points_i_lineOptions14;
|
|
583
614
|
const gapResult = _checkInGap(j, gaps, gapIndex);
|
|
584
615
|
const isInGap = gapResult.isInGap;
|
|
585
616
|
gapIndex = gapResult.gapIndex;
|
|
@@ -592,32 +623,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
592
623
|
const yPoint1 = yScale(y1);
|
|
593
624
|
const xPoint2 = _xAxisScale(x2);
|
|
594
625
|
const yPoint2 = yScale(y2);
|
|
595
|
-
const strokeWidth = ((
|
|
626
|
+
const strokeWidth = ((_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
596
627
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
597
628
|
const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
|
|
598
|
-
const supportsTextMode = (
|
|
629
|
+
const supportsTextMode = (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
|
|
599
630
|
const text = _points[i].data[j - 1].text;
|
|
600
631
|
let currentMarkerSize = _points[i].data[j - 1].markerSize;
|
|
601
632
|
if ((0, _index1.isPlottable)(xPoint1, yPoint1)) {
|
|
602
|
-
var _points_i_lineOptions_mode3,
|
|
633
|
+
var _points_i_lineOptions_mode3, _points_i_lineOptions15, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
|
|
603
634
|
const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
|
|
635
|
+
const targetElement = document.getElementById(circleId);
|
|
604
636
|
var _points_i_data__text1;
|
|
605
|
-
pointsForLine.push(((
|
|
637
|
+
pointsForLine.push(((_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions15.mode) === null || _points_i_lineOptions_mode3 === void 0 ? void 0 : _points_i_lineOptions_mode3.includes('markers')) || supportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
|
|
606
638
|
id: circleId,
|
|
607
639
|
key: circleId,
|
|
608
640
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
609
641
|
cx: xPoint1,
|
|
610
642
|
cy: yPoint1,
|
|
611
643
|
"data-is-focusable": isLegendSelected,
|
|
612
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
613
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
644
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
645
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
614
646
|
onMouseOut: _handleMouseOut,
|
|
615
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
647
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
616
648
|
onBlur: _handleMouseOut,
|
|
617
649
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
618
650
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
619
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
620
|
-
stroke: lineColor,
|
|
651
|
+
fill: ((_points_i_data_ = _points[i].data[j - 1]) === null || _points_i_data_ === void 0 ? void 0 : _points_i_data_.markerColor) || _getPointFill(lineColor, circleId, j, false),
|
|
652
|
+
stroke: ((_points_i_data_1 = _points[i].data[j - 1]) === null || _points_i_data_1 === void 0 ? void 0 : _points_i_data_1.markerColor) || lineColor,
|
|
621
653
|
strokeWidth: strokeWidth,
|
|
622
654
|
role: "img",
|
|
623
655
|
"aria-label": (_points_i_data__text1 = _points[i].data[j - 1].text) !== null && _points_i_data__text1 !== void 0 ? _points_i_data__text1 : _getAriaLabel(i, j - 1)
|
|
@@ -632,15 +664,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
632
664
|
key: circleId,
|
|
633
665
|
d: path,
|
|
634
666
|
"data-is-focusable": isLegendSelected,
|
|
635
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
636
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
667
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
668
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
637
669
|
onMouseOut: _handleMouseOut,
|
|
638
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
670
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
639
671
|
onBlur: _handleMouseOut,
|
|
640
672
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
641
673
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
642
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
643
|
-
stroke: lineColor,
|
|
674
|
+
fill: ((_points_i_data_2 = _points[i].data[j - 1]) === null || _points_i_data_2 === void 0 ? void 0 : _points_i_data_2.markerColor) || _getPointFill(lineColor, circleId, j, false),
|
|
675
|
+
stroke: ((_points_i_data_3 = _points[i].data[j - 1]) === null || _points_i_data_3 === void 0 ? void 0 : _points_i_data_3.markerColor) || lineColor,
|
|
644
676
|
strokeWidth: strokeWidth,
|
|
645
677
|
role: "img",
|
|
646
678
|
"aria-label": _getAriaLabel(i, j - 1),
|
|
@@ -648,32 +680,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
648
680
|
}));
|
|
649
681
|
}
|
|
650
682
|
if (j + 1 === _points[i].data.length) {
|
|
651
|
-
var _points_i_lineOptions_mode4,
|
|
683
|
+
var _points_i_lineOptions_mode4, _points_i_lineOptions16;
|
|
652
684
|
// If this is last point of the line segment.
|
|
653
685
|
const lastCircleId = `${circleId}${j}L`;
|
|
654
686
|
const hiddenHoverCircleId = `${circleId}${j}D`;
|
|
655
687
|
const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
|
|
656
688
|
const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
|
|
657
689
|
currentMarkerSize = _points[i].data[j].markerSize;
|
|
658
|
-
const lastSupportsTextMode = (
|
|
690
|
+
const lastSupportsTextMode = (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions16.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
|
|
659
691
|
const lastText = _points[i].data[j].text;
|
|
660
692
|
if ((0, _index1.isPlottable)(xPoint2, yPoint2)) {
|
|
661
|
-
var _points_i_lineOptions_mode5,
|
|
693
|
+
var _points_i_lineOptions_mode5, _points_i_lineOptions17, _points_i_data_j, _points_i_data_j1;
|
|
662
694
|
const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
|
|
695
|
+
const targetElement = document.getElementById(lastCircleId);
|
|
663
696
|
var _points_i_data_j_text;
|
|
664
697
|
pointsForLine.push(/*#__PURE__*/ _react.createElement(_react.Fragment, {
|
|
665
698
|
key: `${lastCircleId}_container`
|
|
666
|
-
}, ((
|
|
699
|
+
}, ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions17.mode) === null || _points_i_lineOptions_mode5 === void 0 ? void 0 : _points_i_lineOptions_mode5.includes('markers')) || lastSupportsTextMode ? /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement("circle", {
|
|
667
700
|
id: lastCircleId,
|
|
668
701
|
key: lastCircleId,
|
|
669
702
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
670
703
|
cx: xPoint2,
|
|
671
704
|
cy: yPoint2,
|
|
672
705
|
"data-is-focusable": isLegendSelected,
|
|
673
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
674
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
706
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
707
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
675
708
|
onMouseOut: _handleMouseOut,
|
|
676
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
709
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
677
710
|
onBlur: _handleMouseOut,
|
|
678
711
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
679
712
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
@@ -692,15 +725,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
692
725
|
key: lastCircleId,
|
|
693
726
|
d: path,
|
|
694
727
|
"data-is-focusable": isLegendSelected,
|
|
695
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
696
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
728
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
729
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
697
730
|
onMouseOut: _handleMouseOut,
|
|
698
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
731
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
699
732
|
onBlur: _handleMouseOut,
|
|
700
733
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
701
734
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
702
|
-
fill: _getPointFill(lineColor, lastCircleId, j, true),
|
|
703
|
-
stroke: lineColor,
|
|
735
|
+
fill: ((_points_i_data_j = _points[i].data[j]) === null || _points_i_data_j === void 0 ? void 0 : _points_i_data_j.markerColor) || _getPointFill(lineColor, lastCircleId, j, true),
|
|
736
|
+
stroke: ((_points_i_data_j1 = _points[i].data[j]) === null || _points_i_data_j1 === void 0 ? void 0 : _points_i_data_j1.markerColor) || lineColor,
|
|
704
737
|
strokeWidth: strokeWidth,
|
|
705
738
|
role: "img",
|
|
706
739
|
"aria-label": _getAriaLabel(i, j),
|
|
@@ -713,8 +746,8 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
713
746
|
cy: yPoint2,
|
|
714
747
|
opacity: 0,
|
|
715
748
|
width: 0,
|
|
716
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
717
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
749
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
750
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
718
751
|
onMouseOut: _handleMouseOut,
|
|
719
752
|
strokeWidth: 0,
|
|
720
753
|
focusable: false,
|
|
@@ -722,14 +755,15 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
722
755
|
})));
|
|
723
756
|
}
|
|
724
757
|
}
|
|
725
|
-
if ((0, _index1.isPlottable)(xPoint1, yPoint1) && (0, _index1.isPlottable)(xPoint2, yPoint2) && (!_hasMarkersMode || ((
|
|
758
|
+
if ((0, _index1.isPlottable)(xPoint1, yPoint1) && (0, _index1.isPlottable)(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions14.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
|
|
726
759
|
if (isLegendSelected) {
|
|
727
760
|
// don't draw line if it is in a gap
|
|
728
761
|
if (!isInGap) {
|
|
729
|
-
var
|
|
730
|
-
const lineBorderWidth = ((
|
|
762
|
+
var _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20, _points_i_lineOptions21;
|
|
763
|
+
const lineBorderWidth = ((_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
764
|
+
const targetElement = document.getElementById(circleId);
|
|
731
765
|
if (lineBorderWidth > 0) {
|
|
732
|
-
var
|
|
766
|
+
var _points_i_lineOptions22, _points_i_lineOptions23;
|
|
733
767
|
var _points_i_lineOptions_strokeLinecap3;
|
|
734
768
|
bordersForLine.push(/*#__PURE__*/ _react.createElement("line", {
|
|
735
769
|
id: borderId,
|
|
@@ -738,9 +772,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
738
772
|
y1: yPoint1,
|
|
739
773
|
x2: xPoint2,
|
|
740
774
|
y2: yPoint2,
|
|
741
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (
|
|
775
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
|
|
742
776
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
743
|
-
stroke: ((
|
|
777
|
+
stroke: ((_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.lineBorderColor) || _reacttheme.tokens.colorNeutralBackground1,
|
|
744
778
|
opacity: 1
|
|
745
779
|
}));
|
|
746
780
|
}
|
|
@@ -756,20 +790,20 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
756
790
|
ref: (e)=>{
|
|
757
791
|
_refCallback(e, lineId);
|
|
758
792
|
},
|
|
759
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
760
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
793
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
794
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
761
795
|
onMouseOut: _handleMouseOut,
|
|
762
796
|
stroke: lineColor,
|
|
763
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (
|
|
764
|
-
strokeDasharray: (
|
|
765
|
-
strokeDashoffset: (
|
|
797
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
|
|
798
|
+
strokeDasharray: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDasharray,
|
|
799
|
+
strokeDashoffset: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDashoffset,
|
|
766
800
|
opacity: 1,
|
|
767
801
|
..._getClickHandler(_points[i].onLineClick)
|
|
768
802
|
}));
|
|
769
803
|
}
|
|
770
804
|
} else {
|
|
771
805
|
if (!isInGap) {
|
|
772
|
-
var
|
|
806
|
+
var _points_i_lineOptions24, _points_i_lineOptions25, _points_i_lineOptions26;
|
|
773
807
|
var _points_i_lineOptions_strokeLinecap5;
|
|
774
808
|
linesForLine.push(/*#__PURE__*/ _react.createElement("line", {
|
|
775
809
|
id: lineId,
|
|
@@ -780,9 +814,9 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
780
814
|
y2: yPoint2,
|
|
781
815
|
strokeWidth: strokeWidth,
|
|
782
816
|
stroke: lineColor,
|
|
783
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (
|
|
784
|
-
strokeDasharray: (
|
|
785
|
-
strokeDashoffset: (
|
|
817
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
|
|
818
|
+
strokeDasharray: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDasharray,
|
|
819
|
+
strokeDashoffset: (_points_i_lineOptions26 = _points[i].lineOptions) === null || _points_i_lineOptions26 === void 0 ? void 0 : _points_i_lineOptions26.strokeDashoffset,
|
|
786
820
|
opacity: 0.1
|
|
787
821
|
}));
|
|
788
822
|
}
|
|
@@ -790,13 +824,33 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
790
824
|
}
|
|
791
825
|
}
|
|
792
826
|
}
|
|
827
|
+
// Add filled area for scatterpolar charts
|
|
828
|
+
const fillMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.fill;
|
|
829
|
+
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
830
|
+
if (fillMode === 'toself' && _points[i].data.length >= 3 && isLegendSelected && _isScatterPolar) {
|
|
831
|
+
const getScaledXValue = (dataPoint)=>_xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
|
|
832
|
+
const fillPathGenerator = (0, _d3shape.line)().x((dataPoint)=>getScaledXValue(dataPoint)).y((dataPoint)=>yScale(dataPoint.y)).curve((0, _index1.getCurveFactory)(lineCurve)).defined((dataPoint)=>(0, _index1.isPlottable)(getScaledXValue(dataPoint), yScale(dataPoint.y)));
|
|
833
|
+
const fillPath = fillPathGenerator(_points[i].data);
|
|
834
|
+
if (fillPath) {
|
|
835
|
+
linesForLine.push(/*#__PURE__*/ _react.createElement("path", {
|
|
836
|
+
key: `scatterpolar_fill_${i}`,
|
|
837
|
+
d: `${fillPath}Z`,
|
|
838
|
+
fill: lineColor,
|
|
839
|
+
fillOpacity: 0.5,
|
|
840
|
+
stroke: lineColor,
|
|
841
|
+
strokeWidth: 2,
|
|
842
|
+
strokeOpacity: 0.8,
|
|
843
|
+
pointerEvents: "none"
|
|
844
|
+
}));
|
|
845
|
+
}
|
|
846
|
+
}
|
|
793
847
|
if (_isScatterPolar) {
|
|
794
|
-
var
|
|
848
|
+
var _points_i1;
|
|
795
849
|
pointsForLine.push(...(0, _scatterpolarutils.renderScatterPolarCategoryLabels)({
|
|
796
850
|
xAxisScale: _xAxisScale,
|
|
797
851
|
yAxisScale: yScale,
|
|
798
852
|
className: classes.markerLabel || '',
|
|
799
|
-
lineOptions: (
|
|
853
|
+
lineOptions: (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
|
|
800
854
|
}));
|
|
801
855
|
}
|
|
802
856
|
lines.push(/*#__PURE__*/ _react.createElement("g", {
|
|
@@ -942,11 +996,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
942
996
|
}
|
|
943
997
|
const { xAxisCalloutData } = lineChartData[linenumber].data[index];
|
|
944
998
|
const formattedDate = xPointToHighlight instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
|
|
945
|
-
const
|
|
946
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
947
|
-
const found = (0, _index1.find)(_calloutPoints, (element)=>{
|
|
948
|
-
return element.x === modifiedXVal;
|
|
949
|
-
});
|
|
999
|
+
const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, xPointToHighlight);
|
|
950
1000
|
const pointToHighlight = lineChartData[linenumber].data[index];
|
|
951
1001
|
const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
|
|
952
1002
|
// if no points need to be called out then don't show vertical line and callout card
|
|
@@ -954,8 +1004,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
954
1004
|
_uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
|
|
955
1005
|
(0, _d3selection.select)(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
|
|
956
1006
|
(0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
|
|
1007
|
+
const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
|
|
1008
|
+
const rect = targetElement.getBoundingClientRect();
|
|
957
1009
|
setNearestCircleToHighlight(pointToHighlight);
|
|
958
|
-
updatePosition(
|
|
1010
|
+
updatePosition(rect.x, rect.y);
|
|
959
1011
|
setStackCalloutProps(found);
|
|
960
1012
|
setYValueHover(found.values);
|
|
961
1013
|
setDataPointCalloutProps(found);
|
|
@@ -968,17 +1020,10 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
968
1020
|
setActivePoint('');
|
|
969
1021
|
}
|
|
970
1022
|
};
|
|
971
|
-
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
|
|
972
|
-
let cx = 0;
|
|
973
|
-
let cy = 0;
|
|
974
|
-
const targetRect = event.target.getBoundingClientRect();
|
|
975
|
-
cx = targetRect.left + targetRect.width / 2;
|
|
976
|
-
cy = targetRect.top + targetRect.height / 2;
|
|
977
|
-
updatePosition(cx, cy);
|
|
1023
|
+
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
|
|
978
1024
|
_uniqueCallOutID = circleId;
|
|
979
1025
|
const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
|
|
980
|
-
const
|
|
981
|
-
const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
|
|
1026
|
+
const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, x);
|
|
982
1027
|
// if no points need to be called out then don't show vertical line and callout card
|
|
983
1028
|
if (found) {
|
|
984
1029
|
(0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, 0)`).attr('visibility', 'visibility');
|
|
@@ -987,6 +1032,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
987
1032
|
setPopoverOpen(true);
|
|
988
1033
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
989
1034
|
setYValueHover(found.values);
|
|
1035
|
+
setRefSelected(targetElement);
|
|
990
1036
|
setStackCalloutProps(found);
|
|
991
1037
|
setDataPointCalloutProps(found);
|
|
992
1038
|
setActivePoint(circleId);
|
|
@@ -996,18 +1042,16 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
996
1042
|
setActivePoint(circleId);
|
|
997
1043
|
}
|
|
998
1044
|
}
|
|
999
|
-
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
|
|
1045
|
+
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
|
|
1000
1046
|
mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
|
|
1001
1047
|
const formattedData = x instanceof Date ? (0, _chartutilities.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
|
|
1002
|
-
const
|
|
1003
|
-
const yVal = y instanceof Date ? y.getTime() : y;
|
|
1004
|
-
const found = (0, _index1.find)(_calloutPoints, (element)=>element.x === xVal);
|
|
1048
|
+
const found = (0, _index1.findCalloutPoints)(calloutPointsRef.current, x);
|
|
1005
1049
|
let hoverDp = undefined;
|
|
1006
1050
|
if (props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
|
|
1007
|
-
const dp = (0, _index1.find)(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) ===
|
|
1051
|
+
const dp = (0, _index1.find)(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === y);
|
|
1008
1052
|
if (dp) {
|
|
1009
1053
|
hoverDp = {
|
|
1010
|
-
x
|
|
1054
|
+
x,
|
|
1011
1055
|
values: [
|
|
1012
1056
|
dp
|
|
1013
1057
|
]
|
|
@@ -1019,10 +1063,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
1019
1063
|
(0, _d3selection.select)(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
|
|
1020
1064
|
if (_uniqueCallOutID !== circleId) {
|
|
1021
1065
|
_uniqueCallOutID = circleId;
|
|
1022
|
-
|
|
1066
|
+
setRefSelected(targetElement);
|
|
1067
|
+
setPopoverOpen(true);
|
|
1023
1068
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
1024
1069
|
setYValueHover(found.values);
|
|
1025
|
-
setYValue(
|
|
1070
|
+
setYValue(y);
|
|
1026
1071
|
setLegendVal(legendVal);
|
|
1027
1072
|
setLineColor(lineColor);
|
|
1028
1073
|
setStackCalloutProps(found);
|
|
@@ -1159,7 +1204,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
1159
1204
|
let points = _points;
|
|
1160
1205
|
if (legendProps && !!legendProps.canSelectMultipleLegends) {
|
|
1161
1206
|
points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
|
|
1162
|
-
|
|
1207
|
+
calloutPointsRef.current = (0, _index1.calloutData)(points);
|
|
1163
1208
|
}
|
|
1164
1209
|
let legendBars = null;
|
|
1165
1210
|
// reduce computation cost by only creating legendBars
|
|
@@ -1169,7 +1214,7 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
1169
1214
|
legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
|
|
1170
1215
|
}
|
|
1171
1216
|
const calloutProps = {
|
|
1172
|
-
YValueHover:
|
|
1217
|
+
YValueHover: yValueHover,
|
|
1173
1218
|
hoverXValue: hoverXValue,
|
|
1174
1219
|
YValue: YValue,
|
|
1175
1220
|
legend: legendVal,
|
|
@@ -1179,8 +1224,11 @@ const LineChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
|
|
|
1179
1224
|
'data-is-focusable': true,
|
|
1180
1225
|
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
1181
1226
|
...props.calloutProps,
|
|
1182
|
-
clickPosition: clickPosition,
|
|
1183
1227
|
isPopoverOpen: isPopoverOpen,
|
|
1228
|
+
clickPosition: clickPosition,
|
|
1229
|
+
positioning: {
|
|
1230
|
+
target: refSelected
|
|
1231
|
+
},
|
|
1184
1232
|
isCalloutForStack: props.isCalloutForStack,
|
|
1185
1233
|
culture: props.culture,
|
|
1186
1234
|
isCartesian: true,
|