feat(annotations): marker body with dynamic positioning (#1116)

elastic · Apr 22, 2021 · 601abac · 601abac
1 parent efae093
commit 601abac
Show file tree

Hide file tree

Showing 76 changed files with 533 additions and 252 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -236,6 +236,7 @@ module.exports = {
     'react/jsx-props-no-spreading': 0,
     'react/static-property-placement': 0,
     'react/state-in-constructor': 0,
+    'react/jsx-wrap-multilines': 0,
 
     /*
      * jest plugin

diff --git a/api/charts.api.md b/api/charts.api.md
@@ -8,6 +8,7 @@ import { $Values } from 'utility-types';
 import { ComponentType } from 'react';
 import { default as React_2 } from 'react';
 import { ReactChild } from 'react';
+import { ReactNode } from 'react';
 
 // @public
 export type Accessor = AccessorObjectKey | AccessorArrayIndex;
@@ -457,6 +458,9 @@ export type ColorVariant = $Values<typeof ColorVariant>;
 // @public (undocumented)
 export type CompleteBoundedDomain = DomainBase & LowerBound & UpperBound;
 
+// @public
+export type ComponentWithAnnotationDatum = ComponentType<LineAnnotationDatum>;
+
 // @public (undocumented)
 export type ContinuousDomain = [min: number, max: number];
 
@@ -1197,7 +1201,8 @@ export interface LineAnnotationDatum {
 // @public (undocumented)
 export type LineAnnotationSpec = BaseAnnotationSpec<typeof AnnotationType.Line, LineAnnotationDatum, LineAnnotationStyle> & {
     domainType: AnnotationDomainType;
-    marker?: JSX.Element;
+    marker?: ReactNode | ComponentWithAnnotationDatum;
+    markerBody?: ReactNode | ComponentWithAnnotationDatum;
     markerDimensions?: {
         width: number;
         height: number;

diff --git a/integration/helpers.ts b/integration/helpers.ts
@@ -17,11 +17,15 @@
  * under the License.
  */
 
+/* eslint-disable jest/no-export */
+
 import { lstatSync, readdirSync } from 'fs';
 import path from 'path';
 
 import { getStorybook, configure } from '@storybook/react';
 
+import { Rotation } from '../src';
+
 export type StoryInfo = [string, string, number];
 
 export type StoryGroupInfo = [string, string, StoryInfo[]];
@@ -106,3 +110,27 @@ export function getStorybookInfo(): StoryGroupInfo[] {
     })
     .filter(([, , stories]) => stories.length > 0);
 }
+
+const rotationCases: [string, Rotation][] = [
+  ['0', 0],
+  ['90', 90],
+  ['180', 180],
+  ['negative 90', -90],
+];
+
+/**
+ * This is a wrapper around it.each for Rotations
+ * This is needed as the negative sign (-) will be excluded from the png filename
+ */
+export const eachRotation = {
+  it(fn: (rotation: Rotation) => any, title = 'rotation - %s') {
+    // eslint-disable-next-line jest/valid-title
+    return it.each<[string, Rotation]>(rotationCases)(title, (_, r) => fn(r));
+  },
+  describe(fn: (rotation: Rotation) => any, title = 'rotation - %s') {
+    // eslint-disable-next-line jest/valid-title, jest/valid-describe
+    return describe.each<[string, Rotation]>(rotationCases)(title, (_, r) => fn(r));
+  },
+};
+
+/* eslint-enable jest/no-export */
diff --git a/...ll-stories-annotations-lines-advanced-markers-visually-looks-correct-1-snap.png b/...ll-stories-annotations-lines-advanced-markers-visually-looks-correct-1-snap.png
diff --git a/...om-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...om-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...m-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...m-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...m-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...m-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...m-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...m-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...ft-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...ft-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...t-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...t-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...ht-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...ht-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...t-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...t-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...t-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...op-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...op-rotation-0-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...p-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...p-rotation-0-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...p-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...p-rotation-0-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...-rotation-180-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...rotation-180-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...p-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...p-rotation-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-rotation-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png b/...n-negative-90-renders-marker-annotation-within-chart-canvas-metric-0-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-15-1-snap.png
diff --git a/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png b/...-negative-90-renders-marker-annotation-within-chart-canvas-metric-30-1-snap.png
diff --git a/integration/tests/annotations_stories.test.ts b/integration/tests/annotations_stories.test.ts
@@ -17,31 +17,19 @@
  * under the License.
  */
 
+import { Position } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Annotations stories', () => {
   describe('rotation', () => {
-    it('rotation - 0', async () => {
+    eachRotation.it(async (rotation) => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=0',
-      );
-    });
-    it('rotation - 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=90',
-      );
-    });
-    it('rotation - negative 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=-90',
-      );
-    });
-    it('rotation - 180', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=180',
+        `http://localhost:9001/?path=/story/annotations-lines--single-bar-histogram&knob-debug=&knob-chartRotation=${rotation}`,
       );
     });
   });
+
   describe('Render within domain', () => {
     it('cover from 0 to end domain', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -69,6 +57,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with zero domain or fit to domain', () => {
     it('show annotation when yDomain is not zero value', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -101,6 +90,7 @@ describe('Annotations stories', () => {
       );
     });
   });
+
   describe('Render with no group id provided', () => {
     it('show annotation when group id is provided no y0 nor y1 values specified', async () => {
       await common.expectChartAtUrlToMatchScreenshot(
@@ -128,4 +118,16 @@ describe('Annotations stories', () => {
       );
     });
   });
+
+  describe('Advanced markers', () => {
+    describe.each<Position>(Object.values(Position))('Annotation marker side - %s', (side) => {
+      eachRotation.describe((rotation) => {
+        it.each<number>([0, 15, 30])('renders marker annotation within chart canvas - metric: %i', async (metric) => {
+          await common.expectChartAtUrlToMatchScreenshot(
+            `http://localhost:9001/?path=/story/annotations-lines--advanced-markers&knob-Debug=&knob-show legend=true&knob-chartRotation=${rotation}&knob-Side=${side}&knob-TickLine padding for markerBody=30&knob-Annotation metric=${metric}`,
+          );
+        });
+      });
+    });
+  });
 });
diff --git a/integration/tests/axis_stories.test.ts b/integration/tests/axis_stories.test.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { Position, Rotation } from '../../src';
+import { Position } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Axis stories', () => {
@@ -78,16 +79,11 @@ describe('Axis stories', () => {
     );
   });
 
-  it.each<[string, Rotation]>([
-    ['0', 0],
-    ['90', 90],
-    ['180', 180],
-    ['negative 90', -90],
-  ])('should render correctly rotated ticks - %s', async (_, rotation) => {
+  eachRotation.it(async (rotation) => {
     await common.expectChartAtUrlToMatchScreenshot(
       `http://localhost:9001/?path=/story/axes--tick-label-rotation&knob-disable axis overrides_general=true&knob-Tick label rotation_shared=${rotation}`,
     );
-  });
+  }, 'should render correctly rotated ticks - %s');
 
   describe('Small multiples', () => {
     const allPositions = [Position.Top, Position.Right, Position.Bottom, Position.Left];

diff --git a/integration/tests/bar_stories.test.ts b/integration/tests/bar_stories.test.ts
@@ -17,18 +17,17 @@
  * under the License.
  */
 
-import { DisplayValueStyle, HorizontalAlignment, Rotation, VerticalAlignment } from '../../src';
+import { DisplayValueStyle, HorizontalAlignment, VerticalAlignment } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Bar series stories', () => {
   describe('[test] axis positions with histogram bar series', () => {
-    [0, 90, -90, 180].forEach((rotation) => {
-      it(`Should render correct axis - rotation ${rotation === -90 ? 'negative 90' : rotation}`, async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          `http://localhost:9001/?path=/story/interactions--brush-selection-tool-on-histogram-time-charts&knob-debug=&knob-chartRotation=${rotation}`,
-        );
-      });
-    });
+    eachRotation.it(async (rotation) => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        `http://localhost:9001/?path=/story/interactions--brush-selection-tool-on-histogram-time-charts&knob-debug=&knob-chartRotation=${rotation}`,
+      );
+    }, 'Should render correct axis - rotation %s');
   });
 
   describe('[test] switch ordinal/linear x axis', () => {
@@ -49,47 +48,17 @@ describe('Bar series stories', () => {
 
   describe('[test] histogram mode (linear)', () => {
     describe('enableHistogramMode is true', () => {
-      it('rotation - 0', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=0&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=-90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=180&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
 
     describe('enableHistogramMode is false', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=0&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=-90&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=180&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-linear&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-histogram padding=0.05&knob-other series=line&knob-point series alignment=center&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
@@ -115,47 +84,17 @@ describe('Bar series stories', () => {
 
   describe('[test] histogram mode (ordinal)', () => {
     describe('enableHistogramMode is false, hasHistogramBarSeries is false', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=0&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=90&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=-90&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=180&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-hasHistogramBarSeries=&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
 
     describe('enableHistogramMode is true, hasHistogramBarSeries is true', () => {
-      it('rotation - 0', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=0&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=90&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - negative 90', async () => {
-        await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=-90&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
-        );
-      });
-      it('rotation - 180', async () => {
+      eachRotation.it(async (rotation) => {
         await common.expectChartAtUrlToMatchScreenshot(
-          'http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=180&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=',
+          `http://localhost:9001/?path=/story/bar-chart--test-histogram-mode-ordinal&knob-chartRotation=${rotation}&knob-bars padding=0.25&knob-hasHistogramBarSeries=true&knob-debug=true&knob-bars-1 enableHistogramMode=true&knob-bars-2 enableHistogramMode=`,
         );
       });
     });
@@ -176,12 +115,7 @@ describe('Bar series stories', () => {
   });
 
   describe('value labels positioning', () => {
-    describe.each<[string, Rotation]>([
-      ['0', 0],
-      ['90', 90],
-      ['180', 180],
-      ['negative 90', -90],
-    ])('rotation - %s', (_, rotation) => {
+    eachRotation.describe((rotation) => {
       describe.each<NonNullable<DisplayValueStyle['alignment']>['vertical']>([
         VerticalAlignment.Middle,
         VerticalAlignment.Top,

diff --git a/integration/tests/interactions.test.ts b/integration/tests/interactions.test.ts
@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { Rotation, Placement } from '../../src';
+import { Placement } from '../../src';
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Interactions', () => {
@@ -29,12 +30,7 @@ describe('Interactions', () => {
       const right = 20;
 
       describe.each<string>(['default', 'chart'])('Boundary El - %s', (boundary) => {
-        describe.each<[string, Rotation]>([
-          ['0', 0],
-          ['90', 90],
-          ['180', 180],
-          ['negative 90', -90],
-        ])('rotation - %s', (_, rotation) => {
+        eachRotation.describe((rotation) => {
           describe.each<Placement>([Placement.Right, Placement.Left, Placement.Top, Placement.Bottom])(
             'Placement - %s',
             (placement) => {

diff --git a/integration/tests/line_stories.test.ts b/integration/tests/line_stories.test.ts
@@ -17,28 +17,14 @@
  * under the License.
  */
 
+import { eachRotation } from '../helpers';
 import { common } from '../page_objects';
 
 describe('Line series stories', () => {
   describe('rotation', () => {
-    it('rotation - 0', async () => {
+    eachRotation.it(async (rotation) => {
       await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=0',
-      );
-    });
-    it('rotation - 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=90',
-      );
-    });
-    it('rotation - negative 90', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=-90',
-      );
-    });
-    it('rotation - 180', async () => {
-      await common.expectChartAtUrlToMatchScreenshot(
-        'http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=180',
+        `http://localhost:9001/?path=/story/line-chart--ordinal-with-axis&knob-chartRotation=${rotation}`,
       );
     });
   });