test(xy): scale type improvements (#1381)

Co-authored-by: Nick Partridge <[email protected]>
elastic · Sep 16, 2021 · cd201de · cd201de
1 parent 9873add
commit cd201de
Show file tree

Hide file tree

Showing 28 changed files with 140 additions and 121 deletions.
diff --git a/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/line/dimensions.ts
@@ -22,7 +22,7 @@ import { AnnotationLineProps } from './types';
 
 function computeYDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
-  yScale: Scale,
+  yScale: Scale<number>,
   { vertical, horizontal }: SmallMultipleScales,
   chartRotation: Rotation,
   axisPosition?: Position,
@@ -118,7 +118,7 @@ function computeYDomainLineAnnotationDimensions(
 
 function computeXDomainLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
-  xScale: Scale,
+  xScale: Scale<number | string>,
   { vertical, horizontal }: SmallMultipleScales,
   chartRotation: Rotation,
   isHistogramMode: boolean,
@@ -233,8 +233,8 @@ function computeXDomainLineAnnotationDimensions(
 export function computeLineAnnotationDimensions(
   annotationSpec: LineAnnotationSpec,
   chartRotation: Rotation,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number | string>,
   smallMultipleScales: SmallMultipleScales,
   isHistogramMode: boolean,
   axisPosition?: Position,

diff --git a/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts b/packages/charts/src/chart_types/xy_chart/annotations/rect/dimensions.ts
@@ -32,8 +32,8 @@ export function isWithinRectBounds({ x, y }: Point, { startX, endX, startY, endY
 /** @internal */
 export function computeRectAnnotationDimensions(
   annotationSpec: RectAnnotationSpec,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number>,
   axesSpecs: AxisSpec[],
   smallMultiplesScales: SmallMultipleScales,
   chartRotation: Rotation,
@@ -162,7 +162,7 @@ export function computeRectAnnotationDimensions(
 }
 
 function scaleXonBandScale(
-  xScale: ScaleBand,
+  xScale: ScaleBand<number | string>,
   x0: PrimitiveValue,
   x1: PrimitiveValue,
 ): { x: number; width: number } | null {
@@ -223,7 +223,7 @@ function scaleXonContinuousScale(
  * @param isHistogram
  */
 function limitValueToDomainRange(
-  scale: Scale,
+  scale: Scale<number>,
   minValue?: PrimitiveValue,
   maxValue?: PrimitiveValue,
   isHistogram = false,

diff --git a/packages/charts/src/chart_types/xy_chart/annotations/utils.ts b/packages/charts/src/chart_types/xy_chart/annotations/utils.ts
@@ -118,8 +118,8 @@ export function invertTransformedCursor(
 export function computeAnnotationDimensions(
   annotations: AnnotationSpec[],
   chartRotation: Rotation,
-  yScales: Map<GroupId, Scale>,
-  xScale: Scale,
+  yScales: Map<GroupId, Scale<number>>,
+  xScale: Scale<number | string>,
   axesSpecs: AxisSpec[],
   isHistogramModeEnabled: boolean,
   smallMultipleScales: SmallMultipleScales,
@@ -145,22 +145,22 @@ export function computeAnnotationDimensions(
         annotationDimensions.set(id, dimensions);
       }
       return annotationDimensions;
-    }
-
-    const dimensions = computeRectAnnotationDimensions(
-      annotationSpec,
-      yScales,
-      xScale,
-      axesSpecs,
-      smallMultipleScales,
-      chartRotation,
-      getAxisStyle,
-      isHistogramModeEnabled,
-    );
+    } else {
+      const dimensions = computeRectAnnotationDimensions(
+        annotationSpec,
+        yScales,
+        xScale as Scale<number>,
+        axesSpecs,
+        smallMultipleScales,
+        chartRotation,
+        getAxisStyle,
+        isHistogramModeEnabled,
+      );
 
-    if (dimensions) {
-      annotationDimensions.set(id, dimensions);
+      if (dimensions) {
+        annotationDimensions.set(id, dimensions);
+      }
+      return annotationDimensions;
     }
-    return annotationDimensions;
   }, new Map());
 }
diff --git a/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/packages/charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
@@ -22,7 +22,7 @@ export const DEFAULT_SNAP_POSITION_BAND = 1;
 /** @internal */
 export function getSnapPosition(
   value: string | number,
-  scale: Scale,
+  scale: Scale<number | string>,
   totalBarsInCluster = 1,
 ): { band: number; position: number } | undefined {
   const position = scale.scale(value);
@@ -86,7 +86,7 @@ export function getCursorBandPosition(
     withinBandwidth: boolean;
   },
   snapEnabled: boolean,
-  xScale: Scale,
+  xScale: Scale<number | string>,
   totalBarsInCluster?: number,
 ): Rect | undefined {
   const { top, left, width, height } = panel;

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/area.ts b/packages/charts/src/chart_types/xy_chart/rendering/area.ts
@@ -31,8 +31,8 @@ import {
 export function renderArea(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   curve: CurveType,

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bars.ts b/packages/charts/src/chart_types/xy_chart/rendering/bars.ts
@@ -29,8 +29,8 @@ type BarTuple = {
 export function renderBars(
   orderIndex: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   chartRotation: number,
   minBarHeight: number,

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts b/packages/charts/src/chart_types/xy_chart/rendering/bubble.ts
@@ -21,8 +21,8 @@ import { MarkSizeOptions } from './utils';
 export function renderBubble(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   color: Color,
   panel: Dimensions,
   hasY0Accessors: boolean,

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/line.ts b/packages/charts/src/chart_types/xy_chart/rendering/line.ts
@@ -30,8 +30,8 @@ import {
 export function renderLine(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   curve: CurveType,

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/points.ts b/packages/charts/src/chart_types/xy_chart/rendering/points.ts
@@ -29,8 +29,8 @@ import {
 export function renderPoints(
   shift: number,
   dataSeries: DataSeries,
-  xScale: Scale,
-  yScale: Scale,
+  xScale: Scale<number | string>,
+  yScale: Scale<number>,
   panel: Dimensions,
   color: Color,
   pointStyle: PointStyle,

diff --git a/packages/charts/src/chart_types/xy_chart/rendering/utils.ts b/packages/charts/src/chart_types/xy_chart/rendering/utils.ts
@@ -54,7 +54,11 @@ export function isDatumFilled({ filled, initialY1 }: DataSeriesDatum) {
  * @param xScaleOffset
  * @internal
  */
-export function getClippedRanges(dataset: DataSeriesDatum[], xScale: Scale, xScaleOffset: number): ClippedRanges {
+export function getClippedRanges(
+  dataset: DataSeriesDatum[],
+  xScale: Scale<number | string>,
+  xScaleOffset: number,
+): ClippedRanges {
   let firstNonNullX: number | null = null;
   let hasNull = false;
 
@@ -153,7 +157,7 @@ export function isPointOnGeometry(
   return yCoordinate >= y && yCoordinate <= y + height && xCoordinate >= x && xCoordinate <= x + width;
 }
 
-const getScaleTypeValueValidator = (yScale: Scale): ((n: number) => boolean) => {
+const getScaleTypeValueValidator = (yScale: Scale<number>): ((n: number) => boolean) => {
   if (!isLogarithmicScale(yScale)) return () => true;
 
   const domainPolarity = getDomainPolarity(yScale.domain);
@@ -174,7 +178,7 @@ export type YDefinedFn = (
 ) => boolean;
 
 /** @internal */
-export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
+export function isYValueDefinedFn(yScale: Scale<number>, xScale: Scale<number | string>): YDefinedFn {
   const validator = getScaleTypeValueValidator(yScale);
   return (datum, getValueAccessor) => {
     const yValue = getValueAccessor(datum);
@@ -184,6 +188,7 @@ export function isYValueDefinedFn(yScale: Scale, xScale: Scale): YDefinedFn {
 
 /** @internal */
 export const CHROME_PINCH_BUG_EPSILON = 0.5;
+
 /**
  * Temporary fix for Chromium bug
  * Shift a small pixel value when pixel diff is <= 0.5px
@@ -196,7 +201,7 @@ function chromeRenderBugBuffer(y1: number, y0: number): number {
 }
 
 /** @internal */
-export function getY1ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatum) => number {
+export function getY1ScaledValueOrThrowFn(yScale: Scale<number>): (datum: DataSeriesDatum) => number {
   const datumAccessor = getYDatumValueFn();
   const scaleY0Value = getY0ScaledValueOrThrowFn(yScale);
   return (datum) => {
@@ -207,7 +212,7 @@ export function getY1ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatu
 }
 
 /** @internal */
-export function getY0ScaledValueOrThrowFn(yScale: Scale): (datum: DataSeriesDatum) => number {
+export function getY0ScaledValueOrThrowFn(yScale: Scale<number>): (datum: DataSeriesDatum) => number {
   const isLogScale = isLogarithmicScale(yScale);
   const domainPolarity = getDomainPolarity(yScale.domain);
   const logBaseline = domainPolarity >= 0 ? Math.min(...yScale.domain) : Math.max(...yScale.domain);

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_annotations.ts
@@ -6,10 +6,11 @@
  * Side Public License, v 1.
  */
 
+import { Scale } from '../../../../scales';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
-import { AnnotationId, AxisId } from '../../../../utils/ids';
+import { AnnotationId, AxisId, GroupId } from '../../../../utils/ids';
 import { AnnotationDimensions } from '../../annotations/types';
 import { computeAnnotationDimensions } from '../../annotations/utils';
 import { computeSeriesGeometriesSelector } from './compute_series_geometries';
@@ -44,7 +45,7 @@ export const computeAnnotationDimensionsSelector = createCustomCachedSelector(
     return computeAnnotationDimensions(
       annotationSpecs,
       settingsSpec.rotation,
-      yScales,
+      yScales as Map<GroupId, Scale<number>>,
       xScale,
       axesSpecs,
       isHistogramMode,

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_small_multiple_scales.ts
@@ -16,8 +16,8 @@ import { computeSeriesDomainsSelector } from './compute_series_domains';
 
 /** @internal */
 export interface SmallMultipleScales {
-  horizontal: ScaleBand;
-  vertical: ScaleBand;
+  horizontal: ScaleBand<number | string>;
+  vertical: ScaleBand<number | string>;
 }
 
 /**
@@ -43,6 +43,10 @@ export function getScale(
   padding: RelativeBandsPadding = DEFAULT_SM_PANEL_PADDING,
 ) {
   const singlePanelSmallMultiple = domain.length <= 1;
-  const defaultDomain = domain.length === 0 ? [undefined] : domain;
-  return new ScaleBand(defaultDomain, [0, maxRange], undefined, singlePanelSmallMultiple ? 0 : padding);
+  return new ScaleBand(
+    domain.length > 0 ? domain : [(undefined as unknown) as number],
+    [0, maxRange],
+    undefined,
+    singlePanelSmallMultiple ? 0 : padding,
+  );
 }
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_cursor_band.ts
@@ -74,7 +74,7 @@ function getCursorBand(
   externalPointerEvent: PointerEvent | null,
   chartDimensions: Dimensions,
   settingsSpec: SettingsSpec,
-  xScale: Scale | undefined,
+  xScale: Scale<number | string> | undefined,
   seriesSpecs: BasicSeriesSpec[],
   totalBarsInCluster: number,
   isTooltipSnapEnabled: boolean,

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/get_projected_pointer_position.ts
@@ -64,7 +64,10 @@ function getProjectedPointerPosition(
   };
 }
 
-function getPosRelativeToPanel(panelScale: ScaleBand, pos: number): { pos: number; value: PrimitiveValue } {
+function getPosRelativeToPanel(
+  panelScale: ScaleBand<number | string>,
+  pos: number,
+): { pos: number; value: PrimitiveValue } {
   const outerPadding = panelScale.outerPadding * panelScale.step;
   const innerPadding = panelScale.innerPadding * panelScale.step;
   const numOfDomainSteps = panelScale.domain.length;

diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/is_tooltip_snap_enabled.ts
@@ -17,6 +17,6 @@ export const isTooltipSnapEnableSelector = createCustomCachedSelector(
   (seriesGeometries, snap) => isTooltipSnapEnabled(seriesGeometries.scales.xScale, snap),
 );
 
-function isTooltipSnapEnabled(xScale: Scale, snap: boolean) {
+function isTooltipSnapEnabled(xScale: Scale<number | string>, snap: boolean) {
   return (xScale && xScale.bandwidth > 0) || snap;
 }
diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/on_brush_end_caller.ts
@@ -83,7 +83,7 @@ export function createOnBrushEndCaller(): (state: GlobalChartState) => void {
                 lastDrag,
                 rotation,
                 histogramMode,
-                xScale,
+                xScale as Scale<number>,
                 smallMultipleScales,
                 minBrushDelta,
                 roundHistogramBrushValues,
@@ -134,7 +134,7 @@ function getXBrushExtent(
   lastDrag: DragState,
   rotation: Rotation,
   histogramMode: boolean,
-  xScale: Scale,
+  xScale: Scale<number>,
   smallMultipleScales: SmallMultipleScales,
   minBrushDelta?: number,
   roundHistogramBrushValues?: boolean,
@@ -190,7 +190,7 @@ function getYBrushExtents(
   chartDimensions: Dimensions,
   lastDrag: DragState,
   rotation: Rotation,
-  yScales: Map<GroupId, Scale>,
+  yScales: Map<GroupId, Scale<number | string>>,
   smallMultipleScales: SmallMultipleScales,
   minBrushDelta?: number,
 ): GroupBrushExtent[] | undefined {
@@ -212,8 +212,8 @@ function getYBrushExtents(
 
     const minPosScaled = yScale.invert(minPos);
     const maxPosScaled = yScale.invert(maxPos);
-    const minValue = clamp(minPosScaled, yScale.domain[0], maxPosScaled);
-    const maxValue = clamp(minPosScaled, maxPosScaled, yScale.domain[1]);
+    const minValue = clamp(minPosScaled, (yScale as Scale<number>).domain[0], maxPosScaled);
+    const maxValue = clamp(minPosScaled, maxPosScaled, (yScale as Scale<number>).domain[1]);
     yValues.push({ extent: [minValue, maxValue], groupId });
   });
   return yValues.length === 0 ? undefined : yValues;

diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/types.ts b/packages/charts/src/chart_types/xy_chart/state/utils/types.ts
@@ -42,8 +42,8 @@ export interface GeometriesCounts {
 
 /** @internal */
 export interface ComputedScales {
-  xScale: Scale;
-  yScales: Map<GroupId, Scale>;
+  xScale: Scale<number | string>;
+  yScales: Map<GroupId, Scale<number | string>>;
 }
 
 /** @internal */