refactor(typings): prepare for upgrade TS to 3.7 (opensearch-project#402

)

Fix issues related to typescript `3.7`

BREAKING CHANGE: We have a few exported styles, used in the Theme that are changed: SharedGeometryStyle to SharedGeometryStateStyle and GeometryStyle to GeometryStateStyle

packages/osd-charts/.ci/jobs/defaults.yml

@@ -1,5 +1,4 @@
 ---
-
 ##### GLOBAL METADATA
 
 - meta:
@@ -12,65 +11,65 @@
       daysToKeep: 30
       numToKeep: 100
     properties:
-    - github:
-        url: https://github.com/elastic/elastic-charts/
-    - inject:
-        properties-content: 'HOME=$JENKINS_HOME
+      - github:
+          url: https://github.com/elastic/elastic-charts/
+      - inject:
+          properties-content: 'HOME=$JENKINS_HOME
 
-          '
+            '
     concurrent: true
     node: linux && docker
     scm:
-    - git:
-        name: origin
-        credentials-id: f6c7695a-671e-4f4f-a331-acdce44ff9ba
-        reference-repo: /var/lib/jenkins/.git-references/elastic-charts.git
-        branches:
-        - ${ghprbActualCommit}
-        url: git@github.com:elastic/elastic-charts.git
-        refspec: +refs/pull/${ghprbPullId}/*:refs/remotes/origin/pr/${ghprbPullId}/*
-        basedir: ''
-        wipe-workspace: 'True'
+      - git:
+          name: origin
+          credentials-id: f6c7695a-671e-4f4f-a331-acdce44ff9ba
+          reference-repo: /var/lib/jenkins/.git-references/elastic-charts.git
+          branches:
+            - ${ghprbActualCommit}
+          url: git@github.com:elastic/elastic-charts.git
+          refspec: +refs/pull/${ghprbPullId}/*:refs/remotes/origin/pr/${ghprbPullId}/*
+          basedir: ''
+          wipe-workspace: 'True'
     triggers:
-    - github-pull-request:
-        org-list:
-        - elastic
-        allow-whitelist-orgs-as-admins: true
-        github-hooks: true
-        status-context: kibana-ci
-        cancel-builds-on-update: true
+      - github-pull-request:
+          org-list:
+            - elastic
+          allow-whitelist-orgs-as-admins: true
+          github-hooks: true
+          status-context: kibana-ci
+          cancel-builds-on-update: true
     vault:
       role_id: 443f9500-f443-19ba-d698-1a48e104f8ba
     wrappers:
-    - ansicolor
-    - timeout:
-        type: absolute
-        timeout: 180
-        fail: true
-    - timestamps
+      - ansicolor
+      - timeout:
+          type: absolute
+          timeout: 180
+          fail: true
+      - timestamps
     builders:
-    - shell: |-
-        #!/usr/local/bin/runbld
+      - shell: |-
+          #!/usr/local/bin/runbld
 
-        set -euo pipefail
+          set -euo pipefail
 
-        set +x
-        export VAULT_TOKEN=$(vault write -field=token auth/approle/login role_id="$VAULT_ROLE_ID" secret_id="$VAULT_SECRET_ID")
-        unset VAULT_ROLE_ID VAULT_SECRET_ID
-        export CODECOV_TOKEN=$(vault read -field=token secret/kibana-issues/prod/codecov)
-        unset VAULT_TOKEN
-        set -x
+          set +x
+          export VAULT_TOKEN=$(vault write -field=token auth/approle/login role_id="$VAULT_ROLE_ID" secret_id="$VAULT_SECRET_ID")
+          unset VAULT_ROLE_ID VAULT_SECRET_ID
+          export CODECOV_TOKEN=$(vault read -field=token secret/kibana-issues/prod/codecov)
+          unset VAULT_TOKEN
+          set -x
 
-        ./.ci/run.sh
+          ./.ci/run.sh
     publishers:
-    - email:
-        recipients: infra-root+build@elastic.co
-    - google-cloud-storage:
-        credentials-id: kibana-ci-gcs-plugin
-        uploads:
-        - classic:
-            file-pattern: integration/**/__diff_output__/**/*
-            storage-location: gs://kibana-ci-artifacts/jobs/$JOB_NAME/$BUILD_NUMBER
-            share-publicly: true
-            upload-for-failed-jobs: true
-            show-inline: true
+      - email:
+          recipients: infra-root+build@elastic.co
+      - google-cloud-storage:
+          credentials-id: kibana-ci-gcs-plugin
+          uploads:
+            - classic:
+                file-pattern: integration/**/__diff_output__/**/*
+                storage-location: gs://kibana-ci-artifacts/jobs/$JOB_NAME/$BUILD_NUMBER
+                share-publicly: true
+                upload-for-failed-jobs: true
+                show-inline: true

packages/osd-charts/integration/tsconfig.json

@@ -1,6 +1,4 @@
 {
   "extends": "../tsconfig",
-  "include": [
-    "./**/*"
-  ]
+  "include": ["./**/*"]
 }

packages/osd-charts/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';
 
@@ -122,7 +122,7 @@ describe('Rendering utils', () => {
       },
     };
 
-    const sharedThemeStyle: SharedGeometryStyle = {
+    const sharedThemeStyle: SharedGeometryStateStyle = {
       default: {
         opacity: 1,
       },
@@ -135,41 +135,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,
     });

packages/osd-charts/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 {
@@ -560,12 +551,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) {

packages/osd-charts/src/chart_types/xy_chart/utils/series.ts

@@ -281,8 +281,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);

packages/osd-charts/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 (

packages/osd-charts/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,