fix: limit annotation to the current domain extent

integration/tests/annotations_stories.test.ts

@@ -42,4 +42,31 @@ describe('Annotations stories', () => {
       );
     });
   });
+  describe('Render within domain', () => {
+    it('cover from 0 to end domain', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/annotations-rects--linear-bar-chart&knob-debug=&knob-chartRotation=0&knob-x0 coordinate=0&knob-x1 coordinate=none',
+      );
+    });
+    it('cover from 0 to 1', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/annotations-rects--linear-bar-chart&knob-debug=&knob-chartRotation=0&knob-x0 coordinate=0&knob-x1 coordinate=1',
+      );
+    });
+    it('cover from 3 only on bar chart', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/annotations-rects--linear-bar-chart&knob-debug=&knob-chartRotation=0&knob-x0 coordinate=3&knob-x1 coordinate=none',
+      );
+    });
+    it('cover from 1 only on bar chart', async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/annotations-rects--linear-bar-chart&knob-debug=&knob-chartRotation=0&knob-x0 coordinate=1&knob-x1 coordinate=1',
+      );
+    });
+    it("don't render outside domain", async () => {
+      await common.expectChartAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/annotations-rects--linear-bar-chart&knob-debug=&knob-chartRotation=0&knob-x0 coordinate=3.1&knob-x1 coordinate=none',
+      );
+    });
+  });
 });

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

@@ -159,47 +159,47 @@ function scaleXonContinuousScale(
  * @param scale the scale
  * @param minValue a min value
  * @param maxValue a max value
+ * @param isHistogram
  */
 function limitValueToDomainRange(
   scale: Scale,
   minValue?: PrimitiveValue,
   maxValue?: PrimitiveValue,
-  isHistogram: boolean = false,
+  isHistogram = false,
 ): [PrimitiveValue, PrimitiveValue] {
-  const domainStartValue = scale.domain[0];
+  const [domainStartValue] = scale.domain;
   // this fix the case where rendering on categorical scale and we have only one element
   const domainEndValue = scale.domain.length > 0 ? scale.domain[scale.domain.length - 1] : scale.domain[0];
 
-  // extend to edge values if values are null/undefined
-  let min = minValue == null ? domainStartValue : minValue;
-  let max = maxValue == null ? domainEndValue : maxValue;
-
-  if (isContinuousScale(scale)) {
-    if (minValue == null) {
-      // we expand null/undefined values to the edge
-      min = domainStartValue;
-    } else if (typeof minValue !== 'number') {
-      // we need to restrict to number only for continuous scales
-      min = null;
-    } else if (minValue < domainStartValue) {
-      // we limit values to the edge
-      min = domainStartValue;
-    } else {
-      min = minValue;
-    }
+  const min = getMin(domainStartValue, minValue);
 
-    if (maxValue == null) {
-      // we expand null/undefined values to the edge
-      max = isHistogram ? domainEndValue + scale.minInterval : domainEndValue;
-    } else if (typeof maxValue !== 'number') {
-      // we need to restrict to number only for continuous scales
-      max = null;
-    } else if (maxValue > domainEndValue) {
-      // we limit values to the edge
-      max = domainEndValue;
-    } else {
-      max = maxValue;
-    }
+  const max = getMax(isHistogram ? domainEndValue + scale.minInterval : domainEndValue, maxValue);
+  // extend to edge values if values are null/undefined
+  if (!isContinuousScale(scale)) {
+    return [min, max];
+  }
+  if (min !== null && max !== null && min > max) {
+    return [null, null];
   }
   return [min, max];
 }
+
+function getMax(max: number, value?: number | string | null) {
+  if (value == null) {
+    return max;
+  }
+  if (typeof value === 'number') {
+    return Math.min(value, max);
+  }
+  return value;
+}
+
+function getMin(min: number, value?: number | string | null) {
+  if (value == null) {
+    return min;
+  }
+  if (typeof value === 'number') {
+    return Math.max(value, min);
+  }
+  return value;
+}

stories/annotations/rects/1_linear_bar_chart.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Axis, BarSeries, Chart, RectAnnotation, ScaleType, Settings } from '../../../src';
@@ -27,6 +27,29 @@ import { getChartRotationKnob } from '../../utils/knobs';
 export const Example = () => {
   const debug = boolean('debug', false);
   const rotation = getChartRotationKnob();
+  const x0 = select(
+    'x0 coordinate',
+    {
+      0: 0,
+      1: 1,
+      3: 3,
+      '3.1': 3.1,
+      'not defined': 'none',
+    },
+    0,
+  );
+
+  const x1 = select(
+    'x1 coordinate',
+    {
+      0: 0,
+      1: 1,
+      3: 3,
+      '3.1': 3.1,
+      'not defined': 'none',
+    },
+    1,
+  );
 
   return (
     <Chart className="story-chart">
@@ -36,8 +59,8 @@ export const Example = () => {
         dataValues={[
           {
             coordinates: {
-              x0: 0,
-              x1: 1,
+              x0: x0 === 'none' ? undefined : Number(x0),
+              x1: x1 === 'none' ? undefined : Number(x1),
               y0: 0,
               y1: 4,
             },