in src/visualComponent/table/cell/sparkline/lineComponent.ts [68:122]
public render(options: ILineRenderOptions): void {
const {
x,
y,
offset,
points,
viewport,
points: { thickness, lineStyle },
} = options;
const xScale: DataRepresentationScale = x.scale
.copy()
.range([
offset,
viewport.width - offset,
]);
const yScale: DataRepresentationScale = y.scale
.copy()
.range([
viewport.height - offset,
offset,
]);
const line: ID3Line<IDataRepresentationPoint> = this.getLine(xScale, yScale);
const lineSelection: Selection<any, IDataRepresentationPointGradientColor, any, any> = this.element
.selectAll(this.lineClassName.selectorName)
.data(this.dataPointFilter.groupAndFilterByColor(
points.points,
points.colors,
points.color,
));
lineSelection
.exit()
.remove();
lineSelection
.enter()
.append("svg:path")
.classed(this.lineClassName.className, true)
.merge(lineSelection)
.attr("d", (gradientColorOptions: IDataRepresentationPointGradientColor) => {
return line(gradientColorOptions.points);
})
.attr("class", () => {
return `${this.lineClassName.className}`;
})
.style("stroke", (gradientColorOptions: IDataRepresentationPointGradientColor) => gradientColorOptions.color)
.style("stroke-width", pixelConverter.toString(thickness))
.classed(LineStyle[LineStyle.dashedLine], lineStyle === LineStyle.dashedLine)
.classed(LineStyle[LineStyle.dottedLine], lineStyle === LineStyle.dottedLine)
.classed(LineStyle[LineStyle.dotDashedLine], lineStyle === LineStyle.dotDashedLine);
}