react-d3-utils - npm Package Compare versions

Comparing version 1.0.0 to 2.0.0

lib/components/AlignGroup.js

@@ -1,7 +0,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AlignGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const useBBoxObserver_1 = require("../hooks/useBBoxObserver");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useBBoxObserver } from '../hooks/useBBoxObserver.js';
 function calculatePosition(start, align, space, value) {
@@ -26,9 +23,9 @@ switch (align) {
 }
-function AlignGroup(props) {
+export function AlignGroup(props) {
     const { x = 0, y = 0, verticalAlign = 'start', horizontalAlign = 'start', children, style = {}, } = props;
-    const observed = (0, useBBoxObserver_1.useBBoxObserver)();
-    const xPosition = (0, react_1.useMemo)(() => calculatePosition(x - observed.x, horizontalAlign, observed.width || 0, x), [x, observed.x, observed.width, horizontalAlign]);
-    const yPosition = (0, react_1.useMemo)(() => calculatePosition(y - observed.y, verticalAlign, observed.height || 0, y), [y, observed.y, observed.height, verticalAlign]);
-    return ((0, jsx_runtime_1.jsx)("g", { style: style, ref: observed.ref, transform: `translate(${xPosition}, ${yPosition})`, children: children }));
+    const observed = useBBoxObserver();
+    const xPosition = useMemo(() => calculatePosition(x - observed.x, horizontalAlign, observed.width || 0, x), [x, observed.x, observed.width, horizontalAlign]);
+    const yPosition = useMemo(() => calculatePosition(y - observed.y, verticalAlign, observed.height || 0, y), [y, observed.y, observed.height, verticalAlign]);
+    return (_jsx("g", { style: style, ref: observed.ref, transform: `translate(${xPosition}, ${yPosition})`, children: children }));
 }
-exports.AlignGroup = AlignGroup;
+//# sourceMappingURL=AlignGroup.js.map

lib/components/ResponsiveChart.js

@@ -1,13 +0,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const use_resize_observer_1 = __importDefault(require("use-resize-observer"));
-function ResponsiveChart(props) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import useResizeObserver from 'use-resize-observer';
+export function ResponsiveChart(props) {
     const { width, height, minWidth, minHeight, maxWidth, maxHeight, children } = props;
-    const observed = (0, use_resize_observer_1.default)();
-    return ((0, jsx_runtime_1.jsx)("div", { ref: observed.ref, style: {
+    // @ts-expect-error Default import is correct.
+    const observed = useResizeObserver();
+    return (_jsx("div", { ref: observed.ref, style: {
             position: 'relative',
@@ -21,6 +16,6 @@ flex: 1,
             maxHeight,
-        }, children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, children: observed.width && observed.height
+        }, children: _jsx("div", { style: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }, children: observed.width && observed.height
                 ? children({ width: observed.width, height: observed.height })
                 : null }) }));
 }
-exports.ResponsiveChart = ResponsiveChart;
+//# sourceMappingURL=ResponsiveChart.js.map

lib/hooks/useBBoxObserver.js

@@ -1,15 +0,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBBoxObserver = void 0;
-const react_1 = require("react");
+import { useCallback, useRef, useState } from 'react';
 const initialSize = { x: 0, y: 0, width: 0, height: 0 };
-function useBBoxObserver() {
+export function useBBoxObserver() {
     // Actual current size of the observed element
-    const [size, setSize] = (0, react_1.useState)(initialSize);
+    const [size, setSize] = useState(initialSize);
     // Previous size to compare in the observer and avoid unnecessary rerenders.
-    const previousSize = (0, react_1.useRef)(initialSize);
+    const previousSize = useRef(initialSize);
     // Contains a function to cleanup the previous observer when the observed element changes.
-    const cleanupPrevious = (0, react_1.useRef)();
+    const cleanupPrevious = useRef();
     // Ref callback to do the observation.
-    const ref = (0, react_1.useCallback)((element) => {
+    const ref = useCallback((element) => {
         if (cleanupPrevious.current) {
@@ -45,2 +42,2 @@ cleanupPrevious.current();
 }
-exports.useBBoxObserver = useBBoxObserver;
+//# sourceMappingURL=useBBoxObserver.js.map

lib/hooks/useLinearPrimaryTicks.js

@@ -1,12 +0,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLinearPrimaryTicks = void 0;
-const react_1 = require("react");
-const useTick_1 = require("./useTick");
-function useLinearPrimaryTicks(scale, direction, ref, options = {}) {
-    const [ticks, setTicks] = (0, react_1.useState)([]);
+import { useState } from 'react';
+import { useTicks } from './useTick.js';
+export function useLinearPrimaryTicks(scale, direction, ref, options = {}) {
+    const [ticks, setTicks] = useState([]);
     const { tickFormat = String } = options;
-    (0, useTick_1.useTicks)(scale, direction, ref, { ...options, tickFormat, setTicks });
+    useTicks(scale, direction, ref, { ...options, tickFormat, setTicks });
     return ticks;
 }
-exports.useLinearPrimaryTicks = useLinearPrimaryTicks;
+//# sourceMappingURL=useLinearPrimaryTicks.js.map

lib/hooks/useLogTicks.js

@@ -1,9 +0,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogTicks = void 0;
-const react_1 = require("react");
-const utils_1 = require("../utils");
+import { useCallback, useEffect, useMemo, useState, } from 'react';
+import { textDimensions } from '../utils.js';
 const TEST_HEIGHT = '[phone]';
 function isMainTick(value) {
-    const index = value / Math.pow(10, Math.round(Math.log10(value)));
+    const index = value / 10 ** Math.round(Math.log10(value));
     return Math.floor(index < 1 ? index * 10 : index);
@@ -27,4 +24,4 @@ }
 }
-function useLogTicks(scale, direction, ref, options = {}) {
-    const [maxStrSize, setMaxStrSize] = (0, react_1.useState)(40);
+export function useLogTicks(scale, direction, ref, options = {}) {
+    const [maxStrSize, setMaxStrSize] = useState(40);
     const range = scale.range();
@@ -37,7 +34,7 @@ if (!range)
     const { minSpace = 8 } = options;
-    const format = options === null || options === void 0 ? void 0 : options.tickFormat;
-    const tickFormat = (0, react_1.useCallback)((x) => (format ? format(x) : String(x)), [format]);
-    const ticks = (0, react_1.useMemo)(() => scale.ticks(), [scale]);
+    const format = options?.tickFormat;
+    const tickFormat = useCallback((x) => (format ? format(x) : String(x)), [format]);
+    const ticks = useMemo(() => scale.ticks(), [scale]);
     // Calculates the word density
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (ref.current) {
@@ -49,7 +46,7 @@ if (direction === 'horizontal') {
                     .reduce((acc, curr) => (acc.length < curr.length ? curr : acc), '');
-                const { width } = (0, utils_1.textDimensions)(maxLenWord, ref);
+                const { width } = textDimensions(maxLenWord, ref);
                 setMaxStrSize(Math.ceil(width));
             }
             else {
-                const { height } = (0, utils_1.textDimensions)(TEST_HEIGHT, ref);
+                const { height } = textDimensions(TEST_HEIGHT, ref);
                 setMaxStrSize(Math.ceil(height));
@@ -62,2 +59,2 @@ }
 }
-exports.useLogTicks = useLogTicks;
+//# sourceMappingURL=useLogTicks.js.map

lib/hooks/useTick.js

@@ -1,8 +0,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTicks = void 0;
-const react_1 = require("react");
-const utils_1 = require("../utils");
+import { useEffect, } from 'react';
+import { textDimensions } from '../utils.js';
 const TEST_HEIGHT = '[phone]';
-function useTicks(scale, direction, ref, options) {
+export function useTicks(scale, direction, ref, options) {
     const range = scale.range();
@@ -17,3 +14,3 @@ if (!range)
     // Calculates the tick number that fits in the given space
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (ref.current) {
@@ -29,3 +26,3 @@ let tickNumber;
                     // get the current tick space
-                    const { width } = (0, utils_1.textDimensions)(formatedTicks.join(''), ref);
+                    const { width } = textDimensions(formatedTicks.join(''), ref);
                     const size = width + (ticks.length - 1) * minSpace;
@@ -42,3 +39,3 @@ // repeats if the size is bigger than current space
             else {
-                const { height } = (0, utils_1.textDimensions)(TEST_HEIGHT, ref);
+                const { height } = textDimensions(TEST_HEIGHT, ref);
                 while (true) {
@@ -67,2 +64,2 @@ // get next ticks
 }
-exports.useTicks = useTicks;
+//# sourceMappingURL=useTick.js.map

lib/hooks/useTimeTicks.js

@@ -1,10 +0,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimeTicks = void 0;
-const react_1 = require("react");
-const useTick_1 = require("./useTick");
-function useTimeTicks(scale, direction, ref, options) {
+import { useState } from 'react';
+import { useTicks } from './useTick.js';
+export function useTimeTicks(scale, direction, ref, options) {
     const { tickFormat = scale.tickFormat() } = options;
-    const [ticks, setTicks] = (0, react_1.useState)([]);
-    (0, useTick_1.useTicks)(scale, direction, ref, {
+    const [ticks, setTicks] = useState([]);
+    useTicks(scale, direction, ref, {
         ...options,
@@ -16,2 +13,2 @@ setTicks,
 }
-exports.useTimeTicks = useTimeTicks;
+//# sourceMappingURL=useTimeTicks.js.map

lib/index.js

@@ -1,22 +0,7 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components/AlignGroup"), exports);
-__exportStar(require("./components/ResponsiveChart"), exports);
-__exportStar(require("./hooks/useBBoxObserver"), exports);
-__exportStar(require("./hooks/useLinearPrimaryTicks"), exports);
-__exportStar(require("./hooks/useLogTicks"), exports);
-__exportStar(require("./hooks/useTimeTicks"), exports);
+export * from './components/AlignGroup.js';
+export * from './components/ResponsiveChart.js';
+export * from './hooks/useBBoxObserver.js';
+export * from './hooks/useLinearPrimaryTicks.js';
+export * from './hooks/useLogTicks.js';
+export * from './hooks/useTimeTicks.js';
+//# sourceMappingURL=index.js.map

lib/utils.js

@@ -1,6 +0,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.textDimensions = void 0;
-function textDimensions(word, ref) {
-    var _a, _b;
+export function textDimensions(word, ref) {
     const textContent = document.createTextNode(word);
@@ -10,7 +6,7 @@ const textElement = document.createElementNS('http://www.w3.org/2000/svg', 'text');
     textElement.appendChild(textContent);
-    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.appendChild(textElement);
+    ref.current?.appendChild(textElement);
     const box = textElement.getBBox();
-    (_b = ref.current) === null || _b === void 0 ? void 0 : _b.removeChild(textElement);
+    ref.current?.removeChild(textElement);
     return box;
 }
-exports.textDimensions = textDimensions;
+//# sourceMappingURL=utils.js.map

package.json

 {
   "name": "react-d3-utils",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Low-level utilities to build charts with React and D3",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
-  "types": "lib-esm/index.d.ts",
+  "type": "module",
+  "exports": "./lib/index.js",
   "files": [
     "lib",
-    "lib-esm"
+    "src"
   ],
   "scripts": {
     "build": "npm run clean && npm run build-ts",
-    "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
-    "build-storybook": "build-storybook",
+    "build-ts": "tsc -p tsconfig.build.json",
+    "build-storybook": "storybook build",
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib lib-esm",
-    "dev": "start-storybook -p 6006",
+    "clean": "rimraf lib",
+    "dev": "storybook dev -p 6006",
     "eslint": "eslint src stories",
     "eslint-fix": "npm run eslint -- --fix",
-    "prepublishOnly": "npm run build",
+    "prepack": "npm run build",
+    "prettier": "prettier --check .",
+    "prettier-write": "prettier --write .",
     "start": "npm run dev",
-    "test": "npm run eslint && npm run check-types",
-    "storybook": "start-storybook -p 6006"
+    "test": "npm run eslint && npm run prettier && npm run check-types"
   },
@@ -37,26 +37,24 @@ "repository": {
   "devDependencies": {
-    "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-storysource": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@types/react": "^17.0.38",
-    "@zakodium/eslint-config": "^6.0.0",
-    "eslint": "^8.27.0",
-    "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "typescript": "^4.8.4",
-    "webpack": "^5.74.0"
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-storysource": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@types/react": "^18.3.11",
+    "eslint": "^9.12.0",
+    "eslint-config-zakodium": "^13.0.0",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
   },
   "dependencies": {
-    "@types/d3-scale": "^4.0.2",
+    "@types/d3-scale": "^4.0.8",
     "d3-scale": "^4.0.2",
-    "use-resize-observer": "^9.0.2"
+    "use-resize-observer": "^9.1.0"
   },
   "volta": {
-    "node": "16.18.1"
+    "node": "22.9.0"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45694

increased by3.08%

Dev dependency count

13

decreased by-13.33%

Number of package files

48

increased by20%

Lines of code

734

increased by16.14%

Is type module

Yes

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@types/d3-scale@^4.0.8

• Updateduse-resize-observer@^9.1.0