@sqlrooms/utils 0.4.0 → 0.4.1

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useChartDimensions';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useChartDimensions';
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}

package/dist/hooks/useChartDimensions.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Represents the dimensions of a chart
+ * @interface ChartDimensions
+ * @property {number} width - The width of the chart in pixels
+ * @property {number} height - The height of the chart in pixels
+ */
+export interface ChartDimensions {
+    width: number;
+    height: number;
+}
+/**
+ * Props for the useChartDimensions hook
+ * @interface UseChartDimensionsProps
+ * @property {number | 'auto'} width - The explicitly provided width, or 'auto' for container-based width
+ * @property {number | 'auto'} height - The explicitly provided height, or 'auto' for aspect ratio-based height
+ * @property {number} aspectRatio - The desired width-to-height ratio when dimensions are auto-calculated
+ * @property {React.RefObject<HTMLElement>} containerRef - Reference to the container element
+ */
+export interface UseChartDimensionsProps {
+    width: number | 'auto';
+    height: number | 'auto';
+    aspectRatio: number;
+    containerRef: React.RefObject<HTMLElement>;
+}
+/**
+ * A hook that calculates chart dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseChartDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {ChartDimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useChartDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export declare function useChartDimensions({ width, height, aspectRatio, containerRef, }: UseChartDimensionsProps): ChartDimensions;
+//# sourceMappingURL=useChartDimensions.d.ts.map

package/dist/hooks/useChartDimensions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartDimensions.d.ts","sourceRoot":"","sources":["../../src/hooks/useChartDimensions.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CAC5C;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACb,EAAE,uBAAuB,GAAG,eAAe,CAoB3C"}

package/dist/hooks/useChartDimensions.js

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { useResizeObserver } from 'usehooks-ts';
+/**
+ * A hook that calculates chart dimensions based on provided values and container size
+ *
+ * This hook handles various combinations of width/height specifications:
+ * - If both width and height are provided, uses those exact dimensions
+ * - If only width is provided, calculates height using the aspect ratio
+ * - If only height is provided, calculates width using the aspect ratio
+ * - If both are 'auto', uses container width and calculates height using the aspect ratio
+ *
+ * @param {UseChartDimensionsProps} props - The input parameters for dimension calculation
+ * @returns {ChartDimensions} The calculated width and height
+ *
+ * @example
+ * ```tsx
+ * const containerRef = useRef<HTMLDivElement>(null);
+ * const {width, height} = useChartDimensions({
+ *   width: 'auto',
+ *   height: 'auto',
+ *   aspectRatio: 16/9,
+ *   containerRef
+ * });
+ * // Returns dimensions based on container size
+ * ```
+ */
+export function useChartDimensions({ width, height, aspectRatio, containerRef, }) {
+    const { width: containerWidth = 0 } = useResizeObserver({
+        ref: containerRef,
+        box: 'border-box',
+    });
+    return useMemo(() => {
+        if (width !== 'auto' && height !== 'auto') {
+            return { width, height };
+        }
+        if (width !== 'auto') {
+            return { width, height: width / aspectRatio };
+        }
+        if (height !== 'auto') {
+            return { width: height * aspectRatio, height };
+        }
+        const finalWidth = containerWidth;
+        const finalHeight = finalWidth / aspectRatio;
+        return { width: finalWidth, height: finalHeight };
+    }, [containerWidth, aspectRatio, width, height]);
+}
+//# sourceMappingURL=useChartDimensions.js.map

package/dist/hooks/useChartDimensions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChartDimensions.js","sourceRoot":"","sources":["../../src/hooks/useChartDimensions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAC,MAAM,OAAO,CAAC;AAC9B,OAAO,EAAC,iBAAiB,EAAC,MAAM,aAAa,CAAC;AA4B9C;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,kBAAkB,CAAC,EACjC,KAAK,EACL,MAAM,EACN,WAAW,EACX,YAAY,GACY;IACxB,MAAM,EAAC,KAAK,EAAE,cAAc,GAAG,CAAC,EAAC,GAAG,iBAAiB,CAAC;QACpD,GAAG,EAAE,YAAY;QACjB,GAAG,EAAE,YAAY;KAClB,CAAC,CAAC;IAEH,OAAO,OAAO,CAAC,GAAG,EAAE;QAClB,IAAI,KAAK,KAAK,MAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YAC1C,OAAO,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC;QACzB,CAAC;QACD,IAAI,KAAK,KAAK,MAAM,EAAE,CAAC;YACrB,OAAO,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,GAAG,WAAW,EAAC,CAAC;QAC9C,CAAC;QACD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO,EAAC,KAAK,EAAE,MAAM,GAAG,WAAW,EAAE,MAAM,EAAC,CAAC;QAC/C,CAAC;QACD,MAAM,UAAU,GAAG,cAAc,CAAC;QAClC,MAAM,WAAW,GAAG,UAAU,GAAG,WAAW,CAAC;QAC7C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,WAAW,EAAC,CAAC;IAClD,CAAC,EAAE,CAAC,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC;AACnD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqlrooms/utils",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "module": "dist/index.js",
@@ -37,7 +37,9 @@
     "@types/d3-color": "^3.1.3",
     "@types/d3-format": "^3.0.4",
     "@types/d3-time-format": "^4.0.3",
-    "@types/seedrandom": "^3.0.8"
+    "@types/seedrandom": "^3.0.8",
+    "react": "^19.0.0",
+    "usehooks-ts": "^3.1.1"
   },
-  "gitHead": "fbc92d77cf3a70bdbef67bb0d7cf9342ed3e81a1"
+  "gitHead": "4260241d97423fd1839746ebb7980d01eaffde97"
 }