@shohojdhara/atomix 0.1.30 → 0.2.1

package/src/components/Chart/WaterfallChart.tsx

@@ -0,0 +1,450 @@
+import { forwardRef, memo, useCallback } from 'react';
+import { ChartProps } from '../../lib/types/components';
+import Chart from './Chart';
+import ChartRenderer from './ChartRenderer';
+
+export interface WaterfallDataPoint {
+  label: string;
+  value: number;
+  type?: 'positive' | 'negative' | 'total' | 'subtotal';
+  color?: string;
+  isConnector?: boolean;
+}
+
+export interface WaterfallChartProps extends Omit<ChartProps, 'type' | 'datasets'> {
+  /**
+   * Waterfall chart data
+   */
+  waterfallData: WaterfallDataPoint[];
+
+  /**
+   * Waterfall chart specific options
+   */
+  waterfallOptions?: {
+    /**
+     * Whether to show connecting lines
+     */
+    showConnectors?: boolean;
+    /**
+     * Connector line color
+     */
+    connectorColor?: string;
+    /**
+     * Connector line style
+     */
+    connectorStyle?: 'solid' | 'dashed' | 'dotted';
+    /**
+     * Whether to show values on bars
+     */
+    showValues?: boolean;
+    /**
+     * Value position on bars
+     */
+    valuePosition?: 'top' | 'center' | 'bottom';
+    /**
+     * Colors for different bar types
+     */
+    colors?: {
+      positive?: string;
+      negative?: string;
+      total?: string;
+      subtotal?: string;
+    };
+    /**
+     * Bar width ratio (0-1)
+     */
+    barWidth?: number;
+    /**
+     * Whether to show cumulative line
+     */
+    showCumulativeLine?: boolean;
+    /**
+     * Cumulative line color
+     */
+    cumulativeLineColor?: string;
+    /**
+     * Whether to animate bars
+     */
+    animate?: boolean;
+    /**
+     * Animation duration in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Animation delay between bars
+     */
+    animationDelay?: number;
+    /**
+     * Value formatter function
+     */
+    valueFormatter?: (value: number) => string;
+    /**
+     * Whether to show baseline at zero
+     */
+    showBaseline?: boolean;
+    /**
+     * Baseline color
+     */
+    baselineColor?: string;
+  };
+}
+
+const WaterfallChart = memo(
+  forwardRef<HTMLDivElement, WaterfallChartProps>(
+    (
+      { waterfallData = [], config = {}, waterfallOptions = {}, onDataPointClick, ...props },
+      ref
+    ) => {
+      const {
+        showConnectors = true,
+        connectorColor = '#f9fafb',
+        connectorStyle = 'dashed',
+        showValues = true,
+        valuePosition = 'top',
+        colors: waterfallColors = {
+          positive: 'var(--atomix-success)',
+          negative: 'var(--atomix-error)',
+          total: 'var(--atomix-primary)',
+          subtotal: 'var(--atomix-secondary)',
+        },
+        barWidth = 0.6,
+        showCumulativeLine = false,
+        cumulativeLineColor = '#3b82f6',
+        animate = true,
+        animationDuration = 1000,
+        animationDelay = 100,
+        valueFormatter = value => value.toLocaleString(),
+        showBaseline = true,
+        baselineColor = '#f3f4f6',
+      } = 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"
+              />
+            );
+          }
+
+          // 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>
+              );
+            }
+
+            // 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),
+            }));
+
+            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(
+                <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)"
+              strokeWidth="2"
+            />
+          );
+
+          // X-axis labels
+          waterfallData.forEach((item, index) => {
+            const x = xScale(index);
+            elements.push(
+              <text
+                key={`x-label-${index}`}
+                x={x}
+                y={scales.height - padding + 20}
+                textAnchor="middle"
+                fontSize="11"
+                fill="var(--atomix-gray-6)"
+                transform={`rotate(-45, ${x}, ${scales.height - padding + 20})`}
+              >
+                {item.label}
+              </text>
+            );
+          });
+
+          // Y-axis labels
+          const yTicks = 5;
+          for (let i = 0; i <= yTicks; i++) {
+            const value = minValue + (i / yTicks) * valueRange;
+            const y = yScale(value);
+
+            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>
+            );
+          }
+
+          return <g>{elements}</g>;
+        },
+        [
+          waterfallData,
+          showConnectors,
+          connectorColor,
+          connectorStyle,
+          showValues,
+          valuePosition,
+          barWidth,
+          showCumulativeLine,
+          cumulativeLineColor,
+          animate,
+          animationDuration,
+          animationDelay,
+          valueFormatter,
+          showBaseline,
+          baselineColor,
+        ]
+      );
+
+      // Convert waterfall data to datasets format for ChartRenderer
+      const datasets = [
+        {
+          label: 'Waterfall Data',
+          data: waterfallData.map(item => ({
+            label: item.label,
+            value: item.value,
+          })),
+        },
+      ];
+
+      return (
+        <Chart ref={ref} type="waterfall" datasets={datasets} config={config} {...props}>
+          <ChartRenderer
+            datasets={datasets}
+            config={config}
+            onDataPointClick={onDataPointClick}
+            renderContent={renderContent}
+          />
+        </Chart>
+      );
+    }
+  )
+);
+
+WaterfallChart.displayName = 'WaterfallChart';
+export default WaterfallChart;

package/src/components/Chart/index.ts

@@ -0,0 +1,119 @@
+import AdvancedChart from './AdvancedChart';
+import AnimatedChart from './AnimatedChart';
+import AreaChart from './AreaChart';
+import BarChart from './BarChart';
+import BubbleChart from './BubbleChart';
+import CandlestickChart from './CandlestickChart';
+import Chart from './Chart';
+import ChartRenderer from './ChartRenderer';
+import ChartToolbar from './ChartToolbar';
+import ChartTooltip from './ChartTooltip';
+import DonutChart from './DonutChart';
+import FunnelChart from './FunnelChart';
+import GaugeChart from './GaugeChart';
+import HeatmapChart from './HeatmapChart';
+import LineChart from './LineChart';
+import MultiAxisChart from './MultiAxisChart';
+import PieChart from './PieChart';
+import RadarChart from './RadarChart';
+import RealTimeChart from './RealTimeChart';
+import ScatterChart from './ScatterChart';
+
+import TreemapChart from './TreemapChart';
+import WaterfallChart from './WaterfallChart';
+
+// Export all chart components
+export {
+  AdvancedChart,
+  AnimatedChart,
+  AreaChart,
+  BarChart,
+  BubbleChart,
+  CandlestickChart,
+  Chart,
+  ChartRenderer,
+  ChartToolbar,
+  ChartTooltip,
+  DonutChart,
+  FunnelChart,
+  GaugeChart,
+  HeatmapChart,
+  LineChart,
+  MultiAxisChart,
+  PieChart,
+  RadarChart,
+  RealTimeChart,
+  ScatterChart,
+  TreemapChart,
+  WaterfallChart,
+};
+
+// Export chart hooks
+export { useBarChart } from '../../lib/composables/useBarChart';
+export {
+  useChart,
+  useChartAccessibility,
+  useChartData,
+  useChartPerformance,
+} from '../../lib/composables/useChart';
+export { useChartAnalytics } from '../../lib/composables/useChartAnalytics';
+export { useChartExport } from '../../lib/composables/useChartExport';
+export { useChartToolbar } from '../../lib/composables/useChartToolbar';
+export { useLineChart } from '../../lib/composables/useLineChart';
+export { usePieChart } from '../../lib/composables/usePieChart';
+
+// Export chart component types
+export type { AdvancedChartProps } from './AdvancedChart';
+export type { AnimatedChartProps } from './AnimatedChart';
+export type { AreaChartProps } from './AreaChart';
+export type { BarChartProps } from './BarChart';
+export type { BubbleChartProps, BubbleDataPoint } from './BubbleChart';
+export type { CandlestickChartProps, CandlestickDataPoint } from './CandlestickChart';
+export type { ChartToolbarAction, ChartToolbarGroup, ChartToolbarProps } from './ChartToolbar';
+export type { ChartTooltipProps, TooltipPosition } from './ChartTooltip';
+export type { DonutChartProps } from './DonutChart';
+export type { FunnelChartProps, FunnelDataPoint } from './FunnelChart';
+export type { GaugeChartProps } from './GaugeChart';
+export type { HeatmapChartProps, HeatmapDataPoint } from './HeatmapChart';
+export type { LineChartProps } from './LineChart';
+export type { AxisConfig, MultiAxisChartProps, MultiAxisDataset } from './MultiAxisChart';
+export type { PieChartProps } from './PieChart';
+export type { RadarChartProps } from './RadarChart';
+export type { RealTimeChartProps } from './RealTimeChart';
+export type { ScatterChartProps, ScatterDataPoint } from './ScatterChart';
+
+export type { TreemapChartProps, TreemapDataPoint, TreemapNode } from './TreemapChart';
+export type {
+  ChartConfig,
+  ChartDataPoint,
+  ChartDataset,
+  ChartProps,
+  ChartToolbarConfig,
+  ChartType,
+} from './types';
+export type { WaterfallChartProps, WaterfallDataPoint } from './WaterfallChart';
+
+// Export hook types
+export type { BarChartOptions, BarDimensions } from '../../lib/composables/useBarChart';
+export type { ChartInteractionState, ChartScales } from '../../lib/composables/useChart';
+export type {
+  ChartToolbarHandlers,
+  ChartToolbarState,
+  ChartToolbarConfig as ToolbarConfig,
+} from '../../lib/composables/useChartToolbar';
+export type { LineChartOptions } from '../../lib/composables/useLineChart';
+export type { PieChartOptions, PieSlice } from '../../lib/composables/usePieChart';
+
+// Export additional chart hook types
+
+export type {
+  AnomalyDetection,
+  CorrelationAnalysis,
+  SeasonalityAnalysis,
+  StatisticalAnalysis,
+  TrendAnalysis,
+} from '../../lib/composables/useChartAnalytics';
+export type { ExportOptions, ShareOptions } from '../../lib/composables/useChartExport';
+
+// Default export
+export default Chart;