@shohojdhara/atomix 0.2.4 → 0.2.6

package/src/components/Chart/TreemapChart.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, memo, useCallback, useMemo, useState } from 'react';
+import BaseChart from './BaseChart';
 import { ChartProps } from '../../lib/types/components';
-import Chart from './Chart';
+import { ChartRenderContentParams } from './types';
 
 interface TreemapDataPoint {
   id: string;
@@ -51,27 +52,21 @@ interface TreemapChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
      */
     palette?: string[];
     /**
-     * Value-based color range
+     * Whether to use gradients
      */
-    valueRange?: [string, string];
+    useGradients?: boolean;
   };
 
-  /**
-   * Whether to show labels
-   */
-  showLabels?: boolean;
-
-  /**
-   * Whether to show values
-   */
-  showValues?: boolean;
-
   /**
    * Label configuration
    */
   labelConfig?: {
     /**
-     * Minimum cell size to show label
+     * Whether to show labels
+     */
+    showLabels?: boolean;
+    /**
+     * Minimum size for showing labels
      */
     minSize?: number;
     /**
@@ -81,50 +76,26 @@ interface TreemapChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
     /**
      * Text color
      */
-    color?: string;
+    textColor?: string;
   };
 
   /**
-   * Border configuration
+   * Interaction configuration
    */
-  borderConfig?: {
+  interactionConfig?: {
     /**
-     * Border width
+     * Whether to enable tooltips
      */
-    width?: number;
+    enableTooltips?: boolean;
     /**
-     * Border color
+     * Whether to enable zoom
      */
-    color?: string;
+    enableZoom?: boolean;
     /**
-     * Border radius
+     * Whether to enable selection
      */
-    radius?: number;
+    enableSelection?: boolean;
   };
-
-  /**
-   * Animation configuration
-   */
-  animationConfig?: {
-    /**
-     * Enable animations
-     */
-    enabled?: boolean;
-    /**
-     * Animation duration
-     */
-    duration?: number;
-    /**
-     * Animation easing
-     */
-    easing?: string;
-  };
-
-  /**
-   * Interaction handlers
-   */
-  onNodeClick?: (node: TreemapNode) => void;
-  onNodeHover?: (node: TreemapNode | null) => void;
 }
 
 const TreemapChart = memo(
@@ -134,25 +105,13 @@ const TreemapChart = memo(
         data = [],
         algorithm = 'squarified',
         colorConfig = { scheme: 'category' },
-        showLabels = true,
-        showValues = false,
         labelConfig = {
+          showLabels: true,
           minSize: 1000,
           fontSize: 12,
-          color: 'white',
+          textColor: 'white',
         },
-        borderConfig = {
-          width: 1,
-          color: 'white',
-          radius: 2,
-        },
-        animationConfig = {
-          enabled: true,
-          duration: 750,
-          easing: 'ease-out',
-        },
-        onNodeClick,
-        onNodeHover,
+        onDataPointClick,
         config = {},
         ...props
       },
@@ -162,7 +121,6 @@ const TreemapChart = memo(
       const [selectedNode, setSelectedNode] = useState<TreemapNode | null>(null);
       const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
 
-      // Build hierarchical tree structure
       const treeData = useMemo(() => {
         console.log('TreemapChart data:', data);
         if (!data.length) {
@@ -219,19 +177,19 @@ const TreemapChart = memo(
         (node: TreemapDataPoint, depth: number, index: number) => {
           if (node.color) return node.color;
 
-          const { scheme, palette, valueRange } = colorConfig;
+          const { scheme, palette } = colorConfig;
 
           const defaultPalette = [
-            '#3b82f6',
-            '#ef4444',
-            '#10b981',
-            '#f59e0b',
-            '#8b5cf6',
-            '#06b6d4',
-            '#84cc16',
-            '#f97316',
-            '#ec4899',
-            '#6366f1',
+            'var(--atomix-primary)',
+            'var(--atomix-error)',
+            'var(--atomix-success)',
+            'var(--atomix-warning)',
+            'var(--atomix-primary-5)',
+            'var(--atomix-info)',
+            'var(--atomix-success-5)',
+            'var(--atomix-warning-7)',
+            'var(--atomix-primary-3)',
+            'var(--atomix-primary-7)',
           ];
 
           const colors = palette || defaultPalette;
@@ -240,14 +198,19 @@ const TreemapChart = memo(
             case 'category':
               return colors[index % colors.length];
             case 'depth':
-              const depthColors = ['#1e40af', '#3b82f6', '#60a5fa', '#93c5fd', '#dbeafe'];
+              const depthColors = [
+                'var(--atomix-blue-9)',
+                'var(--atomix-blue-6)',
+                'var(--atomix-blue-5)',
+                'var(--atomix-blue-4)',
+                'var(--atomix-blue-2)',
+              ];
               return depthColors[Math.min(depth, depthColors.length - 1)];
             case 'value':
-              if (valueRange && treeData) {
+              if (data.length > 0) {
                 const maxValue = Math.max(...data.map(d => d.value));
                 const minValue = Math.min(...data.map(d => d.value));
                 const ratio = (node.value - minValue) / (maxValue - minValue);
-                // Simple interpolation between two colors
                 return `hsl(${220 + ratio * 100}, 70%, ${30 + ratio * 40}%)`;
               }
               return colors[0];
@@ -255,7 +218,7 @@ const TreemapChart = memo(
               return colors[index % colors.length];
           }
         },
-        [colorConfig, data, treeData]
+        [colorConfig, data]
       );
 
       // Squarified treemap algorithm
@@ -393,177 +356,139 @@ const TreemapChart = memo(
         []
       );
 
-      // Build treemap layout
-      const treemapNodes = useMemo(() => {
-        if (!data.length) return [];
-
-        // Simple flat layout for leaf nodes only
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+      }: 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;
+
+        // Get leaf nodes for treemap layout
         const leafNodes = data.filter(item => !item.children || item.children.length === 0);
-        const totalValue = leafNodes.reduce((sum, node) => sum + node.value, 0);
-
-        let currentX = 0;
-        let currentY = 0;
-        const nodeWidth = 800 / Math.ceil(Math.sqrt(leafNodes.length));
-        const nodeHeight = 600 / Math.ceil(Math.sqrt(leafNodes.length));
-
-        return leafNodes.map((item, index) => {
-          const node: TreemapNode = {
-            id: item.id,
-            label: item.label,
-            value: item.value,
-            color: generateColor(item, 0, index) || 'transparent',
-            x: currentX,
-            y: currentY,
-            width: nodeWidth,
-            height: nodeHeight,
-            depth: 0,
-            children: [],
-            originalData: item,
-          };
-
-          currentX += nodeWidth;
-          if (currentX >= 800) {
-            currentX = 0;
-            currentY += nodeHeight;
-          }
-
-          return node;
-        });
-      }, [data, generateColor]);
-
-      // Handle node interactions
-      const handleNodeClick = useCallback(
-        (node: TreemapNode) => {
-          setSelectedNode(node);
-          onNodeClick?.(node);
-        },
-        [onNodeClick]
-      );
+        if (!leafNodes.length) return null;
 
-      const handleNodeHover = useCallback(
-        (node: TreemapNode | null, event?: React.MouseEvent) => {
-          setHoveredNode(node);
-          onNodeHover?.(node);
-
-          if (event && node) {
-            const rect = event.currentTarget.getBoundingClientRect();
-            setTooltipPosition({
-              x: event.clientX,
-              y: event.clientY,
-            });
-          }
-        },
-        [onNodeHover]
-      );
+        const totalValue = leafNodes.reduce((sum, node) => sum + node.value, 0);
 
-      // Render treemap content
-      const renderContent = useCallback(() => {
-        if (!treemapNodes.length) return null;
+        // Create treemap nodes with proper dimensions
+        const treemapNodes: TreemapNode[] = leafNodes.map((item, index) => ({
+          id: item.id,
+          label: item.label,
+          value: item.value,
+          color: generateColor(item, 0, index) || 'transparent',
+          x: 0, // Will be calculated by squarify
+          y: 0, // Will be calculated by squarify
+          width: 0, // Will be calculated by squarify
+          height: 0, // Will be calculated by squarify
+          depth: 0,
+          children: [],
+          originalData: item,
+        }));
+
+        // Apply squarified algorithm to layout nodes proportionally by value
+        if (algorithm === 'squarified' && totalValue > 0) {
+          squarify(treemapNodes, startX, startY, availableWidth, availableHeight);
+        } else {
+          // Fallback: simple grid layout (equal sizes)
+          const cols = Math.ceil(Math.sqrt(leafNodes.length));
+          const rows = Math.ceil(leafNodes.length / cols);
+          const nodeWidth = availableWidth / cols;
+          const nodeHeight = availableHeight / rows;
+
+          treemapNodes.forEach((node, index) => {
+            const col = index % cols;
+            const row = Math.floor(index / cols);
+            node.x = startX + col * nodeWidth;
+            node.y = startY + row * nodeHeight;
+            node.width = nodeWidth;
+            node.height = nodeHeight;
+          });
+        }
 
         return (
-          <g>
+          <>
             {treemapNodes.map(node => {
               const isHovered = hoveredNode === node;
               const isSelected = selectedNode === node;
               const area = node.width * node.height;
-              const showLabel = showLabels && area >= (labelConfig.minSize || 1000);
+              const showLabel = labelConfig.showLabels && area >= (labelConfig.minSize || 1000);
 
               return (
                 <g key={node.id}>
-                  {/* Node rectangle */}
                   <rect
                     x={node.x}
                     y={node.y}
                     width={node.width}
                     height={node.height}
                     fill={node.color}
-                    rx={borderConfig.radius || 2}
-                    className={`c-chart__treemap-node ${isHovered ? 'c-chart__treemap-node--hovered' : ''} ${isSelected ? 'c-chart__treemap-node--selected' : ''} ${animationConfig.enabled ? 'c-chart__treemap-node--animated' : ''}`}
-                    onMouseEnter={e => handleNodeHover(node, e)}
-                    onMouseLeave={() => handleNodeHover(null)}
-                    onClick={() => handleNodeClick(node)}
+                    className={`c-chart__treemap-node ${isHovered ? 'c-chart__treemap-node--hovered' : ''} ${isSelected ? 'c-chart__treemap-node--selected' : ''}`}
+                    onClick={() => {
+                      setSelectedNode(node);
+                      handlers.onDataPointClick?.(node.originalData, 0, 0);
+                    }}
+                    onMouseEnter={e => {
+                      setHoveredNode(node);
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      handlers.onPointHover(
+                        0,
+                        0,
+                        node.x,
+                        node.y,
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 2
+                      );
+                    }}
+                    onMouseLeave={() => {
+                      setHoveredNode(null);
+                      handlers.onPointLeave();
+                    }}
                   />
-
-                  {/* Node label */}
                   {showLabel && (
-                    <g>
-                      <text
-                        x={node.x + node.width / 2}
-                        y={node.y + node.height / 2 - (showValues ? 8 : 0)}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                        className="c-chart__treemap-label"
-                      >
-                        {node.label}
-                      </text>
-
-                      {showValues && (
-                        <text
-                          x={node.x + node.width / 2}
-                          y={node.y + node.height / 2 + 12}
-                          textAnchor="middle"
-                          dominantBaseline="middle"
-                          className="c-chart__treemap-value"
-                        >
-                          {node.value.toLocaleString()}
-                        </text>
-                      )}
-                    </g>
+                    <text
+                      x={node.x + node.width / 2}
+                      y={node.y + node.height / 2}
+                      textAnchor="middle"
+                      dominantBaseline="middle"
+                      className="c-chart__treemap-label"
+                      style={{ fontSize: labelConfig.fontSize, fill: labelConfig.textColor }}
+                    >
+                      {node.label}
+                    </text>
                   )}
                 </g>
               );
             })}
-          </g>
+          </>
         );
-      }, [
-        treemapNodes,
-        hoveredNode,
-        selectedNode,
-        showLabels,
-        showValues,
-        labelConfig,
-        borderConfig,
-        animationConfig,
-        handleNodeHover,
-        handleNodeClick,
-      ]);
+      };
+
+      // Convert data to datasets format for BaseChart
+      const datasets = [
+        {
+          label: 'Treemap Data',
+          data: data,
+        },
+      ];
 
       return (
-        <Chart ref={ref} type="treemap" datasets={[]} config={config} {...props}>
-          <svg
-            width={800}
-            height={600}
-            viewBox="0 0 800 600"
-            style={{ width: '100%', height: '100%' }}
-          >
-            {renderContent()}
-          </svg>
-
-          {hoveredNode && (
-            <div
-              className="c-chart__tooltip"
-              style={{
-                position: 'fixed',
-                left: tooltipPosition.x + 10,
-                top: tooltipPosition.y - 10,
-                transform: 'translateY(-100%)',
-                background: 'var(--atomix-gray-9)',
-                color: 'white',
-                padding: '8px 12px',
-                borderRadius: '6px',
-                fontSize: '12px',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
-                zIndex: 1000,
-                pointerEvents: 'none',
-              }}
-            >
-              <div>
-                <strong>{hoveredNode?.label}</strong>
-              </div>
-              <div>Value: {hoveredNode?.value.toLocaleString()}</div>
-            </div>
-          )}
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="treemap"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          interactive={true}
+          {...props}
+        />
       );
     }
   )