fix(styles): isolated point style overrides

e2e/helpers.ts

@@ -137,9 +137,13 @@ export const eachTheme = {
   describe(
     fn: (params: Omit<EachThemeCbParams, 'page'>) => any,
     titleFn: (theme: string) => string = (t) => `theme - ${t}`,
+    config?: Parameters<typeof test.describe.configure>[0],
   ) {
     themeIds.forEach((theme) => {
-      test.describe(titleFn(theme), () => fn({ theme, urlParam: `globals=theme:${theme}` }));
+      test.describe(titleFn(theme), () => {
+        if (config) test.describe.configure(config);
+        fn({ theme, urlParam: `globals=theme:${theme}` });
+      });
     });
   },
 };
@@ -166,14 +170,17 @@ export const pwEach = {
   /**
    * Similar to jest's `describe.each` for playwright
    */
-  describe<T>(values: T[]) {
+  describe<T>(values: T[], config?: Parameters<typeof test.describe.configure>[0]) {
     const titles = new Set();
     return (titleFn: (value: T) => string, fn: (value: T) => any) => {
       values.forEach((value) => {
         const title = titleFn(value);
         if (titles.has(title)) throw new Error('Each describe within `each.describe` block must have a unique title.');
         titles.add(title);
-        test.describe(title, () => fn(value));
+        test.describe(title, () => {
+          if (config) test.describe.configure(config);
+          fn(value);
+        });
       });
     };
   },

e2e/package.json

@@ -12,7 +12,8 @@
     "playwright": "playwright"
   },
   "dependencies": {
-    "@playwright/test": "^1.23.0",
+    "@playwright/test": "^1.28.0",
+    "@types/node": "^16.18.1",
     "change-case": "^4.1.2",
     "expect-playwright": "^0.8.0",
     "playwright-merge-html-reports": "^0.2.3",

e2e/playwright.config.ts

@@ -38,8 +38,7 @@ const config: PlaywrightTestConfig = {
       maxDiffPixels: 0,
     },
   },
-  // TODO limit this to only flaky tests. Watch https://github.com/microsoft/playwright/issues/15657
-  retries: isCI ? 1 : 0,
+  retries: 0,
   forbidOnly: isCI,
   timeout: 10 * 1000,
   preserveOutput: 'failures-only',

e2e/tests/metric_stories.test.ts

@@ -82,6 +82,7 @@ test.describe('Metric', () => {
           });
         },
         (t) => `${t} theme`,
+        { retries: 1 },
       );
     },
   );

e2e/tests/mixed_stories.test.ts

@@ -15,6 +15,7 @@ import { common } from '../page_objects';
 test.describe('Mixed series stories', () => {
   test.describe('Fitting functions', () => {
     test.describe('Area charts - no endValue', () => {
+      test.describe.configure({ retries: 1 });
       Object.values(Fit).forEach((fitType) => {
         test(`should display correct fit for type - ${fitType}`, async ({ page }) => {
           await common.expectChartAtUrlToMatchScreenshot(page)(

e2e/yarn.lock

@@ -27,13 +27,12 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@playwright/test@^1.23.0":
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.23.0.tgz#5d07ace37e1598a4a1a785b07856620b4e26fc43"
-  integrity sha512-RPWI8AHBVBiDyfTuxi1BhOaY3yaVy3S5ZsGKkSGGeWpZtSgN4SerInCYvgh9+EunIAK4RJQo+bzupbAn5pVqHQ==
+"@playwright/test@^1.28.0":
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.1.tgz#9e66322d97b1d74b9f8718bacab15080f24cde65"
+  integrity sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==
   dependencies:
-    "@types/node" "*"
-    playwright-core "1.23.0"
+    playwright "1.40.1"
 
 "@tsconfig/node10@^1.0.7":
   version "1.0.9"
@@ -55,10 +54,10 @@
   resolved "https://registry.yarnpkg.com/@tsconfig/node16/-/node16-1.0.3.tgz#472eaab5f15c1ffdd7f8628bd4c4f753995ec79e"
   integrity sha512-yOlFc+7UtL/89t2ZhjPvvB/DeAr3r+Dq58IgzsFkOAvVC6NMJXmCGjbptdXdR9qsX7pKcTL+s87FtYREi2dEEQ==
 
-"@types/node@*":
-  version "17.0.14"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.14.tgz#33b9b94f789a8fedd30a68efdbca4dbb06b61f20"
-  integrity sha512-SbjLmERksKOGzWzPNuW7fJM7fk3YXVTFiZWB/Hs99gwhk+/dnrQRPBQjPW9aO+fi1tAffi9PrwFvsmOKmDTyng==
+"@types/node@^16.18.1":
+  version "16.18.70"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.70.tgz#d4c819be1e9f8b69a794d6f2fd929d9ff76f6d4b"
+  integrity sha512-8eIk20G5VVVQNZNouHjLA2b8utE2NvGybLjMaF4lyhA9uhGwnmXF8o+icdXKGSQSNANJewXva/sFUoZLwAaYAg==
 
 acorn-walk@^8.1.1:
   version "8.2.0"
@@ -152,6 +151,11 @@ expect-playwright@^0.8.0:
   resolved "https://registry.yarnpkg.com/expect-playwright/-/expect-playwright-0.8.0.tgz#6d4ebe0bdbdd3c1693d880d97153b96a129ae4e8"
   integrity sha512-+kn8561vHAY+dt+0gMqqj1oY+g5xWrsuGMk4QGxotT2WS545nVqqjs37z6hrYfIuucwqthzwJfCJUEYqixyljg==
 
+fsevents@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 header-case@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/header-case/-/header-case-2.0.4.tgz#5a42e63b55177349cf405beb8d775acabb92c063"
@@ -241,10 +245,10 @@ path-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
-playwright-core@1.23.0:
-  version "1.23.0"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.23.0.tgz#51e24121b3a5bbe759d79738d8eff7a63156293c"
-  integrity sha512-Zzhyr5RZGoJ1ek2sgfJCt2076kdOg8hnNwFBqAYeLySiutXyxSQk93vZ5gbnFiWV1sHvueCcwla9n35acUTxtA==
+playwright-core@1.40.1:
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.1.tgz#442d15e86866a87d90d07af528e0afabe4c75c05"
+  integrity sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==
 
 playwright-merge-html-reports@^0.2.3:
   version "0.2.3"
@@ -254,6 +258,15 @@ playwright-merge-html-reports@^0.2.3:
     jszip "^3.7.1"
     yazl "^2.5.1"
 
+playwright@1.40.1:
+  version "1.40.1"
+  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.1.tgz#a11bf8dca15be5a194851dbbf3df235b9f53d7ae"
+  integrity sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==
+  dependencies:
+    playwright-core "1.40.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"

packages/charts/src/chart_types/xy_chart/rendering/line_area_style.ts

@@ -0,0 +1,64 @@
+/*
+ * 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 { RecursivePartial, mergePartial } from '../../../utils/common';
+import { AreaSeriesStyle, LineSeriesStyle } from '../../../utils/themes/theme';
+
+/** @internal */
+export function getLineSeriesStyles(
+  baseStyle: LineSeriesStyle,
+  seriesStyle?: RecursivePartial<LineSeriesStyle>,
+): LineSeriesStyle {
+  if (!seriesStyle) return baseStyle;
+
+  const isolatedPointStyleOverrides = mergePartial<LineSeriesStyle['isolatedPoint']>(
+    baseStyle.isolatedPoint,
+    seriesStyle.isolatedPoint,
+    undefined,
+    seriesStyle.point ? [seriesStyle.point] : [],
+  );
+
+  return mergePartial(
+    baseStyle,
+    {
+      isolatedPoint: {
+        ...isolatedPointStyleOverrides,
+        visible: seriesStyle?.isolatedPoint?.visible ?? baseStyle.isolatedPoint.visible,
+      },
+    },
+    undefined,
+    [seriesStyle],
+  );
+}
+
+/** @internal */
+export function getAreaSeriesStyles(
+  baseStyle: AreaSeriesStyle,
+  seriesStyle?: RecursivePartial<AreaSeriesStyle>,
+): AreaSeriesStyle {
+  if (!seriesStyle) return baseStyle;
+
+  const isolatedPointStyleOverrides = mergePartial<AreaSeriesStyle['isolatedPoint']>(
+    baseStyle.isolatedPoint,
+    seriesStyle.isolatedPoint,
+    undefined,
+    seriesStyle.point ? [seriesStyle.point] : [],
+  );
+
+  return mergePartial(
+    baseStyle,
+    {
+      isolatedPoint: {
+        ...isolatedPointStyleOverrides,
+        visible: seriesStyle?.isolatedPoint?.visible ?? baseStyle.isolatedPoint.visible,
+      },
+    },
+    undefined,
+    [seriesStyle],
+  );
+}

packages/charts/src/chart_types/xy_chart/state/utils/utils.ts

@@ -37,6 +37,7 @@ import { renderArea } from '../../rendering/area';
 import { renderBars } from '../../rendering/bars';
 import { renderBubble } from '../../rendering/bubble';
 import { renderLine } from '../../rendering/line';
+import { getAreaSeriesStyles, getLineSeriesStyles } from '../../rendering/line_area_style';
 import { defaultXYSeriesSort } from '../../utils/default_series_sort_fn';
 import { fillSeries } from '../../utils/fill_series';
 import { groupBy } from '../../utils/group_data_series';
@@ -432,10 +433,7 @@ function renderGeometries(
       geometriesCounts.bubbles += 1;
     } else if (isLineSeriesSpec(spec)) {
       const lineShift = barIndexOrder && barIndexOrder.length > 0 ? barIndexOrder.length : 1;
-      const lineSeriesStyle = spec.lineSeriesStyle
-        ? mergePartial(chartTheme.lineSeriesStyle, spec.lineSeriesStyle)
-        : chartTheme.lineSeriesStyle;
-
+      const lineSeriesStyle = getLineSeriesStyles(chartTheme.lineSeriesStyle, spec.lineSeriesStyle);
       const xScaleOffset = computeXScaleOffset(xScale, enableHistogramMode, spec.histogramModeAlignment);
 
       const renderedLines = renderLine(
@@ -467,9 +465,7 @@ function renderGeometries(
       geometriesCounts.lines += 1;
     } else if (isAreaSeriesSpec(spec)) {
       const areaShift = barIndexOrder && barIndexOrder.length > 0 ? barIndexOrder.length : 1;
-      const areaSeriesStyle = spec.areaSeriesStyle
-        ? mergePartial(chartTheme.areaSeriesStyle, spec.areaSeriesStyle)
-        : chartTheme.areaSeriesStyle;
+      const areaSeriesStyle = getAreaSeriesStyles(chartTheme.areaSeriesStyle, spec.areaSeriesStyle);
       const xScaleOffset = computeXScaleOffset(xScale, enableHistogramMode, spec.histogramModeAlignment);
       const renderedAreas = renderArea(
         // move the point on half of the bandwidth if we have mixed bars/lines

storybook/stories/line/12_isolated_data_points.story.tsx

@@ -9,7 +9,7 @@
 import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings, Fit, AreaSeries } from '@elastic/charts';
+import { Axis, Chart, CurveType, Position, ScaleType, Settings, Fit } from '@elastic/charts';
 import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana';
 
 import { ChartsStory } from '../../types';
@@ -18,29 +18,42 @@ import { customKnobs } from '../utils/knobs';
 
 export const Example: ChartsStory = (_, { title, description }) => {
   const fitEnabled = boolean('enable fit function', false);
-  const isArea = boolean('switch to area', false);
+  const [Series] = customKnobs.enum.xySeries('series type', 'line', { exclude: ['bar', 'bubble'] });
   const maxDataPoints = number('max data points', 60, {
     range: true,
     min: 0,
     max: KIBANA_METRICS.metrics.kibana_os_load.v1.data.length,
     step: 1,
   });
+  const pointRadius = number('default point radius', 0, {
+    range: true,
+    min: 0,
+    max: 10,
+    step: 1,
+  });
   const radius = number('isolated point radius', 2, {
     range: true,
     min: 0,
-    max: 5,
-    step: 0.01,
+    max: 10,
+    step: 1,
+  });
+  const overrideRadius = number('override point radius', 0, {
+    range: true,
+    min: 0,
+    max: 10,
+    step: 1,
   });
+  const overridePointRadius = boolean('override radius for isolated points', false);
 
-  const LineOrAreaSeries = isArea ? AreaSeries : LineSeries;
   return (
     <Chart title={title} description={description}>
       <Settings
         legendPosition={Position.Right}
         theme={{
           areaSeriesStyle: {
             point: {
-              visible: false,
+              visible: true,
+              radius: pointRadius,
             },
             isolatedPoint: {
               radius,
@@ -49,7 +62,8 @@ export const Example: ChartsStory = (_, { title, description }) => {
           },
           lineSeriesStyle: {
             point: {
-              visible: false,
+              visible: true,
+              radius: pointRadius,
             },
             isolatedPoint: {
               radius,
@@ -77,13 +91,43 @@ export const Example: ChartsStory = (_, { title, description }) => {
       />
       <Axis id="y" position={Position.Left} ticks={5} />
 
-      <LineOrAreaSeries
+      <Series
         id="Count of records"
         xScaleType={ScaleType.Time}
         yScaleType={ScaleType.Linear}
         xAccessor={0}
         yAccessors={[1]}
         splitSeriesAccessors={[2]}
+        areaSeriesStyle={
+          overrideRadius > 0
+            ? {
+                point: {
+                  visible: true,
+                  radius: overrideRadius,
+                },
+                isolatedPoint: overridePointRadius
+                  ? {
+                      radius,
+                    }
+                  : {},
+              }
+            : {}
+        }
+        lineSeriesStyle={
+          overrideRadius > 0
+            ? {
+                point: {
+                  visible: true,
+                  radius: overrideRadius,
+                },
+                isolatedPoint: overridePointRadius
+                  ? {
+                      radius,
+                    }
+                  : {},
+              }
+            : {}
+        }
         data={[
           ...KIBANA_METRICS.metrics.kibana_os_load.v1.data.slice(0, maxDataPoints).map((d, i) => {
             if ([1, 10, 12, 20, 22, 24, 28].includes(i)) {