@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Chart/Chart.tsx

@@ -0,0 +1,218 @@
+import { forwardRef, memo, useCallback, useEffect, useState } from 'react';
+import { useChart } from '../../lib/composables/useChart';
+import { useChartToolbar } from '../../lib/composables/useChartToolbar';
+import { CHART } from '../../lib/constants/components';
+import { ChartProps } from '../../lib/types/components';
+import ChartToolbar from './ChartToolbar';
+
+const Chart = memo(
+  forwardRef<HTMLDivElement, ChartProps>(
+    (
+      {
+        children,
+        type = 'line',
+        size = 'md',
+        variant = 'primary',
+        title,
+        subtitle,
+        loading = false,
+        error,
+        className = '',
+        'aria-label': ariaLabel,
+        onFullscreen,
+        onExport,
+        onRefresh,
+        showToolbar = false,
+        enableFullscreen = false,
+        enableExport = false,
+        enableRefresh = false,
+        exportFormats = ['png', 'svg', 'csv'],
+        datasets,
+        config,
+        ...props
+      },
+      ref
+    ) => {
+      const [isFullscreen, setIsFullscreen] = useState(false);
+      const [isExporting, setIsExporting] = useState(false);
+
+      // Enhanced toolbar with dynamic configuration
+      const {
+        state: toolbarState,
+        handlers: toolbarHandlers,
+        toolbarGroups,
+      } = useChartToolbar(
+        type,
+        {
+          enableDefaults: showToolbar,
+          defaults: {
+            refresh: enableRefresh,
+            export: enableExport,
+            fullscreen: enableFullscreen,
+            zoom: true, // Enable zoom by default
+            pan: true, // Enable pan by default
+            reset: true, // Enable reset by default
+            grid: true, // Enable grid toggle by default
+            legend: true, // Enable legend toggle by default
+            tooltips: true, // Enable tooltips toggle by default
+            animations: true, // Enable animations toggle by default
+            settings: true, // Enable settings by default
+          },
+          exportFormats,
+        },
+        {
+          onRefresh,
+          onExport,
+          onFullscreen: fullscreen => {
+            setIsFullscreen(fullscreen);
+            onFullscreen?.(fullscreen);
+          },
+        }
+      );
+
+      const { generateChartClass, chartAttributes } = useChart({
+        type,
+        size,
+        variant,
+        loading,
+        error,
+      });
+
+      const chartClass = generateChartClass({
+        type,
+        size,
+        variant,
+        loading,
+        error,
+        className,
+      });
+
+      // Legacy handlers for backward compatibility
+      const handleFullscreen = useCallback(() => {
+        toolbarHandlers.onFullscreen(!toolbarState.isFullscreen);
+      }, [toolbarHandlers, toolbarState.isFullscreen]);
+
+      const handleExport = useCallback(
+        async (format: string) => {
+          await toolbarHandlers.onExport(format);
+        },
+        [toolbarHandlers]
+      );
+
+      const handleRefresh = useCallback(() => {
+        toolbarHandlers.onRefresh();
+      }, [toolbarHandlers]);
+
+      // Sync all toolbar state with component state
+      useEffect(() => {
+        setIsFullscreen(toolbarState.isFullscreen);
+        setIsExporting(toolbarState.isExporting);
+      }, [toolbarState.isFullscreen, toolbarState.isExporting]);
+
+      // Render enhanced toolbar
+      const renderToolbar = () => {
+        if (!showToolbar) return null;
+
+        return (
+          <ChartToolbar
+            chartType={type}
+            groups={toolbarGroups}
+            enableDefaults={toolbarGroups.length === 0}
+            exportFormats={exportFormats}
+            state={{
+              isFullscreen: toolbarState.isFullscreen,
+              isExporting: toolbarState.isExporting,
+              isRefreshing: toolbarState.isRefreshing,
+              zoomLevel: toolbarState.zoomLevel,
+              panEnabled: toolbarState.panEnabled,
+              showGrid: toolbarState.showGrid,
+              showLegend: toolbarState.showLegend,
+              showTooltips: toolbarState.showTooltips,
+              animationsEnabled: toolbarState.animationsEnabled,
+            }}
+            onRefresh={toolbarHandlers.onRefresh}
+            onExport={toolbarHandlers.onExport}
+            onFullscreen={toolbarHandlers.onFullscreen}
+            onZoomIn={toolbarHandlers.onZoomIn}
+            onZoomOut={toolbarHandlers.onZoomOut}
+            onZoomReset={toolbarHandlers.onZoomReset}
+            onPanToggle={toolbarHandlers.onPanToggle}
+            onReset={toolbarHandlers.onReset}
+            onSettings={toolbarHandlers.onSettings}
+            onGridToggle={toolbarHandlers.onGridToggle}
+            onLegendToggle={toolbarHandlers.onLegendToggle}
+            onTooltipsToggle={toolbarHandlers.onTooltipsToggle}
+            onAnimationsToggle={toolbarHandlers.onAnimationsToggle}
+          />
+        );
+      };
+
+      const fullChartClass = `${chartClass}${isFullscreen ? ` ${CHART.CLASSES.FULLSCREEN}` : ''}`;
+
+      return (
+        <div
+          ref={ref}
+          className={fullChartClass}
+          aria-label={ariaLabel || `${type} chart`}
+          role="img"
+          tabIndex={0}
+          {...chartAttributes}
+          {...props}
+        >
+          {(title || subtitle || showToolbar) && (
+            <div
+              className={`${CHART.HEADER_CLASS} u-d-flex u-justify-between u-align-items-start u-gap-4`}
+            >
+              <div className={`${CHART.HEADER_CONTENT_CLASS} u-flex-1`}>
+                {title && <h3 className={`${CHART.TITLE_CLASS} u-mb-1`}>{title}</h3>}
+                {subtitle && <p className={`${CHART.SUBTITLE_CLASS} u-mb-0`}>{subtitle}</p>}
+              </div>
+              {renderToolbar()}
+            </div>
+          )}
+
+          <div className={CHART.CONTENT_CLASS}>
+            {loading && (
+              <div className={CHART.LOADING_CLASS}>
+                <div className={CHART.LOADING_SPINNER_CLASS}></div>
+                <span className={CHART.LOADING_TEXT_CLASS}>
+                  {toolbarState.isExporting
+                    ? 'Exporting chart...'
+                    : toolbarState.isRefreshing
+                      ? 'Refreshing chart...'
+                      : 'Loading chart...'}
+                </span>
+              </div>
+            )}
+
+            {error && (
+              <div className={CHART.ERROR_CLASS}>
+                <div className={CHART.ERROR_ICON_CLASS}>⚠</div>
+                <div className={CHART.ERROR_CONTENT_CLASS}>
+                  <div className={CHART.ERROR_MESSAGE_CLASS}>Chart Error</div>
+                  <div className={CHART.ERROR_DETAILS_CLASS}>{error}</div>
+                </div>
+              </div>
+            )}
+
+            {!loading && !error && !children && (
+              <div className={CHART.EMPTY_CLASS}>
+                <div className={CHART.EMPTY_ICON_CLASS}>📊</div>
+                <div className={CHART.EMPTY_MESSAGE_CLASS}>No data available</div>
+                <div className={CHART.EMPTY_DETAILS_CLASS}>
+                  Add data to your chart to see visualizations
+                </div>
+              </div>
+            )}
+
+            {!loading && !error && children && <div className={CHART.CANVAS_CLASS}>{children}</div>}
+          </div>
+        </div>
+      );
+    }
+  )
+);
+
+Chart.displayName = 'Chart';
+export default Chart;
+export type { ChartProps };

package/src/components/Chart/ChartRenderer.tsx

@@ -0,0 +1,322 @@
+import { forwardRef, memo, useCallback, useMemo } from 'react';
+import {
+  useChart,
+  useChartAccessibility,
+  useChartData,
+  useChartPerformance,
+} from '../../lib/composables/useChart';
+import { CHART } from '../../lib/constants/components';
+import { ChartProps } from '../../lib/types/components';
+
+/**
+ * Enhanced chart renderer component with comprehensive functionality
+ */
+const ChartRenderer = memo(
+  forwardRef<
+    SVGSVGElement,
+    {
+      datasets: ChartProps['datasets'];
+      config?: ChartProps['config'];
+      width?: number;
+      height?: number;
+      onDataPointClick?: ChartProps['onDataPointClick'];
+      interactive?: boolean;
+      enableRealTime?: boolean;
+      enableAccessibility?: boolean;
+      enablePerformanceOptimization?: boolean;
+      renderContent: (params: {
+        scales: any;
+        colors: string[];
+        datasets: any[];
+        interactionState: any;
+        handlers: {
+          onDataPointClick?: ChartProps['onDataPointClick'];
+          onPointHover: (
+            datasetIndex: number,
+            pointIndex: number,
+            x: number,
+            y: number,
+            clientX: number,
+            clientY: number
+          ) => void;
+          onPointLeave: () => void;
+          onMouseMove: (event: React.MouseEvent<SVGSVGElement>) => void;
+          onMouseDown: (event: React.MouseEvent<SVGSVGElement>) => void;
+          onMouseUp: () => void;
+          onWheel: (event: React.WheelEvent<SVGSVGElement>) => void;
+        };
+        accessibility: {
+          announcement: string;
+          focusedPoint: { datasetIndex: number; pointIndex: number };
+          getAccessibleDescription: () => string;
+        };
+      }) => React.ReactNode;
+    }
+  >(
+    (
+      {
+        datasets = [],
+        config,
+        width = CHART.DEFAULT_WIDTH,
+        height = CHART.DEFAULT_HEIGHT,
+        onDataPointClick,
+        interactive = true,
+        enableRealTime = false,
+        enableAccessibility = true,
+        enablePerformanceOptimization = true,
+        renderContent,
+      },
+      ref
+    ) => {
+      // Enhanced chart hooks
+      const {
+        calculateScales,
+        getChartColors,
+        interactionState,
+        handlePointHover,
+        handlePointLeave,
+        handlePointClick,
+        handleZoom,
+        handlePan,
+        handleDragStart,
+        handleDragEnd,
+        handleCrosshair,
+        clearCrosshair,
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd,
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        svgRef,
+      } = useChart({ interactive });
+
+      const { processedData, isProcessing } = useChartData(datasets, {
+        enableRealTime,
+        enableDecimation: enablePerformanceOptimization,
+        maxDataPoints: 1000,
+      });
+
+      const { announcement, focusedPoint, getAccessibleDescription, handleKeyDown } =
+        useChartAccessibility(processedData, {
+          enableKeyboardNavigation: enableAccessibility,
+          enableScreenReader: enableAccessibility,
+        });
+
+      const { isOptimizing, debouncedUpdate } = useChartPerformance(processedData, {
+        enableMemoization: enablePerformanceOptimization,
+        debounceMs: 100,
+      });
+
+      // Enhanced interaction handlers with touch/pen support
+      const handleMouseMove = useCallback(
+        (event: React.MouseEvent<SVGSVGElement>) => {
+          if (!interactive || interactionState.touchState.isTouch) return;
+
+          const rect = event.currentTarget.getBoundingClientRect();
+          const x = event.clientX - rect.left;
+          const y = event.clientY - rect.top;
+
+          handleCrosshair(x, y);
+
+          if (interactionState.isDragging && interactionState.dragStart) {
+            const deltaX = x - interactionState.dragStart.x;
+            const deltaY = y - interactionState.dragStart.y;
+            handlePan(deltaX, deltaY);
+          }
+        },
+        [interactive, interactionState, handleCrosshair, handlePan]
+      );
+
+      const handleMouseDown = useCallback(
+        (event: React.MouseEvent<SVGSVGElement>) => {
+          if (!interactive || interactionState.touchState.isTouch) return;
+
+          const rect = event.currentTarget.getBoundingClientRect();
+          const x = event.clientX - rect.left;
+          const y = event.clientY - rect.top;
+
+          handleDragStart(x, y);
+        },
+        [interactive, interactionState.touchState.isTouch, handleDragStart]
+      );
+
+      const handleMouseUp = useCallback(() => {
+        if (!interactive || interactionState.touchState.isTouch) return;
+        handleDragEnd();
+      }, [interactive, interactionState.touchState.isTouch, handleDragEnd]);
+
+      const handleWheel = useCallback(
+        (event: React.WheelEvent<SVGSVGElement>) => {
+          if (!interactive) return;
+
+          event.preventDefault();
+          const rect = event.currentTarget.getBoundingClientRect();
+          const centerX = event.clientX - rect.left;
+          const centerY = event.clientY - rect.top;
+
+          // Detect trackpad vs mouse wheel
+          const isTrackpad = Math.abs(event.deltaY) < 50;
+          const sensitivity = isTrackpad ? 0.01 : 0.1;
+          const adjustedDelta = event.deltaY * sensitivity;
+
+          handleZoom(adjustedDelta, centerX, centerY);
+        },
+        [interactive, handleZoom]
+      );
+
+      const enhancedOnDataPointClick = useCallback(
+        (dataPoint: any, datasetIndex: number, pointIndex: number) => {
+          if (!interactive) return;
+
+          handlePointClick(datasetIndex, pointIndex);
+          onDataPointClick?.(dataPoint, datasetIndex, pointIndex);
+        },
+        [interactive, handlePointClick, onDataPointClick]
+      );
+
+      // Calculate chart data with enhanced features
+      const chartData = useMemo(() => {
+        const scales = calculateScales(processedData, width, height, undefined, config);
+        if (!scales) return null;
+
+        const colors = getChartColors(processedData.length).filter(
+          (color): color is string => color !== undefined
+        );
+
+        return {
+          scales,
+          colors,
+          datasets: processedData.map((dataset, i) => ({
+            ...dataset,
+            color: dataset.color || colors[i],
+          })),
+        };
+      }, [processedData, config, width, height, calculateScales, getChartColors]);
+
+      if (!chartData) {
+        return null;
+      }
+
+      return (
+        <svg
+          ref={ref || svgRef}
+          width="100%"
+          height="100%"
+          viewBox={`0 0 ${chartData.scales.width} ${chartData.scales.height}`}
+          preserveAspectRatio="xMidYMid meet"
+          className={CHART.CHART_SVG_CLASS}
+          onMouseMove={handleMouseMove}
+          onMouseDown={handleMouseDown}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={() => {
+            clearCrosshair();
+            handleMouseUp();
+          }}
+          onWheel={handleWheel}
+          onTouchStart={e => handleTouchStart(e.nativeEvent)}
+          onTouchMove={e => handleTouchMove(e.nativeEvent)}
+          onTouchEnd={e => handleTouchEnd(e.nativeEvent)}
+          onPointerDown={e => handlePointerDown(e.nativeEvent)}
+          onPointerMove={e => handlePointerMove(e.nativeEvent)}
+          onPointerUp={e => handlePointerUp(e.nativeEvent)}
+          tabIndex={enableAccessibility ? 0 : undefined}
+          role={enableAccessibility ? 'img' : undefined}
+          aria-label={enableAccessibility ? getAccessibleDescription() : undefined}
+          onKeyDown={
+            enableAccessibility
+              ? e =>
+                  handleKeyDown(e.nativeEvent, (datasetIndex: number, pointIndex: number) => {
+                    const dataPoint = processedData[datasetIndex]?.data[pointIndex];
+                    enhancedOnDataPointClick(dataPoint, datasetIndex, pointIndex);
+                  })
+              : undefined
+          }
+          style={{
+            touchAction: 'none',
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+          }}
+        >
+          {/* Accessibility announcement */}
+          {enableAccessibility && announcement && (
+            <text x="-9999" y="-9999" className="sr-only" aria-live="polite">
+              {announcement}
+            </text>
+          )}
+
+          {renderContent({
+            ...chartData,
+            interactionState,
+            handlers: {
+              onDataPointClick: enhancedOnDataPointClick,
+              onPointHover: handlePointHover,
+              onPointLeave: handlePointLeave,
+              onMouseMove: handleMouseMove,
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+              onWheel: handleWheel,
+            },
+            accessibility: {
+              announcement,
+              focusedPoint,
+              getAccessibleDescription,
+            },
+          })}
+
+          {/* Crosshair overlay */}
+          {interactive && interactionState.crosshair && (
+            <g className="chart-crosshair" style={{ pointerEvents: 'none' }}>
+              <line
+                x1={interactionState.crosshair.x}
+                y1={0}
+                x2={interactionState.crosshair.x}
+                y2={chartData.scales.height}
+                stroke="var(--atomix-gray-4)"
+                strokeWidth="1"
+                strokeDasharray="4,4"
+                opacity="0.6"
+              />
+              <line
+                x1={0}
+                y1={interactionState.crosshair.y}
+                x2={chartData.scales.width}
+                y2={interactionState.crosshair.y}
+                stroke="var(--atomix-gray-4)"
+                strokeWidth="1"
+                strokeDasharray="4,4"
+                opacity="0.6"
+              />
+            </g>
+          )}
+
+          {/* Zoom indicator */}
+          {interactive && interactionState.zoomLevel !== 1 && (
+            <g className="chart-zoom-indicator">
+              <rect
+                x={chartData.scales.width - 80}
+                y={10}
+                width="70"
+                height="20"
+                fill="rgba(0, 0, 0, 0.8)"
+                rx="4"
+              />
+              <text
+                x={chartData.scales.width - 45}
+                y={24}
+                textAnchor="middle"
+                fill="white"
+                fontSize="12"
+              >
+                {Math.round(interactionState.zoomLevel * 100)}%
+              </text>
+            </g>
+          )}
+        </svg>
+      );
+    }
+  )
+);
+
+ChartRenderer.displayName = 'ChartRenderer';
+export default ChartRenderer;