@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.11 → 0.2.17

package/dist/components/ui/data-display/chart.js

@@ -1,653 +1,231 @@
-import React, { useMemo, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { 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>
-);
-
+const BarChartIcon = ({ className = 'w-4 h-4' }) => (_jsx("svg", { className: className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("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" }) }));
+const LineChartIcon = ({ className = 'w-4 h-4' }) => (_jsxs("svg", { className: className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 12l3-3 3 3 4-4" }), _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 21l4-4 4-4 4-4" })] }));
+const PieChartIcon = ({ className = 'w-4 h-4' }) => (_jsxs("svg", { className: className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 2L12 12L22 12A10 10 0 0 0 12 2Z" }), _jsx("circle", { cx: "12", cy: "12", r: "10", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 })] }));
 // 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' 
-  }
+    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
+const getChartColors = (colors) => [
+    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>
-  );
+const ChartLegend = ({ 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 (_jsx("div", { className: `chart__legend ${sizeClasses[size]}`, children: datasets.map((dataset, index) => (_jsxs("div", { className: "chart__legend-item", children: [_jsx("div", { className: `chart__legend-color ${dotSizes[size]}`, style: {
+                        backgroundColor: dataset.color || chartColors[index % chartColors.length]
+                    } }), _jsx("span", { className: "chart__legend-label", children: dataset.label })] }, index))) }));
 };
-
 // 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>
-  );
+const BarChart = ({ 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 (_jsxs("svg", { width: width, height: height, style: { background: colors.surface.background }, children: [[0, 0.25, 0.5, 0.75, 1].map((percent, index) => {
+                const y = padding + chartHeight * (1 - percent);
+                return (_jsxs("g", { children: [_jsx("line", { x1: padding, y1: y, x2: padding + chartWidth, y2: y, stroke: colors.surface.border, strokeWidth: 1, strokeDasharray: percent === 0 ? '0' : '2,2' }), _jsx("text", { x: padding - 10, y: y + 4, textAnchor: "end", fill: colors.text.muted, fontSize: "12", children: Math.round(maxValue * percent) })] }, index));
+            }), data.datasets.map((dataset, datasetIndex) => (_jsx("g", { children: 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 (_jsxs("g", { children: [_jsxs("rect", { x: x, y: animate ? padding + chartHeight : y, width: barWidth * 0.8, height: animate ? 0 : barHeight, fill: color, rx: 2, children: [animate && (_jsx("animate", { attributeName: "height", from: "0", to: barHeight, dur: "0.8s", begin: `${pointIndex * 0.1}s`, fill: "freeze" })), animate && (_jsx("animate", { attributeName: "y", from: padding + chartHeight, to: y, dur: "0.8s", begin: `${pointIndex * 0.1}s`, fill: "freeze" }))] }), showValues && (_jsx("text", { x: x + (barWidth * 0.8) / 2, y: y - 5, textAnchor: "middle", fill: colors.text.secondary, fontSize: "10", children: numericValue }))] }, pointIndex));
+                }) }, datasetIndex))), data.labels.map((label, index) => (_jsx("text", { x: padding + index * groupWidth + groupWidth / 2, y: height - padding + 20, textAnchor: "middle", fill: colors.text.secondary, fontSize: "12", children: label }, index)))] }));
 };
-
 // 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>
-  );
+const LineChart = ({ 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 (_jsxs("svg", { width: width, height: height, style: { background: colors.surface.background }, children: [[0, 0.25, 0.5, 0.75, 1].map((percent, index) => {
+                const y = padding + chartHeight * (1 - percent);
+                return (_jsxs("g", { children: [_jsx("line", { x1: padding, y1: y, x2: padding + chartWidth, y2: y, stroke: colors.surface.border, strokeWidth: 1, strokeDasharray: percent === 0 ? '0' : '2,2' }), _jsx("text", { x: padding - 10, y: y + 4, textAnchor: "end", fill: colors.text.muted, fontSize: "12", children: Math.round(maxValue * percent) })] }, index));
+            }), 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 (_jsxs("g", { children: [_jsx("path", { d: pathData, fill: "none", stroke: color, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: animate && (_jsx("animate", { attributeName: "stroke-dasharray", from: `0 ${chartWidth * 2}`, to: `${chartWidth * 2} 0`, dur: "1.5s", fill: "freeze" })) }), showPoints && points.map((point, pointIndex) => (_jsx("circle", { cx: point.x, cy: point.y, r: 4, fill: color, stroke: colors.surface.background, strokeWidth: 2, children: animate && (_jsx("animate", { attributeName: "r", from: "0", to: "4", dur: "0.5s", begin: `${1.5 + pointIndex * 0.1}s`, fill: "freeze" })) }, pointIndex)))] }, datasetIndex));
+            }), data.labels.map((label, index) => (_jsx("text", { x: padding + (index / (data.labels.length - 1)) * chartWidth, y: height - padding + 20, textAnchor: "middle", fill: colors.text.secondary, fontSize: "12", children: label }, index)))] }));
 };
-
 // 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>
-  );
+const PieChart = ({ 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 (_jsxs("svg", { width: width, height: height, style: { background: colors.surface.background }, children: [segments.map((segment, index) => (_jsxs("g", { children: [_jsx("path", { d: segment.pathData, fill: segment.color, stroke: colors.surface.background, strokeWidth: 2, children: animate && (_jsx("animate", { attributeName: "opacity", from: "0", to: "1", dur: "0.5s", begin: `${index * 0.2}s`, fill: "freeze" })) }), showLabels && segment.percentage > 5 && (_jsxs("text", { x: segment.labelX, y: segment.labelY, textAnchor: "middle", fill: colors.text.onPrimary, fontSize: "12", fontWeight: "bold", children: [segment.percentage, "%"] }))] }, index))), _jsx("circle", { cx: centerX, cy: centerY, r: radius * 0.4, fill: colors.surface.background, stroke: colors.surface.border, strokeWidth: 1 })] }));
 };
-
 // 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 
+export const Chart = ({ 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(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 _jsx(LineChartIcon, { className: "chart__icon" });
+            case 'pie':
+            case 'doughnut':
+                return _jsx(PieChartIcon, { className: "chart__icon" });
+            case 'bar':
+            default:
+                return _jsx(BarChartIcon, { className: "chart__icon" });
+        }
     };
-  }, [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
+    // 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 _jsx(LineChart, { ...chartProps, showPoints: options.showPoints });
+            case 'pie':
+            case 'doughnut':
+                return _jsx(PieChart, { ...chartProps, showLabels: options.showLabels });
+            case 'bar':
+            default:
+                return _jsx(BarChart, { ...chartProps, showValues: showValues });
+        }
     };
-
-    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 (_jsxs("div", { className: `chart__loading chart__container--${size} chart__container--${variant} ${className}`, children: [_jsx("div", { className: "chart__loading-spinner" }), _jsx("span", { children: "Loading chart..." })] }));
+    }
+    if (error) {
+        return (_jsx("div", { className: `chart__error chart__container--${size} chart__container--${variant} ${className}`, children: _jsxs("div", { className: "chart__error-content", children: [_jsxs("div", { className: "chart__error-header", children: [getChartIcon(), _jsx("span", { children: "Chart Error" })] }), _jsx("p", { children: error })] }) }));
+    }
+    if (!data.datasets.length || !data.labels.length) {
+        return (_jsx("div", { className: `chart__empty chart__container--${size} chart__container--${variant} ${className}`, children: _jsxs("div", { className: "chart__empty-content", children: [_jsx("div", { className: "chart__empty-icon", children: getChartIcon() }), _jsx("span", { children: "No Data" }), _jsx("p", { children: emptyMessage })] }) }));
     }
-  };
-
-  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>
-  );
+    return (_jsxs("div", { ref: containerRef, className: `chart__container ${className || ''}`, children: [options.title && (_jsxs("div", { className: "chart__header", children: [_jsx("h3", { className: "chart__title", children: options.title }), options.subtitle && (_jsx("p", { className: "chart__subtitle", children: options.subtitle }))] })), _jsx("div", { className: "chart__canvas", style: {
+                    width: typeof width === 'string' ? width : `${width}px`,
+                    maxWidth: '100%'
+                }, children: renderChart() }), showLegend && data.datasets.length > 1 && (_jsx(ChartLegend, { datasets: data.datasets, colors: colors, size: size }))] }));
 };
-
 export default Chart;