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

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

@@ -6,7 +6,7 @@ import {
 } from './types';
 
 // Simple icon components (inline SVG)
-const BarChartIcon}> = ({ className = 'w-4 h-4' }) => (
+const BarChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
   <svg 
     className={className} 
     fill="none" 
@@ -17,7 +17,7 @@ const BarChartIcon}> = ({ className = 'w-4 h-4' }) => (
   </svg>
 );
 
-const LineChartIcon}> = ({ className = 'w-4 h-4' }) => (
+const LineChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
   <svg 
     className={className} 
     fill="none" 
@@ -29,7 +29,7 @@ const LineChartIcon}> = ({ className = 'w-4 h-4' }) => (
   </svg>
 );
 
-const PieChartIcon}> = ({ className = 'w-4 h-4' }) => (
+const PieChartIcon: React.FC<{ className?: string }> = ({ className = 'w-4 h-4' }) => (
   <svg 
     className={className} 
     fill="none" 
@@ -43,30 +43,38 @@ const PieChartIcon}> = ({ className = 'w-4 h-4' }) => (
 
 // Default color fallbacks for when theme is not available
 const getDefaultColors = () => ({
-  surface, 
-    surface, 
-    border, 
-    divider},
-  text, 
-    secondary, 
-    muted, 
-    inverse, 
-    onPrimary, 
-    onSecondary, 
-    onSurface},
-  interactive, 
-    active, 
-    focus, 
-    disabled},
-  primary},
-  semantic, 
-    warning, 
-    error, 
-    info}
+  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) => [
+const getChartColors = (colors: any) => [
   colors.primary[500],
   colors.semantic.success,
   colors.semantic.warning,
@@ -80,21 +88,24 @@ const getChartColors = (colors) => [
 ];
 
 // Chart Legend Component
-const ChartLegend];
-  colors;
-  size;
+const ChartLegend: React.FC<{
+  datasets: ChartData['datasets'];
+  colors: any;
+  size: 'sm' | 'md' | 'lg';
 }> = ({ datasets, colors, size }) => {
   const chartColors = getChartColors(colors);
   
   const sizeClasses = {
-    sm,
-    md,
-    lg};
+    sm: 'chart__legend--sm',
+    md: 'chart__legend--md',
+    lg: 'chart__legend--lg'
+  };
 
   const dotSizes = {
-    sm,
-    md,
-    lg};
+    sm: 'chart__legend-color--sm',
+    md: 'chart__legend-color--md',
+    lg: 'chart__legend-color--lg'
+  };
 
   return (
     <div className={`chart__legend ${sizeClasses[size]}`}>
@@ -103,7 +114,7 @@ const ChartLegend];
           <div
             className={`chart__legend-color ${dotSizes[size]}`}
             style={{
-              backgroundColor]
+              backgroundColor: dataset.color || chartColors[index % chartColors.length]
             }}
           />
           <span className="chart__legend-label">
@@ -116,12 +127,13 @@ const ChartLegend];
 };
 
 // Simple Bar Chart Component
-const BarChart;
-  width;
-  height;
-  colors;
-  showValues?;
-  animate?;
+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;
@@ -131,7 +143,7 @@ const BarChart;
   // Calculate max value for scaling
   const maxValue = useMemo(() => {
     const allValues = data.datasets.flatMap(dataset => 
-      dataset.data.map(point => typeof point === 'number' ? point )
+      dataset.data.map(point => typeof point === 'number' ? point : point.y)
     );
     return Math.max(...allValues, 0);
   }, [data]);
@@ -140,7 +152,7 @@ const BarChart;
   const groupWidth = chartWidth / data.labels.length;
 
   return (
-    <svg width={width} height={height} style={{ background}}>
+    <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);
@@ -153,7 +165,7 @@ const BarChart;
               y2={y}
               stroke={colors.surface.border}
               strokeWidth={1}
-              strokeDasharray={percent === 0 ? '0' ,2'}
+              strokeDasharray={percent === 0 ? '0' : '2,2'}
             />
             <text
               x={padding - 10}
@@ -172,7 +184,7 @@ const BarChart;
       {data.datasets.map((dataset, datasetIndex) => (
         <g key={datasetIndex}>
           {dataset.data.map((value, pointIndex) => {
-            const numericValue = typeof value === 'number' ? value ;
+            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;
@@ -182,9 +194,9 @@ const BarChart;
               <g key={pointIndex}>
                 <rect
                   x={x}
-                  y={animate ? padding + chartHeight }
+                  y={animate ? padding + chartHeight : y}
                   width={barWidth * 0.8}
-                  height={animate ? 0 }
+                  height={animate ? 0 : barHeight}
                   fill={color}
                   rx={2}
                 >
@@ -246,12 +258,13 @@ const BarChart;
 };
 
 // Simple Line Chart Component
-const LineChart;
-  width;
-  height;
-  colors;
-  showPoints?;
-  animate?;
+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;
@@ -261,13 +274,13 @@ const LineChart;
   // Calculate max value for scaling
   const maxValue = useMemo(() => {
     const allValues = data.datasets.flatMap(dataset => 
-      dataset.data.map(point => typeof point === 'number' ? point )
+      dataset.data.map(point => typeof point === 'number' ? point : point.y)
     );
     return Math.max(...allValues, 0);
   }, [data]);
 
   return (
-    <svg width={width} height={height} style={{ background}}>
+    <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);
@@ -280,7 +293,7 @@ const LineChart;
               y2={y}
               stroke={colors.surface.border}
               strokeWidth={1}
-              strokeDasharray={percent === 0 ? '0' ,2'}
+              strokeDasharray={percent === 0 ? '0' : '2,2'}
             />
             <text
               x={padding - 10}
@@ -299,15 +312,15 @@ const LineChart;
       {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 ;
+          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};
+          return { x, y, value: numericValue };
         });
 
         // Create path for line
         const pathData = points.reduce((path, point, index) => {
-          const command = index === 0 ? 'M' ;
+          const command = index === 0 ? 'M' : 'L';
           return `${path} ${command} ${point.x} ${point.y}`;
         }, '');
 
@@ -378,12 +391,13 @@ const LineChart;
 };
 
 // Simple Pie Chart Component
-const PieChart;
-  width;
-  height;
-  colors;
-  showLabels?;
-  animate?;
+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;
@@ -392,7 +406,7 @@ const PieChart;
 
   // Calculate total value and angles
   const dataset = data.datasets[0];
-  const values = dataset?.data.map(point => typeof point === 'number' ? point ) || [];
+  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
@@ -409,7 +423,7 @@ const PieChart;
     const x2 = centerX + radius * Math.cos(endAngle);
     const y2 = centerY + radius * Math.sin(endAngle);
     
-    const largeArc = angle > Math.PI ? 1 ;
+    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
@@ -419,17 +433,17 @@ const PieChart;
 
     return {
       pathData,
-      color],
-      label],
+      color: chartColors[index % chartColors.length],
+      label: data.labels[index],
       value,
-      percentage),
+      percentage: Math.round(percentage * 100),
       labelX,
       labelY
     };
   });
 
   return (
-    <svg width={width} height={height} style={{ background}}>
+    <svg width={width} height={height} style={{ background: colors.surface.background }}>
       {segments.map((segment, index) => (
         <g key={index}>
           {/* Pie segment */}
@@ -481,7 +495,7 @@ const PieChart;
 };
 
 // Main Chart Component
-export const Chart= ({
+export const Chart: React.FC<ChartProps> = ({
   type = 'bar',
   data,
   options = {},
@@ -508,21 +522,28 @@ export const Chart= ({
   // Calculate responsive dimensions
   const dimensions = useMemo(() => {
     if (typeof width === 'number') {
-      return { width, height=== 'number' ? height };
+      return { width, height: typeof height === 'number' ? height : 400 };
     }
     
     // For responsive width, we'll use a default and let CSS handle it
     return { 
-      width, 
-      height=== 'number' ? height };
+      width: 600, 
+      height: typeof height === 'number' ? height : 400 
+    };
   }, [width, height]);
 
   // Chart type icon
   const getChartIcon = () => {
     switch (type) {
-      case 'line'="chart__icon" />;
-      case 'pie'="chart__icon" />;
-      case 'bar'="chart__icon" />;
+      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" />;
     }
   };
 
@@ -530,17 +551,23 @@ export const Chart= ({
   const renderChart = () => {
     const chartProps = {
       data,
-      width,
-      height,
+      width: dimensions.width,
+      height: dimensions.height,
       colors,
       animate,
       ...options
     };
 
     switch (type) {
-      case 'line'} showPoints={options.showPoints} />;
-      case 'pie'} showLabels={options.showLabels} />;
-      case 'bar'} showValues={showValues} />;
+      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} />;
     }
   };
 
@@ -604,8 +631,9 @@ export const Chart= ({
       <div
         className="chart__canvas"
         style={{
-          width=== 'string' ? width }px`,
-          maxWidth}}
+          width: typeof width === 'string' ? width : `${width}px`,
+          maxWidth: '100%'
+        }}
       >
         {renderChart()}
       </div>