@kubit-ui-web/react-charts 1.11.0 → 1.11.2

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

@@ -1,110 +1 @@
-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,
-    };
-};
+const e=require(`../utils/rangeAndPositions.js`),t=require(`../zoomArea.type.js`);let n=require(`react`);var r=(e,n,r,i,a)=>{let o={...n};if(e===t.ZoomAreaElements.START_HANDLER)o.start=Math.max(0,Math.min(r,n.end-a.minHandlerDistance));else if(e===t.ZoomAreaElements.END_HANDLER)o.end=Math.min(i-1,Math.max(r,n.start+a.minHandlerDistance));else if(e===t.ZoomAreaElements.SELECTION_AREA){let e=n.end-n.start,t=Math.max(0,Math.min(i-1-e,r-e/2));o.start=t,o.end=t+e}return o};exports.useDragInteraction=t=>{let{currentRange:i,dataLength:a,interactionConfig:o,onRangeChange:s,width:c}=t,l=(0,n.useRef)(null),[u,d]=(0,n.useState)(null),f=(0,n.useCallback)(e=>()=>{d(e)},[]),p=(0,n.useCallback)(e=>()=>{d(e)},[]),m=(0,n.useCallback)(t=>{if(!u||!l.current)return;let n=l.current;n&&s(e.clampRange(r(u,i,e.mouseToDataIndex(t-n.getBoundingClientRect().left,c,a),a,o),a,o.minHandlerDistance))},[u,c,a,i,s,o]),h=(0,n.useCallback)(e=>{m(e.clientX)},[m]),g=(0,n.useCallback)(e=>{e.touches.length!==0&&(e.preventDefault(),m(e.touches[0].clientX))},[m]),_=(0,n.useCallback)(()=>{d(null)},[]),v=(0,n.useCallback)(()=>{d(null)},[]);return(0,n.useEffect)(()=>{if(u)return document.addEventListener(`mousemove`,h),document.addEventListener(`mouseup`,_),document.addEventListener(`touchmove`,g,{passive:!1}),document.addEventListener(`touchend`,v),()=>{document.removeEventListener(`mousemove`,h),document.removeEventListener(`mouseup`,_),document.removeEventListener(`touchmove`,g),document.removeEventListener(`touchend`,v)}},[u,h,_,g,v]),{groupRef:l,handleMouseDown:f,handleTouchStart:p,isDragging:u}};

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

@@ -1,122 +1 @@
-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 };
-};
+const e=require(`../utils/rangeAndPositions.js`),t=require(`../zoomArea.type.js`);let n=require(`react`);var r=(e,n,r,i)=>{let a={...n};if(e===t.ZoomAreaElements.START_HANDLER)a.start=Math.max(0,n.start-r);else if(e===t.ZoomAreaElements.END_HANDLER)a.end=Math.max(n.start+i.minHandlerDistance,n.end-r);else if(e===t.ZoomAreaElements.SELECTION_AREA){let e=n.end-n.start,t=Math.max(0,n.start-r);a.start=t,a.end=t+e}return a},i=(e,n,r,i,a)=>{let o={...n};if(e===t.ZoomAreaElements.START_HANDLER)o.start=Math.min(n.end-a.minHandlerDistance,n.start+r);else if(e===t.ZoomAreaElements.END_HANDLER)o.end=Math.min(i-1,n.end+r);else if(e===t.ZoomAreaElements.SELECTION_AREA){let e=n.end-n.start,t=Math.min(i-1-e,n.start+r);o.start=t,o.end=t+e}return o},a=(e,n,r)=>{let i={...n};if(e===t.ZoomAreaElements.START_HANDLER)i.start=0;else if(e===t.ZoomAreaElements.END_HANDLER)i.end=r-1;else if(e===t.ZoomAreaElements.SELECTION_AREA){let e=n.end-n.start;i.start=0,i.end=e}return i},o=(e,n,r,i)=>{let a={...n};if(e===t.ZoomAreaElements.START_HANDLER)a.start=n.end-i.minHandlerDistance;else if(e===t.ZoomAreaElements.END_HANDLER)a.end=r-1;else if(e===t.ZoomAreaElements.SELECTION_AREA){let e=n.end-n.start;a.start=r-1-e,a.end=r-1}return a};exports.useKeyboardNavigation=t=>{let{currentRange:s,dataLength:c,interactionConfig:l,onRangeChange:u}=t;return{handleKeyDown:(0,n.useCallback)(t=>n=>{let d=n.shiftKey?l.keyboardFastStep:l.keyboardStep,f={...s};switch(n.key){case`ArrowLeft`:case`ArrowDown`:n.preventDefault(),f=r(t,s,d,l);break;case`ArrowRight`:case`ArrowUp`:n.preventDefault(),f=i(t,s,d,c,l);break;case`Home`:n.preventDefault(),f=a(t,s,c);break;case`End`:n.preventDefault(),f=o(t,s,c,l);break;default:return}u(e.clampRange(f,c,l.minHandlerDistance))},[s,c,u,l])}};

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

@@ -1,28 +1 @@
-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,
-    };
-};
+let e=require(`react`);exports.useZoomAreaFocus=()=>{let[t,n]=(0,e.useState)(null),r=(0,e.useCallback)(e=>()=>n(e),[]);return{handleBlur:(0,e.useCallback)(()=>{n(null)},[]),handleFocus:r,isFocused:(0,e.useCallback)(e=>t===e,[t])}};

package/dist/cjs/components/zoomArea/hooks/useZoomData.js

@@ -1,31 +1 @@
-import { useEffect, useState } from 'react';
-import { getRangeIndices } from '../utils/indexRounding';
-import { createDefaultRange } from '../utils/rangeAndPositions';
-export const useZoomData = ({ data, initialRange, onDataChange, }) => {
-    // Initialize range state
-    const defaultRange = initialRange || createDefaultRange(data.length);
-    const [currentRange, setCurrentRange] = useState(defaultRange);
-    // Filter data based on current range and emit changes
-    const filterData = (range) => {
-        if (!onDataChange || data.length === 0) {
-            return;
-        }
-        // Use centralized rounding logic to ensure consistency with accessibility labels
-        const { endIndex, startIndex } = getRangeIndices(range, data.length);
-        const filteredData = data.slice(startIndex, endIndex + 1);
-        onDataChange(filteredData);
-    };
-    // Handle range changes - updates state and filters data
-    const handleRangeChange = (newRange) => {
-        setCurrentRange(newRange);
-        filterData(newRange);
-    };
-    // Emit initial filtered data on mount
-    useEffect(() => {
-        filterData(currentRange);
-    }, []);
-    return {
-        currentRange,
-        handleRangeChange,
-    };
-};
+const e=require(`../utils/rangeAndPositions.js`),t=require(`../utils/indexRounding.js`);let n=require(`react`);exports.useZoomData=({data:r,initialRange:i,onDataChange:a})=>{let[o,s]=(0,n.useState)(i||e.createDefaultRange(r.length)),c=e=>{if(!a||r.length===0)return;let{endIndex:n,startIndex:i}=t.getRangeIndices(e,r.length);a(r.slice(i,n+1))};return(0,n.useEffect)(()=>{c(o)},[]),{currentRange:o,handleRangeChange:e=>{s(e),c(e)}}};

package/dist/cjs/components/zoomArea/utils/accessibilityLabels.js

@@ -1,60 +1 @@
-import { getRangeIndices } from './indexRounding';
-// Template keys for accessibility labels
-const ACCESSIBILITY_START_VALUE_KEY = '{{startValue}}';
-const ACCESSIBILITY_END_VALUE_KEY = '{{endValue}}';
-/**
- * Extracts the X-axis value from data at a specific index.
- *
- * @param data - Array of data points
- * @param xKey - Property name to extract from data points
- * @param index - Integer index (should be pre-rounded using indexRounding utils)
- * @returns String representation of the X-axis value, or fallback to string index
- */
-export const getXAxisValue = (data, xKey, index) => {
-    // Index should already be rounded and clamped by getRangeIndices()
-    return data[index]?.[xKey]?.toString() || `${index}`;
-};
-/**
- * Builds screen reader text by replacing template keys with actual values
- *
- * @param template - Template string with {{startValue}} and/or {{endValue}} placeholders
- * @param startValue - Value to replace {{startValue}} with
- * @param endValue - Value to replace {{endValue}} with
- * @returns String with placeholders replaced, or undefined if template is not provided
- */
-const buildScreenReaderText = (template, startValue, endValue) => {
-    if (!template) {
-        return template;
-    }
-    const startValueRegExp = new RegExp(ACCESSIBILITY_START_VALUE_KEY, 'g');
-    const endValueRegExp = new RegExp(ACCESSIBILITY_END_VALUE_KEY, 'g');
-    return template.replace(startValueRegExp, startValue).replace(endValueRegExp, endValue);
-};
-/**
- * Generates consistent accessibility labels for ZoomArea handlers and selection area.
- *
- * Uses the same floor/ceil logic as data filtering to ensure that screen reader
- * announcements exactly match the boundaries of the filtered data.
- *
- * @param data - Array of data points
- * @param xKey - Property name to extract X-axis values from
- * @param currentRange - Current zoom range with start and end indices
- * @param config - Optional configuration for custom label templates
- * @returns Object with formatted accessibility labels for UI components
- */
-export const generateAccessibilityLabels = (data, xKey, currentRange, config) => {
-    // Use EXACT same indexing logic as useZoomData.filterData() via shared utilities
-    const { endIndex, startIndex } = getRangeIndices(currentRange, data.length);
-    const startValue = getXAxisValue(data, xKey, startIndex);
-    const endValue = getXAxisValue(data, xKey, endIndex);
-    // Use custom templates or fall back to simple defaults (just the values)
-    const startHandler = buildScreenReaderText(config?.startHandler, startValue, endValue) ?? startValue;
-    const endHandler = buildScreenReaderText(config?.endHandler, startValue, endValue) ?? endValue;
-    const selectionArea = buildScreenReaderText(config?.selectionArea, startValue, endValue) ??
-        `${startValue} - ${endValue}`;
-    return {
-        endHandler,
-        selectionArea,
-        startHandler,
-    };
-};
+const e=require(`./indexRounding.js`);var t=`{{startValue}}`,n=`{{endValue}}`;const r=(e,t,n)=>e[n]?.[t]?.toString()||`${n}`;var i=(e,r,i)=>{if(!e)return e;let a=new RegExp(t,`g`),o=new RegExp(n,`g`);return e.replace(a,r).replace(o,i)};exports.generateAccessibilityLabels=(t,n,a,o)=>{let{endIndex:s,startIndex:c}=e.getRangeIndices(a,t.length),l=r(t,n,c),u=r(t,n,s),d=i(o?.startHandler,l,u)??l;return{endHandler:i(o?.endHandler,l,u)??u,selectionArea:i(o?.selectionArea,l,u)??`${l} - ${u}`,startHandler:d}};

package/dist/cjs/components/zoomArea/utils/indexRounding.js

@@ -1,68 +1 @@
-/**
- * Index rounding utilities for consistent data filtering and accessibility labels.
- *
- * These utilities ensure that both data filtering (useZoomData) and accessibility labels
- * (generateAccessibilityLabels) use exactly the same rounding logic, preventing
- * inconsistencies between what users see and what screen readers announce.
- */
-/**
- * Rounds a fractional index to be used as a start index (inclusive lower bound).
- * Uses Math.floor() to include the current data point and everything after it.
- *
- * @param index - Continuous index (can be fractional)
- * @param maxIndex - Maximum valid index (usually data.length - 1)
- * @returns Rounded index clamped to valid bounds
- *
- * @example
- * ```typescript
- * roundStartIndex(1.3, 4); // Math.floor(1.3) = 1, clamped to [0,4] → 1
- * roundStartIndex(-0.5, 4); // Math.floor(-0.5) = -1, clamped to [0,4] → 0
- * ```
- */
-export const roundStartIndex = (index, maxIndex) => {
-    const rounded = Math.floor(index);
-    return Math.max(0, Math.min(maxIndex, rounded));
-};
-/**
- * Rounds a fractional index to be used as an end index (inclusive upper bound).
- * Uses Math.ceil() to include the current data point and everything before it.
- *
- * @param index - Continuous index (can be fractional)
- * @param maxIndex - Maximum valid index (usually data.length - 1)
- * @returns Rounded index clamped to valid bounds
- *
- * @example
- * ```typescript
- * roundEndIndex(2.7, 4); // Math.ceil(2.7) = 3, clamped to [0,4] → 3
- * roundEndIndex(5.2, 4); // Math.ceil(5.2) = 6, clamped to [0,4] → 4
- * ```
- */
-export const roundEndIndex = (index, maxIndex) => {
-    const rounded = Math.ceil(index);
-    return Math.max(0, Math.min(maxIndex, rounded));
-};
-/**
- * Converts a fractional range to integer indices using consistent rounding.
- * This is the core function that both data filtering and accessibility use.
- *
- * @param range - Zoom range with potentially fractional start/end values
- * @param dataLength - Length of the data array
- * @returns Object with rounded startIndex and endIndex
- *
- * @example
- * ```typescript
- * const indices = getRangeIndices({ start: 1.3, end: 3.7 }, 10);
- * // Returns: { startIndex: 1, endIndex: 4 }
- *
- * // This can be used for:
- * // 1. Data filtering: data.slice(startIndex, endIndex + 1)
- * // 2. Accessibility: data[startIndex][xKey] to data[endIndex][xKey]
- * ```
- */
-export const getRangeIndices = (range, dataLength) => {
-    const maxIndex = Math.max(0, dataLength - 1);
-    return {
-        endIndex: roundEndIndex(range.end, maxIndex),
-        startIndex: roundStartIndex(range.start, maxIndex),
-    };
-};
+const e=(e,t)=>Math.max(0,Math.min(t,Math.floor(e))),t=(e,t)=>Math.max(0,Math.min(t,Math.ceil(e)));exports.getRangeIndices=(n,r)=>{let i=Math.max(0,r-1);return{endIndex:t(n.end,i),startIndex:e(n.start,i)}};

package/dist/cjs/components/zoomArea/utils/interactionConfig.js

@@ -1,23 +1 @@
-/**
- * Default configuration for ZoomArea interactions
- */
-const DEFAULT_INTERACTION_CONFIG = {
-    /** Fast keyboard movement step (Shift + arrows) */
-    KEYBOARD_FAST_STEP: 2,
-    /** Default keyboard movement step (arrows without modifiers) */
-    KEYBOARD_STEP: 1,
-    /** Minimum distance between start and end handlers */
-    MIN_HANDLER_DISTANCE: 1,
-};
-/**
- * Utility function to get resolved interaction configuration.
- * Merges user-provided config with sensible defaults.
- *
- * @param config - Optional user configuration
- * @returns Complete interaction configuration with defaults applied
- */
-export const getInteractionConfig = (config) => ({
-    keyboardFastStep: config?.keyboardFastStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_FAST_STEP,
-    keyboardStep: config?.keyboardStep ?? DEFAULT_INTERACTION_CONFIG.KEYBOARD_STEP,
-    minHandlerDistance: config?.minHandlerDistance ?? DEFAULT_INTERACTION_CONFIG.MIN_HANDLER_DISTANCE,
-});
+var e={KEYBOARD_FAST_STEP:2,KEYBOARD_STEP:1,MIN_HANDLER_DISTANCE:1};exports.getInteractionConfig=t=>({keyboardFastStep:t?.keyboardFastStep??e.KEYBOARD_FAST_STEP,keyboardStep:t?.keyboardStep??e.KEYBOARD_STEP,minHandlerDistance:t?.minHandlerDistance??e.MIN_HANDLER_DISTANCE});

package/dist/cjs/components/zoomArea/utils/pathGeneration.js

@@ -1,112 +1 @@
-/**
- * Path generation utilities for ZoomArea SVG rendering
- */
-/**
- * Generates smooth curved path using simplified Bézier curves.
- *
- * This implementation is based on LineChart's curve algorithm but optimized for performance
- * in the ZoomArea context. Uses cubic Bézier curves with control points positioned at 30%
- * of the horizontal distance between consecutive points.
- *
- * @param points - Array of [x, y] coordinates representing the line points
- * @returns SVG path string with curved segments (e.g., "M 0 10 C 3 10, 7 20, 10 20")
- *
- * @example
- * ```typescript
- * const points: Array<[number, number]> = [[0, 10], [10, 20], [20, 15]];
- * const curvedPath = generateCurvedPath(points);
- * // Returns: "M 0 10 C 3 10, 7 20, 10 20 C 13 20, 17 15, 20 15"
- * ```
- */
-export const generateCurvedPath = (points) => {
-    if (points.length === 0) {
-        return '';
-    }
-    if (points.length === 1) {
-        return `M ${points[0][0]} ${points[0][1]}`;
-    }
-    const [firstPoint, ...remainingPoints] = points;
-    let path = `M ${firstPoint[0]} ${firstPoint[1]}`;
-    remainingPoints.forEach((point, i) => {
-        const start = i === 0 ? firstPoint : remainingPoints[i - 1];
-        const [x1, y1] = start;
-        const [x2, y2] = point;
-        // Control points calculation (same as LineChart but simplified factor)
-        const dx = (x2 - x1) * 0.3;
-        const controlPoint1 = [x1 + dx, y1];
-        const controlPoint2 = [x2 - dx, y2];
-        path += ` C ${controlPoint1[0]} ${controlPoint1[1]}, ${controlPoint2[0]} ${controlPoint2[1]}, ${x2} ${y2}`;
-    });
-    return path;
-};
-/**
- * Calculates path data for all lines with unified Y-scale, supporting both curved and straight lines.
- *
- * This function processes multiple line configurations and generates SVG path strings for each line.
- * All lines share the same Y-scale to maintain visual consistency when comparing different datasets.
- *
- * **Y-scaling behavior:** Uses padding to prevent lines from touching chart bounds, similar to LineChart.
- * The effective chart area is reduced by 10% (5% top + 5% bottom) to provide visual breathing room.
- *
- * @param data - Array of data points containing values for all lines
- * @param lines - Configuration for each line including styling and curve settings
- * @param width - Canvas width for scaling X coordinates
- * @param height - Canvas height for scaling Y coordinates
- * @returns Array of objects containing line and fill paths with their configurations
- *
- * @example
- * ```typescript
- * const result = calculateLinesPathData(
- *   [{ month: 'Jan', sales: 100, profit: 20 }, { month: 'Feb', sales: 150, profit: 30 }],
- *   [
- *     { yKey: 'sales', stroke: '#blue', curved: true },
- *     { yKey: 'profit', stroke: '#red', curved: false }
- *   ],
- *   400, // width
- *   100  // height
- * );
- * // Returns: [{ linePath: "M 0 80 C...", fillPath: "", config: {...} }, ...]
- * ```
- */
-export const calculateLinesPathData = (data, lines, width, height) => {
-    if (data.length === 0 || lines.length === 0) {
-        return [];
-    }
-    // Add padding to prevent lines from touching chart bounds (similar to LineChart behavior)
-    const yPaddingPercent = 0.05; // 5% padding top and bottom
-    const yPadding = height * yPaddingPercent;
-    const effectiveHeight = height - 2 * yPadding;
-    // Get min/max values for scaling across all lines for consistent Y scale
-    const allYValues = lines.flatMap(line => data.map(d => Number(d[line.yKey])));
-    const minY = Math.min(...allYValues);
-    const maxY = Math.max(...allYValues);
-    const yRange = maxY - minY || 1;
-    return lines.map(lineConfig => {
-        // Create path points for this specific line
-        const pathPoints = data.map((d, index) => {
-            const x = (index / Math.max(1, data.length - 1)) * width;
-            // Apply padding and scale within the effective height
-            const y = yPadding +
-                effectiveHeight -
-                ((Number(d[lineConfig.yKey]) - minY) / yRange) * effectiveHeight;
-            return [x, y];
-        });
-        // Generate line path - curved or straight based on config
-        const linePath = lineConfig.curved
-            ? generateCurvedPath(pathPoints)
-            : `M ${pathPoints.map(([x, y]) => `${x},${y}`).join(' L ')}`;
-        // Generate fill path if needed
-        let fillPath = '';
-        if (lineConfig.fill) {
-            // For fill, extend to the bottom of the chart (full height)
-            fillPath = lineConfig.curved
-                ? `${generateCurvedPath(pathPoints)} L ${width} ${height} L 0 ${height} Z`
-                : `${linePath} L ${width},${height} L 0,${height} Z`;
-        }
-        return {
-            config: lineConfig,
-            fillPath,
-            linePath,
-        };
-    });
-};
+const e=e=>{if(e.length===0)return``;if(e.length===1)return`M ${e[0][0]} ${e[0][1]}`;let[t,...n]=e,r=`M ${t[0]} ${t[1]}`;return n.forEach((e,i)=>{let[a,o]=i===0?t:n[i-1],[s,c]=e,l=(s-a)*.3,u=[a+l,o],d=[s-l,c];r+=` C ${u[0]} ${u[1]}, ${d[0]} ${d[1]}, ${s} ${c}`}),r};exports.calculateLinesPathData=(t,n,r,i)=>{if(t.length===0||n.length===0)return[];let a=i*.05,o=i-2*a,s=n.flatMap(e=>t.map(t=>Number(t[e.yKey]))),c=Math.min(...s),l=Math.max(...s)-c||1;return n.map(n=>{let s=t.map((e,i)=>[i/Math.max(1,t.length-1)*r,a+o-(Number(e[n.yKey])-c)/l*o]),u=n.curved?e(s):`M ${s.map(([e,t])=>`${e},${t}`).join(` L `)}`,d=``;return n.fill&&(d=n.curved?`${e(s)} L ${r} ${i} L 0 ${i} Z`:`${u} L ${r},${i} L 0,${i} Z`),{config:n,fillPath:d,linePath:u}})},exports.generateCurvedPath=e;

package/dist/cjs/components/zoomArea/utils/rangeAndPositions.js

@@ -1,75 +1 @@
-/**
- * Range operations and position calculation utilities for ZoomArea
- */
-/**
- * Calculates handler positions based on current range
- *
- * @param currentRange - The current zoom range
- * @param dataLength - Total length of the dataset
- * @param width - Canvas width for scaling
- * @returns Object with startX and endX positions
- */
-export const calculateHandlerPositions = (currentRange, dataLength, width) => {
-    const startX = (currentRange.start / Math.max(1, dataLength - 1)) * width;
-    const endX = (currentRange.end / Math.max(1, dataLength - 1)) * width;
-    return { endX, startX };
-};
-/**
- * Converts mouse position to continuous data index
- *
- * @param mouseX - Mouse X coordinate relative to the chart
- * @param width - Canvas width
- * @param dataLength - Total length of the dataset
- * @returns Data index
- */
-export const mouseToDataIndex = (mouseX, width, dataLength) => {
-    const relativeX = Math.max(0, Math.min(width, mouseX));
-    const normalizedPosition = relativeX / width;
-    return Math.round(normalizedPosition * (dataLength - 1));
-};
-/**
- * Clamps a range to valid bounds
- *
- * @param range - The range to clamp
- * @param dataLength - Total length of the dataset
- * @param minDistance - Minimum distance between start and end (default: 0.1)
- * @returns Clamped range within valid bounds
- */
-export const clampRange = (range, dataLength, minDistance = 0.1) => {
-    const clampedStart = Math.max(0, Math.min(range.start, dataLength - 1 - minDistance));
-    const clampedEnd = Math.min(dataLength - 1, Math.max(range.end, clampedStart + minDistance));
-    return {
-        end: clampedEnd,
-        start: clampedStart,
-    };
-};
-/**
- * Creates a default range for the given data length
- *
- * @param dataLength - Total length of the dataset
- * @returns Default range covering the full dataset
- */
-export const createDefaultRange = (dataLength) => ({
-    end: Math.max(0, dataLength - 1),
-    start: 0,
-});
-/**
- * Determines if the current range covers the full dataset.
- * According to design specs: overlay is "only visible when a range is defined".
- * A range is considered "defined" when it doesn't cover the complete dataset.
- *
- * @param range - The current zoom range
- * @param dataLength - Total length of the dataset
- * @returns true if the range covers the full dataset (no selection defined)
- *
- * @example
- * ```typescript
- * // Dataset with 10 elements [0-9]
- * isFullRange({ start: 0, end: 9 }, 10); // true - covers full dataset
- * isFullRange({ start: 1, end: 8 }, 10); // false - partial selection
- * isFullRange({ start: 0, end: 7 }, 10); // false - partial selection
- * ```
- */
-export const isFullRange = (range, dataLength) => {
-    return range.start === 0 && range.end === dataLength - 1;
-};
+exports.calculateHandlerPositions=(e,t,n)=>{let r=e.start/Math.max(1,t-1)*n;return{endX:e.end/Math.max(1,t-1)*n,startX:r}},exports.clampRange=(e,t,n=.1)=>{let r=Math.max(0,Math.min(e.start,t-1-n));return{end:Math.min(t-1,Math.max(e.end,r+n)),start:r}},exports.createDefaultRange=e=>({end:Math.max(0,e-1),start:0}),exports.isFullRange=(e,t)=>e.start===0&&e.end===t-1,exports.mouseToDataIndex=(e,t,n)=>{let r=Math.max(0,Math.min(t,e))/t;return Math.round(r*(n-1))};