fix: option to disable the isolated point styles on line and area cha…

…rts (#2472)
elastic · Jun 24, 2024 · ae16815 · ae16815
1 parent 040c354
commit ae16815
Show file tree

Hide file tree

Showing 11 changed files with 31 additions and 10 deletions.
diff --git a/...ies/isolated-point-styles/should-disable-isolated-point-styles-chrome-linux.png b/...ies/isolated-point-styles/should-disable-isolated-point-styles-chrome-linux.png
diff --git a/e2e/tests/test_cases_stories.test.ts b/e2e/tests/test_cases_stories.test.ts
@@ -148,6 +148,12 @@ test.describe('Test cases stories', () => {
   });
 
   test.describe('Isolated point styles', () => {
+    test('should disable isolated point styles', async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        'http://localhost:9001/?path=/story/test-cases--point-style-overrides&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-disable isolated point styles=true&knob-series type=line&knob-point.stroke - theme level=red&knob-isolatedPoint.stroke - theme level=green&knob-use series overrides=&knob-point.stroke - series level=blue&knob-use series iso overrides=&knob-isolatedPoint.stroke - series level=orange&knob-use point style overrides=&knob-stroke - pointStyleAccessor=black',
+      );
+    });
+
     test('should override theme point and iso point styles with series styles', async ({ page }) => {
       await common.expectChartAtUrlToMatchScreenshot(page)(
         'http://localhost:9001/?path=/story/test-cases--point-style-overrides&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-isolatedPoint.stroke - series level=orange&knob-isolatedPoint.stroke - theme level=green&knob-point.stroke - series level=blue&knob-point.stroke - theme level=red&knob-series type=line&knob-stroke - pointStyleAccessor=black&knob-use point style overrides=false&knob-use series iso overrides=false&knob-use series overrides=true',

diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -206,7 +206,9 @@ export interface AreaSeriesStyle {
         area: AreaFitStyle;
     };
     // (undocumented)
-    isolatedPoint: PointStyle;
+    isolatedPoint: {
+        enabled: boolean;
+    } & PointStyle;
     // (undocumented)
     line: LineStyle;
     // (undocumented)
@@ -2000,7 +2002,9 @@ export interface LineSeriesStyle {
         line: LineFitStyle;
     };
     // (undocumented)
-    isolatedPoint: PointStyle;
+    isolatedPoint: {
+        enabled: boolean;
+    } & PointStyle;
     // (undocumented)
     line: LineStyle;
     // (undocumented)

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/area.ts b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
@@ -82,7 +82,7 @@ export function renderArea(
     isBandedSpec,
     markSizeOptions,
     false,
-    true,
+    style.isolatedPoint.enabled,
     pointStyleAccessor,
   );
 

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/line.ts b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
@@ -31,7 +31,7 @@ export function renderLine(
   curve: CurveType,
   hasY0Accessors: boolean,
   xScaleOffset: number,
-  seriesStyle: LineSeriesStyle,
+  style: LineSeriesStyle,
   markSizeOptions: MarkSizeOptions,
   hasFit: boolean,
   pointStyleAccessor?: PointStyleAccessor,
@@ -56,12 +56,12 @@ export function renderLine(
     yScale,
     panel,
     color,
-    seriesStyle.point,
-    seriesStyle.isolatedPoint,
+    style.point,
+    style.isolatedPoint,
     hasY0Accessors,
     markSizeOptions,
     false,
-    true,
+    style.isolatedPoint.enabled,
     pointStyleAccessor,
   );
 
@@ -77,7 +77,7 @@ export function renderLine(
       y: 0,
     },
     seriesIdentifier: getSeriesIdentifierFromDataSeries(dataSeries),
-    style: seriesStyle,
+    style,
     clippedRanges,
     shouldClip: hasFit,
   };

diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts
@@ -35,6 +35,7 @@ export const DARK_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,
@@ -79,6 +80,7 @@ export const DARK_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,

diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts
@@ -44,6 +44,7 @@ export const LEGACY_DARK_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,
@@ -88,6 +89,7 @@ export const LEGACY_DARK_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,

diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts
@@ -44,6 +44,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,
@@ -88,6 +89,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,

diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts
@@ -35,6 +35,7 @@ export const LIGHT_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,
@@ -79,6 +80,7 @@ export const LIGHT_THEME: Theme = {
       opacity: 1,
     },
     isolatedPoint: {
+      enabled: true,
       visible: true,
       stroke: ColorVariant.Series,
       strokeWidth: 1,

diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts
@@ -735,7 +735,7 @@ export interface BubbleSeriesStyle {
 export interface LineSeriesStyle {
   line: LineStyle;
   point: PointStyle;
-  isolatedPoint: PointStyle;
+  isolatedPoint: { enabled: boolean } & PointStyle;
   fit: {
     line: LineFitStyle;
   };
@@ -746,7 +746,7 @@ export interface AreaSeriesStyle {
   area: AreaStyle;
   line: LineStyle;
   point: PointStyle;
-  isolatedPoint: PointStyle;
+  isolatedPoint: { enabled: boolean } & PointStyle;
   fit: {
     line: LineFitStyle;
     area: AreaFitStyle;

diff --git a/storybook/stories/test_cases/13_point_style_overrides.story.tsx b/storybook/stories/test_cases/13_point_style_overrides.story.tsx
@@ -26,6 +26,7 @@ const defaultlineStyles = {
 };
 
 export const Example: ChartsStory = (_, { title, description }) => {
+  const enablePointStyles = !boolean('disable isolated point styles', false);
   const [Series] = customKnobs.enum.xySeries('series type', 'line', { exclude: ['bar', 'bubble'] });
   const themeLevelStroke = color('point.stroke - theme level', 'red');
   const themeLevelStrokeIso = color('isolatedPoint.stroke - theme level', 'green');
@@ -51,6 +52,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
             isolatedPoint: {
               stroke: themeLevelStrokeIso,
               ...defaultPointStyles,
+              enabled: enablePointStyles,
             },
           },
           lineSeriesStyle: {
@@ -63,6 +65,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
             isolatedPoint: {
               stroke: themeLevelStrokeIso,
               ...defaultPointStyles,
+              enabled: enablePointStyles,
             },
           },
         }}