aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
79 lines • 2.48 kB
TypeScript
import type { Chart as ChartJS } from 'chart.js';
/**
* Physics-based chart interaction options
*/
export interface ChartPhysicsOptions {
/** Enable zoom/pan interactions */
enabled?: boolean;
/** Zoom mode: 'x', 'y', or 'xy' */
mode?: 'x' | 'y' | 'xy';
/** Physics parameters */
physics?: {
tension: number;
friction: number;
mass: number;
};
/** Minimum zoom level */
minZoom?: number;
/** Maximum zoom level */
maxZoom?: number;
/** Mouse wheel sensitivity */
wheelSensitivity?: number;
/** Inertia duration in milliseconds */
inertiaDuration?: number;
/** Respect user's reduced motion preference */
respectReducedMotion?: boolean;
}
/**
* Return type for the useChartPhysicsInteraction hook
*/
export interface ChartPhysicsInteraction {
/** Whether the chart is currently being panned */
isPanning: boolean;
/** Current zoom level (1 = 100%) */
zoomLevel: number;
/** Apply a specific zoom level */
applyZoom: (level: number) => void;
/** Reset zoom to default (1.0) */
resetZoom: () => void;
}
/**
* Hook for physics-based chart interactions (zoom/pan)
*
* Provides smooth, physics-based zoom and pan interactions for Chart.js charts
* with configurable spring physics and constraints.
*
* @param chartRef - Reference to the Chart.js instance
* @param wrapperRef - Reference to the chart wrapper element
* @param options - Configuration options for interactions
*
* @returns Object containing interaction state and control functions
*
* @example
* ```tsx
* function PhysicsChart() {
* const chartRef = useRef<ChartJS>(null);
* const wrapperRef = useRef<HTMLDivElement>(null);
*
* const { isPanning, zoomLevel, applyZoom, resetZoom } = useChartPhysicsInteraction(
* chartRef,
* wrapperRef,
* {
* enabled: true,
* mode: 'xy',
* minZoom: 0.5,
* maxZoom: 5,
* }
* );
*
* return (
* <div ref={wrapperRef}>
* <Chart ref={chartRef} {...chartProps} />
* <button onClick={resetZoom} className="glass-focus glass-touch-target glass-contrast-guard">Reset</button>
* </div>
* );
* }
* ```
*/
export declare function useChartPhysicsInteraction(chartRef: React.RefObject<ChartJS | null>, wrapperRef: React.RefObject<HTMLDivElement | null>, options?: ChartPhysicsOptions): ChartPhysicsInteraction;
//# sourceMappingURL=useChartPhysicsInteraction.d.ts.map