fix(deps): update dependency d3-scale to v3.3.0

package.json

@@ -93,7 +93,7 @@
     "@types/d3-cloud": "^1.2.5",
     "@types/d3-collection": "^1.0.8",
     "@types/d3-interpolate": "^1.3.1",
-    "@types/d3-scale": "^2.1.1",
+    "@types/d3-scale": "^3.3.0",
     "@types/d3-shape": "^2.0.0",
     "@types/enzyme": "^3.9.0",
     "@types/enzyme-adapter-react-16": "^1.0.5",

packages/charts/package.json

@@ -40,7 +40,7 @@
     "d3-cloud": "^1.2.5",
     "d3-collection": "^1.0.7",
     "d3-interpolate": "^1.4.0",
-    "d3-scale": "^1.0.7",
+    "d3-scale": "3.3.0",
     "d3-shape": "^2.0.0",
     "prop-types": "^15.7.2",
     "re-reselect": "^3.4.0",

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -17,7 +17,7 @@ import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale } from '../../../../specs';
 import { TextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
-import { clamp, Datum } from '../../../../utils/common';
+import { clamp, Datum, isDefined } from '../../../../utils/common';
 import { innerPad, pad } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
 import { HeatmapStyle, Theme, Visible } from '../../../../utils/themes/theme';
@@ -89,7 +89,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
     .domain([0, elementSizes.grid.width])
     .range(xValues);
 
-  // compute the cell width (can be smaller then the available size depending on config
+  // compute the cell width (can be smaller than the available size depending on config
   const cellWidth =
     heatmapTheme.cell.maxWidth !== 'fill' && xScale.bandwidth() > heatmapTheme.cell.maxWidth
       ? heatmapTheme.cell.maxWidth
@@ -129,8 +129,8 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
 
   // compute each available cell position, color and value
   const cellMap = table.reduce<Record<string, Cell>>((acc, d) => {
-    const x = xScale(String(d.x));
-    const y = yScale(String(d.y))! + gridStrokeWidth;
+    const x = xScale(d.x);
+    const y = yScale(d.y);
     const yIndex = yValues.indexOf(d.y);
 
     if (x === undefined || y === undefined || yIndex === -1) {
@@ -156,7 +156,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
       x:
         (heatmapTheme.cell.maxWidth !== 'fill' ? x + xScale.bandwidth() / 2 - heatmapTheme.cell.maxWidth / 2 : x) +
         gridStrokeWidth,
-      y,
+      y: y + gridStrokeWidth,
       yIndex,
       width: cellWidthInner,
       height: cellHeightInner,
@@ -230,6 +230,13 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
     const endX = xInvertedScale(clamp(bottomRight[0], 0, width));
     const startY = yInvertedScale(clamp(topLeft[1], 0, currentGridHeight - 1));
     const endY = yInvertedScale(clamp(bottomRight[1], 0, currentGridHeight - 1));
+    if (!isDefined(startX) || !isDefined(endX) || !isDefined(startY) || !isDefined(endY)) {
+      return {
+        cells: [],
+        x: [],
+        y: [],
+      };
+    }
 
     const allXValuesInRange: Array<NonNullable<PrimitiveValue>> = getValuesInRange(xValues, startX, endX);
     const allYValuesInRange: Array<NonNullable<PrimitiveValue>> = getValuesInRange(yValues, startY, endY);

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

@@ -10,7 +10,7 @@ import { Colors } from '../../../../common/colors';
 import { Line } from '../../../../geoms/types';
 import { Scale } from '../../../../scales';
 import { isBandScale, isContinuousScale } from '../../../../scales/types';
-import { Position, Rotation } from '../../../../utils/common';
+import { isFiniteNumber, Position, Rotation } from '../../../../utils/common';
 import { Dimensions, Size } from '../../../../utils/dimensions';
 import { GroupId } from '../../../../utils/ids';
 import { mergeWithDefaultAnnotationLine } from '../../../../utils/themes/merge_utils';
@@ -56,7 +56,7 @@ function computeYDomainLineAnnotationDimensions(
 
     const annotationValueYPosition = yScale.scale(dataValue);
     // avoid rendering non scalable annotation values
-    if (Number.isNaN(annotationValueYPosition)) return;
+    if (!isFiniteNumber(annotationValueYPosition)) return;
 
     // avoid rendering annotation with values outside the scale domain
     if (dataValue < domainStart || dataValue > domainEnd) return;
@@ -65,7 +65,7 @@ function computeYDomainLineAnnotationDimensions(
       horizontal.domain.forEach((horizontalValue) => {
         const top = vertical.scale(verticalValue);
         const left = horizontal.scale(horizontalValue);
-        if (Number.isNaN(top + left)) return;
+        if (!isFiniteNumber(top + left)) return;
 
         const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth;
         const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth;
@@ -139,7 +139,7 @@ function computeXDomainLineAnnotationDimensions(
   dataValues.forEach((datum: LineAnnotationDatum, i) => {
     const { dataValue } = datum;
     let annotationValueXPosition = xScale.scale(dataValue);
-    if (Number.isNaN(annotationValueXPosition)) {
+    if (!isFiniteNumber(annotationValueXPosition)) {
       return;
     }
     if (isContinuousScale(xScale) && typeof dataValue === 'number') {
@@ -151,8 +151,7 @@ function computeXDomainLineAnnotationDimensions(
       if (isHistogramMode) {
         const offset = computeXScaleOffset(xScale, true);
         const pureScaledValue = xScale.pureScale(dataValue);
-        if (!Number.isNaN(pureScaledValue)) {
-          // Number.isFinite is regrettably not a type guard yet https://github.com/microsoft/TypeScript/issues/10038#issuecomment-924115831
+        if (isFiniteNumber(pureScaledValue)) {
           annotationValueXPosition = pureScaledValue - offset;
         }
       } else {
@@ -165,17 +164,17 @@ function computeXDomainLineAnnotationDimensions(
     } else {
       return;
     }
-    if (!isFinite(annotationValueXPosition)) {
+    if (!isFiniteNumber(annotationValueXPosition)) {
       return;
     }
 
     vertical.domain.forEach((verticalValue) => {
       horizontal.domain.forEach((horizontalValue) => {
-        if (Number.isNaN(annotationValueXPosition)) return;
+        if (!isFiniteNumber(annotationValueXPosition)) return;
 
         const top = vertical.scale(verticalValue);
         const left = horizontal.scale(horizontalValue);
-        if (Number.isNaN(top + left)) return;
+        if (!isFiniteNumber(top + left)) return;
 
         const width = isHorizontalChartRotation ? horizontal.bandwidth : vertical.bandwidth;
         const height = isHorizontalChartRotation ? vertical.bandwidth : horizontal.bandwidth;

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

@@ -8,7 +8,7 @@
 
 import { Scale, ScaleBand, ScaleContinuous } from '../../../../scales';
 import { isBandScale, isContinuousScale } from '../../../../scales/types';
-import { isDefined, Position, Rotation } from '../../../../utils/common';
+import { isDefined, isFiniteNumber, Position, Rotation } from '../../../../utils/common';
 import { AxisId, GroupId } from '../../../../utils/ids';
 import { Point } from '../../../../utils/point';
 import { AxisStyle } from '../../../../utils/themes/theme';
@@ -151,7 +151,7 @@ export function computeRectAnnotationDimensions(
         const id = getAnnotationRectPropsId(annotationSpecId, props.datum, i, vDomainValue, hDomainValue);
         const top = smallMultiplesScales.vertical.scale(vDomainValue);
         const left = smallMultiplesScales.horizontal.scale(hDomainValue);
-        if (Number.isNaN(top + left)) return;
+        if (!isFiniteNumber(top + left)) return;
         const panel = { ...panelSize, top, left };
         duplicated.push({ ...props, panel, id });
       });
@@ -170,7 +170,7 @@ function scaleXonBandScale(
   const padding = (xScale.step - xScale.originalBandwidth) / 2;
   let scaledX1 = xScale.scale(x1);
   let scaledX0 = xScale.scale(x0);
-  if (Number.isNaN(scaledX1 + scaledX0)) {
+  if (!isFiniteNumber(scaledX1 + scaledX0)) {
     return null;
   }
   // extend the x1 scaled value to fully cover the last bar
@@ -205,9 +205,9 @@ function scaleXonContinuousScale(
     xScale.totalBarsInCluster > 0 && !isHistogramModeEnabled ? xScale.scale(x1 + xScale.minInterval) : xScale.scale(x1);
   // the width needs to be computed before adjusting the x anchor
   const width = Math.abs(scaledX1 - scaledX0);
-  return Number.isNaN(width)
-    ? null
-    : { width, x: scaledX0 - (xScale.bandwidthPadding / 2) * xScale.totalBarsInCluster };
+  return isFiniteNumber(width)
+    ? { width, x: scaledX0 - (xScale.bandwidthPadding / 2) * xScale.totalBarsInCluster }
+    : null;
 }
 
 /**

packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts

@@ -11,7 +11,7 @@ import { Line, Rect } from '../../../geoms/types';
 import { Scale } from '../../../scales';
 import { isContinuousScale } from '../../../scales/types';
 import { TooltipStickTo } from '../../../specs/constants';
-import { Rotation } from '../../../utils/common';
+import { isFiniteNumber, Rotation } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { Point } from '../../../utils/point';
 import { isHorizontalRotation, isVerticalRotation } from '../state/utils/common';
@@ -26,7 +26,7 @@ export function getSnapPosition(
   totalBarsInCluster = 1,
 ): { band: number; position: number } | undefined {
   const position = scale.scale(value);
-  if (Number.isNaN(position)) {
+  if (!isFiniteNumber(position)) {
     return;
   }
 

packages/charts/src/chart_types/xy_chart/rendering/__snapshots__/rendering.bands.test.ts.snap

@@ -774,7 +774,7 @@ Array [
     },
     "width": 25,
     "x": 75,
-    "y": 20,
+    "y": 19.999999999999996,
   },
 ]
 `;

packages/charts/src/chart_types/xy_chart/rendering/area.ts

@@ -53,7 +53,7 @@ export function renderArea(
   const y1DatumAccessor = getYDatumValueFn();
   const y0DatumAccessor = getYDatumValueFn('y0');
   const pathGenerator = area<DataSeriesDatum>()
-    .x(({ x }) => (xScale.scale(x) ?? NaN) - xScaleOffset)
+    .x(({ x }) => xScale.scale(x) - xScaleOffset)
     .y1(y1Fn)
     .y0(y0Fn)
     .defined((datum) => {

packages/charts/src/chart_types/xy_chart/rendering/bars.ts

@@ -10,7 +10,7 @@ import { Color } from '../../../common/colors';
 import { Scale } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
 import { TextMeasure } from '../../../utils/bbox/canvas_text_bbox_calculator';
-import { clamp, mergePartial } from '../../../utils/common';
+import { clamp, isFiniteNumber, mergePartial } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { BandedAccessorType, BarGeometry } from '../../../utils/geometry';
 import { BarSeriesStyle, DisplayValueStyle } from '../../../utils/themes/theme';
@@ -49,7 +49,7 @@ export function renderBars(
   const isInvertedY = yScale.isInverted;
   return dataSeries.data.reduce((barTuple: BarTuple, datum) => {
     const xScaled = xScale.scale(datum.x);
-    if (!xScale.isValueInDomain(datum.x) || Number.isNaN(xScaled)) {
+    if (!xScale.isValueInDomain(datum.x) || !isFiniteNumber(xScaled)) {
       return barTuple; // don't create a bar if not within the xScale domain
     }
     const { barGeometries, indexedGeometryMap } = barTuple;
@@ -67,7 +67,7 @@ export function renderBars(
     const height = absHeight === 0 ? absHeight : Math.max(minBarHeight, absHeight); // extend nonzero bars
     const heightExtension = height - absHeight;
     const isUpsideDown = finiteHeight < 0;
-    const finiteY = Number.isNaN(y0Scaled + rawY) ? 0 : rawY;
+    const finiteY = isFiniteNumber(y0Scaled + rawY) ? rawY : 0;
     const y = isUpsideDown ? finiteY - height + heightExtension : finiteY - heightExtension;
 
     const seriesIdentifier: XYChartSeriesIdentifier = {

packages/charts/src/chart_types/xy_chart/rendering/points.ts

@@ -8,7 +8,7 @@
 
 import { Color } from '../../../common/colors';
 import { Scale } from '../../../scales';
-import { isNil } from '../../../utils/common';
+import { isFiniteNumber, isNil } from '../../../utils/common';
 import { Dimensions } from '../../../utils/dimensions';
 import { BandedAccessorType, PointGeometry } from '../../../utils/geometry';
 import { PointStyle } from '../../../utils/themes/theme';
@@ -63,7 +63,7 @@ export function renderPoints(
     // don't create the point if it that point was filled
     const x = xScale.scale(xValue);
 
-    if (Number.isNaN(x)) return acc;
+    if (!isFiniteNumber(x)) return acc;
 
     const points: PointGeometry[] = [];
     const yDatumKeyNames: Array<keyof Omit<FilledValues, 'x'>> = isBandChart ? ['y0', 'y1'] : ['y1'];

packages/charts/src/chart_types/xy_chart/rendering/rendering.areas.test.ts

@@ -13,6 +13,7 @@ import { MockStore } from '../../../mocks/store';
 import { ScaleType } from '../../../scales/constants';
 import { Spec } from '../../../specs';
 import { GlobalChartState } from '../../../state/chart_state';
+import { isFiniteNumber } from '../../../utils/common';
 import { PointGeometry, AreaGeometry } from '../../../utils/geometry';
 import { LIGHT_THEME } from '../../../utils/themes/light_theme';
 import { computeSeriesDomainsSelector } from '../state/selectors/compute_series_domains';
@@ -407,7 +408,7 @@ describe('Rendering points - areas', () => {
       expect(zeroValueIndexdGeometry).toBeDefined();
       expect(zeroValueIndexdGeometry.length).toBe(1);
       // moved to the bottom of the chart
-      expect(zeroValueIndexdGeometry[0].y).toBe(Infinity);
+      expect(isFiniteNumber(zeroValueIndexdGeometry[0].y)).toBe(false);
       // default area theme point radius
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.areaSeriesStyle.point.radius);
     });

packages/charts/src/chart_types/xy_chart/rendering/rendering.bubble.test.ts

@@ -360,14 +360,6 @@ describe('Rendering points - bubble', () => {
       expect(points.length).toBe(7);
       // all the points including null geometries
       expect(geometriesIndex.size).toEqual(9);
-
-      const zeroValueIndexdGeometry = geometriesIndex.find(null, {
-        x: 56.25,
-        y: 100,
-      });
-      expect(zeroValueIndexdGeometry).toBeDefined();
-      expect(zeroValueIndexdGeometry.length).toBe(3);
-      expect(zeroValueIndexdGeometry.find(({ value: { x } }) => x === 5)).toBeDefined();
     });
   });
   describe('Remove points datum is not in domain', () => {

packages/charts/src/chart_types/xy_chart/rendering/rendering.lines.test.ts

@@ -10,6 +10,7 @@ import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs';
 import { MockStore } from '../../../mocks/store';
 import { ScaleContinuousType } from '../../../scales';
 import { ScaleType } from '../../../scales/constants';
+import { isFiniteNumber } from '../../../utils/common';
 import { PointGeometry } from '../../../utils/geometry';
 import { LIGHT_THEME } from '../../../utils/themes/light_theme';
 import { computeSeriesGeometriesSelector } from '../state/selectors/compute_series_geometries';
@@ -383,7 +384,7 @@ describe('Rendering points - line', () => {
       expect(zeroValueIndexdGeometry).toBeDefined();
       expect(zeroValueIndexdGeometry.length).toBe(1);
       // the zero value is moved vertically to infinity
-      expect((zeroValueIndexdGeometry[0] as PointGeometry).y).toBe(Infinity);
+      expect(isFiniteNumber((zeroValueIndexdGeometry[0] as PointGeometry).y)).toBe(false);
       expect((zeroValueIndexdGeometry[0] as PointGeometry).radius).toBe(LIGHT_THEME.lineSeriesStyle.point.radius);
     });
   });

packages/charts/src/chart_types/xy_chart/rendering/utils.ts

@@ -10,7 +10,7 @@ import { LegendItem } from '../../../common/legend';
 import { Scale } from '../../../scales';
 import { isLogarithmicScale } from '../../../scales/types';
 import { MarkBuffer } from '../../../specs';
-import { getDistance } from '../../../utils/common';
+import { getDistance, isFiniteNumber } from '../../../utils/common';
 import { BarGeometry, ClippedRanges, isPointGeometry, PointGeometry } from '../../../utils/geometry';
 import { GeometryStateStyle, SharedGeometryStateStyle } from '../../../utils/themes/theme';
 import { DataSeriesDatum, FilledValues, XYChartSeriesIdentifier } from '../utils/series';
@@ -67,7 +67,7 @@ export function getClippedRanges(
 
   return dataset.reduce<ClippedRanges>((acc, data) => {
     const xScaled = xScale.scale(data.x);
-    if (Number.isNaN(xScaled)) return acc;
+    if (!isFiniteNumber(xScaled)) return acc;
 
     const xValue = xScaled - xScaleOffset + xScale.bandwidth / 2;
 

packages/charts/src/chart_types/xy_chart/state/__snapshots__/chart_state.debug.test.ts.snap

@@ -89,7 +89,7 @@ Object {
       "color": "#54B399",
       "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}",
       "name": "spec1",
-      "path": "M0,141.5L58,99.4L145,0",
+      "path": "M0,141.5L58,99.39999999999999L145,0",
       "points": Array [
         Object {
           "mark": null,
@@ -317,7 +317,7 @@ Object {
       "color": "#54B399",
       "key": "groupId{__global__}spec{spec1}yAccessor{1}splitAccessors{}",
       "name": "spec1",
-      "path": "M0,141.5L58,99.4L145,0",
+      "path": "M0,141.5L58,99.39999999999999L145,0",
       "points": Array [
         Object {
           "mark": null,

packages/charts/src/chart_types/xy_chart/state/selectors/get_brush_area.ts

@@ -11,7 +11,7 @@ import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartRotationSelector } from '../../../../state/selectors/get_chart_rotation';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
-import { clamp, Rotation } from '../../../../utils/common';
+import { clamp, isFiniteNumber, Rotation } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { Point } from '../../../../utils/point';
 import { isVerticalRotation } from '../utils/common';
@@ -72,10 +72,12 @@ export function getPointsConstraintToSinglePanel(
   const hPanel = horizontal.invert(startPlotPoint.x);
   const vPanel = vertical.invert(startPlotPoint.y);
 
-  const hPanelStart = horizontal.scale(hPanel) || 0;
+  const scaledHorizontal = horizontal.scale(hPanel);
+  const hPanelStart = isFiniteNumber(scaledHorizontal) ? scaledHorizontal : 0;
   const hPanelEnd = hPanelStart + horizontal.bandwidth;
 
-  const vPanelStart = vertical.scale(vPanel) || 0;
+  const scaledVertical = vertical.scale(vPanel);
+  const vPanelStart = isFiniteNumber(scaledVertical) ? scaledVertical : 0;
   const vPanelEnd = vPanelStart + vertical.bandwidth;
 
   const start = {

packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts

@@ -11,6 +11,7 @@ import { SettingsSpec, PointerEvent } from '../../../../specs/settings';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { isFiniteNumber } from '../../../../utils/common';
 import { isValidPointerOverEvent } from '../../../../utils/events';
 import { getCursorBandPosition } from '../../crosshair/crosshair_utils';
 import { ChartDimensions } from '../../utils/dimensions';
@@ -92,14 +93,14 @@ function getCursorBand(
     }
   }
   const { horizontal, vertical } = smallMultipleScales;
-  const topPos = vertical.scale(pointerPosition.verticalPanelValue) || 0;
-  const leftPos = horizontal.scale(pointerPosition.horizontalPanelValue) || 0;
+  const topPos = vertical.scale(pointerPosition.verticalPanelValue);
+  const leftPos = horizontal.scale(pointerPosition.horizontalPanelValue);
 
   const panel = {
     width: horizontal.bandwidth,
     height: vertical.bandwidth,
-    top: chartDimensions.top + topPos,
-    left: chartDimensions.left + leftPos,
+    top: chartDimensions.top + (isFiniteNumber(topPos) ? topPos : 0),
+    left: chartDimensions.left + (isFiniteNumber(leftPos) ? leftPos : 0),
   };
   const cursorBand = getCursorBandPosition(
     settingsSpec.rotation,