style(theme): change point and isolated point style and visibility

packages/charts/api/charts.api.md

@@ -194,23 +194,19 @@ export type AreaSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'ar
     fit?: Exclude<Fit, 'explicit'> | FitConfig;
 };
 
-// @public (undocumented)
+// @public
 export interface AreaSeriesStyle {
-    // (undocumented)
     area: AreaStyle;
-    // (undocumented)
     fit: {
         line: LineFitStyle;
         area: AreaFitStyle;
     };
-    // (undocumented)
     isolatedPoint: {
         enabled: boolean;
-    } & PointStyle;
-    // (undocumented)
+    } & Omit<PointStyle, 'radius'>;
     line: LineStyle;
-    // (undocumented)
     point: PointStyle;
+    pointVisibilityMinDistance: Pixels;
 }
 
 // @public (undocumented)
@@ -1993,20 +1989,17 @@ export type LineSeriesSpec<D extends BaseDatum = Datum> = BasicSeriesSpec<D, 'li
     fit?: Exclude<Fit, 'explicit'> | FitConfig;
 };
 
-// @public (undocumented)
+// @public
 export interface LineSeriesStyle {
-    // (undocumented)
     fit: {
         line: LineFitStyle;
     };
-    // (undocumented)
     isolatedPoint: {
         enabled: boolean;
-    } & PointStyle;
-    // (undocumented)
+    } & Omit<PointStyle, 'radius'>;
     line: LineStyle;
-    // (undocumented)
     point: PointStyle;
+    pointVisibilityMinDistance: Pixels;
 }
 
 // @public (undocumented)
@@ -2444,14 +2437,14 @@ export interface PointStyle {
     shape?: PointShape;
     stroke?: Color | ColorVariant;
     strokeWidth: number;
-    visible: boolean;
+    visible: 'never' | 'always' | 'auto';
 }
 
 // @public
 export type PointStyleAccessor = (datum: DataSeriesDatum, seriesIdentifier: XYChartSeriesIdentifier, isolatedPoint: boolean) => PointStyleOverride;
 
 // @public (undocumented)
-export type PointStyleOverride = RecursivePartial<PointStyle> | Color | null;
+export type PointStyleOverride = RecursivePartial<Omit<PointStyle, 'visible'>> | Color | null;
 
 // @public (undocumented)
 export const Position: Readonly<{

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

@@ -35,44 +35,48 @@ export function renderAreas(
 ) {
   withContext(ctx, () => {
     // first render all the areas and lines
-    areas.forEach(({ panel, value: area }) => {
-      const { style } = area;
+    areas.forEach(({ panel, value: geom }) => {
       const clippings = getPanelClipping(panel, rotation);
-      if (style.area.visible) {
+      if (geom.style.area.visible) {
         withPanelTransform(
           ctx,
           panel,
           rotation,
           renderingArea,
-          () => renderArea(ctx, imgCanvas, area, sharedStyle, clippings, highlightedLegendItem),
+          () => renderArea(ctx, imgCanvas, geom, sharedStyle, clippings, highlightedLegendItem),
           { area: clippings, shouldClip: true },
         );
       }
-      if (style.line.visible) {
+      if (geom.style.line.visible) {
         withPanelTransform(
           ctx,
           panel,
           rotation,
           renderingArea,
-          () => renderAreaLines(ctx, area, sharedStyle, clippings, highlightedLegendItem),
+          () => renderAreaLines(ctx, geom, sharedStyle, clippings, highlightedLegendItem),
           { area: clippings, shouldClip: true },
         );
       }
     });
     // now we can render the visible points on top of each the areas/lines
-    areas.forEach(({ panel, value: area }) => {
-      const { style, seriesIdentifier, points } = area;
-      const visiblePoints = style.point.visible ? points : points.filter(({ isolated }) => isolated);
-      if (visiblePoints.length === 0) {
-        return;
-      }
-      const geometryStateStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
+    areas.forEach(({ panel, value: { style, seriesIdentifier, points, hasFit, minPointDistance } }) => {
+      const geometryStyle = getGeometryStateStyle(seriesIdentifier, sharedStyle, highlightedLegendItem);
       withPanelTransform(
         ctx,
         panel,
         rotation,
         renderingArea,
-        () => renderPoints(ctx, visiblePoints, geometryStateStyle),
+        () =>
+          renderPoints(
+            ctx,
+            points,
+            geometryStyle,
+            style.point,
+            style.line.strokeWidth,
+            minPointDistance,
+            style.pointVisibilityMinDistance,
+            hasFit,
+          ),
         { area: getPanelClipping(panel, rotation), shouldClip: points[0]?.value.mark !== null },
       );
     });

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

@@ -34,9 +34,8 @@ export function renderLines(
 ) {
   withContext(ctx, () => {
     lines.forEach(({ panel, value: line }) => {
-      const { style, points } = line;
       const clippings = getPanelClipping(panel, rotation);
-      if (style.line.visible) {
+      if (line.style.line.visible) {
         withPanelTransform(
           ctx,
           panel,
@@ -46,18 +45,23 @@ export function renderLines(
           { area: clippings, shouldClip: true },
         );
       }
-
-      const visiblePoints = style.point.visible ? points : points.filter(({ isolated }) => isolated);
-      if (visiblePoints.length === 0) {
-        return;
-      }
       const geometryStyle = getGeometryStateStyle(line.seriesIdentifier, sharedStyle, highlightedLegendItem);
       withPanelTransform(
         ctx,
         panel,
         rotation,
         renderingArea,
-        () => renderPoints(ctx, visiblePoints, geometryStyle),
+        () =>
+          renderPoints(
+            ctx,
+            line.points,
+            geometryStyle,
+            line.style.point,
+            line.style.line.strokeWidth,
+            line.minPointDistance,
+            line.style.pointVisibilityMinDistance,
+            line.hasFit,
+          ),
         // TODO: add padding over clipping
         { area: clippings, shouldClip: line.points[0]?.value.mark !== null },
       );

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

@@ -15,26 +15,46 @@ 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, PointStyle } from '../../../../utils/themes/theme';
 
 /**
  * Renders points from single series
  *
  * @internal
  */
-export function renderPoints(ctx: CanvasRenderingContext2D, points: PointGeometry[], { opacity }: GeometryStateStyle) {
-  points
-    .slice()
-    .sort(({ radius: a }, { radius: b }) => b - a)
-    .forEach(({ x, y, radius, transform, style }) => {
-      const coordinates = { x: x + transform.x, y: y + transform.y, radius };
-      const fill = { color: overrideOpacity(style.fill.color, (fillOpacity) => fillOpacity * opacity) };
-      const stroke = {
-        ...style.stroke,
-        color: overrideOpacity(style.stroke.color, (fillOpacity) => fillOpacity * opacity),
-      };
-      renderShape(ctx, style.shape, coordinates, fill, stroke);
-    });
+export function renderPoints(
+  ctx: CanvasRenderingContext2D,
+  points: PointGeometry[],
+  { opacity }: GeometryStateStyle,
+  pointStyle: PointStyle,
+  lineStrokeWidth: number,
+  minDistanceBetweenPoints: number,
+  minDistanceToShowPoints: number,
+  hasConnectingLine: boolean,
+) {
+  const isHiddenOnAuto = pointStyle.visible === 'auto' && minDistanceBetweenPoints < minDistanceToShowPoints;
+  const hideDataPoints = pointStyle.visible === 'never' || isHiddenOnAuto;
+  const hideIsolatedDataPoints = hasConnectingLine && hideDataPoints;
+
+  const useIsolatedPointRadius = hideDataPoints && !hasConnectingLine;
+
+  points.forEach(({ x, y, radius, transform, style, isolated }) => {
+    if ((isolated && hideIsolatedDataPoints) || (!isolated && hideDataPoints)) {
+      return;
+    }
+
+    const coordinates = {
+      x: x + transform.x,
+      y: y + transform.y,
+      radius: isolated ? (useIsolatedPointRadius ? lineStrokeWidth + 0.5 : pointStyle.radius) : radius,
+    };
+    const fill = { color: overrideOpacity(style.fill.color, (fillOpacity) => fillOpacity * opacity) };
+    const stroke = {
+      ...style.stroke,
+      color: overrideOpacity(style.stroke.color, (fillOpacity) => fillOpacity * opacity),
+    };
+    renderShape(ctx, style.shape, coordinates, fill, stroke);
+  });
 }
 
 /**

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

@@ -87,7 +87,7 @@ class HighlighterComponent extends React.Component<HighlighterProps> {
 
           if (isPointGeometry(geom)) {
             // using the stroke because the fill is always white on points
-            const fillColor = getColorFromVariant(RGBATupleToString(geom.style.stroke.color), style.point.fill);
+            const fillColor = getColorFromVariant(RGBATupleToString(geom.style.fill.color), style.point.fill);
             const strokeColor = getColorFromVariant(RGBATupleToString(geom.style.stroke.color), style.point.stroke);
 
             const radius = Math.max(geom.radius, style.point.radius);