@fluentui/react-charts 0.0.0-nightly-20251009-0406.1 → 0.0.0-nightly-20251010-0407.1
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 +15 -15
- package/dist/index.d.ts +10 -0
- 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/PlotlySchemaAdapter.js +5 -1
- 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 +8 -28
- package/lib/components/DonutChart/DonutChart.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/LineChart/LineChart.js +110 -73
- package/lib/components/LineChart/LineChart.js.map +1 -1
- package/lib/types/DataPoint.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/PlotlySchemaAdapter.js +5 -1
- 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 +8 -28
- package/lib-commonjs/components/DonutChart/DonutChart.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/LineChart/LineChart.js +110 -73
- package/lib-commonjs/components/LineChart/LineChart.js.map +1 -1
- package/lib-commonjs/types/DataPoint.js.map +1 -1
- package/package.json +12 -12
|
@@ -147,6 +147,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
147
147
|
const [YValue, setYValue] = React.useState('');
|
|
148
148
|
const [legendVal, setLegendVal] = React.useState('');
|
|
149
149
|
const [lineColor, setLineColor] = React.useState('');
|
|
150
|
+
const [refSelected, setRefSelected] = React.useState(null);
|
|
150
151
|
const pointsRef = React.useRef([]);
|
|
151
152
|
const calloutPointsRef = React.useRef([]);
|
|
152
153
|
const classes = useLineChartStyles(props);
|
|
@@ -451,6 +452,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
451
452
|
const currentMarkerSize = _points[i].data[0].markerSize;
|
|
452
453
|
const supportsTextMode = (_points_i_lineOptions1 = _points[i].lineOptions) === null || _points_i_lineOptions1 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions1.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('text');
|
|
453
454
|
const text = _points[i].data[0].text;
|
|
455
|
+
const targetElement = document.getElementById(circleId);
|
|
454
456
|
var _points_i_data__text;
|
|
455
457
|
pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(React.Fragment, {
|
|
456
458
|
key: `${circleId}_fragment`
|
|
@@ -463,8 +465,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
463
465
|
fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
|
|
464
466
|
opacity: isLegendSelected ? 1 : 0.1,
|
|
465
467
|
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),
|
|
468
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
469
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
468
470
|
onMouseOut: _handleMouseOut,
|
|
469
471
|
strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
|
|
470
472
|
stroke: activePoint === circleId ? lineColor : '',
|
|
@@ -474,7 +476,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
474
476
|
ref: (e)=>{
|
|
475
477
|
_refCallback(e, circleId);
|
|
476
478
|
},
|
|
477
|
-
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
479
|
+
onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
478
480
|
onBlur: _handleMouseOut,
|
|
479
481
|
..._getClickHandler(_points[i].data[0].onDataPointClick)
|
|
480
482
|
}), !_isScatterPolar && supportsTextMode && text && /*#__PURE__*/ React.createElement("text", {
|
|
@@ -492,7 +494,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
492
494
|
const lineCurve = (_points_i_lineOptions = _points[i].lineOptions) === null || _points_i_lineOptions === void 0 ? void 0 : _points_i_lineOptions.curve;
|
|
493
495
|
// Use path rendering technique for larger datasets to optimize performance.
|
|
494
496
|
if ((props.optimizeLargeData || lineCurve) && _points[i].data.length > 1) {
|
|
495
|
-
var _points_i_lineOptions2;
|
|
497
|
+
var _points_i_lineOptions2, _points_i_lineOptions3;
|
|
496
498
|
const line = d3Line()// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
497
499
|
.x((d)=>_xAxisScale(d[0]))// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
498
500
|
.y((d)=>yScale(d[1])).curve(getCurveFactory(lineCurve)).defined((d)=>isPlottable(_xAxisScale(d[0]), yScale(d[1])));
|
|
@@ -507,20 +509,23 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
507
509
|
_points[i].data[k].y
|
|
508
510
|
]);
|
|
509
511
|
}
|
|
510
|
-
if
|
|
511
|
-
|
|
512
|
-
|
|
512
|
+
// Check if lines should be drawn based on mode
|
|
513
|
+
const lineMode = (_points_i_lineOptions3 = _points[i].lineOptions) === null || _points_i_lineOptions3 === void 0 ? void 0 : _points_i_lineOptions3.mode;
|
|
514
|
+
const shouldDrawLines = lineMode !== 'markers';
|
|
515
|
+
if (shouldDrawLines && isLegendSelected) {
|
|
516
|
+
var _points_i_lineOptions4, _points_i_lineOptions5, _points_i_lineOptions6;
|
|
517
|
+
const lineBorderWidth = ((_points_i_lineOptions4 = _points[i].lineOptions) === null || _points_i_lineOptions4 === void 0 ? void 0 : _points_i_lineOptions4.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
513
518
|
if (lineBorderWidth > 0) {
|
|
514
|
-
var
|
|
519
|
+
var _points_i_lineOptions7, _points_i_lineOptions8;
|
|
515
520
|
var _points_i_lineOptions_strokeLinecap;
|
|
516
521
|
bordersForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
517
522
|
id: borderId,
|
|
518
523
|
key: borderId,
|
|
519
524
|
d: line(lineData),
|
|
520
525
|
fill: "transparent",
|
|
521
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (
|
|
526
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap = (_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap !== void 0 ? _points_i_lineOptions_strokeLinecap : 'round',
|
|
522
527
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
523
|
-
stroke: ((
|
|
528
|
+
stroke: ((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
524
529
|
opacity: 1
|
|
525
530
|
}));
|
|
526
531
|
}
|
|
@@ -533,8 +538,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
533
538
|
"data-is-focusable": true,
|
|
534
539
|
stroke: lineColor,
|
|
535
540
|
strokeWidth: strokeWidth,
|
|
536
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (
|
|
537
|
-
strokeDasharray: (
|
|
541
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap1 = (_points_i_lineOptions5 = _points[i].lineOptions) === null || _points_i_lineOptions5 === void 0 ? void 0 : _points_i_lineOptions5.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap1 !== void 0 ? _points_i_lineOptions_strokeLinecap1 : 'round',
|
|
542
|
+
strokeDasharray: (_points_i_lineOptions6 = _points[i].lineOptions) === null || _points_i_lineOptions6 === void 0 ? void 0 : _points_i_lineOptions6.strokeDasharray,
|
|
538
543
|
onMouseMove: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
539
544
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
540
545
|
onMouseOut: _handleMouseOut,
|
|
@@ -542,8 +547,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
542
547
|
opacity: 1,
|
|
543
548
|
tabIndex: isLegendSelected ? 0 : undefined
|
|
544
549
|
}));
|
|
545
|
-
} else {
|
|
546
|
-
var
|
|
550
|
+
} else if (shouldDrawLines) {
|
|
551
|
+
var _points_i_lineOptions9, _points_i_lineOptions10;
|
|
547
552
|
var _points_i_lineOptions_strokeLinecap2;
|
|
548
553
|
linesForLine.push(/*#__PURE__*/ React.createElement("path", {
|
|
549
554
|
id: lineId,
|
|
@@ -553,11 +558,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
553
558
|
"data-is-focusable": false,
|
|
554
559
|
stroke: lineColor,
|
|
555
560
|
strokeWidth: strokeWidth,
|
|
556
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (
|
|
557
|
-
strokeDasharray: (
|
|
561
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap2 = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap2 !== void 0 ? _points_i_lineOptions_strokeLinecap2 : 'round',
|
|
562
|
+
strokeDasharray: (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeDasharray,
|
|
558
563
|
opacity: 0.1
|
|
559
564
|
}));
|
|
560
565
|
}
|
|
566
|
+
// Always add the highlight circle for large dataset hover
|
|
561
567
|
pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
|
|
562
568
|
id: `${_staticHighlightCircle}_${i}`,
|
|
563
569
|
key: `${_staticHighlightCircle}_${i}`,
|
|
@@ -572,9 +578,36 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
572
578
|
onMouseOver: (event)=>_onMouseOverLargeDataset(i, verticaLineHeight, event, yScale),
|
|
573
579
|
onMouseOut: _handleMouseOut
|
|
574
580
|
}));
|
|
581
|
+
// Add individual markers if mode includes 'markers'
|
|
582
|
+
const showMarkers = (lineMode === null || lineMode === void 0 ? void 0 : lineMode.includes('markers')) || !lineMode; // Show markers by default if no mode specified
|
|
583
|
+
if (showMarkers) {
|
|
584
|
+
for(let k = 0; k < _points[i].data.length; k++){
|
|
585
|
+
const { x, y } = _points[i].data[k];
|
|
586
|
+
const xPoint = _xAxisScale(x instanceof Date ? x.getTime() : x);
|
|
587
|
+
const yPoint = yScale(y);
|
|
588
|
+
if (isPlottable(xPoint, yPoint)) {
|
|
589
|
+
var _points_i_data_k, _points_i;
|
|
590
|
+
const markerSize = _points[i].data[k].markerSize;
|
|
591
|
+
const perPointColor = (_points_i_data_k = _points[i].data[k]) === null || _points_i_data_k === void 0 ? void 0 : _points_i_data_k.markerColor;
|
|
592
|
+
pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
|
|
593
|
+
key: `${_circleId}_${i}_${k}_marker`,
|
|
594
|
+
r: markerSize ? markerSize * extraMaxPixels * 0.3 / maxMarkerSize : activePoint === _circleId ? 5.5 : 3.5,
|
|
595
|
+
cx: xPoint,
|
|
596
|
+
cy: yPoint,
|
|
597
|
+
fill: activePoint === _circleId ? tokens.colorNeutralBackground1 : perPointColor || ((_points_i = _points[i]) === null || _points_i === void 0 ? void 0 : _points_i.color) || lineColor,
|
|
598
|
+
stroke: perPointColor || lineColor,
|
|
599
|
+
strokeWidth: 1,
|
|
600
|
+
opacity: isLegendSelected ? 1 : 0.1,
|
|
601
|
+
onMouseMove: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
602
|
+
onMouseOver: _onMouseOverLargeDataset.bind(i, verticaLineHeight, yScale),
|
|
603
|
+
onMouseOut: _handleMouseOut
|
|
604
|
+
}));
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
}
|
|
575
608
|
} else if (!props.optimizeLargeData) {
|
|
576
609
|
for(let j = 1; j < _points[i].data.length; j++){
|
|
577
|
-
var
|
|
610
|
+
var _points_i_lineOptions11, _points_i_lineOptions_mode1, _points_i_lineOptions12, _points_i_lineOptions_mode2, _points_i_lineOptions13;
|
|
578
611
|
const gapResult = _checkInGap(j, gaps, gapIndex);
|
|
579
612
|
const isInGap = gapResult.isInGap;
|
|
580
613
|
gapIndex = gapResult.gapIndex;
|
|
@@ -587,32 +620,33 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
587
620
|
const yPoint1 = yScale(y1);
|
|
588
621
|
const xPoint2 = _xAxisScale(x2);
|
|
589
622
|
const yPoint2 = yScale(y2);
|
|
590
|
-
const strokeWidth = ((
|
|
623
|
+
const strokeWidth = ((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
|
|
591
624
|
const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
|
|
592
625
|
const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
|
|
593
|
-
const supportsTextMode = (
|
|
626
|
+
const supportsTextMode = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions12.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('text');
|
|
594
627
|
const text = _points[i].data[j - 1].text;
|
|
595
628
|
let currentMarkerSize = _points[i].data[j - 1].markerSize;
|
|
596
629
|
if (isPlottable(xPoint1, yPoint1)) {
|
|
597
|
-
var _points_i_lineOptions_mode3,
|
|
630
|
+
var _points_i_lineOptions_mode3, _points_i_lineOptions14, _points_i_data_, _points_i_data_1, _points_i_data_2, _points_i_data_3;
|
|
598
631
|
const path = _getPath(xPoint1, yPoint1, circleId, j, false, _points[i].index);
|
|
632
|
+
const targetElement = document.getElementById(circleId);
|
|
599
633
|
var _points_i_data__text1;
|
|
600
|
-
pointsForLine.push(((
|
|
634
|
+
pointsForLine.push(((_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : (_points_i_lineOptions_mode3 = _points_i_lineOptions14.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
635
|
id: circleId,
|
|
602
636
|
key: circleId,
|
|
603
637
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
604
638
|
cx: xPoint1,
|
|
605
639
|
cy: yPoint1,
|
|
606
640
|
"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),
|
|
641
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
642
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
609
643
|
onMouseOut: _handleMouseOut,
|
|
610
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
644
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
611
645
|
onBlur: _handleMouseOut,
|
|
612
646
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
613
647
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
614
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
615
|
-
stroke: lineColor,
|
|
648
|
+
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),
|
|
649
|
+
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
650
|
strokeWidth: strokeWidth,
|
|
617
651
|
role: "img",
|
|
618
652
|
"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 +661,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
627
661
|
key: circleId,
|
|
628
662
|
d: path,
|
|
629
663
|
"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),
|
|
664
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
665
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
632
666
|
onMouseOut: _handleMouseOut,
|
|
633
|
-
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
|
|
667
|
+
onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData),
|
|
634
668
|
onBlur: _handleMouseOut,
|
|
635
669
|
..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
|
|
636
670
|
opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
|
|
637
|
-
fill: _getPointFill(lineColor, circleId, j, false),
|
|
638
|
-
stroke: lineColor,
|
|
671
|
+
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),
|
|
672
|
+
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
673
|
strokeWidth: strokeWidth,
|
|
640
674
|
role: "img",
|
|
641
675
|
"aria-label": _getAriaLabel(i, j - 1),
|
|
@@ -643,32 +677,33 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
643
677
|
}));
|
|
644
678
|
}
|
|
645
679
|
if (j + 1 === _points[i].data.length) {
|
|
646
|
-
var _points_i_lineOptions_mode4,
|
|
680
|
+
var _points_i_lineOptions_mode4, _points_i_lineOptions15;
|
|
647
681
|
// If this is last point of the line segment.
|
|
648
682
|
const lastCircleId = `${circleId}${j}L`;
|
|
649
683
|
const hiddenHoverCircleId = `${circleId}${j}D`;
|
|
650
684
|
const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
|
|
651
685
|
const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
|
|
652
686
|
currentMarkerSize = _points[i].data[j].markerSize;
|
|
653
|
-
const lastSupportsTextMode = (
|
|
687
|
+
const lastSupportsTextMode = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : (_points_i_lineOptions_mode4 = _points_i_lineOptions15.mode) === null || _points_i_lineOptions_mode4 === void 0 ? void 0 : _points_i_lineOptions_mode4.includes('text');
|
|
654
688
|
const lastText = _points[i].data[j].text;
|
|
655
689
|
if (isPlottable(xPoint2, yPoint2)) {
|
|
656
|
-
var _points_i_lineOptions_mode5,
|
|
690
|
+
var _points_i_lineOptions_mode5, _points_i_lineOptions16, _points_i_data_j, _points_i_data_j1;
|
|
657
691
|
const path = _getPath(xPoint2, yPoint2, lastCircleId, j, true, _points[i].index);
|
|
692
|
+
const targetElement = document.getElementById(lastCircleId);
|
|
658
693
|
var _points_i_data_j_text;
|
|
659
694
|
pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
|
|
660
695
|
key: `${lastCircleId}_container`
|
|
661
|
-
}, ((
|
|
696
|
+
}, ((_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : (_points_i_lineOptions_mode5 = _points_i_lineOptions16.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
697
|
id: lastCircleId,
|
|
663
698
|
key: lastCircleId,
|
|
664
699
|
r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
|
|
665
700
|
cx: xPoint2,
|
|
666
701
|
cy: yPoint2,
|
|
667
702
|
"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),
|
|
703
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
704
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
670
705
|
onMouseOut: _handleMouseOut,
|
|
671
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
706
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
672
707
|
onBlur: _handleMouseOut,
|
|
673
708
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
674
709
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
@@ -687,15 +722,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
687
722
|
key: lastCircleId,
|
|
688
723
|
d: path,
|
|
689
724
|
"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),
|
|
725
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
726
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
692
727
|
onMouseOut: _handleMouseOut,
|
|
693
|
-
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
|
|
728
|
+
onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, targetElement, lastCirlceXCalloutAccessibilityData),
|
|
694
729
|
onBlur: _handleMouseOut,
|
|
695
730
|
..._getClickHandler(_points[i].data[j].onDataPointClick),
|
|
696
731
|
opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
|
|
697
|
-
fill: _getPointFill(lineColor, lastCircleId, j, true),
|
|
698
|
-
stroke: lineColor,
|
|
732
|
+
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),
|
|
733
|
+
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
734
|
strokeWidth: strokeWidth,
|
|
700
735
|
role: "img",
|
|
701
736
|
"aria-label": _getAriaLabel(i, j),
|
|
@@ -708,8 +743,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
708
743
|
cy: yPoint2,
|
|
709
744
|
opacity: 0,
|
|
710
745
|
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),
|
|
746
|
+
onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
747
|
+
onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
713
748
|
onMouseOut: _handleMouseOut,
|
|
714
749
|
strokeWidth: 0,
|
|
715
750
|
focusable: false,
|
|
@@ -717,14 +752,15 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
717
752
|
})));
|
|
718
753
|
}
|
|
719
754
|
}
|
|
720
|
-
if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((
|
|
755
|
+
if (isPlottable(xPoint1, yPoint1) && isPlottable(xPoint2, yPoint2) && (!_hasMarkersMode || ((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions13.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('lines')))) {
|
|
721
756
|
if (isLegendSelected) {
|
|
722
757
|
// don't draw line if it is in a gap
|
|
723
758
|
if (!isInGap) {
|
|
724
|
-
var
|
|
725
|
-
const lineBorderWidth = ((
|
|
759
|
+
var _points_i_lineOptions17, _points_i_lineOptions18, _points_i_lineOptions19, _points_i_lineOptions20;
|
|
760
|
+
const lineBorderWidth = ((_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
|
|
761
|
+
const targetElement = document.getElementById(circleId);
|
|
726
762
|
if (lineBorderWidth > 0) {
|
|
727
|
-
var
|
|
763
|
+
var _points_i_lineOptions21, _points_i_lineOptions22;
|
|
728
764
|
var _points_i_lineOptions_strokeLinecap3;
|
|
729
765
|
bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
730
766
|
id: borderId,
|
|
@@ -733,9 +769,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
733
769
|
y1: yPoint1,
|
|
734
770
|
x2: xPoint2,
|
|
735
771
|
y2: yPoint2,
|
|
736
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (
|
|
772
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions21 = _points[i].lineOptions) === null || _points_i_lineOptions21 === void 0 ? void 0 : _points_i_lineOptions21.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
|
|
737
773
|
strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
|
|
738
|
-
stroke: ((
|
|
774
|
+
stroke: ((_points_i_lineOptions22 = _points[i].lineOptions) === null || _points_i_lineOptions22 === void 0 ? void 0 : _points_i_lineOptions22.lineBorderColor) || tokens.colorNeutralBackground1,
|
|
739
775
|
opacity: 1
|
|
740
776
|
}));
|
|
741
777
|
}
|
|
@@ -751,20 +787,20 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
751
787
|
ref: (e)=>{
|
|
752
788
|
_refCallback(e, lineId);
|
|
753
789
|
},
|
|
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),
|
|
790
|
+
onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
791
|
+
onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale, legendVal, lineColor, targetElement),
|
|
756
792
|
onMouseOut: _handleMouseOut,
|
|
757
793
|
stroke: lineColor,
|
|
758
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (
|
|
759
|
-
strokeDasharray: (
|
|
760
|
-
strokeDashoffset: (
|
|
794
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
|
|
795
|
+
strokeDasharray: (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeDasharray,
|
|
796
|
+
strokeDashoffset: (_points_i_lineOptions20 = _points[i].lineOptions) === null || _points_i_lineOptions20 === void 0 ? void 0 : _points_i_lineOptions20.strokeDashoffset,
|
|
761
797
|
opacity: 1,
|
|
762
798
|
..._getClickHandler(_points[i].onLineClick)
|
|
763
799
|
}));
|
|
764
800
|
}
|
|
765
801
|
} else {
|
|
766
802
|
if (!isInGap) {
|
|
767
|
-
var
|
|
803
|
+
var _points_i_lineOptions23, _points_i_lineOptions24, _points_i_lineOptions25;
|
|
768
804
|
var _points_i_lineOptions_strokeLinecap5;
|
|
769
805
|
linesForLine.push(/*#__PURE__*/ React.createElement("line", {
|
|
770
806
|
id: lineId,
|
|
@@ -775,9 +811,9 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
775
811
|
y2: yPoint2,
|
|
776
812
|
strokeWidth: strokeWidth,
|
|
777
813
|
stroke: lineColor,
|
|
778
|
-
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (
|
|
779
|
-
strokeDasharray: (
|
|
780
|
-
strokeDashoffset: (
|
|
814
|
+
strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions23 = _points[i].lineOptions) === null || _points_i_lineOptions23 === void 0 ? void 0 : _points_i_lineOptions23.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
|
|
815
|
+
strokeDasharray: (_points_i_lineOptions24 = _points[i].lineOptions) === null || _points_i_lineOptions24 === void 0 ? void 0 : _points_i_lineOptions24.strokeDasharray,
|
|
816
|
+
strokeDashoffset: (_points_i_lineOptions25 = _points[i].lineOptions) === null || _points_i_lineOptions25 === void 0 ? void 0 : _points_i_lineOptions25.strokeDashoffset,
|
|
781
817
|
opacity: 0.1
|
|
782
818
|
}));
|
|
783
819
|
}
|
|
@@ -786,12 +822,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
786
822
|
}
|
|
787
823
|
}
|
|
788
824
|
if (_isScatterPolar) {
|
|
789
|
-
var
|
|
825
|
+
var _points_i1;
|
|
790
826
|
pointsForLine.push(...renderScatterPolarCategoryLabels({
|
|
791
827
|
xAxisScale: _xAxisScale,
|
|
792
828
|
yAxisScale: yScale,
|
|
793
829
|
className: classes.markerLabel || '',
|
|
794
|
-
lineOptions: (
|
|
830
|
+
lineOptions: (_points_i1 = _points[i]) === null || _points_i1 === void 0 ? void 0 : _points_i1.lineOptions
|
|
795
831
|
}));
|
|
796
832
|
}
|
|
797
833
|
lines.push(/*#__PURE__*/ React.createElement("g", {
|
|
@@ -949,8 +985,10 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
949
985
|
_uniqueCallOutID = `#${_staticHighlightCircle}_${linenumber}`;
|
|
950
986
|
d3Select(`#${_staticHighlightCircle}_${linenumber}`).attr('cx', `${_xAxisScale(pointToHighlight.x)}`).attr('cy', `${yScale(pointToHighlight.y)}`).attr('visibility', 'visibility');
|
|
951
987
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(pointToHighlight.x)}, ${yScale(pointToHighlight.y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(pointToHighlight.y)}`);
|
|
988
|
+
const targetElement = document.getElementById(`${_staticHighlightCircle}_${linenumber}`);
|
|
989
|
+
const rect = targetElement.getBoundingClientRect();
|
|
952
990
|
setNearestCircleToHighlight(pointToHighlight);
|
|
953
|
-
updatePosition(
|
|
991
|
+
updatePosition(rect.x, rect.y);
|
|
954
992
|
setStackCalloutProps(found);
|
|
955
993
|
setYValueHover(found.values);
|
|
956
994
|
setDataPointCalloutProps(found);
|
|
@@ -963,13 +1001,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
963
1001
|
setActivePoint('');
|
|
964
1002
|
}
|
|
965
1003
|
};
|
|
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);
|
|
1004
|
+
function _handleFocus(event, lineId, x, xAxisCalloutData, circleId, targetElement, xAxisCalloutAccessibilityData) {
|
|
973
1005
|
_uniqueCallOutID = circleId;
|
|
974
1006
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
975
1007
|
const xVal = x instanceof Date ? x.getTime() : x;
|
|
@@ -982,6 +1014,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
982
1014
|
setPopoverOpen(true);
|
|
983
1015
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
984
1016
|
setYValueHover(found.values);
|
|
1017
|
+
setRefSelected(targetElement);
|
|
985
1018
|
setStackCalloutProps(found);
|
|
986
1019
|
setDataPointCalloutProps(found);
|
|
987
1020
|
setActivePoint(circleId);
|
|
@@ -991,7 +1024,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
991
1024
|
setActivePoint(circleId);
|
|
992
1025
|
}
|
|
993
1026
|
}
|
|
994
|
-
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor) {
|
|
1027
|
+
function _handleHover(x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent, yScale, legendVal, lineColor, targetElement) {
|
|
995
1028
|
mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
|
|
996
1029
|
const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
|
|
997
1030
|
const xVal = x instanceof Date ? x.getTime() : x;
|
|
@@ -1014,7 +1047,8 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1014
1047
|
d3Select(`#${_verticalLine}`).attr('transform', ()=>`translate(${_xAxisScale(x)}, ${yScale(y)})`).attr('visibility', 'visibility').attr('y2', `${lineHeight - 5 - yScale(y)}`);
|
|
1015
1048
|
if (_uniqueCallOutID !== circleId) {
|
|
1016
1049
|
_uniqueCallOutID = circleId;
|
|
1017
|
-
|
|
1050
|
+
setRefSelected(targetElement);
|
|
1051
|
+
setPopoverOpen(true);
|
|
1018
1052
|
xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
|
|
1019
1053
|
setYValueHover(found.values);
|
|
1020
1054
|
setYValue(yVal);
|
|
@@ -1174,8 +1208,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
|
|
|
1174
1208
|
'data-is-focusable': true,
|
|
1175
1209
|
xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
|
|
1176
1210
|
...props.calloutProps,
|
|
1177
|
-
clickPosition: clickPosition,
|
|
1178
1211
|
isPopoverOpen: isPopoverOpen,
|
|
1212
|
+
clickPosition: clickPosition,
|
|
1213
|
+
positioning: {
|
|
1214
|
+
target: refSelected
|
|
1215
|
+
},
|
|
1179
1216
|
isCalloutForStack: props.isCalloutForStack,
|
|
1180
1217
|
culture: props.culture,
|
|
1181
1218
|
isCartesian: true,
|