diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png
similarity index 100%
rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-no-rotations-1-snap.png
rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-0-degree-rotations-1-snap.png
diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png
similarity index 100%
rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-180-deg-rotation-1-snap.png
rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-180-degree-rotations-1-snap.png
diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png
similarity index 100%
rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-90-deg-rotation-1-snap.png
rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-90-degree-rotations-1-snap.png
diff --git a/integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png b/integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png
similarity index 100%
rename from integration/tests/__image_snapshots__/test-cases-stories-test-ts-test-cases-stories-should-render-marker-with-annotations-with-neg-90-deg-rotation-1-snap.png
rename to integration/tests/__image_snapshots__/test-cases-stories-test-ts-annotation-marker-rotation-should-render-marker-with-annotations-with-negative-90-degree-rotations-1-snap.png
diff --git a/integration/tests/test_cases_stories.test.ts b/integration/tests/test_cases_stories.test.ts
index e819878827..f2123c4897 100644
--- a/integration/tests/test_cases_stories.test.ts
+++ b/integration/tests/test_cases_stories.test.ts
@@ -36,28 +36,16 @@ describe('Test cases stories', () => {
{ waitSelector: '.echReactiveChart_noResults' },
);
});
+});
- it('should render marker with annotations with no rotations', async () => {
- await common.expectChartAtUrlToMatchScreenshot(
- 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=0',
- );
- });
-
- it('should render marker with annotations with 90 deg rotation', async () => {
- await common.expectChartAtUrlToMatchScreenshot(
- 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=90',
- );
- });
-
- it('should render marker with annotations with neg 90 deg rotation', async () => {
- await common.expectChartAtUrlToMatchScreenshot(
- 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=-90',
- );
- });
-
- it('should render marker with annotations with 180 deg rotation', async () => {
- await common.expectChartAtUrlToMatchScreenshot(
- 'http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=180',
- );
+describe('annotation marker rotation', () => {
+ [0, 90, -90, 180].forEach((rotation) => {
+ it(`should render marker with annotations with ${
+ rotation === -90 ? 'negative 90' : rotation
+ } degree rotations`, async () => {
+ await common.expectChartAtUrlToMatchScreenshot(
+ `http://localhost:9001/iframe.html?id=test-cases--no-axes-annotation-bug-fix&knob-horizontal marker position=undefined&knob-vertical marker position=undefined&knob-chartRotation=${rotation}`,
+ );
+ });
});
});
diff --git a/package.json b/package.json
index ab3d237143..649bd6ef7a 100644
--- a/package.json
+++ b/package.json
@@ -170,7 +170,6 @@
"lodash": "^4.17.15",
"lorem-ipsum": "^2.0.3",
"luxon": "^1.25.0",
- "marked": "^2.0.1",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"node-sass": "^4.14.1",
diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts
index b4ec8d3689..792fc3045a 100644
--- a/src/chart_types/xy_chart/annotations/line/dimensions.ts
+++ b/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -25,7 +25,7 @@ import { Dimensions, Size } from '../../../../utils/dimensions';
import { GroupId } from '../../../../utils/ids';
import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/merge_utils';
import { SmallMultipleScales } from '../../state/selectors/compute_small_multiple_scales';
-import { isHorizontalRotation } from '../../state/utils/common';
+import { isHorizontalRotation, isVerticalRotation } from '../../state/utils/common';
import { computeXScaleOffset } from '../../state/utils/utils';
import { getPanelSize } from '../../utils/panel';
import { AnnotationDomainTypes, LineAnnotationSpec, LineAnnotationDatum } from '../../utils/specs';
@@ -84,13 +84,7 @@ function computeYDomainLineAnnotationDimensions(
const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth;
const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth;
const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition);
- const alignment = getAnchorPosition(
- false,
- // isHorizontalChartRotation,
- chartRotation,
- specMarkerPosition,
- axisPosition,
- );
+ const alignment = getAnchorPosition(false, chartRotation, axisPosition, specMarkerPosition);
const position = getMarkerPositionForYAnnotation(
panelSize,
@@ -202,13 +196,7 @@ function computeXDomainLineAnnotationDimensions(
const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth;
const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition);
- const alignment = getAnchorPosition(
- true,
- // isHorizontalChartRotation,
- chartRotation,
- specMarkerPosition,
- axisPosition,
- );
+ const alignment = getAnchorPosition(true, chartRotation, axisPosition, specMarkerPosition);
const position = getMarkerPositionForXAnnotation(
panelSize,
@@ -292,9 +280,9 @@ export function computeLineAnnotationDimensions(
function getAnchorPosition(
isXDomain: boolean,
- chartRotation: number,
- specMarkerPosition?: Position,
+ chartRotation: Rotation,
axisPosition?: Position,
+ specMarkerPosition?: Position,
): Position {
const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, chartRotation, axisPosition);
if (specMarkerPosition !== undefined) {
@@ -305,11 +293,8 @@ function getAnchorPosition(
return dflPositionFromAxis;
}
-function validateMarkerPosition(isXDomain: boolean, chartRotation: number, position: Position): Position | undefined {
- if (
- (isXDomain && (chartRotation === 0 || chartRotation === 180)) ||
- (!isXDomain && (chartRotation === 90 || chartRotation === -90))
- ) {
+function validateMarkerPosition(isXDomain: boolean, chartRotation: Rotation, position: Position): Position | undefined {
+ if ((isXDomain && isHorizontalRotation(chartRotation)) || (!isXDomain && isVerticalRotation(chartRotation))) {
return position === Position.Top || position === Position.Bottom ? position : undefined;
}
return position === Position.Left || position === Position.Right ? position : undefined;
@@ -317,16 +302,13 @@ function validateMarkerPosition(isXDomain: boolean, chartRotation: number, posit
function getDefaultMarkerPositionFromAxis(
isXDomain: boolean,
- chartRotation: number,
+ chartRotation: Rotation,
axisPosition?: Position,
): Position {
if (axisPosition) {
return axisPosition;
}
- if (
- (isXDomain && (chartRotation === 90 || chartRotation === -90)) ||
- (!isXDomain && (chartRotation === 0 || chartRotation === 180))
- ) {
+ if ((isXDomain && isVerticalRotation(chartRotation)) || (!isXDomain && isHorizontalRotation(chartRotation))) {
return Position.Left;
}
return Position.Bottom;
diff --git a/stories/annotations/rects/1_linear_bar_chart.tsx b/stories/annotations/rects/1_linear_bar_chart.tsx
index 3e968abd85..1838e97fe6 100644
--- a/stories/annotations/rects/1_linear_bar_chart.tsx
+++ b/stories/annotations/rects/1_linear_bar_chart.tsx
@@ -18,7 +18,6 @@
*/
import { boolean, select } from '@storybook/addon-knobs';
-import marked from 'marked';
import React from 'react';
import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src';
@@ -91,7 +90,7 @@ export const Example = () => {
Example.story = {
parameters: {
info: {
- text: marked(`A \`\` can be used to create a rectangular annotation.
+ text: `A \`\` can be used to create a rectangular annotation.
As for most chart component, the required props are: \`id\` to uniquely identify the annotation and
a \`dataValues\` prop that describes one or more annotations.
@@ -128,7 +127,7 @@ coordinates: {
This annotation will cover the X axis starting from the \`0\` value to the \`1\` value included. The \`y\` is covered from 0 to 7.
In a barchart with linear or ordinal x scale, the interval covered by the annotation fully include the \`x0\` and \`x1\` values.
If one value is out of the relative domain, we will clip the annotation to the max/min value of the chart domain.
- `),
+ `,
},
},
};
diff --git a/stories/annotations/rects/2_ordinal_bar_chart.tsx b/stories/annotations/rects/2_ordinal_bar_chart.tsx
index 0a2abbd101..be3b421ee0 100644
--- a/stories/annotations/rects/2_ordinal_bar_chart.tsx
+++ b/stories/annotations/rects/2_ordinal_bar_chart.tsx
@@ -18,7 +18,6 @@
*/
import { boolean } from '@storybook/addon-knobs';
-import marked from 'marked';
import React from 'react';
import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src';
@@ -67,9 +66,9 @@ export const Example = () => {
Example.story = {
parameters: {
info: {
- text: marked(`On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart.
+ text: `On Ordinal Bar charts, you can draw a rectangular annotation the same way it's done within a linear bar chart.
The annotation will cover fully the extent defined by the \`coordinate\` object, extending to the max/min domain values any
-missing/out-of-range parameters.`),
+missing/out-of-range parameters.`,
},
},
};
diff --git a/stories/bar/54_functional_accessors.tsx b/stories/bar/54_functional_accessors.tsx
index 3d6869b7b0..8cdd05888e 100644
--- a/stories/bar/54_functional_accessors.tsx
+++ b/stories/bar/54_functional_accessors.tsx
@@ -19,7 +19,6 @@
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';
-import marked from 'marked';
import React from 'react';
import { Axis, BarSeries, Chart, Position, ScaleType, Settings, AccessorFn, ElementClickListener } from '../../src';
@@ -58,7 +57,7 @@ Example.story = {
parameters: {
options: { selectedPanel: SB_SOURCE_PANEL },
info: {
- text: marked(`An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`.
+ text: `An \`AccessorFn\` can be used as any accessor including: \`xAccessor\`, \`yAccessors\`, \`y0Accessors\` and \`splitSeriesAccessors\`.
This enables serialization of complex values, without needing to transform raw data.
@@ -77,7 +76,7 @@ If no \`fieldName\` is provided, the default value will be set using the index \
Try changing the \`fieldName\` for the y and split accessor functions in the storybook knobs.
**Note: All \`fieldName\` and \`Accessor\` values should be unique. Any duplicated values will be ignored.**
- `),
+ `,
},
},
};
diff --git a/yarn.lock b/yarn.lock
index 5062f31620..1f9615bc1e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15908,11 +15908,6 @@ marked@^1.0.0:
resolved "https://registry.yarnpkg.com/marked/-/marked-1.2.7.tgz#6e14b595581d2319cdcf033a24caaf41455a01fb"
integrity sha512-No11hFYcXr/zkBvL6qFmAp1z6BKY3zqLMHny/JN/ey+al7qwCM2+CMBL9BOgqMxZU36fz4cCWfn2poWIf7QRXA==
-marked@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
- integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
-
marksy@^8.0.0:
version "8.0.0"
resolved "https://registry.yarnpkg.com/marksy/-/marksy-8.0.0.tgz#b595f121fd47058df9dda1448f6ee156ab48810a"