@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
|
@@ -7,7 +7,7 @@ import { Legends } from '../Legends/index';
|
|
|
7
7
|
import { line as d3Line } from 'd3-shape';
|
|
8
8
|
import { max as d3Max } from 'd3-array';
|
|
9
9
|
import { useId } from '@fluentui/react-utilities';
|
|
10
|
-
import { find } from '../../utilities/index';
|
|
10
|
+
import { find, findCalloutPoints } from '../../utilities/index';
|
|
11
11
|
import { CartesianChart } from '../../index';
|
|
12
12
|
import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
|
|
13
13
|
import { tokens } from '@fluentui/react-theme';
|
|
@@ -98,8 +98,6 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
98
98
|
let _isScatterPolar = false;
|
|
99
99
|
let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
|
|
100
100
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
101
|
-
let _calloutPoints = calloutData(_points) || [];
|
|
102
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
103
101
|
let _xAxisScale = '';
|
|
104
102
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
105
103
|
let _yScalePrimary = '';
|
|
@@ -129,7 +127,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
129
127
|
props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
|
|
130
128
|
const [hoverXValue, setHoverXValue] = React.useState('');
|
|
131
129
|
const [activeLegend, setActiveLegend] = React.useState('');
|
|
132
|
-
const [
|
|
130
|
+
const [yValueHover, setYValueHover] = React.useState([]);
|
|
133
131
|
const [selectedLegend, setSelectedLegend] = React.useState('');
|
|
134
132
|
const [selectedLegendPoints, setSelectedLegendPoints] = React.useState(_injectIndexPropertyInLineChartData(props.data.lineChartData, true));
|
|
135
133
|
const [selectedColorBarLegend, setSelectedColorBarLegend] = React.useState([]);
|
|
@@ -147,8 +145,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
147
145
|
const [YValue, setYValue] = React.useState('');
|
|
148
146
|
const [legendVal, setLegendVal] = React.useState('');
|
|
149
147
|
const [lineColor, setLineColor] = React.useState('');
|
|
148
|
+
const [refSelected, setRefSelected] = React.useState(null);
|
|
150
149
|
const pointsRef = React.useRef([]);
|
|
151
|
-
const calloutPointsRef = React.useRef(
|
|
150
|
+
const calloutPointsRef = React.useRef({});
|
|
152
151
|
const classes = useLineChartStyles(props);
|
|
153
152
|
React.useEffect(()=>{
|
|
154
153
|
/** note that height and width are not used to resize or set as dimesions of the chart,
|
|
@@ -420,7 +419,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
420
419
|
});
|
|
421
420
|
});
|
|
422
421
|
for(let i = _points.length - 1; i >= 0; i--){
|
|
423
|
-
var _points_i_gaps, _points_i_lineOptions;
|
|
422
|
+
var _points_i_gaps, _points_i_lineOptions, _points_i_lineOptions1;
|
|
424
423
|
const linesForLine = [];
|
|
425
424
|
const bordersForLine = [];
|
|
426
425
|
const pointsForLine = [];
|
|
@@ -445,12 +444,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
445
444
|
const xPoint = _xAxisScale(x1);
|
|
446
445
|
const yPoint = yScale(y1);
|
|
447
446
|
if (isPlottable(xPoint, yPoint)) {
|
|
448
|
-
var _points_i_lineOptions_mode,
|
|
447
|
+
var _points_i_lineOptions_mode, _points_i_lineOptions2;
|
|
449
448
|
const circleId = `${_circleId}_${i}`;
|
|
450
449
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
451
450
|
const currentMarkerSize = _points[i].data[0].markerSize;
|
|
452
|
-
const supportsTextMode = (
|
|
451
|
+
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');
|
|
453
452
|
const text = _points[i].data[0].text;
|
|
453
|
+
const targetElement = document.getElementById(circleId);
|
|
454
454
|
var _points_i_data__text;
|
|
455
455
|
pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, {
|
|
456
456
|
key: `${circleId}_fragment`
|
|
@@ -463,8 +463,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
463
463
|
fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
|
|
464
464
|
opacity: isLegendSelected ? 1 : 0.1,
|
|
465
465
|
tabIndex: isLegendSelected ? 0 : undefined,
|
|
466
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
467
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
466
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
467
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
468
468
|
onMouseOut: _handleMouseOut,
|
|
469
469
|
strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
|
|
470
470
|
stroke: activePoint === circleId ? lineColor : '',
|
|
@@ -474,7 +474,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
474
474
|
ref: (e)=>{
|
|
475
475
|
_refCallback(e, circleId);
|
|
476
476
|
},
|
|
477
|
-
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
477
|
+
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
478
478
|
onBlur: _handleMouseOut,
|
|
479
479
|
..._getClickHandler(_points[i].data[0].onDataPointClick)
|
|
480
480
|
}), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
|
|
@@ -492,13 +492,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
492
492
|
const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
|
|
493
493
|
// Use path rendering technique for larger datasets to optimize performance.
|
|
494
494
|
if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
|
|
495
|
-
var
|
|
495
|
+
var _points_i_lineOptions3, _points_i_lineOptions4;
|
|
496
496
|
const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
497
497
|
.x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
498
498
|
.y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve)).defined((d)=>isPlottable(_xAxisScale(d[0]), yScale(d[1])));
|
|
499
499
|
const lineId = `${_lineId}_${i}`;
|
|
500
500
|
const borderId = `${_borderId}_${i}`;
|
|
501
|
-
const strokeWidth = ((
|
|
501
|
+
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;
|
|
502
502
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
503
503
|
const lineData = [];
|
|
504
504
|
for(let k = 0; k < _points[i].data.length; k++){
|
|
@@ -507,20 +507,23 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
507
507
|
_points[i].data[k].y
|
|
508
508
|
]);
|
|
509
509
|
}
|
|
510
|
-
if
|
|
511
|
-
|
|
512
|
-
|
|
510
|
+
// Check if lines should be drawn based on mode
|
|
511
|
+
const lineMode = (_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.mode;
|
|
512
|
+
const shouldDrawLines = lineMode !== 'markers';
|
|
513
|
+
if (shouldDrawLines && isLegendSelected) {
|
|
514
|
+
var _points_i_lineOptions5, _points_i_lineOptions6, _points_i_lineOptions7;
|
|
515
|
+
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;
|
|
513
516
|
if (lineBorderWidth > 0) {
|
|
514
|
-
var
|
|
517
|
+
var _points_i_lineOptions8, _points_i_lineOptions9;
|
|
515
518
|
var _points_i_lineOptions_strokeLinecap;
|
|
516
519
|
bordersForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
517
520
|
id: borderId,
|
|
518
521
|
key: borderId,
|
|
519
522
|
d: line(lineData),
|
|
520
523
|
fill: "transparent",
|
|
521
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (
|
|
524
|
+
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',
|
|
522
525
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
523
|
-
stroke: ((
|
|
526
|
+
stroke: ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
524
527
|
opacity: 1
|
|
525
528
|
}));
|
|
526
529
|
}
|
|
@@ -533,8 +536,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
533
536
|
"data-is-focusable": true,
|
|
534
537
|
stroke: lineColor,
|
|
535
538
|
strokeWidth: strokeWidth,
|
|
536
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (
|
|
537
|
-
strokeDasharray: (
|
|
539
|
+
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',
|
|
540
|
+
strokeDasharray: (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeDasharray,
|
|
538
541
|
onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
539
542
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
540
543
|
onMouseOut: _handleMouseOut,
|
|
@@ -542,8 +545,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
542
545
|
opacity: 1,
|
|
543
546
|
tabIndex: isLegendSelected ? 0 : undefined
|
|
544
547
|
}));
|
|
545
|
-
} else {
|
|
546
|
-
var
|
|
548
|
+
} else if (shouldDrawLines) {
|
|
549
|
+
var _points_i_lineOptions10, _points_i_lineOptions11;
|
|
547
550
|
var _points_i_lineOptions_strokeLinecap2;
|
|
548
551
|
linesForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
549
552
|
id: lineId,
|
|
@@ -553,11 +556,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
553
556
|
"data-is-focusable": false,
|
|
554
557
|
stroke: lineColor,
|
|
555
558
|
strokeWidth: strokeWidth,
|
|
556
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (
|
|
557
|
-
strokeDasharray: (
|
|
559
|
+
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',
|
|
560
|
+
strokeDasharray: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDasharray,
|
|
558
561
|
opacity: 0.1
|
|
559
562
|
}));
|
|
560
563
|
}
|
|
564
|
+
// Always add the highlight circle for large dataset hover
|
|
561
565
|
pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
|
|
562
566
|
id: `${_staticHighlightCircle}_${i}`,
|
|
563
567
|
key: `${_staticHighlightCircle}_${i}`,
|
|
@@ -572,9 +576,36 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
572
576
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
573
577
|
onMouseOut: _handleMouseOut
|
|
574
578
|
}));
|
|
579
|
+
// Add individual markers if mode includes 'markers'
|
|
580
|
+
const showMarkers = !!(lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers'));
|
|
581
|
+
if (showMarkers) {
|
|
582
|
+
for(let k = 0; k < _points[i].data.length; k++){
|
|
583
|
+
const { x, y } = _points[i].data[k];
|
|
584
|
+
const xPoint = _xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
585
|
+
const yPoint = yScale(y);
|
|
586
|
+
if (isPlottable(xPoint, yPoint)) {
|
|
587
|
+
var _points_i_data_k, _points_i;
|
|
588
|
+
const markerSize = _points[i].data[k].markerSize;
|
|
589
|
+
const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
|
|
590
|
+
pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
|
|
591
|
+
key: `${_circleId}_${i}_${k}_marker`,
|
|
592
|
+
r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
|
|
593
|
+
cx: xPoint,
|
|
594
|
+
cy: yPoint,
|
|
595
|
+
fill: activePoint === _circleId ? tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
|
|
596
|
+
stroke: perPointColor || lineColor,
|
|
597
|
+
strokeWidth: 1,
|
|
598
|
+
opacity: isLegendSelected ? 1 : 0.1,
|
|
599
|
+
onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
600
|
+
onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
601
|
+
onMouseOut: _handleMouseOut
|
|
602
|
+
}));
|
|
603
|
+
}
|
|
604
|
+
}
|
|
605
|
+
}
|
|
575
606
|
} else if (!props.optimizeLargeData) {
|
|
576
607
|
for(let j = 1; j < _points[i].data.length; j++){
|
|
577
|
-
var
|
|
608
|
+
var _points_i_lineOptions12, _points_i_lineOptions_mode1, _points_i_lineOptions13, _points_i_lineOptions_mode2, _points_i_lineOptions14;
|
|
578
609
|
const gapResult = _checkInGap(j, gaps, gapIndex);
|
|
579
610
|
const isInGap = gapResult.isInGap;
|
|
580
611
|
gapIndex = gapResult.gapIndex;
|
|
@@ -587,32 +618,33 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
587
618
|
const yPoint1 = yScale(y1);
|
|
588
619
|
const xPoint2 = _xAxisScale(x2);
|
|
589
620
|
const yPoint2 = yScale(y2);
|
|
590
|
-
const strokeWidth = ((
|
|
621
|
+
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;
|
|
591
622
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
592
623
|
const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
|
|
593
|
-
const supportsTextMode = (
|
|
624
|
+
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');
|
|
594
625
|
const text = _points[i].data[j - 1].text;
|
|
595
626
|
let currentMarkerSize = _points[i].data[j - 1].markerSize;
|
|
596
627
|
if (isPlottable(xPoint1, yPoint1)) {
|
|
597
|
-
var _points_i_lineOptions_mode3,
|
|
628
|
+
var _points_i_lineOptions_mode3, _points_i_lineOptions15, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
|
|
598
629
|
const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
|
|
630
|
+
const targetElement = document.getElementById(circleId);
|
|
599
631
|
var _points_i_data__text1;
|
|
600
|
-
pointsForLine.push(((
|
|
632
|
+
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", {
|
|
601
633
|
id: circleId,
|
|
602
634
|
key: circleId,
|
|
603
635
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
604
636
|
cx: xPoint1,
|
|
605
637
|
cy: yPoint1,
|
|
606
638
|
"data-is-focusable": isLegendSelected,
|
|
607
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
608
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
639
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
640
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
609
641
|
onMouseOut: _handleMouseOut,
|
|
610
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
642
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
611
643
|
onBlur: _handleMouseOut,
|
|
612
644
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
613
645
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
614
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
615
|
-
stroke: lineColor,
|
|
646
|
+
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),
|
|
647
|
+
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,
|
|
616
648
|
strokeWidth: strokeWidth,
|
|
617
649
|
role: "img",
|
|
618
650
|
"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)
|
|
@@ -627,15 +659,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
627
659
|
key: circleId,
|
|
628
660
|
d: path,
|
|
629
661
|
"data-is-focusable": isLegendSelected,
|
|
630
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
631
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
662
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
663
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
632
664
|
onMouseOut: _handleMouseOut,
|
|
633
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
665
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
634
666
|
onBlur: _handleMouseOut,
|
|
635
667
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
636
668
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
637
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
638
|
-
stroke: lineColor,
|
|
669
|
+
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),
|
|
670
|
+
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,
|
|
639
671
|
strokeWidth: strokeWidth,
|
|
640
672
|
role: "img",
|
|
641
673
|
"aria-label": _getAriaLabel(i, j - 1),
|
|
@@ -643,32 +675,33 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
643
675
|
}));
|
|
644
676
|
}
|
|
645
677
|
if (j + 1 === _points[i].data.length) {
|
|
646
|
-
var _points_i_lineOptions_mode4,
|
|
678
|
+
var _points_i_lineOptions_mode4, _points_i_lineOptions16;
|
|
647
679
|
// If this is last point of the line segment.
|
|
648
680
|
const lastCircleId = `${circleId}${j}L`;
|
|
649
681
|
const hiddenHoverCircleId = `${circleId}${j}D`;
|
|
650
682
|
const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
|
|
651
683
|
const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
|
|
652
684
|
currentMarkerSize = _points[i].data[j].markerSize;
|
|
653
|
-
const lastSupportsTextMode = (
|
|
685
|
+
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');
|
|
654
686
|
const lastText = _points[i].data[j].text;
|
|
655
687
|
if (isPlottable(xPoint2, yPoint2)) {
|
|
656
|
-
var _points_i_lineOptions_mode5,
|
|
688
|
+
var _points_i_lineOptions_mode5, _points_i_lineOptions17, _points_i_data_j, _points_i_data_j1;
|
|
657
689
|
const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
|
|
690
|
+
const targetElement = document.getElementById(lastCircleId);
|
|
658
691
|
var _points_i_data_j_text;
|
|
659
692
|
pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
|
|
660
693
|
key: `${lastCircleId}_container`
|
|
661
|
-
}, ((
|
|
694
|
+
}, ((_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", {
|
|
662
695
|
id: lastCircleId,
|
|
663
696
|
key: lastCircleId,
|
|
664
697
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
665
698
|
cx: xPoint2,
|
|
666
699
|
cy: yPoint2,
|
|
667
700
|
"data-is-focusable": isLegendSelected,
|
|
668
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
669
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
701
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
702
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
670
703
|
onMouseOut: _handleMouseOut,
|
|
671
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
704
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
672
705
|
onBlur: _handleMouseOut,
|
|
673
706
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
674
707
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
@@ -687,15 +720,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
687
720
|
key: lastCircleId,
|
|
688
721
|
d: path,
|
|
689
722
|
"data-is-focusable": isLegendSelected,
|
|
690
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
691
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
723
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
724
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
692
725
|
onMouseOut: _handleMouseOut,
|
|
693
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
726
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
694
727
|
onBlur: _handleMouseOut,
|
|
695
728
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
696
729
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
697
|
-
fill: _getPointFill(lineColor, lastCircleId, j, true),
|
|
698
|
-
stroke: lineColor,
|
|
730
|
+
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),
|
|
731
|
+
stroke: ((_points_i_data_j1 = _points[i].data[j]) === null || _points_i_data_j1 === void 0 ? void 0 : _points_i_data_j1.markerColor) || lineColor,
|
|
699
732
|
strokeWidth: strokeWidth,
|
|
700
733
|
role: "img",
|
|
701
734
|
"aria-label": _getAriaLabel(i, j),
|
|
@@ -708,8 +741,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
708
741
|
cy: yPoint2,
|
|
709
742
|
opacity: 0,
|
|
710
743
|
width: 0,
|
|
711
|
-
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
712
|
-
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
744
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
745
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
713
746
|
onMouseOut: _handleMouseOut,
|
|
714
747
|
strokeWidth: 0,
|
|
715
748
|
focusable: false,
|
|
@@ -717,14 +750,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
717
750
|
})));
|
|
718
751
|
}
|
|
719
752
|
}
|
|
720
|
-
if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((
|
|
753
|
+
if (isPlottable(xPoint1, yPoint1) && 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')))) {
|
|
721
754
|
if (isLegendSelected) {
|
|
722
755
|
// don't draw line if it is in a gap
|
|
723
756
|
if (!isInGap) {
|
|
724
|
-
var
|
|
725
|
-
const lineBorderWidth = ((
|
|
757
|
+
var _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20, _points_i_lineOptions21;
|
|
758
|
+
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;
|
|
759
|
+
const targetElement = document.getElementById(circleId);
|
|
726
760
|
if (lineBorderWidth > 0) {
|
|
727
|
-
var
|
|
761
|
+
var _points_i_lineOptions22, _points_i_lineOptions23;
|
|
728
762
|
var _points_i_lineOptions_strokeLinecap3;
|
|
729
763
|
bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
730
764
|
id: borderId,
|
|
@@ -733,9 +767,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
733
767
|
y1: yPoint1,
|
|
734
768
|
x2: xPoint2,
|
|
735
769
|
y2: yPoint2,
|
|
736
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (
|
|
770
|
+
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',
|
|
737
771
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
738
|
-
stroke: ((
|
|
772
|
+
stroke: ((_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
739
773
|
opacity: 1
|
|
740
774
|
}));
|
|
741
775
|
}
|
|
@@ -751,20 +785,20 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
751
785
|
ref: (e)=>{
|
|
752
786
|
_refCallback(e, lineId);
|
|
753
787
|
},
|
|
754
|
-
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
755
|
-
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor),
|
|
788
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
789
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
756
790
|
onMouseOut: _handleMouseOut,
|
|
757
791
|
stroke: lineColor,
|
|
758
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (
|
|
759
|
-
strokeDasharray: (
|
|
760
|
-
strokeDashoffset: (
|
|
792
|
+
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',
|
|
793
|
+
strokeDasharray: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDasharray,
|
|
794
|
+
strokeDashoffset: (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeDashoffset,
|
|
761
795
|
opacity: 1,
|
|
762
796
|
..._getClickHandler(_points[i].onLineClick)
|
|
763
797
|
}));
|
|
764
798
|
}
|
|
765
799
|
} else {
|
|
766
800
|
if (!isInGap) {
|
|
767
|
-
var
|
|
801
|
+
var _points_i_lineOptions24, _points_i_lineOptions25, _points_i_lineOptions26;
|
|
768
802
|
var _points_i_lineOptions_strokeLinecap5;
|
|
769
803
|
linesForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
770
804
|
id: lineId,
|
|
@@ -775,9 +809,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
775
809
|
y2: yPoint2,
|
|
776
810
|
strokeWidth: strokeWidth,
|
|
777
811
|
stroke: lineColor,
|
|
778
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (
|
|
779
|
-
strokeDasharray: (
|
|
780
|
-
strokeDashoffset: (
|
|
812
|
+
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',
|
|
813
|
+
strokeDasharray: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDasharray,
|
|
814
|
+
strokeDashoffset: (_points_i_lineOptions26 = _points[i].lineOptions) === null || _points_i_lineOptions26 === void 0 ? void 0 : _points_i_lineOptions26.strokeDashoffset,
|
|
781
815
|
opacity: 0.1
|
|
782
816
|
}));
|
|
783
817
|
}
|
|
@@ -785,13 +819,33 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
785
819
|
}
|
|
786
820
|
}
|
|
787
821
|
}
|
|
822
|
+
// Add filled area for scatterpolar charts
|
|
823
|
+
const fillMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : _points_i_lineOptions1.fill;
|
|
824
|
+
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
825
|
+
if (fillMode === 'toself' && _points[i].data.length >= 3 && isLegendSelected && _isScatterPolar) {
|
|
826
|
+
const getScaledXValue = (dataPoint)=>_xAxisScale(dataPoint.x instanceof Date ? dataPoint.x : dataPoint.x);
|
|
827
|
+
const fillPathGenerator = d3Line().x((dataPoint)=>getScaledXValue(dataPoint)).y((dataPoint)=>yScale(dataPoint.y)).curve(getCurveFactory(lineCurve)).defined((dataPoint)=>isPlottable(getScaledXValue(dataPoint), yScale(dataPoint.y)));
|
|
828
|
+
const fillPath = fillPathGenerator(_points[i].data);
|
|
829
|
+
if (fillPath) {
|
|
830
|
+
linesForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
831
|
+
key: `scatterpolar_fill_${i}`,
|
|
832
|
+
d: `${fillPath}Z`,
|
|
833
|
+
fill: lineColor,
|
|
834
|
+
fillOpacity: 0.5,
|
|
835
|
+
stroke: lineColor,
|
|
836
|
+
strokeWidth: 2,
|
|
837
|
+
strokeOpacity: 0.8,
|
|
838
|
+
pointerEvents: "none"
|
|
839
|
+
}));
|
|
840
|
+
}
|
|
841
|
+
}
|
|
788
842
|
if (_isScatterPolar) {
|
|
789
|
-
var
|
|
843
|
+
var _points_i1;
|
|
790
844
|
pointsForLine.push(...renderScatterPolarCategoryLabels({
|
|
791
845
|
xAxisScale: _xAxisScale,
|
|
792
846
|
yAxisScale: yScale,
|
|
793
847
|
className: classes.markerLabel || '',
|
|
794
|
-
lineOptions: (
|
|
848
|
+
lineOptions: (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
|
|
795
849
|
}));
|
|
796
850
|
}
|
|
797
851
|
lines.push(/*#__PURE__*/ React.createElement("g", {
|
|
@@ -937,11 +991,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
937
991
|
}
|
|
938
992
|
const { xAxisCalloutData } = lineChartData[linenumber].data[index];
|
|
939
993
|
const formattedDate = xPointToHighlight instanceof Date ? formatDateToLocaleString(xPointToHighlight, props.culture, props.useUTC) : xPointToHighlight;
|
|
940
|
-
const
|
|
941
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
942
|
-
const found = find(_calloutPoints, (element)=>{
|
|
943
|
-
return element.x === modifiedXVal;
|
|
944
|
-
});
|
|
994
|
+
const found = findCalloutPoints(calloutPointsRef.current, xPointToHighlight);
|
|
945
995
|
const pointToHighlight = lineChartData[linenumber].data[index];
|
|
946
996
|
const pointToHighlightUpdated = nearestCircleToHighlight === null || nearestCircleToHighlight !== null && pointToHighlight !== null && (nearestCircleToHighlight.x !== pointToHighlight.x || nearestCircleToHighlight.y !== pointToHighlight.y);
|
|
947
997
|
// if no points need to be called out then don't show vertical line and callout card
|
|
@@ -949,8 +999,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
949
999
|
_uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
|
|
950
1000
|
d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
|
|
951
1001
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
|
|
1002
|
+
const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
|
|
1003
|
+
const rect = targetElement.getBoundingClientRect();
|
|
952
1004
|
setNearestCircleToHighlight(pointToHighlight);
|
|
953
|
-
updatePosition(
|
|
1005
|
+
updatePosition(rect.x, rect.y);
|
|
954
1006
|
setStackCalloutProps(found);
|
|
955
1007
|
setYValueHover(found.values);
|
|
956
1008
|
setDataPointCalloutProps(found);
|
|
@@ -963,17 +1015,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
963
1015
|
setActivePoint('');
|
|
964
1016
|
}
|
|
965
1017
|
};
|
|
966
|
-
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
|
|
967
|
-
let cx = 0;
|
|
968
|
-
let cy = 0;
|
|
969
|
-
const targetRect = event.target.getBoundingClientRect();
|
|
970
|
-
cx = targetRect.left + targetRect.width / 2;
|
|
971
|
-
cy = targetRect.top + targetRect.height / 2;
|
|
972
|
-
updatePosition(cx, cy);
|
|
1018
|
+
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
|
|
973
1019
|
_uniqueCallOutID = circleId;
|
|
974
1020
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
975
|
-
const
|
|
976
|
-
const found = find(_calloutPoints, (element)=>element.x === xVal);
|
|
1021
|
+
const found = findCalloutPoints(calloutPointsRef.current, x);
|
|
977
1022
|
// if no points need to be called out then don't show vertical line and callout card
|
|
978
1023
|
if (found) {
|
|
979
1024
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, 0)`).attr('visibility', 'visibility');
|
|
@@ -982,6 +1027,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
982
1027
|
setPopoverOpen(true);
|
|
983
1028
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
984
1029
|
setYValueHover(found.values);
|
|
1030
|
+
setRefSelected(targetElement);
|
|
985
1031
|
setStackCalloutProps(found);
|
|
986
1032
|
setDataPointCalloutProps(found);
|
|
987
1033
|
setActivePoint(circleId);
|
|
@@ -991,18 +1037,16 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
991
1037
|
setActivePoint(circleId);
|
|
992
1038
|
}
|
|
993
1039
|
}
|
|
994
|
-
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
|
|
1040
|
+
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
|
|
995
1041
|
mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
|
|
996
1042
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
997
|
-
const
|
|
998
|
-
const yVal = y instanceof Date ? y.getTime() : y;
|
|
999
|
-
const found = find(_calloutPoints, (element)=>element.x === xVal);
|
|
1043
|
+
const found = findCalloutPoints(calloutPointsRef.current, x);
|
|
1000
1044
|
let hoverDp = undefined;
|
|
1001
1045
|
if (props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
|
|
1002
|
-
const dp = find(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) ===
|
|
1046
|
+
const dp = find(found.values, (val)=>(val === null || val === void 0 ? void 0 : val.y) === y);
|
|
1003
1047
|
if (dp) {
|
|
1004
1048
|
hoverDp = {
|
|
1005
|
-
x
|
|
1049
|
+
x,
|
|
1006
1050
|
values: [
|
|
1007
1051
|
dp
|
|
1008
1052
|
]
|
|
@@ -1014,10 +1058,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1014
1058
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
|
|
1015
1059
|
if (_uniqueCallOutID !== circleId) {
|
|
1016
1060
|
_uniqueCallOutID = circleId;
|
|
1017
|
-
|
|
1061
|
+
setRefSelected(targetElement);
|
|
1062
|
+
setPopoverOpen(true);
|
|
1018
1063
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
1019
1064
|
setYValueHover(found.values);
|
|
1020
|
-
setYValue(
|
|
1065
|
+
setYValue(y);
|
|
1021
1066
|
setLegendVal(legendVal);
|
|
1022
1067
|
setLineColor(lineColor);
|
|
1023
1068
|
setStackCalloutProps(found);
|
|
@@ -1154,7 +1199,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1154
1199
|
let points = _points;
|
|
1155
1200
|
if (legendProps && !!legendProps.canSelectMultipleLegends) {
|
|
1156
1201
|
points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points;
|
|
1157
|
-
|
|
1202
|
+
calloutPointsRef.current = calloutData(points);
|
|
1158
1203
|
}
|
|
1159
1204
|
let legendBars = null;
|
|
1160
1205
|
// reduce computation cost by only creating legendBars
|
|
@@ -1164,7 +1209,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1164
1209
|
legendBars = _createLegends(_points); // ToDo: Memoize legends to improve performance.
|
|
1165
1210
|
}
|
|
1166
1211
|
const calloutProps = {
|
|
1167
|
-
YValueHover:
|
|
1212
|
+
YValueHover: yValueHover,
|
|
1168
1213
|
hoverXValue: hoverXValue,
|
|
1169
1214
|
YValue: YValue,
|
|
1170
1215
|
legend: legendVal,
|
|
@@ -1174,8 +1219,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1174
1219
|
'data-is-focusable': true,
|
|
1175
1220
|
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
1176
1221
|
...props.calloutProps,
|
|
1177
|
-
clickPosition: clickPosition,
|
|
1178
1222
|
isPopoverOpen: isPopoverOpen,
|
|
1223
|
+
clickPosition: clickPosition,
|
|
1224
|
+
positioning: {
|
|
1225
|
+
target: refSelected
|
|
1226
|
+
},
|
|
1179
1227
|
isCalloutForStack: props.isCalloutForStack,
|
|
1180
1228
|
culture: props.culture,
|
|
1181
1229
|
isCartesian: true,
|