@fluentui/react-charts 9.2.2 → 9.2.3

package/lib/components/LineChart/LineChart.js

@@ -4,6 +4,7 @@ import { select as d3Select, pointer } from 'd3-selection';
 import { bisector } from 'd3-array';
 import { Legends } from '../Legends/index';
 import { line as d3Line } from 'd3-shape';
+import { max as d3Max, min as d3Min } from 'd3-array';
 import { useId } from '@fluentui/react-utilities';
 import { find } from '../../utilities/index';
 import { CartesianChart } from '../../index';
@@ -89,6 +90,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
  * {@docCategory LineChart}
  */ export const LineChart = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
     var _props_legendProps_selectedLegends, _props_legendProps;
+    let _hasMarkersMode = false;
     let _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     let _calloutPoints = calloutData(_points) || [];
@@ -117,6 +119,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
     const _isRTL = useRtl();
     let xAxisCalloutAccessibilityData = {};
     const cartesianChartRef = React.useRef(null);
+    let _xMin = Number.NEGATIVE_INFINITY;
+    let _yMin = Number.NEGATIVE_INFINITY;
+    let _xMax = Number.POSITIVE_INFINITY;
+    let _xPadding = 0;
+    let _yPadding = 0;
     let _yScaleSecondary;
     const _legendsRef = React.useRef(null);
     props.eventAnnotationProps && props.eventAnnotationProps.labelHeight && (eventLabelHeight = props.eventAnnotationProps.labelHeight);
@@ -165,7 +172,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
     }, []);
     function _getDomainNRangeValues(points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
         let domainNRangeValue;
-        if (xAxisType === XAxisTypes.NumericAxis) {
+        if (_hasMarkersMode && xAxisType === XAxisTypes.NumericAxis) {
+            domainNRangeValue = _getDomainNRangeValuesWithPadding(points, margins, width, isRTL);
+        } else if (_hasMarkersMode && xAxisType === XAxisTypes.DateAxis) {
+            domainNRangeValue = _getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues, chartType, barWidth);
+        } else if (xAxisType === XAxisTypes.NumericAxis) {
             domainNRangeValue = domainRangeOfNumericForAreaChart(points, margins, width, isRTL);
         } else if (xAxisType === XAxisTypes.DateAxis) {
             domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
@@ -186,6 +197,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
             var _props_legendProps_selectedLegends, _props_legendProps, _props_legendProps1;
             return ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : (_props_legendProps_selectedLegends = _props_legendProps.selectedLegends) === null || _props_legendProps_selectedLegends === void 0 ? void 0 : _props_legendProps_selectedLegends.includes(item.legend)) || ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegend) === item.legend;
         }) : lineChartData;
+        var _filteredData_some;
+        _hasMarkersMode = (_filteredData_some = filteredData === null || filteredData === void 0 ? void 0 : filteredData.some((item)=>{
+            var _item_lineOptions_mode_includes, _item_lineOptions_mode, _item_lineOptions;
+            return (_item_lineOptions = item.lineOptions) === null || _item_lineOptions === void 0 ? void 0 : (_item_lineOptions_mode = _item_lineOptions.mode) === null || _item_lineOptions_mode === void 0 ? void 0 : (_item_lineOptions_mode_includes = _item_lineOptions_mode.includes) === null || _item_lineOptions_mode_includes === void 0 ? void 0 : _item_lineOptions_mode_includes.call(_item_lineOptions_mode, 'markers');
+        })) !== null && _filteredData_some !== void 0 ? _filteredData_some : false;
         return filteredData ? filteredData.map((item, index)=>{
             let color;
             if (typeof item.color === 'undefined') {
@@ -217,6 +233,18 @@ const PATH_MULTIPLY_SIZE = 2.5;
     function _getCustomizedCallout() {
         return props.onRenderCalloutPerStack ? props.onRenderCalloutPerStack(stackCalloutProps) : props.onRenderCalloutPerDataPoint ? props.onRenderCalloutPerDataPoint(dataPointCalloutProps) : null;
     }
+    function _getNumericMinMaxOfY(points) {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        const { startValue, endValue } = findNumericMinMaxOfY(points);
+        _yMin = startValue;
+        if (_hasMarkersMode) {
+            _yPadding = (endValue - startValue) * 0.1;
+        }
+        return {
+            startValue: startValue - _yPadding,
+            endValue: endValue + _yPadding
+        };
+    }
     function _getMargins(_margins) {
         margins = _margins;
     }
@@ -249,17 +277,26 @@ const PATH_MULTIPLY_SIZE = 2.5;
     function _createLegends(data) {
         const { legendProps, allowMultipleShapesForPoints = false } = props;
         const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
-        const legendDataItems = data.map((point)=>{
-            const color = point.color;
+        const mapLegendToPoints = {};
+        data.forEach((point)=>{
+            if (point.legend) {
+                if (!mapLegendToPoints[point.legend]) {
+                    mapLegendToPoints[point.legend] = [];
+                }
+                mapLegendToPoints[point.legend].push(point);
+            }
+        });
+        const legendDataItems = Object.entries(mapLegendToPoints).map(([legendTitle, points])=>{
+            const representativePoint = points[0];
             // mapping data to the format Legends component needs
             const legend = {
-                title: point.legend,
-                color,
+                title: legendTitle,
+                color: representativePoint.color,
                 action: ()=>{
                     if (isLegendMultiSelectEnabled) {
-                        _handleMultipleLineLegendSelectionAction(point);
+                        points.forEach((p)=>_handleMultipleLineLegendSelectionAction(p));
                     } else {
-                        _handleSingleLegendSelectionAction(point);
+                        points.forEach((p)=>_handleSingleLegendSelectionAction(p));
                     }
                 },
                 onMouseOutAction: ()=>{
@@ -267,13 +304,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 },
                 hoverAction: ()=>{
                     _handleChartMouseLeave();
-                    setActiveLegend(point.legend);
+                    setActiveLegend(legendTitle);
                 },
-                ...point.legendShape && {
-                    shape: point.legendShape
+                ...representativePoint.legendShape && {
+                    shape: representativePoint.legendShape
                 },
                 ...allowMultipleShapesForPoints && {
-                    shape: Points[point.index % Object.keys(pointTypes).length]
+                    shape: Points[representativePoint.index % Object.keys(pointTypes).length]
                 }
             };
             return legend;
@@ -367,6 +404,11 @@ const PATH_MULTIPLY_SIZE = 2.5;
             }
         }
     }
+    function _getRangeForScatterMarkerSize(yScale, yPadding) {
+        const extraXPixels = _isRTL ? _xAxisScale(_xMax - _xPadding) - _xAxisScale(_xMax) : _xAxisScale(_xMin + _xPadding) - _xAxisScale(_xMin);
+        const extraYPixels = yScale(_yMin) - yScale(_yMin + _yPadding);
+        return Math.min(extraXPixels, extraYPixels);
+    }
     function _createLines(xElement, containerHeight) {
         const lines = [];
         if (isSelectedLegend) {
@@ -374,6 +416,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
         } else {
             _points = _injectIndexPropertyInLineChartData(props.data.lineChartData);
         }
+        const extraMaxPixels = _hasMarkersMode ? _getRangeForScatterMarkerSize(_yScalePrimary, _yPadding) : 0;
+        const maxMarkerSize = d3Max(_points, (point)=>{
+            return d3Max(point.data, (item)=>{
+                return item.markerSize;
+            });
+        });
         for(let i = _points.length - 1; i >= 0; i--){
             var _points_i_gaps, _points_i_lineOptions;
             const linesForLine = [];
@@ -388,10 +436,12 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points[i].data[0];
                 const circleId = `${_circleId}_${i}`;
                 const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
-                pointsForLine.push(/*#__PURE__*/ React.createElement("circle", {
+                const currentMarkerSize = _points[i].data[0].markerSize;
+                var _points_i_data__text;
+                pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
                     id: circleId,
                     key: circleId,
-                    r: activePoint === circleId ? 5.5 : 3.5,
+                    r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : activePoint === circleId ? 5.5 : 3.5,
                     cx: _xAxisScale(x1),
                     cy: yScale(y1),
                     fill: activePoint === circleId ? tokens.colorNeutralBackground1 : lineColor,
@@ -403,7 +453,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     strokeWidth: activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0,
                     stroke: activePoint === circleId ? lineColor : '',
                     role: "img",
-                    "aria-label": _getAriaLabel(i, 0),
+                    "aria-label": (_points_i_data__text = _points[i].data[0].text) !== null && _points_i_data__text !== void 0 ? _points_i_data__text : _getAriaLabel(i, 0),
                     "data-is-focusable": isLegendSelected,
                     ref: (e)=>{
                         _refCallback(e, circleId);
@@ -411,7 +461,13 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     onFocus: (event)=>_handleFocus(event, circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
                     onBlur: _handleMouseOut,
                     ..._getClickHandler(_points[i].data[0].onDataPointClick)
-                }));
+                }), _points[i].data[0].text && /*#__PURE__*/ React.createElement("text", {
+                    key: `${circleId}-label`,
+                    x: _xAxisScale(x1),
+                    y: yScale(y1) + Math.max(currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 3.5, 4) + 12,
+                    className: classes.markerLabel,
+                    opacity: isLegendSelected ? 1 : 0.1
+                }, _points[i].data[0].text)));
             }
             let gapIndex = 0;
             var _points_i_gaps_sort;
@@ -499,7 +555,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
                 }));
             } else if (!props.optimizeLargeData) {
                 for(let j = 1; j < _points[i].data.length; j++){
-                    var _points_i_lineOptions7;
+                    var _points_i_lineOptions7, _points_i_lineOptions_mode, _points_i_lineOptions8, _points_i_lineOptions_mode1, _points_i_lineOptions9;
                     const gapResult = _checkInGap(j, gaps, gapIndex);
                     const isInGap = gapResult.isInGap;
                     gapIndex = gapResult.gapIndex;
@@ -512,7 +568,34 @@ const PATH_MULTIPLY_SIZE = 2.5;
                     const strokeWidth = ((_points_i_lineOptions7 = _points[i].lineOptions) === null || _points_i_lineOptions7 === void 0 ? void 0 : _points_i_lineOptions7.strokeWidth) || props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                     const isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
                     const currentPointHidden = _points[i].hideNonActiveDots && activePoint !== circleId;
-                    pointsForLine.push(/*#__PURE__*/ React.createElement("path", {
+                    let currentMarkerSize = _points[i].data[j - 1].markerSize;
+                    var _points_i_data__text1;
+                    pointsForLine.push(((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : (_points_i_lineOptions_mode = _points_i_lineOptions8.mode) === null || _points_i_lineOptions_mode === void 0 ? void 0 : _points_i_lineOptions_mode.includes('markers')) ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
+                        id: circleId,
+                        key: circleId,
+                        r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
+                        cx: _xAxisScale(x1),
+                        cy: yScale(y1),
+                        "data-is-focusable": isLegendSelected,
+                        onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                        onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                        onMouseOut: _handleMouseOut,
+                        onFocus: (event)=>_handleFocus(event, lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData),
+                        onBlur: _handleMouseOut,
+                        ..._getClickHandler(_points[i].data[j - 1].onDataPointClick),
+                        opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01,
+                        fill: _getPointFill(lineColor, circleId, j, false),
+                        stroke: lineColor,
+                        strokeWidth: strokeWidth,
+                        role: "img",
+                        "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)
+                    }), _points[i].data[j - 1].text && /*#__PURE__*/ React.createElement("text", {
+                        key: `${circleId}-label`,
+                        x: _xAxisScale(x1),
+                        y: yScale(y1) + 12,
+                        fontSize: 12,
+                        className: classes.markerLabel
+                    }, _points[i].data[j - 1].text)) : /*#__PURE__*/ React.createElement("path", {
                         id: circleId,
                         key: circleId,
                         d: path,
@@ -532,15 +615,43 @@ const PATH_MULTIPLY_SIZE = 2.5;
                         tabIndex: isLegendSelected ? 0 : undefined
                     }));
                     if (j + 1 === _points[i].data.length) {
+                        var _points_i_lineOptions_mode2, _points_i_lineOptions10;
                         // If this is last point of the line segment.
                         const lastCircleId = `${circleId}${j}L`;
                         const hiddenHoverCircleId = `${circleId}${j}D`;
                         const lastPointHidden = _points[i].hideNonActiveDots && activePoint !== lastCircleId;
                         path = _getPath(_xAxisScale(x2), yScale(y2), lastCircleId, j, true, _points[i].index);
                         const { xAxisCalloutData: lastCirlceXCallout, xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData } = _points[i].data[j];
+                        currentMarkerSize = _points[i].data[j].markerSize;
+                        var _points_i_data_j_text;
                         pointsForLine.push(/*#__PURE__*/ React.createElement(React.Fragment, {
                             key: `${lastCircleId}_container`
-                        }, /*#__PURE__*/ React.createElement("path", {
+                        }, ((_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : (_points_i_lineOptions_mode2 = _points_i_lineOptions10.mode) === null || _points_i_lineOptions_mode2 === void 0 ? void 0 : _points_i_lineOptions_mode2.includes('markers')) ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("circle", {
+                            id: lastCircleId,
+                            key: lastCircleId,
+                            r: currentMarkerSize ? currentMarkerSize * extraMaxPixels / maxMarkerSize : 4,
+                            cx: _xAxisScale(x2),
+                            cy: yScale(y2),
+                            "data-is-focusable": isLegendSelected,
+                            onMouseOver: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onMouseMove: (event)=>_handleHover(x2, y2, verticaLineHeight, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData, event, yScale),
+                            onMouseOut: _handleMouseOut,
+                            onFocus: (event)=>_handleFocus(event, lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData),
+                            onBlur: _handleMouseOut,
+                            ..._getClickHandler(_points[i].data[j].onDataPointClick),
+                            opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01,
+                            fill: _getPointFill(lineColor, lastCircleId, j, true),
+                            stroke: lineColor,
+                            strokeWidth: strokeWidth,
+                            role: "img",
+                            "aria-label": (_points_i_data_j_text = _points[i].data[j].text) !== null && _points_i_data_j_text !== void 0 ? _points_i_data_j_text : _getAriaLabel(i, j)
+                        }), _points[i].data[j].text && /*#__PURE__*/ React.createElement("text", {
+                            key: `${lastCircleId}-label`,
+                            x: _xAxisScale(x2),
+                            y: yScale(y2) + 12,
+                            fontSize: 12,
+                            className: classes.markerLabel
+                        }, _points[i].data[j].text)) : /*#__PURE__*/ React.createElement("path", {
                             id: lastCircleId,
                             key: lastCircleId,
                             d: path,
@@ -574,72 +685,71 @@ const PATH_MULTIPLY_SIZE = 2.5;
                             focusable: false,
                             onBlur: _handleMouseOut
                         })));
-                    /* eslint-enable react/jsx-no-bind */ }
-                    if (isLegendSelected) {
-                        // don't draw line if it is in a gap
-                        if (!isInGap) {
-                            var _points_i_lineOptions8, _points_i_lineOptions9, _points_i_lineOptions10, _points_i_lineOptions11;
-                            const lineBorderWidth = ((_points_i_lineOptions8 = _points[i].lineOptions) === null || _points_i_lineOptions8 === void 0 ? void 0 : _points_i_lineOptions8.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
-                            if (lineBorderWidth > 0) {
-                                var _points_i_lineOptions12, _points_i_lineOptions13, _points_i_lineOptions14;
-                                var _points_i_lineOptions_strokeLinecap3;
-                                bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                    id: borderId,
-                                    key: borderId,
+                    }
+                    if (!_hasMarkersMode || ((_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : (_points_i_lineOptions_mode1 = _points_i_lineOptions9.mode) === null || _points_i_lineOptions_mode1 === void 0 ? void 0 : _points_i_lineOptions_mode1.includes('lines'))) {
+                        if (isLegendSelected) {
+                            // don't draw line if it is in a gap
+                            if (!isInGap) {
+                                var _points_i_lineOptions11, _points_i_lineOptions12, _points_i_lineOptions13, _points_i_lineOptions14;
+                                const lineBorderWidth = ((_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.lineBorderWidth) ? Number.parseFloat(_points[i].lineOptions.lineBorderWidth.toString()) : 0;
+                                if (lineBorderWidth > 0) {
+                                    var _points_i_lineOptions15, _points_i_lineOptions16;
+                                    var _points_i_lineOptions_strokeLinecap3;
+                                    bordersForLine.push(/*#__PURE__*/ React.createElement("line", {
+                                        id: borderId,
+                                        key: borderId,
+                                        x1: _xAxisScale(x1),
+                                        y1: yScale(y1),
+                                        x2: _xAxisScale(x2),
+                                        y2: yScale(y2),
+                                        strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
+                                        strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
+                                        stroke: ((_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.lineBorderColor) || tokens.colorNeutralBackground1,
+                                        opacity: 1
+                                    }));
+                                }
+                                var _points_i_lineOptions_strokeLinecap4;
+                                linesForLine.push(/*#__PURE__*/ React.createElement("line", {
+                                    id: lineId,
+                                    key: lineId,
                                     x1: _xAxisScale(x1),
                                     y1: yScale(y1),
                                     x2: _xAxisScale(x2),
                                     y2: yScale(y2),
-                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap3 = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap3 !== void 0 ? _points_i_lineOptions_strokeLinecap3 : 'round',
-                                    strokeWidth: Number.parseFloat(strokeWidth.toString()) + lineBorderWidth,
-                                    ...((_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.lineBorderColor) && {
-                                        stroke: (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.lineBorderColor
+                                    strokeWidth: strokeWidth,
+                                    ref: (e)=>{
+                                        _refCallback(e, lineId);
                                     },
-                                    className: classes.lineBorder,
-                                    opacity: 1
+                                    onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                                    onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
+                                    onMouseOut: _handleMouseOut,
+                                    stroke: lineColor,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions12 = _points[i].lineOptions) === null || _points_i_lineOptions12 === void 0 ? void 0 : _points_i_lineOptions12.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions13 = _points[i].lineOptions) === null || _points_i_lineOptions13 === void 0 ? void 0 : _points_i_lineOptions13.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions14 = _points[i].lineOptions) === null || _points_i_lineOptions14 === void 0 ? void 0 : _points_i_lineOptions14.strokeDashoffset,
+                                    opacity: 1,
+                                    ..._getClickHandler(_points[i].onLineClick)
+                                }));
+                            }
+                        } else {
+                            if (!isInGap) {
+                                var _points_i_lineOptions17, _points_i_lineOptions18, _points_i_lineOptions19;
+                                var _points_i_lineOptions_strokeLinecap5;
+                                linesForLine.push(/*#__PURE__*/ React.createElement("line", {
+                                    id: lineId,
+                                    key: lineId,
+                                    x1: _xAxisScale(x1),
+                                    y1: yScale(y1),
+                                    x2: _xAxisScale(x2),
+                                    y2: yScale(y2),
+                                    strokeWidth: strokeWidth,
+                                    stroke: lineColor,
+                                    strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
+                                    strokeDasharray: (_points_i_lineOptions18 = _points[i].lineOptions) === null || _points_i_lineOptions18 === void 0 ? void 0 : _points_i_lineOptions18.strokeDasharray,
+                                    strokeDashoffset: (_points_i_lineOptions19 = _points[i].lineOptions) === null || _points_i_lineOptions19 === void 0 ? void 0 : _points_i_lineOptions19.strokeDashoffset,
+                                    opacity: 0.1
                                 }));
                             }
-                            var _points_i_lineOptions_strokeLinecap4;
-                            linesForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                id: lineId,
-                                key: lineId,
-                                x1: _xAxisScale(x1),
-                                y1: yScale(y1),
-                                x2: _xAxisScale(x2),
-                                y2: yScale(y2),
-                                strokeWidth: strokeWidth,
-                                ref: (e)=>{
-                                    _refCallback(e, lineId);
-                                },
-                                onMouseOver: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                                onMouseMove: (event)=>_handleHover(x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event, yScale),
-                                onMouseOut: _handleMouseOut,
-                                stroke: lineColor,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap4 = (_points_i_lineOptions9 = _points[i].lineOptions) === null || _points_i_lineOptions9 === void 0 ? void 0 : _points_i_lineOptions9.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap4 !== void 0 ? _points_i_lineOptions_strokeLinecap4 : 'round',
-                                strokeDasharray: (_points_i_lineOptions10 = _points[i].lineOptions) === null || _points_i_lineOptions10 === void 0 ? void 0 : _points_i_lineOptions10.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions11 = _points[i].lineOptions) === null || _points_i_lineOptions11 === void 0 ? void 0 : _points_i_lineOptions11.strokeDashoffset,
-                                opacity: 1,
-                                ..._getClickHandler(_points[i].onLineClick)
-                            }));
-                        }
-                    } else {
-                        if (!isInGap) {
-                            var _points_i_lineOptions15, _points_i_lineOptions16, _points_i_lineOptions17;
-                            var _points_i_lineOptions_strokeLinecap5;
-                            linesForLine.push(/*#__PURE__*/ React.createElement("line", {
-                                id: lineId,
-                                key: lineId,
-                                x1: _xAxisScale(x1),
-                                y1: yScale(y1),
-                                x2: _xAxisScale(x2),
-                                y2: yScale(y2),
-                                strokeWidth: strokeWidth,
-                                stroke: lineColor,
-                                strokeLinecap: (_points_i_lineOptions_strokeLinecap5 = (_points_i_lineOptions15 = _points[i].lineOptions) === null || _points_i_lineOptions15 === void 0 ? void 0 : _points_i_lineOptions15.strokeLinecap) !== null && _points_i_lineOptions_strokeLinecap5 !== void 0 ? _points_i_lineOptions_strokeLinecap5 : 'round',
-                                strokeDasharray: (_points_i_lineOptions16 = _points[i].lineOptions) === null || _points_i_lineOptions16 === void 0 ? void 0 : _points_i_lineOptions16.strokeDasharray,
-                                strokeDashoffset: (_points_i_lineOptions17 = _points[i].lineOptions) === null || _points_i_lineOptions17 === void 0 ? void 0 : _points_i_lineOptions17.strokeDashoffset,
-                                opacity: 0.1
-                            }));
                         }
                     }
                 }
@@ -979,6 +1089,69 @@ const PATH_MULTIPLY_SIZE = 2.5;
         const yValue = point.yAxisCalloutData || point.y;
         return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
     }
+    function _getDomainNRangeValuesOfDateWithPadding(points, margins, width, isRTL, tickValues = [], chartType, barWidth) {
+        let sDate;
+        let lDate;
+        sDate = d3Min(points, (point)=>{
+            return d3Min(point.data, (item)=>item.x);
+        });
+        lDate = d3Max(points, (point)=>{
+            return d3Max(point.data, (item)=>item.x);
+        });
+        // Include tickValues if present
+        sDate = d3Min([
+            ...tickValues,
+            sDate
+        ]);
+        lDate = d3Max([
+            ...tickValues,
+            lDate
+        ]);
+        // Calculate time-based padding (e.g. 10% of the date range)
+        const dateRange = lDate.getTime() - sDate.getTime();
+        const datePadding = _hasMarkersMode ? dateRange * 0.1 : 0;
+        const paddedSDate = new Date(sDate.getTime() - datePadding);
+        const paddedLDate = new Date(lDate.getTime() + datePadding);
+        const rStartValue = margins.left;
+        const rEndValue = width - margins.right;
+        return isRTL ? {
+            dStartValue: paddedLDate,
+            dEndValue: paddedSDate,
+            rStartValue,
+            rEndValue
+        } : {
+            dStartValue: paddedSDate,
+            dEndValue: paddedLDate,
+            rStartValue,
+            rEndValue
+        };
+    }
+    function _getDomainNRangeValuesWithPadding(points, margins, width, isRTL) {
+        _xMin = d3Min(points, (point)=>{
+            return d3Min(point.data, (item)=>item.x);
+        });
+        _xMax = d3Max(points, (point)=>{
+            return d3Max(point.data, (item)=>{
+                return item.x;
+            });
+        });
+        if (_hasMarkersMode) {
+            _xPadding = (_xMax - _xMin) * 0.1;
+        }
+        const rStartValue = margins.left;
+        const rEndValue = width - margins.right;
+        return isRTL ? {
+            dStartValue: _xMax + _xPadding,
+            dEndValue: _xMin - _xPadding,
+            rStartValue,
+            rEndValue
+        } : {
+            dStartValue: _xMin - _xPadding,
+            dEndValue: _xMax + _xPadding,
+            rStartValue,
+            rEndValue
+        };
+    }
     function _isChartEmpty() {
         return !(props.data && props.data.lineChartData && props.data.lineChartData.length > 0 && props.data.lineChartData.filter((item)=>item.data.length).length > 0);
     }
@@ -1029,7 +1202,7 @@ const PATH_MULTIPLY_SIZE = 2.5;
         legendBars: legendBars,
         createYAxis: createNumericYAxis,
         getmargins: _getMargins,
-        getMinMaxOfYAxis: findNumericMinMaxOfY,
+        getMinMaxOfYAxis: _getNumericMinMaxOfY,
         getGraphData: _initializeLineChartData,
         xAxisType: isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis,
         getDomainNRangeValues: _getDomainNRangeValues,