elastic · monfera · Sep 22, 2021 · Sep 17, 2021 · Sep 17, 2021 · Sep 17, 2021
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -94,6 +94,7 @@ module.exports = {
     /*
      * Standard rules
      */
+    '@typescript-eslint/object-curly-spacing': 0,
     'no-restricted-syntax': 0, // this is a good rule, for-of is good
     'no-console': process.env.NODE_ENV === 'production' ? 2 : 1,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1,

diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts
@@ -341,7 +341,7 @@ class CommonPage {
 
       expect(element).toMatchImageSnapshot();
     } catch (error) {
-      throw new Error(error);
+      throw new Error(String(error));
     }
   }
 

diff --git a/package.json b/package.json
@@ -68,7 +68,7 @@
     "@elastic/eui": "^37.7.0",
     "@mdx-js/loader": "^1.6.6",
     "@microsoft/api-documenter": "^7.12.7",
-    "@microsoft/api-extractor": "^7.13.1",
+    "@microsoft/api-extractor": "^7.18.9",
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/commit-analyzer": "^8.0.1",
     "@semantic-release/exec": "^5.0.0",
@@ -104,8 +104,8 @@
     "@types/seedrandom": "^2.4.28",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^3.4.4",
-    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@typescript-eslint/parser": "^4.12.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.1",
+    "@typescript-eslint/parser": "^4.31.1",
     "autoprefixer": "^9.0.0",
     "backport": "^5.6.6",
     "canvas": "^2.8.0",
@@ -115,7 +115,8 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
     "eslint": "^7.17.0",
-    "eslint-config-airbnb-typescript": "^12.0.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^7.1.0",
     "eslint-plugin-elastic-charts": "link:./packages/eslint-plugin-elastic-charts",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -169,7 +170,7 @@
     "speed-measure-webpack-plugin": "^1.5.0",
     "ts-jest": "^26.5.5",
     "ts-prune": "^0.8.4",
-    "typescript": "^4.1.3",
+    "typescript": "^4.4.3",
     "webpack": "^4.46.0",
     "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.1.0"

diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md
@@ -1111,9 +1111,9 @@ export type HistogramModeAlignment = 'start' | 'center' | 'end';
 
 // @public (undocumented)
 export const HistogramModeAlignments: Readonly<{
-    Start: LineAlignSetting;
-    Center: LineAlignSetting;
-    End: LineAlignSetting;
+    Start: HistogramModeAlignment;
+    Center: HistogramModeAlignment;
+    End: HistogramModeAlignment;
 }>;
 
 // @public (undocumented)

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,11 +6,10 @@
  * 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, GroupId } from '../../../../utils/ids';
+import { AnnotationId, AxisId } from '../../../../utils/ids';
 import { AnnotationDimensions } from '../../annotations/types';
 import { computeAnnotationDimensions } from '../../annotations/utils';
 import { computeSeriesGeometriesSelector } from './compute_series_geometries';
@@ -45,7 +44,7 @@ export const computeAnnotationDimensionsSelector = createCustomCachedSelector(
     return computeAnnotationDimensions(
       annotationSpecs,
       settingsSpec.rotation,
-      yScales as Map<GroupId, Scale<number>>,
+      yScales,
       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
@@ -43,10 +43,5 @@ export function getScale(
   padding: RelativeBandsPadding = DEFAULT_SM_PANEL_PADDING,
 ) {
   const singlePanelSmallMultiple = domain.length <= 1;
-  return new ScaleBand(
-    domain.length > 0 ? domain : [(undefined as unknown) as number],
-    [0, maxRange],
-    undefined,
-    singlePanelSmallMultiple ? 0 : padding,
-  );
+  return new ScaleBand(domain, [0, maxRange], undefined, singlePanelSmallMultiple ? 0 : padding);
 }
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
@@ -190,7 +190,7 @@ function getYBrushExtents(
   chartDimensions: Dimensions,
   lastDrag: DragState,
   rotation: Rotation,
-  yScales: Map<GroupId, Scale<number | string>>,
+  yScales: Map<GroupId, Scale<number>>,
   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 as Scale<number>).domain[0], maxPosScaled);
-    const maxValue = clamp(minPosScaled, maxPosScaled, (yScale as Scale<number>).domain[1]);
+    const minValue = clamp(minPosScaled, yScale.domain[0], maxPosScaled);
+    const maxValue = clamp(minPosScaled, maxPosScaled, yScale.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
@@ -43,7 +43,7 @@ export interface GeometriesCounts {
 /** @internal */
 export interface ComputedScales {
   xScale: Scale<number | string>;
-  yScales: Map<GroupId, Scale<number | string>>;
+  yScales: Map<GroupId, Scale<number>>;
 }
 
 /** @internal */

diff --git a/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts b/packages/charts/src/chart_types/xy_chart/state/utils/utils.ts
@@ -278,7 +278,7 @@ export function computeXScaleOffset(
 function renderGeometries(
   dataSeries: DataSeries[],
   xDomain: XDomain,
-  yScales: Map<GroupId, Scale<number | string>>,
+  yScales: Map<GroupId, Scale<number>>,
   smVScale: Scale<number | string>,
   smHScale: Scale<number | string>,
   barIndexOrderPerPanel: Record<string, string[]>,
@@ -379,7 +379,7 @@ function renderGeometries(
         shift,
         ds,
         xScale,
-        yScale as Scale<number>,
+        yScale,
         panel,
         chartRotation,
         spec.minBarHeight ?? 0,
@@ -405,7 +405,7 @@ function renderGeometries(
         (xScale.bandwidth * bubbleShift) / 2,
         ds,
         xScale,
-        yScale as Scale<number>,
+        yScale,
         color,
         panel,
         isBandedSpec(spec.y0Accessors),
@@ -438,7 +438,7 @@ function renderGeometries(
         (xScale.bandwidth * lineShift) / 2,
         ds,
         xScale,
-        yScale as Scale<number>,
+        yScale,
         panel,
         color,
         spec.curve || CurveType.LINEAR,
@@ -471,7 +471,7 @@ function renderGeometries(
         (xScale.bandwidth * areaShift) / 2,
         ds,
         xScale,
-        yScale as Scale<number>,
+        yScale,
         panel,
         color,
         spec.curve || CurveType.LINEAR,

diff --git a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.ts
@@ -252,7 +252,7 @@ function axisMinMax(axisPosition: Position, chartRotation: Rotation, { width, he
 /** @internal */
 export function getAvailableTicks(
   axisSpec: AxisSpec,
-  scale: Scale<number>,
+  scale: Scale<number | string>,
   totalBarsInCluster: number,
   enableHistogramMode: boolean,
   fallBackTickFormatter: TickFormatter,
@@ -263,18 +263,15 @@ export function getAvailableTicks(
   const isSingleValueScale = scale.domain[0] === scale.domain[1];
   const hasAdditionalTicks = enableHistogramMode && scale.bandwidth > 0;
 
-  if (hasAdditionalTicks) {
-    const lastComputedTick = ticks[ticks.length - 1];
+  if (hasAdditionalTicks && !isSingleValueScale) {
+    // todo sure hope something ascertains this, otherwise we can't subtract in runtime:
+    const numericalTicks = ticks as number[];
+    const lastComputedTick = numericalTicks[numericalTicks.length - 1];
+    const penultimateComputedTick = numericalTicks[numericalTicks.length - 2];
+    const computedTickDistance = lastComputedTick - penultimateComputedTick;
+    const numTicks = scale.minInterval / computedTickDistance;
 
-    if (!isSingleValueScale) {
-      const penultimateComputedTick = ticks[ticks.length - 2];
-      const computedTickDistance = lastComputedTick - penultimateComputedTick;
-      const numTicks = scale.minInterval / computedTickDistance;
-
-      for (let i = 1; i <= numTicks; i++) {
-        ticks.push(i * computedTickDistance + lastComputedTick);
-      }
-    }
+    for (let i = 1; i <= numTicks; i++) ticks.push(i * computedTickDistance + lastComputedTick);
   }
   const shift = totalBarsInCluster > 0 ? totalBarsInCluster : 1;
   const band = scale.bandwidth / (1 - scale.barsPadding);
@@ -285,15 +282,15 @@ export function getAvailableTicks(
   const labelFormatter = axisSpec.labelFormat ?? tickFormatter;
 
   if (isSingleValueScale && hasAdditionalTicks) {
-    const [firstTickValue] = ticks;
+    // todo sure hope something ascertains this, otherwise we can't add in runtime:
+    const [firstTickValue] = ticks as number[];
     const firstLabel = tickFormatter(firstTickValue, tickFormatOptions);
     const firstTick = {
       value: firstTickValue,
       label: firstLabel,
       axisTickLabel: labelFormatter(firstTickValue, tickFormatOptions),
       position: (scale.scale(firstTickValue) ?? 0) + offset,
     };
-
     const lastTickValue = firstTickValue + scale.minInterval;
     const lastLabel = tickFormatter(lastTickValue, tickFormatOptions);
     const lastTick = {
@@ -311,7 +308,7 @@ export function getAvailableTicks(
 /** @internal */
 export function enableDuplicatedTicks(
   axisSpec: AxisSpec,
-  scale: Scale<number>,
+  scale: Scale<number | string>,
   offset: number,
   fallBackTickFormatter: TickFormatter,
   tickFormatOptions?: TickFormatterOptions,

diff --git a/packages/charts/src/chart_types/xy_chart/utils/scales.ts b/packages/charts/src/chart_types/xy_chart/utils/scales.ts
@@ -110,7 +110,7 @@ interface YScaleOptions {
  * Compute the y scales, one per groupId for the y axis.
  * @internal
  */
-export function computeYScales(options: YScaleOptions): Map<GroupId, Scale<number | string>> {
+export function computeYScales(options: YScaleOptions): Map<GroupId, Scale<number>> {
   const { yDomains, range, integersOnly } = options;
   return yDomains.reduce(
     (
@@ -128,12 +128,7 @@ export function computeYScales(options: YScaleOptions): Map<GroupId, Scale<numbe
       },
     ) => {
       const yScale = new ScaleContinuous(
-        {
-          type,
-          domain,
-          range,
-          nice,
-        },
+        { type, domain, range, nice },
         {
           desiredTickCount,
           integersOnly,
@@ -146,6 +141,6 @@ export function computeYScales(options: YScaleOptions): Map<GroupId, Scale<numbe
       yScales.set(groupId, yScale);
       return yScales;
     },
-    new Map<GroupId, Scale<number | string>>(),
+    new Map<GroupId, Scale<number>>(),
   );
 }
diff --git a/packages/charts/src/components/chart.tsx b/packages/charts/src/components/chart.tsx
@@ -47,8 +47,9 @@ interface ChartState {
 const getMiddlware = (id: string): StoreEnhancer => {
   const middlware: Middleware<any, any, any>[] = [];
 
+  // eslint-disable-next-line no-underscore-dangle
   if (typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,no-underscore-dangle
     return (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
       trace: true,
       name: `@elastic/charts (id: ${id})`,

diff --git a/packages/charts/src/components/portal/tooltip_portal.tsx b/packages/charts/src/components/portal/tooltip_portal.tsx
@@ -7,12 +7,12 @@
  */
 
 import { createPopper, Instance } from '@popperjs/core';
-import { useRef, useEffect, useCallback, ReactNode, useMemo } from 'react';
+import { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
-import { mergePartial, isDefined } from '../../utils/common';
+import { isDefined, mergePartial } from '../../utils/common';
 import { Padding } from '../../utils/dimensions';
-import { TooltipPortalSettings, PortalAnchorRef } from './types';
+import { PortalAnchorRef, TooltipPortalSettings } from './types';
 import { DEFAULT_POPPER_SETTINGS, getOrCreateNode, isHTMLElement } from './utils';
 
 /**
@@ -94,16 +94,12 @@ const TooltipPortalComponent = ({
    * Popper instance used to manage position of tooltip.
    */
   const popper = useRef<Instance | null>(null);
-
-  const popperSettings = useMemo(
-    () => mergePartial(DEFAULT_POPPER_SETTINGS, settings, { mergeOptionalPartialValues: true }),
-
-    [settings],
-  );
-
+  const base = DEFAULT_POPPER_SETTINGS;
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  const ps = useMemo(() => mergePartial(base, settings, { mergeOptionalPartialValues: true }), [settings, base]);
   const anchorPosition = (anchor as PortalAnchorRef)?.position;
   const position = useMemo(() => (isHTMLElement(anchor) ? null : anchorPosition), [anchor, anchorPosition]);
-
   const destroyPopper = useCallback(() => {
     if (popper.current) {
       popper.current.destroy();
@@ -116,7 +112,7 @@ const TooltipPortalComponent = ({
       return;
     }
 
-    const { fallbackPlacements, placement, boundary, offset, boundaryPadding } = popperSettings;
+    const { fallbackPlacements, placement, boundary, offset, boundaryPadding } = ps;
     popper.current = createPopper(anchorNode.current, portalNode.current, {
       strategy: 'absolute',
       placement,
@@ -148,13 +144,7 @@ const TooltipPortalComponent = ({
       ],
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    visible,
-    popperSettings.fallbackPlacements,
-    popperSettings.placement,
-    popperSettings.boundary,
-    popperSettings.offset,
-  ]);
+  }, [visible, ps.fallbackPlacements, ps.placement, ps.boundary, ps.offset]);
 
   useEffect(() => {
     setPopper();
@@ -173,7 +163,7 @@ const TooltipPortalComponent = ({
   useEffect(() => {
     destroyPopper();
     setPopper();
-  }, [destroyPopper, setPopper, popperSettings]);
+  }, [destroyPopper, setPopper, ps]);
 
   useEffect(() => {
     if (!visible) {

diff --git a/packages/charts/src/mocks/specs/specs.ts b/packages/charts/src/mocks/specs/specs.ts
@@ -343,6 +343,8 @@ export class MockGlobalSpec {
   };
 
   static settings(partial?: Partial<SettingsSpec>): SettingsSpec {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     return mergePartial<SettingsSpec>(MockGlobalSpec.settingsBase, partial, { mergeOptionalPartialValues: true });
   }
 

diff --git a/packages/charts/src/scales/index.ts b/packages/charts/src/scales/index.ts
@@ -37,9 +37,8 @@ export interface Scale<T> {
   step: number;
   ticks: () => T[];
   scale: (value?: PrimitiveValue) => number | null;
-  scaleOrThrow(value?: PrimitiveValue): number;
   pureScale: (value?: PrimitiveValue) => number | null;
-  invert: (value: number) => any;
+  invert: (value: number) => T;
   invertWithStep: (
     value: number,
     data: any[],
@@ -61,6 +60,8 @@ export interface Scale<T> {
   unit?: string;
   isInverted: boolean;
   barsPadding: number;
+
+  scaleOrThrow(value?: PrimitiveValue): number;
 }
 
 /** @internal */