@shohojdhara/atomix 0.2.4 → 0.2.5

package/src/components/Chart/FunnelChart.tsx

@@ -1,7 +1,7 @@
-import { forwardRef, memo, ReactElement, useCallback } from 'react';
-import { ChartProps } from '../../lib/types/components';
-import Chart from './Chart';
-import ChartRenderer from './ChartRenderer';
+import { forwardRef, memo } from 'react';
+import BaseChart from './BaseChart';
+import ChartTooltip from './ChartTooltip';
+import { ChartProps, ChartRenderContentParams } from './types';
 
 export interface FunnelDataPoint {
   label: string;
@@ -58,11 +58,11 @@ export interface FunnelChartProps extends Omit<ChartProps, 'type' | 'datasets'>
      */
     colorScheme?: string[];
     /**
-     * Whether to use gradient fills
+     * Whether to use gradient
      */
     useGradient?: boolean;
     /**
-     * Whether to animate segments
+     * Whether to animate
      */
     animate?: boolean;
     /**
@@ -78,19 +78,19 @@ export interface FunnelChartProps extends Omit<ChartProps, 'type' | 'datasets'>
      */
     valueFormatter?: (value: number) => string;
     /**
-     * Whether to show conversion rates between segments
+     * Whether to show conversion rates
      */
     showConversionRates?: boolean;
     /**
      * Conversion rate position
      */
-    conversionRatePosition?: 'between' | 'inside';
+    conversionRatePosition?: 'between' | 'onSegment';
     /**
-     * Whether segments should be proportional to values
+     * Whether to use proportional segments
      */
     proportional?: boolean;
     /**
-     * Minimum segment height/width ratio
+     * Minimum segment ratio (0-1)
      */
     minSegmentRatio?: number;
   };
@@ -127,263 +127,192 @@ const FunnelChart = memo(
         minSegmentRatio = 0.1,
       } = funnelOptions;
 
-      const renderContent = useCallback(
-        ({ scales, colors, handlers }: { scales: any; colors: any; handlers: any }) => {
-          if (!funnelData.length) return null;
-
-          const padding = 60;
-          const chartWidth = scales.width - padding * 2;
-          const chartHeight = scales.height - padding * 2;
-
-          // Calculate percentages and conversion rates
-          const maxValue = Math.max(...funnelData.map(d => d.value));
-          const processedData = funnelData.map((item, index) => {
-            const percentage = (item.value / maxValue) * 100;
-            const conversionRate =
-              index > 0 && funnelData[index - 1]
-                ? (item.value / funnelData[index - 1]!.value) * 100
-                : 100;
-
-            return {
-              ...item,
-              percentage,
-              conversionRate,
-              index,
-            };
-          });
-
-          const elements: ReactElement[] = [];
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
+        if (!funnelData.length) return null;
+
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
+        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate;
+
+        const padding = 60;
+        const chartWidth = scales.width - padding * 2;
+        const chartHeight = scales.height - padding * 2;
+
+        // Calculate percentages and conversion rates
+        const maxValue = Math.max(...funnelData.map(d => d.value));
+        const processedData = funnelData.map((item, index) => {
+          const percentage = (item.value / maxValue) * 100;
+          const conversionRate =
+            index > 0 && funnelData[index - 1]
+              ? (item.value / funnelData[index - 1]!.value) * 100
+              : 100;
+
+          return {
+            ...item,
+            percentage,
+            conversionRate,
+            index,
+          };
+        });
+
+        const elements: React.ReactNode[] = [];
+
+        if (direction === 'vertical') {
+          // Vertical funnel
+          const segmentHeight =
+            (chartHeight - (funnelData.length - 1) * segmentGap) / funnelData.length;
+
+          processedData.forEach((item, index) => {
+            const y = padding + index * (segmentHeight + segmentGap);
+
+            // Calculate segment width based on value
+            let segmentWidth: number;
+            if (proportional) {
+              const ratio = Math.max(item.percentage / 100, minSegmentRatio);
+              segmentWidth = chartWidth * ratio;
+            } else {
+              // Linear decrease
+              const ratio = Math.max(
+                1 - (index / (funnelData.length - 1)) * (1 - neckWidth),
+                minSegmentRatio
+              );
+              segmentWidth = chartWidth * ratio;
+            }
 
-          if (direction === 'vertical') {
-            // Vertical funnel
-            const segmentHeight =
-              (chartHeight - (funnelData.length - 1) * segmentGap) / funnelData.length;
+            const x = padding + (chartWidth - segmentWidth) / 2;
 
-            processedData.forEach((item, index) => {
-              const y = padding + index * (segmentHeight + segmentGap);
+            // Determine color
+            let segmentColor = item.color || colorScheme[index % colorScheme.length];
 
-              // Calculate segment width based on value
-              let segmentWidth: number;
+            // Create trapezoid path
+            const nextItem = processedData[index + 1];
+            let nextWidth: number;
+            if (nextItem) {
               if (proportional) {
-                const ratio = Math.max(item.percentage / 100, minSegmentRatio);
-                segmentWidth = chartWidth * ratio;
+                const nextRatio = Math.max(nextItem.percentage / 100, minSegmentRatio);
+                nextWidth = chartWidth * nextRatio;
               } else {
-                // Linear decrease
-                const ratio = Math.max(
-                  1 - (index / (funnelData.length - 1)) * (1 - neckWidth),
+                const nextRatio = Math.max(
+                  1 - ((index + 1) / (funnelData.length - 1)) * (1 - neckWidth),
                   minSegmentRatio
                 );
-                segmentWidth = chartWidth * ratio;
-              }
-
-              const x = padding + (chartWidth - segmentWidth) / 2;
-
-              // Determine color
-              let segmentColor = item.color || colorScheme[index % colorScheme.length];
-
-              // Create gradient if enabled
-              if (useGradient) {
-                const gradientId = `funnel-gradient-${index}`;
-                elements.push(
-                  <defs key={`gradient-def-${index}`}>
-                    <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
-                      <stop offset="0%" stopColor={segmentColor} stopOpacity="0.8" />
-                      <stop offset="100%" stopColor={segmentColor} stopOpacity="1" />
-                    </linearGradient>
-                  </defs>
-                );
-                segmentColor = `url(#${gradientId})`;
-              }
-
-              // Create trapezoid path for funnel segment
-              let path: string;
-              if (index === funnelData.length - 1) {
-                // Last segment (rectangle)
-                path = `M ${x} ${y} L ${x + segmentWidth} ${y} L ${x + segmentWidth} ${y + segmentHeight} L ${x} ${y + segmentHeight} Z`;
-              } else {
-                // Calculate next segment width
-                const nextItem = processedData[index + 1];
-                let nextSegmentWidth: number;
-                if (proportional && nextItem) {
-                  const nextRatio = Math.max(nextItem.percentage / 100, minSegmentRatio);
-                  nextSegmentWidth = chartWidth * nextRatio;
-                } else {
-                  const nextRatio = Math.max(
-                    1 - ((index + 1) / (funnelData.length - 1)) * (1 - neckWidth),
-                    minSegmentRatio
-                  );
-                  nextSegmentWidth = chartWidth * nextRatio;
-                }
-
-                const nextX = padding + (chartWidth - nextSegmentWidth) / 2;
-
-                // Trapezoid path
-                path = `M ${x} ${y} L ${x + segmentWidth} ${y} L ${nextX + nextSegmentWidth} ${y + segmentHeight} L ${nextX} ${y + segmentHeight} Z`;
+                nextWidth = chartWidth * nextRatio;
               }
-
-              // Segment
-              elements.push(
+            } else {
+              nextWidth = segmentWidth * neckWidth;
+            }
+
+            const nextX = padding + (chartWidth - nextWidth) / 2;
+            const nextY = y + segmentHeight;
+
+            // Create trapezoid shape
+            const path = `
+              M ${x} ${y}
+              L ${x + segmentWidth} ${y}
+              L ${nextX + nextWidth} ${nextY}
+              L ${nextX} ${nextY}
+              Z
+            `;
+
+            elements.push(
+              <g key={`segment-${index}`}>
                 <path
-                  key={`segment-${index}`}
                   d={path}
                   fill={segmentColor}
-                  className={`c-chart__funnel-segment ${animate ? 'c-chart__funnel-segment--animated' : ''}`}
+                  className="c-chart__funnel-segment"
                   style={{
-                    animationDelay: animate ? `${index * animationDelay}ms` : '0ms',
+                    transition: animate
+                      ? `all ${animationDuration}ms cubic-bezier(0.25, 0.1, 0.25, 1) ${index * animationDelay}ms`
+                      : 'none',
                   }}
-                  onClick={() => handlers.onDataPointClick?.(item as any, 0, index)}
+                  onClick={() => handlers.onDataPointClick?.(item, 0, index)}
                 />
-              );
-
-              // Labels and values
-              if (showLabels || showValues || showPercentages) {
-                const centerX = padding + chartWidth / 2;
-                const centerY = y + segmentHeight / 2;
-
-                let labelX = centerX;
-                let valueX = centerX;
-
-                if (labelPosition === 'outside') {
-                  labelX = padding + chartWidth + 10;
-                  valueX = padding + chartWidth + 10;
-                }
-
-                let textElements = [];
-
-                if (showLabels) {
-                  textElements.push(
-                    <text
-                      key={`label-${index}`}
-                      x={labelX}
-                      y={centerY - 5}
-                      textAnchor={labelPosition === 'outside' ? 'start' : 'middle'}
-                      dominantBaseline="middle"
-                      className={`c-chart__funnel-label ${labelPosition === 'inside' ? 'c-chart__funnel-label--inside' : 'c-chart__funnel-label--outside'}`}
-                    >
-                      {item.label}
-                    </text>
-                  );
-                }
-
-                if (showValues || showPercentages) {
-                  let valueText = '';
-                  if (showValues && showPercentages) {
-                    valueText = `${valueFormatter(item.value)} (${item.percentage.toFixed(1)}%)`;
-                  } else if (showValues) {
-                    valueText = valueFormatter(item.value);
-                  } else {
-                    valueText = `${item.percentage.toFixed(1)}%`;
-                  }
-
-                  textElements.push(
-                    <text
-                      key={`value-${index}`}
-                      x={valueX}
-                      y={centerY + (showLabels ? 10 : 0)}
-                      textAnchor={labelPosition === 'outside' ? 'start' : 'middle'}
-                      dominantBaseline="middle"
-                      className={`c-chart__funnel-value ${labelPosition === 'inside' ? 'c-chart__funnel-value--inside' : 'c-chart__funnel-value--outside'}`}
-                    >
-                      {valueText}
-                    </text>
-                  );
-                }
-
-                elements.push(...textElements);
-              }
-
-              // Conversion rates
-              if (showConversionRates && index > 0) {
-                const conversionY =
-                  conversionRatePosition === 'between' ? y - segmentGap / 2 : y + segmentHeight / 2;
-
-                elements.push(
+                {(showLabels || showValues || showPercentages) && (
                   <text
-                    key={`conversion-${index}`}
-                    x={padding + chartWidth / 2}
-                    y={conversionY}
+                    x={x + segmentWidth / 2}
+                    y={y + segmentHeight / 2}
                     textAnchor="middle"
                     dominantBaseline="middle"
-                    className="c-chart__funnel-conversion"
+                    className="c-chart__funnel-label"
                   >
-                    {item.conversionRate.toFixed(1)}%
+                    {showLabels && item.label}
+                    {showValues && (
+                      <tspan x={x + segmentWidth / 2} dy="1.2em">
+                        {valueFormatter(item.value)}
+                      </tspan>
+                    )}
+                    {showPercentages && (
+                      <tspan x={x + segmentWidth / 2} dy="1.2em">
+                        {item.percentage.toFixed(1)}%
+                      </tspan>
+                    )}
                   </text>
-                );
-              }
-            });
-          } else {
-            // Horizontal funnel (similar logic but rotated)
-            const segmentWidth =
-              (chartWidth - (funnelData.length - 1) * segmentGap) / funnelData.length;
-
-            processedData.forEach((item, index) => {
-              const x = padding + index * (segmentWidth + segmentGap);
+                )}
+              </g>
+            );
 
-              // Calculate segment height based on value
-              let segmentHeight: number;
-              if (proportional) {
-                const ratio = Math.max(item.percentage / 100, minSegmentRatio);
-                segmentHeight = chartHeight * ratio;
-              } else {
-                const ratio = Math.max(
-                  1 - (index / (funnelData.length - 1)) * (1 - neckHeight),
-                  minSegmentRatio
-                );
-                segmentHeight = chartHeight * ratio;
-              }
-
-              const y = padding + (chartHeight - segmentHeight) / 2;
-
-              // Similar implementation for horizontal orientation...
-              // (Implementation details omitted for brevity but would follow same pattern)
-            });
-          }
-
-          return <g>{elements}</g>;
-        },
-        [
-          funnelData,
-          direction,
-          showLabels,
-          showValues,
-          showPercentages,
-          labelPosition,
-          neckWidth,
-          neckHeight,
-          segmentGap,
-          colorScheme,
-          useGradient,
-          animate,
-          animationDuration,
-          animationDelay,
-          valueFormatter,
-          showConversionRates,
-          conversionRatePosition,
-          proportional,
-          minSegmentRatio,
-        ]
-      );
-
-      // Convert funnel data to datasets format for ChartRenderer
+            // Add conversion rate labels
+            if (showConversionRates && nextItem && conversionRatePosition === 'between') {
+              elements.push(
+                <text
+                  key={`conversion-${index}`}
+                  x={x + segmentWidth / 2}
+                  y={y + segmentHeight + segmentGap / 2}
+                  textAnchor="middle"
+                  className="c-chart__funnel-conversion"
+                >
+                  ↓ {item.conversionRate.toFixed(1)}%
+                </text>
+              );
+            }
+          });
+        }
+
+        return (
+          <>
+            <g>{elements}</g>
+            {showTooltips && hoveredPoint && funnelData[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={funnelData[hoveredPoint.pointIndex]}
+                datasetLabel="Funnel Data"
+                datasetColor={funnelData[hoveredPoint.pointIndex]?.color || colors[hoveredPoint.pointIndex % colors.length]}
+                position={{
+                  x: hoveredPoint.clientX,
+                  y: hoveredPoint.clientY,
+                }}
+                visible={true}
+              />
+            )}
+          </>
+        );
+      };
+
+      // Convert funnelData to datasets format for BaseChart
       const datasets = [
         {
           label: 'Funnel Data',
-          data: funnelData.map(item => ({
-            label: item.label,
-            value: item.value,
-          })),
+          data: funnelData,
         },
       ];
 
       return (
-        <Chart ref={ref} type="funnel" datasets={datasets} config={config} {...props}>
-          <ChartRenderer
-            datasets={datasets}
-            config={config}
-            onDataPointClick={onDataPointClick}
-            renderContent={renderContent}
-          />
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="funnel"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )