@shohojdhara/atomix 0.3.14 → 0.4.0

package/src/components/Chart/Chart.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
 import React from 'react';
 import { useState } from 'react';
 import { Container, Grid, GridCol } from '../../layouts/Grid';
@@ -37,12 +38,140 @@ const meta = {
     layout: 'fullscreen',
     docs: {
       description: {
-        component:
-          'The Chart component provides a comprehensive charting library with 20+ chart types including line, bar, pie, area, and more. Charts support real-time data updates, animations, interactive tooltips, and advanced customization options. Ideal for dashboards, analytics, data visualization, and any application requiring graphical data representation.',
+        component: `
+# Chart
+
+## Overview
+
+Charts provide a comprehensive charting library with 20+ chart types including line, bar, pie, area, and more. Charts support real-time data updates, animations, interactive tooltips, and advanced customization options. Ideal for dashboards, analytics, data visualization, and any application requiring graphical data representation.
+
+## Features
+
+- Multiple chart types (Line, Bar, Pie, Area, etc.)
+- Real-time data updates
+- Interactive tooltips and annotations
+- Animation capabilities
+- Glass morphism effects
+- Toolbar with export options
+- Multi-axis support
+- Advanced analytics integration
+
+## Accessibility
+
+- Keyboard support: Charts can be navigated using Tab key and arrow keys
+- Screen reader: Data points and chart information announced appropriately
+- ARIA support: Roles and properties ensure chart accessibility
+- Focus management: Maintains focus on interactive chart elements
+
+## Usage Examples
+
+### Basic Usage
+
+\`\`\`tsx
+<LineChart 
+  title="Sales Performance" 
+  datasets={[{ label: 'Sales', data: data, color: 'var(--atomix-primary)' }]} 
+/>
+\`\`\`
+
+### With Glass Effect
+
+\`\`\`tsx
+<BarChart 
+  title="Revenue by Month" 
+  datasets={datasets}
+  glass={true}
+  showToolbar={true}
+/>
+\`\`\`
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| title | string | - | Title of the chart |
+| subtitle | string | - | Subtitle of the chart |
+| datasets | Dataset[] | [] | Array of datasets to plot |
+| width | string \\| number | 100% | Width of the chart |
+| height | string \\| number | 400px | Height of the chart |
+| glass | boolean | false | Whether to apply glass effect |
+| showToolbar | boolean | false | Whether to show the toolbar |
+| config | ChartConfig | {} | Additional configuration options |
+| onPointClick | (point) => void | - | Callback when a data point is clicked |
+| onPointHover | (point) => void | - | Callback when hovering over a data point |
+        `,
       },
     },
   },
   tags: ['autodocs'],
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Title of the chart',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle of the chart',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '-' },
+      },
+    },
+    width: {
+      control: 'text',
+      description: 'Width of the chart',
+      table: {
+        type: { summary: 'string | number' },
+        defaultValue: { summary: '100%' },
+      },
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the chart',
+      table: {
+        type: { summary: 'string | number' },
+        defaultValue: { summary: '400px' },
+      },
+    },
+    glass: {
+      control: 'boolean',
+      description: 'Whether to apply glass effect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    showToolbar: {
+      control: 'boolean',
+      description: 'Whether to show the toolbar',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    config: {
+      control: 'object',
+      description: 'Additional configuration options',
+      table: {
+        type: { summary: 'ChartConfig' },
+        defaultValue: { summary: '{}' },
+      },
+    },
+    onPointClick: {
+      action: 'point clicked',
+      description: 'Callback when a data point is clicked',
+    },
+    onPointHover: {
+      action: 'point hovered',
+      description: 'Callback when hovering over a data point',
+    },
+  },
 } satisfies Meta<typeof Chart>;
 
 export default meta;
@@ -50,7 +179,7 @@ type Story = StoryObj<typeof meta>;
 
 // Glass Variant Story
 export const GlassVariant: Story = {
-  render: () => {
+  render: args => {
     const sampleData = [
       { label: 'Jan', value: 65 },
       { label: 'Feb', value: 78 },
@@ -84,6 +213,7 @@ export const GlassVariant: Story = {
             </GridCol>
             <GridCol col={12} md={6}>
               <LineChart
+                {...args}
                 title="Sales Performance"
                 subtitle="Monthly revenue data"
                 datasets={datasets}
@@ -97,24 +227,20 @@ export const GlassVariant: Story = {
             </GridCol>
             <GridCol col={12} md={6}>
               <BarChart
+                {...args}
                 title="Revenue by Month"
                 subtitle="Q1-Q2 comparison"
                 datasets={datasets}
-                glass={{
-                  displacementScale: 30,
-                  saturation: 200,
-                  mode: 'polar',
-                }}
+                glass={true}
                 showToolbar={true}
+                config={{
+                  showTooltips: true,
+                  animate: true,
+                }}
               />
             </GridCol>
             <GridCol col={12} md={6}>
-              <PieChart
-                title="Market Share"
-                data={sampleData}
-                glass={true}
-                showToolbar={true}
-              />
+              <PieChart title="Market Share" data={sampleData} glass={true} showToolbar={true} />
             </GridCol>
             <GridCol col={12} md={6}>
               <AreaChart
@@ -134,6 +260,17 @@ export const GlassVariant: Story = {
       </div>
     );
   },
+  args: {
+    onPointClick: fn(),
+    onPointHover: fn(),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Chart with glass effect applied to demonstrate aesthetic enhancement.',
+      },
+    },
+  },
 };
 
 // Data generators
@@ -214,7 +351,7 @@ const generateTreemapData = (count = 12) => {
     'Agriculture',
     'Construction',
   ];
-  
+
   return Array.from({ length: count }, (_, i) => ({
     id: `category-${i}`,
     label: categories[i % categories.length] || `Category ${i + 1}`,
@@ -235,7 +372,7 @@ const generateFunnelData = () => {
     { label: 'Evaluation', value: 600 },
     { label: 'Purchase', value: 300 },
   ];
-  
+
   return stages.map(stage => ({
     ...stage,
     percentage: ((stage.value / stages[0].value) * 100).toFixed(1),

package/src/components/Chart/Chart.tsx

@@ -351,57 +351,53 @@ const Chart = memo(
           tabIndex={0}
           {...props}
         >
-            {(title || subtitle || showToolbar) && (
-              <div
-                className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-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()}
+          {(title || subtitle || showToolbar) && (
+            <div className={`${CHART.HEADER_CLASS} u-flex u-justify-between u-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>
             )}
 
-            <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>
+            {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>
-              )}
-
-              {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.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>
+            {!loading && !error && children && <div className={CHART.CANVAS_CLASS}>{children}</div>}
           </div>
+        </div>
       );
 
       // Wrap with AtomixGlass if glass is enabled

package/src/components/Chart/ChartRenderer.tsx

@@ -1,4 +1,13 @@
-import { forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   useChart,
   useChartAccessibility,
@@ -88,7 +97,7 @@ const ChartRenderer = memo(
       const svgRef = useRef<SVGSVGElement>(null);
       const containerRef = useRef<HTMLDivElement>(null);
       const [isInitialized, setIsInitialized] = useState(false);
-      
+
       // Responsive dimensions state - initialize with 0 to prevent layout shifts
       const [dimensions, setDimensions] = useState({
         width: 0,
@@ -121,7 +130,7 @@ const ChartRenderer = memo(
         });
 
         // Use ResizeObserver to track container size changes
-        const resizeObserver = new ResizeObserver((entries) => {
+        const resizeObserver = new ResizeObserver(entries => {
           for (const entry of entries) {
             const { width: containerWidth, height: containerHeight } = entry.contentRect;
             if (containerWidth > 0 && containerHeight > 0) {
@@ -274,7 +283,13 @@ const ChartRenderer = memo(
           return null;
         }
 
-        const scales = calculateScales(processedData, dimensions.width, dimensions.height, undefined, config);
+        const scales = calculateScales(
+          processedData,
+          dimensions.width,
+          dimensions.height,
+          undefined,
+          config
+        );
         if (!scales) return null;
 
         const colors = getChartColors(processedData.length).filter(
@@ -289,7 +304,15 @@ const ChartRenderer = memo(
             color: dataset.color || colors[i],
           })),
         };
-      }, [processedData, config, dimensions.width, dimensions.height, isInitialized, calculateScales, getChartColors]);
+      }, [
+        processedData,
+        config,
+        dimensions.width,
+        dimensions.height,
+        isInitialized,
+        calculateScales,
+        getChartColors,
+      ]);
 
       useEffect(() => {
         return () => {
@@ -335,12 +358,12 @@ const ChartRenderer = memo(
       // Don't render until dimensions are initialized to prevent layout shifts
       if (!isInitialized || dimensions.width === 0 || dimensions.height === 0) {
         return (
-          <div 
-            ref={containerRef} 
-            className={CHART.CANVAS_CLASS} 
-            style={{ 
-              width: '100%', 
-              height: '100%', 
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{
+              width: '100%',
+              height: '100%',
               minHeight: '200px',
               display: 'flex',
               alignItems: 'center',
@@ -359,7 +382,11 @@ const ChartRenderer = memo(
 
       return (
         <>
-          <div ref={containerRef} className={CHART.CANVAS_CLASS} style={{ width: '100%', height: '100%' }}>
+          <div
+            ref={containerRef}
+            className={CHART.CANVAS_CLASS}
+            style={{ width: '100%', height: '100%' }}
+          >
             <svg
               ref={svgRef}
               width={svgWidth}

package/src/components/Chart/ChartToolbar.tsx

@@ -569,14 +569,20 @@ const ChartToolbar = memo(
                   onRefresh?.();
                   break;
                 default:
-                  console.warn(`No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`);
+                  console.warn(
+                    `No handler found for action: ${String(action.id).replace(/[\r\n\t]/g, '')}`
+                  );
               }
             }
           }
         };
 
         const buttonRef =
-          action.id === 'export' ? exportButtonRef : action.id === 'settings' ? settingsButtonRef : null;
+          action.id === 'export'
+            ? exportButtonRef
+            : action.id === 'settings'
+              ? settingsButtonRef
+              : null;
 
         return (
           <button
@@ -589,7 +595,13 @@ const ChartToolbar = memo(
             type="button"
             aria-label={action.label}
             aria-pressed={action.active ? 'true' : 'false'}
-            aria-expanded={action.id === 'export' ? showExportMenu : action.id === 'settings' ? showSettingsMenu : undefined}
+            aria-expanded={
+              action.id === 'export'
+                ? showExportMenu
+                : action.id === 'settings'
+                  ? showSettingsMenu
+                  : undefined
+            }
           >
             <Icon name={action.icon} size="sm" />
             {size === 'lg' && <span className={`${CHART.ACTION_CLASS}-label`}>{action.label}</span>}
@@ -698,14 +710,18 @@ const ChartToolbar = memo(
 
               {/* Info items */}
               {state.zoomLevel !== undefined && (
-                <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+                <div
+                  className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+                >
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Zoom Level</span>
                   <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>
                     {Math.round((state.zoomLevel || 1) * 100)}%
                   </span>
                 </div>
               )}
-              <div className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}>
+              <div
+                className={`${CHART.SETTINGS_MENU_CLASS}-item ${CHART.SETTINGS_MENU_CLASS}-item--info`}
+              >
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-label`}>Chart Type</span>
                 <span className={`${CHART.SETTINGS_MENU_CLASS}-value`}>{chartType}</span>
               </div>

package/src/components/Chart/DonutChart.tsx

@@ -125,7 +125,7 @@ const DonutChart = memo(
         // Calculate angles for each slice
         const padAngleRad = ((pieOptions.padAngle || 1) * Math.PI) / 180;
         let currentAngle = ((pieOptions.startAngle || 0) * Math.PI) / 180;
-        
+
         const slices = chartData.validDataPoints.map((point, index) => {
           const percentage = point.value / total;
           const sliceAngle = percentage * (2 * Math.PI) - padAngleRad;

package/src/components/Chart/FunnelChart.tsx

@@ -282,7 +282,10 @@ const FunnelChart = memo(
               <ChartTooltip
                 dataPoint={funnelData[hoveredPoint.pointIndex]!}
                 datasetLabel="Funnel Data"
-                datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
+                datasetColor={
+                  funnelData[hoveredPoint.pointIndex]?.color ||
+                  colors[hoveredPoint.pointIndex % colors.length]
+                }
                 position={{
                   x: hoveredPoint.clientX,
                   y: hoveredPoint.clientY,

package/src/components/Chart/GaugeChart.tsx

@@ -335,7 +335,9 @@ const GaugeChart = memo(
               d={createArcPath(centerX, centerY, radius, startAngleRad, valueAngle, thickness)}
               fill="var(--atomix-brand-bg-subtle)"
               style={{
-                transition: shouldAnimate ? `all ${animationDuration}ms ${animationEasing}` : 'none',
+                transition: shouldAnimate
+                  ? `all ${animationDuration}ms ${animationEasing}`
+                  : 'none',
               }}
             />
 

package/src/components/Chart/HeatmapChart.tsx

@@ -288,21 +288,28 @@ const HeatmapChart = memo(
             <g>
               {/* Gradient definitions */}
               <defs>
-                {showColorLegend && (() => {
-                  const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
-                  if (!schemeColors || schemeColors.length === 0) return null;
-                  return (
-                    <linearGradient id="heatmap-legend-gradient" x1="0%" y1="100%" x2="0%" y2="0%">
-                      {schemeColors.map((color, i) => (
-                        <stop
-                          key={i}
-                          offset={`${(i / (schemeColors.length - 1)) * 100}%`}
-                          stopColor={color}
-                        />
-                      ))}
-                    </linearGradient>
-                  );
-                })()}
+                {showColorLegend &&
+                  (() => {
+                    const schemeColors = colorSchemes[colorScale.scheme] || colorSchemes.viridis;
+                    if (!schemeColors || schemeColors.length === 0) return null;
+                    return (
+                      <linearGradient
+                        id="heatmap-legend-gradient"
+                        x1="0%"
+                        y1="100%"
+                        x2="0%"
+                        y2="0%"
+                      >
+                        {schemeColors.map((color, i) => (
+                          <stop
+                            key={i}
+                            offset={`${(i / (schemeColors.length - 1)) * 100}%`}
+                            stopColor={color}
+                          />
+                        ))}
+                      </linearGradient>
+                    );
+                  })()}
               </defs>
 
               {/* Grid cells */}
@@ -333,11 +340,15 @@ const HeatmapChart = memo(
                         }}
                         onClick={() => {
                           if (cell) {
-                            handlers.onDataPointClick?.({
-                              ...cell,
-                              label: cell.label || `${cell.x}, ${cell.y}`,
-                              value: cell.value,
-                            } as any, rowIndex, colIndex);
+                            handlers.onDataPointClick?.(
+                              {
+                                ...cell,
+                                label: cell.label || `${cell.x}, ${cell.y}`,
+                                value: cell.value,
+                              } as any,
+                              rowIndex,
+                              colIndex
+                            );
                           }
                         }}
                         onMouseEnter={e => {
@@ -422,23 +433,25 @@ const HeatmapChart = memo(
                 </g>
               )}
             </g>
-            {showTooltips && hoveredPoint && renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-              <ChartTooltip
-                dataPoint={
-                  renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
-                }
-                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
-                datasetColor={
-                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
-                  colors[hoveredPoint.datasetIndex % colors.length]
-                }
-                position={{
-                  x: hoveredPoint.clientX,
-                  y: hoveredPoint.clientY,
-                }}
-                visible={true}
-              />
-            )}
+            {showTooltips &&
+              hoveredPoint &&
+              renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+                <ChartTooltip
+                  dataPoint={
+                    renderedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                  }
+                  datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                  datasetColor={
+                    renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                    colors[hoveredPoint.datasetIndex % colors.length]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
           </>
         );
       };

package/src/components/Chart/LineChart.tsx

@@ -81,7 +81,8 @@ const LineChart = memo(
         if (!renderedDatasets.length) return null;
 
         const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
-        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
+        const shouldAnimate =
+          toolbarState?.animationsEnabled ?? renderConfig?.animate ?? mergedLineOptions.smooth;
 
         return (
           <>
@@ -101,7 +102,7 @@ const LineChart = memo(
               // Generate line path - ensure proper SVG path format
               const path = mergedLineOptions.smooth
                 ? generateSmoothPath(points)
-                : `M ${points.map((p) => `${p.x},${p.y}`).join(' L ')}`;
+                : `M ${points.map(p => `${p.x},${p.y}`).join(' L ')}`;
 
               return (
                 <g key={`dataset-${datasetIndex}`}>