feat(xy): support multiple point shapes on line, area and bubble char…

…ts (#988)

This commit adds the support for rendering different shapes on line, area and bubble charts points

api/charts.api.md

@@ -1361,13 +1361,29 @@ export interface PointerOverEvent extends BasePointerEvent {
 // @public (undocumented)
 export type PointerUpdateListener = (event: PointerEvent) => void;
 
+// Warning: (ae-missing-release-tag) "PointShape" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public (undocumented)
+export const PointShape: Readonly<{
+    Circle: "circle";
+    Square: "square";
+    Diamond: "diamond";
+    Plus: "plus";
+    X: "x";
+    Triangle: "triangle";
+}>;
+
+// @public (undocumented)
+export type PointShape = $Values<typeof PointShape>;
+
 // Warning: (ae-missing-release-tag) "PointStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
 export interface PointStyle {
     fill?: Color | ColorVariant;
     opacity: number;
     radius: number;
+    shape?: PointShape;
     stroke?: Color | ColorVariant;
     strokeWidth: number;
     visible: boolean;

src/chart_types/xy_chart/annotations/line/dimensions.test.ts

@@ -23,7 +23,7 @@ import { MockStore } from '../../../../mocks/store';
 import { ScaleType } from '../../../../scales/constants';
 import { Position } from '../../../../utils/common';
 import { AnnotationId } from '../../../../utils/ids';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/theme';
+import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/merge_utils';
 import { computeAnnotationDimensionsSelector } from '../../state/selectors/compute_annotations';
 import { AnnotationDomainTypes } from '../../utils/specs';
 import { AnnotationDimensions } from '../types';

src/chart_types/xy_chart/annotations/line/dimensions.ts

@@ -23,7 +23,7 @@ import { isContinuousScale, isBandScale } from '../../../../scales/types';
 import { isNil, Position, Rotation } from '../../../../utils/common';
 import { Dimensions, Size } from '../../../../utils/dimensions';
 import { GroupId } from '../../../../utils/ids';
-import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/theme';
+import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/merge_utils';
 import { SmallMultipleScales } from '../../state/selectors/compute_small_multiple_scales';
 import { isHorizontalRotation } from '../../state/utils/common';
 import { computeXScaleOffset } from '../../state/utils/utils';

src/chart_types/xy_chart/annotations/line/line.test.tsx

@@ -26,7 +26,7 @@ import { MockStore } from '../../../../mocks/store';
 import { ScaleType } from '../../../../scales/constants';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { Position } from '../../../../utils/common';
-import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/theme';
+import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../../utils/themes/merge_utils';
 import { computeAnnotationDimensionsSelector } from '../../state/selectors/compute_annotations';
 import { AnnotationDomainTypes } from '../../utils/specs';
 import { AnnotationLineProps } from './types';

src/chart_types/xy_chart/renderer/canvas/annotations/index.ts

@@ -20,7 +20,10 @@
 import { Rotation } from '../../../../../utils/common';
 import { Dimensions } from '../../../../../utils/dimensions';
 import { AnnotationId } from '../../../../../utils/ids';
-import { mergeWithDefaultAnnotationLine, mergeWithDefaultAnnotationRect } from '../../../../../utils/themes/theme';
+import {
+  mergeWithDefaultAnnotationLine,
+  mergeWithDefaultAnnotationRect,
+} from '../../../../../utils/themes/merge_utils';
 import { AnnotationLineProps } from '../../../annotations/line/types';
 import { AnnotationRectProps } from '../../../annotations/rect/types';
 import { AnnotationDimensions } from '../../../annotations/types';

src/chart_types/xy_chart/renderer/canvas/areas.ts

@@ -86,7 +86,7 @@ export function renderAreas(ctx: CanvasRenderingContext2D, props: AreaGeometries
         rotation,
         renderingArea,
         (ctx) => {
-          renderPoints(ctx, visiblePoints, seriesPointStyle, geometryStateStyle);
+          renderPoints(ctx, visiblePoints, geometryStateStyle);
         },
         { area: clippings, shouldClip: points[0]?.value.mark !== null },
       );

src/chart_types/xy_chart/renderer/canvas/lines.ts

@@ -65,7 +65,7 @@ export function renderLines(ctx: CanvasRenderingContext2D, props: LineGeometries
         rotation,
         renderingArea,
         (ctx) => {
-          renderPoints(ctx, visiblePoints, line.seriesPointStyle, geometryStyle);
+          renderPoints(ctx, visiblePoints, geometryStyle);
         },
         // TODO: add padding over clipping
         { area: clippings, shouldClip: line.points[0]?.value.mark !== null },

src/chart_types/xy_chart/renderer/canvas/points.ts

@@ -22,43 +22,38 @@ import { Circle, Stroke, Fill, Rect } from '../../../../geoms/types';
 import { Rotation } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { PointGeometry } from '../../../../utils/geometry';
-import { PointStyle, GeometryStateStyle } from '../../../../utils/themes/theme';
-import { renderCircle } from './primitives/arc';
-import { buildPointStyles } from './styles/point';
+import { PointStyle, GeometryStateStyle, PointShape } from '../../../../utils/themes/theme';
+import { RgbObject } from '../../../partition_chart/layout/utils/color_library_wrappers';
+import { renderShape } from './primitives/shapes';
 import { withPanelTransform } from './utils/panel_transform';
 
 /**
  * Renders points from single series
  *
  * @internal
  */
-export function renderPoints(
-  ctx: CanvasRenderingContext2D,
-  points: PointGeometry[],
-  themeStyle: PointStyle,
-  geometryStateStyle: GeometryStateStyle,
-) {
+export function renderPoints(ctx: CanvasRenderingContext2D, points: PointGeometry[], { opacity }: GeometryStateStyle) {
   points
-    .map<[Circle, Fill, Stroke]>((point) => {
-      const { x, y, color, radius: pointRadius, transform, styleOverrides } = point;
-      const { fill, stroke, radius } = buildPointStyles(
-        color,
-        themeStyle,
-        geometryStateStyle,
-        pointRadius,
-        styleOverrides,
-      );
+    .map<[Circle, Fill, Stroke, PointShape]>(({ x, y, radius, transform, style }) => {
+      const fill: Fill = {
+        color: applyOpacity(style.fill.color, opacity),
+      };
+
+      const stroke: Stroke = {
+        ...style.stroke,
+        color: applyOpacity(style.stroke.color, opacity),
+      };
 
-      const circle: Circle = {
+      const coordinates: Circle = {
         x: x + transform.x,
         y: y + transform.y,
         radius,
       };
 
-      return [circle, fill, stroke];
+      return [coordinates, fill, stroke, style.shape];
     })
     .sort(([{ radius: a }], [{ radius: b }]) => b - a)
-    .forEach((args) => renderCircle(ctx, ...args));
+    .forEach(([coordinates, fill, stroke, shape]) => renderShape(ctx, shape, coordinates, fill, stroke));
 }
 
 /**
@@ -77,44 +72,45 @@ export function renderPointGroup(
   shouldClip: boolean,
 ) {
   points
-    .map<[Circle, Fill, Stroke, Dimensions]>((point) => {
-      const {
-        x,
-        y,
-        color,
-        radius: pointRadius,
-        transform,
-        styleOverrides,
-        seriesIdentifier: { key },
-        panel,
-      } = point;
-      const { fill, stroke, radius } = buildPointStyles(
-        color,
-        themeStyles[key],
-        geometryStateStyles[key],
-        pointRadius,
-        styleOverrides,
-      );
+    .map<[Circle, Fill, Stroke, Dimensions, PointShape]>(
+      ({ x, y, radius, transform, style, seriesIdentifier: { key }, panel }) => {
+        const { opacity } = geometryStateStyles[key];
+        const fill: Fill = {
+          color: applyOpacity(style.fill.color, opacity),
+        };
 
-      const circle: Circle = {
-        x: x + transform.x,
-        y,
-        radius,
-      };
+        const stroke: Stroke = {
+          ...style.stroke,
+          color: applyOpacity(style.stroke.color, opacity),
+        };
 
-      return [circle, fill, stroke, panel];
-    })
+        const coordinates: Circle = {
+          x: x + transform.x,
+          y,
+          radius,
+        };
+
+        return [coordinates, fill, stroke, panel, style.shape];
+      },
+    )
     .sort(([{ radius: a }], [{ radius: b }]) => b - a)
-    .forEach(([circle, fill, stroke, panel]) => {
+    .forEach(([coordinates, fill, stroke, panel, shape]) => {
       withPanelTransform(
         ctx,
         panel,
         rotation,
         renderingArea,
         (ctx) => {
-          renderCircle(ctx, circle, fill, stroke);
+          renderShape(ctx, shape, coordinates, fill, stroke);
         },
         { area: clippings, shouldClip },
       );
     });
 }
+
+function applyOpacity(color: RgbObject, opacity: number): RgbObject {
+  return {
+    ...color,
+    opacity: color.opacity * opacity,
+  };
+}

src/chart_types/xy_chart/renderer/canvas/primitives/arc.ts

@@ -19,8 +19,7 @@
 
 import { Circle, Stroke, Fill, Arc } from '../../../../../geoms/types';
 import { withContext } from '../../../../../renderers/canvas';
-import { RGBtoString } from '../../../../partition_chart/layout/utils/color_library_wrappers';
-import { MIN_STROKE_WIDTH } from './line';
+import { fillAndStroke } from './utils';
 
 /** @internal */
 export function renderCircle(ctx: CanvasRenderingContext2D, circle: Circle, fill?: Fill, stroke?: Stroke) {
@@ -49,17 +48,6 @@ export function renderArc(ctx: CanvasRenderingContext2D, arc: Arc, fill?: Fill,
     ctx.translate(x, y);
     ctx.beginPath();
     ctx.arc(0, 0, radius, startAngle, endAngle, false);
-    if (fill) {
-      ctx.fillStyle = RGBtoString(fill.color);
-      ctx.fill();
-    }
-    if (stroke && stroke.width > MIN_STROKE_WIDTH) {
-      ctx.strokeStyle = RGBtoString(stroke.color);
-      ctx.lineWidth = stroke.width;
-      if (stroke.dash) {
-        ctx.setLineDash(stroke.dash);
-      }
-      ctx.stroke();
-    }
+    fillAndStroke(ctx, fill, stroke);
   });
 }

src/chart_types/xy_chart/renderer/canvas/styles/points.test.ts → src/chart_types/xy_chart/renderer/canvas/primitives/shapes.ts

@@ -16,25 +16,31 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { Circle, Fill, Stroke } from '../../../../../geoms/types';
+import { withContext } from '../../../../../renderers/canvas';
+import { PointShape } from '../../../../../utils/themes/theme';
+import { ShapeRendererFn } from '../../shapes_paths';
+import { fillAndStroke } from './utils';
 
-import { getRadius } from './point';
+/** @internal */
+export function renderShape(
+  ctx: CanvasRenderingContext2D,
+  shape: PointShape,
+  coordinates: Circle,
+  fill?: Fill,
+  stroke?: Stroke,
+) {
+  if (!stroke || !fill) {
+    return;
+  }
+  withContext(ctx, (ctx) => {
+    const [pathFn, rotation] = ShapeRendererFn[shape];
+    const { x, y, radius } = coordinates;
+    ctx.translate(x, y);
+    ctx.rotate((rotation * Math.PI) / 180);
+    ctx.beginPath();
 
-describe('point', () => {
-  describe('#getRadius', () => {
-    it('should return max of point and theme radius - theme', () => {
-      expect(getRadius(10, 20)).toBe(20);
-    });
-
-    it('should return max of point and theme radius - point', () => {
-      expect(getRadius(30, 20)).toBe(30);
-    });
-
-    it('should return override if provided - lower', () => {
-      expect(getRadius(10, 20, 5)).toBe(5);
-    });
-
-    it('should return override if provided - higher', () => {
-      expect(getRadius(10, 20, 50)).toBe(50);
-    });
+    const path = new Path2D(pathFn(radius));
+    fillAndStroke(ctx, fill, stroke, path);
   });
-});
+}

src/chart_types/xy_chart/renderer/canvas/primitives/utils.ts

@@ -0,0 +1,48 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Fill, Stroke } from '../../../../../geoms/types';
+import { RGBtoString } from '../../../../partition_chart/layout/utils/color_library_wrappers';
+import { MIN_STROKE_WIDTH } from './line';
+
+/**
+ * WARNING: This function modify directly, without saving, the context calling the fill() and/or stroke() if defined
+ * @internal
+ */
+export function fillAndStroke(ctx: CanvasRenderingContext2D, fill?: Fill, stroke?: Stroke, path?: Path2D) {
+  if (fill) {
+    ctx.fillStyle = RGBtoString(fill.color);
+    if (path) {
+      ctx.fill(path);
+    } else {
+      ctx.fill();
+    }
+  }
+  if (stroke && stroke.width > MIN_STROKE_WIDTH) {
+    ctx.strokeStyle = RGBtoString(stroke.color);
+    ctx.lineWidth = stroke.width;
+    if (stroke.dash) {
+      ctx.setLineDash(stroke.dash);
+    }
+    if (path) {
+      ctx.stroke(path);
+    } else {
+      ctx.stroke();
+    }
+  }
+}