Skip to content

Commit

Permalink
fix(xy_chart): improve line joins rendering (opensearch-project#920)
Browse files Browse the repository at this point in the history
This commit changes the `lineJoin` property used when rendering lines to `round`.
This will avoid spikes with very acute angles between line segments.
  • Loading branch information
markov00 authored Dec 2, 2020
1 parent 351c20c commit 9a6771c
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 26 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -33,18 +33,31 @@ export function renderLine(ctx: CanvasRenderingContext2D, line: Line, stroke: St
}

/** @internal */
export function renderMultiLine(ctx: CanvasRenderingContext2D, lines: Line[], stroke: Stroke) {
export function renderMultiLine(ctx: CanvasRenderingContext2D, lines: Line[] | string[], stroke: Stroke) {
if (stroke.width < MIN_STROKE_WIDTH) {
return;
}
withContext(ctx, (ctx) => {
const lineLength = lines.length;
if (lineLength === 0) {
return;
}
ctx.strokeStyle = RGBtoString(stroke.color);
ctx.lineJoin = 'round';
ctx.lineWidth = stroke.width;
if (stroke.dash) {
ctx.setLineDash(stroke.dash);
}

ctx.beginPath();

if (isStringArray(lines)) {
for (let i = 0; i < lineLength; i++) {
const path = lines[i];
ctx.stroke(new Path2D(path));
}
return;
}
for (let i = 0; i < lineLength; i++) {
const { x1, y1, x2, y2 } = lines[i];
ctx.moveTo(x1, y1);
Expand All @@ -53,3 +66,7 @@ export function renderMultiLine(ctx: CanvasRenderingContext2D, lines: Line[], st
ctx.stroke();
});
}

function isStringArray(lines: Line[] | string[]): lines is string[] {
return typeof lines[0] === 'string';
}
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ import { withContext, withClipRanges } from '../../../../../renderers/canvas';
import { ClippedRanges } from '../../../../../utils/geometry';
import { Point } from '../../../../../utils/point';
import { RGBtoString } from '../../../../partition_chart/layout/utils/color_library_wrappers';
import { MIN_STROKE_WIDTH } from './line';
import { renderMultiLine } from './line';

/** @internal */
export function renderLinePaths(
Expand All @@ -37,27 +37,21 @@ export function renderLinePaths(
if (clippedRanges.length > 0) {
withClipRanges(context, clippedRanges, clippings, false, (ctx) => {
ctx.translate(transform.x, transform.y);
linePaths.forEach((path) => {
renderPathStroke(ctx, path, stroke);
});
renderMultiLine(ctx, linePaths, stroke);
});
if (hideClippedRanges) {
return;
}
withClipRanges(context, clippedRanges, clippings, true, (ctx) => {
ctx.translate(transform.x, transform.y);
linePaths.forEach((path) => {
renderPathStroke(ctx, path, { ...stroke, dash: [5, 5] });
});
renderMultiLine(ctx, linePaths, { ...stroke, dash: [5, 5] });
});
return;
}

withContext(context, (ctx) => {
ctx.translate(transform.x, transform.y);
linePaths.forEach((path) => {
renderPathStroke(ctx, path, stroke);
});
renderMultiLine(ctx, linePaths, stroke);
});
}

Expand Down Expand Up @@ -96,21 +90,6 @@ export function renderAreaPath(
});
}

function renderPathStroke(ctx: CanvasRenderingContext2D, path: string, stroke: Stroke) {
if (stroke.width < MIN_STROKE_WIDTH) {
return;
}
const path2d = new Path2D(path);

ctx.strokeStyle = RGBtoString(stroke.color);
ctx.lineWidth = stroke.width;
if (stroke.dash) {
ctx.setLineDash(stroke.dash);
}
ctx.beginPath();
ctx.stroke(path2d);
}

function renderPathFill(ctx: CanvasRenderingContext2D, path: string, fill: Fill) {
const path2d = new Path2D(path);
ctx.fillStyle = RGBtoString(fill.color);
Expand Down

0 comments on commit 9a6771c

Please sign in to comment.