radiant-charts-core 0.2.0

package/src/tooltip/coordUtils.ts

@@ -0,0 +1,41 @@
+// Radiant Charts — Coordinate Space Utilities
+
+/**
+ * Convert chart-local pixel coordinates to viewport (clientX/Y) coordinates.
+ */
+export function chartLocalToViewport(
+  localX: number,
+  localY: number,
+  container: HTMLElement,
+): { x: number; y: number } {
+  const rect = container.getBoundingClientRect();
+  return { x: rect.left + localX, y: rect.top + localY };
+}
+
+/**
+ * Convert viewport coordinates to chart-local pixel coordinates.
+ */
+export function viewportToChartLocal(
+  vpX: number,
+  vpY: number,
+  container: HTMLElement,
+): { x: number; y: number } {
+  const rect = container.getBoundingClientRect();
+  return { x: vpX - rect.left, y: vpY - rect.top };
+}
+
+/**
+ * Convert scale-space coordinates (relative to seriesRect origin) to viewport.
+ */
+export function scalePointToViewport(
+  scaleX: number,
+  scaleY: number,
+  seriesRect: { x: number; y: number },
+  container: HTMLElement,
+): { x: number; y: number } {
+  const rect = container.getBoundingClientRect();
+  return {
+    x: rect.left + seriesRect.x + scaleX,
+    y: rect.top + seriesRect.y + scaleY,
+  };
+}

package/src/tooltip/index.ts

@@ -0,0 +1,18 @@
+export { TooltipStore } from './TooltipStore';
+export { TooltipStoreContext, useTooltipStore } from './TooltipContext';
+export { useChartTooltip } from './useChartTooltip';
+export type { ChartTooltipContext } from './useChartTooltip';
+export {
+  chartLocalToViewport,
+  viewportToChartLocal,
+  scalePointToViewport,
+} from './coordUtils';
+export type {
+  TooltipTrigger,
+  TooltipMode,
+  TooltipPositionMode,
+  TooltipDatumEntry,
+  TooltipState,
+  TooltipOptions,
+} from './types';
+export { DEFAULT_TOOLTIP_STATE } from './types';

package/src/tooltip/types.ts

@@ -0,0 +1,57 @@
+// Radiant Charts — Tooltip System Types
+
+export type TooltipTrigger = 'hover' | 'none';
+export type TooltipMode = 'shared' | 'item';
+export type TooltipPositionMode = 'follow-pointer' | 'snap-to-data' | 'fixed';
+
+export interface TooltipDatumEntry {
+  seriesIndex: number;
+  seriesId: string;
+  seriesType: string;
+  title: string;
+  color: string;
+  datum: Record<string, any>;
+  dataIndex: number;
+  xValue: any;
+  yValue: any;
+}
+
+export interface TooltipState {
+  active: boolean;
+  /** Raw mouse position — viewport-relative (clientX/Y) */
+  pointerX: number;
+  pointerY: number;
+  /** Snapped data-point position — viewport-relative, used as portal anchor */
+  anchorX: number;
+  anchorY: number;
+  /** Chart-local coordinates (relative to container top-left) */
+  localX: number;
+  localY: number;
+  /** Active data entries */
+  entries: TooltipDatumEntry[];
+  /** Shared X-axis label (for shared mode) */
+  sharedLabel: string | null;
+}
+
+export interface TooltipOptions {
+  enabled?: boolean;
+  trigger?: TooltipTrigger;
+  mode?: TooltipMode;
+  positionMode?: TooltipPositionMode;
+  delay?: { show?: number; hide?: number };
+  offset?: { x?: number; y?: number };
+  snap?: boolean;
+  shared?: boolean;
+}
+
+export const DEFAULT_TOOLTIP_STATE: TooltipState = {
+  active: false,
+  pointerX: 0,
+  pointerY: 0,
+  anchorX: 0,
+  anchorY: 0,
+  localX: 0,
+  localY: 0,
+  entries: [],
+  sharedLabel: null,
+};

package/src/tooltip/useChartTooltip.ts

@@ -0,0 +1,43 @@
+// Radiant Charts — Public useChartTooltip Hook
+
+import { useSyncExternalStore, useCallback } from 'react';
+import { useTooltipStore } from './TooltipContext';
+import { TooltipDatumEntry } from './types';
+
+export interface ChartTooltipContext {
+  active: boolean;
+  entries: TooltipDatumEntry[];
+  sharedLabel: string | null;
+  pointerX: number;
+  pointerY: number;
+  anchorX: number;
+  anchorY: number;
+  localX: number;
+  localY: number;
+  hide: () => void;
+}
+
+export function useChartTooltip(): ChartTooltipContext {
+  const store = useTooltipStore();
+
+  const state = useSyncExternalStore(
+    store.subscribe.bind(store),
+    store.getState.bind(store),
+    () => store.getState(),
+  );
+
+  const hide = useCallback(() => store.hide(), [store]);
+
+  return {
+    active: state.active,
+    entries: state.entries,
+    sharedLabel: state.sharedLabel,
+    pointerX: state.pointerX,
+    pointerY: state.pointerY,
+    anchorX: state.anchorX,
+    anchorY: state.anchorY,
+    localX: state.localX,
+    localY: state.localY,
+    hide,
+  };
+}