in packages/react-charting/src/components/LineChart/LineChart.base.tsx [480:712]
private _createLines(xElement: SVGElement): JSX.Element[] {
const lines: JSX.Element[] = [];
if (this.state.isSelectedLegend) {
this._points = this.state.selectedLegendPoints;
} else {
this._points = this._injectIndexPropertyInLineChartData(this.props.data.lineChartData);
}
for (let i = 0; i < this._points.length; i++) {
const linesForLine: JSX.Element[] = [];
const bordersForLine: JSX.Element[] = [];
const pointsForLine: JSX.Element[] = [];
const legendVal: string = this._points[i].legend;
const lineColor: string = this._points[i].color;
const { activePoint } = this.state;
const { theme } = this.props;
if (this._points[i].data.length === 1) {
const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[0];
const circleId = `${this._circleId}${i}`;
pointsForLine.push(
<circle
id={`${this._circleId}${i}`}
key={`${this._circleId}${i}`}
r={activePoint === circleId ? 5.5 : 3.5}
cx={this._xAxisScale(x1)}
cy={this._yAxisScale(y1)}
fill={activePoint === circleId ? theme!.palette.white : lineColor}
onMouseOver={this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
onMouseMove={this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
onMouseOut={this._handleMouseOut}
strokeWidth={activePoint === circleId ? 2 : 0}
stroke={activePoint === circleId ? lineColor : ''}
/>,
);
}
let gapIndex = 0;
const gaps = this._points[i].gaps?.sort((a, b) => a.startIndex - b.startIndex) ?? [];
for (let j = 1; j < this._points[i].data.length; j++) {
const gapResult = this._checkInGap(j, gaps, gapIndex);
const isInGap = gapResult.isInGap;
gapIndex = gapResult.gapIndex;
const lineId = `${this._lineId}${i}${j}`;
const borderId = `${this._borderId}${i}${j}`;
const circleId = `${this._circleId}${i}${j}`;
const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[j - 1];
const { x: x2, y: y2 } = this._points[i].data[j];
let path = this._getPath(this._xAxisScale(x1), this._yAxisScale(y1), circleId, j, false, this._points[i].index);
const strokeWidth =
this._points[i].lineOptions?.strokeWidth || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
const isLegendSelected: boolean =
this.state.activeLegend === legendVal || this.state.activeLegend === '' || this.state.isSelectedLegend;
const currentPointHidden = this._points[i].hideNonActiveDots && activePoint !== circleId;
pointsForLine.push(
<path
id={circleId}
key={circleId}
d={path}
data-is-focusable={i === 0 ? true : false}
onMouseOver={this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
onMouseMove={this._handleHover.bind(this, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
onMouseOut={this._handleMouseOut}
onFocus={() => this._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
onBlur={this._handleMouseOut}
onClick={this._onDataPointClick.bind(this, this._points[i].data[j - 1].onDataPointClick)}
opacity={isLegendSelected && !currentPointHidden ? 1 : 0.01}
fill={this._getPointFill(lineColor, circleId, j, false)}
stroke={lineColor}
strokeWidth={2}
/>,
);
if (j + 1 === this._points[i].data.length) {
const lastCircleId = `${circleId}${j}L`;
const lastPointHidden = this._points[i].hideNonActiveDots && activePoint !== lastCircleId;
path = this._getPath(
this._xAxisScale(x2),
this._yAxisScale(y2),
lastCircleId,
j,
true,
this._points[i].index,
);
const {
xAxisCalloutData: lastCirlceXCallout,
xAxisCalloutAccessibilityData: lastCirlceXCalloutAccessibilityData,
} = this._points[i].data[j];
pointsForLine.push(
<path
id={lastCircleId}
key={lastCircleId}
d={path}
data-is-focusable={i === 0 ? true : false}
onMouseOver={this._handleHover.bind(
this,
x2,
lastCirlceXCallout,
lastCircleId,
lastCirlceXCalloutAccessibilityData,
)}
onMouseMove={this._handleHover.bind(
this,
x2,
lastCirlceXCallout,
lastCircleId,
lastCirlceXCalloutAccessibilityData,
)}
onMouseOut={this._handleMouseOut}
onFocus={() =>
this._handleFocus(lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData)
}
onBlur={this._handleMouseOut}
onClick={this._onDataPointClick.bind(this, this._points[i].data[j].onDataPointClick)}
opacity={isLegendSelected && !lastPointHidden ? 1 : 0.01}
fill={this._getPointFill(lineColor, lastCircleId, j, true)}
stroke={lineColor}
strokeWidth={2}
/>,
);
/* eslint-enable react/jsx-no-bind */
}
if (isLegendSelected) {
// don't draw line if it is in a gap
if (!isInGap) {
const lineBorderWidth = this._points[i].lineOptions?.lineBorderWidth
? Number.parseFloat(this._points[i].lineOptions!.lineBorderWidth!.toString())
: 0;
if (lineBorderWidth > 0) {
bordersForLine.push(
<line
id={borderId}
key={borderId}
x1={this._xAxisScale(x1)}
y1={this._yAxisScale(y1)}
x2={this._xAxisScale(x2)}
y2={this._yAxisScale(y2)}
strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
strokeWidth={Number.parseFloat(strokeWidth.toString()) + lineBorderWidth}
stroke={this._points[i].lineOptions?.lineBorderColor || theme!.palette.white}
opacity={1}
/>,
);
}
linesForLine.push(
<line
id={lineId}
key={lineId}
x1={this._xAxisScale(x1)}
y1={this._yAxisScale(y1)}
x2={this._xAxisScale(x2)}
y2={this._yAxisScale(y2)}
strokeWidth={strokeWidth}
ref={(e: SVGLineElement | null) => {
this._refCallback(e!, lineId);
}}
onMouseOver={this._handleHover.bind(
this,
x1,
xAxisCalloutData,
circleId,
xAxisCalloutAccessibilityData,
)}
onMouseMove={this._handleHover.bind(
this,
x1,
xAxisCalloutData,
circleId,
xAxisCalloutAccessibilityData,
)}
onMouseOut={this._handleMouseOut}
stroke={lineColor}
strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
strokeDasharray={this._points[i].lineOptions?.strokeDasharray}
strokeDashoffset={this._points[i].lineOptions?.strokeDashoffset}
opacity={1}
onClick={this._onLineClick.bind(this, this._points[i].onLineClick)}
/>,
);
}
} else {
if (!isInGap) {
linesForLine.push(
<line
id={lineId}
key={lineId}
x1={this._xAxisScale(x1)}
y1={this._yAxisScale(y1)}
x2={this._xAxisScale(x2)}
y2={this._yAxisScale(y2)}
strokeWidth={strokeWidth}
stroke={lineColor}
strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
strokeDasharray={this._points[i].lineOptions?.strokeDasharray}
strokeDashoffset={this._points[i].lineOptions?.strokeDashoffset}
opacity={0.1}
/>,
);
}
}
}
lines.push(...bordersForLine, ...linesForLine, ...pointsForLine);
}
const classNames = getClassNames(this.props.styles!, {
theme: this.props.theme!,
});
// Removing un wanted tooltip div from DOM, when prop not provided.
if (!this.props.showXAxisLablesTooltip) {
try {
document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();
// eslint-disable-next-line no-empty
} catch (e) {}
}
// Used to display tooltip at x axis labels.
if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {
const xAxisElement = d3Select(xElement).call(this._xAxisScale);
try {
document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();
// eslint-disable-next-line no-empty
} catch (e) {}
const tooltipProps = {
tooltipCls: classNames.tooltip!,
id: this._tooltipId,
xAxis: xAxisElement,
};
xAxisElement && tooltipOfXAxislabels(tooltipProps);
}
return lines;
}