private renderComponent()

in src/visualComponent/sparkline/lineComponent.ts [187:272]


    private renderComponent(options: ILineComponentRenderOptions): void {
        const {
            x,
            y,
            viewport,
            color,
            isLine,
        } = options;

        this.updateGradient([{
            color,
            offset: "100%",
        }]);

        const xScale: DataRepresentationScale = x.scale
            .copy()
            .range([0, viewport.width]);

        const yScale: DataRepresentationScale = y.scale
            .copy()
            .range([viewport.height, 0]);

        const lineSelection = this.element
            .selectAll(this.lineSelector.selectorName)
            .data([options]);

        lineSelection
            .exit()
            .remove();

        lineSelection.enter()
            .append("svg:path")
            .classed(this.lineSelector.className, true)
            .merge(lineSelection)
            .attr("d", (lineRenderOptions: ILineComponentRenderOptions) => {
                const points: IDataRepresentationPoint[] = this.getValidPoints(lineRenderOptions.points);

                if (isLine && points.length > 0) {
                    points[0].y += 0.0000001;
                }

                switch (lineRenderOptions.type) {
                    case DataRepresentationPointGradientType.area: {
                        return this.getArea(xScale, yScale, viewport, y.min)(points);
                    }
                    case DataRepresentationPointGradientType.line:
                    default: {
                        return this.getLine(xScale, yScale)(points);
                    }
                }
            })
            .style("fill", (lineRenderOptions: ILineComponentRenderOptions) => {
                switch (lineRenderOptions.type) {
                    case DataRepresentationPointGradientType.area: {
                        return this.getGradientUrl();
                    }
                    case DataRepresentationPointGradientType.line:
                    default: {
                        return null;
                    }
                }
            })
            .style("stroke", (lineRenderOptions: ILineComponentRenderOptions) => {
                switch (lineRenderOptions.type) {
                    case DataRepresentationPointGradientType.area: {
                        return null;
                    }
                    case DataRepresentationPointGradientType.line:
                    default: {
                        return this.getGradientUrl();
                    }
                }
            })
            .style("stroke-width", (lineRenderOptions: ILineComponentRenderOptions) => {
                switch (lineRenderOptions.type) {
                    case DataRepresentationPointGradientType.area: {
                        return null;
                    }
                    case DataRepresentationPointGradientType.line:
                    default: {
                        //return lineRenderOptions.thickness;
                        pixelConverter.toString(lineRenderOptions.thickness);
                    }
                }
            });
    }