@shohojdhara/atomix 0.4.5 → 0.4.7

package/src/components/Chart/HeatmapChart.tsx

@@ -174,12 +174,10 @@ const HeatmapChart = memo(
         data = [],
         config = {},
         colorScale = {
-          scheme: 'viridis',
+          scheme: 'blues',
           steps: 9,
         },
         cellConfig = {
-          width: 40,
-          height: 40,
           spacing: 2,
           borderRadius: 4,
           showLabels: false,
@@ -272,16 +270,38 @@ const HeatmapChart = memo(
           return null;
         }
 
-        const cellWidth = cellConfig.width || 40;
-        const cellHeight = cellConfig.height || 40;
-        const spacing = cellConfig.spacing || 2;
-        const borderRadius = cellConfig.borderRadius || 4;
+        const spacing = cellConfig.spacing ?? 2;
+        const borderRadius = cellConfig.borderRadius ?? 4;
 
-        const totalWidth = xLabels.length * (cellWidth + spacing) - spacing;
-        const totalHeight = yLabels.length * (cellHeight + spacing) - spacing;
+        // Container dimensions
+        const { width, height } = scales;
 
-        const startX = 100; // Leave space for y-axis labels
-        const startY = 50; // Leave space for x-axis labels
+        // Layout padding and spacing
+        const paddingLeft = 60; // Space for Y-axis labels
+        const paddingBottom = 40; // Space for X-axis labels
+        const legendWidth = showColorLegend ? 60 : 0;
+        const paddingRight = legendWidth + 20; 
+        const paddingTop = 20;
+
+        const availableWidth = Math.max(0, width - paddingLeft - paddingRight);
+        const availableHeight = Math.max(0, height - paddingTop - paddingBottom);
+
+        const cols = Math.max(1, xLabels.length);
+        const rows = Math.max(1, yLabels.length);
+
+        // Dynamically compute max cell dimensions that fit the available space
+        const maxCellWidth = Math.max(2, Math.floor((availableWidth - (cols - 1) * spacing) / cols));
+        const maxCellHeight = Math.max(2, Math.floor((availableHeight - (rows - 1) * spacing) / rows));
+
+        const cellWidth = cellConfig.width || maxCellWidth;
+        const cellHeight = cellConfig.height || maxCellHeight;
+
+        const totalWidth = cols * cellWidth + (cols - 1) * spacing;
+        const totalHeight = rows * cellHeight + (rows - 1) * spacing;
+
+        // Center the heatmap chart within the available area
+        const startX = paddingLeft + Math.max(0, (availableWidth - totalWidth) / 2);
+        const startY = paddingTop + Math.max(0, (availableHeight - totalHeight) / 2);
 
         return (
           <>
@@ -333,11 +353,6 @@ const HeatmapChart = memo(
                         ry={borderRadius}
                         fill={color}
                         className={`c-chart__heatmap-cell ${isHovered ? 'c-chart__heatmap-cell--hovered' : ''}`}
-                        style={{
-                          transition: 'all 0.2s ease',
-                          transform: isHovered ? 'scale(1.05)' : 'scale(1)',
-                          transformOrigin: 'center',
-                        }}
                         onClick={() => {
                           if (cell) {
                             handlers.onDataPointClick?.(
@@ -353,8 +368,21 @@ const HeatmapChart = memo(
                         }}
                         onMouseEnter={e => {
                           setHoveredCell(cell);
+                          const pointIndex = data.findIndex(d => d.x === cell.x && d.y === cell.y);
+                          const rect = e.currentTarget.getBoundingClientRect();
+                          handlers.onPointHover(
+                            0, // datasetIndex is always 0 for Heatmap
+                            pointIndex >= 0 ? pointIndex : 0,
+                            x,
+                            y,
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2
+                          );
+                        }}
+                        onMouseLeave={() => {
+                          setHoveredCell(null);
+                          handlers.onPointLeave();
                         }}
-                        onMouseLeave={() => setHoveredCell(null)}
                       />
                       {cellConfig.showLabels && cell.label && (
                         <text
@@ -411,23 +439,25 @@ const HeatmapChart = memo(
 
               {/* Color legend */}
               {showColorLegend && (
-                <g transform="translate(600, 100)">
+                <g transform={`translate(${startX + totalWidth + 20}, ${startY})`}>
                   <rect
                     x="0"
                     y="0"
-                    width="20"
-                    height="200"
+                    width="12"
+                    height={totalHeight}
                     fill="url(#heatmap-legend-gradient)"
                     stroke="var(--atomix-border-color)"
                     className="c-chart__grid"
+                    rx={borderRadius}
+                    ry={borderRadius}
                   />
-                  <text x="-10" y="-10" className="c-chart__heatmap-legend-title">
+                  <text x="-5" y="-10" className="c-chart__heatmap-legend-title">
                     Values
                   </text>
-                  <text x="25" y="5" textAnchor="start" className="c-chart__heatmap-legend-label">
+                  <text x="20" y="8" textAnchor="start" className="c-chart__heatmap-legend-label">
                     High
                   </text>
-                  <text x="25" y="200" textAnchor="start" className="c-chart__heatmap-legend-label">
+                  <text x="20" y={totalHeight} textAnchor="start" className="c-chart__heatmap-legend-label">
                     Low
                   </text>
                 </g>

package/src/components/Chart/TreemapChart.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
 import BaseChart from './BaseChart';
+import ChartTooltip from './ChartTooltip';
 import { ChartProps } from '../../lib/types/components';
 import { ChartRenderContentParams } from './types';
 
@@ -103,7 +104,6 @@ const DEFAULT_LABEL_CONFIG = {
   showLabels: true,
   minSize: 1000,
   fontSize: 12,
-  textColor: 'white',
 };
 const DEFAULT_CONFIG = {};
 
@@ -254,6 +254,7 @@ const TreemapChart = memo(
           let currentY = y;
           let remainingWidth = width;
           let remainingHeight = height;
+          let remainingValue = totalValue;
 
           while (remainingNodes.length > 0) {
             const node = remainingNodes.shift();
@@ -262,7 +263,7 @@ const TreemapChart = memo(
 
             // Calculate dimensions for current row
             const rowValue = currentRow.reduce((sum, n) => sum + n.value, 0);
-            const rowRatio = rowValue / totalValue;
+            const rowRatio = remainingValue > 0 ? rowValue / remainingValue : 0;
 
             let rowWidth, rowHeight;
             if (remainingWidth >= remainingHeight) {
@@ -280,7 +281,7 @@ const TreemapChart = memo(
               if (!nextNode) break;
               const testRow = [...currentRow, nextNode];
               const testRowValue = testRow.reduce((sum, n) => sum + n.value, 0);
-              const testRowRatio = testRowValue / totalValue;
+              const testRowRatio = remainingValue > 0 ? testRowValue / remainingValue : 0;
 
               let testRowWidth, testRowHeight;
               if (remainingWidth >= remainingHeight) {
@@ -352,6 +353,7 @@ const TreemapChart = memo(
                 remainingHeight -= rowHeight;
               }
 
+              remainingValue -= rowValue;
               currentRow = [];
             }
           }
@@ -366,15 +368,19 @@ const TreemapChart = memo(
           datasets: renderedDatasets,
           handlers,
           hoveredPoint,
+          toolbarState,
+          config: renderConfig,
         }: ChartRenderContentParams) => {
           if (!data.length) return null;
 
-          // Calculate available space with padding
-        const padding = 20;
-        const availableWidth = scales.width - padding * 2;
-        const availableHeight = scales.height - padding * 2;
-        const startX = padding;
-        const startY = padding;
+          const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
+
+          // Calculate available space
+        const gap = 2; // Gap size matched to the one added to rects
+        const availableWidth = Math.max(0, scales.width);
+        const availableHeight = Math.max(0, scales.height);
+        const startX = 0;
+        const startY = 0;
 
         // Get leaf nodes for treemap layout
         const leafNodes = data.filter(item => !item.children || item.children.length === 0);
@@ -428,10 +434,12 @@ const TreemapChart = memo(
               return (
                 <g key={node.id}>
                   <rect
-                    x={node.x}
-                    y={node.y}
-                    width={node.width}
-                    height={node.height}
+                    x={node.x + gap}
+                    y={node.y + gap}
+                    width={Math.max(0, node.width - gap * 2)}
+                    height={Math.max(0, node.height - gap * 2)}
+                    rx={6}
+                    ry={6}
                     fill={node.color}
                     className={`c-chart__treemap-node ${isHovered ? 'c-chart__treemap-node--hovered' : ''} ${isSelected ? 'c-chart__treemap-node--selected' : ''}`}
                     onClick={() => {
@@ -441,9 +449,10 @@ const TreemapChart = memo(
                     onMouseEnter={e => {
                       setHoveredNode(node);
                       const rect = e.currentTarget.getBoundingClientRect();
+                      const pointIndex = data.indexOf(node.originalData);
                       handlers.onPointHover(
                         0,
-                        0,
+                        pointIndex >= 0 ? pointIndex : 0,
                         node.x,
                         node.y,
                         rect.left + rect.width / 2,
@@ -462,7 +471,7 @@ const TreemapChart = memo(
                       textAnchor="middle"
                       dominantBaseline="middle"
                       className="c-chart__treemap-label"
-                      style={{ fontSize: labelConfig.fontSize, fill: labelConfig.textColor }}
+                      style={{ fontSize: labelConfig.fontSize }}
                     >
                       {node.label}
                     </text>
@@ -470,6 +479,26 @@ const TreemapChart = memo(
                 </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}
+                />
+              )}
             </>
           );
         },

package/src/components/Chart/index.ts

@@ -1,4 +1,3 @@
-import AnimatedChart from './AnimatedChart';
 import AreaChart from './AreaChart';
 import BarChart from './BarChart';
 import BaseChart from './BaseChart';
@@ -24,7 +23,6 @@ import * as ChartUtils from './utils';
 
 // Export all chart components
 export {
-  AnimatedChart,
   AreaChart,
   BarChart,
   BaseChart,

package/src/components/Chart/types.ts

@@ -263,7 +263,7 @@ export interface ChartProps extends BaseComponentProps {
     onClick: () => void;
     disabled?: boolean;
     active?: boolean;
-    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+    variant?: Variant;
     tooltip?: string;
   }>;
 
@@ -280,7 +280,7 @@ export interface ChartProps extends BaseComponentProps {
       onClick: () => void;
       disabled?: boolean;
       active?: boolean;
-      variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+      variant?: Variant;
       tooltip?: string;
     }>;
     separator?: boolean;
@@ -403,7 +403,7 @@ export interface ChartToolbarConfig {
     onClick: () => void;
     disabled?: boolean;
     active?: boolean;
-    variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+    variant?: Variant;
     tooltip?: string;
   }>;
   customGroups?: Array<{
@@ -416,7 +416,7 @@ export interface ChartToolbarConfig {
       onClick: () => void;
       disabled?: boolean;
       active?: boolean;
-      variant?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error';
+      variant?: Variant;
       tooltip?: string;
     }>;
     separator?: boolean;

package/src/components/Navigation/Navbar/Navbar.tsx

@@ -152,15 +152,23 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
         shaderVariant: 'premiumGlass' as const,
       };
       const glassProps = glass === true ? defaultGlassProps : { ...defaultGlassProps, ...glass };
+
+      // AtomixGlass hoists layout props (position/top/left/right/zIndex) to its
+      // root element, keeping all internal layers in the same stacking context.
+      const isFixed = position === 'fixed' || position === 'fixed-bottom';
+
       return (
         <AtomixGlass
           {...glassProps}
           style={{
-            ...(position === 'fixed' && { position: 'fixed' }),
-            left: 0,
-            right: 0,
-            top: 0,
-            zIndex: 1000,
+            ...(isFixed && {
+              position: 'fixed' as const,
+              top: position === 'fixed' ? 0 : undefined,
+              bottom: position === 'fixed-bottom' ? 0 : undefined,
+              left: 0,
+              right: 0,
+              zIndex: 1030, // matches --atomix-navbar-z-index from _components.navbar.scss
+            }),
           }}
         >
           <nav

package/src/components/index.ts

@@ -15,7 +15,6 @@ export { default as Card, type CardProps } from './Card/Card';
 // Card sub-components
 export { default as ElevationCard, type ElevationCardProps } from './Card/ElevationCard';
 export {
-  AnimatedChart,
   AreaChart,
   BarChart,
   BubbleChart,

package/src/lib/composables/index.ts

@@ -29,8 +29,7 @@ export * from './useTodo';
 export * from './useForm';
 export * from './useFormGroup';
 
-// GlassContainer composables
-export * from './useGlassContainer';
+// AtomixGlass composables
 export * from './useAtomixGlass';
 export * from './useInput';
 export * from './useRadio';