private onCurrentDataPointIndexChange()

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);
    }