fix: align with new scale types

elastic · Apr 24, 2020 · ff4120d · ff4120d
1 parent ff44a8d
commit ff4120d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx b/src/chart_types/xy_chart/annotations/annotation_marker.test.tsx
@@ -26,7 +26,7 @@ import { Scale, ScaleType, ScaleContinuous } from '../../../scales';
 import { SpecTypes } from '../../../specs/settings';
 import { computeLineAnnotationDimensions } from './line/dimensions';
 import { AnnotationLineProps } from './line/types';
-import { ChartTypes } from '../../../index';
+import { ChartTypes } from '../..';
 
 describe('annotation marker', () => {
   const groupId = 'foo-group';

diff --git a/src/chart_types/xy_chart/annotations/line/dimensions.ts b/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -180,6 +180,9 @@ function computeXDomainLineAnnotationDimensions(
   dataValues.forEach((datum: LineAnnotationDatum) => {
     const { dataValue } = datum;
     let annotationValueXposition = xScale.scale(dataValue);
+    if (annotationValueXposition == null) {
+      return;
+    }
     if (isContinuousScale(xScale) && typeof dataValue === 'number') {
       const minDomain = xScale.domain[0];
       const maxDomain = isHistogramMode ? xScale.domain[1] + xScale.minInterval : xScale.domain[1];
@@ -188,16 +191,20 @@ function computeXDomainLineAnnotationDimensions(
       }
       if (isHistogramMode) {
         const offset = computeXScaleOffset(xScale, true);
-        annotationValueXposition = xScale.pureScale(dataValue) - offset;
+        const pureScaledValue = xScale.pureScale(dataValue);
+        if (pureScaledValue == null) {
+          return;
+        }
+        annotationValueXposition = pureScaledValue - offset;
       } else {
-        annotationValueXposition = xScale.scale(dataValue) + (xScale.bandwidth * xScale.totalBarsInCluster) / 2;
+        annotationValueXposition = annotationValueXposition + (xScale.bandwidth * xScale.totalBarsInCluster) / 2;
       }
     } else if (isBandScale(xScale)) {
       if (isHistogramMode) {
         const padding = (xScale.step - xScale.originalBandwidth) / 2;
-        annotationValueXposition = xScale.scale(dataValue) - padding;
+        annotationValueXposition = annotationValueXposition - padding;
       } else {
-        annotationValueXposition = xScale.scale(dataValue) + xScale.originalBandwidth / 2;
+        annotationValueXposition = annotationValueXposition + xScale.originalBandwidth / 2;
       }
     } else {
       return;

diff --git a/src/chart_types/xy_chart/annotations/rect/dimensions.ts b/src/chart_types/xy_chart/annotations/rect/dimensions.ts
@@ -75,12 +75,16 @@ export function computeRectAnnotationDimensions(
     if (!xAndWidth) {
       return;
     }
-    const y = yScale.pureScale(y1);
-    const height = Math.abs(yScale.pureScale(y0) - y);
+    const scaledY1 = yScale.pureScale(y1);
+    const scaledY0 = yScale.pureScale(y0);
+    if (scaledY1 == null || scaledY0 == null) {
+      return;
+    }
+    const height = Math.abs(scaledY0 - scaledY1);
 
     const rectDimensions = {
       ...xAndWidth,
-      y,
+      y: scaledY1,
       height,
     };
 
@@ -100,21 +104,25 @@ function scaleXonBandScale(
   // the band scale return the start of the band, we need to cover
   // also the inner padding of the bar
   const padding = (xScale.step - xScale.originalBandwidth) / 2;
-
+  let scaledX1 = xScale.scale(x1);
+  let scaledX0 = xScale.scale(x0);
+  if (scaledX1 == null || scaledX0 == null) {
+    return null;
+  }
   // extend the x1 scaled value to fully cover the last bar
-  let x1Scaled: number = xScale.scale(x1) + xScale.originalBandwidth + padding;
+  scaledX1 += xScale.originalBandwidth + padding;
   // give the x1 value a maximum of the chart range
-  if (x1Scaled > xScale.range[1]) {
-    x1Scaled = xScale.range[1];
+  if (scaledX1 > xScale.range[1]) {
+    scaledX1 = xScale.range[1];
   }
 
-  let x0Scaled = xScale.scale(x0) - padding;
-  if (x0Scaled < xScale.range[0]) {
-    x0Scaled = xScale.range[0];
+  scaledX0 -= padding;
+  if (scaledX0 < xScale.range[0]) {
+    scaledX0 = xScale.range[0];
   }
-  const width = Math.abs(x1Scaled - x0Scaled);
+  const width = Math.abs(scaledX1 - scaledX0);
   return {
-    x: x0Scaled,
+    x: scaledX0,
     width,
   };
 }
@@ -125,20 +133,23 @@ function scaleXonContinuousScale(
   x1: PrimitiveValue,
   isHistogramModeEnabled: boolean = false,
 ): { x: number; width: number } | null {
-  let x1Scaled: number;
   if (typeof x1 !== 'number' || typeof x0 !== 'number') {
     return null;
   }
+  const scaledX0 = xScale.scale(x0);
+  let scaledX1: number | null;
   if (xScale.totalBarsInCluster > 0 && !isHistogramModeEnabled) {
-    x1Scaled = xScale.scale(x1 + xScale.minInterval);
+    scaledX1 = xScale.scale(x1 + xScale.minInterval);
   } else {
-    x1Scaled = xScale.scale(x1);
+    scaledX1 = xScale.scale(x1);
+  }
+  if (scaledX1 == null || scaledX0 == null) {
+    return null;
   }
-  const x0Scaled = xScale.scale(x0);
   // the width needs to be computed before adjusting the x anchor
-  const width = Math.abs(x1Scaled - x0Scaled);
+  const width = Math.abs(scaledX1 - scaledX0);
   return {
-    x: x0Scaled - (xScale.bandwidthPadding / 2) * xScale.totalBarsInCluster,
+    x: scaledX0 - (xScale.bandwidthPadding / 2) * xScale.totalBarsInCluster,
     width,
   };
 }