fix(annotations): provide fallback for line annotation markers

.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>

src/chart_types/xy_chart/annotations/line/dimensions.ts

@@ -283,8 +283,12 @@ function getAnchorPosition(
   isXDomain: boolean,
   isChartHorizontal: boolean,
   specMarkerPosition?: Position,
-  axisPosition?: Position,
+  axisPosition?: Position | undefined,
 ): Position {
+  // catch the case of a chart with no axes nor specMarkerPosition for a vertical line annotation
+  if (!axisPosition && !specMarkerPosition && isXDomain) {
+    return Position.Bottom;
+  }
   const dflPositionFromAxis = getDefaultMarkerPositionFromAxis(isXDomain, isChartHorizontal, axisPosition);
 
   if (specMarkerPosition !== undefined) {

stories/test_cases/3_no_axes_annotation.tsx

@@ -0,0 +1,80 @@
+/*
+ * 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 {
+  LineAnnotationDatum,
+  Chart,
+  LineAnnotation,
+  AnnotationDomainTypes,
+  BarSeries,
+  ScaleType,
+  Position,
+} from '../../src';
+
+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',
+  );
+  return (
+    <Chart className="story-chart">
+      <LineAnnotation
+        domainType={AnnotationDomainTypes.XDomain}
+        id="ann"
+        dataValues={[{ dataValue: 'bags' }]}
+        marker={<div style={{ background: 'red' }}>Vertical</div>}
+        markerPosition={markerPositionVertical === 'undefined' ? undefined : markerPositionVertical}
+      />
+      <LineAnnotation
+        domainType={AnnotationDomainTypes.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>
+  );
+};

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';