@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/data-display/chart.tsx

@@ -0,0 +1,653 @@
+import React, { useMemo, useRef } from 'react';
+import { useTheme } from '../../../themes/useTheme';
+import { 
+  ChartProps, 
+  ChartData
+} from './types';
+
+// Simple icon components (inline SVG)
+const BarChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg 
+    className={className} 
+    fill="none" 
+    stroke="currentColor" 
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+  </svg>
+);
+
+const LineChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg 
+    className={className} 
+    fill="none" 
+    stroke="currentColor" 
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 12l3-3 3 3 4-4" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 21l4-4 4-4 4-4" />
+  </svg>
+);
+
+const PieChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
+  <svg 
+    className={className} 
+    fill="none" 
+    stroke="currentColor" 
+    viewBox="0 0 24 24"
+  >
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 2L12 12L22 12A10 10 0 0 0 12 2Z" />
+    <circle cx="12" cy="12" r="10" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} />
+  </svg>
+);
+
+// Default color fallbacks for when theme is not available
+const getDefaultColors = () => ({
+  surface: { 
+    background: '#ffffff', 
+    surface: '#f3f4f6', 
+    border: '#d1d5db', 
+    divider: '#e5e7eb' 
+  },
+  text: { 
+    primary: '#111827', 
+    secondary: '#6b7280', 
+    muted: '#9ca3af', 
+    inverse: '#ffffff', 
+    onPrimary: '#ffffff', 
+    onSecondary: '#ffffff', 
+    onSurface: '#111827' 
+  },
+  interactive: { 
+    hover: '#f3f4f6', 
+    active: '#e5e7eb', 
+    focus: '#3b82f6', 
+    disabled: '#d1d5db' 
+  },
+  primary: { 500: '#3b82f6' },
+  semantic: { 
+    success: '#10b981', 
+    warning: '#f59e0b', 
+    error: '#ef4444', 
+    info: '#3b82f6' 
+  }
+});
+
+// Chart color palette
+const getChartColors = (colors: any) => [
+  colors.primary[500],
+  colors.semantic.success,
+  colors.semantic.warning,
+  colors.semantic.error,
+  colors.semantic.info,
+  '#8b5cf6', // Purple
+  '#f97316', // Orange
+  '#06b6d4', // Cyan
+  '#84cc16', // Lime
+  '#ec4899', // Pink
+];
+
+// Chart Legend Component
+const ChartLegend: React.FC<{
+  datasets: ChartData['datasets'];
+  colors: any;
+  size: 'sm' | 'md' | 'lg';
+}> = ({ datasets, colors, size }) => {
+  const chartColors = getChartColors(colors);
+  
+  const sizeClasses = {
+    sm: 'chart__legend--sm',
+    md: 'chart__legend--md',
+    lg: 'chart__legend--lg'
+  };
+
+  const dotSizes = {
+    sm: 'chart__legend-color--sm',
+    md: 'chart__legend-color--md',
+    lg: 'chart__legend-color--lg'
+  };
+
+  return (
+    <div className={`chart__legend ${sizeClasses[size]}`}>
+      {datasets.map((dataset, index) => (
+        <div key={index} className="chart__legend-item">
+          <div
+            className={`chart__legend-color ${dotSizes[size]}`}
+            style={{
+              backgroundColor: dataset.color || chartColors[index % chartColors.length]
+            }}
+          />
+          <span className="chart__legend-label">
+            {dataset.label}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// Simple Bar Chart Component
+const BarChart: React.FC<{
+  data: ChartData;
+  width: number;
+  height: number;
+  colors: any;
+  showValues?: boolean;
+  animate?: boolean;
+}> = ({ data, width, height, colors, showValues = false, animate = false }) => {
+  const chartColors = getChartColors(colors);
+  const padding = 60;
+  const chartWidth = width - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  // Calculate max value for scaling
+  const maxValue = useMemo(() => {
+    const allValues = data.datasets.flatMap(dataset => 
+      dataset.data.map(point => typeof point === 'number' ? point : point.y)
+    );
+    return Math.max(...allValues, 0);
+  }, [data]);
+
+  const barWidth = chartWidth / (data.labels.length * data.datasets.length);
+  const groupWidth = chartWidth / data.labels.length;
+
+  return (
+    <svg width={width} height={height} style={{ background: colors.surface.background }}>
+      {/* Grid lines */}
+      {[0, 0.25, 0.5, 0.75, 1].map((percent, index) => {
+        const y = padding + chartHeight * (1 - percent);
+        return (
+          <g key={index}>
+            <line
+              x1={padding}
+              y1={y}
+              x2={padding + chartWidth}
+              y2={y}
+              stroke={colors.surface.border}
+              strokeWidth={1}
+              strokeDasharray={percent === 0 ? '0' : '2,2'}
+            />
+            <text
+              x={padding - 10}
+              y={y + 4}
+              textAnchor="end"
+              fill={colors.text.muted}
+              fontSize="12"
+            >
+              {Math.round(maxValue * percent)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* Bars */}
+      {data.datasets.map((dataset, datasetIndex) => (
+        <g key={datasetIndex}>
+          {dataset.data.map((value, pointIndex) => {
+            const numericValue = typeof value === 'number' ? value : value.y;
+            const barHeight = (numericValue / maxValue) * chartHeight;
+            const x = padding + pointIndex * groupWidth + datasetIndex * barWidth;
+            const y = padding + chartHeight - barHeight;
+            const color = dataset.color || chartColors[datasetIndex % chartColors.length];
+
+            return (
+              <g key={pointIndex}>
+                <rect
+                  x={x}
+                  y={animate ? padding + chartHeight : y}
+                  width={barWidth * 0.8}
+                  height={animate ? 0 : barHeight}
+                  fill={color}
+                  rx={2}
+                >
+                  {animate && (
+                    <animate
+                      attributeName="height"
+                      from="0"
+                      to={barHeight}
+                      dur="0.8s"
+                      begin={`${pointIndex * 0.1}s`}
+                      fill="freeze"
+                    />
+                  )}
+                  {animate && (
+                    <animate
+                      attributeName="y"
+                      from={padding + chartHeight}
+                      to={y}
+                      dur="0.8s"
+                      begin={`${pointIndex * 0.1}s`}
+                      fill="freeze"
+                    />
+                  )}
+                </rect>
+                
+                {/* Value labels */}
+                {showValues && (
+                  <text
+                    x={x + (barWidth * 0.8) / 2}
+                    y={y - 5}
+                    textAnchor="middle"
+                    fill={colors.text.secondary}
+                    fontSize="10"
+                  >
+                    {numericValue}
+                  </text>
+                )}
+              </g>
+            );
+          })}
+        </g>
+      ))}
+
+      {/* X-axis labels */}
+      {data.labels.map((label, index) => (
+        <text
+          key={index}
+          x={padding + index * groupWidth + groupWidth / 2}
+          y={height - padding + 20}
+          textAnchor="middle"
+          fill={colors.text.secondary}
+          fontSize="12"
+        >
+          {label}
+        </text>
+      ))}
+    </svg>
+  );
+};
+
+// Simple Line Chart Component
+const LineChart: React.FC<{
+  data: ChartData;
+  width: number;
+  height: number;
+  colors: any;
+  showPoints?: boolean;
+  animate?: boolean;
+}> = ({ data, width, height, colors, showPoints = true, animate = false }) => {
+  const chartColors = getChartColors(colors);
+  const padding = 60;
+  const chartWidth = width - padding * 2;
+  const chartHeight = height - padding * 2;
+
+  // Calculate max value for scaling
+  const maxValue = useMemo(() => {
+    const allValues = data.datasets.flatMap(dataset => 
+      dataset.data.map(point => typeof point === 'number' ? point : point.y)
+    );
+    return Math.max(...allValues, 0);
+  }, [data]);
+
+  return (
+    <svg width={width} height={height} style={{ background: colors.surface.background }}>
+      {/* Grid lines */}
+      {[0, 0.25, 0.5, 0.75, 1].map((percent, index) => {
+        const y = padding + chartHeight * (1 - percent);
+        return (
+          <g key={index}>
+            <line
+              x1={padding}
+              y1={y}
+              x2={padding + chartWidth}
+              y2={y}
+              stroke={colors.surface.border}
+              strokeWidth={1}
+              strokeDasharray={percent === 0 ? '0' : '2,2'}
+            />
+            <text
+              x={padding - 10}
+              y={y + 4}
+              textAnchor="end"
+              fill={colors.text.muted}
+              fontSize="12"
+            >
+              {Math.round(maxValue * percent)}
+            </text>
+          </g>
+        );
+      })}
+
+      {/* Lines and points */}
+      {data.datasets.map((dataset, datasetIndex) => {
+        const color = dataset.color || chartColors[datasetIndex % chartColors.length];
+        const points = dataset.data.map((value, index) => {
+          const numericValue = typeof value === 'number' ? value : value.y;
+          const x = padding + (index / (data.labels.length - 1)) * chartWidth;
+          const y = padding + chartHeight - (numericValue / maxValue) * chartHeight;
+          return { x, y, value: numericValue };
+        });
+
+        // Create path for line
+        const pathData = points.reduce((path, point, index) => {
+          const command = index === 0 ? 'M' : 'L';
+          return `${path} ${command} ${point.x} ${point.y}`;
+        }, '');
+
+        return (
+          <g key={datasetIndex}>
+            {/* Line */}
+            <path
+              d={pathData}
+              fill="none"
+              stroke={color}
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              {animate && (
+                <animate
+                  attributeName="stroke-dasharray"
+                  from={`0 ${chartWidth * 2}`}
+                  to={`${chartWidth * 2} 0`}
+                  dur="1.5s"
+                  fill="freeze"
+                />
+              )}
+            </path>
+
+            {/* Points */}
+            {showPoints && points.map((point, pointIndex) => (
+              <circle
+                key={pointIndex}
+                cx={point.x}
+                cy={point.y}
+                r={4}
+                fill={color}
+                stroke={colors.surface.background}
+                strokeWidth={2}
+              >
+                {animate && (
+                  <animate
+                    attributeName="r"
+                    from="0"
+                    to="4"
+                    dur="0.5s"
+                    begin={`${1.5 + pointIndex * 0.1}s`}
+                    fill="freeze"
+                  />
+                )}
+              </circle>
+            ))}
+          </g>
+        );
+      })}
+
+      {/* X-axis labels */}
+      {data.labels.map((label, index) => (
+        <text
+          key={index}
+          x={padding + (index / (data.labels.length - 1)) * chartWidth}
+          y={height - padding + 20}
+          textAnchor="middle"
+          fill={colors.text.secondary}
+          fontSize="12"
+        >
+          {label}
+        </text>
+      ))}
+    </svg>
+  );
+};
+
+// Simple Pie Chart Component
+const PieChart: React.FC<{
+  data: ChartData;
+  width: number;
+  height: number;
+  colors: any;
+  showLabels?: boolean;
+  animate?: boolean;
+}> = ({ data, width, height, colors, showLabels = true, animate = false }) => {
+  const chartColors = getChartColors(colors);
+  const centerX = width / 2;
+  const centerY = height / 2;
+  const radius = Math.min(width, height) / 2 - 40;
+
+  // Calculate total value and angles
+  const dataset = data.datasets[0];
+  const values = dataset?.data.map(point => typeof point === 'number' ? point : point.y) || [];
+  const total = values.reduce((sum, value) => sum + value, 0);
+  
+  let currentAngle = -Math.PI / 2; // Start at top
+  const segments = values.map((value, index) => {
+    const percentage = value / total;
+    const angle = percentage * 2 * Math.PI;
+    const startAngle = currentAngle;
+    const endAngle = currentAngle + angle;
+    currentAngle += angle;
+
+    // Calculate arc path
+    const x1 = centerX + radius * Math.cos(startAngle);
+    const y1 = centerY + radius * Math.sin(startAngle);
+    const x2 = centerX + radius * Math.cos(endAngle);
+    const y2 = centerY + radius * Math.sin(endAngle);
+    
+    const largeArc = angle > Math.PI ? 1 : 0;
+    const pathData = `M ${centerX} ${centerY} L ${x1} ${y1} A ${radius} ${radius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+
+    // Label position
+    const labelAngle = startAngle + angle / 2;
+    const labelX = centerX + (radius * 0.7) * Math.cos(labelAngle);
+    const labelY = centerY + (radius * 0.7) * Math.sin(labelAngle);
+
+    return {
+      pathData,
+      color: chartColors[index % chartColors.length],
+      label: data.labels[index],
+      value,
+      percentage: Math.round(percentage * 100),
+      labelX,
+      labelY
+    };
+  });
+
+  return (
+    <svg width={width} height={height} style={{ background: colors.surface.background }}>
+      {segments.map((segment, index) => (
+        <g key={index}>
+          {/* Pie segment */}
+          <path
+            d={segment.pathData}
+            fill={segment.color}
+            stroke={colors.surface.background}
+            strokeWidth={2}
+          >
+            {animate && (
+              <animate
+                attributeName="opacity"
+                from="0"
+                to="1"
+                dur="0.5s"
+                begin={`${index * 0.2}s`}
+                fill="freeze"
+              />
+            )}
+          </path>
+
+          {/* Labels */}
+          {showLabels && segment.percentage > 5 && (
+            <text
+              x={segment.labelX}
+              y={segment.labelY}
+              textAnchor="middle"
+              fill={colors.text.onPrimary}
+              fontSize="12"
+              fontWeight="bold"
+            >
+              {segment.percentage}%
+            </text>
+          )}
+        </g>
+      ))}
+
+      {/* Center circle for doughnut effect */}
+      <circle
+        cx={centerX}
+        cy={centerY}
+        r={radius * 0.4}
+        fill={colors.surface.background}
+        stroke={colors.surface.border}
+        strokeWidth={1}
+      />
+    </svg>
+  );
+};
+
+// Main Chart Component
+export const Chart: React.FC<ChartProps> = ({
+  type = 'bar',
+  data,
+  options = {},
+  height = 400,
+  width = '100%',
+
+  showLegend = true,
+  showValues = false,
+
+  animate = true,
+  loading = false,
+  error = null,
+  emptyMessage = 'No data available',
+  className = '',
+  theme = 'stan-design',
+  size = 'md',
+  variant = 'default'
+}) => {
+  const { getTheme } = useTheme();
+  const themeConfig = getTheme(theme);
+  const colors = themeConfig?.colors || getDefaultColors();
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Calculate responsive dimensions
+  const dimensions = useMemo(() => {
+    if (typeof width === 'number') {
+      return { width, height: typeof height === 'number' ? height : 400 };
+    }
+    
+    // For responsive width, we'll use a default and let CSS handle it
+    return { 
+      width: 600, 
+      height: typeof height === 'number' ? height : 400 
+    };
+  }, [width, height]);
+
+  // Chart type icon
+  const getChartIcon = () => {
+    switch (type) {
+      case 'line':
+      case 'area':
+        return <LineChartIcon className="chart__icon" />;
+      case 'pie':
+      case 'doughnut':
+        return <PieChartIcon className="chart__icon" />;
+      case 'bar':
+      default:
+        return <BarChartIcon className="chart__icon" />;
+    }
+  };
+
+  // Render appropriate chart component
+  const renderChart = () => {
+    const chartProps = {
+      data,
+      width: dimensions.width,
+      height: dimensions.height,
+      colors,
+      animate,
+      ...options
+    };
+
+    switch (type) {
+      case 'line':
+      case 'area':
+        return <LineChart {...chartProps} showPoints={options.showPoints} />;
+      case 'pie':
+      case 'doughnut':
+        return <PieChart {...chartProps} showLabels={options.showLabels} />;
+      case 'bar':
+      default:
+        return <BarChart {...chartProps} showValues={showValues} />;
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className={`chart__loading chart__container--${size} chart__container--${variant} ${className}`}>
+        <div className="chart__loading-spinner"></div>
+        <span>Loading chart...</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={`chart__error chart__container--${size} chart__container--${variant} ${className}`}>
+        <div className="chart__error-content">
+          <div className="chart__error-header">
+            {getChartIcon()}
+            <span>Chart Error</span>
+          </div>
+          <p>{error}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!data.datasets.length || !data.labels.length) {
+    return (
+      <div className={`chart__empty chart__container--${size} chart__container--${variant} ${className}`}>
+        <div className="chart__empty-content">
+          <div className="chart__empty-icon">
+            {getChartIcon()}
+          </div>
+          <span>No Data</span>
+          <p>{emptyMessage}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={`chart__container ${className || ''}`}
+    >
+      {/* Chart Title */}
+      {options.title && (
+        <div className="chart__header">
+          <h3 className="chart__title">
+            {options.title}
+          </h3>
+          {options.subtitle && (
+            <p className="chart__subtitle">
+              {options.subtitle}
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Chart Container */}
+      <div
+        className="chart__canvas"
+        style={{
+          width: typeof width === 'string' ? width : `${width}px`,
+          maxWidth: '100%'
+        }}
+      >
+        {renderChart()}
+      </div>
+
+      {/* Legend */}
+      {showLegend && data.datasets.length > 1 && (
+        <ChartLegend 
+          datasets={data.datasets}
+          colors={colors}
+          size={size}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Chart;