refactor(typings): prepare for upgrade TS to 3.7

src/chart_types/xy_chart/rendering/rendering.test.ts

@@ -1,14 +1,14 @@
 import { getSpecId } from '../../../utils/ids';
 import {
   BarGeometry,
-  getGeometryStyle,
+  getGeometryStateStyle,
   isPointOnGeometry,
   PointGeometry,
   getBarStyleOverrides,
   GeometryId,
   getPointStyleOverrides,
 } from './rendering';
-import { BarSeriesStyle, SharedGeometryStyle, PointStyle } from '../../../utils/themes/theme';
+import { BarSeriesStyle, SharedGeometryStateStyle, PointStyle } from '../../../utils/themes/theme';
 import { DataSeriesDatum } from '../utils/series';
 import { RecursivePartial, mergePartial } from '../../../utils/commons';
 
@@ -116,7 +116,7 @@ describe('Rendering utils', () => {
       },
     };
 
-    const sharedThemeStyle: SharedGeometryStyle = {
+    const sharedThemeStyle: SharedGeometryStateStyle = {
       default: {
         opacity: 1,
       },
@@ -129,41 +129,41 @@ describe('Rendering utils', () => {
     };
 
     // no highlighted elements
-    const defaultStyle = getGeometryStyle(geometryId, null, sharedThemeStyle);
+    const defaultStyle = getGeometryStateStyle(geometryId, null, sharedThemeStyle);
     expect(defaultStyle).toBe(sharedThemeStyle.default);
 
     // should equal highlighted opacity
-    const highlightedStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedThemeStyle);
+    const highlightedStyle = getGeometryStateStyle(geometryId, highlightedLegendItem, sharedThemeStyle);
     expect(highlightedStyle).toBe(sharedThemeStyle.highlighted);
 
     // should equal unhighlighted opacity
-    const unhighlightedStyle = getGeometryStyle(geometryId, unhighlightedLegendItem, sharedThemeStyle);
+    const unhighlightedStyle = getGeometryStateStyle(geometryId, unhighlightedLegendItem, sharedThemeStyle);
     expect(unhighlightedStyle).toBe(sharedThemeStyle.unhighlighted);
 
     // should equal custom spec highlighted opacity
-    const customHighlightedStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedThemeStyle);
+    const customHighlightedStyle = getGeometryStateStyle(geometryId, highlightedLegendItem, sharedThemeStyle);
     expect(customHighlightedStyle).toBe(sharedThemeStyle.highlighted);
 
     // unhighlighted elements remain unchanged with custom opacity
-    const customUnhighlightedStyle = getGeometryStyle(geometryId, unhighlightedLegendItem, sharedThemeStyle);
+    const customUnhighlightedStyle = getGeometryStateStyle(geometryId, unhighlightedLegendItem, sharedThemeStyle);
     expect(customUnhighlightedStyle).toBe(sharedThemeStyle.unhighlighted);
 
     // has individual highlight
-    const hasIndividualHighlight = getGeometryStyle(geometryId, null, sharedThemeStyle, {
+    const hasIndividualHighlight = getGeometryStateStyle(geometryId, null, sharedThemeStyle, {
       hasHighlight: true,
       hasGeometryHover: true,
     });
     expect(hasIndividualHighlight).toBe(sharedThemeStyle.highlighted);
 
     // no highlight
-    const noHighlight = getGeometryStyle(geometryId, null, sharedThemeStyle, {
+    const noHighlight = getGeometryStateStyle(geometryId, null, sharedThemeStyle, {
       hasHighlight: false,
       hasGeometryHover: true,
     });
     expect(noHighlight).toBe(sharedThemeStyle.unhighlighted);
 
     // no geometry hover
-    const noHover = getGeometryStyle(geometryId, null, sharedThemeStyle, {
+    const noHover = getGeometryStateStyle(geometryId, null, sharedThemeStyle, {
       hasHighlight: true,
       hasGeometryHover: false,
     });

src/chart_types/xy_chart/rendering/rendering.ts

@@ -7,8 +7,9 @@ import {
   LineSeriesStyle,
   LineStyle,
   PointStyle,
-  SharedGeometryStyle,
+  SharedGeometryStateStyle,
   BarSeriesStyle,
+  GeometryStateStyle,
 } from '../../../utils/themes/theme';
 import { SpecId } from '../../../utils/ids';
 import { isLogarithmicScale } from '../../../utils/scales/scale_continuous';
@@ -41,16 +42,6 @@ export interface GeometryValue {
   accessor: AccessorType;
 }
 
-/** Shared style properties for varies geometries */
-export interface GeometryStyle {
-  /**
-   * Opacity multiplier
-   *
-   * if set to `0.5` all given opacities will be halfed
-   */
-  opacity: number;
-}
-
 export type IndexedGeometry = PointGeometry | BarGeometry;
 
 export interface PointGeometry {
@@ -529,12 +520,12 @@ export function renderArea(
   };
 }
 
-export function getGeometryStyle(
+export function getGeometryStateStyle(
   geometryId: GeometryId,
   highlightedLegendItem: LegendItem | null,
-  sharedGeometryStyle: SharedGeometryStyle,
+  sharedGeometryStyle: SharedGeometryStateStyle,
   individualHighlight?: { [key: string]: boolean },
-): GeometryStyle {
+): GeometryStateStyle {
   const { default: defaultStyles, highlighted, unhighlighted } = sharedGeometryStyle;
 
   if (highlightedLegendItem != null) {

src/chart_types/xy_chart/utils/series.ts

@@ -255,8 +255,8 @@ export function getRawDataSeries(
     areaSeries: 0,
   };
   const seriesSpecsCount = seriesSpecs.length;
-  let i;
-  for (i = 0; i < seriesSpecsCount; i++) {
+  let i = 0;
+  for (; i < seriesSpecsCount; i++) {
     const spec = seriesSpecs[i];
     const { id, seriesType } = spec;
     const ds = dataSeries.get(id);

src/components/react_canvas/area_geometries.tsx

@@ -4,12 +4,12 @@ import { Circle, Group, Path } from 'react-konva';
 import { LegendItem } from '../../chart_types/xy_chart/legend/legend';
 import {
   AreaGeometry,
-  getGeometryStyle,
+  getGeometryStateStyle,
   PointGeometry,
   getGeometryIdKey,
   GeometryId,
 } from '../../chart_types/xy_chart/rendering/rendering';
-import { SharedGeometryStyle, PointStyle } from '../../utils/themes/theme';
+import { SharedGeometryStateStyle, PointStyle } from '../../utils/themes/theme';
 import {
   buildAreaRenderProps,
   buildPointStyleProps,
@@ -22,7 +22,7 @@ import { mergePartial } from '../../utils/commons';
 interface AreaGeometriesDataProps {
   animated?: boolean;
   areas: AreaGeometry[];
-  sharedStyle: SharedGeometryStyle;
+  sharedStyle: SharedGeometryStateStyle;
   highlightedLegendItem: LegendItem | null;
   clippings: ContainerConfig;
 }
@@ -59,23 +59,23 @@ export class AreaGeometries extends React.PureComponent<AreaGeometriesDataProps,
         acc.push(this.renderAreaLines(glyph, i, sharedStyle, highlightedLegendItem, clippings));
       }
       if (seriesPointStyle.visible) {
-        const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
-        const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStyle);
+        const geometryStateStyle = getGeometryStateStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
+        const pointStyleProps = buildPointStyleProps(glyph.color, seriesPointStyle, geometryStateStyle);
         acc.push(...this.renderPoints(glyph.points, i, pointStyleProps, glyph.geometryId));
       }
       return acc;
     }, []);
   };
   private renderArea = (
     glyph: AreaGeometry,
-    sharedStyle: SharedGeometryStyle,
+    sharedStyle: SharedGeometryStateStyle,
     highlightedLegendItem: LegendItem | null,
     clippings: ContainerConfig,
   ): JSX.Element => {
     const { area, color, transform, geometryId, seriesAreaStyle } = glyph;
-    const geometryStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedStyle);
+    const geometryStateStyle = getGeometryStateStyle(geometryId, highlightedLegendItem, sharedStyle);
     const key = getGeometryIdKey(geometryId, 'area-');
-    const areaProps = buildAreaRenderProps(transform.x, area, color, seriesAreaStyle, geometryStyle);
+    const areaProps = buildAreaRenderProps(transform.x, area, color, seriesAreaStyle, geometryStateStyle);
     return (
       <Group {...clippings} key={key}>
         <Path {...areaProps} />
@@ -85,16 +85,16 @@ export class AreaGeometries extends React.PureComponent<AreaGeometriesDataProps,
   private renderAreaLines = (
     glyph: AreaGeometry,
     areaIndex: number,
-    sharedStyle: SharedGeometryStyle,
+    sharedStyle: SharedGeometryStateStyle,
     highlightedLegendItem: LegendItem | null,
     clippings: ContainerConfig,
   ): JSX.Element => {
     const { lines, color, geometryId, transform, seriesAreaLineStyle } = glyph;
-    const geometryStyle = getGeometryStyle(geometryId, highlightedLegendItem, sharedStyle);
+    const geometryStateStyle = getGeometryStateStyle(geometryId, highlightedLegendItem, sharedStyle);
     const groupKey = getGeometryIdKey(geometryId, `area-line-${areaIndex}`);
     const linesElements = lines.map<JSX.Element>((linePath, lineIndex) => {
       const key = getGeometryIdKey(geometryId, `area-line-${areaIndex}-${lineIndex}`);
-      const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesAreaLineStyle, geometryStyle);
+      const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesAreaLineStyle, geometryStateStyle);
       return <Path {...lineProps} key={key} />;
     });
     return (

src/components/react_canvas/bar_geometries.tsx

@@ -3,14 +3,14 @@ import React from 'react';
 import { Group, Rect } from 'react-konva';
 import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
 import { LegendItem } from '../../chart_types/xy_chart/legend/legend';
-import { BarGeometry, getGeometryStyle } from '../../chart_types/xy_chart/rendering/rendering';
-import { SharedGeometryStyle } from '../../utils/themes/theme';
+import { BarGeometry, getGeometryStateStyle } from '../../chart_types/xy_chart/rendering/rendering';
+import { SharedGeometryStateStyle } from '../../utils/themes/theme';
 import { buildBarRenderProps, buildBarBorderRenderProps } from './utils/rendering_props_utils';
 
 interface BarGeometriesDataProps {
   animated?: boolean;
   bars: BarGeometry[];
-  sharedStyle: SharedGeometryStyle;
+  sharedStyle: SharedGeometryStateStyle;
   highlightedLegendItem: LegendItem | null;
   clippings: ContainerConfig;
 }
@@ -52,7 +52,7 @@ export class BarGeometries extends React.PureComponent<BarGeometriesDataProps, B
         hasHighlight,
       };
 
-      const geometryStyle = getGeometryStyle(
+      const geometryStyle = getGeometryStateStyle(
         bar.geometryId,
         this.props.highlightedLegendItem,
         sharedStyle,

src/components/react_canvas/line_geometries.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { Circle, Group, Path } from 'react-konva';
 import { LegendItem } from '../../chart_types/xy_chart/legend/legend';
 import {
-  getGeometryStyle,
+  getGeometryStateStyle,
   LineGeometry,
   PointGeometry,
   getGeometryIdKey,
 } from '../../chart_types/xy_chart/rendering/rendering';
-import { SharedGeometryStyle, PointStyle } from '../../utils/themes/theme';
+import { SharedGeometryStateStyle, PointStyle } from '../../utils/themes/theme';
 import {
   buildLineRenderProps,
   buildPointStyleProps,
@@ -20,7 +20,7 @@ import { mergePartial } from '../../utils/commons';
 interface LineGeometriesDataProps {
   animated?: boolean;
   lines: LineGeometry[];
-  sharedStyle: SharedGeometryStyle;
+  sharedStyle: SharedGeometryStateStyle;
   highlightedLegendItem: LegendItem | null;
   clippings: ContainerConfig;
 }
@@ -90,10 +90,10 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
     }, []);
   };
 
-  getLineToRender(line: LineGeometry, sharedStyle: SharedGeometryStyle, key: string) {
+  getLineToRender(line: LineGeometry, sharedStyle: SharedGeometryStateStyle, key: string) {
     const { clippings } = this.props;
     const { line: linePath, color, transform, geometryId, seriesLineStyle } = line;
-    const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
+    const geometryStyle = getGeometryStateStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
     const lineProps = buildLineRenderProps(transform.x, linePath, color, seriesLineStyle, geometryStyle);
     return (
       <Group {...clippings} key={key}>
@@ -102,9 +102,9 @@ export class LineGeometries extends React.PureComponent<LineGeometriesDataProps,
     );
   }
 
-  getPointToRender(line: LineGeometry, sharedStyle: SharedGeometryStyle, key: string) {
+  getPointToRender(line: LineGeometry, sharedStyle: SharedGeometryStateStyle, key: string) {
     const { points, color, geometryId, seriesPointStyle } = line;
-    const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
+    const geometryStyle = getGeometryStateStyle(geometryId, this.props.highlightedLegendItem, sharedStyle);
     const pointStyleProps = buildPointStyleProps(color, seriesPointStyle, geometryStyle);
     return this.renderPoints(points, key, pointStyleProps);
   }

src/components/react_canvas/reactive_chart.tsx

@@ -61,8 +61,8 @@ function limitPoint(value: number, min: number, max: number) {
 }
 function getPoint(event: MouseEvent, extent: BrushExtent): Point {
   const point = {
-    x: limitPoint(event.layerX, extent.minX, extent.maxX),
-    y: limitPoint(event.layerY, extent.minY, extent.maxY),
+    x: limitPoint(event.offsetX, extent.minX, extent.maxX),
+    y: limitPoint(event.offsetY, extent.minY, extent.maxY),
   };
   return point;
 }