@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Chart/PieChart.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, memo, useCallback } from 'react';
+import { forwardRef, memo } from 'react';
 import { PieChartOptions, usePieChart } from '../../lib/composables/usePieChart';
-import Chart from './Chart';
+import BaseChart from './BaseChart';
 import ChartTooltip from './ChartTooltip';
-import { ChartProps } from './types';
+import { ChartDataPoint, ChartProps, ChartRenderContentParams } from './types';
 
 interface PieChartProps extends Omit<ChartProps, 'type'> {
   /**
@@ -25,74 +25,124 @@ const PieChart = memo(
         selectedSlices,
       } = usePieChart(data, pieOptions);
 
-      const renderContent = useCallback(() => {
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
         if (!slices.length) return null;
 
-        return slices.map((slice, index) => {
-          const isHovered = hoveredSlice === index;
-          const isSelected = selectedSlices.has(index);
+        // Use actual container dimensions from scales
+        const width = scales.width;
+        const height = scales.height;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const outerRadius = (Math.min(width, height) / 2) * 0.8;
 
-          return (
-            <g key={`slice-${index}`}>
-              <path
-                d={slice.path}
-                fill={slice.color}
-                className={`c-chart__pie-slice ${isHovered ? 'c-chart__pie-slice--hovered' : ''} ${isSelected ? 'c-chart__pie-slice--selected' : ''}`}
-                onClick={() => {
-                  handleSliceClick(index);
-                  onDataPointClick?.(slice.dataPoint, 0, index);
-                }}
-                onMouseEnter={e => {
-                  const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
-                  const clientX = rect ? rect.left + slice.labelPosition.x : e.clientX;
-                  const clientY = rect ? rect.top + slice.labelPosition.y : e.clientY;
-                  handleSliceHover(index, clientX, clientY);
+        // Recalculate slices with actual dimensions
+        const recalculatedSlices = slices.map(slice => {
+          // Recalculate path with actual center and radius
+          const outerStartX = centerX + outerRadius * Math.cos(slice.startAngle);
+          const outerStartY = centerY + outerRadius * Math.sin(slice.startAngle);
+          const outerEndX = centerX + outerRadius * Math.cos(slice.endAngle);
+          const outerEndY = centerY + outerRadius * Math.sin(slice.endAngle);
+
+          const angle = slice.endAngle - slice.startAngle;
+          const largeArcFlag = angle > Math.PI ? 1 : 0;
+
+          const path = [
+            `M ${centerX},${centerY}`,
+            `L ${outerStartX},${outerStartY}`,
+            `A ${outerRadius},${outerRadius} 0 ${largeArcFlag},1 ${outerEndX},${outerEndY}`,
+            'Z',
+          ].join(' ');
+
+          // Recalculate label position
+          const labelRadius = outerRadius * 0.7;
+          const labelX = centerX + labelRadius * Math.cos(slice.midAngle);
+          const labelY = centerY + labelRadius * Math.sin(slice.midAngle);
+
+          return {
+            ...slice,
+            path,
+            labelPosition: { x: labelX, y: labelY },
+          };
+        });
+
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
+
+        return (
+          <>
+            {recalculatedSlices.map((slice, index) => {
+              const isHovered = hoveredPoint?.pointIndex === index;
+
+              return (
+                <g key={`slice-${index}`}>
+                  <path
+                    d={slice.path}
+                    fill={slice.color}
+                    className={`c-chart__pie-slice ${isHovered ? 'c-chart__pie-slice--hovered' : ''}`}
+                    onClick={() => {
+                      handleSliceClick(index);
+                      handlers.onDataPointClick?.(slice.dataPoint, 0, index);
+                    }}
+                    onMouseEnter={e => {
+                      const rect = e.currentTarget.getBoundingClientRect();
+                      handlers.onPointHover(
+                        0,
+                        index,
+                        slice.labelPosition.x,
+                        slice.labelPosition.y,
+                        rect.left + rect.width / 2,
+                        rect.top + rect.height / 2
+                      );
+                    }}
+                    onMouseLeave={handlers.onPointLeave}
+                  />
+                  {pieOptions.showLabels && (
+                    <text
+                      x={slice.labelPosition.x}
+                      y={slice.labelPosition.y}
+                      textAnchor="middle"
+                      className="c-chart__pie-label"
+                    >
+                      {formatLabel(slice)}
+                    </text>
+                  )}
+                </g>
+              );
+            })}
+            {showTooltips && hoveredPoint && data[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={data[hoveredPoint.pointIndex] as ChartDataPoint}
+                datasetLabel={renderedDatasets[0]?.label}
+                datasetColor={slices[hoveredPoint.pointIndex]?.color}
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
                 }}
-                onMouseLeave={handleSliceLeave}
+                visible={true}
               />
-              {pieOptions.showLabels && (
-                <text
-                  x={slice.labelPosition.x}
-                  y={slice.labelPosition.y}
-                  textAnchor="middle"
-                  className="c-chart__pie-label"
-                >
-                  {formatLabel(slice)}
-                </text>
-              )}
-            </g>
-          );
-        });
-      }, [
-        slices,
-        hoveredSlice,
-        selectedSlices,
-        pieOptions.showLabels,
-        handleSliceClick,
-        handleSliceHover,
-        handleSliceLeave,
-        formatLabel,
-        onDataPointClick,
-      ]);
+            )}
+          </>
+        );
+      };
 
       return (
-        <Chart ref={ref} type="pie" datasets={datasets} config={config} {...props}>
-          <svg width="100%" height="100%" viewBox="0 0 800 400">
-            {renderContent()}
-          </svg>
-          {hoveredSlice !== null && data[hoveredSlice] && (
-            <ChartTooltip
-              dataPoint={data[hoveredSlice]}
-              datasetLabel={datasets[0]?.label}
-              datasetColor={slices[hoveredSlice]?.color}
-              position={{
-                x: slices[hoveredSlice]?.clientX || 0,
-                y: slices[hoveredSlice]?.clientY || 0,
-              }}
-              visible={true}
-            />
-          )}
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="pie"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )

package/src/components/Chart/RadarChart.tsx

@@ -1,8 +1,8 @@
-import { forwardRef, memo, ReactElement, useCallback, useState } from 'react';
-import { ChartProps } from '../../lib/types/components';
-import Chart from './Chart';
-import ChartRenderer from './ChartRenderer';
+import { forwardRef, memo, useState } from 'react';
+import BaseChart from './BaseChart';
 import ChartTooltip from './ChartTooltip';
+import { ChartProps } from '../../lib/types/components';
+import { ChartRenderContentParams, ChartDataset, ChartDataPoint } from './types';
 
 export interface RadarChartProps extends Omit<ChartProps, 'type'> {
   /**
@@ -78,251 +78,235 @@ const RadarChart = memo(
         scaleMax,
       } = radarOptions;
 
-      const [hoveredPoint, setHoveredPoint] = useState<{
-        datasetIndex: number;
-        pointIndex: number;
-        clientX: number;
-        clientY: number;
-      } | null>(null);
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
+        if (!renderedDatasets.length) return null;
 
-      const renderContent = useCallback(
-        ({
-          scales,
-          colors,
-          datasets: renderedDatasets,
-          handlers,
-        }: {
-          scales: any;
-          colors: any;
-          datasets: any;
-          handlers: any;
-        }) => {
-          if (!renderedDatasets.length) return null;
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
-          const centerX = scales.width / 2;
-          const centerY = scales.height / 2;
-          const radius = Math.min(centerX, centerY) * 0.8;
+        const centerX = scales.width / 2;
+        const centerY = scales.height / 2;
+        const radius = Math.min(centerX, centerY) * 0.8;
 
-          const firstDataset = renderedDatasets[0];
-          const dataPoints = firstDataset.data || [];
-          const angleStep = (2 * Math.PI) / dataPoints.length;
+        const firstDataset = renderedDatasets[0];
+        const dataPoints = firstDataset.data || [];
+        const angleStep = (2 * Math.PI) / dataPoints.length;
 
-          // Calculate scale
-          const maxValue =
-            scaleMax ||
-            Math.max(
-              ...renderedDatasets.flatMap((d: any) => d.data?.map((p: any) => p.value) || [])
-            );
-          const minValue = scaleMin;
-          const valueRange = maxValue - minValue;
+        // Calculate value bounds
+        let minValue = scaleMin;
+        let maxValue = scaleMax;
 
-          // Generate grid levels
-          const gridElements = [];
-          if (showGrid) {
-            for (let level = 1; level <= gridLevels; level++) {
-              const levelRadius = (radius * level) / gridLevels;
-              const points = dataPoints.map((_: any, i: number) => {
-                const angle = i * angleStep - Math.PI / 2;
-                return {
-                  x: centerX + Math.cos(angle) * levelRadius,
-                  y: centerY + Math.sin(angle) * levelRadius,
-                };
-              });
+        if (minValue === undefined || maxValue === undefined) {
+          const allValues = renderedDatasets.flatMap(
+            dataset => dataset.data?.map((d: any) => d.value) || []
+          );
+          if (minValue === undefined) minValue = Math.min(scaleMin, ...allValues);
+          if (maxValue === undefined) maxValue = Math.max(scaleMax || 0, ...allValues);
+        }
 
-              const pathData = `M ${points.map((p: any) => `${p.x},${p.y}`).join(' L ')} Z`;
+        const valueRange = maxValue - minValue;
 
-              gridElements.push(
-                <path
-                  key={`grid-${level}`}
-                  d={pathData}
-                  fill="none"
-                  className="c-chart__radar-grid"
-                />
-              );
-            }
+        // Generate grid lines
+        const gridLines = [];
+        if (showGrid) {
+          // Concentric circles
+          for (let i = 1; i <= gridLevels; i++) {
+            const r = (radius * i) / gridLevels;
+            gridLines.push(
+              <circle
+                key={`grid-circle-${i}`}
+                cx={centerX}
+                cy={centerY}
+                r={r}
+                className="c-chart__radar-grid-line"
+                fill="none"
+                stroke="var(--atomix-border-color)"
+                strokeWidth="1"
+              />
+            );
+          }
 
-            // Add axis lines
-            dataPoints.forEach((_: any, i: number) => {
-              const angle = i * angleStep - Math.PI / 2;
-              const endX = centerX + Math.cos(angle) * radius;
-              const endY = centerY + Math.sin(angle) * radius;
+          // Radial lines
+          for (let i = 0; i < dataPoints.length; i++) {
+            const angle = i * angleStep - Math.PI / 2;
+            const x = centerX + radius * Math.cos(angle);
+            const y = centerY + radius * Math.sin(angle);
 
-              gridElements.push(
-                <line
-                  key={`axis-${i}`}
-                  x1={centerX}
-                  y1={centerY}
-                  x2={endX}
-                  y2={endY}
-                  className="c-chart__radar-axis"
-                />
-              );
-            });
+            gridLines.push(
+              <line
+                key={`grid-radial-${i}`}
+                x1={centerX}
+                y1={centerY}
+                x2={x}
+                y2={y}
+                className="c-chart__radar-grid-line"
+                stroke="var(--atomix-border-color)"
+                strokeWidth="1"
+              />
+            );
           }
+        }
 
-          // Generate axis labels
-          const labelElements: ReactElement[] = [];
-          if (showAxisLabels) {
-            dataPoints.forEach((point: any, i: number) => {
-              const angle = i * angleStep - Math.PI / 2;
-              const labelRadius = radius + 20;
-              const labelX = centerX + Math.cos(angle) * labelRadius;
-              const labelY = centerY + Math.sin(angle) * labelRadius;
+        // Generate axis labels
+        const axisLabels = [];
+        if (showAxisLabels) {
+          for (let i = 0; i < dataPoints.length; i++) {
+            const angle = i * angleStep - Math.PI / 2;
+            const x = centerX + (radius + 20) * Math.cos(angle);
+            const y = centerY + (radius + 20) * Math.sin(angle);
 
-              labelElements.push(
-                <text
-                  key={`label-${i}`}
-                  x={labelX}
-                  y={labelY}
-                  textAnchor="middle"
-                  dominantBaseline="middle"
-                  className="c-chart__radar-label"
-                >
-                  {point.label}
-                </text>
-              );
-            });
+            axisLabels.push(
+              <text
+                key={`label-${i}`}
+                x={x}
+                y={y}
+                textAnchor="middle"
+                dominantBaseline="middle"
+                className="c-chart__radar-axis-label"
+              >
+                {dataPoints[i]?.label}
+              </text>
+            );
           }
+        }
+
+        // Generate data paths
+        const dataPaths = renderedDatasets.map((dataset: ChartDataset, datasetIndex: number) => {
+          const color = dataset.color || colors[datasetIndex % colors.length];
+          const points = [];
 
-          // Generate data paths
-          const dataElements = renderedDatasets.map((dataset: any, datasetIndex: number) => {
-            const color = dataset.color || colors[datasetIndex];
-            const points =
-              dataset.data?.map((point: any, i: number) => {
-                const angle = i * angleStep - Math.PI / 2;
-                const normalizedValue = (point.value - minValue) / valueRange;
-                const pointRadius = radius * normalizedValue;
-                return {
-                  x: centerX + Math.cos(angle) * pointRadius,
-                  y: centerY + Math.sin(angle) * pointRadius,
-                  originalPoint: point,
-                  angle,
-                  radius: pointRadius,
-                };
-              }) || [];
+          // Calculate points
+          for (let i = 0; i < dataset.data?.length; i++) {
+            const value = dataset.data[i]?.value || 0;
+            const normalizedValue = valueRange > 0 ? (value - minValue) / valueRange : 0;
+            const r = radius * normalizedValue;
+            const angle = i * angleStep - Math.PI / 2;
+            const x = centerX + r * Math.cos(angle);
+            const y = centerY + r * Math.sin(angle);
 
-            const pathData = smooth
-              ? generateSmoothRadarPath(points)
-              : `M ${points.map((p: any) => `${p.x},${p.y}`).join(' L ')} Z`;
+            points.push({ x, y, value, point: dataset.data[i] });
+          }
 
-            const elements = [];
+          if (points.length === 0) return null;
 
-            // Fill area
-            if (fillArea) {
-              elements.push(
+          // Generate path
+          let path = '';
+          if (smooth && points.length > 2) {
+            // For smooth curves, we would implement a more complex algorithm
+            // For now, we'll just connect the points with straight lines
+            path = `M ${points[0].x},${points[0].y}`;
+            for (let i = 1; i < points.length; i++) {
+              path += ` L ${points[i].x},${points[i].y}`;
+            }
+            path += ` L ${points[0].x},${points[0].y} Z`;
+          } else {
+            path = `M ${points[0].x},${points[0].y}`;
+            for (let i = 1; i < points.length; i++) {
+              path += ` L ${points[i].x},${points[i].y}`;
+            }
+            path += ` L ${points[0].x},${points[0].y} Z`;
+          }
+
+          return (
+            <g key={`dataset-${datasetIndex}`}>
+              {fillArea && (
                 <path
-                  key={`fill-${datasetIndex}`}
-                  d={pathData}
+                  d={path}
                   fill={color}
-                  className="c-chart__radar-fill"
-                  style={{ opacity: fillOpacity }}
+                  fillOpacity={fillOpacity}
+                  className="c-chart__radar-area"
                 />
-              );
-            }
-
-            // Line
-            elements.push(
+              )}
               <path
-                key={`line-${datasetIndex}`}
-                d={pathData}
+                d={path}
                 fill="none"
                 stroke={color}
+                strokeWidth={lineWidth}
                 className="c-chart__radar-line"
-                style={{ strokeWidth: lineWidth }}
               />
-            );
+              {showDataPoints &&
+                points.map((point, pointIndex) => {
+                  const isHovered =
+                    hoveredPoint?.datasetIndex === datasetIndex &&
+                    hoveredPoint?.pointIndex === pointIndex;
 
-            // Data points
-            if (showDataPoints) {
-              points.forEach((point: any, i: number) => {
-                elements.push(
-                  <circle
-                    key={`point-${datasetIndex}-${i}`}
-                    cx={point.x}
-                    cy={point.y}
-                    r={pointRadius}
-                    fill={color}
-                    className="c-chart__radar-point"
-                    onClick={() =>
-                      handlers.onDataPointClick?.(point.originalPoint, datasetIndex, i)
-                    }
-                    onMouseEnter={e => {
-                      const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
-                      const clientX = rect ? rect.left + point.x : e.clientX;
-                      const clientY = rect ? rect.top + point.y : e.clientY;
-                      setHoveredPoint({ datasetIndex, pointIndex: i, clientX, clientY });
-                    }}
-                    onMouseLeave={() => setHoveredPoint(null)}
-                  />
-                );
-              });
-            }
-
-            return <g key={`dataset-${datasetIndex}`}>{elements}</g>;
-          });
-
-          return (
-            <g>
-              {gridElements}
-              {dataElements}
-              {labelElements}
+                  return (
+                    <g key={`point-${datasetIndex}-${pointIndex}`}>
+                      <circle
+                        cx={point.x}
+                        cy={point.y}
+                        r={isHovered ? pointRadius * 1.5 : pointRadius}
+                        fill={color}
+                        className={`c-chart__radar-point ${isHovered ? 'c-chart__radar-point--hovered' : ''}`}
+                        onClick={() =>
+                          handlers.onDataPointClick?.(point.point, datasetIndex, pointIndex)
+                        }
+                        onMouseEnter={e => {
+                          const rect = e.currentTarget.getBoundingClientRect();
+                          handlers.onPointHover(
+                            datasetIndex,
+                            pointIndex,
+                            point.x,
+                            point.y,
+                            rect.left + rect.width / 2,
+                            rect.top + rect.height / 2
+                          );
+                        }}
+                        onMouseLeave={handlers.onPointLeave}
+                      />
+                    </g>
+                  );
+                })}
             </g>
           );
-        },
-        [
-          gridLevels,
-          showGrid,
-          showAxisLabels,
-          fillArea,
-          fillOpacity,
-          showDataPoints,
-          pointRadius,
-          lineWidth,
-          smooth,
-          scaleMin,
-          scaleMax,
-        ]
-      );
-
-      const generateSmoothRadarPath = useCallback((points: any[]) => {
-        if (points.length < 3) return `M ${points.map(p => `${p.x},${p.y}`).join(' L ')} Z`;
-
-        let path = `M ${points[0].x},${points[0].y}`;
-
-        for (let i = 0; i < points.length; i++) {
-          const current = points[i];
-          const next = points[(i + 1) % points.length];
-          const prev = points[i === 0 ? points.length - 1 : i - 1];
-
-          const cp1x = current.x + (next.x - prev.x) * 0.1;
-          const cp1y = current.y + (next.y - prev.y) * 0.1;
-          const cp2x = next.x - (points[(i + 2) % points.length].x - current.x) * 0.1;
-          const cp2y = next.y - (points[(i + 2) % points.length].y - current.y) * 0.1;
+        });
 
-          path += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${next.x},${next.y}`;
-        }
-
-        return path + ' Z';
-      }, []);
+        return (
+          <>
+            <g>
+              {gridLines}
+              {dataPaths}
+              {axisLabels}
+            </g>
+            {showTooltips && hoveredPoint && (
+              <ChartTooltip
+                dataPoint={
+                  renderedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]
+                }
+                datasetLabel={renderedDatasets[hoveredPoint.datasetIndex]?.label}
+                datasetColor={
+                  renderedDatasets[hoveredPoint.datasetIndex]?.color ||
+                  colors[hoveredPoint.datasetIndex]
+                }
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
+                }}
+                visible={true}
+              />
+            )}
+          </>
+        );
+      };
 
       return (
-        <Chart ref={ref} type="radar" datasets={datasets} config={config} {...props}>
-          <ChartRenderer
-            datasets={datasets}
-            config={config}
-            onDataPointClick={onDataPointClick}
-            renderContent={renderContent}
-          />
-          {hoveredPoint && (
-            <ChartTooltip
-              dataPoint={datasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex]!}
-              datasetLabel={datasets[hoveredPoint.datasetIndex]?.label}
-              datasetColor={datasets[hoveredPoint.datasetIndex]?.color}
-              position={{ x: hoveredPoint.clientX, y: hoveredPoint.clientY }}
-              visible={true}
-            />
-          )}
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="radar"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )