zakodium-oss · targos · Aug 14, 2025 · Aug 14, 2025
diff --git a/package.json b/package.json
@@ -1,100 +1,102 @@
 {
   "name": "react-plot",
   "version": "3.1.0",
+  "license": "MIT",
   "description": "Library of React components to render SVG 2D plots.",
+  "keywords": [
+    "react",
+    "plot",
+    "d3-line",
+    "d3",
+    "d3-react"
+  ],
+  "author": "Miguel Asencio",
+  "contributors": [
+    "Michaël Zasso",
+    "Sebastien Ahkrin",
+    "Nadjib Souab",
+    "Luc Patiny"
+  ],
   "type": "module",
-  "exports": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js"
+  },
   "files": [
     "lib",
     "src"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build-ts",
     "build-storybook": "storybook build",
-    "build-ts": "tsc -p tsconfig.build.json",
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib",
+    "clean": "rimraf lib playwright-report storybook-static test-results",
     "dev": "storybook dev -p 6006",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
     "playwright": "playwright test -c playwright-ct.config.ts",
-    "prepack": "npm run build",
+    "prepack": "npm run tsc",
     "prettier": "prettier --check .",
     "prettier-write": "prettier --write .",
     "start": "npm run dev",
-    "test": "npm run playwright && npm run eslint && npm run prettier && npm run check-types"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zakodium-oss/react-plot.git"
+    "test": "npm run playwright && npm run eslint && npm run prettier && npm run check-types",
+    "tsc-build": "tsc -p tsconfig.build.json",
+    "tsc": "npm run clean && npm run tsc-build"
   },
-  "keywords": [
-    "react",
-    "plot",
-    "d3-line",
-    "d3",
-    "d3-react"
-  ],
-  "author": "Miguel Asencio",
-  "contributors": [
-    "Michaël Zasso",
-    "Sebastien Ahkrin",
-    "Nadjib Souab",
-    "Luc Patiny"
-  ],
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/zakodium-oss/react-plot/issues"
+  "dependencies": {
+    "d3-array": "^3.2.4",
+    "d3-scale": "^4.0.2",
+    "d3-scale-chromatic": "^3.1.0",
+    "d3-shape": "^3.2.0",
+    "immer": "^10.1.1",
+    "ml-distance-euclidean": "^2.0.0",
+    "react-d3-utils": "^3.1.2"
   },
-  "homepage": "https://github.com/zakodium-oss/react-plot#readme",
   "peerDependencies": {
-    "@types/react": "*",
-    "react": ">=18.0.0"
+    "@types/react": ">=18",
+    "react": ">=18"
   },
   "devDependencies": {
-    "@playwright/experimental-ct-react": "^1.53.0",
+    "@playwright/experimental-ct-react": "^1.54.2",
     "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/addon-links": "^9.0.8",
-    "@storybook/react-vite": "^9.0.8",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-links": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
     "@types/d3-array": "^3.2.1",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-shape": "^3.1.7",
-    "@types/node": "^22.7.5",
+    "@types/node": "^24.2.1",
     "@types/point-in-polygon": "^1.1.5",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "@zakodium/tsconfig": "^1.0.1",
-    "eslint": "^9.28.0",
-    "eslint-config-zakodium": "^15.0.1",
-    "eslint-plugin-storybook": "^9.0.8",
-    "isotopic-distribution": "^3.4.14",
+    "@types/react": "^19.1.10",
+    "@types/react-dom": "^19.1.7",
+    "@zakodium/tsconfig": "^1.0.2",
+    "eslint": "^9.33.0",
+    "eslint-config-zakodium": "^16.0.0",
+    "eslint-plugin-storybook": "^9.1.2",
+    "isotopic-distribution": "^3.4.16",
     "iv-analysis": "^0.4.0",
     "ml-dataset-iris": "^1.2.1",
     "ml-directional-distribution": "^0.1.1",
     "ml-pca": "^4.1.1",
     "ml-regression-simple-linear": "^3.0.1",
-    "ml-spectra-processing": "^14.12.0",
-    "ms-spectrum": "^3.9.0",
+    "ml-spectra-processing": "^14.16.1",
+    "ms-spectrum": "^3.9.2",
     "point-in-polygon": "^1.1.0",
-    "prettier": "^3.5.3",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "prettier": "^3.6.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "react-error-boundary": "^6.0.0",
     "rimraf": "^6.0.1",
-    "storybook": "^9.0.8",
-    "typescript": "^5.8.3"
+    "storybook": "^9.1.2",
+    "typescript": "^5.9.2"
   },
-  "dependencies": {
-    "d3-array": "^3.2.4",
-    "d3-scale": "^4.0.2",
-    "d3-scale-chromatic": "^3.1.0",
-    "d3-shape": "^3.2.0",
-    "immer": "^10.1.1",
-    "ml-distance-euclidean": "^2.0.0",
-    "react-d3-utils": "^3.1.0"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zakodium-oss/react-plot.git"
   },
+  "bugs": {
+    "url": "https://github.com/zakodium-oss/react-plot/issues"
+  },
+  "homepage": "https://github.com/zakodium-oss/react-plot#readme",
   "volta": {
     "node": "22.16.0"
   }

diff --git a/src/components/Annotations/index.ts b/src/components/Annotations/index.ts
@@ -34,7 +34,7 @@ export type { AnnotationEllipseProps } from './Ellipse.js';
 export type { AnnotationGroupProps } from './Group.js';
 export type { AnnotationLineProps } from './Line.js';
 export type { AnnotationRectangleProps } from './Rectangle.js';
-export type { AnnotationShapeProps, AnnotationShapeName } from './Shape.js';
+export type { AnnotationShapeName, AnnotationShapeProps } from './Shape.js';
 export type { AnnotationTextProps } from './Text.js';
 export type { AnnotationPolygonProps } from './Polygon.js';
 export type { AnnotationPolylineProps } from './Polyline.js';

diff --git a/src/components/Series/FunctionSeries.tsx b/src/components/Series/FunctionSeries.tsx
@@ -39,6 +39,7 @@ export function FunctionSeries(props: FunctionSeriesProps) {
       return data;
     }
     return [{ x: 0, y: 0 }];
+    // eslint-disable-next-line react-hooks/react-compiler
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [x?.domain[0], x?.domain[1]]);
   return <LineSeries data={data} id={id} {...otherProps} />;

diff --git a/src/contexts/plotContext.ts b/src/contexts/plotContext.ts
@@ -249,6 +249,9 @@ export function useAxisContext(
       );
 
       const range: number[] = isHorizontal ? [0, plotWidth] : [plotHeight, 0];
+      if (axis.flip) {
+        range.reverse();
+      }
       const domain = [axisMin - padding.min, axisMax + padding.max] as const;
       // eslint-disable-next-line unicorn/consistent-function-scoping
       const clampInDomain = function clampInDomain(value: number) {
@@ -261,9 +264,7 @@ export function useAxisContext(
             type: axis.scale,
             position: axis.position,
             tickLabelFormat: axis.tickLabelFormat,
-            scale: scaleLog()
-              .domain(domain)
-              .range(axis.flip ? range.reverse() : range),
+            scale: scaleLog().domain(domain).range(range),
             domain,
             clampInDomain,
           };
@@ -274,9 +275,7 @@ export function useAxisContext(
             type: axis.scale,
             position: axis.position,
             tickLabelFormat: axis.tickLabelFormat,
-            scale: scaleTime()
-              .domain(domain)
-              .range(axis.flip ? range.reverse() : range),
+            scale: scaleTime().domain(domain).range(range),
             domain,
             clampInDomain,
           };
@@ -287,9 +286,7 @@ export function useAxisContext(
             type: 'linear' as const,
             position: axis.position,
             tickLabelFormat: axis.tickLabelFormat,
-            scale: scaleLinear()
-              .domain(domain)
-              .range(axis.flip ? range.reverse() : range),
+            scale: scaleLinear().domain(domain).range(range),
             domain,
             clampInDomain,
           };

diff --git a/src/index.ts b/src/index.ts
@@ -22,15 +22,15 @@ export * from './components/Annotations/index.js';
 export * from './hooks/index.js';
 
 export type {
+  HorizontalPosition,
+  Position,
   ScalarValue,
   SeriesPoint,
-  SeriesPointWithError,
   SeriesPointError,
+  SeriesPointWithError,
   TickLabelFormat,
   TickPosition,
-  Position,
   VerticalPosition,
-  HorizontalPosition,
 } from './types.js';
 
 export {

diff --git a/src/utils/splitChildren.tsx b/src/utils/splitChildren.tsx
@@ -6,10 +6,10 @@ import type { AxisProps } from '../components/Axis/Axis.js';
 import { Axis } from '../components/Axis/Axis.js';
 import type { ParallelAxisProps } from '../components/Axis/ParallelAxis.js';
 import { ParallelAxis } from '../components/Axis/ParallelAxis.js';
-import { Heading } from '../components/Heading.js';
 import type { HeadingProps } from '../components/Heading.js';
-import { Legend } from '../components/Legend.js';
+import { Heading } from '../components/Heading.js';
 import type { LegendProps } from '../components/Legend.js';
+import { Legend } from '../components/Legend.js';
 import { BarSeries } from '../components/Series/BarSeries.js';
 import { FunctionSeries } from '../components/Series/FunctionSeries.js';
 import { LineSeries } from '../components/Series/LineSeries.js';

diff --git a/stories/examples/absorbance.stories.tsx b/stories/examples/absorbance.stories.tsx
@@ -16,9 +16,10 @@ for (let x = 0; x <= data.data[0].x.length; x++) {
 lineData.pop();
 
 function getRangePosition(array: SeriesPoint[]): RangeSeriesPoint[] {
-  if (array.length % 2 !== 0) throw new Error('The array isnt correct');
+  if (array.length % 2 !== 0) throw new Error("The array isn't correct");
   const one = array.slice(0, array.length / 2);
-  const two = array.slice(array.length / 2).reverse();
+  const two = array.slice(array.length / 2);
+  two.reverse();
 
   const result: RangeSeriesPoint[] = [];
 

diff --git a/stories/examples/spectrum2d.stories.tsx b/stories/examples/spectrum2d.stories.tsx
@@ -27,18 +27,18 @@ export function Spectrum2D({ disabled }: UseRectangularZoomOptions) {
         y,
       })),
     );
-    return dataList
-      .map((data, i) => (
-        <LineSeries
-          lineStyle={{ stroke: 'black', fill: 'white' }}
-          // eslint-disable-next-line react/no-array-index-key
-          key={i}
-          data={data}
-          xShift={`${i * 5}`}
-          yShift={`${-i * 5}`}
-        />
-      ))
-      .reverse();
+    const series = dataList.map((data, i) => (
+      <LineSeries
+        lineStyle={{ stroke: 'black', fill: 'white' }}
+        // eslint-disable-next-line react/no-array-index-key
+        key={i}
+        data={data}
+        xShift={`${i * 5}`}
+        yShift={`${-i * 5}`}
+      />
+    ));
+    series.reverse();
+    return series;
   }, []);
   return (
     <Plot {...DEFAULT_PLOT_CONFIG}>

diff --git a/stories/spectra/infrared.stories.tsx b/stories/spectra/infrared.stories.tsx
@@ -4,8 +4,8 @@ import type { UseCrossHairOptions } from '../../src/index.js';
 import { Annotations, Axis, Plot, useCrossHair } from '../../src/index.js';
 import {
   DEFAULT_PLOT_CONFIG,
-  getInfraredSeries,
   PlotControllerDecorator,
+  getInfraredSeries,
 } from '../utils.js';
 
 export default {

diff --git a/tsconfig.build.json b/tsconfig.build.json
@@ -1,10 +1,5 @@
 {
   "extends": "./tsconfig.json",
-  "exclude": [
-    "**/__tests__",
-    "playwright",
-    "playwright-ct.config.ts",
-    "stories",
-    "tests"
-  ]
+  "include": ["src"],
+  "exclude": ["**/__tests__"]
 }