aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
229 lines • 6.61 kB
TypeScript
/**
* GlassChart Component
*
* A unified chart container with glass styling, physics-based interactions,
* and Z-Space layering. Acts as a wrapper for all chart types.
*/
import React from 'react';
export interface ConsciousnessFeatures {
/**
* Enable predictive chart insights and data analysis
*/
predictive?: boolean;
/**
* Enable predictive data preloading for chart interactions
*/
preloadData?: boolean;
/**
* Enable eye tracking for chart element focus
*/
eyeTracking?: boolean;
/**
* Enable gaze-responsive chart highlighting
*/
gazeResponsive?: boolean;
/**
* Enable biometric adaptation for chart complexity
*/
adaptive?: boolean;
/**
* Enable biometric responsive chart scaling and timing
*/
biometricResponsive?: boolean;
/**
* Enable spatial audio for chart interactions
*/
spatialAudio?: boolean;
/**
* Enable audio feedback for chart data points
*/
audioFeedback?: boolean;
/**
* Enable achievement tracking for chart interactions
*/
trackAchievements?: boolean;
/**
* Achievement identifier for chart usage
*/
achievementId?: string;
/**
* Chart usage context for consciousness features
*/
usageContext?: 'dashboard' | 'analytics' | 'report' | 'presentation' | 'exploration';
}
interface BaseChartProps {
width?: string | number;
height?: number;
glass?: boolean;
title?: string;
description?: string;
adaptToCapabilities?: boolean;
onError?: (error: Error) => void;
style?: React.CSSProperties;
className?: string;
}
/**
* GlassChart props interface
*/
export interface GlassChartProps extends BaseChartProps, ConsciousnessFeatures {
/**
* The type of chart to render
*/
type: 'bar' | 'line' | 'area' | 'pie' | 'scatter';
/**
* Data for the chart
*/
data?: any;
/**
* Force simplified mode (no advanced features)
*/
forcedSimplified?: boolean;
/**
* Z-space elevation level
*/
zElevation?: number;
/**
* Enable magnetic mouse effect
*/
magneticEffect?: boolean;
/**
* Strength of magnetic effect
*/
magneticStrength?: number;
/**
* Enable depth animation
*/
depthAnimation?: boolean;
/**
* Tab configuration
*/
tabs?: any;
/**
* Active tab ID
*/
activeTab?: string;
/**
* Tab change handler
*/
onTabChange?: (tabId: string) => void;
/**
* Additional chart props
*/
chartProps?: any;
/**
* Custom toolbar items
*/
toolbarItems?: any;
/**
* Accessible label for the chart container
*/
"aria-label"?: string;
/**
* Allow switching chart types
*/
allowTypeSwitch?: boolean;
/**
* Available chart types
*/
availableTypes?: string[];
/**
* Focus mode
*/
focusMode?: boolean;
/**
* Allow chart download
*/
allowDownload?: boolean;
/**
* Download handler
*/
onDownload?: () => void;
/**
* Theme override
*/
theme?: any;
}
export interface GlassChartRef {
/** Gets the main chart container DOM element */
getContainerElement: () => HTMLDivElement | null;
/** Gets the currently rendered chart type */
getCurrentChartType: () => GlassChartProps['type'];
/** Programmatically changes the rendered chart type */
setChartType: (type: GlassChartProps['type']) => void;
/** Programmatically sets the active tab (if tabs are used) */
setActiveTab: (tabId: string) => void;
/** Programmatically triggers the download function (if configured) */
downloadChart: () => void;
/** Toggles the focus mode (if enabled) */
toggleFocusMode: () => void;
}
export declare const GlassChart: React.MemoExoticComponent<React.ForwardRefExoticComponent<GlassChartProps & React.RefAttributes<GlassChartRef>>>;
/**
* Enhanced GlassChart with consciousness features enabled by default
* Use this for charts that should be intelligent and adaptive
*/
export declare const ConsciousGlassChart: React.ForwardRefExoticComponent<GlassChartProps & React.RefAttributes<GlassChartRef>>;
/**
* Predictive GlassChart optimized for data analysis and insights
*/
export declare const PredictiveGlassChart: React.ForwardRefExoticComponent<GlassChartProps & React.RefAttributes<GlassChartRef>>;
/**
* Adaptive GlassChart that responds to user stress and cognitive load
*/
export declare const AdaptiveGlassChart: React.ForwardRefExoticComponent<GlassChartProps & React.RefAttributes<GlassChartRef>>;
/**
* Immersive GlassChart with full consciousness features for presentations
*/
export declare const ImmersiveGlassChart: React.ForwardRefExoticComponent<GlassChartProps & React.RefAttributes<GlassChartRef>>;
/**
* Utility function to create consciousness-enhanced chart variants
*/
export declare function withChartConsciousness<T extends GlassChartProps>(defaultProps?: Partial<ConsciousnessFeatures>): (props: T) => import("react/jsx-runtime").JSX.Element;
/**
* Pre-configured consciousness chart presets
*/
export declare const ChartConsciousnessPresets: {
/**
* Minimal consciousness features for performance-sensitive charts
*/
readonly minimal: {
readonly predictive: true;
readonly trackAchievements: true;
};
/**
* Balanced consciousness features for general chart usage
*/
readonly balanced: {
readonly predictive: true;
readonly adaptive: true;
readonly biometricResponsive: true;
readonly trackAchievements: true;
};
/**
* Full consciousness features for immersive chart experiences
*/
readonly immersive: {
readonly predictive: true;
readonly preloadData: true;
readonly eyeTracking: true;
readonly gazeResponsive: true;
readonly adaptive: true;
readonly biometricResponsive: true;
readonly spatialAudio: true;
readonly audioFeedback: true;
readonly trackAchievements: true;
};
/**
* Analytics-focused consciousness features for data exploration
*/
readonly analytics: {
readonly predictive: true;
readonly preloadData: true;
readonly eyeTracking: true;
readonly gazeResponsive: true;
readonly trackAchievements: true;
readonly usageContext: "analytics";
};
};
export default GlassChart;
//# sourceMappingURL=GlassChart.d.ts.map