aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
966 lines (963 loc) • 33.7 kB
JavaScript
'use client';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { forwardRef, memo, useMemo, useState, useRef, useEffect, useCallback, useImperativeHandle } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { createGlassStyle } from '../../core/mixins/glassMixins.js';
import { usePredictiveEngine, useInteractionRecorder } from '../advanced/GlassPredictiveEngine.js';
import { useAchievements } from '../advanced/GlassAchievementSystem.js';
import { useBiometricAdaptation } from '../advanced/GlassBiometricAdaptation.js';
import { useEyeTracking } from '../advanced/GlassEyeTracking.js';
import { useSpatialAudio } from '../advanced/GlassSpatialAudio.js';
import { GlassAreaChart } from './GlassAreaChart.js';
import { GlassBarChart } from './GlassBarChart.js';
import { GlassLineChart } from './GlassLineChart.js';
import { GlassPieChart } from './GlassPieChart.js';
import chartStyles from './GlassChart.module.css.js';
/**
* Styled container with glass effects
*/
const getElevationShadow = level => {
switch (level) {
case 0:
return 'none';
case 1:
return '0 10px 24px rgba(15, 23, 42, 0.16)';
case 2:
return '0 18px 48px rgba(15, 23, 42, 0.24)';
case 3:
return '0 24px 64px rgba(15, 23, 42, 0.28)';
case 4:
return '0 32px 80px rgba(15, 23, 42, 0.32)';
default:
return '0 18px 48px rgba(15, 23, 42, 0.24)';
}
};
const ChartContainer = /*#__PURE__*/forwardRef(({
zElevation,
height,
width,
focused,
className,
style,
children,
...rest
}, ref) => {
const resolvedWidth = typeof width === 'number' ? `${width}px` : width || '100%';
const resolvedHeight = typeof height === 'number' ? `${height}px` : height || '400px';
return jsx("div", {
ref: ref,
className: cn(chartStyles.container, focused && chartStyles.containerFocused, className),
style: {
width: resolvedWidth,
height: resolvedHeight,
boxShadow: getElevationShadow(zElevation),
...style
},
...rest,
children: children
});
});
ChartContainer.displayName = 'ChartContainer';
const ChartHeader = ({
className,
...props
}) => jsx("div", {
className: cn(chartStyles.header, className),
...props
});
const ChartTitle = ({
className,
...props
}) => jsx("h3", {
className: cn(chartStyles.title, className),
...props
});
const ChartDescription = ({
className,
...props
}) => jsx("p", {
className: cn(chartStyles.description, className),
...props
});
const ChartControls = ({
className,
...props
}) => jsx("div", {
className: cn(chartStyles.controls, className),
...props
});
const TabsContainer = ({
className,
...props
}) => jsx("div", {
className: cn(chartStyles.tabs, className),
...props
});
const ToolbarContainer = ({
className,
...props
}) => jsx("div", {
className: cn(chartStyles.toolbar, className),
...props
});
const ChartTypeButton = ({
active,
className,
...props
}) => jsx("button", {
className: cn(chartStyles.typeButton, active && chartStyles.typeButtonActive, className),
...props
});
const ChartContent = ({
focused,
className,
...props
}) => jsx("div", {
className: cn(chartStyles.content, focused && chartStyles.contentFocused, className),
...props
});
const FooterContent = ({
className,
...props
}) => jsx("div", {
className: cn(chartStyles.footer, className),
...props
});
/**
* Chart SVG icons for type switching
*/
const ChartTypeIcons = {
bar: jsx("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: jsx("path", {
d: "M8 18V7M12 18V11M16 18V15",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
})
}),
line: jsx("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: jsx("path", {
d: "M4 14L8 10L12 14L20 6M20 6V12M20 6H14",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
})
}),
area: jsxs("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [jsx("path", {
d: "M4 14L8 10L12 14L20 6M20 6V12M20 6H14",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M4 14V20H20V6L12 14L8 10L4 14Z",
fill: "currentColor",
fillOpacity: "0.2"
})]
}),
pie: jsxs("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [jsx("path", {
d: "M12 12V2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2Z",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M12 12L19 12",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M12 12L8 8",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
})]
})
};
// Memoized theme helper function with cached default theme
({
isDarkMode: false,
colorMode: 'light',
themeVariant: 'nebula',
colors: {
nebula: {
accentPrimary: '#6366F1',
accentSecondary: '#8B5CF6',
accentTertiary: '#EC4899',
stateCritical: 'var(--glass-color-danger)',
stateOptimal: 'var(--glass-color-success)',
stateAttention: 'var(--glass-color-warning)',
stateInformational: 'var(--glass-color-primary)',
neutralBackground: 'var(--glass-gray-50)',
neutralForeground: 'var(--glass-gray-800)',
neutralBorder: 'var(--glass-gray-200)',
neutralSurface: 'var(--glass-white)'
},
glass: {
light: createGlassStyle({
intent: "neutral",
elevation: "level2"
}),
dark: createGlassStyle({
intent: "neutral",
elevation: "level2"
}),
tints: {
primary: 'rgba(99, 102, 241, 0.1)',
secondary: 'rgba(139, 92, 246, 0.1)'
}
}
},
zIndex: {
hide: -1,
auto: 'auto',
base: 0,
docked: 10,
dropdown: 1000,
sticky: 1100,
banner: 1200,
overlay: 1300,
modal: 1400,
popover: 1500,
skipLink: 1600,
toast: 1700,
tooltip: 1800,
glacial: 9999
}
});
/**
* Memoized helper function to transform Chart.js data format to chart data
*/
const transformChartJsData = /*#__PURE__*/memo(chartJsData => {
if (!chartJsData || !Array.isArray(chartJsData.datasets) || !Array.isArray(chartJsData.labels)) {
// Return empty or handle error if format is unexpected
return [];
}
return chartJsData.datasets.map((dataset, index) => ({
id: dataset.id || `dataset-${index}`,
name: dataset.label || `Dataset ${index + 1}`,
color: dataset.borderColor || dataset.backgroundColor,
// Use borderColor or backgroundColor as series color
data: dataset.data?.map((value, pointIndex) => ({
// Use value directly if data is just numbers
// Use point object if data is {x, y} or similar (needs adjustment if x is not index)
// Assuming simple numeric data corresponding to labels for now
value: value,
label: chartJsData.labels?.[pointIndex] || `Point ${pointIndex + 1}`
// Optionally include original point data if needed: ...point
}))
// Add other potential ChartSeries properties if needed
// visible: dataset.hidden !== undefined ? !dataset.hidden : true,
}));
});
/**
* Memoized GlassChart Component for better performance
*/
const GlassChartComponent = /*#__PURE__*/forwardRef(({
type = 'bar',
data,
width = '100%',
height = 400,
glass = true,
title,
description,
forcedSimplified = false,
zElevation = 2,
magneticEffect = false,
magneticStrength = 0.3,
depthAnimation = false,
adaptToCapabilities = true,
tabs,
activeTab,
onTabChange,
chartProps = {},
toolbarItems,
allowTypeSwitch = false,
availableTypes = ['bar', 'line', 'area', 'pie'],
focusMode = false,
allowDownload = false,
onDownload,
onError,
style,
className,
theme: providedTheme,
// Consciousness features
predictive = false,
preloadData = false,
eyeTracking = false,
gazeResponsive = false,
adaptive = false,
biometricResponsive = false,
spatialAudio = false,
audioFeedback = false,
trackAchievements = false,
achievementId,
usageContext = 'dashboard'
}, ref) => {
// Check for reduced motion preference
useReducedMotion();
const isLowPerformanceDevice = false;
// Determine if simplified rendering should be used
const useSimplified = useMemo(() => {
return forcedSimplified || adaptToCapabilities && isLowPerformanceDevice;
}, [forcedSimplified, adaptToCapabilities, isLowPerformanceDevice]);
// State for active tab
const [currentTab, setCurrentTab] = useState(activeTab || (tabs?.length ? tabs[0].id : ''));
// State for current chart type when switching is allowed
const [currentType, setCurrentType] = useState(type);
// State for focus mode
const [isFocused, setIsFocused] = useState(false);
// Refs for chart container
const containerRef = useRef(null);
// Consciousness features state
const [chartInsights, setChartInsights] = useState([]);
const [dataPatterns, setDataPatterns] = useState([]);
const [isPreloading, setIsPreloading] = useState(false);
const [adaptiveComplexity, setAdaptiveComplexity] = useState('medium');
const [currentDataFocus, setCurrentDataFocus] = useState(null);
// Consciousness feature hooks - only initialize if features are enabled
const predictiveEngine = predictive ? usePredictiveEngine() : null;
const eyeTracker = eyeTracking ? useEyeTracking() : null;
const biometricAdapter = adaptive ? useBiometricAdaptation() : null;
const spatialAudioEngine = spatialAudio ? useSpatialAudio() : null;
const achievementTracker = trackAchievements ? useAchievements() : null;
const interactionRecorder = predictive || trackAchievements ? useInteractionRecorder(`glass-chart-${usageContext}`) : null;
// Chart insights and pattern analysis
useEffect(() => {
if (!predictive || !predictiveEngine || !data) return;
const analyzeChartData = async () => {
try {
// Get patterns and insights from the predictive engine
const patterns = predictiveEngine.engine?.getPatterns() || [];
const insights = predictiveEngine.engine?.getInsights() || [];
setDataPatterns(patterns || []);
setChartInsights(insights || []);
if (achievementTracker && trackAchievements) {
achievementTracker.recordAction('chart_insights_generated', {
chartType: currentType,
insightsCount: insights?.length || 0,
patternsFound: patterns?.length || 0,
context: usageContext
});
}
} catch (error) {
console.warn('Chart insights analysis failed:', error);
}
};
analyzeChartData();
}, [predictive, predictiveEngine, data, currentType, usageContext, achievementTracker, trackAchievements]);
// Biometric adaptation for chart complexity
useEffect(() => {
if (!biometricResponsive || !biometricAdapter) return;
const adaptChartComplexity = () => {
const stressLevel = biometricAdapter.currentStressLevel;
// For now, use a simple cognitive load estimation based on stress level
const cognitiveLoad = stressLevel;
// Assume desktop capabilities for now
const deviceCapabilities = {
isDesktop: true
};
// Adapt chart complexity based on biometric data
if (stressLevel > 0.7 || cognitiveLoad > 0.8) {
setAdaptiveComplexity('low'); // Simplified chart when stressed
} else if (stressLevel < 0.3 && cognitiveLoad < 0.4 && deviceCapabilities.isDesktop) {
setAdaptiveComplexity('high'); // Full complexity when relaxed
} else {
setAdaptiveComplexity('medium'); // Balanced complexity
}
};
// Initial adaptation
adaptChartComplexity();
// Listen for biometric changes
const interval = setInterval(adaptChartComplexity, 3000);
return () => clearInterval(interval);
}, [biometricResponsive, biometricAdapter]);
// Eye tracking for chart element focus
useEffect(() => {
if (!gazeResponsive || !eyeTracker || !containerRef.current) return;
// Note: onGazeEnter/onGazeExit not available on current eye tracker interface
// eyeTracker.onGazeEnter(containerRef.current, handleGazeOnDataPoint);
// eyeTracker.onGazeExit(containerRef.current, handleGazeOffDataPoint);
return () => {
if (containerRef.current) ;
};
}, [gazeResponsive, eyeTracker, spatialAudioEngine, audioFeedback, achievementTracker, trackAchievements, currentType, usageContext]);
// Data preloading for chart interactions
useEffect(() => {
if (!preloadData || !predictiveEngine) return;
const preloadChartData = async () => {
setIsPreloading(true);
try {
// Note: preloadData not available on current predictive engine interface
// await predictiveEngine.preloadData({
// chartType: currentType,
// context: usageContext,
// currentData: data,
// patterns: dataPatterns
// });
} catch (error) {
console.warn('Chart data preloading failed:', error);
} finally {
setIsPreloading(false);
}
};
preloadChartData();
}, [preloadData, predictiveEngine, currentType, usageContext, data, dataPatterns]);
// Use depth animation if enabled
const zAnimationResult = {
style: {},
isAnimating: false,
setDepth: () => {},
resetDepth: () => {},
setCustomPosition: (x, y, z) => {},
reset: () => {}
};
// Store animation functions in a ref to avoid recreation
const animationFunctionsRef = useRef({
animate: () => {
// Set a custom position to create animation effect
zAnimationResult.setCustomPosition(0, 10, 20);
setTimeout(() => zAnimationResult.reset(), 500);
}
});
// Update the ref when zAnimationResult changes
useEffect(() => {
animationFunctionsRef.current.animate = () => {
zAnimationResult.setCustomPosition(0, 10, 20);
setTimeout(() => zAnimationResult.reset(), 500);
};
}, [zAnimationResult]);
const depthStyles = zAnimationResult.style;
// Flag to know if original data was Chart.js format
const isChartJsDataFormat = useMemo(() => data && typeof data === 'object' && !Array.isArray(data) && data?.datasets && data?.labels, [data]);
// Prepare data for non-pie charts
const chartSeriesData = useMemo(() => {
if (isChartJsDataFormat) {
return transformChartJsData(data);
}
// If not Chart.js format, assume it's in the expected format
return data; // Pass data as-is
}, [data, isChartJsDataFormat]);
// Memoized handler functions for better performance
// Handle tab change
const handleTabChange = useCallback(tabId => {
setCurrentTab(tabId);
if (onTabChange) {
onTabChange(tabId);
}
}, [onTabChange]);
// Handle chart type change
const handleTypeChange = useCallback(newType => {
const previousType = currentType;
setCurrentType(newType);
// Consciousness-enhanced type change tracking
if (interactionRecorder) {
// Create a synthetic mouse event for the type change
const syntheticEvent = {
currentTarget: {
id: `chart-type-${newType}`
},
clientX: 0,
clientY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false
};
interactionRecorder.recordClick(syntheticEvent);
}
// Spatial audio feedback for type changes
if (spatialAudioEngine && audioFeedback) {
spatialAudioEngine.playGlassSound('chart_type_change', undefined, {
frequency: newType === 'pie' ? 800 : newType === 'line' ? 600 : 400
});
}
// Achievement tracking for chart exploration
if (achievementTracker && trackAchievements) {
achievementTracker.recordAction('chart_type_switch', {
fromType: previousType,
toType: newType,
context: usageContext,
timestamp: Date.now()
});
}
}, [currentType, interactionRecorder, spatialAudioEngine, audioFeedback, achievementTracker, trackAchievements, usageContext]);
// Handle focus mode toggle
const handleFocusToggle = useCallback(() => {
if (focusMode) {
setIsFocused(prev => {
const newFocused = !prev;
// Enhanced focus toggle with consciousness features
if (depthAnimation && !prev) {
animationFunctionsRef.current?.animate && animationFunctionsRef.current.animate();
}
// Spatial audio for focus state changes
if (spatialAudioEngine && audioFeedback) {
spatialAudioEngine.playGlassSound(newFocused ? 'chart_focus_enter' : 'chart_focus_exit', undefined, {
intensity: newFocused ? 0.8 : 0.4
});
}
// Track focus interactions
if (interactionRecorder) {
// Create a synthetic focus event
const syntheticEvent = {
currentTarget: {
id: 'chart-container'
},
type: newFocused ? 'focus' : 'blur'
};
interactionRecorder.recordFocus(syntheticEvent);
}
// Achievement tracking for focused chart analysis
if (achievementTracker && trackAchievements && newFocused) {
achievementTracker.recordAction('chart_focus_mode_entered', {
chartType: currentType,
context: usageContext,
hasInsights: chartInsights.length > 0
});
}
return newFocused;
});
}
}, [focusMode, depthAnimation, spatialAudioEngine, audioFeedback, interactionRecorder, currentType, usageContext, achievementTracker, trackAchievements, chartInsights.length]);
// Handle download with consciousness tracking
const handleDownload = useCallback(() => {
// Spatial audio feedback for download action
if (spatialAudioEngine && audioFeedback) {
spatialAudioEngine.playGlassSound('chart_download', undefined, {
frequency: 500,
duration: 300
});
}
// Track download interactions
if (interactionRecorder) {
// Create a synthetic mouse event for the download
const syntheticEvent = {
currentTarget: {
id: 'chart-download'
},
clientX: 0,
clientY: 0,
button: 0,
ctrlKey: false,
altKey: false,
shiftKey: false
};
interactionRecorder.recordClick(syntheticEvent);
}
// Achievement tracking for chart exports
if (achievementTracker && trackAchievements) {
achievementTracker.recordAction('chart_exported', {
chartType: currentType,
context: usageContext,
insightsCount: chartInsights.length,
exportMethod: onDownload ? 'custom' : 'default'
});
}
if (onDownload) {
onDownload();
} else {
// Default download implementation - would need canvas conversion
if (process.env.NODE_ENV === 'development') {
console.log('Download chart - custom implementation required');
}
}
}, [onDownload, spatialAudioEngine, audioFeedback, interactionRecorder, currentType, usageContext, chartInsights.length, adaptiveComplexity, achievementTracker, trackAchievements]);
// --- Imperative Handle (Moved After Handlers) ---
useImperativeHandle(ref, () => ({
getContainerElement: () => containerRef.current,
getCurrentChartType: () => currentType,
setChartType: newType => {
if (availableTypes.includes(newType)) {
handleTypeChange(newType);
}
},
setActiveTab: tabId => {
if (tabs?.some(tab => tab.id === tabId)) {
handleTabChange(tabId);
}
},
downloadChart: () => {
if (allowDownload) {
handleDownload();
}
},
toggleFocusMode: () => {
if (focusMode) {
handleFocusToggle();
}
}
}), [containerRef, currentType, availableTypes, handleTypeChange,
// Dependency
tabs, handleTabChange,
// Dependency
allowDownload, handleDownload,
// Dependency
focusMode, handleFocusToggle // Dependency
]);
// Magnetic effect properties
const magneticProps = {
style: {},
onMouseEnter: () => {},
onMouseLeave: () => {},
onMouseMove: () => {},
ref: {
current: null
}
};
// Memoized chart props to prevent unnecessary re-renders
const commonProps = useMemo(() => ({
width: '100%',
height: '100%',
glass,
title: undefined,
description: undefined,
adaptToCapabilities,
simplified: useSimplified,
onError,
...chartProps
}), [glass, adaptToCapabilities, useSimplified, onError, chartProps]);
// Memoized pie data processing
const pieData = useMemo(() => {
if (currentType !== 'pie') return [];
let pieDataResult = [];
if (isChartJsDataFormat) {
const firstDataset = data?.datasets?.[0];
if (firstDataset && Array.isArray(firstDataset.data)) {
pieDataResult = firstDataset.data?.map((value, index) => ({
label: data?.labels?.[index] || `Slice ${index + 1}`,
value: value,
color: Array.isArray(firstDataset.backgroundColor) ? firstDataset.backgroundColor[index % (firstDataset.backgroundColor?.length || 0)] : firstDataset.backgroundColor
}));
}
} else if (Array.isArray(data) && data?.length > 0 && data[0].value !== undefined) {
// Data looks like the expected format
pieDataResult = data;
} else if (Array.isArray(chartSeriesData) && chartSeriesData.length > 0) {
// Extract data from the first series
pieDataResult = chartSeriesData[0].data;
}
return pieDataResult;
}, [currentType, isChartJsDataFormat, data, chartSeriesData]);
// Optimized chart rendering with better memoization
const renderChart = useCallback(() => {
// Handle Pie/Doughnut data preparation separately
if (currentType === 'pie') {
return jsx(GlassPieChart, {
...commonProps,
data: pieData
});
}
// Handle other chart types, passing chartSeriesData
const chartDataForOtherTypes = chartSeriesData;
if (useSimplified) {
// Use default chart type when simplified
return jsxs("div", {
children: ["Simplified chart view - ", currentType]
});
}
switch (currentType) {
case 'bar':
return jsx(GlassBarChart, {
...commonProps,
data: chartDataForOtherTypes
});
case 'line':
return jsx(GlassLineChart, {
...commonProps,
data: chartDataForOtherTypes
});
case 'area':
const {
fillArea,
...otherAreaProps
} = chartProps;
return jsx(GlassAreaChart, {
...commonProps,
data: chartDataForOtherTypes,
...otherAreaProps
});
// Pie case handled above
default:
// Fallback or handle scatter etc.
return jsx(GlassBarChart, {
...commonProps,
data: chartDataForOtherTypes
});
}
// Separate dependencies for chartSeriesData calculation from renderChart
}, [currentType, isChartJsDataFormat, data, chartSeriesData, glass, chartProps, useSimplified, adaptToCapabilities, onError]);
return jsx(ChartContainer, {
ref: element => {
// Assign to internal ref
if (containerRef.current !== element) {
containerRef.current = element;
}
// Assign to magnetic ref if it exists
if (magneticProps && magneticProps.ref) {
magneticProps.ref.current = element;
}
},
zElevation: zElevation,
width: width,
height: height,
focused: isFocused,
style: {
...style,
...(magneticProps ? magneticProps.style : {}),
...(isFocused && depthAnimation ? depthStyles : {})
},
className: cn(className, gazeResponsive && currentDataFocus && 'glass-chart-gaze-focused', isPreloading && 'glass-chart-preloading', adaptiveComplexity === 'low' && 'glass-chart-simplified', adaptiveComplexity === 'high' && 'glass-chart-enhanced'),
onClick: handleFocusToggle,
"data-chart-type": currentType,
"data-usage-context": usageContext,
"data-consciousness-level": `${[predictive, eyeTracking, adaptive, spatialAudio].filter(Boolean).length}`,
"data-adaptive-complexity": adaptiveComplexity,
"data-insights-count": chartInsights.length,
"data-patterns-count": dataPatterns.length,
"aria-label": `Interactive ${currentType} chart${title ? ` titled ${title}` : ''}${chartInsights.length > 0 ? ` with ${chartInsights.length} insights` : ''}`,
role: "img",
children: jsxs("div", {
style: {
padding: '16px',
height: '100%',
display: 'flex',
flexDirection: 'column',
opacity: isPreloading ? 0.7 : 1,
transition: 'opacity 0.3s ease'
},
children: [(title || description || chartInsights.length > 0) && jsxs(ChartHeader, {
children: [title && jsx(ChartTitle, {
children: title
}), description && jsx(ChartDescription, {
children: description
}), predictive && chartInsights.length > 0 && jsxs("div", {
style: {
marginTop: '8px',
padding: '8px 12px',
background: '/* Use createGlassStyle({ intent: "primary", elevation: "level2" }) */',
borderRadius: '6px',
border: '1px solid var(--glass-border-default)',
fontSize: '12px',
color: 'rgba(99, 102, 241, 0.9)'
},
"data-insights-panel": "true",
children: [jsx("strong", {
children: "\uD83D\uDCA1 Insights:"
}), " ", chartInsights.slice(0, 2).map(insight => insight.title || insight.message).join(', '), chartInsights.length > 2 && ` (+${chartInsights.length - 2} more)`]
}), biometricResponsive && adaptiveComplexity !== 'medium' && jsxs("div", {
style: {
marginTop: '4px',
fontSize: '10px',
color: 'rgba(var(--glass-color-white) / var(--glass-opacity-60))',
fontStyle: 'italic'
},
"data-adaptation-indicator": "true",
children: ["\uD83E\uDDE0 Adapted for ", adaptiveComplexity, " cognitive load"]
})]
}), (tabs?.length || allowTypeSwitch || toolbarItems) && jsxs(ChartControls, {
children: [tabs?.length ? jsx(TabsContainer, {
children: jsxs("div", {
children: ["Tabs: ", currentTab]
})
}) : null, jsxs(ToolbarContainer, {
children: [allowTypeSwitch && jsxs(Fragment, {
children: [availableTypes.includes('bar') && jsx(ChartTypeButton, {
active: currentType === 'bar',
onClick: e => handleTypeChange('bar'),
title: "Bar chart",
children: ChartTypeIcons.bar
}), availableTypes.includes('line') && jsx(ChartTypeButton, {
active: currentType === 'line',
onClick: e => handleTypeChange('line'),
title: "Line chart",
children: ChartTypeIcons.line
}), availableTypes.includes('area') && jsx(ChartTypeButton, {
active: currentType === 'area',
onClick: e => handleTypeChange('area'),
title: "Area chart",
children: ChartTypeIcons.area
}), availableTypes.includes('pie') && jsx(ChartTypeButton, {
active: currentType === 'pie',
onClick: e => handleTypeChange('pie'),
title: "Pie chart",
children: ChartTypeIcons.pie
})]
}), allowDownload && jsx(ChartTypeButton, {
active: false,
onClick: handleDownload,
title: "Download chart",
children: jsxs("svg", {
width: "16",
height: "16",
viewBox: "0 0 24 24",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: [jsx("path", {
d: "M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M7 10L12 15L17 10",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}), jsx("path", {
d: "M12 15V3",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
})]
})
}), toolbarItems]
})]
}), jsxs(ChartContent, {
focused: isFocused,
"data-current-focus": currentDataFocus ? `${currentDataFocus.seriesIndex}-${currentDataFocus.pointIndex}` : undefined,
"data-adaptive-complexity": adaptiveComplexity,
style: {
filter: currentDataFocus && gazeResponsive ? 'brightness(1.1) saturate(1.2)' : undefined,
transition: 'filter 0.3s ease',
position: 'relative'
},
children: [renderChart(), currentDataFocus && gazeResponsive && jsx("div", {
style: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: '/* Use createGlassStyle({ intent: "primary", elevation: "level2" }) */',
pointerEvents: 'none',
zIndex: 1,
animation: 'pulse 2s infinite'
},
"data-gaze-overlay": "true"
}), isPreloading && jsx("div", {
style: {
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
background: '/* Use createGlassStyle({ intent: "primary", elevation: "level2" }) */',
color: 'white',
padding: '8px 12px',
borderRadius: '4px',
fontSize: '12px',
zIndex: 10
},
children: "\uD83D\uDD04 Analyzing data patterns..."
})]
}), (isFocused || chartInsights.length > 0) && jsxs(FooterContent, {
children: [isFocused && 'Click to exit focused view', chartInsights.length > 0 && jsxs("div", {
style: {
marginTop: isFocused ? '8px' : '0',
fontSize: '11px',
opacity: 0.8
},
children: ["\uD83D\uDCCA ", chartInsights.length, " insights available", currentDataFocus ? ` | Focus: Series ${currentDataFocus.seriesIndex + 1}, Point ${currentDataFocus.pointIndex + 1}` : '']
})]
})]
})
});
});
// Export memoized component for better performance
const GlassChart = /*#__PURE__*/memo(GlassChartComponent);
// Add displayName
GlassChart.displayName = 'GlassChart';
/**
* Enhanced GlassChart with consciousness features enabled by default
* Use this for charts that should be intelligent and adaptive
*/
const ConsciousGlassChart = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassChart, {
ref: ref,
predictive: true,
preloadData: true,
adaptive: true,
biometricResponsive: true,
trackAchievements: true,
achievementId: "conscious_chart_usage",
...props
}));
ConsciousGlassChart.displayName = 'ConsciousGlassChart';
/**
* Predictive GlassChart optimized for data analysis and insights
*/
const PredictiveGlassChart = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassChart, {
ref: ref,
predictive: true,
preloadData: true,
eyeTracking: true,
gazeResponsive: true,
trackAchievements: true,
achievementId: "predictive_chart_analysis",
usageContext: "analytics",
...props
}));
PredictiveGlassChart.displayName = 'PredictiveGlassChart';
/**
* Adaptive GlassChart that responds to user stress and cognitive load
*/
const AdaptiveGlassChart = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassChart, {
ref: ref,
adaptive: true,
biometricResponsive: true,
spatialAudio: true,
audioFeedback: true,
trackAchievements: true,
achievementId: "adaptive_chart_usage",
...props
}));
AdaptiveGlassChart.displayName = 'AdaptiveGlassChart';
/**
* Immersive GlassChart with full consciousness features for presentations
*/
const ImmersiveGlassChart = /*#__PURE__*/forwardRef((props, ref) => jsx(GlassChart, {
ref: ref,
predictive: true,
preloadData: true,
eyeTracking: true,
gazeResponsive: true,
adaptive: true,
biometricResponsive: true,
spatialAudio: true,
audioFeedback: true,
trackAchievements: true,
achievementId: "immersive_chart_experience",
usageContext: "presentation",
...props
}));
ImmersiveGlassChart.displayName = 'ImmersiveGlassChart';
export { AdaptiveGlassChart, ConsciousGlassChart, GlassChart, ImmersiveGlassChart, PredictiveGlassChart, GlassChart as default };
//# sourceMappingURL=GlassChart.js.map