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