@shohojdhara/atomix 0.2.3 → 0.2.5

package/src/components/Chart/BubbleChart.tsx

@@ -1,6 +1,5 @@
-import { forwardRef, memo, useCallback, 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';
 
@@ -95,313 +94,138 @@ const BubbleChart = memo(
         sizeBasedColoring = false,
       } = bubbleOptions;
 
-      const [hoveredBubble, setHoveredBubble] = useState<{
-        index: number;
-        clientX: number;
-        clientY: number;
-      } | null>(null);
-
-      const renderContent = useCallback(
-        ({ scales, colors, handlers }: { scales: any; colors: any; handlers: any }) => {
-          if (!bubbleData.length) return null;
-
-          // Calculate scales
-          const xValues = bubbleData.map(d => d.x);
-          const yValues = bubbleData.map(d => d.y);
-          const sizeValues = bubbleData.map(d => d.size);
-
-          const xMin = Math.min(...xValues);
-          const xMax = Math.max(...xValues);
-          const yMin = Math.min(...yValues);
-          const yMax = Math.max(...yValues);
-          const sizeMin = Math.min(...sizeValues);
-          const sizeMax = Math.max(...sizeValues);
-
-          const padding = 60;
-          const chartWidth = scales.width - padding * 2;
-          const chartHeight = scales.height - padding * 2;
-
-          const xScale = (value: number) => padding + ((value - xMin) / (xMax - xMin)) * chartWidth;
-          const yScale = (value: number) =>
-            padding + chartHeight - ((value - yMin) / (yMax - yMin)) * chartHeight;
-          const sizeScale = (value: number) =>
-            minBubbleSize +
-            ((value - sizeMin) / (sizeMax - sizeMin)) * (maxBubbleSize - minBubbleSize);
-
-          // Generate bubbles
-          const bubbleElements = bubbleData.map((bubble, index) => {
-            const x = xScale(bubble.x);
-            const y = yScale(bubble.y);
-            const radius = sizeScale(bubble.size);
+      const datasets = [
+        {
+          label: 'Bubbles',
+          data: bubbleData,
+        },
+      ];
 
-            let bubbleColor = bubble.color;
-            if (!bubbleColor) {
-              if (sizeBasedColoring) {
-                const colorIndex = Math.floor(
-                  ((bubble.size - sizeMin) / (sizeMax - sizeMin)) * (colorScheme.length - 1)
-                );
-                bubbleColor = colorScheme[colorIndex];
-              } else {
-                bubbleColor = colorScheme[index % colorScheme.length];
-              }
+      const renderContent = ({
+        scales,
+        colors,
+        datasets: renderedDatasets,
+        handlers,
+        hoveredPoint,
+        toolbarState,
+        config: renderConfig,
+      }: ChartRenderContentParams) => {
+        if (!bubbleData.length) return null;
+
+        // Use toolbar state if available, fallback to config for backward compatibility
+        const showTooltips = toolbarState?.showTooltips ?? renderConfig?.showTooltips ?? true;
+
+        // Calculate bubble sizes based on data
+        const sizeValues = bubbleData.map(b => b.size);
+        const minSize = Math.min(...sizeValues);
+        const maxSize = Math.max(...sizeValues);
+        const sizeRange = maxSize - minSize || 1; // Avoid division by zero
+
+        const bubbles = bubbleData.map((bubble, index) => {
+          // Calculate scaled size
+          const scaledSize =
+            minBubbleSize + ((bubble.size - minSize) / sizeRange) * (maxBubbleSize - minBubbleSize);
+
+          // Calculate position
+          const x = scales.padding.left + (bubble.x / 100) * scales.innerWidth;
+          const y = scales.padding.top + scales.innerHeight - (bubble.y / 100) * scales.innerHeight;
+
+          // Determine color
+          let bubbleColor = bubble.color;
+          if (!bubbleColor) {
+            if (sizeBasedColoring) {
+              // Color based on size
+              const colorIndex = Math.floor(
+                (colorScheme.length - 1) * ((bubble.size - minSize) / sizeRange)
+              );
+              bubbleColor = colorScheme[colorIndex];
+            } else {
+              // Use color scheme cyclically
+              bubbleColor = colorScheme[index % colorScheme.length];
             }
+          }
 
-            const elements = [];
+          const isHovered = hoveredPoint?.pointIndex === index;
 
-            // Bubble circle
-            elements.push(
+          return (
+            <g key={`bubble-${index}`}>
               <circle
-                key={`bubble-${index}`}
                 cx={x}
                 cy={y}
-                r={radius}
+                r={scaledSize}
                 fill={bubbleColor}
-                className={`c-chart__bubble ${enableAnimations ? 'c-chart__bubble--animated' : ''}`}
-                style={{ opacity: bubbleOpacity }}
-                onClick={() => handlers.onDataPointClick?.(bubble as any, 0, index)}
+                opacity={bubbleOpacity}
+                className={`c-chart__bubble ${isHovered ? 'c-chart__bubble--hovered' : ''}`}
+                style={enableAnimations ? { transition: `all ${animationDuration}ms ease` } : {}}
+                onClick={() => handlers.onDataPointClick?.(bubble, 0, index)}
                 onMouseEnter={e => {
-                  const rect = e.currentTarget.ownerSVGElement?.getBoundingClientRect();
-                  const clientX = rect ? rect.left + x : e.clientX;
-                  const clientY = rect ? rect.top + y : e.clientY;
-                  setHoveredBubble({ index, clientX, clientY });
+                  const rect = e.currentTarget.getBoundingClientRect();
+                  handlers.onPointHover(
+                    0,
+                    index,
+                    x,
+                    y,
+                    rect.left + rect.width / 2,
+                    rect.top + rect.height / 2
+                  );
                 }}
-                onMouseLeave={() => setHoveredBubble(null)}
+                onMouseLeave={handlers.onPointLeave}
               />
-            );
-
-            // Bubble label
-            if (showLabels) {
-              let labelX = x;
-              let labelY = y;
-              let textAnchor: 'start' | 'middle' | 'end' = 'middle';
-              let dominantBaseline: 'auto' | 'middle' | 'hanging' = 'middle';
-
-              switch (labelPosition) {
-                case 'top':
-                  labelY = y - radius - 5;
-                  dominantBaseline = 'auto';
-                  break;
-                case 'bottom':
-                  labelY = y + radius + 15;
-                  dominantBaseline = 'hanging';
-                  break;
-                case 'left':
-                  labelX = x - radius - 5;
-                  textAnchor = 'end';
-                  break;
-                case 'right':
-                  labelX = x + radius + 5;
-                  textAnchor = 'start';
-                  break;
-                case 'center':
-                default:
-                  // Keep center position
-                  break;
-              }
-
-              elements.push(
-                <text
-                  key={`label-${index}`}
-                  x={labelX}
-                  y={labelY}
-                  textAnchor={textAnchor}
-                  dominantBaseline={dominantBaseline}
-                  className={`c-chart__bubble-label ${labelPosition === 'center' ? 'c-chart__bubble-label--center' : ''}`}
-                >
-                  {bubble.label}
-                </text>
-              );
-            }
-
-            return <g key={`bubble-group-${index}`}>{elements}</g>;
-          });
-
-          // Generate axes
-          const axisElements = [];
-
-          // X-axis
-          axisElements.push(
-            <line
-              key="x-axis"
-              x1={padding}
-              y1={scales.height - padding}
-              x2={scales.width - padding}
-              y2={scales.height - padding}
-              className="c-chart__axis-line c-chart__axis-line--x"
-            />
-          );
-
-          // Y-axis
-          axisElements.push(
-            <line
-              key="y-axis"
-              x1={padding}
-              y1={padding}
-              x2={padding}
-              y2={scales.height - padding}
-              className="c-chart__axis-line c-chart__axis-line--y"
-            />
-          );
-
-          // X-axis labels
-          const xTicks = 5;
-          for (let i = 0; i <= xTicks; i++) {
-            const value = xMin + (i / xTicks) * (xMax - xMin);
-            const x = xScale(value);
-
-            axisElements.push(
-              <g key={`x-tick-${i}`}>
-                <line
-                  x1={x}
-                  y1={scales.height - padding}
-                  x2={x}
-                  y2={scales.height - padding + 5}
-                  className="c-chart__tick-line"
-                />
+              {showLabels && (
                 <text
                   x={x}
-                  y={scales.height - padding + 20}
-                  textAnchor="middle"
-                  className="c-chart__tick-label"
-                >
-                  {value.toFixed(1)}
-                </text>
-              </g>
-            );
-          }
-
-          // Y-axis labels
-          const yTicks = 5;
-          for (let i = 0; i <= yTicks; i++) {
-            const value = yMin + (i / yTicks) * (yMax - yMin);
-            const y = yScale(value);
-
-            axisElements.push(
-              <g key={`y-tick-${i}`}>
-                <line x1={padding - 5} y1={y} x2={padding} y2={y} className="c-chart__tick-line" />
-                <text
-                  x={padding - 10}
                   y={y}
-                  textAnchor="end"
-                  dominantBaseline="middle"
-                  className="c-chart__tick-label"
-                >
-                  {value.toFixed(1)}
-                </text>
-              </g>
-            );
-          }
-
-          // Size legend
-          const legendElements = [];
-          if (showSizeLegend) {
-            const legendX = scales.width - 120;
-            const legendY = 30;
-
-            legendElements.push(
-              <g key="size-legend">
-                <text
-                  x={legendX}
-                  y={legendY}
-                  fontSize="12"
-                  fontWeight="bold"
-                  fill="var(--atomix-gray-8)"
+                  textAnchor="middle"
+                  dominantBaseline={
+                    labelPosition === 'center'
+                      ? 'middle'
+                      : labelPosition === 'top'
+                        ? 'text-before-edge'
+                        : 'text-after-edge'
+                  }
+                  className="c-chart__bubble-label"
                 >
-                  {sizeLegendTitle}
+                  {bubble.label}
                 </text>
-
-                {[sizeMin, (sizeMin + sizeMax) / 2, sizeMax].map((size, i) => {
-                  const radius = sizeScale(size);
-                  const y = legendY + 20 + i * 30;
-
-                  return (
-                    <g key={`legend-${i}`}>
-                      <circle
-                        cx={legendX + 15}
-                        cy={y}
-                        r={radius / 2}
-                        fill="var(--atomix-gray-5)"
-                        opacity="0.7"
-                      />
-                      <text
-                        x={legendX + 35}
-                        y={y}
-                        dominantBaseline="middle"
-                        fontSize="10"
-                        fill="var(--atomix-gray-6)"
-                      >
-                        {size.toFixed(0)}
-                      </text>
-                    </g>
-                  );
-                })}
-              </g>
-            );
-          }
-
-          return (
-            <g>
-              {axisElements}
-              {bubbleElements}
-              {legendElements}
+              )}
             </g>
           );
-        },
-        [
-          bubbleData,
-          minBubbleSize,
-          maxBubbleSize,
-          bubbleOpacity,
-          showLabels,
-          labelPosition,
-          enableAnimations,
-          animationDuration,
-          showSizeLegend,
-          sizeLegendTitle,
-          colorScheme,
-          sizeBasedColoring,
-        ]
-      );
-
-      // Convert bubble data to datasets format for ChartRenderer
-      const datasets = [
-        {
-          label: 'Bubble Data',
-          data: bubbleData.map(bubble => ({
-            label: bubble.label,
-            value: bubble.size,
-            x: bubble.x,
-            y: bubble.y,
-          })),
-        },
-      ];
+        });
+
+        return (
+          <>
+            {bubbles}
+            {showTooltips &&
+              hoveredPoint &&
+              hoveredPoint.pointIndex < bubbleData.length && (
+                <ChartTooltip
+                  dataPoint={bubbleData[hoveredPoint.pointIndex]}
+                  datasetLabel="Bubbles"
+                  datasetColor={
+                    bubbleData[hoveredPoint.pointIndex]?.color ||
+                    colorScheme[hoveredPoint.pointIndex % colorScheme.length]
+                  }
+                  position={{
+                    x: hoveredPoint.clientX,
+                    y: hoveredPoint.clientY,
+                  }}
+                  visible={true}
+                />
+              )}
+          </>
+        );
+      };
 
       return (
-        <Chart ref={ref} type="bubble" datasets={datasets} config={config} {...props}>
-          <ChartRenderer
-            datasets={datasets}
-            config={config}
-            onDataPointClick={onDataPointClick}
-            renderContent={renderContent}
-          />
-          {hoveredBubble && bubbleData[hoveredBubble.index] && (
-            <ChartTooltip
-              dataPoint={{
-                label: bubbleData[hoveredBubble.index]?.label || '',
-                value: bubbleData[hoveredBubble.index]?.size || 0,
-                metadata: {
-                  x: bubbleData[hoveredBubble.index]?.x,
-                  y: bubbleData[hoveredBubble.index]?.y,
-                  ...bubbleData[hoveredBubble.index]?.metadata,
-                },
-              }}
-              datasetLabel="Bubble Data"
-              datasetColor={bubbleData[hoveredBubble.index]?.color}
-              position={{ x: hoveredBubble.clientX, y: hoveredBubble.clientY }}
-              visible={true}
-            />
-          )}
-        </Chart>
+        <BaseChart
+          ref={ref}
+          type="bubble"
+          datasets={datasets}
+          config={config}
+          renderContent={renderContent}
+          onDataPointClick={onDataPointClick}
+          {...props}
+        />
       );
     }
   )