@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Chart/ScatterChart.tsx

@@ -1,17 +1,7 @@
-import { forwardRef, memo, ReactElement, useState } from 'react';
-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 './types';
-
-export interface ScatterDataPoint {
-  label: string;
-  value: number;
-  x?: number;
-  y?: number;
-  size?: number;
-  color?: string;
-}
+import { ChartProps, ScatterDataPoint, ChartRenderContentParams, ChartDataset } from './types';
 
 interface ScatterChartProps extends Omit<ChartProps, 'type'> {
   /**
@@ -51,97 +41,121 @@ const ScatterChart = memo(
       },
       ref
     ) => {
-      const [hoveredPoint, setHoveredPoint] = useState<{
-        datasetIndex: number;
-        pointIndex: number;
-        clientX: number;
-        clientY: number;
-      } | null>(null);
-      return (
-        <Chart ref={ref} type="scatter" datasets={datasets} config={config} {...props}>
-          <ChartRenderer
-            datasets={datasets}
-            config={config}
-            interactive={scatterOptions.enableHoverEffects}
-            renderContent={({ scales, colors, datasets: renderedDatasets }) => {
-              if (!renderedDatasets.length) return null;
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
+        if (!renderedDatasets.length) return null;
 
-              const points: ReactElement[] = [];
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
 
-              renderedDatasets.forEach((dataset: any, datasetIndex: number) => {
-                const color = dataset.color || colors[datasetIndex % colors.length];
+        const points: React.ReactNode[] = [];
 
-                dataset.data?.forEach((point: any, pointIndex: number) => {
-                  const x =
-                    point.x !== undefined
-                      ? scales.padding.left + (point.x / 100) * scales.innerWidth
-                      : scales.xScale(pointIndex, dataset.data?.length);
+        renderedDatasets.forEach((dataset: ChartDataset, datasetIndex: number) => {
+          const color = dataset.color || colors[datasetIndex % colors.length];
 
-                  const y =
-                    point.y !== undefined
-                      ? scales.padding.top +
-                        scales.innerHeight -
-                        (point.y / 100) * scales.innerHeight
-                      : scales.yScale(point.value);
+          dataset.data?.forEach((point: ScatterDataPoint, pointIndex: number) => {
+            const x =
+              point.x !== undefined
+                ? scales.padding.left + (point.x / 100) * scales.innerWidth
+                : scales.xScale(pointIndex, dataset.data?.length);
 
-                  points.push(
-                    <g key={`point-${datasetIndex}-${pointIndex}`}>
-                      <circle
-                        cx={x}
-                        cy={y}
-                        r={point.size || scatterOptions.pointRadius || 4}
-                        fill={point.color || color}
-                        className="c-chart__scatter-point"
-                        onClick={() => onDataPointClick?.(point, datasetIndex, pointIndex)}
-                        onMouseEnter={e => {
-                          if (scatterOptions.enableHoverEffects) {
-                            e.currentTarget.setAttribute(
-                              'r',
-                              String((point.size || scatterOptions.pointRadius || 4) * 1.5)
-                            );
-                            const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
-                            const clientX = rect ? rect.left + x : e.clientX;
-                            const clientY = rect ? rect.top + y : e.clientY;
-                            setHoveredPoint({ datasetIndex, pointIndex, clientX, clientY });
-                          }
-                        }}
-                        onMouseLeave={e => {
-                          e.currentTarget.setAttribute(
-                            'r',
-                            String(point.size || scatterOptions.pointRadius || 4)
-                          );
-                          setHoveredPoint(null);
-                        }}
-                      />
+            const y =
+              point.y !== undefined
+                ? scales.padding.top + scales.innerHeight - (point.y / 100) * scales.innerHeight
+                : scales.yScale(point.value);
 
-                      {scatterOptions.showLabels && (
-                        <text
-                          x={x}
-                          y={y - (scatterOptions.pointRadius || 4) - 5}
-                          textAnchor="middle"
-                          className="c-chart__scatter-label"
-                        >
-                          {point.label}
-                        </text>
-                      )}
-                    </g>
-                  );
-                });
-              });
+            points.push(
+              <g key={`point-${datasetIndex}-${pointIndex}`}>
+                <circle
+                  cx={x}
+                  cy={y}
+                  r={point.size || scatterOptions.pointRadius || 4}
+                  fill={point.color || color}
+                  className="c-chart__scatter-point"
+                  onClick={() => handlers.onDataPointClick?.(point, datasetIndex, pointIndex)}
+                  onMouseEnter={e => {
+                    if (scatterOptions.enableHoverEffects) {
+                      const newRadius = Math.max(0, (point.size || scatterOptions.pointRadius || 4) * 1.5);
+                      e.currentTarget.setAttribute('r', String(newRadius));
+                    }
+                    const rect = e.currentTarget.getBoundingClientRect();
+                    handlers.onPointHover(
+                      datasetIndex,
+                      pointIndex,
+                      x,
+                      y,
+                      rect.left + rect.width / 2,
+                      rect.top + rect.height / 2
+                    );
+                  }}
+                  onMouseLeave={e => {
+                    if (scatterOptions.enableHoverEffects) {
+                      const originalRadius = Math.max(0, point.size || scatterOptions.pointRadius || 4);
+                      e.currentTarget.setAttribute('r', String(originalRadius));
+                    }
+                    handlers.onPointLeave();
+                  }}
+                />
+                {scatterOptions.showLabels && point.label && (
+                  <text x={x} y={y - 10} textAnchor="middle" className="c-chart__scatter-label">
+                    {String(point.label).replace(/[<>&"']/g, (char) => {
+                      const entities: Record<string, string> = {
+                        '<': '&lt;',
+                        '>': '&gt;',
+                        '&': '&amp;',
+                        '"': '&quot;',
+                        "'": '&#x27;'
+                      };
+                      return entities[char] || char;
+                    })}
+                  </text>
+                )}
+              </g>
+            );
+          });
+        });
 
-              return <>{points}</>;
-            }}
-          />
-          {hoveredPoint && datasets[hoveredPoint.datasetIndex]?.data?.[hoveredPoint.pointIndex] && (
-            <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>
+        return (
+          <>
+            {points}
+            {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 (
+        <BaseChart
+          ref={ref}
+          type="scatter"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )