in src/visualComponent/sparkline/lineComponent.ts [124:185]
private onCurrentDataPointIndexChange(index: number): void {
if (!this.renderOptions || !this.renderOptions.points) {
return;
}
let point: IDataRepresentationPoint = this.renderOptions.points[index];
if (!point) {
point = this.renderOptions.points[this.renderOptions.points.length - 1];
}
const {
alternativeColor,
color,
viewport,
validPoints,
} = this.renderOptions;
// Last valid point is required here to line width to generate a correct gradient
const lastValidPoint: IDataRepresentationPoint = validPoints && validPoints[validPoints.length - 1];
if (!lastValidPoint) {
return;
}
const xScale: DataRepresentationScale = this.renderOptions.x.scale
.copy()
.range([0, viewport.width]);
const xPosition: number = xScale.scale(point.x);
const lineWidth: number = xScale.scale(lastValidPoint.x);
const width: number = lineWidth > viewport.width
? viewport.width
: lineWidth;
const firstValue: IDataRepresentationPoint = this.renderOptions.points.find((x) => x.y || x.y === 0);
const trueXPosition: number = firstValue ? xScale.scale(firstValue.x) : undefined;
const offset: number = xPosition >= trueXPosition ? ((xPosition - trueXPosition) / (width - trueXPosition) * 100) : 0;
const offsetInPercent: string = `${offset}%`;
const gradients: ILineComponentGradient[] = [
{
color: alternativeColor,
offset: "0%",
},
{
color: alternativeColor,
offset: offsetInPercent,
},
{
color,
offset: offsetInPercent,
},
{
color,
offset: "100%",
},
];
this.updateGradient(gradients);
}