@kubit-ui-web/react-charts 0.1.0

package/dist/esm/components/zoomArea/components/ZoomHandler.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateFocusOutline } from '../../../utils/calculateFocusOutline/calculateFocusOutline';
+import { HandlerIcon } from './HandlerIcon';
+/**
+ * Default colors for zoom handlers
+ */
+const HANDLER_COLORS = {
+    /** Handler background */
+    FILL: '#ffffff',
+    /** Handler border and icons */
+    STROKE: '#8f8f8f',
+};
+/**
+ * Default dimensions and styling for zoom handlers
+ */
+const HANDLER_DIMENSIONS = {
+    /** Radius of the circular handler */
+    RADIUS: 17,
+    /** Stroke width for handler border */
+    STROKE_WIDTH: 1,
+    /** Width for vertical guide line */
+    VERTICAL_LINE_WIDTH: 2,
+};
+/**
+ * Helper function to merge handler configuration with defaults
+ */
+const getHandlerStyles = (handlerConfig) => ({
+    fill: handlerConfig?.fill || HANDLER_COLORS.FILL,
+    // Icon properties
+    iconColor: handlerConfig?.iconColor || HANDLER_COLORS.STROKE,
+    radius: handlerConfig?.radius || HANDLER_DIMENSIONS.RADIUS,
+    // Circle properties
+    stroke: handlerConfig?.stroke || HANDLER_COLORS.STROKE,
+    strokeWidth: handlerConfig?.strokeWidth || HANDLER_DIMENSIONS.STROKE_WIDTH,
+    // Vertical line properties
+    verticalLineStroke: handlerConfig?.verticalLineStroke || HANDLER_COLORS.STROKE,
+    verticalLineStrokeWidth: handlerConfig?.verticalLineStrokeWidth || HANDLER_DIMENSIONS.VERTICAL_LINE_WIDTH,
+});
+/**
+ * Individual zoom handler with line, circle, and icon
+ */
+export const ZoomHandler = ({ dataTestId, focusConfig, handlerConfig, height, isFocused, max, min, onBlur, onFocus, onKeyDown, onMouseDown, onTouchStart, screenReaderText, x, }) => {
+    const centerY = height / 2;
+    const styles = getHandlerStyles(handlerConfig);
+    // Calculate focus ring dimensions using the new util
+    const focusOutline = calculateFocusOutline({
+        elementHeight: styles.radius * 2,
+        elementPosition: { x, y: centerY },
+        elementStrokeWidth: typeof styles.strokeWidth === 'number'
+            ? styles.strokeWidth
+            : parseFloat(styles.strokeWidth.toString()),
+        elementType: 'circle',
+        elementWidth: styles.radius * 2,
+        gap: focusConfig.gap,
+        innerStrokeWidth: focusConfig.innerStrokeWidth,
+        outlineStrokeWidth: focusConfig.outlineStrokeWidth,
+    });
+    return (_jsxs("g", { "data-testid": `${dataTestId}-group`, children: [_jsx("line", { pointerEvents: "none", stroke: styles.verticalLineStroke, strokeWidth: styles.verticalLineStrokeWidth, x1: x, x2: x, y1: 0, y2: height }), _jsx("circle", { "aria-label": screenReaderText, "aria-valuemax": max, "aria-valuemin": min, "aria-valuetext": screenReaderText, cursor: "ew-resize", cx: x, cy: centerY, "data-testid": dataTestId, fill: styles.fill, r: styles.radius, role: "slider", stroke: styles.stroke, strokeWidth: styles.strokeWidth, style: { outline: 'none' }, tabIndex: 0, onBlur: onBlur, onFocus: onFocus, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onTouchStart: onTouchStart }), _jsx(HandlerIcon, { fill: styles.iconColor, x: x, y: centerY }), isFocused && focusOutline.type === 'circle' && (_jsxs("g", { pointerEvents: "none", children: [_jsx("circle", { cx: focusOutline.outer.cx, cy: focusOutline.outer.cy, fill: "none", r: focusOutline.outer.r, stroke: focusConfig.outlineColor, strokeWidth: focusConfig.outlineStrokeWidth }), _jsx("circle", { cx: focusOutline.inner.cx, cy: focusOutline.inner.cy, fill: "none", r: focusOutline.inner.r, stroke: focusConfig.innerColor, strokeWidth: focusConfig.innerStrokeWidth })] }))] }));
+};

package/dist/esm/components/zoomArea/components/index.d.ts

@@ -0,0 +1,5 @@
+export { HandlerIcon } from './HandlerIcon';
+export { LineRenderer } from './LineRenderer';
+export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { ZoomHandler } from './ZoomHandler';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/zoomArea/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/zoomArea/components/index.js

@@ -0,0 +1,4 @@
+export { HandlerIcon } from './HandlerIcon';
+export { LineRenderer } from './LineRenderer';
+export { SelectionArea, SelectionAreaFocusRing } from './SelectionArea';
+export { ZoomHandler } from './ZoomHandler';

package/dist/esm/components/zoomArea/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export { useDragInteraction } from './useDragInteraction';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useResponsiveCanvas } from './useResponsiveCanvas';
+export { useZoomAreaFocus } from './useZoomAreaFocus';
+export { useZoomData } from './useZoomData';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/components/zoomArea/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/esm/components/zoomArea/hooks/index.js

@@ -0,0 +1,5 @@
+export { useDragInteraction } from './useDragInteraction';
+export { useKeyboardNavigation } from './useKeyboardNavigation';
+export { useResponsiveCanvas } from './useResponsiveCanvas';
+export { useZoomAreaFocus } from './useZoomAreaFocus';
+export { useZoomData } from './useZoomData';

package/dist/esm/components/zoomArea/hooks/useDragInteraction.d.ts

@@ -0,0 +1,42 @@
+import { ZoomAreaElements, type ZoomAreaInteractionConfig, type ZoomRange } from '../zoomArea.type';
+/**
+ * Parameters for the useDragInteraction hook
+ */
+interface UseDragInteractionParams {
+    /** Current zoom range */
+    currentRange: ZoomRange;
+    /** Width of the zoom area */
+    width: number;
+    /** Total length of the data array */
+    dataLength: number;
+    /** Callback when range changes */
+    onRangeChange: (range: ZoomRange) => void;
+    /** Interaction configuration with resolved defaults */
+    interactionConfig: Required<ZoomAreaInteractionConfig>;
+}
+/**
+ * Return value for the useDragInteraction hook
+ */
+interface UseDragInteractionReturn {
+    /** Reference to the SVG group element */
+    groupRef: React.RefObject<SVGSVGElement>;
+    /** Handler for mouse down events on different elements */
+    handleMouseDown: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.MouseEvent) => void;
+    /** Handler for touch start events on different elements */
+    handleTouchStart: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.TouchEvent) => void;
+    /** Currently dragging element, if any */
+    isDragging: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements] | null;
+}
+/**
+ * Custom hook for handling mouse and touch drag interactions in ZoomArea
+ *
+ * Supports both mouse and touch events for cross-platform compatibility.
+ * Simplified implementation that works with overflow:visible SVG containers.
+ * No complex viewBox calculations needed - coordinates are direct and intuitive.
+ *
+ * @param params - Configuration parameters for drag functionality
+ * @returns Object with drag handlers and state
+ */
+export declare const useDragInteraction: (params: UseDragInteractionParams) => UseDragInteractionReturn;
+export {};
+//# sourceMappingURL=useDragInteraction.d.ts.map

package/dist/esm/components/zoomArea/hooks/useDragInteraction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragInteraction.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useDragInteraction.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpG;;GAEG;AACH,UAAU,wBAAwB;IAChC,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,uDAAuD;IACvD,iBAAiB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,UAAU,wBAAwB;IAChC,yCAAyC;IACzC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IACzC,0DAA0D;IAC1D,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,2DAA2D;IAC3D,gBAAgB,EAAE,CAChB,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACvC,yCAAyC;IACzC,UAAU,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,GAAG,IAAI,CAAC;CAC7E;AAsCD;;;;;;;;;GASG;AACH,eAAO,MAAM,kBAAkB,GAAI,QAAQ,wBAAwB,KAAG,wBAsHrE,CAAC"}

package/dist/esm/components/zoomArea/hooks/useDragInteraction.js

@@ -0,0 +1,110 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { clampRange, mouseToDataIndex } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../zoomArea.type';
+/**
+ * Calculate new range based on drag type and pointer position
+ */
+const calculateNewRange = (dragType, currentRange, dataIndex, dataLength, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (dragType === ZoomAreaElements.START_HANDLER) {
+        newRange.start = Math.max(0, Math.min(dataIndex, currentRange.end - interactionConfig.minHandlerDistance));
+    }
+    else if (dragType === ZoomAreaElements.END_HANDLER) {
+        newRange.end = Math.min(dataLength - 1, Math.max(dataIndex, currentRange.start + interactionConfig.minHandlerDistance));
+    }
+    else if (dragType === ZoomAreaElements.SELECTION_AREA) {
+        // Moving entire selection
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.max(0, Math.min(dataLength - 1 - selectionWidth, dataIndex - selectionWidth / 2));
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Custom hook for handling mouse and touch drag interactions in ZoomArea
+ *
+ * Supports both mouse and touch events for cross-platform compatibility.
+ * Simplified implementation that works with overflow:visible SVG containers.
+ * No complex viewBox calculations needed - coordinates are direct and intuitive.
+ *
+ * @param params - Configuration parameters for drag functionality
+ * @returns Object with drag handlers and state
+ */
+export const useDragInteraction = (params) => {
+    const { currentRange, dataLength, interactionConfig, onRangeChange, width } = params;
+    const groupRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(null);
+    const handleMouseDown = useCallback((target) => {
+        return () => {
+            setIsDragging(target);
+        };
+    }, []);
+    const handleTouchStart = useCallback((target) => {
+        return () => {
+            setIsDragging(target);
+        };
+    }, []);
+    // Common logic for handling pointer movement (mouse or touch)
+    const handlePointerMove = useCallback((clientX) => {
+        if (!isDragging || !groupRef.current) {
+            return;
+        }
+        // Get the SVG element's bounding rect for coordinate conversion
+        const svgElement = groupRef.current;
+        if (!svgElement) {
+            return;
+        }
+        // Simple coordinate calculation - no viewBox complexity!
+        const rect = svgElement.getBoundingClientRect();
+        const pointerX = clientX - rect.left;
+        // Convert pointer X to data index (0 to dataLength-1)
+        const dataIndex = mouseToDataIndex(pointerX, width, dataLength);
+        const newRange = calculateNewRange(isDragging, currentRange, dataIndex, dataLength, interactionConfig);
+        const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
+        onRangeChange(clampedRange);
+    }, [isDragging, width, dataLength, currentRange, onRangeChange, interactionConfig]);
+    const handleMouseMove = useCallback((event) => {
+        handlePointerMove(event.clientX);
+    }, [handlePointerMove]);
+    const handleTouchMove = useCallback((event) => {
+        if (event.touches.length === 0) {
+            return;
+        }
+        // Prevent default native scrolling behavior while dragging
+        event.preventDefault();
+        handlePointerMove(event.touches[0].clientX);
+    }, [handlePointerMove]);
+    const handleMouseUp = useCallback(() => {
+        setIsDragging(null);
+    }, []);
+    const handleTouchEnd = useCallback(() => {
+        setIsDragging(null);
+    }, []);
+    // Set up global mouse and touch events when dragging
+    useEffect(() => {
+        if (isDragging) {
+            // Mouse events
+            document.addEventListener('mousemove', handleMouseMove);
+            document.addEventListener('mouseup', handleMouseUp);
+            // Touch events
+            document.addEventListener('touchmove', handleTouchMove, { passive: false });
+            document.addEventListener('touchend', handleTouchEnd);
+            return () => {
+                // Cleanup mouse events
+                document.removeEventListener('mousemove', handleMouseMove);
+                document.removeEventListener('mouseup', handleMouseUp);
+                // Cleanup touch events
+                document.removeEventListener('touchmove', handleTouchMove);
+                document.removeEventListener('touchend', handleTouchEnd);
+            };
+        }
+        return undefined;
+    }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+    return {
+        groupRef,
+        handleMouseDown,
+        handleTouchStart,
+        isDragging,
+    };
+};

package/dist/esm/components/zoomArea/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,30 @@
+import { ZoomAreaElements, type ZoomAreaInteractionConfig, type ZoomRange } from '../zoomArea.type';
+/**
+ * Parameters for the useKeyboardNavigation hook
+ */
+interface UseKeyboardNavigationParams {
+    /** Current zoom range */
+    currentRange: ZoomRange;
+    /** Total length of the data array */
+    dataLength: number;
+    /** Callback when range changes */
+    onRangeChange: (range: ZoomRange) => void;
+    /** Interaction configuration with resolved defaults */
+    interactionConfig: Required<ZoomAreaInteractionConfig>;
+}
+/**
+ * Return value for the useKeyboardNavigation hook
+ */
+interface UseKeyboardNavigationReturn {
+    /** Handler for keyboard events on different elements */
+    handleKeyDown: (target: (typeof ZoomAreaElements)[keyof typeof ZoomAreaElements]) => (event: React.KeyboardEvent) => void;
+}
+/**
+ * Custom hook for handling keyboard navigation in ZoomArea
+ *
+ * @param params - Configuration parameters for keyboard navigation
+ * @returns Object with keyboard event handlers
+ */
+export declare const useKeyboardNavigation: (params: UseKeyboardNavigationParams) => UseKeyboardNavigationReturn;
+export {};
+//# sourceMappingURL=useKeyboardNavigation.d.ts.map

package/dist/esm/components/zoomArea/hooks/useKeyboardNavigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardNavigation.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useKeyboardNavigation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,KAAK,yBAAyB,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEpG;;GAEG;AACH,UAAU,2BAA2B;IACnC,yBAAyB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,qCAAqC;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,kCAAkC;IAClC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC1C,uDAAuD;IACvD,iBAAiB,EAAE,QAAQ,CAAC,yBAAyB,CAAC,CAAC;CACxD;AAED;;GAEG;AACH,UAAU,2BAA2B;IACnC,wDAAwD;IACxD,aAAa,EAAE,CACb,MAAM,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,KAC7D,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC3C;AA4GD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,2BAA2B,KAClC,2BA2CF,CAAC"}

package/dist/esm/components/zoomArea/hooks/useKeyboardNavigation.js

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+import { clampRange } from '../utils/rangeAndPositions';
+import { ZoomAreaElements } from '../zoomArea.type';
+/**
+ * Handle left arrow and down arrow key movement (decrease values)
+ */
+const handleArrowLeft = (target, currentRange, step, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === ZoomAreaElements.START_HANDLER) {
+        newRange.start = Math.max(0, currentRange.start - step);
+    }
+    else if (target === ZoomAreaElements.END_HANDLER) {
+        newRange.end = Math.max(currentRange.start + interactionConfig.minHandlerDistance, currentRange.end - step);
+    }
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
+        // Move entire selection left
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.max(0, currentRange.start - step);
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle right arrow and up arrow key movement (increase values)
+ */
+const handleArrowRight = (target, currentRange, step, dataLength, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === ZoomAreaElements.START_HANDLER) {
+        newRange.start = Math.min(currentRange.end - interactionConfig.minHandlerDistance, currentRange.start + step);
+    }
+    else if (target === ZoomAreaElements.END_HANDLER) {
+        newRange.end = Math.min(dataLength - 1, currentRange.end + step);
+    }
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
+        // Move entire selection right
+        const selectionWidth = currentRange.end - currentRange.start;
+        const newStart = Math.min(dataLength - 1 - selectionWidth, currentRange.start + step);
+        newRange.start = newStart;
+        newRange.end = newStart + selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle Home key - move to beginning
+ */
+const handleHome = (target, currentRange, dataLength) => {
+    const newRange = { ...currentRange };
+    if (target === ZoomAreaElements.START_HANDLER) {
+        newRange.start = 0;
+    }
+    else if (target === ZoomAreaElements.END_HANDLER) {
+        newRange.end = dataLength - 1;
+    }
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
+        const selectionWidth = currentRange.end - currentRange.start;
+        newRange.start = 0;
+        newRange.end = selectionWidth;
+    }
+    return newRange;
+};
+/**
+ * Handle End key - move to end
+ */
+const handleEnd = (target, currentRange, dataLength, interactionConfig) => {
+    const newRange = { ...currentRange };
+    if (target === ZoomAreaElements.START_HANDLER) {
+        newRange.start = currentRange.end - interactionConfig.minHandlerDistance;
+    }
+    else if (target === ZoomAreaElements.END_HANDLER) {
+        newRange.end = dataLength - 1;
+    }
+    else if (target === ZoomAreaElements.SELECTION_AREA) {
+        const selectionWidth = currentRange.end - currentRange.start;
+        newRange.start = dataLength - 1 - selectionWidth;
+        newRange.end = dataLength - 1;
+    }
+    return newRange;
+};
+/**
+ * Custom hook for handling keyboard navigation in ZoomArea
+ *
+ * @param params - Configuration parameters for keyboard navigation
+ * @returns Object with keyboard event handlers
+ */
+export const useKeyboardNavigation = (params) => {
+    const { currentRange, dataLength, interactionConfig, onRangeChange } = params;
+    const handleKeyDown = useCallback((target) => {
+        return (event) => {
+            // Shift key = fast navigation, normal keys = precise control
+            const step = event.shiftKey
+                ? interactionConfig.keyboardFastStep
+                : interactionConfig.keyboardStep;
+            let newRange = { ...currentRange };
+            switch (event.key) {
+                case 'ArrowLeft':
+                case 'ArrowDown':
+                    event.preventDefault();
+                    newRange = handleArrowLeft(target, currentRange, step, interactionConfig);
+                    break;
+                case 'ArrowRight':
+                case 'ArrowUp':
+                    event.preventDefault();
+                    newRange = handleArrowRight(target, currentRange, step, dataLength, interactionConfig);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    newRange = handleHome(target, currentRange, dataLength);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    newRange = handleEnd(target, currentRange, dataLength, interactionConfig);
+                    break;
+                default:
+                    return; // Don't handle other keys
+            }
+            const clampedRange = clampRange(newRange, dataLength, interactionConfig.minHandlerDistance);
+            onRangeChange(clampedRange);
+        };
+    }, [currentRange, dataLength, onRangeChange, interactionConfig]);
+    return { handleKeyDown };
+};

package/dist/esm/components/zoomArea/hooks/useResponsiveCanvas.d.ts

@@ -0,0 +1,62 @@
+import type { CanvasConfig } from '../../../types/canvas.type';
+/**
+ * Universal responsive canvas hook for chart components.
+ *
+ * Manages canvas dimensions, responsive behavior, and viewBox calculation.
+ * Designed to eventually replace the legacy canvasConfig pattern across all chart components.
+ *
+ * Features:
+ * - Responsive dimensions with ResizeObserver
+ * - Automatic viewBox calculation
+ * - Backward compatibility with canvasConfig
+ * - Modern width/height prop API
+ *
+ * @param width - Canvas width (string with units or number in px)
+ * @param height - Canvas height (string with units or number in px)
+ * @param dataTestId - Unique identifier for the SVG element
+ * @param canvasConfig - Legacy canvas configuration (optional, for backward compatibility)
+ * @param extraSpace - Additional space around the canvas (default: 0)
+ * @returns Object containing parsed dimensions and viewBox
+ *
+ * **Return Values:**
+ * - `parsedCanvas`: Final calculated dimensions in pixels
+ * - `viewBox`: SVG viewBox string for responsive scaling
+ *
+ * @example
+ * ```tsx
+ * // Modern API
+ * const { parsedCanvas, viewBox } = useResponsiveCanvas({
+ *   width: "70%",
+ *   height: 400,
+ *   dataTestId: "my-chart",
+ *   extraSpace: 10
+ * });
+ *
+ * // Legacy compatibility
+ * const { parsedCanvas, viewBox } = useResponsiveCanvas({
+ *   width: "100%",
+ *   height: 300,
+ *   dataTestId: "legacy-chart",
+ *   canvasConfig: { width: "100%", height: 300, extraSpace: 5 }
+ * });
+ * ```
+ */
+interface UseResponsiveCanvasParams {
+    width: string | number;
+    height: string | number;
+    dataTestId: string;
+    canvasConfig?: CanvasConfig;
+    extraSpace?: number | string;
+}
+interface UseResponsiveCanvasReturn {
+    /** Parsed canvas dimensions in pixels */
+    parsedCanvas: {
+        width: number;
+        height: number;
+    };
+    /** SVG viewBox string */
+    viewBox: string;
+}
+export declare const useResponsiveCanvas: ({ canvasConfig, dataTestId, extraSpace, height, width, }: UseResponsiveCanvasParams) => UseResponsiveCanvasReturn;
+export {};
+//# sourceMappingURL=useResponsiveCanvas.d.ts.map

package/dist/esm/components/zoomArea/hooks/useResponsiveCanvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResponsiveCanvas.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useResponsiveCanvas.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAIxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,UAAU,yBAAyB;IACjC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC9B;AAED,UAAU,yBAAyB;IACjC,yCAAyC;IACzC,YAAY,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAChD,yBAAyB;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,GAAI,0DAMjC,yBAAyB,KAAG,yBAyF9B,CAAC"}

package/dist/esm/components/zoomArea/hooks/useResponsiveCanvas.js

@@ -0,0 +1,70 @@
+import { useEffect, useMemo, useState } from 'react';
+import { buildViewBox } from '../../../components/svgContainer/utils/buildViewBox/buildViewBox';
+import { getCanvasDimensions } from '../../../utils/getCanvasDimensions/getCanvasDimensions';
+import { parseStringToNumberPx } from '../../../utils/parseStringToNumberPx.ts/parseStringToNumberPx';
+export const useResponsiveCanvas = ({ canvasConfig, dataTestId, extraSpace = 0, height, width, }) => {
+    // State for parsed/calculated dimensions
+    const [parsedCanvas, setParsedCanvas] = useState({
+        height: 0,
+        width: 0,
+    });
+    // Determine effective configuration (legacy vs modern API)
+    const effectiveCanvasConfig = useMemo(() => {
+        if (canvasConfig) {
+            // Legacy mode: use provided canvasConfig
+            return canvasConfig;
+        }
+        // Modern mode: construct from height and width props
+        return {
+            extraSpace,
+            height,
+            width,
+        };
+    }, [canvasConfig, width, height, extraSpace]);
+    // Extract and parse canvas configuration
+    const { extraSpace: canvasExtraSpace, height: canvasHeight, width: canvasWidth, } = effectiveCanvasConfig;
+    const parsedCanvasExtraSpace = canvasExtraSpace
+        ? parseStringToNumberPx(canvasExtraSpace)
+        : undefined;
+    // Set up responsive dimensions with ResizeObserver
+    useEffect(() => {
+        // Find the SVG element for this specific component instance
+        const svgElement = document.querySelector(`[data-testid="${dataTestId}"]`);
+        if (!svgElement) {
+            return;
+        }
+        const calculateDimensions = () => {
+            const { parsedCanvasHeight, parsedCanvasWidth } = getCanvasDimensions({
+                canvasHeight,
+                canvasWidth,
+                svgElement,
+            });
+            setParsedCanvas({
+                height: parsedCanvasHeight,
+                width: parsedCanvasWidth,
+            });
+        };
+        // Calculate initial dimensions
+        calculateDimensions();
+        // Set up ResizeObserver for responsive updates
+        const resizeObserver = new ResizeObserver(() => {
+            calculateDimensions();
+        });
+        // Start observing size changes
+        resizeObserver.observe(svgElement);
+        // Cleanup function
+        // eslint-disable-next-line consistent-return
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [canvasWidth, canvasHeight, dataTestId]);
+    // Calculate viewBox based on parsed dimensions
+    const viewBox = useMemo(() => {
+        const calculatedViewBox = buildViewBox(parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace);
+        return calculatedViewBox;
+    }, [parsedCanvas.width, parsedCanvas.height, parsedCanvasExtraSpace]);
+    return {
+        parsedCanvas,
+        viewBox,
+    };
+};

package/dist/esm/components/zoomArea/hooks/useZoomAreaFocus.d.ts

@@ -0,0 +1,24 @@
+import type { ZoomAreaElements } from '../zoomArea.type';
+/**
+ * Return value for the useZoomAreaFocus hook
+ */
+interface UseZoomAreaFocusReturn {
+    /** Handler for focusing on a specific element */
+    handleFocus: (target: keyof typeof ZoomAreaElements) => () => void;
+    /** Handler for clearing focus */
+    handleBlur: () => void;
+    /** Utility to check if an element is focused */
+    isFocused: (target: keyof typeof ZoomAreaElements) => boolean;
+}
+/**
+ * Custom hook for managing focus state of zoom area elements.
+ *
+ * Provides centralized focus management for all interactive elements
+ * (start handler, end handler, selection area) with proper coordination.
+ *
+ * @param params - Configuration parameters for the hook
+ * @returns Object with focus handlers and utilities
+ */
+export declare const useZoomAreaFocus: () => UseZoomAreaFocusReturn;
+export {};
+//# sourceMappingURL=useZoomAreaFocus.d.ts.map

package/dist/esm/components/zoomArea/hooks/useZoomAreaFocus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomAreaFocus.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useZoomAreaFocus.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD;;GAEG;AACH,UAAU,sBAAsB;IAC9B,iDAAiD;IACjD,WAAW,EAAE,CAAC,MAAM,EAAE,MAAM,OAAO,gBAAgB,KAAK,MAAM,IAAI,CAAC;IACnE,iCAAiC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,gDAAgD;IAChD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,OAAO,gBAAgB,KAAK,OAAO,CAAC;CAC/D;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,QAAO,sBAwBnC,CAAC"}

package/dist/esm/components/zoomArea/hooks/useZoomAreaFocus.js

@@ -0,0 +1,28 @@
+import { useCallback, useState } from 'react';
+/**
+ * Custom hook for managing focus state of zoom area elements.
+ *
+ * Provides centralized focus management for all interactive elements
+ * (start handler, end handler, selection area) with proper coordination.
+ *
+ * @param params - Configuration parameters for the hook
+ * @returns Object with focus handlers and utilities
+ */
+export const useZoomAreaFocus = () => {
+    const [focusedElement, setFocusedElement] = useState(null);
+    const handleFocus = useCallback((target) => {
+        return () => setFocusedElement(target);
+    }, []);
+    const handleBlur = useCallback(() => {
+        setFocusedElement(null);
+    }, []);
+    // Helper function to check focus state
+    const isFocused = useCallback((target) => {
+        return focusedElement === target;
+    }, [focusedElement]);
+    return {
+        handleBlur,
+        handleFocus,
+        isFocused,
+    };
+};

package/dist/esm/components/zoomArea/hooks/useZoomData.d.ts

@@ -0,0 +1,33 @@
+import type { IZoomAreaDataPoint, ZoomRange } from '../zoomArea.type';
+/**
+ * Custom hook for managing zoom data state and filtering logic.
+ *
+ * Handles the core zoom functionality including range state management,
+ * data filtering, and automatic emission of filtered data changes.
+ *
+ * @param data - Array of data points to be filtered
+ * @param initialRange - Optional initial zoom range
+ * @param onDataChange - Callback function to handle filtered data changes
+ * @returns Object containing current range and range change handler
+ *
+ * @example
+ * ```tsx
+ * const { currentRange, handleRangeChange } = useZoomData({
+ *   data: chartData,
+ *   initialRange: { start: 0, end: 10 },
+ *   onDataChange: (filteredData) => setChartData(filteredData)
+ * });
+ * ```
+ */
+interface UseZoomDataParams {
+    data: IZoomAreaDataPoint[];
+    initialRange?: ZoomRange;
+    onDataChange?: (filteredData: IZoomAreaDataPoint[]) => void;
+}
+interface UseZoomDataReturn {
+    currentRange: ZoomRange;
+    handleRangeChange: (newRange: ZoomRange) => void;
+}
+export declare const useZoomData: ({ data, initialRange, onDataChange, }: UseZoomDataParams) => UseZoomDataReturn;
+export {};
+//# sourceMappingURL=useZoomData.d.ts.map

package/dist/esm/components/zoomArea/hooks/useZoomData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useZoomData.d.ts","sourceRoot":"","sources":["../../../../../src/components/zoomArea/hooks/useZoomData.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,UAAU,iBAAiB;IACzB,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;CAC7D;AAED,UAAU,iBAAiB;IACzB,YAAY,EAAE,SAAS,CAAC;IACxB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,WAAW,GAAI,uCAIzB,iBAAiB,KAAG,iBA8BtB,CAAC"}