From ffe45c82c99c72e5db7b870fa758e94d772f8aed Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Thu, 23 Sep 2021 14:40:46 -0500 Subject: [PATCH] chore: cleanup types (#1404) - remove unnecessary `// @ts-ignore` comments - add descriptions to legit `// @ts-ignore` comments - add [rule](https://github.com/typescript-eslint/typescript-eslint/blob/v4.31.1/packages/eslint-plugin/docs/rules/ban-ts-comment.md) to error on all ts-comments with no description - remove `global.d.ts` in favor of `declarations/` - fix type issue related to `jest-extended` and custom matchers - fix types around `sortSeriesBy` hidden setting - fix type errors around required `domain` options - fix type errors around union brush events - remove deprecated [`msSaveBlob`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/msSaveBlob) usage - add step to ci to check `yarn typecheck:all` as type errors somehow snuck into `master` --- .ci/global_setup.sh | 2 -- .eslintrc.js | 11 ++++++- .github/workflows/ci.yaml | 14 ++------ .github/workflows/release.yaml | 4 --- declarations/@types/jest.d.ts | 33 +++++++++++++++++++ global.d.ts => declarations/@types/node.d.ts | 5 +-- integration/helpers.ts | 2 +- integration/jest.config.js | 2 +- integration/page_objects/common.ts | 5 ++- .../mocks/@storybook/addon-knobs/index.ts | 10 +++--- integration/tsconfig.json | 2 +- jest.config.js | 6 +++- .../renderer/svg/connected_component.tsx | 2 +- .../state/chart_state.interactions.test.tsx | 4 +-- .../state/selectors/compute_legend.ts | 2 +- .../state/selectors/compute_series_domains.ts | 2 +- .../xy_chart/utils/axis_utils.test.ts | 2 -- .../xy_chart/utils/fit_function.test.ts | 6 ++-- .../src/components/portal/tooltip_portal.tsx | 2 +- packages/charts/src/mocks/specs/specs.ts | 2 +- .../src/scales/scale_continuous.test.ts | 2 +- packages/charts/src/utils/common.test.ts | 4 +-- packages/charts/src/utils/fast_deep_equal.ts | 6 ++-- packages/charts/src/utils/series_sort.ts | 14 +++----- playground/tsconfig.json | 2 +- ...om_matchers.ts => custom_matchers.mock.ts} | 27 --------------- scripts/setup_enzyme.ts | 4 +-- storybook/preload_icons.ts | 2 +- .../6_test_single_bar_histogram.story.tsx | 2 ++ .../annotations/rects/6_zero_domain.story.tsx | 11 ++++++- storybook/stories/area/13_band_area.story.tsx | 6 +++- storybook/stories/area/17_negative.story.tsx | 6 +++- .../area/18_negative_positive.story.tsx | 6 +++- .../stories/area/19_negative_band.story.tsx | 6 +++- .../area/21_with_time_timeslip.story.tsx | 6 ++-- .../axes/10_one_domain_bound.story.tsx | 2 ++ .../axes/11_fit_domain_extent.story.tsx | 9 ++++- .../stories/axes/12_duplicate_ticks.story.tsx | 2 +- .../bar/26_single_data_linear.story.tsx | 1 + .../bar/30_stacked_to_extent.story.tsx | 6 +++- storybook/stories/bar/33_band_bar.story.tsx | 6 +++- .../stories/bar/43_test_discover.story.tsx | 2 ++ .../bar/44_test_single_histogram.story.tsx | 2 ++ .../bar/6_linear_no_linear_interval.story.tsx | 8 ++++- .../stories/bar/8_with_log_yaxis.story.tsx | 6 +++- .../stories/bar/9_with_stacked_log.story.tsx | 6 +++- storybook/stories/bubble/1_simple.story.tsx | 2 +- storybook/stories/heatmap/1_basic.story.tsx | 14 +++++--- .../interactions/14_crosshair_time.story.tsx | 6 +++- .../interactions/17_png_export.story.tsx | 27 ++++++++------- .../stories/legend/10_sunburst.story.tsx | 1 - .../10_sunburst_repeated_label.story.tsx | 2 +- .../line/13_line_mark_accessor.story.tsx | 5 ++- storybook/stories/line/2_w_axis.story.tsx | 8 ++++- .../scales/7_log_scale_options.story.tsx | 3 +- .../small_multiples/3_grid_lines.story.tsx | 9 +++-- .../4_filter_zero_values_log.story.tsx | 2 +- storybook/stories/utils/knobs.ts | 10 ++---- storybook/tsconfig.json | 8 +---- tsconfig.jest.json | 2 +- tsconfig.json | 2 +- 61 files changed, 222 insertions(+), 151 deletions(-) create mode 100644 declarations/@types/jest.d.ts rename global.d.ts => declarations/@types/node.d.ts (95%) rename scripts/{custom_matchers.ts => custom_matchers.mock.ts} (69%) diff --git a/.ci/global_setup.sh b/.ci/global_setup.sh index c506db3e1e..d076416e3e 100755 --- a/.ci/global_setup.sh +++ b/.ci/global_setup.sh @@ -84,8 +84,6 @@ yarn config set yarn-offline-mirror "$cacheDir/yarn-offline-cache" yarnGlobalDir="$(yarn global bin)" export PATH="$PATH:$yarnGlobalDir" -# avoid download puppeteer locally (we use the dockerized version) -export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true ### ### install dependencies ### diff --git a/.eslintrc.js b/.eslintrc.js index 19699c5be6..94449bbb47 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -178,7 +178,16 @@ module.exports = { '@typescript-eslint/ban-ts-ignore': 0, '@typescript-eslint/indent': 0, '@typescript-eslint/no-inferrable-types': 0, - '@typescript-eslint/ban-ts-comment': 1, + '@typescript-eslint/ban-ts-comment': [ + 2, + { + 'ts-expect-error': 'allow-with-description', + 'ts-ignore': 'allow-with-description', + 'ts-nocheck': 'allow-with-description', + 'ts-check': 'allow-with-description', + minimumDescriptionLength: 3, + }, + ], '@typescript-eslint/no-unused-vars': [ 'error', { diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml index 7b17c2d1e2..9400cf4084 100644 --- a/.github/workflows/ci.yaml +++ b/.github/workflows/ci.yaml @@ -50,8 +50,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true eslint: name: Eslint @@ -71,8 +69,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true # ----------------------------------- - name: Eslint check @@ -96,8 +92,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true # ----------------------------------- - name: Prettier check @@ -121,10 +115,10 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true # ----------------------------------- + - name: Run global typecheck + run: yarn typecheck:all - name: Run API-Extractor run: yarn api:check - name: Handle API-Extractor failure @@ -154,8 +148,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true # ----------------------------------- - name: TimeZone tests @@ -182,8 +174,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true # ----------------------------------- - name: Building storybook diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml index fac7824b07..81395bfb64 100644 --- a/.github/workflows/release.yaml +++ b/.github/workflows/release.yaml @@ -62,8 +62,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true - name: Lint check run: yarn lint - name: Prettier check @@ -91,8 +89,6 @@ jobs: uses: bahmutov/npm-install@v1 with: useRollingCache: true - env: - PUPPETEER_SKIP_CHROMIUM_DOWNLOAD: true - name: Build library run: yarn build diff --git a/declarations/@types/jest.d.ts b/declarations/@types/jest.d.ts new file mode 100644 index 0000000000..369461376a --- /dev/null +++ b/declarations/@types/jest.d.ts @@ -0,0 +1,33 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +export * from 'jest-extended'; // https://github.com/jest-community/jest-extended + +/** + * Final Matcher type with `this` and `received` args removed from jest matcher function + */ +type MatcherParameters any> = T extends ( + this: any, + received: any, + ...args: infer P +) => any + ? P + : never; + +declare global { + namespace jest { + interface Matchers { + /** + * Expect array to be filled with value, and optionally length + */ + toEqualArrayOf(...args: MatcherParameters): R; + } + } +} + +export {}; // ensure this is parsed as a module. diff --git a/global.d.ts b/declarations/@types/node.d.ts similarity index 95% rename from global.d.ts rename to declarations/@types/node.d.ts index c95610c5ab..4e18d8d593 100644 --- a/global.d.ts +++ b/declarations/@types/node.d.ts @@ -6,8 +6,7 @@ * Side Public License, v 1. */ -import 'jest-extended'; // https://github.com/jest-community/jest-extended - +// Super flaky not sure why declare global { namespace NodeJS { interface ProcessEnv { @@ -56,3 +55,5 @@ declare global { } } } + +export {}; // ensure this is parsed as a module. diff --git a/integration/helpers.ts b/integration/helpers.ts index b4e01a36a7..a0ed36af0c 100644 --- a/integration/helpers.ts +++ b/integration/helpers.ts @@ -15,7 +15,7 @@ import { getStorybook, configure } from '@storybook/react'; import { Rotation } from '../packages/charts/src'; import { ThemeId } from '../storybook/use_base_theme'; -// @ts-ignore +// @ts-ignore - no type declarations import { isLegacyVRTServer } from './config'; export type StoryInfo = [string, string, number]; diff --git a/integration/jest.config.js b/integration/jest.config.js index 02dd72ec66..6a24f0265a 100644 --- a/integration/jest.config.js +++ b/integration/jest.config.js @@ -13,7 +13,7 @@ const tsPreset = require('ts-jest/jest-preset'); const { debug } = require('./config'); module.exports = { - setupFilesAfterEnv: ['/jest_env_setup.ts'], + setupFilesAfterEnv: ['/jest_env_setup.ts', 'jest-extended'], globals: { 'ts-jest': { tsconfig: '/tsconfig.json', diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts index 164fa8af0e..465d0f3523 100644 --- a/integration/page_objects/common.ts +++ b/integration/page_objects/common.ts @@ -11,14 +11,13 @@ import Url from 'url'; import { AXNode } from 'puppeteer'; import { DRAG_DETECTION_TIMEOUT } from '../../packages/charts/src/state/reducers/interactions'; -// @ts-ignore +// @ts-ignore - no type declarations import { port, hostname, debug, isLegacyVRTServer } from '../config'; import { toMatchImageSnapshot } from '../jest_env_setup'; const legacyBaseUrl = `http://${hostname}:${port}/iframe.html`; -// Use to log console statements from within the page.evaluate blocks -// @ts-ignore +// @ts-ignore - used to log console statements from within the page.evaluate blocks // page.on('console', (msg) => (msg._type === 'log' ? console.log('PAGE LOG:', msg._text) : null)); // eslint-disable-line no-console expect.extend({ toMatchImageSnapshot }); diff --git a/integration/server/mocks/@storybook/addon-knobs/index.ts b/integration/server/mocks/@storybook/addon-knobs/index.ts index abe2869fed..c2d8ad522f 100644 --- a/integration/server/mocks/@storybook/addon-knobs/index.ts +++ b/integration/server/mocks/@storybook/addon-knobs/index.ts @@ -45,14 +45,14 @@ export function text(name: string, dftValue: string, groupId?: string) { export function array(name: string, dftValues: unknown[], options: any, groupId?: string) { const params = getParams(); - const values = []; - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - for (const [key, value] of params) { + const values: string[] = []; + + params.forEach((value, key) => { if (key.startsWith(`${getKnobKey(name, groupId)}[`)) { values.push(value); } - } + }); + if (values.length === 0) { return dftValues; } diff --git a/integration/tsconfig.json b/integration/tsconfig.json index 3b68e959d0..8a98e20cfb 100644 --- a/integration/tsconfig.json +++ b/integration/tsconfig.json @@ -1,4 +1,4 @@ { "extends": "../tsconfig", - "include": ["./**/*", "../**/*.d.ts", "../scripts/custom_matchers.ts"] + "include": ["./**/*", "../scripts/custom_matchers.mock.ts"] } diff --git a/jest.config.js b/jest.config.js index 9a2ef96694..f481e016da 100644 --- a/jest.config.js +++ b/jest.config.js @@ -10,7 +10,11 @@ module.exports = { testMatch: ['**/?(*.)+(test).[jt]s?(x)'], roots: ['/packages/charts/src'], preset: 'ts-jest', - setupFilesAfterEnv: ['/scripts/setup_enzyme.ts', '/scripts/custom_matchers.ts'], + setupFilesAfterEnv: [ + '/scripts/setup_enzyme.ts', + '/scripts/custom_matchers.mock.ts', + 'jest-extended', + ], coveragePathIgnorePatterns: [ '/packages/charts/src/mocks', '/packages/charts/src/utils/d3-delaunay', diff --git a/packages/charts/src/chart_types/wordcloud/renderer/svg/connected_component.tsx b/packages/charts/src/chart_types/wordcloud/renderer/svg/connected_component.tsx index d9c6f86d12..742fbe2985 100644 --- a/packages/charts/src/chart_types/wordcloud/renderer/svg/connected_component.tsx +++ b/packages/charts/src/chart_types/wordcloud/renderer/svg/connected_component.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -// @ts-ignore +// @ts-ignore - remove in workcloud refactor import d3TagCloud from 'd3-cloud'; import React from 'react'; import { connect } from 'react-redux'; diff --git a/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx b/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx index 25eb74129c..a97d1e22f9 100644 --- a/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx +++ b/packages/charts/src/chart_types/xy_chart/state/chart_state.interactions.test.tsx @@ -6,10 +6,8 @@ * Side Public License, v 1. */ -// eslint-disable-next-line eslint-comments/disable-enable-pair /* eslint-disable jest/no-conditional-expect */ -import 'jest-extended'; import React from 'react'; import { Store } from 'redux'; @@ -1356,3 +1354,5 @@ describe('Clickable annotations', () => { expect(onAnnotationClick).toBeCalled(); }); }); + +/* eslint-enable jest/no-conditional-expect */ diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts index 3aadd6ee7f..a394688eef 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_legend.ts @@ -52,7 +52,7 @@ export const computeLegendSelector = createCustomCachedSelector( siDataSeriesMap, deselectedDataSeries, chartTheme, - // @ts-ignore + // @ts-ignore - hidden method for vislib usage only settings.sortSeriesBy, ); }, diff --git a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts index 9d6b846809..e06d630f01 100644 --- a/packages/charts/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts +++ b/packages/charts/src/chart_types/xy_chart/state/selectors/compute_series_domains.ts @@ -32,7 +32,7 @@ export const computeSeriesDomainsSelector = createCustomCachedSelector( deselectedDataSeries, settingsSpec.orderOrdinalBinsBy, smallMultiples, - // @ts-ignore + // @ts-ignore - hidden method for vislib usage only settingsSpec.sortSeriesBy, ); }, diff --git a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts index c309b40992..9b5ca9a680 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/axis_utils.test.ts @@ -7,10 +7,8 @@ */ import { DateTime } from 'luxon'; -// @ts-ignore import moment from 'moment-timezone'; -import 'jest-extended'; import { ChartType } from '../..'; import { MockGlobalSpec, MockSeriesSpec } from '../../../mocks/specs/specs'; import { MockStore } from '../../../mocks/store/store'; diff --git a/packages/charts/src/chart_types/xy_chart/utils/fit_function.test.ts b/packages/charts/src/chart_types/xy_chart/utils/fit_function.test.ts index 6bba3e9f73..0378e2ba2e 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/fit_function.test.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/fit_function.test.ts @@ -504,13 +504,13 @@ describe('Fit Function', () => { describe('sorting', () => { const spies: jest.SpyInstance[] = []; const mockArray: any[] = []; - // @ts-ignore + // @ts-ignore - mocking array prototype method jest.spyOn(mockArray, 'sort'); beforeAll(() => { - // @ts-ignore + // @ts-ignore - mocking array prototype method spies.push(jest.spyOn(dataSeries.data, 'sort')); - // @ts-ignore + // @ts-ignore - mocking array prototype method spies.push(jest.spyOn(dataSeries.data, 'slice').mockReturnValue(mockArray)); }); diff --git a/packages/charts/src/components/portal/tooltip_portal.tsx b/packages/charts/src/components/portal/tooltip_portal.tsx index e80470851f..67e078fb67 100644 --- a/packages/charts/src/components/portal/tooltip_portal.tsx +++ b/packages/charts/src/components/portal/tooltip_portal.tsx @@ -95,7 +95,7 @@ const TooltipPortalComponent = ({ */ const popper = useRef(null); const popperSettings = useMemo( - // @ts-ignore + // @ts-ignore - nesting limitation () => mergePartial(DEFAULT_POPPER_SETTINGS, settings, { mergeOptionalPartialValues: true }), [settings], ); diff --git a/packages/charts/src/mocks/specs/specs.ts b/packages/charts/src/mocks/specs/specs.ts index faaeef28c7..936a303082 100644 --- a/packages/charts/src/mocks/specs/specs.ts +++ b/packages/charts/src/mocks/specs/specs.ts @@ -343,7 +343,7 @@ export class MockGlobalSpec { }; static settings(partial?: Partial): SettingsSpec { - // @ts-ignore + // @ts-ignore - nesting limitation return mergePartial(MockGlobalSpec.settingsBase, partial, { mergeOptionalPartialValues: true }); } diff --git a/packages/charts/src/scales/scale_continuous.test.ts b/packages/charts/src/scales/scale_continuous.test.ts index 439058efea..4805a21e21 100644 --- a/packages/charts/src/scales/scale_continuous.test.ts +++ b/packages/charts/src/scales/scale_continuous.test.ts @@ -498,7 +498,7 @@ describe('Scale Continuous', () => { }); it('should throw for NaN values', () => { - // @ts-ignore + // @ts-ignore - d3Scale method jest.spyOn(scale, 'd3Scale').mockImplementationOnce(() => NaN); expect(() => scale.scaleOrThrow(1)).toThrow(); }); diff --git a/packages/charts/src/utils/common.test.ts b/packages/charts/src/utils/common.test.ts index 4392dc0c36..df75353cc6 100644 --- a/packages/charts/src/utils/common.test.ts +++ b/packages/charts/src/utils/common.test.ts @@ -77,14 +77,14 @@ describe('common utilities', () => { }); it('should return second partial if partial is undefined', () => { - // @ts-ignore + // @ts-ignore - nesting limitation const result = getPartialValue(base, undefined, [undefined, partial]); expect(result).toBe(partial); }); it('should return base if no partials are defined', () => { - // @ts-ignore + // @ts-ignore - nesting limitation const result = getPartialValue(base, undefined, [undefined, undefined]); expect(result).toBe(base); diff --git a/packages/charts/src/utils/fast_deep_equal.ts b/packages/charts/src/utils/fast_deep_equal.ts index e1af35f953..055413a44b 100644 --- a/packages/charts/src/utils/fast_deep_equal.ts +++ b/packages/charts/src/utils/fast_deep_equal.ts @@ -51,16 +51,16 @@ export function deepEqual(a: any, b: any, partial = false): boolean { } if (a instanceof Map && b instanceof Map) { if (a.size !== b.size) return false; - // @ts-ignore + // @ts-ignore - 3rd party code for (i of a.entries()) if (!b.has(i[0])) return false; - // @ts-ignore + // @ts-ignore - 3rd party code for (i of a.entries()) if (!deepEqual(i[1], b.get(i[0]))) return false; return true; } if (a instanceof Set && b instanceof Set) { if (a.size !== b.size) return false; - // @ts-ignore + // @ts-ignore - 3rd party code for (i of a.entries()) if (!b.has(i[0])) return false; return true; } diff --git a/packages/charts/src/utils/series_sort.ts b/packages/charts/src/utils/series_sort.ts index 3a9a99d1ad..5db19874af 100644 --- a/packages/charts/src/utils/series_sort.ts +++ b/packages/charts/src/utils/series_sort.ts @@ -7,7 +7,7 @@ */ import { SeriesIdentifier } from '../common/series_id'; -import { SettingsSpec, SortSeriesByConfig } from '../specs/settings'; +import { SortSeriesByConfig } from '../specs/settings'; /** * A compare function used to determine the order of the elements. It is expected to return @@ -24,8 +24,7 @@ export const DEFAULT_SORTING_FN = () => { /** @internal */ export function getRenderingCompareFn( - // @ts-ignore - sortSeriesBy: SettingsSpec['sortSeriesBy'], + sortSeriesBy?: SeriesCompareFn | SortSeriesByConfig, defaultSortFn?: SeriesCompareFn, ): SeriesCompareFn { return getCompareFn('rendering', sortSeriesBy, defaultSortFn); @@ -33,8 +32,7 @@ export function getRenderingCompareFn( /** @internal */ export function getLegendCompareFn( - // @ts-ignore - sortSeriesBy: SettingsSpec['sortSeriesBy'], + sortSeriesBy?: SeriesCompareFn | SortSeriesByConfig, defaultSortFn?: SeriesCompareFn, ): SeriesCompareFn { return getCompareFn('legend', sortSeriesBy, defaultSortFn); @@ -42,8 +40,7 @@ export function getLegendCompareFn( /** @internal */ export function getTooltipCompareFn( - // @ts-ignore - sortSeriesBy: SettingsSpec['sortSeriesBy'], + sortSeriesBy?: SeriesCompareFn | SortSeriesByConfig, defaultSortFn?: SeriesCompareFn, ): SeriesCompareFn { return getCompareFn('tooltip', sortSeriesBy, defaultSortFn); @@ -51,8 +48,7 @@ export function getTooltipCompareFn( function getCompareFn( aspect: keyof SortSeriesByConfig, - // @ts-ignore - sortSeriesBy: SettingsSpec['sortSeriesBy'], + sortSeriesBy?: SeriesCompareFn | SortSeriesByConfig, defaultSortFn: SeriesCompareFn = DEFAULT_SORTING_FN, ): SeriesCompareFn { if (typeof sortSeriesBy === 'object') { diff --git a/playground/tsconfig.json b/playground/tsconfig.json index eb9ba55eaf..51091ba802 100644 --- a/playground/tsconfig.json +++ b/playground/tsconfig.json @@ -5,6 +5,6 @@ "target": "es5", "resolveJsonModule": true }, - "include": ["../packages/charts/src/**/*", "./**/*", "../**/*.d.ts", "../scripts/custom_matchers.ts"], + "include": ["../packages/charts/src/**/*", "./**/*", "../scripts/custom_matchers.mock.ts"], "exclude": ["../**/*.test.*"] } diff --git a/scripts/custom_matchers.ts b/scripts/custom_matchers.mock.ts similarity index 69% rename from scripts/custom_matchers.ts rename to scripts/custom_matchers.mock.ts index 0ebd483cef..727d43bf42 100644 --- a/scripts/custom_matchers.ts +++ b/scripts/custom_matchers.mock.ts @@ -7,33 +7,6 @@ */ import { matcherErrorMessage } from 'jest-matcher-utils'; -import 'jest-extended'; // require to load jest-extended matchers - -// ensure this is parsed as a module. -export {}; - -/** - * Final Matcher type with `this` and `received` args removed from jest matcher function - */ -type MatcherParameters any> = T extends ( - this: any, - received: any, - ...args: infer P -) => any - ? P - : never; - -declare global { - // eslint-disable-next-line @typescript-eslint/no-namespace - namespace jest { - interface Matchers { - /** - * Expect array to be filled with value, and optionally length - */ - toEqualArrayOf(...args: MatcherParameters): R; - } - } -} /** * Expect array to be filled with value, and optionally length diff --git a/scripts/setup_enzyme.ts b/scripts/setup_enzyme.ts index 286f2e4476..b93210db6e 100644 --- a/scripts/setup_enzyme.ts +++ b/scripts/setup_enzyme.ts @@ -38,10 +38,10 @@ class ResizeObserverMock { disconnect() {} } -// @ts-ignore +// @ts-ignore - setting mock override window.ResizeObserver = ResizeObserverMock; // Some tests will fail due to undefined Path2D, this mock doesn't create issues on test env class Path2D {} -// @ts-ignore +// @ts-ignore - setting mock override window.Path2D = Path2D; diff --git a/storybook/preload_icons.ts b/storybook/preload_icons.ts index b08056e1e1..c68c203734 100644 --- a/storybook/preload_icons.ts +++ b/storybook/preload_icons.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -// @ts-ignore +// @ts-ignore - no type declarations import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon'; /** diff --git a/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx b/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx index 688b981815..fea466168f 100644 --- a/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx +++ b/storybook/stories/annotations/lines/6_test_single_bar_histogram.story.tsx @@ -49,6 +49,8 @@ export const Example = () => { }; const xDomain = { + min: NaN, + max: NaN, minInterval: 1, }; diff --git a/storybook/stories/annotations/rects/6_zero_domain.story.tsx b/storybook/stories/annotations/rects/6_zero_domain.story.tsx index 04474439e9..c7279d7464 100644 --- a/storybook/stories/annotations/rects/6_zero_domain.story.tsx +++ b/storybook/stories/annotations/rects/6_zero_domain.story.tsx @@ -40,7 +40,16 @@ export const Example = () => { - + { /> Number(d).toFixed(2)} diff --git a/storybook/stories/area/17_negative.story.tsx b/storybook/stories/area/17_negative.story.tsx index 0cc2b39e50..23da5ffc43 100644 --- a/storybook/stories/area/17_negative.story.tsx +++ b/storybook/stories/area/17_negative.story.tsx @@ -37,7 +37,11 @@ export const Example = () => { title="negative metric" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} - domain={{ logMinLimit: number('Y log limit', 1, { min: 0 }) }} + domain={{ + min: NaN, + max: NaN, + logMinLimit: number('Y log limit', 1, { min: 0 }), + }} /> { title={dataset.metric.title} position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} - domain={{ logMinLimit: number('Y log limit', 1, { min: 0 }) }} + domain={{ + min: NaN, + max: NaN, + logMinLimit: number('Y log limit', 1, { min: 0 }), + }} /> { showLegend theme={{ areaSeriesStyle: { point: { visible: true } }, lineSeriesStyle: { point: { visible: false } } }} baseTheme={useBaseTheme()} - xDomain={{ minInterval: 1 }} + xDomain={{ + min: NaN, + max: NaN, + minInterval: 1, + }} /> Number(d).toFixed(2)} /> diff --git a/storybook/stories/area/21_with_time_timeslip.story.tsx b/storybook/stories/area/21_with_time_timeslip.story.tsx index 867f22d603..4057a6f483 100644 --- a/storybook/stories/area/21_with_time_timeslip.story.tsx +++ b/storybook/stories/area/21_with_time_timeslip.story.tsx @@ -9,7 +9,7 @@ import { boolean } from '@storybook/addon-knobs'; import React from 'react'; -import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts'; +import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, AxisSpec } from '@elastic/charts'; import { mergePartial } from '@elastic/charts/src/utils/common'; import { KIBANA_METRICS } from '@elastic/charts/src/utils/data_samples/test_dataset_kibana'; @@ -32,7 +32,7 @@ const tooltipDateFormatter = (d: any) => minute: 'numeric', }).format(d); -const xAxisStyle = { +const xAxisStyle: AxisSpec['style'] = { tickLine: { size: 0.0001, padding: -6, ...gridStyle }, axisLine: { stroke: 'magenta', strokeWidth: 10, visible: false }, tickLabel: { @@ -77,8 +77,6 @@ export const Example = () => { gridLine={gridStyle} style={mergePartial(xAxisStyle, { axisTitle: { visible: true, fontFamily, fontSize: 24, fill: 'grey' }, - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore tickLabel: horizontalAxisTitle ? { fill: 'rgb(64,64,64)', diff --git a/storybook/stories/axes/10_one_domain_bound.story.tsx b/storybook/stories/axes/10_one_domain_bound.story.tsx index 34993c5526..2eb5b9af52 100644 --- a/storybook/stories/axes/10_one_domain_bound.story.tsx +++ b/storybook/stories/axes/10_one_domain_bound.story.tsx @@ -16,9 +16,11 @@ import { useBaseTheme } from '../../use_base_theme'; export const Example = () => { const leftDomain = { min: number('left min', 0), + max: NaN, }; const xDomain = { + min: NaN, max: number('xDomain max', 3), }; diff --git a/storybook/stories/axes/11_fit_domain_extent.story.tsx b/storybook/stories/axes/11_fit_domain_extent.story.tsx index 6fffb3c58e..08256545ba 100644 --- a/storybook/stories/axes/11_fit_domain_extent.story.tsx +++ b/storybook/stories/axes/11_fit_domain_extent.story.tsx @@ -52,7 +52,14 @@ export const Example = () => { { const xDomain = hasCustomDomain ? { min: 0, + max: NaN, } : undefined; diff --git a/storybook/stories/bar/30_stacked_to_extent.story.tsx b/storybook/stories/bar/30_stacked_to_extent.story.tsx index 32d56e0dd3..7260d0dcbc 100644 --- a/storybook/stories/bar/30_stacked_to_extent.story.tsx +++ b/storybook/stories/bar/30_stacked_to_extent.story.tsx @@ -22,7 +22,11 @@ export const Example = () => { Number(d).toFixed(2)} diff --git a/storybook/stories/bar/33_band_bar.story.tsx b/storybook/stories/bar/33_band_bar.story.tsx index 01328feb15..774e5bf2f0 100644 --- a/storybook/stories/bar/33_band_bar.story.tsx +++ b/storybook/stories/bar/33_band_bar.story.tsx @@ -39,7 +39,11 @@ export const Example = () => { /> Number(d).toFixed(2)} diff --git a/storybook/stories/bar/43_test_discover.story.tsx b/storybook/stories/bar/43_test_discover.story.tsx index 0b41bf173d..5d0dd8fef1 100644 --- a/storybook/stories/bar/43_test_discover.story.tsx +++ b/storybook/stories/bar/43_test_discover.story.tsx @@ -42,6 +42,8 @@ export const Example = () => { const formatter = timeFormatter(niceTimeFormatByDay(1)); const xDomain = { + min: NaN, + max: NaN, minInterval: 30000, }; diff --git a/storybook/stories/bar/44_test_single_histogram.story.tsx b/storybook/stories/bar/44_test_single_histogram.story.tsx index 72d0f0c977..8d7142764e 100644 --- a/storybook/stories/bar/44_test_single_histogram.story.tsx +++ b/storybook/stories/bar/44_test_single_histogram.story.tsx @@ -27,6 +27,8 @@ export const Example = () => { const formatter = timeFormatter(niceTimeFormatByDay(1)); const xDomain = { + min: NaN, + max: NaN, minInterval: 60000, }; diff --git a/storybook/stories/bar/6_linear_no_linear_interval.story.tsx b/storybook/stories/bar/6_linear_no_linear_interval.story.tsx index 65fefc773d..5169a1bd78 100644 --- a/storybook/stories/bar/6_linear_no_linear_interval.story.tsx +++ b/storybook/stories/bar/6_linear_no_linear_interval.story.tsx @@ -14,7 +14,13 @@ import { useBaseTheme } from '../../use_base_theme'; export const Example = () => ( - + Number(d).toFixed(2)} /> diff --git a/storybook/stories/bar/8_with_log_yaxis.story.tsx b/storybook/stories/bar/8_with_log_yaxis.story.tsx index a04574cbb5..1af14f63a3 100644 --- a/storybook/stories/bar/8_with_log_yaxis.story.tsx +++ b/storybook/stories/bar/8_with_log_yaxis.story.tsx @@ -18,7 +18,11 @@ export const Example = () => ( Number(d).toFixed(2)} diff --git a/storybook/stories/bar/9_with_stacked_log.story.tsx b/storybook/stories/bar/9_with_stacked_log.story.tsx index e951685e7d..3dd473ef22 100644 --- a/storybook/stories/bar/9_with_stacked_log.story.tsx +++ b/storybook/stories/bar/9_with_stacked_log.story.tsx @@ -18,7 +18,11 @@ export const Example = () => ( Number(d).toFixed(2)} diff --git a/storybook/stories/bubble/1_simple.story.tsx b/storybook/stories/bubble/1_simple.story.tsx index 5f4dda0433..efc993f184 100644 --- a/storybook/stories/bubble/1_simple.story.tsx +++ b/storybook/stories/bubble/1_simple.story.tsx @@ -36,7 +36,7 @@ export const Example = () => { max: 100, step: 10, }); - const shape = select('shape', PointShape, PointShape.Circle); + const shape = select('shape', PointShape, PointShape.Circle); const opacity = number('shape fill opacity', 1, { range: true, min: 0, diff --git a/storybook/stories/heatmap/1_basic.story.tsx b/storybook/stories/heatmap/1_basic.story.tsx index a2e11a552e..4804c093d5 100644 --- a/storybook/stories/heatmap/1_basic.story.tsx +++ b/storybook/stories/heatmap/1_basic.story.tsx @@ -20,6 +20,8 @@ import { RecursivePartial, ScaleType, Settings, + HeatmapBrushEvent, + ElementClickListener, } from '@elastic/charts'; import { Config } from '@elastic/charts/src/chart_types/heatmap/layout/types/config_types'; import { SWIM_LANE_DATA } from '@elastic/charts/src/utils/data_samples/test_anomaly_swim_lane'; @@ -91,13 +93,14 @@ export const Example = () => { } }, 100); - // @ts-ignore - const onElementClick: ElementClickListener = useCallback((e: HeatmapElementEvent[]) => { + const onElementClick: ElementClickListener = useCallback((event) => { + const e = event as HeatmapElementEvent[]; const cell = e[0][0]; - // @ts-ignore setSelection({ x: [cell.datum.x, cell.datum.x], y: [cell.datum.y] }); }, []); + const onBrushEnd = action('onBrushEnd'); + return ( { debugState={debugState} baseTheme={useBaseTheme()} onBrushEnd={(e) => { - action('onBrushEnd'); - setSelection({ x: e.x, y: e.y }); + onBrushEnd(e); + const { x, y } = e as HeatmapBrushEvent; + setSelection({ x, y }); }} /> { diff --git a/storybook/stories/interactions/17_png_export.story.tsx b/storybook/stories/interactions/17_png_export.story.tsx index f540051f89..da2432250a 100644 --- a/storybook/stories/interactions/17_png_export.story.tsx +++ b/storybook/stories/interactions/17_png_export.story.tsx @@ -51,17 +51,12 @@ export const Example = () => { } // will save as chart.png const fileName = 'chart.png'; - switch (snapshot.browser) { - case 'IE11': - return navigator.msSaveBlob(snapshot.blobOrDataUrl, fileName); - default: - const link = document.createElement('a'); - link.download = fileName; - link.href = snapshot.blobOrDataUrl; - document.body.appendChild(link); - link.click(); - document.body.removeChild(link); - } + const link = document.createElement('a'); + link.download = fileName; + link.href = snapshot.blobOrDataUrl; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); }; button('Export PNG', handler); const selectedChart = select('chart type', [ChartType.XYAxis, ChartType.Partition, ChartType.Goal], ChartType.XYAxis); @@ -111,7 +106,15 @@ function renderXYAxisChart() { position={Position.Bottom} tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])} /> - + { fillLabel: { valueFormatter: (d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`, fontStyle: 'italic', - textInvertible: true, fontWeight: 900, valueFont: { fontFamily: 'Menlo', diff --git a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx index 659cbf287a..0e98a07ee1 100644 --- a/storybook/stories/legend/10_sunburst_repeated_label.story.tsx +++ b/storybook/stories/legend/10_sunburst_repeated_label.story.tsx @@ -28,7 +28,7 @@ export const Example = () => { ('legendStrategy', LegendStrategy, LegendStrategy.Key)} legendMaxDepth={legendMaxDepth} baseTheme={useBaseTheme()} /> diff --git a/storybook/stories/line/13_line_mark_accessor.story.tsx b/storybook/stories/line/13_line_mark_accessor.story.tsx index 7960d7ad4f..85f64ab03d 100644 --- a/storybook/stories/line/13_line_mark_accessor.story.tsx +++ b/storybook/stories/line/13_line_mark_accessor.story.tsx @@ -52,7 +52,10 @@ export const Example = () => { title="Left axis" position={Position.Left} tickFormat={(d) => Number(d).toFixed(2)} - domain={{ max: 5 }} + domain={{ + min: NaN, + max: 5, + }} /> ( - + 'log' | 'linear' >; -const getLogKnobs = (isXAxis = false): LogKnobs => { +const getLogKnobs = (isXAxis = false) => { const group = isXAxis ? 'X - Axis' : 'Y - Axis'; const useDefaultLimit = boolean('Use default limit', isXAxis, group); const limit = number('Log min limit', 1, { min: 0 }, group); return { + ...{ min: NaN, max: NaN }, ...(!isXAxis && { fit: boolean('Fit domain', true, group) }), dataType: getDataType(group, isXAxis ? undefined : 'upDown'), negative: boolean('Use negative values', false, group), diff --git a/storybook/stories/small_multiples/3_grid_lines.story.tsx b/storybook/stories/small_multiples/3_grid_lines.story.tsx index ae2e13eac0..ccb0bade14 100644 --- a/storybook/stories/small_multiples/3_grid_lines.story.tsx +++ b/storybook/stories/small_multiples/3_grid_lines.story.tsx @@ -24,6 +24,7 @@ import { niceTimeFormatByDay, timeFormatter, AxisSpec, + XYBrushEvent, } from '@elastic/charts'; import { isVerticalAxis } from '@elastic/charts/src/chart_types/xy_chart/utils/axis_type_utils'; import { SeededDataGenerator } from '@elastic/charts/src/mocks/utils'; @@ -72,6 +73,7 @@ const getAxisOptions = ( tickFormat: isVertical ? (d) => d.toFixed(2) : tickTimeFormatter, domain: isVertical ? { + min: NaN, max: 10, } : undefined, @@ -107,9 +109,10 @@ export const Example = () => { }, }} baseTheme={useBaseTheme()} - onBrushEnd={(d: { x: any[] }) => { - if (d.x) { - action('brushEvent')(tickTimeFormatter(d.x[0] ?? 0), tickTimeFormatter(d.x[1] ?? 0)); + onBrushEnd={(e) => { + const { x } = e as XYBrushEvent; + if (x) { + action('brushEvent')(tickTimeFormatter(x[0] ?? 0), tickTimeFormatter(x[1] ?? 0)); } }} /> diff --git a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx index dd63a505f0..289a9485d8 100644 --- a/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx +++ b/storybook/stories/test_cases/4_filter_zero_values_log.story.tsx @@ -26,7 +26,7 @@ export const Example = () => { diff --git a/storybook/stories/utils/knobs.ts b/storybook/stories/utils/knobs.ts index 3093a6bcd8..5cd6cdb169 100644 --- a/storybook/stories/utils/knobs.ts +++ b/storybook/stories/utils/knobs.ts @@ -93,7 +93,7 @@ export const getKnobsFromEnum = !include || include.includes(v)) .filter(([, v]) => !exclude || !exclude.includes(v)) .reduce((acc, [key, value]) => { - // @ts-ignore + // @ts-ignore - override key casing acc[startCase(kebabCase(key))] = value; return acc; }, (allowUndefined ? { Undefined: undefined } : ({} as unknown)) as O), @@ -214,16 +214,12 @@ export const getFallbackPlacementsKnob = (): Placement[] | undefined => { }, ); - if (typeof knob === 'string') { - // @ts-ignore - return knob.split(', '); - } - - // @ts-ignore if (knob.length === 0) { return; } + if (typeof knob === 'string') return knob.split(', ') as Placement[]; + return knob; }; diff --git a/storybook/tsconfig.json b/storybook/tsconfig.json index d70189c7dd..27873b4b75 100644 --- a/storybook/tsconfig.json +++ b/storybook/tsconfig.json @@ -1,11 +1,5 @@ { "extends": "../tsconfig", - "include": [ - "../packages/charts/src/**/*", - "./**/*", - "../storybook-docs/config.docs.ts", - "../**/*.d.ts", - "../scripts/custom_matchers.ts" - ], + "include": ["../packages/charts/src/**/*", "./**/*", "../storybook-docs/config.docs.ts"], "exclude": ["../**/*.test.*"] } diff --git a/tsconfig.jest.json b/tsconfig.jest.json index 34de84698a..583093f293 100644 --- a/tsconfig.jest.json +++ b/tsconfig.jest.json @@ -1,4 +1,4 @@ { "extends": "./tsconfig.json", - "include": ["packages/charts/src/**/*", "scripts/setup_enzyme.ts", "scripts/custom_matchers.ts"] + "include": ["packages/charts/src", "scripts", "declarations"] } diff --git a/tsconfig.json b/tsconfig.json index 4f969b701c..ec70178a5b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -18,7 +18,7 @@ "downlevelIteration": true, "stripInternal": true, "resolveJsonModule": true, - "typeRoots": ["./node_modules/@types", "./**/*.d.ts", "./scripts/custom_matchers.ts"], + "typeRoots": ["./node_modules/@types"], "paths": { "*": ["./declarations/*", "./*"], "/@elastic/charts$": ["./packages/charts/src"],