diff --git a/.eslintrc.yml b/.eslintrc.yml index f65f43d3..b3090a44 100644 --- a/.eslintrc.yml +++ b/.eslintrc.yml @@ -1,6 +1,11 @@ extends: - - '@zakodium/eslint-config/typescript-react' - - 'cheminfo/unicorn' + - zakodium/ts + - zakodium/react + - zakodium/unicorn rules: '@typescript-eslint/no-dynamic-delete': off 'import/namespace': off +overrides: + - files: ['tests/**/*.test.tsx'] + rules: + '@typescript-eslint/unbound-method': off diff --git a/.gitignore b/.gitignore index 603cc7ff..04ba3f49 100644 --- a/.gitignore +++ b/.gitignore @@ -3,4 +3,6 @@ lib/ lib-esm/ storybook-static/ /playwright-report/ -/playwright/.cache/ \ No newline at end of file +/playwright/.cache/ +/test-results/ +/blob-report/ diff --git a/.ncurc.json b/.ncurc.json index a87a5cee..3a6c1fb9 100644 --- a/.ncurc.json +++ b/.ncurc.json @@ -1,3 +1,3 @@ { - "reject": ["@types/react", "react", "react-dom"] + "reject": ["eslint"] } diff --git a/.nvmrc b/.nvmrc index b6a7d89c..209e3ef4 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -16 +20 diff --git a/.storybook/main.js b/.storybook/main.js index 51a8e1fb..b9fb097e 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,15 +1,6 @@ module.exports = { - stories: [ - '../stories/**/*.stories.mdx', - '../stories/**/*.stories.@(js|jsx|ts|tsx)', - ], - core: { - builder: 'webpack5', - }, - reactOptions: { - fastRefresh: true, - strictMode: true, - }, + stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'], + addons: [ { name: '@storybook/addon-storysource', @@ -22,5 +13,21 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-essentials', ], + staticDirs: ['../stories/data'], + + framework: { + name: '@storybook/react-vite', + + options: { + fastRefresh: true, + strictMode: true, + }, + }, + + docs: {}, + + typescript: { + reactDocgen: 'react-docgen-typescript', + }, }; diff --git a/.storybook/preview.js b/.storybook/preview.js index 622e5897..2b1ee616 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,6 +1,6 @@ import './stories.css'; export const parameters = { - actions: { argTypesRegex: '^on[A-Z].*' }, controls: { expanded: true, hideNoControlsWarning: true }, }; +export const tags = ['autodocs']; diff --git a/.storybook/stories.css b/.storybook/stories.css index cc2b6d87..44fa2d06 100644 --- a/.storybook/stories.css +++ b/.storybook/stories.css @@ -1,4 +1,5 @@ -svg { +#storybook-root svg, +.docs-story svg { margin: 1em; border: 2px solid gold; } diff --git a/package.json b/package.json index 58f146b5..7f431ee1 100644 --- a/package.json +++ b/package.json @@ -12,14 +12,14 @@ ], "scripts": { "build": "npm run clean && npm run build-ts", - "build-storybook": "build-storybook", + "build-storybook": "storybook build", "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json", "check-types": "tsc --noEmit", "clean": "rimraf lib lib-esm", - "dev": "start-storybook -p 6006", + "dev": "storybook dev -p 6006", "eslint": "eslint .", "eslint-fix": "npm run eslint -- --fix", - "playwright": "playwright test -c playwright.config.ts", + "playwright": "playwright test -c playwright-ct.config.ts", "prepack": "npm run build", "prettier": "prettier --check .", "prettier-write": "prettier --write .", @@ -51,51 +51,51 @@ "homepage": "https://github.com/zakodium-oss/react-plot#readme", "peerDependencies": { "@types/react": "*", - "react": "*" + "react": ">=18.0.0" }, "devDependencies": { - "@playwright/experimental-ct-react": "^1.28.1", + "@playwright/experimental-ct-react": "^1.45.3", "@simbathesailor/use-what-changed": "^2.0.0", - "@storybook/addon-essentials": "^6.5.14", - "@storybook/addon-links": "^6.5.14", - "@storybook/addon-storysource": "^6.5.14", - "@storybook/builder-webpack5": "^6.5.14", - "@storybook/manager-webpack5": "^6.5.14", - "@storybook/react": "^6.5.14", - "@types/d3-array": "^3.0.3", - "@types/d3-scale": "^4.0.2", - "@types/d3-scale-chromatic": "^3.0.0", - "@types/d3-shape": "^3.1.0", - "@types/point-in-polygon": "^1.1.1", - "@types/react": "^17.0.45", - "@types/react-dom": "^18.0.10", - "@zakodium/eslint-config": "^6.0.0", - "eslint": "^8.29.0", - "isotopic-distribution": "^1.4.15", + "@storybook/addon-essentials": "^8.2.6", + "@storybook/addon-links": "^8.2.6", + "@storybook/addon-storysource": "^8.2.6", + "@storybook/react": "^8.2.6", + "@storybook/react-vite": "^8.2.6", + "@types/d3-array": "^3.2.1", + "@types/d3-scale": "^4.0.8", + "@types/d3-scale-chromatic": "^3.0.3", + "@types/d3-shape": "^3.1.6", + "@types/node": "^22.0.0", + "@types/point-in-polygon": "^1.1.5", + "@types/react": "^18.3.3", + "@types/react-dom": "^18.3.0", + "eslint": "^8.57.0", + "eslint-config-zakodium": "^10.0.0", + "isotopic-distribution": "^3.2.1", "iv-analysis": "^0.3.0", "ml-dataset-iris": "^1.2.1", - "ml-directional-distribution": "^0.1.0", + "ml-directional-distribution": "^0.1.1", "ml-pca": "^4.1.1", - "ml-regression-simple-linear": "^2.0.3", - "ml-spectra-processing": "^11.14.0", - "ms-spectrum": "^1.6.15", + "ml-regression-simple-linear": "^3.0.1", + "ml-spectra-processing": "^14.5.1", + "ms-spectrum": "^3.6.2", "point-in-polygon": "^1.1.0", - "prettier": "^2.8.0", - "react": "^17.0.2", - "react-dom": "^17.0.2", - "typescript": "^4.9.3", - "webpack": "^5.75.0" + "prettier": "^3.3.3", + "react": "^18.3.1", + "react-dom": "^18.3.1", + "react-error-boundary": "^4.0.13", + "typescript": "^5.5.4" }, "dependencies": { - "d3-array": "^3.2.1", + "d3-array": "^3.2.4", "d3-scale": "^4.0.2", - "d3-scale-chromatic": "^3.0.0", - "d3-shape": "^3.1.0", - "immer": "^9.0.16", + "d3-scale-chromatic": "^3.1.0", + "d3-shape": "^3.2.0", + "immer": "^10.1.1", "ml-distance-euclidean": "^2.0.0", "react-d3-utils": "^1.0.0" }, "volta": { - "node": "16.18.0" + "node": "20.16.0" } } diff --git a/playwright.config.ts b/playwright-ct.config.ts similarity index 84% rename from playwright.config.ts rename to playwright-ct.config.ts index 83a166bf..daafae20 100644 --- a/playwright.config.ts +++ b/playwright-ct.config.ts @@ -1,11 +1,10 @@ -import type { PlaywrightTestConfig } from '@playwright/experimental-ct-react'; -import { devices } from '@playwright/experimental-ct-react'; +import { defineConfig, devices } from '@playwright/experimental-ct-react'; /** * See https://playwright.dev/docs/test-configuration. */ -const config: PlaywrightTestConfig = { - testDir: './tests', +export default defineConfig({ + testDir: './tests/', /* The base directory, relative to the config file, for snapshot files created with toMatchSnapshot and toHaveScreenshot. */ snapshotDir: './__snapshots__', /* Maximum time one test can run for. */ @@ -20,6 +19,7 @@ const config: PlaywrightTestConfig = { workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: process.env.CI ? 'github' : [['list'], ['html']], + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ trace: 'on-first-retry', @@ -27,6 +27,7 @@ const config: PlaywrightTestConfig = { /* Port to use for Playwright component endpoint. */ ctPort: 3100, }, + /* Configure projects for major browsers */ projects: [ { @@ -42,6 +43,4 @@ const config: PlaywrightTestConfig = { use: { ...devices['Desktop Safari'] }, }, ], -}; - -export default config; +}); diff --git a/playwright/index.html b/playwright/index.html index fdd82514..2032be59 100644 --- a/playwright/index.html +++ b/playwright/index.html @@ -1,12 +1,12 @@ - + - Test components + Testing Page
- + diff --git a/playwright/index.ts b/playwright/index.ts deleted file mode 100644 index 4f36ee13..00000000 --- a/playwright/index.ts +++ /dev/null @@ -1 +0,0 @@ -/* eslint-disable unicorn/no-empty-file */ diff --git a/playwright/index.tsx b/playwright/index.tsx new file mode 100644 index 00000000..ac6de14b --- /dev/null +++ b/playwright/index.tsx @@ -0,0 +1,2 @@ +// Import styles, initialize component theme here. +// import '../src/common.css'; diff --git a/scripts/mass/generate.mjs b/scripts/mass/generate.mjs index bc957ea2..cb571405 100644 --- a/scripts/mass/generate.mjs +++ b/scripts/mass/generate.mjs @@ -2,7 +2,7 @@ import { writeFileSync } from 'node:fs'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; -import IsotopicDistribution from 'isotopic-distribution'; +import { IsotopicDistribution } from 'isotopic-distribution'; import { xyToXYObject } from 'ml-spectra-processing'; import { getBestPeaks } from 'ms-spectrum'; diff --git a/src/components/Annotations/Annotation.tsx b/src/components/Annotations/Annotation.tsx index de128eea..9b86a4d5 100644 --- a/src/components/Annotations/Annotation.tsx +++ b/src/components/Annotations/Annotation.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react'; +import { type ReactElement, ReactNode } from 'react'; import { Arrow } from './Arrow'; import { BoxPlot } from './BoxPlot'; @@ -44,6 +44,6 @@ export interface AnnotationsProps { children: ReactNode; } -export function Annotations(props: AnnotationsProps): JSX.Element { +export function Annotations(props: AnnotationsProps): ReactElement { return <>{props.children}; } diff --git a/src/components/Annotations/Polygon.tsx b/src/components/Annotations/Polygon.tsx index 3018d28d..797d5466 100644 --- a/src/components/Annotations/Polygon.tsx +++ b/src/components/Annotations/Polygon.tsx @@ -8,7 +8,7 @@ export interface AnnotationPolygonProps SVGProps, 'x1' | 'x2' | 'y1' | 'y2' | 'points' > { - points: { x: ScalarValue; y: ScalarValue }[]; + points: Array<{ x: ScalarValue; y: ScalarValue }>; xAxis?: string; yAxis?: string; } diff --git a/src/components/Annotations/Polyline.tsx b/src/components/Annotations/Polyline.tsx index 53e61629..980b1fce 100644 --- a/src/components/Annotations/Polyline.tsx +++ b/src/components/Annotations/Polyline.tsx @@ -8,7 +8,7 @@ export interface AnnotationPolylineProps SVGProps, 'x1' | 'x2' | 'y1' | 'y2' | 'points' > { - points: { x: ScalarValue; y: ScalarValue }[]; + points: Array<{ x: ScalarValue; y: ScalarValue }>; xAxis?: string; yAxis?: string; color?: string; diff --git a/src/components/Axis/Axis.tsx b/src/components/Axis/Axis.tsx index 2ab41edb..5233e8cb 100644 --- a/src/components/Axis/Axis.tsx +++ b/src/components/Axis/Axis.tsx @@ -59,7 +59,7 @@ export interface AxisProps { * With time scale the default values is d3's smart tickFormat * With other types of scales the default is converting the value to a string */ - tickLabelFormat?: TickLabelFormat | TickLabelFormat; + tickLabelFormat?: TickLabelFormat | TickLabelFormat; tickLabelStyle?: CSSProperties; primaryTickLength?: number; @@ -173,7 +173,7 @@ export function Axis({ return ( } + tickLabelFormat={tickLabelFormat as TickLabelFormat} scale={currentAxis.scale as ScaleLinear} /> ); @@ -189,7 +189,7 @@ export function Axis({ return ( } + tickLabelFormat={tickLabelFormat as TickLabelFormat} scale={currentAxis.scale as ScaleLogarithmic} /> ); diff --git a/src/components/Axis/HorizontalAxisGridLines.tsx b/src/components/Axis/HorizontalAxisGridLines.tsx index 887a7f2f..8f6e10c6 100644 --- a/src/components/Axis/HorizontalAxisGridLines.tsx +++ b/src/components/Axis/HorizontalAxisGridLines.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, useMemo } from 'react'; +import { CSSProperties, type ReactElement, useMemo } from 'react'; import { Position } from '../../types'; @@ -29,7 +29,7 @@ export default function HorizontalAxisGridLines( scale, } = props; const Grid = useMemo(() => { - const Grid: JSX.Element[] = []; + const Grid: ReactElement[] = []; if (primaryGrid) { for (const { position } of primaryTicks) { Grid.push( diff --git a/src/components/Axis/ParallelAxis.tsx b/src/components/Axis/ParallelAxis.tsx index 54c28266..5b7ed14b 100644 --- a/src/components/Axis/ParallelAxis.tsx +++ b/src/components/Axis/ParallelAxis.tsx @@ -95,7 +95,7 @@ export function ParallelAxis(props: ParallelAxisProps) { return ( } + tickLabelFormat={tickLabelFormat as TickLabelFormat} scale={scale as ScaleLinear} /> ); @@ -111,7 +111,7 @@ export function ParallelAxis(props: ParallelAxisProps) { return ( } + tickLabelFormat={tickLabelFormat as TickLabelFormat} scale={scale as ScaleLogarithmic} /> ); diff --git a/src/components/Axis/Ticks.tsx b/src/components/Axis/Ticks.tsx index 3ba99cb2..541822dd 100644 --- a/src/components/Axis/Ticks.tsx +++ b/src/components/Axis/Ticks.tsx @@ -1,6 +1,11 @@ -import { CSSProperties, ReactNode, SVGAttributes } from 'react'; +import { + CSSProperties, + type ReactElement, + ReactNode, + SVGAttributes, +} from 'react'; -import { TicksType, Scales } from './types'; +import { Scales, TicksType } from './types'; interface CoordinatesXY { x1?: number; @@ -63,7 +68,7 @@ export function Ticks(props: Omit) { ); }); - let secondaryTickElements: Array = []; + let secondaryTickElements: Array = []; if (secondaryTickLength !== 0) { // generate secondaryTicks according to the density of primaryTicks const range = Math.abs(scale?.range()[1] - scale?.range()[0]) || 0; diff --git a/src/components/Axis/VerticalAxisGridLines.tsx b/src/components/Axis/VerticalAxisGridLines.tsx index 9cf9853d..4e4039f8 100644 --- a/src/components/Axis/VerticalAxisGridLines.tsx +++ b/src/components/Axis/VerticalAxisGridLines.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, useMemo } from 'react'; +import { CSSProperties, type ReactElement, useMemo } from 'react'; import { Position } from '../../types'; @@ -30,7 +30,7 @@ export default function VerticalAxisGridlines( } = props; const Grid = useMemo(() => { - const Grid: JSX.Element[] = []; + const Grid: ReactElement[] = []; if (primaryGrid) { for (const { position } of primaryTicks) { Grid.push( diff --git a/src/components/ErrorBars.tsx b/src/components/ErrorBars.tsx index 3452a8e8..20cd4cae 100644 --- a/src/components/ErrorBars.tsx +++ b/src/components/ErrorBars.tsx @@ -5,7 +5,7 @@ import type { SeriesPointWithError } from '../types'; import { validateAxis, validateSeriesPointError } from '../utils'; export interface ErrorBarsProps { - data: ReadonlyArray; + data: readonly SeriesPointWithError[]; transform?: string; xAxis?: string; yAxis?: string; diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx index 9faca5b1..34a18785 100644 --- a/src/components/Heading.tsx +++ b/src/components/Heading.tsx @@ -1,5 +1,5 @@ import { CSSProperties, useEffect } from 'react'; -import { useBBoxObserver, AlignGroup } from 'react-d3-utils'; +import { AlignGroup, useBBoxObserver } from 'react-d3-utils'; import { usePlotContext, @@ -78,7 +78,3 @@ export function Heading({ ); } - -Heading.defaultProps = { - position: 'top', -}; diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx index fe6f9dd2..de92f35c 100644 --- a/src/components/Legend.tsx +++ b/src/components/Legend.tsx @@ -115,7 +115,7 @@ export type LegendProps = { position?: LegendPosition; margin?: number; onClick?: (args: { - event: React.MouseEvent; + event: React.MouseEvent; id: string; }) => void; labelStyle?: CSSFuncProps<{ id: string }>; @@ -153,10 +153,7 @@ export function Legend(options: LegendProps) { return () => plotDispatch({ type: 'removeLegend' }); }, [plotDispatch, position, margin]); - function onClickLegendItem( - event: React.MouseEvent, - id: string, - ) { + function onClickLegendItem(event: React.MouseEvent, id: string) { onClick?.({ event, id }); if (showHide) { legendDispatch({ @@ -184,7 +181,7 @@ export function Legend(options: LegendProps) { onClickLegendItem(event, value.id)} key={index} - transform={`translate(${xPos}, ${0})`} + transform={`translate(${xPos}, 0)`} style={{ opacity: value.isVisible ? '1' : '0.6' }} > {getRangeShape({ @@ -210,7 +207,7 @@ export function Legend(options: LegendProps) { onClickLegendItem(event, value.id)} key={index} - transform={`translate(${xPos}, ${0})`} + transform={`translate(${xPos}, 0)`} style={{ opacity: value.isVisible ? '1' : '0.6' }} > {getLineShape({ diff --git a/src/components/Series/BarSeries.tsx b/src/components/Series/BarSeries.tsx index 1f07794c..4de3a4de 100644 --- a/src/components/Series/BarSeries.tsx +++ b/src/components/Series/BarSeries.tsx @@ -93,7 +93,7 @@ export function BarSeries(props: BarSeriesProps) { interface BarSeriesRenderProps { id: string; - data: ReadonlyArray; + data: readonly SeriesPoint[]; xAxis: string; yAxis: string; lineStyle: CSSProperties; diff --git a/src/components/Series/LineSeries.tsx b/src/components/Series/LineSeries.tsx index 7cc792df..66d2516d 100644 --- a/src/components/Series/LineSeries.tsx +++ b/src/components/Series/LineSeries.tsx @@ -14,7 +14,7 @@ export interface LineSeriesProps ScatterSeriesProps, 'markerShape' | 'lineStyle' | 'displayLines' > { - data: ReadonlyArray; + data: readonly T[]; markerShape?: Shape; lineStyle?: CSSFuncProps<{ id: string }>; } @@ -108,7 +108,7 @@ export const LineSeries = memo(LineSeriesInner); interface LineSeriesRenderProps { id: string; - data: ReadonlyArray; + data: readonly SeriesPoint[]; xAxis: string; yAxis: string; lineStyle: CSSProperties; diff --git a/src/components/Series/RangeSeries.tsx b/src/components/Series/RangeSeries.tsx index ca867417..1070acff 100644 --- a/src/components/Series/RangeSeries.tsx +++ b/src/components/Series/RangeSeries.tsx @@ -19,7 +19,7 @@ export interface RangeSeriesPoint { export interface RangeSeriesProps extends BaseSeriesProps { - data: ReadonlyArray; + data: readonly T[]; lineStyle?: CSSProperties; } @@ -106,7 +106,7 @@ function RangeSeriesInner( export const RangeSeries = memo(RangeSeriesInner); interface RangeSeriesRenderProps { - data: ReadonlyArray; + data: readonly RangeSeriesPoint[]; xAxis: string; yAxis: string; lineStyle: CSSProperties; diff --git a/src/components/Series/ScatterSeries.tsx b/src/components/Series/ScatterSeries.tsx index 26764ee7..b244494a 100644 --- a/src/components/Series/ScatterSeries.tsx +++ b/src/components/Series/ScatterSeries.tsx @@ -27,7 +27,7 @@ import { markersComps } from '../Markers'; export interface ScatterSeriesProps extends BaseSeriesProps { - data: ReadonlyArray; + data: readonly T[]; markerShape?: ShapeFuncProps; displayMarkers?: boolean; markerSize?: number; diff --git a/src/components/Series/Series.tsx b/src/components/Series/Series.tsx index 26cf9801..b86bad3d 100644 --- a/src/components/Series/Series.tsx +++ b/src/components/Series/Series.tsx @@ -1,9 +1,9 @@ -import { ReactNode } from 'react'; +import { type ReactElement, ReactNode } from 'react'; export interface SeriesProps { children: ReactNode; } -export function Series(props: SeriesProps): JSX.Element { +export function Series(props: SeriesProps): ReactElement { return <>{props.children}; } diff --git a/src/components/Tracking.tsx b/src/components/Tracking.tsx index f9fbfb7d..ab8752a4 100644 --- a/src/components/Tracking.tsx +++ b/src/components/Tracking.tsx @@ -90,7 +90,7 @@ function closestCalculation( stateSeries: PlotSeriesState[], axisContext: Record, ): ClosestInfoResult { - let series: ClosestInfoResult = {}; + const series: ClosestInfoResult = {}; switch (method) { case 'x': { diff --git a/src/contexts/legendContext.tsx b/src/contexts/legendContext.tsx index c0b2a23c..78f97580 100644 --- a/src/contexts/legendContext.tsx +++ b/src/contexts/legendContext.tsx @@ -29,7 +29,7 @@ interface LegendLabelState { } interface LegendState { - labels: Array; + labels: LegendLabelState[]; } type LegendActions = diff --git a/src/contexts/plotContext.ts b/src/contexts/plotContext.ts index bcab4a01..3e238b73 100644 --- a/src/contexts/plotContext.ts +++ b/src/contexts/plotContext.ts @@ -39,7 +39,7 @@ export interface PlotSeriesState { x: PlotSeriesStateAxis; y: PlotSeriesStateAxis; label?: string; - data?: ReadonlyArray; + data?: readonly SeriesPoint[]; } interface PlotSeriesStateAxis { @@ -59,7 +59,7 @@ export interface PlotAxisState { innerOffset: number; paddingStart: ScalarValue; paddingEnd: ScalarValue; - tickLabelFormat: TickLabelFormat | TickLabelFormat | undefined; + tickLabelFormat: TickLabelFormat | TickLabelFormat | undefined; } export type PlotReducerActions = @@ -80,7 +80,7 @@ interface PlotAxisContextGeneric< scale: Scale; domain: readonly [number, number]; clampInDomain: (value: number) => number; - tickLabelFormat: TickLabelFormat | TickLabelFormat | undefined; + tickLabelFormat: TickLabelFormat | TickLabelFormat | undefined; position: Position; } @@ -257,8 +257,8 @@ export function useAxisContext( return value < domain[0] ? domain[0] : value > domain[1] - ? domain[1] - : value; + ? domain[1] + : value; }; switch (axis.scale) { diff --git a/src/hooks.ts b/src/hooks.ts index 5ea6caa0..5eeae3b8 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -28,7 +28,7 @@ export function usePosition(config: UsePositionConfig) { interface UsePointsPositionConfig { xAxis: string; yAxis: string; - points: { x: ScalarValue; y: ScalarValue }[]; + points: Array<{ x: ScalarValue; y: ScalarValue }>; } export function usePointsPosition(config: UsePointsPositionConfig) { const { axisContext, plotWidth, plotHeight } = usePlotContext(); diff --git a/src/hooks/useDrawPath.tsx b/src/hooks/useDrawPath.tsx index b2ceb6af..a92bd161 100644 --- a/src/hooks/useDrawPath.tsx +++ b/src/hooks/useDrawPath.tsx @@ -38,7 +38,7 @@ export function useDrawPath(options: UseDrawPathOptions = {}) { onEnd, } = options; - const [data, setData] = useState[] | null>(null); + const [data, setData] = useState> | null>(null); useStartMoveEnd({ controllerId, disabled, @@ -52,7 +52,7 @@ export function useDrawPath(options: UseDrawPathOptions = {}) { let isDuplicated = true; for (const key in clampedCoordinates) { if ( - previousData[previousData.length - 1][key] !== + (previousData.at(-1) as Record)[key] !== clampedCoordinates[key] ) { isDuplicated = false; diff --git a/src/types.ts b/src/types.ts index 50ff9ace..1cbcc865 100644 --- a/src/types.ts +++ b/src/types.ts @@ -36,11 +36,11 @@ export type CSSFuncProps = { }; export type ShapeFuncProps = - | ((point: T, index?: number, data?: ReadonlyArray) => Shape) + | ((point: T, index?: number, data?: readonly T[]) => Shape) | Shape; export type LabelFuncProps = - | ((point: T, index?: number, data?: ReadonlyArray) => string) + | ((point: T, index?: number, data?: readonly T[]) => string) | string; export interface BaseSeriesProps { diff --git a/src/utils.ts b/src/utils.ts index addf844b..6b73bf5e 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -98,9 +98,9 @@ export function functionalStyle( elementStyle: CSSFuncProps, point: T, index?: number, - data?: ReadonlyArray, + data?: readonly T[], ): CSSProperties { - let style: CSSProperties = { ...defaultStyle }; + const style: CSSProperties = { ...defaultStyle }; for (const key in elementStyle) { // @ts-expect-error Type is too complex if (typeof elementStyle[key] === 'function') { @@ -120,7 +120,7 @@ export function functionalShape( elementStyle: ShapeFuncProps, point: T, index?: number, - data?: ReadonlyArray, + data?: readonly T[], ): Shape { let shape: Shape; if (typeof elementStyle === 'function') { @@ -137,7 +137,7 @@ export function functionalLabel( elementStyle: LabelFuncProps, point: T, index?: number, - data?: ReadonlyArray, + data?: readonly T[], ): string { let shape: string; if (typeof elementStyle === 'function') { @@ -159,11 +159,11 @@ export function validateSeriesPointError( } export function closestPoint( - data: ReadonlyArray, + data: readonly T[], value: R, distanceFun: (a: T, b: R) => number, ): T { - let closest = { + const closest = { index: 0, distance: Number.POSITIVE_INFINITY, }; @@ -178,13 +178,13 @@ export function closestPoint( } export function dataConvertDate( - data: { x: number | Date; y: number | Date }[], + data: Array<{ x: number | Date; y: number | Date }>, ) { return data.map(({ x, y }) => ({ x: toNumber(x), y: toNumber(y) })); } export function toNumber(value: number | Date) { - if (typeof value === 'undefined') { + if (value === undefined) { return value; } if (typeof value === 'number') { diff --git a/src/utils/splitChildren.tsx b/src/utils/splitChildren.tsx index 720e7544..aa39df2e 100644 --- a/src/utils/splitChildren.tsx +++ b/src/utils/splitChildren.tsx @@ -32,17 +32,17 @@ export function splitChildren(children: ReactNode): PlotChildren { let bottomAxis: ReactElement | null = null; let leftAxis: ReactElement | null = null; - let parallelAxes: ReactElement[] = []; + const parallelAxes: ReactElement[] = []; let heading: ReactElement | null = null; let legend: ReactElement | null = null; - let series: ReactElement[] = []; + const series: ReactElement[] = []; - let annotations: ReactElement[] = []; + const annotations: ReactElement[] = []; - for (let child of Children.toArray(children)) { + for (const child of Children.toArray(children)) { if (typeof child !== 'object' || !isValidElement(child)) { // eslint-disable-next-line no-console console.error('Invalid Plot child:', child); diff --git a/stories/annotations/arrow.stories.tsx b/stories/annotations/arrow.stories.tsx index b653e457..7bef538e 100644 --- a/stories/annotations/arrow.stories.tsx +++ b/stories/annotations/arrow.stories.tsx @@ -18,7 +18,7 @@ export default { strokeWidth: 5, markerSize: 3, }, -} as Meta; +} satisfies Meta; export function AnnotationArrow(props: AnnotationArrowProps) { return ( diff --git a/stories/annotations/boxPlot.stories.tsx b/stories/annotations/boxPlot.stories.tsx index cb7e6adf..bde09554 100644 --- a/stories/annotations/boxPlot.stories.tsx +++ b/stories/annotations/boxPlot.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationBoxPlotProps, Annotation } from '../../src'; +import { Annotation, AnnotationBoxPlotProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -27,7 +27,7 @@ export default { minMaxColor: 'green', minMaxStyle: { strokeWidth: 5 }, }, -} as Meta; +} satisfies Meta; export function Horizontal(props: AnnotationBoxPlotProps) { return ( diff --git a/stories/annotations/circle.stories.tsx b/stories/annotations/circle.stories.tsx index 3ef1cd28..2f1b5a29 100644 --- a/stories/annotations/circle.stories.tsx +++ b/stories/annotations/circle.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationCircleProps, Annotation } from '../../src'; +import { Annotation, AnnotationCircleProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -13,7 +13,7 @@ export default { r: 100, color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationCircle(props: AnnotationCircleProps) { return ( diff --git a/stories/annotations/directedEllipse.stories.tsx b/stories/annotations/directedEllipse.stories.tsx index e8f898bf..f6d4945a 100644 --- a/stories/annotations/directedEllipse.stories.tsx +++ b/stories/annotations/directedEllipse.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationDirectedEllipseProps, Annotation } from '../../src'; +import { Annotation, AnnotationDirectedEllipseProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -15,7 +15,7 @@ export default { width: 10, color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationDirectedEllipseStories( props: AnnotationDirectedEllipseProps, diff --git a/stories/annotations/ellipse.stories.tsx b/stories/annotations/ellipse.stories.tsx index 301d3935..9e8cc1cf 100644 --- a/stories/annotations/ellipse.stories.tsx +++ b/stories/annotations/ellipse.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationEllipseProps, Annotation } from '../../src'; +import { Annotation, AnnotationEllipseProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -14,7 +14,7 @@ export default { ry: 10, color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationEllipseStories(props: AnnotationEllipseProps) { return ( diff --git a/stories/annotations/group.stories.tsx b/stories/annotations/group.stories.tsx index 1e4a64c9..26400a20 100644 --- a/stories/annotations/group.stories.tsx +++ b/stories/annotations/group.stories.tsx @@ -13,7 +13,7 @@ export default { horizontalAlign: 'none', verticalAlign: 'none', }, -} as Meta; +} satisfies Meta; export function AnnotationGroup(props: AnnotationGroupProps) { return ( diff --git a/stories/annotations/line.stories.tsx b/stories/annotations/line.stories.tsx index ac8354ff..07d68156 100644 --- a/stories/annotations/line.stories.tsx +++ b/stories/annotations/line.stories.tsx @@ -14,7 +14,7 @@ export default { y2: 33, color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationLine(props: AnnotationLineProps) { return ( diff --git a/stories/annotations/polygon.stories.tsx b/stories/annotations/polygon.stories.tsx index 13e87ce5..25cd7e98 100644 --- a/stories/annotations/polygon.stories.tsx +++ b/stories/annotations/polygon.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationPolygonProps, Annotation } from '../../src'; +import { Annotation, AnnotationPolygonProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -17,7 +17,7 @@ export default { ], color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationPolygon(props: AnnotationPolygonProps) { return ( diff --git a/stories/annotations/polyline.stories.tsx b/stories/annotations/polyline.stories.tsx index 5b110a74..6c82b55c 100644 --- a/stories/annotations/polyline.stories.tsx +++ b/stories/annotations/polyline.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { AnnotationPolylineProps, Annotation } from '../../src'; +import { Annotation, AnnotationPolylineProps } from '../../src'; import { AnnotationPlot } from './annotation.data'; @@ -16,7 +16,7 @@ export default { ], color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationPolyline(props: AnnotationPolylineProps) { return ( diff --git a/stories/annotations/rectangle.stories.tsx b/stories/annotations/rectangle.stories.tsx index a421fac6..203b268b 100644 --- a/stories/annotations/rectangle.stories.tsx +++ b/stories/annotations/rectangle.stories.tsx @@ -14,7 +14,7 @@ export default { y2: '50', color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationRectangle(props: AnnotationRectangleProps) { return ( diff --git a/stories/annotations/shape.stories.tsx b/stories/annotations/shape.stories.tsx index 12b7850d..72f45e26 100644 --- a/stories/annotations/shape.stories.tsx +++ b/stories/annotations/shape.stories.tsx @@ -14,7 +14,7 @@ export default { size: 10, color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationShape(props: AnnotationShapeProps) { return ( diff --git a/stories/annotations/text.stories.tsx b/stories/annotations/text.stories.tsx index 608205ca..0a365ef4 100644 --- a/stories/annotations/text.stories.tsx +++ b/stories/annotations/text.stories.tsx @@ -12,7 +12,7 @@ export default { y: '250', color: 'red', }, -} as Meta; +} satisfies Meta; export function AnnotationText(props: AnnotationTextProps) { return ( diff --git a/stories/axis-boundaries.stories.tsx b/stories/axis-boundaries.stories.tsx index 0c77e1dc..6c56154a 100644 --- a/stories/axis-boundaries.stories.tsx +++ b/stories/axis-boundaries.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { Plot, Heading, Legend, LineSeries, Axis } from '../src'; +import { Axis, Heading, Legend, LineSeries, Plot } from '../src'; export default { title: 'Plot/Axis boundaries', @@ -13,7 +13,7 @@ export default { yMin: 0, yMax: 6, }, -} as Meta; +} satisfies Meta; type Props = Record; export function Control(props: Props) { diff --git a/stories/control/axis.stories.tsx b/stories/control/axis.stories.tsx index a7afb0da..6e11866c 100644 --- a/stories/control/axis.stories.tsx +++ b/stories/control/axis.stories.tsx @@ -3,8 +3,6 @@ import { Meta } from '@storybook/react'; import { Axis, AxisProps, Plot } from '../../src'; import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils'; -type AxisStoryProps = Omit; - export default { title: 'API/Axis', component: Axis, @@ -29,43 +27,43 @@ export default { exclude: ['id', 'position'], }, }, -} as Meta; +} satisfies Meta; -export function AxisLeft(props: AxisStoryProps) { +export function AxisLeft(props: AxisProps) { return ( {getInfraredSeries()} - + ); } -export function AxisBottom(props: AxisStoryProps) { +export function AxisBottom(props: AxisProps) { return ( {getInfraredSeries()} - + ); } -export function AxisRight(props: AxisStoryProps) { +export function AxisRight(props: AxisProps) { return ( {getInfraredSeries()} - + ); } -export function AxisTop(props: AxisStoryProps) { +export function AxisTop(props: AxisProps) { return ( {getInfraredSeries()} - + ); diff --git a/stories/control/bar.stories.tsx b/stories/control/bar.stories.tsx index 6e253ba2..be65ef01 100644 --- a/stories/control/bar.stories.tsx +++ b/stories/control/bar.stories.tsx @@ -1,6 +1,6 @@ import { Meta } from '@storybook/react'; -import { Axis, Legend, BarSeriesProps, Plot, BarSeries } from '../../src'; +import { Axis, BarSeries, BarSeriesProps, Legend, Plot } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { @@ -21,7 +21,7 @@ export default { markerShape: 'circle', markerSize: 10, }, -} as Meta; +} satisfies Meta; const data = [ { x: 0, diff --git a/stories/control/function.stories.tsx b/stories/control/function.stories.tsx index 3516a55f..db9dc0ab 100644 --- a/stories/control/function.stories.tsx +++ b/stories/control/function.stories.tsx @@ -3,12 +3,12 @@ import { Meta } from '@storybook/react'; import { Annotations, Axis, - Legend, - Plot, FunctionSeries, FunctionSeriesProps, - useRectangularZoom, + Legend, LineSeries, + Plot, + useRectangularZoom, } from '../../src'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils'; @@ -16,7 +16,7 @@ export default { title: 'API/FunctionSeries', component: FunctionSeries, decorators: [PlotControllerDecorator], -} as Meta>; +} satisfies Meta; function getY(x: number) { return 4 * Math.sin(2 * x) + 20; diff --git a/stories/control/heading.stories.tsx b/stories/control/heading.stories.tsx index 36d6268b..b47cdeb9 100644 --- a/stories/control/heading.stories.tsx +++ b/stories/control/heading.stories.tsx @@ -16,7 +16,7 @@ export default { subtitle: 'Subtitle', position: Position.top, }, -} as Meta; +} satisfies Meta; export function Control(props: HeadingProps) { return ( diff --git a/stories/control/legend.stories.tsx b/stories/control/legend.stories.tsx index 3c32d609..9226b072 100644 --- a/stories/control/legend.stories.tsx +++ b/stories/control/legend.stories.tsx @@ -25,7 +25,7 @@ export default { lineStyle: {}, labelStyle: {}, }, -} as Meta; +} satisfies Meta; const data1 = [ { x: 0, y: 10 }, diff --git a/stories/control/line.stories.tsx b/stories/control/line.stories.tsx index 0729b15a..7b190818 100644 --- a/stories/control/line.stories.tsx +++ b/stories/control/line.stories.tsx @@ -4,8 +4,8 @@ import { Axis, Legend, LineSeries, - Plot, LineSeriesProps, + Plot, SeriesPointWithError, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; @@ -36,7 +36,7 @@ export default { errorBarsCapStyle: { stroke: 'blue' }, }, -} as Meta; +} satisfies Meta; const data: SeriesPointWithError[] = [ { x: 0, diff --git a/stories/control/logaxis.stories.tsx b/stories/control/logaxis.stories.tsx index dee7eae2..3d3654ea 100644 --- a/stories/control/logaxis.stories.tsx +++ b/stories/control/logaxis.stories.tsx @@ -11,7 +11,7 @@ export default { hidden: false, hiddenTicks: false, }, -} as Meta; +} satisfies Meta; interface AxisControlProps { label: string; diff --git a/stories/control/parallelaxis.stories.tsx b/stories/control/parallelaxis.stories.tsx index 4b1a5509..f188563a 100644 --- a/stories/control/parallelaxis.stories.tsx +++ b/stories/control/parallelaxis.stories.tsx @@ -2,10 +2,10 @@ import { Meta } from '@storybook/react'; import { Axis, - ParallelAxis, LineSeries, - Plot, + ParallelAxis, ParallelAxisProps, + Plot, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; @@ -16,7 +16,7 @@ export default { id: 'x', label: 'Parallel axis', }, -} as Meta; +} satisfies Meta; const data = [ { x: 0, y: 10 }, diff --git a/stories/control/plot.stories.tsx b/stories/control/plot.stories.tsx index a772e090..5c923ed5 100644 --- a/stories/control/plot.stories.tsx +++ b/stories/control/plot.stories.tsx @@ -5,7 +5,7 @@ import { Axis, Legend, LineSeries, Plot, PlotProps } from '../../src'; export default { title: 'API/Plot', component: Plot, -} as Meta; +} satisfies Meta; const data = [ { diff --git a/stories/control/range.stories.tsx b/stories/control/range.stories.tsx index 0bd9ce58..ca73ba20 100644 --- a/stories/control/range.stories.tsx +++ b/stories/control/range.stories.tsx @@ -2,12 +2,12 @@ import { Meta } from '@storybook/react'; import { Axis, - RangeSeries, - Plot, - RangeSeriesProps, - RangeSeriesPoint, Legend, LineSeries, + Plot, + RangeSeries, + RangeSeriesPoint, + RangeSeriesProps, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; @@ -26,7 +26,7 @@ export default { hidden: false, label: 'Label', }, -} as Meta; +} satisfies Meta; const data2 = [ { diff --git a/stories/control/scatter.stories.tsx b/stories/control/scatter.stories.tsx index 3eed967f..f1f18457 100644 --- a/stories/control/scatter.stories.tsx +++ b/stories/control/scatter.stories.tsx @@ -28,7 +28,7 @@ export default { errorBarsStyle: { strokeWidth: 1 }, errorBarsCapStyle: { stroke: 'blue' }, }, -} as Meta; +} satisfies Meta; const data: SeriesPointWithError[] = [ { diff --git a/stories/control/timeaxis.stories.tsx b/stories/control/timeaxis.stories.tsx index 1eefadc0..0c691a25 100644 --- a/stories/control/timeaxis.stories.tsx +++ b/stories/control/timeaxis.stories.tsx @@ -12,7 +12,7 @@ export default { hidden: false, hiddenTicks: false, }, -} as Meta; +} satisfies Meta; interface AxisControlProps { label: string; diff --git a/stories/control/tracking.stories.tsx b/stories/control/tracking.stories.tsx index 18a0d7a7..617d865f 100644 --- a/stories/control/tracking.stories.tsx +++ b/stories/control/tracking.stories.tsx @@ -2,14 +2,14 @@ import { Meta } from '@storybook/react'; import { useState } from 'react'; import { + Annotation, + Annotations, Axis, + Legend, LineSeries, Plot, - Annotations, SeriesPoint, usePlotEvents, - Annotation, - Legend, } from '../../src'; import { ClosestInfoResult, @@ -32,15 +32,15 @@ export default { }, }, }, -} as Meta; +} satisfies Meta; interface TrackingProps { method: ClosestMethods; } const len = 100000; -let serie1: SeriesPoint[] = new Array(len); -let serie2: SeriesPoint[] = new Array(len); +const serie1: SeriesPoint[] = new Array(len); +const serie2: SeriesPoint[] = new Array(len); for (let i = 0; i < len; i++) { serie1[i] = { x: i - 100, diff --git a/stories/examples/absorbance.stories.tsx b/stories/examples/absorbance.stories.tsx index 4aeccd32..8b2b1f0e 100644 --- a/stories/examples/absorbance.stories.tsx +++ b/stories/examples/absorbance.stories.tsx @@ -13,7 +13,7 @@ import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Absorbance', -} as Meta; +} satisfies Meta; const lineData: SeriesPoint[] = []; for (let x = 0; x <= data.data[0].x.length; x++) { @@ -21,12 +21,12 @@ for (let x = 0; x <= data.data[0].x.length; x++) { } lineData.pop(); -function getRangePosition(array: SeriesPoint[]): Array { +function getRangePosition(array: SeriesPoint[]): RangeSeriesPoint[] { if (array.length % 2 !== 0) throw new Error('The array isnt correct'); const one = array.slice(0, array.length / 2); const two = array.slice(array.length / 2, array.length).reverse(); - const result: Array = []; + const result: RangeSeriesPoint[] = []; for (let i = 0; i < one.length; i++) { result.push({ diff --git a/stories/examples/axis.stories.tsx b/stories/examples/axis.stories.tsx index 0de12451..8b72a3c6 100644 --- a/stories/examples/axis.stories.tsx +++ b/stories/examples/axis.stories.tsx @@ -5,7 +5,7 @@ import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils'; export default { title: 'Examples/Axis', -} as Meta; +} satisfies Meta; export function DefaultAxes() { return {getInfraredSeries()}; diff --git a/stories/examples/bed.stories.tsx b/stories/examples/bed.stories.tsx index fd53fb60..b871e63d 100644 --- a/stories/examples/bed.stories.tsx +++ b/stories/examples/bed.stories.tsx @@ -3,17 +3,17 @@ import { Fragment } from 'react'; import { Axis, - Plot, Heading, Legend, - ScatterSeries, LineSeries, + Plot, + ScatterSeries, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Bed per 10^3 people', -} as Meta; +} satisfies Meta; const data = Array.from(generateNumbers(160)) .sort((a, b) => b.beds - a.beds) diff --git a/stories/examples/bitcoin.stories.tsx b/stories/examples/bitcoin.stories.tsx index b91c89b6..c9fe8acd 100644 --- a/stories/examples/bitcoin.stories.tsx +++ b/stories/examples/bitcoin.stories.tsx @@ -1,12 +1,12 @@ import { Meta } from '@storybook/react'; -import { Axis, LineSeries, Plot, Heading, SeriesPoint } from '../../src'; +import { Axis, Heading, LineSeries, Plot, SeriesPoint } from '../../src'; import data from '../data/bitcoin.json'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Bitcoin prices', -} as Meta; +} satisfies Meta; export function BitcoinPrice() { return ( diff --git a/stories/examples/boxPlot.stories.tsx b/stories/examples/boxPlot.stories.tsx index 03fee793..75ffba2d 100644 --- a/stories/examples/boxPlot.stories.tsx +++ b/stories/examples/boxPlot.stories.tsx @@ -1,11 +1,11 @@ import { Meta } from '@storybook/react'; import { - AnnotationBoxPlotProps, Annotation, + AnnotationBoxPlotProps, Annotations, - Plot, Axis, + Plot, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; @@ -28,7 +28,7 @@ export default { whiskerStyle: { strokeWidth: 50 }, minMaxColor: 'black', }, -} as Meta; +} satisfies Meta; export function AnnotationBoxPlot(props: AnnotationBoxPlotProps) { return ( diff --git a/stories/examples/callback.stories.tsx b/stories/examples/callback.stories.tsx index 6b4b8862..f46bab13 100644 --- a/stories/examples/callback.stories.tsx +++ b/stories/examples/callback.stories.tsx @@ -6,7 +6,7 @@ import { DEFAULT_PLOT_CONFIG, getInfraredSeries } from '../utils'; export default { title: 'Examples/Annotations Callback', -} as Meta; +} satisfies Meta; export function AnnotationCallback() { const [overElement, setOverElement] = useState(''); diff --git a/stories/examples/color-serie.stories.tsx b/stories/examples/color-serie.stories.tsx index 6ac6bcdb..f245ac14 100644 --- a/stories/examples/color-serie.stories.tsx +++ b/stories/examples/color-serie.stories.tsx @@ -1,12 +1,12 @@ import { Meta } from '@storybook/react'; -import { Axis, Plot, Heading, ScatterSeries, SeriesPoint } from '../../src'; +import { Axis, Heading, Plot, ScatterSeries, SeriesPoint } from '../../src'; import data from '../data/color-serie.json'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Color Serie', -} as Meta; +} satisfies Meta; interface Data extends SeriesPoint { color: string; } diff --git a/stories/examples/covid-cases.stories.tsx b/stories/examples/covid-cases.stories.tsx index 75a141a9..a5228aba 100644 --- a/stories/examples/covid-cases.stories.tsx +++ b/stories/examples/covid-cases.stories.tsx @@ -1,12 +1,12 @@ import { Meta } from '@storybook/react'; -import { Axis, LineSeries, Plot, Heading } from '../../src'; +import { Axis, Heading, LineSeries, Plot } from '../../src'; import data from '../data/covid-cases.json'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Covid19 cases-USA', -} as Meta; +} satisfies Meta; export function Covid19Cases() { return ( diff --git a/stories/examples/draw.stories.tsx b/stories/examples/draw.stories.tsx index 97204629..c6920471 100644 --- a/stories/examples/draw.stories.tsx +++ b/stories/examples/draw.stories.tsx @@ -1,13 +1,13 @@ import { Meta } from '@storybook/react'; import { + Annotations, Axis, LineSeries, Plot, - Annotations, useDrawPath, - useDrawRectangle, UseDrawPathOptions, + useDrawRectangle, UseDrawRectangleOptions, } from '../../src'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils'; @@ -16,7 +16,7 @@ export default { title: 'Examples/Draw', decorators: [PlotControllerDecorator], args: { disabled: false }, -} as Meta; +} satisfies Meta; const data = [ { x: 1, y: 10 }, diff --git a/stories/examples/iris-dataset.stories.tsx b/stories/examples/iris-dataset.stories.tsx index 66f19657..3091f03c 100644 --- a/stories/examples/iris-dataset.stories.tsx +++ b/stories/examples/iris-dataset.stories.tsx @@ -1,21 +1,21 @@ import { Meta } from '@storybook/react'; -import { getClasses, getNumbers, getDistinctClasses } from 'ml-dataset-iris'; +import { getClasses, getDistinctClasses, getNumbers } from 'ml-dataset-iris'; import { PCA as MlPCA } from 'ml-pca'; -import LinearRegression from 'ml-regression-simple-linear'; +import { SimpleLinearRegression } from 'ml-regression-simple-linear'; import { ReactElement, useMemo } from 'react'; import { - Plot, - ScatterSeries, - SeriesPoint, Axis, FunctionSeries, + Plot, + ScatterSeries, Series, + SeriesPoint, } from '../../src'; export default { title: 'Examples/Iris dataset', -} as Meta; +} satisfies Meta; const dataset = getNumbers(); const numFeatures = dataset[0].length; @@ -29,7 +29,7 @@ export function PCA() { const predicted = pca.predict(dataset); const children = useMemo(() => { - const children: JSX.Element[] = []; + const children: ReactElement[] = []; for (let pcY = 0; pcY < numFeatures; pcY++) { for (let pcX = 0; pcX < numFeatures; pcX++) { if (pcY === pcX) { @@ -62,7 +62,7 @@ export function PCA() { const x = predictedData.getColumn(0); const y = predictedData.getColumn(1); - const regression = new LinearRegression(x, y); + const regression = new SimpleLinearRegression(x, y); const data: SeriesPoint[] = []; for (const [i, xValue] of x.entries()) { @@ -84,6 +84,7 @@ export function PCA() { xAxis="x" yAxis="y" id={`${klass}-Function`} + // @ts-expect-error Method is inherited, it exists. getY={(val: number) => regression.predict(val)} label={`${klass}-Function`} />, diff --git a/stories/examples/lassoselection.stories.tsx b/stories/examples/lassoselection.stories.tsx index e85abf7c..8dce969a 100644 --- a/stories/examples/lassoselection.stories.tsx +++ b/stories/examples/lassoselection.stories.tsx @@ -3,10 +3,10 @@ import pointInPolygon from 'point-in-polygon'; import { useState } from 'react'; import { + Annotation, + Annotations, Axis, Plot, - Annotations, - Annotation, ScatterSeries, SeriesPoint, useDrawPath, @@ -18,7 +18,7 @@ export default { title: 'Examples/Lasso Selection', decorators: [PlotControllerDecorator], args: { disabled: false }, -} as Meta; +} satisfies Meta; const dataVertical = { data: { diff --git a/stories/examples/measurement.stories.tsx b/stories/examples/measurement.stories.tsx index 925716c5..6792042c 100644 --- a/stories/examples/measurement.stories.tsx +++ b/stories/examples/measurement.stories.tsx @@ -45,7 +45,7 @@ export default { control: 'select', }, }, -} as Meta; +} satisfies Meta; export function Measurement(props: MeasurementProps) { const { xAxis = 'x', yAxis = 'y', hook } = props; diff --git a/stories/examples/mixed.stories.tsx b/stories/examples/mixed.stories.tsx index 9d071bc8..fd0cefcf 100644 --- a/stories/examples/mixed.stories.tsx +++ b/stories/examples/mixed.stories.tsx @@ -1,8 +1,8 @@ import { Meta } from '@storybook/react'; import { - Line, AnnotationLineProps, + Line, } from '../../src/components/Annotations/Line'; import { AnnotationPlot } from '../annotations/annotation.data'; @@ -17,7 +17,7 @@ export default { color: 'blue', strokeWidth: 5, }, -} as Meta; +} satisfies Meta; export function AnnotationMixed(props: AnnotationLineProps) { return ( diff --git a/stories/examples/nasdaq.stories.tsx b/stories/examples/nasdaq.stories.tsx index d119a764..4f008124 100644 --- a/stories/examples/nasdaq.stories.tsx +++ b/stories/examples/nasdaq.stories.tsx @@ -1,7 +1,7 @@ import { Meta } from '@storybook/react'; -import { useState, useEffect } from 'react'; +import { useEffect, useState } from 'react'; -import { Axis, LineSeries, Plot, Heading, SeriesPoint } from '../../src'; +import { Axis, Heading, LineSeries, Plot, SeriesPoint } from '../../src'; import srcData from '../data/nasdaq.json'; import { DEFAULT_PLOT_CONFIG } from '../utils'; @@ -12,7 +12,7 @@ export default { step: 1, displayInterval: 500, }, -} as Meta; +} satisfies Meta; const generateNewXY = (serie: SeriesPoint, step: number): [number, number] => { const x = serie.x + step; @@ -22,10 +22,10 @@ const generateNewXY = (serie: SeriesPoint, step: number): [number, number] => { }; const getLastData = ( - data: Array, + data: SeriesPoint[], displayInterval: number, -): Array => { - const lastTimestamp = data[data.length - 1].x; +): SeriesPoint[] => { + const lastTimestamp = (data.at(-1) as SeriesPoint).x; const firstIndex = data.findIndex( (serie) => serie.x >= lastTimestamp - displayInterval, ); @@ -45,7 +45,10 @@ export function NasdaqExample(props: Props) { useEffect(() => { const timer = setTimeout(() => { - const [x, y] = generateNewXY(data[data.length - 1], step); // generate a new coordinates + const [x, y] = generateNewXY( + data.at(-1) as { x: number; y: number }, + step, + ); // generate a new coordinates const newData = getLastData([...data, { x, y }], displayInterval); // get last 500s data setData(newData); }, refreshFrequency * 1000); diff --git a/stories/examples/nested-zoom.stories.tsx b/stories/examples/nested-zoom.stories.tsx index 49fd37c2..887b5203 100644 --- a/stories/examples/nested-zoom.stories.tsx +++ b/stories/examples/nested-zoom.stories.tsx @@ -10,7 +10,7 @@ import { getInfraredSeries } from '../utils'; export default { title: 'Examples/Nested Zoom', -} as Meta; +} satisfies Meta; export function NestedZoom() { return ( diff --git a/stories/examples/parallel-zoom.stories.tsx b/stories/examples/parallel-zoom.stories.tsx index 7b76f645..a8564dfc 100644 --- a/stories/examples/parallel-zoom.stories.tsx +++ b/stories/examples/parallel-zoom.stories.tsx @@ -10,7 +10,7 @@ import { getInfraredSeries } from '../utils'; export default { title: 'Examples/Parallel Zoom', -} as Meta; +} satisfies Meta; export function ParallelZoom() { return ( diff --git a/stories/examples/pca.stories.tsx b/stories/examples/pca.stories.tsx index 1b4a6933..088fa97a 100644 --- a/stories/examples/pca.stories.tsx +++ b/stories/examples/pca.stories.tsx @@ -3,11 +3,11 @@ import { getDirectionalEllipse } from 'ml-directional-distribution'; import { useMemo } from 'react'; import { + Annotations, Axis, - Plot, Heading, + Plot, ScatterSeries, - Annotations, useRectangularZoom, } from '../../src'; import { DirectedEllipse } from '../../src/components/Annotations/DirectedEllipse'; @@ -18,9 +18,9 @@ import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils'; export default { title: 'Examples/PCA example of ecstasy', decorators: [PlotControllerDecorator], -} as Meta; +} satisfies Meta; -type Datum = typeof data[number]; +type Datum = (typeof data)[number]; export function PCAExample() { const zoom = useRectangularZoom(); diff --git a/stories/examples/sanplot-big-data.stories.tsx b/stories/examples/sanplot-big-data.stories.tsx index 9273ff3e..3179f8c0 100644 --- a/stories/examples/sanplot-big-data.stories.tsx +++ b/stories/examples/sanplot-big-data.stories.tsx @@ -14,7 +14,7 @@ import data from '../data/1h-spectrum.json'; export default { title: 'Examples/Sanplot', -} as Meta; +} satisfies Meta; interface PlotData { positive: SeriesPoint[]; @@ -158,7 +158,7 @@ function getLine(value: number, data: any, options: any) { const { log10, abs } = Math; const { yLogBase } = options; const first = data.length > 0 ? data[0].x : 0; - const last = data.length > 0 ? data[data.length - 1].x : 0; + const last = data.length > 0 ? data.at(-1).x : 0; const inLogScale = log10(abs(value)) / log10(yLogBase); return [ { x: first, y: inLogScale }, diff --git a/stories/examples/shapes.stories.tsx b/stories/examples/shapes.stories.tsx index a75c5323..9a5baeb9 100644 --- a/stories/examples/shapes.stories.tsx +++ b/stories/examples/shapes.stories.tsx @@ -41,7 +41,7 @@ export default { ), ], -} as Meta; +} satisfies Meta; export function SquareShape() { return ; diff --git a/stories/examples/shift.stories.tsx b/stories/examples/shift.stories.tsx index cae4ace2..6817ac7f 100644 --- a/stories/examples/shift.stories.tsx +++ b/stories/examples/shift.stories.tsx @@ -1,18 +1,18 @@ import { Meta } from '@storybook/react'; import { + Annotation, + Annotations, Axis, - Plot, LineSeries, - Annotations, - Annotation, + Plot, ScalarValue, } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Examples/Shift', -} as Meta; +} satisfies Meta; const exampleData = [ { x: 0, y: 0 }, diff --git a/stories/examples/spectrum2d.stories.tsx b/stories/examples/spectrum2d.stories.tsx index 8ae433a6..0166a688 100644 --- a/stories/examples/spectrum2d.stories.tsx +++ b/stories/examples/spectrum2d.stories.tsx @@ -16,7 +16,7 @@ export default { title: 'Examples/Spectrum 2D', decorators: [PlotControllerDecorator], args: { disabled: false }, -} as Meta; +} satisfies Meta; export function Spectrum2D({ disabled }: UseRectangularZoomOptions) { const zoom = useRectangularZoom({ disabled }); diff --git a/stories/examples/weatherchart.stories.tsx b/stories/examples/weatherchart.stories.tsx index 04794b5d..2d4080f5 100644 --- a/stories/examples/weatherchart.stories.tsx +++ b/stories/examples/weatherchart.stories.tsx @@ -15,7 +15,7 @@ import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils'; export default { title: 'Examples/Weather Chart', decorators: [PlotControllerDecorator], -} as Meta; +} satisfies Meta; export function WeatherChart() { const rain: SeriesPoint[] = []; diff --git a/stories/examples/zoom.stories.tsx b/stories/examples/zoom.stories.tsx index ef88c065..cbdbfa66 100644 --- a/stories/examples/zoom.stories.tsx +++ b/stories/examples/zoom.stories.tsx @@ -1,15 +1,15 @@ import { Meta } from '@storybook/react'; import { + Annotation, + Annotations, Axis, LineSeries, Plot, - Annotations, - Annotation, ScatterSeries, useAxisZoom, - useRectangularZoom, UseAxisZoomOptions, + useRectangularZoom, } from '../../src'; import { DEFAULT_PLOT_CONFIG, PlotControllerDecorator } from '../utils'; @@ -17,7 +17,7 @@ export default { title: 'Examples/Zoom', decorators: [PlotControllerDecorator], args: { disabled: false }, -} as Meta; +} satisfies Meta; const data = [ { x: 1, y: 10 }, diff --git a/stories/plot-object.stories.tsx b/stories/plot-object.stories.tsx index 24fc73e2..f265f5f9 100644 --- a/stories/plot-object.stories.tsx +++ b/stories/plot-object.stories.tsx @@ -5,7 +5,7 @@ import { Annotation, PlotObject, PlotObjectPlot } from '../src'; export default { title: 'Plot/Plot object', component: PlotObject, -} as Meta; +} satisfies Meta; export function Control() { const plot: PlotObjectPlot = { diff --git a/stories/plot.stories.tsx b/stories/plot.stories.tsx index 1baa6eb2..6c2741e6 100644 --- a/stories/plot.stories.tsx +++ b/stories/plot.stories.tsx @@ -1,13 +1,13 @@ import { Meta } from '@storybook/react'; import { - Plot, + Axis, Heading, Legend, + LegendPosition, LineSeries, - Axis, + Plot, VerticalPosition, - LegendPosition, } from '../src'; const args = { @@ -28,7 +28,7 @@ export default { title: 'Plot/General options', component: Plot, args, -} as Meta; +} satisfies Meta; export function Control(props: typeof args) { const { diff --git a/stories/spectra/infrared.stories.tsx b/stories/spectra/infrared.stories.tsx index 3e503acf..8ca2eb40 100644 --- a/stories/spectra/infrared.stories.tsx +++ b/stories/spectra/infrared.stories.tsx @@ -22,7 +22,7 @@ export default { verticalAxisId: 'y', disabled: false, }, -} as Meta; +} satisfies Meta; export function InfraredExample(props: UseCrossHairOptions) { const crossHair = useCrossHair(props); diff --git a/stories/spectra/iv.stories.tsx b/stories/spectra/iv.stories.tsx index 8834db86..28c1d264 100644 --- a/stories/spectra/iv.stories.tsx +++ b/stories/spectra/iv.stories.tsx @@ -2,36 +2,33 @@ import { Meta } from '@storybook/react'; import type { MeasurementSelector } from 'base-analysis'; import { Analysis, fromBreakdown, fromTransfer } from 'iv-analysis'; import { xyToXYObject } from 'ml-spectra-processing'; -import { useEffect, useState } from 'react'; +import { type ReactNode, useEffect, useState } from 'react'; import { Annotation, Annotations, Axis, LineSeries, Plot } from '../../src'; import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Experimental spectra/IV', -} as Meta; +} satisfies Meta; interface BaseExampleProps { filename: string; selector: MeasurementSelector; yScale: 'linear' | 'log'; - processorFunction(text: string): Analysis[]; - children(meta: any, data: Array>): React.ReactNode; + processorFunction: (text: string) => Analysis[]; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + children: (meta: any, data: Array>) => ReactNode; } -function BaseExample({ - filename, - selector, - yScale, - processorFunction, - children, -}: BaseExampleProps) { + +function BaseExample(props: BaseExampleProps) { + const { filename, selector, yScale, processorFunction, children } = props; const [csv, setCsv] = useState(null); const [error, setError] = useState(null); useEffect(() => { fetch(filename) .then((res) => res.text()) .then((val) => setCsv(val)) - .catch((error) => setError(error)); + .catch((error: unknown) => setError(error as Error)); }, [filename]); if (error) return
Error: {error.message}
; diff --git a/stories/spectra/mass.stories.tsx b/stories/spectra/mass.stories.tsx index d4057663..b092debe 100644 --- a/stories/spectra/mass.stories.tsx +++ b/stories/spectra/mass.stories.tsx @@ -1,8 +1,6 @@ import { Meta } from '@storybook/react'; -// @ts-expect-error untyped module -import IsotopicDistribution from 'isotopic-distribution'; +import { IsotopicDistribution } from 'isotopic-distribution'; import { xyToXYObject } from 'ml-spectra-processing'; -// @ts-expect-error untyped module import { getBestPeaks } from 'ms-spectrum'; import { useMemo } from 'react'; @@ -12,10 +10,10 @@ import { BarSeries, LineSeries, Plot, - useAxisZoom, useAxisWheelZoom, - usePlotControllerAxes, + useAxisZoom, usePan, + usePlotControllerAxes, } from '../../src'; import { Group } from '../../src/components/Annotations/Group'; import { Line } from '../../src/components/Annotations/Line'; @@ -27,7 +25,7 @@ export default { title: 'Experimental spectra/Mass', decorators: [PlotControllerDecorator], args: { disabled: false }, -} as Meta; +} satisfies Meta; export function MassExample() { return ( @@ -83,7 +81,8 @@ export function AdvancedMassExample({ profile: xyToXYObject(profileXY), centroid: isotopicDistribution.getTable({ maxValue: 100, - }), + // eslint-disable-next-line @typescript-eslint/no-explicit-any + }) as any, }; }, [mf]); diff --git a/stories/spectra/nmr.stories.tsx b/stories/spectra/nmr.stories.tsx index 6b38240b..8bb117a7 100644 --- a/stories/spectra/nmr.stories.tsx +++ b/stories/spectra/nmr.stories.tsx @@ -8,7 +8,7 @@ import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Experimental spectra/NMR', -} as Meta; +} satisfies Meta; export function NmrExample() { return ( diff --git a/stories/spectra/raman.stories.tsx b/stories/spectra/raman.stories.tsx index b2c956d4..5d73bad6 100644 --- a/stories/spectra/raman.stories.tsx +++ b/stories/spectra/raman.stories.tsx @@ -6,7 +6,7 @@ import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Experimental spectra/Raman', -} as Meta; +} satisfies Meta; export function RamanExample() { return ( diff --git a/stories/spectra/tga.stories.tsx b/stories/spectra/tga.stories.tsx index 3f6d2635..5a325221 100644 --- a/stories/spectra/tga.stories.tsx +++ b/stories/spectra/tga.stories.tsx @@ -7,7 +7,7 @@ import { DEFAULT_PLOT_CONFIG } from '../utils'; export default { title: 'Experimental spectra/TGA', -} as Meta; +} satisfies Meta; export function TgaExample() { return ( diff --git a/stories/utils.tsx b/stories/utils.tsx index ad15b919..f90c7310 100644 --- a/stories/utils.tsx +++ b/stories/utils.tsx @@ -1,4 +1,6 @@ -import { DecoratorFn } from '@storybook/react'; +import { Decorator } from '@storybook/react'; +import type { ReactNode } from 'react'; +import { ErrorBoundary } from 'react-error-boundary'; import { LineSeries, PlotController } from '../src'; @@ -24,8 +26,23 @@ export function getInfraredSeries() { ); } -export const PlotControllerDecorator: DecoratorFn = (Story) => ( +export const PlotControllerDecorator: Decorator = (Story) => ( ); + +export function TestErrorBoundary({ children }: { children: ReactNode }) { + return ( + { + if (props.error) { + return
{props.error.message}
; + } + return
Something went wrong
; + }} + > + {children} + + ); +} diff --git a/tests/annotations.test.tsx b/tests/annotations.test.tsx index bc4f3516..13d6a9d3 100644 --- a/tests/annotations.test.tsx +++ b/tests/annotations.test.tsx @@ -1,4 +1,4 @@ -import { test, expect } from '@playwright/experimental-ct-react'; +import { expect, test } from '@playwright/experimental-ct-react'; import { Annotations } from '../src'; import { Arrow } from '../src/components/Annotations/Arrow'; diff --git a/tests/axis.test.tsx b/tests/axis.test.tsx index b871d501..0346ed84 100644 --- a/tests/axis.test.tsx +++ b/tests/axis.test.tsx @@ -1,6 +1,7 @@ -import { test, expect } from '@playwright/experimental-ct-react'; +import { expect, test } from '@playwright/experimental-ct-react'; import { Axis, LineSeries, ParallelAxis } from '../src'; +import { TestErrorBoundary } from '../stories/utils'; import { DefaultPlotTest, InfraredPlotTest } from './utils'; @@ -18,14 +19,15 @@ test('all valid axes', async ({ mount }) => { }); test('invalid axes', async ({ mount }) => { - await expect(async () => { - await mount( + const result = await mount( + - , - ); - }).rejects.toThrow('Plot can only have one bottom axis'); + + , + ); + await expect(result).toContainText('Plot can only have one bottom axis'); }); test('parallel axis', async ({ mount }) => { @@ -40,7 +42,7 @@ test('parallel axis', async ({ mount }) => { await expect(horizontalAxes).toHaveCount(2); }); -test('axis scale', async ({ mount }) => { +test('axis scale linear', async ({ mount }) => { const linear = await mount( { await expect(linear.locator('_react=Axis[scale="linear"]')).toHaveText( defaultAxis, ); +}); +test('axis scale log', async ({ mount }) => { const log = await mount( @@ -63,6 +67,9 @@ test('axis scale', async ({ mount }) => { ); const logAxis = [1000].join(''); await expect(log.locator('_react=Axis[scale="log"]')).toHaveText(logAxis); +}); + +test('axis scale time', async ({ mount }) => { const time = await mount( { }); test('invalid plot child', async ({ mount }) => { - await expect(async () => { - await mount( + const result = await mount( +
invalid child
- , - ); - }).rejects.toThrow('invalid plot child'); + + , + ); + await expect(result).toContainText('invalid plot child'); }); test('plot height and width', async ({ mount }) => { diff --git a/tests/serverside.test.tsx b/tests/serverside.test.tsx index 811dacf3..ad2cb87a 100644 --- a/tests/serverside.test.tsx +++ b/tests/serverside.test.tsx @@ -1,4 +1,5 @@ -import { test, expect } from '@playwright/experimental-ct-react'; +import { expect, test } from '@playwright/experimental-ct-react'; + import { ServerSide } from './utils'; test('should render a plot in server-side mode', async ({ mount }) => { diff --git a/tests/utils.tsx b/tests/utils.tsx index e6069be9..c59b648e 100644 --- a/tests/utils.tsx +++ b/tests/utils.tsx @@ -16,6 +16,7 @@ export function DefaultPlotTest({ children }: ChildrenProps) { } export function ServerSide() { const html = renderToStaticMarkup(); + // eslint-disable-next-line react/no-danger return
; } export function InfraredPlotTest({ children }: ChildrenProps) { diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json index 58692d04..93cfa065 100644 --- a/tsconfig.cjs.json +++ b/tsconfig.cjs.json @@ -3,7 +3,7 @@ "exclude": [ "**/__tests__", "stories", - "playwright.config.ts", + "playwright-ct.config.ts", "tests", "playwright" ] diff --git a/tsconfig.json b/tsconfig.json index 61690bd8..f832f58b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,13 +12,14 @@ "sourceMap": true, "declarationMap": true, "strict": true, - "target": "es2019" + "target": "es2022", + "skipLibCheck": true }, "include": [ "src/**/*", "stories/**/*", "tests/**/*", - "playwright.config.ts", + "playwright-ct.config.ts", "playwright" ], "exclude": ["node_modules"]