aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/charts/GlassChart.js

@@ -0,0 +1,965 @@
+'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