fix(xy_chart): improve line joins rendering (opensearch-project#920)

This commit changes the `lineJoin` property used when rendering lines to `round`.
This will avoid spikes with very acute angles between line segments.

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/primitives/line.ts

@@ -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);
@@ -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';
+}

packages/osd-charts/src/chart_types/xy_chart/renderer/canvas/primitives/path.ts

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