@shohojdhara/atomix 0.4.5 → 0.4.7

package/src/components/AtomixGlass/stories/shared-components.tsx

@@ -75,16 +75,18 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
 
   const bgStyle = {
     backgroundImage: bgImage ? `url(${bgImage})` : undefined,
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
     height,
     width,
     borderRadius,
-    padding,
     ...style,
   };
 
   return (
     <div
-      className={`u-relative u-overflow-hidden ${className}`}
+      className={`u-relative u-overflow-hidden u-flex u-items-center u-justify-center ${className}`}
       style={bgStyle}
       aria-hidden={ariaHidden}
     >
@@ -94,10 +96,16 @@ export const BackgroundWrapper: React.FC<BackgroundWrapperProps> = ({
           style={{
             backgroundColor: overlayColor,
             opacity: overlayOpacity,
+            padding,
           }}
         />
       )}
-      <div className="u-relative u-z-10">{children}</div>
+      <div
+        className="u-relative u-z-10 u-w-100 u-h-100 u-flex u-items-center u-justify-center"
+        style={{ padding }}
+      >
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/Chart/BubbleChart.tsx

@@ -126,8 +126,12 @@ const BubbleChart = memo(
             minBubbleSize + ((bubble.size - minSize) / sizeRange) * (maxBubbleSize - minBubbleSize);
 
           // Calculate position
-          const x = scales.padding.left + (bubble.x / 100) * scales.innerWidth;
-          const y = scales.padding.top + scales.innerHeight - (bubble.y / 100) * scales.innerHeight;
+          // Ensure bubbles don't get cut off by adding padding equal to maxBubbleSize
+          const effectiveWidth = scales.innerWidth - maxBubbleSize * 2;
+          const effectiveHeight = scales.innerHeight - maxBubbleSize * 2;
+          
+          const x = scales.padding.left + maxBubbleSize + (bubble.x / 100) * effectiveWidth;
+          const y = scales.padding.top + maxBubbleSize + effectiveHeight - (bubble.y / 100) * effectiveHeight;
 
           // Determine color
           let bubbleColor = bubble.color;

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

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
-import React from 'react';
-import { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Container, Grid, GridCol } from '../../layouts/Grid';
 import { Badge } from '../Badge';
 import { Button } from '../Button';
@@ -12,7 +11,6 @@ import { SideMenuItem } from '../Navigation/SideMenu/SideMenuItem';
 import { SideMenuList } from '../Navigation/SideMenu/SideMenuList';
 
 import {
-  AnimatedChart,
   AreaChart,
   BarChart,
   BubbleChart,
@@ -123,28 +121,13 @@ Charts provide a comprehensive charting library with 20+ chart types including l
         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 },
+        defaultValue: { summary: 'false' },
       },
     },
     showToolbar: {
@@ -152,7 +135,7 @@ Charts provide a comprehensive charting library with 20+ chart types including l
       description: 'Whether to show the toolbar',
       table: {
         type: { summary: 'boolean' },
-        defaultValue: { summary: false },
+        defaultValue: { summary: 'false' },
       },
     },
     config: {
@@ -163,14 +146,10 @@ Charts provide a comprehensive charting library with 20+ chart types including l
         defaultValue: { summary: '{}' },
       },
     },
-    onPointClick: {
-      action: 'point clicked',
+    onDataPointClick: {
+      action: 'data 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>;
 
@@ -208,10 +187,10 @@ export const GlassVariant: Story = {
       >
         <Container>
           <Grid>
-            <GridCol col={12}>
+            <GridCol xs={12}>
               <h2 style={{ color: 'white', marginBottom: '2rem' }}>Chart Glass Variant</h2>
             </GridCol>
-            <GridCol col={12} md={6}>
+            <GridCol xs={12} md={6} className="u-mb-4">
               <LineChart
                 {...args}
                 title="Sales Performance"
@@ -225,7 +204,7 @@ export const GlassVariant: Story = {
                 }}
               />
             </GridCol>
-            <GridCol col={12} md={6}>
+            <GridCol xs={12} md={6}>
               <BarChart
                 {...args}
                 title="Revenue by Month"
@@ -239,10 +218,10 @@ export const GlassVariant: Story = {
                 }}
               />
             </GridCol>
-            <GridCol col={12} md={6}>
+            <GridCol xs={12} md={6}>
               <PieChart title="Market Share" data={sampleData} glass={true} showToolbar={true} />
             </GridCol>
-            <GridCol col={12} md={6}>
+            <GridCol xs={12} md={6}>
               <AreaChart
                 title="Growth Trend"
                 subtitle="Year over year"
@@ -261,8 +240,7 @@ export const GlassVariant: Story = {
     );
   },
   args: {
-    onPointClick: fn(),
-    onPointHover: fn(),
+    onDataPointClick: fn(),
   },
   parameters: {
     docs: {
@@ -375,7 +353,7 @@ const generateFunnelData = () => {
 
   return stages.map(stage => ({
     ...stage,
-    percentage: ((stage.value / stages[0].value) * 100).toFixed(1),
+    percentage: Number(((stage.value / stages[0].value) * 100).toFixed(1)),
   }));
 };
 
@@ -391,7 +369,9 @@ export const ChartGallery: Story = {
     const [selectedType, setSelectedType] = useState('line');
     const [animated, setAnimated] = useState(true);
     const [showLegend, setShowLegend] = useState(true);
+    const [glassEffect, setGlassEffect] = useState(false);
     const [dataPoints, setDataPoints] = useState(12);
+    const [dataSeed, setDataSeed] = useState(0);
 
     const chartTypes = [
       { key: 'line', icon: 'TrendUp', label: 'Line', desc: 'Trends over time' },
@@ -413,26 +393,55 @@ export const ChartGallery: Story = {
       { key: 'waterfall', icon: 'Drop', label: 'Waterfall', desc: 'Cumulative flow' },
       { key: 'funnel', icon: 'Funnel', label: 'Funnel', desc: 'Process stages' },
       { key: 'treemap', icon: 'Tree', label: 'Treemap', desc: 'Hierarchical data' },
-      { key: 'animated', icon: 'Sparkle', label: 'Animated', desc: 'Motion graphics' },
       { key: 'multiaxis', icon: 'ChartLineUp', label: 'Multi-axis', desc: 'Multiple scales' },
     ];
 
-    // Generate dynamic data based on dataPoints
-    const dynamicDatasets = [
-      { label: 'Sales', data: generateData(dataPoints), color: 'var(--atomix-primary)' },
-      { label: 'Revenue', data: generateData(dataPoints), color: 'var(--atomix-success)' },
-      { label: 'Profit', data: generateData(dataPoints), color: 'var(--atomix-warning)' },
-    ];
+    // Generate dynamic data based on dataPoints and dataSeed
+    const dynamicDatasets = useMemo(
+      () => [
+        { label: 'Sales', data: generateData(dataPoints), color: 'var(--atomix-primary)' },
+        { label: 'Revenue', data: generateData(dataPoints), color: 'var(--atomix-success)' },
+        { label: 'Profit', data: generateData(dataPoints), color: 'var(--atomix-warning)' },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      ],
+      [dataPoints, dataSeed]
+    );
+
+    const pieDatasets = useMemo(
+      () => [
+        { label: 'Distribution', data: generateData(Math.min(dataPoints, 8)) },
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      ],
+      [dataPoints, dataSeed]
+    );
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const bubbleData = useMemo(() => generateBubbleData(dataPoints), [dataPoints, dataSeed]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const heatmapData = useMemo(() => generateHeatmapData(), [dataSeed]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const candlestickData = useMemo(
+      () => generateCandlestickData(dataPoints),
+      [dataPoints, dataSeed]
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const funnelData = useMemo(() => generateFunnelData(), [dataSeed]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const treemapData = useMemo(
+      () => generateTreemapData(Math.min(dataPoints, 20)),
+      [dataPoints, dataSeed]
+    );
 
     const renderChart = () => {
       const commonProps = {
         title: `${chartTypes.find(t => t.key === selectedType)?.label} Chart`,
         config: { showLegend, animate: animated },
         showToolbar: true,
+        glass: glassEffect,
         enableFullscreen: true,
         enableExport: true,
         enableRefresh: true,
-        onRefresh: () => console.log('Story: Refresh clicked'),
+        onRefresh: () => setDataSeed(s => s + 1), // Regenerate on refresh button click
         onExport: (format: string) => console.log('Story: Export clicked', format),
         onFullscreen: (isFullscreen: boolean) =>
           console.log('Story: Fullscreen toggled', isFullscreen),
@@ -440,39 +449,58 @@ export const ChartGallery: Story = {
 
       // Custom toolbar with chart controls
       const customToolbar = (
-        <div className="u-flex u-gap-2 u-items-center u-flex-wrap u-mb-5">
-          <div className="u-border-start u-ps-2 u-flex u-gap-2 u-items-center">
-            {/* Data Points Control */}
-            <div className="u-flex u-items-center u-gap-1">
-              <Icon name="Database" size="sm" />
+        <div className="u-flex u-gap-4 u-items-center u-flex-wrap u-mb-5 u-p-3">
+          {/* Data Control Group */}
+          <div className="u-flex u-items-center u-gap-3">
+            <div className="u-flex u-items-center u-gap-2">
+              <Icon name="Database" size="sm" className="u-text-muted" />
               <input
                 type="range"
                 min="4"
                 max="20"
                 value={dataPoints}
                 onChange={e => setDataPoints(Number(e.target.value))}
-                className="u-w-16"
+                className="u-w-25"
                 title="Adjust data points"
               />
               <Badge label={dataPoints.toString()} variant="info" size="sm" />
             </div>
 
-            {/* Legend Toggle */}
             <Button
               size="sm"
-              variant={showLegend ? 'info' : 'secondary'}
+              variant="secondary"
+              onClick={() => setDataSeed(s => s + 1)}
+              iconName="ArrowsClockwise"
+              label="Regenerate"
+            />
+          </div>
+
+          <div className="u-flex-1" />
+
+          {/* View Toggles Group */}
+          <div className="u-flex u-gap-2">
+            <Button
+              size="sm"
+              variant={showLegend ? 'primary' : 'secondary'}
               onClick={() => setShowLegend(!showLegend)}
-              icon={<Icon name="List" />}
-              label={`${showLegend ? 'Hide' : 'Show'} legend`}
+              iconName="List"
+              label="Legend"
             />
 
-            {/* Animation Toggle */}
             <Button
               size="sm"
-              variant={animated ? 'success' : 'secondary'}
+              variant={animated ? 'primary' : 'secondary'}
               onClick={() => setAnimated(!animated)}
-              icon={<Icon name="Sparkle" />}
-              label={`${animated ? 'Disable' : 'Enable'} animations`}
+              iconName="Sparkle"
+              label="Animations"
+            />
+
+            <Button
+              size="sm"
+              variant={glassEffect ? 'primary' : 'secondary'}
+              onClick={() => setGlassEffect(!glassEffect)}
+              iconName="Drop"
+              label="Glass"
             />
           </div>
         </div>
@@ -481,93 +509,84 @@ export const ChartGallery: Story = {
       switch (selectedType) {
         case 'line':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <LineChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'area':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <AreaChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'bar':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <BarChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'pie':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
-              <PieChart
-                datasets={[{ label: 'Distribution', data: generateData(6) }]}
-                {...commonProps}
-              />
+              <PieChart datasets={pieDatasets} {...commonProps} />
             </div>
           );
         case 'donut':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
-              <DonutChart
-                datasets={[{ label: 'Distribution', data: generateData(6) }]}
-                {...commonProps}
-              />
+              <DonutChart datasets={pieDatasets} {...commonProps} />
             </div>
           );
         case 'scatter':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <ScatterChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'radar':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <RadarChart datasets={dynamicDatasets} {...commonProps} />
             </div>
           );
         case 'bubble':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
-              <BubbleChart bubbleData={generateBubbleData(dataPoints)} {...commonProps} />
+              <BubbleChart bubbleData={bubbleData} {...commonProps} />
             </div>
           );
         case 'gauge':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <GaugeChart value={75} max={100} {...commonProps} />
             </div>
           );
         case 'heatmap':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
-              <HeatmapChart data={generateHeatmapData()} {...commonProps} />
+              <HeatmapChart data={heatmapData} {...commonProps} />
             </div>
           );
         case 'candlestick':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
-              <CandlestickChart
-                candlestickData={generateCandlestickData(dataPoints)}
-                {...commonProps}
-              />
+              <CandlestickChart candlestickData={candlestickData} {...commonProps} />
             </div>
           );
         case 'waterfall':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <WaterfallChart
                 waterfallData={[
@@ -583,10 +602,10 @@ export const ChartGallery: Story = {
           );
         case 'funnel':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <FunnelChart
-                funnelData={generateFunnelData()}
+                funnelData={funnelData}
                 funnelOptions={{
                   showLabels: true,
                   showValues: true,
@@ -601,10 +620,10 @@ export const ChartGallery: Story = {
           );
         case 'treemap':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <TreemapChart
-                data={generateTreemapData(Math.min(dataPoints, 20))}
+                data={treemapData}
                 algorithm="squarified"
                 colorConfig={{ scheme: 'category' }}
                 labelConfig={{
@@ -617,16 +636,9 @@ export const ChartGallery: Story = {
               />
             </div>
           );
-        case 'animated':
-          return (
-            <div>
-              {customToolbar}
-              <AnimatedChart datasets={dynamicDatasets} {...commonProps} />
-            </div>
-          );
         case 'multiaxis':
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <MultiAxisChart
                 datasets={dynamicDatasets.map((d, i) => ({ ...d, yAxisId: `axis${i}` }))}
@@ -641,7 +653,7 @@ export const ChartGallery: Story = {
           );
         default:
           return (
-            <div>
+            <div className="u-h-100 u-flex u-flex-column">
               {customToolbar}
               <LineChart datasets={dynamicDatasets} {...commonProps} />
             </div>

package/src/components/Chart/ChartToolbar.tsx

@@ -1,8 +1,9 @@
-import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CHART } from '../../lib/constants/components';
 import { Icon } from '../Icon';
 import type { PhosphorIconsType } from '../Icon/Icon';
 import { ChartType } from './types';
+import { Variant } from '../../lib/types/components';
 
 export interface ChartToolbarAction {
   id: string;
@@ -11,7 +12,7 @@ export interface ChartToolbarAction {
   onClick: () => void;
   disabled?: boolean;
   active?: boolean;
-  variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+  variant?: Variant;
   tooltip?: string;
   shortcut?: string;
 }
@@ -155,7 +156,7 @@ const ChartToolbar = memo(
       const settingsButtonRef = useRef<HTMLButtonElement>(null);
 
       // Compute effective defaults based on provided groups
-      const effectiveDefaults =
+      const effectiveDefaults = useMemo(() => (
         groups && groups.length > 0
           ? {
               refresh: defaults.refresh ?? true,
@@ -172,7 +173,8 @@ const ChartToolbar = memo(
               tooltips: defaults.tooltips ?? true,
               animations: defaults.animations ?? true,
             }
-          : defaults;
+          : defaults
+      ), [groups, defaults]);
 
       // Close menus when clicking outside
       useEffect(() => {

package/src/components/Chart/ChartTooltip.tsx

@@ -63,15 +63,16 @@ const ChartTooltip = memo<ChartTooltipProps>(
         ref={tooltipRef}
         className="c-chart__tooltip"
         style={{
-          left: `${adjustedPosition.x}px`,
-          top: `${adjustedPosition.y}px`,
+          transform: `translate3d(${adjustedPosition.x}px, ${adjustedPosition.y}px, 0)`,
           opacity: visible ? 1 : 0,
           visibility: visible ? 'visible' : 'hidden',
-          transition: 'opacity 0.2s ease, transform 0.2s ease',
-          transform: 'translateZ(0)',
+          transition: 'opacity 0.2s ease',
           position: 'fixed',
+          left: 0,
+          top: 0,
           zIndex: 1000,
           pointerEvents: 'none',
+          willChange: 'transform',
         }}
       >
         {customRenderer ? (

package/src/components/Chart/GaugeChart.tsx

@@ -208,11 +208,13 @@ const GaugeChart = memo(
         // Create ticks
         const ticks = [];
         if (showTicks) {
+          const innerRadius = radius * (1 - thickness);
+          
           // Major ticks
           for (let i = 0; i <= majorTicks; i++) {
             const tickValue = min + (max - min) * (i / majorTicks);
             const tickAngle = startAngleRad + (i / majorTicks) * angleRange;
-            const tickRadius = radius * 0.95;
+            const tickRadius = innerRadius - 2;
             const tickLength = radius * 0.05;
             const x1 = centerX + tickRadius * Math.cos(tickAngle);
             const y1 = centerY + tickRadius * Math.sin(tickAngle);
@@ -233,8 +235,9 @@ const GaugeChart = memo(
 
             // Labels for major ticks
             if (showMinMaxLabels) {
-              const labelX = centerX + (tickRadius - tickLength - 10) * Math.cos(tickAngle);
-              const labelY = centerY + (tickRadius - tickLength - 10) * Math.sin(tickAngle);
+              const labelRadius = tickRadius - tickLength - 15;
+              const labelX = centerX + labelRadius * Math.cos(tickAngle);
+              const labelY = centerY + labelRadius * Math.sin(tickAngle);
 
               ticks.push(
                 <text
@@ -242,7 +245,7 @@ const GaugeChart = memo(
                   x={labelX}
                   y={labelY}
                   textAnchor="middle"
-                  dominantBaseline="middle"
+                  dominantBaseline="central"
                   fontSize="12"
                   fill="var(--atomix-brand-text-emphasis)"
                 >
@@ -253,9 +256,11 @@ const GaugeChart = memo(
           }
 
           // Minor ticks
-          for (let i = 0; i < majorTicks * minorTicks; i++) {
+          for (let i = 0; i <= majorTicks * minorTicks; i++) {
+            if (i % minorTicks === 0) continue;
+            
             const tickAngle = startAngleRad + (i / (majorTicks * minorTicks)) * angleRange;
-            const tickRadius = radius * 0.95;
+            const tickRadius = innerRadius - 2;
             const tickLength = radius * 0.025;
             const x1 = centerX + tickRadius * Math.cos(tickAngle);
             const y1 = centerY + tickRadius * Math.sin(tickAngle);
@@ -276,19 +281,22 @@ const GaugeChart = memo(
           }
         }
 
+        const innerRadius = radius * (1 - thickness);
+
         // Create needle
         const needle = showNeedle ? (
           <g>
             <line
               x1={centerX}
               y1={centerY}
-              x2={centerX + radius * 0.8 * Math.cos(valueAngle)}
-              y2={centerY + radius * 0.8 * Math.sin(valueAngle)}
+              x2={centerX + (innerRadius - 15) * Math.cos(valueAngle)}
+              y2={centerY + (innerRadius - 15) * Math.sin(valueAngle)}
               stroke={needleColor}
-              strokeWidth="3"
+              strokeWidth="4"
               strokeLinecap="round"
             />
             <circle cx={centerX} cy={centerY} r="8" fill={needleColor} />
+            <circle cx={centerX} cy={centerY} r="3" fill="var(--atomix-primary-bg, #fff)" />
           </g>
         ) : null;
 
@@ -296,9 +304,9 @@ const GaugeChart = memo(
         const valueText = showValue ? (
           <text
             x={centerX}
-            y={centerY + 10}
+            y={centerY + 35}
             textAnchor="middle"
-            fontSize="24"
+            fontSize="32"
             fontWeight="bold"
             fill="var(--atomix-primary-text-emphasis)"
           >
@@ -310,7 +318,7 @@ const GaugeChart = memo(
         const labelText = label ? (
           <text
             x={centerX}
-            y={labelPosition === 'top' ? centerY - radius * 0.7 : centerY + radius * 0.7}
+            y={labelPosition === 'top' ? centerY - radius * 0.7 : centerY + radius * 0.7 + 10}
             textAnchor="middle"
             fontSize="16"
             fill="var(--atomix-brand-text-emphasis)"