fix(annotations): provide fallback for line annotation markers (opens…

…earch-project#1091)

packages/osd-charts/.playground/playground.tsx

@@ -19,27 +19,41 @@
 
 import React from 'react';
 
-import { Chart, BarSeries, ScaleType, Settings } from '../src';
+import { Chart, BarSeries, ScaleType, LineAnnotation, AnnotationDomainTypes, LineAnnotationDatum } from '../src';
 
+function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
+  return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
+}
 export class Playground extends React.Component {
   render() {
     return (
-      <div className="story-chart story-root root">
+      <div className="App">
         <Chart size={[500, 200]}>
-          <Settings showLegend showLegendExtra />
+          <LineAnnotation
+            domainType={AnnotationDomainTypes.XDomain}
+            id="ann"
+            dataValues={[{ dataValue: 'bags' }]}
+            marker={<div style={{ background: 'red' }}>hello</div>}
+            // markerPosition="top"
+          />
+          <LineAnnotation
+            domainType={AnnotationDomainTypes.YDomain}
+            id="ann1"
+            dataValues={generateAnnotationData([30])}
+            marker={<div style={{ background: 'yellow' }}>Horizontal</div>}
+            // markerPosition="right"
+          />
           <BarSeries
-            id="areas"
-            name="area"
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            xAccessor={0}
-            yAccessors={[1]}
-            splitSeriesAccessors={[2]}
+            id="bars"
+            name="amount"
+            xScaleType={ScaleType.Ordinal}
+            xAccessor="x"
+            yAccessors={['y']}
             data={[
-              [0, 123, 'group0'],
-              [0, 123, 'group1'],
-              [0, 123, 'group2'],
-              [0, 123, 'group3'],
+              { x: 'trousers', y: 390, val: 1222 },
+              { x: 'watches', y: 23, val: 1222 },
+              { x: 'bags', y: 750, val: 1222 },
+              { x: 'cocktail dresses', y: 854, val: 1222 },
             ]}
           />
         </Chart>

packages/osd-charts/integration/tests/test_cases_stories.test.ts

@@ -37,3 +37,15 @@ describe('Test cases stories', () => {
     );
   });
 });
+
+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}`,
+      );
+    });
+  });
+});

packages/osd-charts/package.json

@@ -123,6 +123,7 @@
     "@types/jsdom": "^16.2.5",
     "@types/lodash": "^4.14.121",
     "@types/luxon": "^1.25.0",
+    "@types/marked": "^2.0.1",
     "@types/moment-timezone": "^0.5.30",
     "@types/puppeteer": "^5.4.2",
     "@types/react-dom": "^16.9.8",

packages/osd-charts/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 { AnnotationDomainType, LineAnnotationSpec, LineAnnotationDatum } from '../../utils/specs';
@@ -52,7 +52,6 @@ function computeYDomainLineAnnotationDimensions(
   // let's use a default Bottom-X/Left-Y axis orientation if we are not showing an axis
   // but we are displaying a line annotation
 
-  const alignment = getAnchorPosition(false, isHorizontalChartRotation, specMarkerPosition, axisPosition);
   const lineProps: AnnotationLineProps[] = [];
   const [domainStart, domainEnd] = yScale.domain;
 
@@ -84,6 +83,8 @@ 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, chartRotation, axisPosition, specMarkerPosition);
 
         const position = getMarkerPositionForYAnnotation(
           panelSize,
@@ -93,8 +94,6 @@ function computeYDomainLineAnnotationDimensions(
           dimension,
         );
 
-        const linePathPoints = getYLinePath({ width, height }, annotationValueYPosition);
-
         const lineProp: AnnotationLineProps = {
           specId,
           id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
@@ -147,7 +146,6 @@ function computeXDomainLineAnnotationDimensions(
 
   const lineProps: AnnotationLineProps[] = [];
   const isHorizontalChartRotation = isHorizontalRotation(chartRotation);
-  const alignment = getAnchorPosition(true, isHorizontalChartRotation, specMarkerPosition, axisPosition);
   const panelSize = getPanelSize({ vertical, horizontal });
 
   dataValues.forEach((datum: LineAnnotationDatum) => {
@@ -197,6 +195,9 @@ function computeXDomainLineAnnotationDimensions(
         const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth;
         const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth;
 
+        const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition);
+        const alignment = getAnchorPosition(true, chartRotation, axisPosition, specMarkerPosition);
+
         const position = getMarkerPositionForXAnnotation(
           panelSize,
           chartRotation,
@@ -205,8 +206,6 @@ function computeXDomainLineAnnotationDimensions(
           dimension,
         );
 
-        const linePathPoints = getXLinePath({ width, height }, annotationValueXPosition);
-
         const lineProp: AnnotationLineProps = {
           specId,
           id: getAnnotationLinePropsId(specId, datum, verticalValue, horizontalValue),
@@ -281,36 +280,35 @@ export function computeLineAnnotationDimensions(
 
 function getAnchorPosition(
   isXDomain: boolean,
-  isChartHorizontal: boolean,
-  specMarkerPosition?: Position,
+  chartRotation: Rotation,
   axisPosition?: Position,
+  specMarkerPosition?: Position,
 ): Position {
-  const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, isChartHorizontal, axisPosition);
-
+  const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, chartRotation, axisPosition);
   if (specMarkerPosition !== undefined) {
     // validate specMarkerPosition against domain
-    const validatedPosFromMarkerPos = validateMarkerPosition(isXDomain, isChartHorizontal, specMarkerPosition);
+    const validatedPosFromMarkerPos = validateMarkerPosition(isXDomain, chartRotation, specMarkerPosition);
     return validatedPosFromMarkerPos ?? dflPositionFromAxis;
   }
   return dflPositionFromAxis;
 }
 
-function validateMarkerPosition(isXDomain: boolean, isHorizontal: boolean, position: Position): Position | undefined {
-  if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) {
+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;
 }
 
 function getDefaultMarkerPositionFromAxis(
   isXDomain: boolean,
-  isHorizontal: boolean,
+  chartRotation: Rotation,
   axisPosition?: Position,
 ): Position {
   if (axisPosition) {
     return axisPosition;
   }
-  if ((isXDomain && isHorizontal) || (!isXDomain && !isHorizontal)) {
+  if ((isXDomain && isVerticalRotation(chartRotation)) || (!isXDomain && isHorizontalRotation(chartRotation))) {
     return Position.Left;
   }
   return Position.Bottom;

packages/osd-charts/stories/annotations/rects/2_ordinal_bar_chart.tsx

@@ -68,8 +68,7 @@ Example.story = {
     info: {
       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.`,
     },
   },
 };

packages/osd-charts/stories/test_cases/3_no_axes_annotation.tsx

@@ -0,0 +1,83 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { select } from '@storybook/addon-knobs';
+import React from 'react';
+
+import {
+  AnnotationDomainType,
+  LineAnnotationDatum,
+  Chart,
+  LineAnnotation,
+  BarSeries,
+  ScaleType,
+  Position,
+  Settings,
+} from '../../src';
+import { getChartRotationKnob } from '../utils/knobs';
+
+function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
+  return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
+}
+
+export const Example = () => {
+  const markerPositionHorizontal = select(
+    'horizontal marker position',
+    [Position.Top, Position.Left, Position.Bottom, Position.Right, 'undefined'],
+    'undefined',
+  );
+  const markerPositionVertical = select(
+    'vertical marker position',
+    [Position.Top, Position.Left, Position.Bottom, Position.Right, 'undefined'],
+    'undefined',
+  );
+  const chartRotation = getChartRotationKnob();
+  return (
+    <Chart className="story-chart">
+      <Settings rotation={chartRotation} />
+      <LineAnnotation
+        domainType={AnnotationDomainType.XDomain}
+        id="ann"
+        dataValues={[{ dataValue: 'bags' }]}
+        marker={<div style={{ background: 'red' }}>Vertical</div>}
+        markerPosition={markerPositionVertical === 'undefined' ? undefined : markerPositionVertical}
+      />
+      <LineAnnotation
+        domainType={AnnotationDomainType.YDomain}
+        id="ann1"
+        dataValues={generateAnnotationData([30])}
+        marker={<div style={{ background: 'yellow' }}>Horizontal</div>}
+        markerPosition={markerPositionHorizontal === 'undefined' ? undefined : markerPositionHorizontal}
+      />
+      <BarSeries
+        id="bars"
+        name="amount"
+        xScaleType={ScaleType.Ordinal}
+        xAccessor="x"
+        yAccessors={['y']}
+        data={[
+          { x: 'trousers', y: 390, val: 1222 },
+          { x: 'watches', y: 23, val: 1222 },
+          { x: 'bags', y: 750, val: 1222 },
+          { x: 'cocktail dresses', y: 854, val: 1222 },
+        ]}
+      />
+    </Chart>
+  );
+};

packages/osd-charts/stories/test_cases/test_cases.stories.tsx

@@ -28,3 +28,4 @@ export default {
 
 export { Example as noSeries } from './1_no_series';
 export { Example as chromePathBugFix } from './2_chrome_path_bug_fix';
+export { Example as noAxesAnnotationBugFix } from './3_no_axes_annotation';

packages/osd-charts/yarn.lock

@@ -5795,6 +5795,11 @@
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.25.0.tgz#3d6fe591fac874f48dd225cb5660b2b785a21a05"
   integrity sha512-iIJp2CP6C32gVqI08HIYnzqj55tlLnodIBMCcMf28q9ckqMfMzocCmIzd9JWI/ALLPMUiTkCu1JGv3FFtu6t3g==
 
+"@types/marked@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.1.tgz#bbb6d1b570a54652a31953c77972f65b6f9235a4"
+  integrity sha512-/CFe3HvXMkh7YkJS0DGRsC0hgwWZDZbSCmY/X00bSCnZ4ukS2Glk9veIkRoPu2ElMbKpjxseXn1y9MkTwGHVjw==
+
 "@types/mdast@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb"