@shohojdhara/atomix 0.2.4 → 0.2.6

package/src/components/Chart/WaterfallChart.tsx

@@ -1,7 +1,7 @@
-import { forwardRef, memo, useCallback } from 'react';
+import { forwardRef, memo } from 'react';
+import BaseChart from './BaseChart';
 import { ChartProps } from '../../lib/types/components';
-import Chart from './Chart';
-import ChartRenderer from './ChartRenderer';
+import { ChartRenderContentParams } from './types';
 
 export interface WaterfallDataPoint {
   label: string;
@@ -97,7 +97,7 @@ const WaterfallChart = memo(
     ) => {
       const {
         showConnectors = true,
-        connectorColor = '#f9fafb',
+        connectorColor = 'var(--atomix-gray-1)',
         connectorStyle = 'dashed',
         showValues = true,
         valuePosition = 'top',
@@ -109,338 +109,299 @@ const WaterfallChart = memo(
         },
         barWidth = 0.6,
         showCumulativeLine = false,
-        cumulativeLineColor = '#3b82f6',
+        cumulativeLineColor = 'var(--atomix-primary)',
         animate = true,
         animationDuration = 1000,
         animationDelay = 100,
         valueFormatter = value => value.toLocaleString(),
         showBaseline = true,
-        baselineColor = '#f3f4f6',
+        baselineColor = 'var(--atomix-gray-2)',
       } = waterfallOptions;
 
-      const renderContent = useCallback(
-        ({
-          scales,
-          colors,
-          handlers,
-        }: {
-          scales: { width: number; height: number };
-          colors: string[];
-          handlers: {
-            onDataPointClick?: (dataPoint: any, datasetIndex: number, pointIndex: number) => void;
-          };
-        }) => {
-          if (!waterfallData.length) return null;
-
-          const padding = 60;
-          const chartWidth = scales.width - padding * 2;
-          const chartHeight = scales.height - padding * 2;
-
-          // Calculate cumulative values and positions
-          let cumulativeValue = 0;
-          const processedData = waterfallData.map((item, index) => {
-            const startValue =
-              item.type === 'total' || item.type === 'subtotal' ? 0 : cumulativeValue;
-
-            let endValue: number;
-            if (item.type === 'total' || item.type === 'subtotal') {
-              endValue = item.value;
-              cumulativeValue = item.value;
-            } else {
-              endValue = cumulativeValue + item.value;
-              cumulativeValue = endValue;
-            }
-
-            return {
-              ...item,
-              startValue,
-              endValue,
-              cumulativeValue,
-              index,
-            };
-          });
-
-          // Calculate scales
-          const allValues = processedData.flatMap(d => [d.startValue, d.endValue]);
-          const minValue = Math.min(0, ...allValues);
-          const maxValue = Math.max(...allValues);
-          const valueRange = maxValue - minValue;
-
-          const barWidthPx = (chartWidth / waterfallData.length) * barWidth;
-          const barSpacing = chartWidth / waterfallData.length;
-
-          const xScale = (index: number) => padding + index * barSpacing + barSpacing / 2;
-          const yScale = (value: number) =>
-            padding + chartHeight - ((value - minValue) / valueRange) * chartHeight;
-
-          const elements = [];
-
-          // Baseline
-          if (showBaseline) {
-            const baselineY = yScale(0);
-            elements.push(
-              <line
-                key="baseline"
-                x1={padding}
-                y1={baselineY}
-                x2={scales.width - padding}
-                y2={baselineY}
-                stroke={baselineColor}
-                strokeWidth="2"
-                opacity="0.7"
-              />
-            );
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
+        if (!waterfallData.length) return null;
+
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const shouldAnimate = toolbarState?.animationsEnabled ?? renderConfig?.animate ?? animate;
+
+        const padding = 60;
+        const chartWidth = scales.width - padding * 2;
+        const chartHeight = scales.height - padding * 2;
+
+        // Calculate cumulative values and positions
+        let cumulativeValue = 0;
+        const processedData = waterfallData.map((item, index) => {
+          const startValue =
+            item.type === 'total' || item.type === 'subtotal' ? 0 : cumulativeValue;
+
+          let endValue: number;
+          if (item.type === 'total' || item.type === 'subtotal') {
+            endValue = item.value;
+            cumulativeValue = item.value;
+          } else {
+            endValue = cumulativeValue + item.value;
+            cumulativeValue = endValue;
           }
 
-          // Bars
-          processedData.forEach((item, index) => {
-            const x = xScale(index);
-            const barTop = Math.min(yScale(item.startValue), yScale(item.endValue));
-            const barBottom = Math.max(yScale(item.startValue), yScale(item.endValue));
-            const barHeight = barBottom - barTop;
-
-            // Determine bar color
-            let barColor = item.color;
-            if (!barColor) {
-              if (item.type === 'total') barColor = waterfallColors.total;
-              else if (item.type === 'subtotal') barColor = waterfallColors.subtotal;
-              else if (item.value >= 0) barColor = waterfallColors.positive;
-              else barColor = waterfallColors.negative;
-            }
-
-            // Bar rectangle
-            elements.push(
-              <rect
-                key={`bar-${index}`}
-                x={x - barWidthPx / 2}
-                y={barTop}
-                width={barWidthPx}
-                height={Math.max(barHeight, 2)}
-                fill={barColor}
-                rx="4"
-                className={`c-chart__waterfall-bar ${animate ? 'c-chart__waterfall-bar--animated' : ''}`}
-                style={{
-                  animationDelay: animate ? `${index * animationDelay}ms` : '0ms',
-                }}
-                onClick={() => handlers.onDataPointClick?.(item as any, 0, index)}
-              />
-            );
-
-            // Value labels
-            if (showValues) {
-              let labelY = barTop;
-              let labelValue = item.value;
-
-              if (valuePosition === 'center') {
-                labelY = barTop + barHeight / 2;
-              } else if (valuePosition === 'bottom') {
-                labelY = barBottom + 15;
-              } else {
-                labelY = barTop - 5;
-              }
-
-              // For total/subtotal bars, show the cumulative value
-              if (item.type === 'total' || item.type === 'subtotal') {
-                labelValue = item.endValue;
-              }
-
-              elements.push(
-                <text
-                  key={`value-${index}`}
-                  x={x}
-                  y={labelY}
-                  textAnchor="middle"
-                  dominantBaseline={valuePosition === 'center' ? 'middle' : 'auto'}
-                  className={`c-chart__waterfall-value ${valuePosition === 'center' ? 'c-chart__waterfall-value--center' : 'c-chart__waterfall-value--outside'}`}
-                >
-                  {valueFormatter(labelValue)}
-                </text>
-              );
-            }
+          return {
+            ...item,
+            startValue,
+            endValue,
+            cumulativeValue,
+            index,
+          };
+        });
 
-            // Connectors
-            if (showConnectors && index < processedData.length - 1) {
-              const nextItem = processedData[index + 1];
-              if (nextItem) {
-                const currentEndY = yScale(item.endValue);
-                const nextStartY = yScale(nextItem.startValue);
-                const nextX = xScale(index + 1);
-
-                // Only show connector if there's a gap to bridge
-                if (Math.abs(item.endValue - nextItem.startValue) > 0.01) {
-                  const strokeDasharray =
-                    connectorStyle === 'dashed'
-                      ? '5,5'
-                      : connectorStyle === 'dotted'
-                        ? '2,2'
-                        : 'none';
-
-                  elements.push(
-                    <line
-                      key={`connector-${index}`}
-                      x1={x + barWidthPx / 2}
-                      y1={currentEndY}
-                      x2={nextX - barWidthPx / 2}
-                      y2={nextStartY}
-                      stroke={connectorColor}
-                      strokeDasharray={strokeDasharray}
-                      className="c-chart__waterfall-connector"
-                    />
-                  );
-                }
-              }
-            }
-          });
+        // Calculate scales
+        const allValues = processedData.flatMap(d => [d.startValue, d.endValue]);
+        const minValue = Math.min(0, ...allValues);
+        const maxValue = Math.max(...allValues);
+        const valueRange = maxValue - minValue;
 
-          // Cumulative line
-          if (showCumulativeLine) {
-            const linePoints = processedData.map((item, index) => ({
-              x: xScale(index),
-              y: yScale(item.cumulativeValue),
-            }));
+        const barWidthPx = (chartWidth / waterfallData.length) * barWidth;
+        const barSpacing = chartWidth / waterfallData.length;
 
-            const linePath = `M ${linePoints.map(p => `${p.x},${p.y}`).join(' L ')}`;
+        const xScale = (index: number) => padding + index * barSpacing + barSpacing / 2;
+        const yScale = (value: number) =>
+          padding + chartHeight - ((value - minValue) / valueRange) * chartHeight;
 
-            elements.push(
-              <path
-                key="cumulative-line"
-                d={linePath}
-                fill="none"
-                stroke={cumulativeLineColor}
-                className="c-chart__waterfall-cumulative-line"
-              />
-            );
+        const elements = [];
 
-            // Line points
-            linePoints.forEach((point, index) => {
-              elements.push(
-                <circle
-                  key={`line-point-${index}`}
-                  cx={point.x}
-                  cy={point.y}
-                  r="4"
-                  fill={cumulativeLineColor}
-                  className="c-chart__waterfall-cumulative-point"
-                />
-              );
-            });
-          }
-
-          // X-axis
+        // Baseline
+        if (showBaseline) {
+          const baselineY = yScale(0);
           elements.push(
             <line
-              key="x-axis"
+              key="baseline"
               x1={padding}
-              y1={scales.height - padding}
+              y1={baselineY}
               x2={scales.width - padding}
-              y2={scales.height - padding}
-              stroke="var(--atomix-gray-4)"
-              strokeWidth="2"
+              y2={baselineY}
+              stroke={baselineColor}
+              className="c-chart__axis-line"
+              opacity="0.7"
             />
           );
+        }
+
+        // Bars
+        processedData.forEach((item, index) => {
+          const x = xScale(index);
+          const barTop = Math.min(yScale(item.startValue), yScale(item.endValue));
+          const barBottom = Math.max(yScale(item.startValue), yScale(item.endValue));
+          const barHeight = barBottom - barTop;
+
+          // Determine bar color
+          let barColor = item.color;
+          if (!barColor) {
+            if (item.type === 'total') barColor = waterfallColors.total;
+            else if (item.type === 'subtotal') barColor = waterfallColors.subtotal;
+            else if (item.value >= 0) barColor = waterfallColors.positive;
+            else barColor = waterfallColors.negative;
+          }
 
-          // Y-axis
+          // Bar rectangle
           elements.push(
-            <line
-              key="y-axis"
-              x1={padding}
-              y1={padding}
-              x2={padding}
-              y2={scales.height - padding}
-              stroke="var(--atomix-gray-4)"
-              strokeWidth="2"
+            <rect
+              key={`bar-${index}`}
+              x={x - barWidthPx / 2}
+              y={barTop}
+              width={barWidthPx}
+              height={Math.max(barHeight, 2)}
+              fill={barColor}
+              className={`c-chart__waterfall-bar ${shouldAnimate ? 'c-chart__waterfall-bar--animated' : ''}`}
+              style={{
+                animationDelay: shouldAnimate ? `${index * animationDelay}ms` : '0ms',
+              }}
+              onClick={() => handlers.onDataPointClick?.(item as any, 0, index)}
+              onMouseEnter={e => {
+                const rect = e.currentTarget.getBoundingClientRect();
+                handlers.onPointHover(
+                  0,
+                  index,
+                  x,
+                  barTop,
+                  rect.left + rect.width / 2,
+                  rect.top + rect.height / 2
+                );
+              }}
+              onMouseLeave={handlers.onPointLeave}
             />
           );
 
-          // X-axis labels
-          waterfallData.forEach((item, index) => {
-            const x = xScale(index);
+          // Value labels
+          if (showValues) {
+            let labelY = barTop;
+            let labelValue = item.value;
+
+            if (valuePosition === 'center') {
+              labelY = barTop + barHeight / 2;
+            } else if (valuePosition === 'bottom') {
+              labelY = barBottom + 15;
+            } else {
+              labelY = barTop - 5;
+            }
+
+            // For total/subtotal bars, show the cumulative value
+            if (item.type === 'total' || item.type === 'subtotal') {
+              labelValue = item.endValue;
+            }
+
             elements.push(
               <text
-                key={`x-label-${index}`}
+                key={`value-${index}`}
                 x={x}
-                y={scales.height - padding + 20}
+                y={labelY}
                 textAnchor="middle"
-                fontSize="11"
-                fill="var(--atomix-gray-6)"
-                transform={`rotate(-45, ${x}, ${scales.height - padding + 20})`}
+                dominantBaseline={valuePosition === 'center' ? 'middle' : 'auto'}
+                className={`c-chart__waterfall-value ${valuePosition === 'center' ? 'c-chart__waterfall-value--center' : 'c-chart__waterfall-value--outside'}`}
               >
-                {item.label}
+                {valueFormatter(labelValue)}
               </text>
             );
-          });
+          }
+
+          // Connectors
+          if (showConnectors && index < processedData.length - 1) {
+            const nextItem = processedData[index + 1];
+            if (nextItem) {
+              const currentEndY = yScale(item.endValue);
+              const nextStartY = yScale(nextItem.startValue);
+              const nextX = xScale(index + 1);
+
+              // Only show connector if there's a gap to bridge
+              if (Math.abs(item.endValue - nextItem.startValue) > 0.01) {
+                const strokeDasharray =
+                  connectorStyle === 'dashed'
+                    ? '5,5'
+                    : connectorStyle === 'dotted'
+                      ? '2,2'
+                      : 'none';
+
+                elements.push(
+                  <line
+                    key={`connector-${index}`}
+                    x1={x + barWidthPx / 2}
+                    y1={currentEndY}
+                    x2={nextX - barWidthPx / 2}
+                    y2={nextStartY}
+                    stroke={connectorColor}
+                    strokeDasharray={strokeDasharray}
+                    className="c-chart__waterfall-connector"
+                  />
+                );
+              }
+            }
+          }
+        });
+
+        // Cumulative line
+        if (showCumulativeLine) {
+          const linePoints = processedData.map((item, index) => ({
+            x: xScale(index),
+            y: yScale(item.cumulativeValue),
+          }));
 
-          // Y-axis labels
-          const yTicks = 5;
-          for (let i = 0; i <= yTicks; i++) {
-            const value = minValue + (i / yTicks) * valueRange;
-            const y = yScale(value);
+          const linePath = `M ${linePoints.map(p => `${p.x},${p.y}`).join(' L ')}`;
 
+          elements.push(
+            <path
+              key="cumulative-line"
+              d={linePath}
+              fill="none"
+              stroke={cumulativeLineColor}
+              className="c-chart__waterfall-cumulative-line"
+            />
+          );
+
+          // Line points
+          linePoints.forEach((point, index) => {
             elements.push(
-              <g key={`y-tick-${i}`}>
-                <line
-                  x1={padding - 5}
-                  y1={y}
-                  x2={padding}
-                  y2={y}
-                  stroke="var(--atomix-gray-4)"
-                  strokeWidth="1"
-                />
-                <text
-                  x={padding - 10}
-                  y={y}
-                  textAnchor="end"
-                  dominantBaseline="middle"
-                  fontSize="11"
-                  fill="var(--atomix-gray-6)"
-                >
-                  {valueFormatter(value)}
-                </text>
-              </g>
+              <circle
+                key={`line-point-${index}`}
+                cx={point.x}
+                cy={point.y}
+                r="4"
+                fill={cumulativeLineColor}
+                className="c-chart__waterfall-cumulative-point"
+              />
             );
-          }
+          });
+        }
+
+        // X-axis
+        elements.push(
+          <line
+            key="x-axis"
+            x1={padding}
+            y1={scales.height - padding}
+            x2={scales.width - padding}
+            y2={scales.height - padding}
+            stroke="var(--atomix-gray-4)"
+            strokeWidth="2"
+          />
+        );
+
+        // Y-axis
+        elements.push(
+          <line
+            key="y-axis"
+            x1={padding}
+            y1={padding}
+            x2={padding}
+            y2={scales.height - padding}
+            stroke="var(--atomix-gray-4)"
+            className="c-chart__axis-line"
+          />
+        );
 
-          return <g>{elements}</g>;
-        },
-        [
-          waterfallData,
-          showConnectors,
-          connectorColor,
-          connectorStyle,
-          showValues,
-          valuePosition,
-          barWidth,
-          showCumulativeLine,
-          cumulativeLineColor,
-          animate,
-          animationDuration,
-          animationDelay,
-          valueFormatter,
-          showBaseline,
-          baselineColor,
-        ]
-      );
+        // X-axis labels
+        processedData.forEach((item, index) => {
+          const x = padding + index * barSpacing + barSpacing / 2;
+          elements.push(
+            <text
+              key={`x-label-${index}`}
+              x={x}
+              y={scales.height - padding + 20}
+              textAnchor="middle"
+              className="c-chart__axis-label"
+              fill="var(--atomix-gray-6)"
+              transform={`rotate(-45, ${x}, ${scales.height - padding + 20})`}
+            >
+              {item.label}
+            </text>
+          );
+        });
 
-      // Convert waterfall data to datasets format for ChartRenderer
+        return <g>{elements}</g>;
+      };
+
+      // Convert waterfallData to datasets format for BaseChart
       const datasets = [
         {
           label: 'Waterfall Data',
-          data: waterfallData.map(item => ({
-            label: item.label,
-            value: item.value,
-          })),
+          data: waterfallData,
         },
       ];
 
       return (
-        <Chart ref={ref} type="waterfall" datasets={datasets} config={config} {...props}>
-          <ChartRenderer
-            datasets={datasets}
-            config={config}
-            onDataPointClick={onDataPointClick}
-            renderContent={renderContent}
-          />
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="waterfall"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )
@@ -448,3 +409,4 @@ const WaterfallChart = memo(
 
 WaterfallChart.displayName = 'WaterfallChart';
 export default WaterfallChart;
+export type { WaterfallChartProps, WaterfallDataPoint };