feat: Custom point renderer

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

@@ -15,7 +15,7 @@ import { Circle, Fill, Stroke } from '../../../../geoms/types';
 import { Rotation } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { PointGeometry } from '../../../../utils/geometry';
-import { GeometryStateStyle } from '../../../../utils/themes/theme';
+import { GeometryStateStyle, PointShape } from '../../../../utils/themes/theme';
 
 /**
  * Renders points from single series
@@ -33,6 +33,9 @@ export function renderPoints(ctx: CanvasRenderingContext2D, points: PointGeometr
         ...style.stroke,
         color: overrideOpacity(style.stroke.color, (fillOpacity) => fillOpacity * opacity),
       };
+      if (typeof style.shape === 'function') {
+        return style.shape(ctx, coordinates);
+      }
       renderShape(ctx, style.shape, coordinates, fill, stroke);
     });
 }
@@ -61,7 +64,7 @@ export function renderPointGroup(
         color: overrideOpacity(style.stroke.color, (fillOpacity) => fillOpacity * opacity),
       };
       const coordinates: Circle = { x: x + transform.x, y, radius };
-      const renderer = () => renderShape(ctx, style.shape, coordinates, fill, stroke);
+      const renderer = () => renderShape(ctx, style.shape as PointShape, coordinates, fill, stroke);
       const clippings = { area: getPanelClipping(panel, rotation), shouldClip };
       withPanelTransform(ctx, panel, rotation, renderingArea, renderer, clippings);
     });

packages/charts/src/chart_types/xy_chart/renderer/dom/highlighter.tsx

@@ -19,7 +19,7 @@ import { getColorFromVariant, Rotation } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { isPointGeometry, IndexedGeometry, PointGeometry } from '../../../../utils/geometry';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
-import { HighlighterStyle } from '../../../../utils/themes/theme';
+import { HighlighterStyle, PointShape } from '../../../../utils/themes/theme';
 import { computeChartDimensionsSelector } from '../../state/selectors/compute_chart_dimensions';
 import { computeChartTransformSelector } from '../../state/selectors/compute_chart_transform';
 import { getHighlightedGeomsSelector } from '../../state/selectors/get_tooltip_values_highlighted_geoms';
@@ -46,7 +46,7 @@ function getTransformForPanel(panel: Dimensions, rotation: Rotation, { left, top
 
 function renderPath(geom: PointGeometry, radius: number) {
   // keep the highlighter radius to a minimum
-  const [shapeFn, rotate] = ShapeRendererFn[geom.style.shape];
+  const [shapeFn, rotate] = ShapeRendererFn[geom.style.shape as PointShape];
   return {
     d: shapeFn(radius),
     rotate,
@@ -75,8 +75,10 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
           const x = geom.x + geom.transform.x;
           const y = geom.y + geom.transform.y;
           const geomTransform = getTransformForPanel(panel, chartRotation, chartDimensions);
-
           if (isPointGeometry(geom)) {
+            if (typeof geom.style.shape === 'function') {
+              return;
+            }
             // using the stroke because the fill is always white on points
             const fillColor = getColorFromVariant(RGBATupleToString(geom.style.stroke.color), style.point.fill);
             const strokeColor = getColorFromVariant(RGBATupleToString(geom.style.stroke.color), style.point.stroke);

packages/charts/src/utils/geometry.ts

@@ -14,6 +14,7 @@ import { XYChartSeriesIdentifier } from '../chart_types/xy_chart/utils/series';
 import { LabelOverflowConstraint } from '../chart_types/xy_chart/utils/specs';
 import { Color } from '../common/colors';
 import { Fill, Stroke } from '../geoms/types';
+import { Coordinate } from '../common/geometry';
 
 /**
  * The accessor type
@@ -70,7 +71,7 @@ export interface PointGeometry {
 export interface PointGeometryStyle {
   fill: Fill;
   stroke: Stroke;
-  shape: PointShape;
+  shape: PointShape | ((ctx: CanvasRenderingContext2D, coordinates: { x: number; y: number }) => void);
 }
 
 /** @internal */

storybook/stories/line/16_custom_point_shapes.story.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { boolean } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  Axis,
+  Chart,
+  LineSeries,
+  niceTimeFormatByDay,
+  Position,
+  ScaleType,
+  Settings,
+  timeFormatter,
+} from '@elastic/charts';
+import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
+
+import { ChartsStory } from '../../types';
+import { useBaseTheme } from '../../use_base_theme';
+import { getColorPicker } from '../utils/components/get_color_picker';
+
+const dateFormatter = timeFormatter(niceTimeFormatByDay(1));
+const data = KIBANA_METRICS.metrics.kibana_os_load.v1.data.slice(10, 150);
+
+export const Example: ChartsStory = (_, { title, description }) => {
+  const showColorPicker = boolean('Show color picker', false);
+
+  return (
+    <Chart title={title} description={description}>
+      <Settings
+        showLegend
+        showLegendExtra
+        legendPosition={Position.Right}
+        baseTheme={useBaseTheme()}
+        legendColorPicker={showColorPicker ? getColorPicker('leftCenter') : undefined}
+      />
+      <Axis id="bottom" position={Position.Bottom} showOverlappingTicks tickFormat={dateFormatter} />
+      <Axis
+        id="left"
+        title={KIBANA_METRICS.metrics.kibana_os_load.v1.metric.title}
+        position={Position.Left}
+        tickFormat={(d) => `${Number(d).toFixed(0)}%`}
+      />
+      <LineSeries
+        id="test"
+        xScaleType={ScaleType.Time}
+        yScaleType={ScaleType.Linear}
+        xAccessor={0}
+        yAccessors={[1]}
+        color="lightgray" // never overridden
+        pointStyleAccessor={(datum) => {
+          return {
+            shape: (ctx, coordinates) => {
+              ctx.beginPath();
+              ctx.ellipse(coordinates.x, coordinates.y, 5, 5, Math.PI / 4, 0, 2 * Math.PI);
+              ctx.fill();
+              ctx.fillText(Math.floor(datum.y1), coordinates.x - 5, coordinates.y - 10);
+            },
+            visible: true;
+          };
+        }}
+        data={data.map(([x, y], i) => [x, y + 60, i])}
+      />
+    </Chart>
+  );
+};

storybook/stories/line/line.stories.tsx

@@ -25,3 +25,4 @@ export { Example as testPathOrdering } from './10_test_path_ordering.story';
 export { Example as lineWithMarkAccessor } from './13_line_mark_accessor.story';
 export { Example as pointShapes } from './14_point_shapes.story';
 export { Example as testNegativePoints } from './15_test_negative_points.story';
+export { Example as customPointShapes } from './16_custom_point_shapes.story';