@shohojdhara/atomix 0.1.29 → 0.2.1

package/src/components/Chart/LineChart.tsx

@@ -0,0 +1,172 @@
+import { forwardRef, memo, useCallback } from 'react';
+import { LineChartOptions, useLineChart } from '../../lib/composables/useLineChart';
+import Chart from './Chart';
+import ChartRenderer from './ChartRenderer';
+import ChartTooltip from './ChartTooltip';
+import { ChartProps } from './types';
+
+interface LineChartProps extends Omit<ChartProps, 'type'> {
+  /**
+   * Line chart specific options
+   */
+  lineOptions?: LineChartOptions;
+
+  /**
+   * Real-time data update handler
+   */
+  onRealTimeUpdate?: () => void;
+
+  /**
+   * Zoom change handler
+   */
+  onZoomChange?: (zoomLevel: number, centerX: number) => void;
+
+  /**
+   * Pan change handler
+   */
+  onPanChange?: (offsetX: number, offsetY: number) => void;
+
+  /**
+   * Brush selection handler
+   */
+  onBrushSelection?: (startIndex: number, endIndex: number) => void;
+}
+
+const LineChart = memo(
+  forwardRef<HTMLDivElement, LineChartProps>(
+    (
+      {
+        datasets = [],
+        config = {},
+        lineOptions = {},
+        onDataPointClick,
+        onRealTimeUpdate,
+        onZoomChange,
+        onPanChange,
+        onBrushSelection,
+        ...props
+      },
+      ref
+    ) => {
+      const {
+        processedDatasets,
+        generateSmoothPath,
+        calculateMovingAverage,
+        handlePointHover,
+        handlePointLeave,
+        hoveredPoint,
+      } = useLineChart(datasets, lineOptions);
+
+      const renderContent = useCallback(
+        ({
+          scales,
+          colors,
+          datasets: renderedDatasets,
+          handlers,
+        }: {
+          scales: any;
+          colors: any;
+          datasets: any;
+          handlers: any;
+        }) => {
+          if (!renderedDatasets.length) return null;
+
+          return renderedDatasets.map((dataset: any, datasetIndex: number) => {
+            const color = dataset.color || colors[datasetIndex];
+            const points =
+              dataset.data?.map((point: any, i: number) => ({
+                x: scales.xScale(i, dataset.data?.length),
+                y: scales.yScale(point.value),
+              })) || [];
+
+            const path = lineOptions.smooth
+              ? generateSmoothPath(points)
+              : `M ${points.map((p: any) => `${p.x},${p.y}`).join(' L ')}`;
+
+            return (
+              <g key={`dataset-${datasetIndex}`}>
+                {lineOptions.showArea && (
+                  <path
+                    d={`${path} L ${points[points.length - 1]?.x || 0},${scales.yScale(0)} L ${points[0]?.x || 0},${scales.yScale(0)} Z`}
+                    fill={color}
+                    className="c-chart__area-path"
+                  />
+                )}
+                <path d={path} stroke={color} fill="none" className="c-chart__line-path" />
+                {lineOptions.showDataPoints &&
+                  dataset.data?.map((point: any, i: number) => {
+                    const x = scales.xScale(i, dataset.data?.length);
+                    const y = scales.yScale(point.value);
+                    const isHovered =
+                      hoveredPoint?.datasetIndex === datasetIndex && hoveredPoint?.pointIndex === i;
+
+                    return (
+                      <circle
+                        key={`point-${i}`}
+                        cx={x}
+                        cy={y}
+                        r={lineOptions.pointRadius || 4}
+                        fill={color}
+                        className={`c-chart__data-point ${isHovered ? 'c-chart__data-point--hovered' : ''}`}
+                        onClick={() => handlers.onDataPointClick?.(point, datasetIndex, i)}
+                        onMouseEnter={e => {
+                          const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
+                          const clientX = rect ? rect.left + x : e.clientX;
+                          const clientY = rect ? rect.top + y : e.clientY;
+                          handlePointHover(datasetIndex, i, x, y);
+                        }}
+                        onMouseLeave={handlePointLeave}
+                      />
+                    );
+                  })}
+              </g>
+            );
+          });
+        },
+        [lineOptions, generateSmoothPath, hoveredPoint, handlePointHover, handlePointLeave]
+      );
+
+      return (
+        <Chart
+          ref={ref}
+          type="line"
+          datasets={datasets}
+          config={config}
+          toolbarConfig={{
+            defaults: {
+              zoom: true,
+              pan: true,
+              reset: true,
+              grid: true,
+              tooltips: true,
+            },
+          }}
+          {...props}
+        >
+          <ChartRenderer
+            datasets={processedDatasets}
+            config={config}
+            onDataPointClick={onDataPointClick}
+            renderContent={renderContent}
+          />
+          {hoveredPoint &&
+            processedDatasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
+              <ChartTooltip
+                dataPoint={
+                  processedDatasets[hoveredPoint.datasetIndex]!.data![hoveredPoint.pointIndex]!
+                }
+                datasetLabel={processedDatasets[hoveredPoint.datasetIndex]?.label}
+                datasetColor={processedDatasets[hoveredPoint.datasetIndex]?.color}
+                position={{ x: hoveredPoint.x, y: hoveredPoint.y }}
+                visible={true}
+              />
+            )}
+        </Chart>
+      );
+    }
+  )
+);
+
+LineChart.displayName = 'LineChart';
+export default LineChart;
+export type { LineChartProps };

package/src/components/Chart/LineChartNew.tsx

@@ -0,0 +1,167 @@
+import { forwardRef, memo, useState } from 'react';
+import { useChartData } from '../../lib/composables/useChartData';
+import { useChartInteraction } from '../../lib/composables/useChartInteraction';
+import { useChartScale } from '../../lib/composables/useChartScale';
+import Chart from './Chart';
+import ChartTooltip from './ChartTooltip';
+import { ChartDataPoint, ChartProps } from './types';
+
+interface LineChartProps extends Omit<ChartProps, 'type'> {
+  /**
+   * Whether to show area fill
+   */
+  showArea?: boolean;
+  /**
+   * Whether to show data points
+   */
+  showPoints?: boolean;
+  /**
+   * Whether to use smooth curves
+   */
+  smooth?: boolean;
+}
+
+/**
+ * Simplified LineChart component
+ */
+const LineChart = memo(
+  forwardRef<HTMLDivElement, LineChartProps>(
+    (
+      {
+        datasets,
+        showArea = false,
+        showPoints = true,
+        smooth = false,
+        onDataPointClick,
+        interactive = true,
+        ...props
+      },
+      ref
+    ) => {
+      const chartData = datasets?.[0]?.data || [];
+      const { data: processedData, stats } = useChartData(chartData);
+      const { interaction, handlePointHover, handlePointClick } = useChartInteraction();
+      const [tooltipData, setTooltipData] = useState<{
+        point: ChartDataPoint;
+        position: { x: number; y: number };
+      } | null>(null);
+
+      const scales = useChartScale(processedData, 800, 400);
+
+      const generatePath = () => {
+        if (!processedData.length) return '';
+        return processedData
+          .map((point, index) => {
+            const x = scales.xScale(index);
+            const y = scales.yScale(point.value);
+            return `${index === 0 ? 'M' : 'L'} ${x},${y}`;
+          })
+          .join(' ');
+      };
+
+      const generateAreaPath = () => {
+        if (!processedData.length) return '';
+        const linePath = generatePath();
+        const lastPoint = scales.xScale(processedData.length - 1);
+        const firstPoint = scales.xScale(0);
+        const baseline = scales.yScale(0);
+
+        return `${linePath} L ${lastPoint},${baseline} L ${firstPoint},${baseline} Z`;
+      };
+
+      const renderChart = () => (
+        <svg width="100%" height="100%" viewBox={`0 0 ${scales.width} ${scales.height}`}>
+          {/* Grid lines */}
+          <defs>
+            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
+              <path
+                d="M 20 0 L 0 0 0 20"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="0.5"
+                opacity="0.1"
+              />
+            </pattern>
+          </defs>
+          <rect width="100%" height="100%" fill="url(#grid)" />
+
+          {/* Area fill */}
+          {showArea && <path d={generateAreaPath()} className="c-chart__area-path" />}
+
+          {/* Line path */}
+          <path
+            d={generatePath()}
+            fill="none"
+            stroke="var(--atomix-primary)"
+            className="c-chart__line-path"
+          />
+
+          {/* Data points */}
+          {showPoints &&
+            processedData.map((point, index) => {
+              const x = scales.xScale(index);
+              const y = scales.yScale(point.value);
+              const isHovered = interaction.hoveredIndex === index;
+              const isSelected = interaction.selectedIndex === index;
+
+              return (
+                <circle
+                  key={index}
+                  cx={x}
+                  cy={y}
+                  r={isHovered || isSelected ? 6 : 4}
+                  fill={point.color || 'var(--atomix-primary)'}
+                  className="c-chart__data-point"
+                  style={{ cursor: interactive ? 'pointer' : 'default' }}
+                  onMouseEnter={e => {
+                    if (interactive) {
+                      handlePointHover(index);
+                      const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
+                      const clientX = rect ? rect.left + x : e.clientX;
+                      const clientY = rect ? rect.top + y : e.clientY;
+                      setTooltipData({ point, position: { x: clientX, y: clientY } });
+                    }
+                  }}
+                  onMouseLeave={() => {
+                    if (interactive) {
+                      handlePointHover(null);
+                      setTooltipData(null);
+                    }
+                  }}
+                  onClick={() => {
+                    if (interactive) {
+                      handlePointClick(index);
+                      onDataPointClick?.(point, 0, index);
+                    }
+                  }}
+                />
+              );
+            })}
+        </svg>
+      );
+
+      return (
+        <Chart
+          ref={ref}
+          type="line"
+          datasets={[{ label: 'Line Chart', data: chartData }]}
+          {...props}
+        >
+          {renderChart()}
+          {tooltipData && (
+            <ChartTooltip
+              dataPoint={tooltipData.point}
+              datasetLabel="Line Chart"
+              position={tooltipData.position}
+              visible={true}
+            />
+          )}
+        </Chart>
+      );
+    }
+  )
+);
+
+LineChart.displayName = 'LineChart';
+export default LineChart;
+export type { LineChartProps };