@moderneinc/react-charts 1.3.0 → 1.4.0-next.3ca97d

package/dist/components/chrono-chart/chrono-chart.types.d.ts

@@ -126,4 +126,20 @@ export type ChronoChartProps = {
      * @default '#69b3a2'
      */
     brushColor?: string;
+    /**
+     * Show crosshair cursor on hover (historical mode only).
+     * Crosshairs are hidden during morphing transitions.
+     * @default true
+     */
+    showCrosshair?: boolean;
+    /**
+     * Color for crosshair lines.
+     * @default '#666'
+     */
+    crosshairColor?: string;
+    /**
+     * Dash array pattern for crosshair lines.
+     * @default '4,4'
+     */
+    crosshairDashArray?: string;
 };

package/dist/components/d3-stacked-area-chart/d3-stacked-area-chart.types.d.ts

@@ -2,6 +2,14 @@
  * D3-based stacked area chart types
  * Built for seamless morphing with parliament chart
  */
+export type HoveredAreaData = {
+    timestamp: number;
+    category: {
+        label: string;
+        color: string;
+    };
+    value: number;
+};
 export type D3StackedAreaDataPoint = {
     timestamp: number;
     [category: string]: number;
@@ -78,6 +86,18 @@ export type D3StackedAreaChartProps = {
      * @default '#69b3a2'
      */
     brushColor?: string;
+    /** Show crosshair cursor on hover */
+    showCrosshair?: boolean;
+    /**
+     * Color for crosshair lines
+     * @default '#666'
+     */
+    crosshairColor?: string;
+    /**
+     * Dash array pattern for crosshair lines
+     * @default '4,4'
+     */
+    crosshairDashArray?: string;
     /** Mode for morphing animation */
     morphMode?: 'area' | 'parliament' | 'morphing';
     /** Parliament layout data (for morphing) */
@@ -92,4 +112,17 @@ export type D3StackedAreaChartProps = {
     };
     /** Morph progress (0 = area, 1 = parliament) */
     morphProgress?: number;
+    /**
+     * Scale factor for tooltip size. Use values like 0.8 for 80% size, 1.2 for 120% size.
+     * Affects font sizes, padding, spacing, and color bar width proportionally.
+     * @default 1
+     */
+    tooltipScale?: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * Use this when the chart is placed inside a container with overflow:hidden.
+     * @default false
+     */
+    usePortalTooltip?: boolean;
 };

package/dist/components/d3-stacked-area-chart/hooks/use-d3-stacked-area.hook.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { D3StackedAreaCategory, D3StackedAreaDataPoint } from '../d3-stacked-area-chart.types';
+import { D3StackedAreaCategory, D3StackedAreaDataPoint, HoveredAreaData } from '../d3-stacked-area-chart.types';
 type UseD3StackedAreaProps = {
     containerRef: RefObject<SVGSVGElement>;
     data: D3StackedAreaDataPoint[];
@@ -30,6 +30,14 @@ type UseD3StackedAreaProps = {
     markerVisibilityMode?: 'always' | 'hover';
     onMarkerHoverChange?: (isHovering: boolean) => void;
     brushColor?: string;
+    showCrosshair?: boolean;
+    crosshairColor?: string;
+    crosshairDashArray?: string;
+    onHoveredAreaChange?: (data: HoveredAreaData | null) => void;
+    onCrosshairMove?: (position: {
+        x: number;
+        y: number;
+    } | null) => void;
 };
-export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange, brushColor }: UseD3StackedAreaProps) => void;
+export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange, brushColor, showCrosshair, onHoveredAreaChange, onCrosshairMove }: UseD3StackedAreaProps) => void;
 export {};

package/dist/components/d3-stacked-bar-chart/d3-stacked-bar-chart.component.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+import { D3StackedBarChartProps } from './d3-stacked-bar-chart.types';
+/**
+ * D3-based stacked bar chart component
+ * Timeline-based bar chart with crosshair cursor and brush selection
+ */
+export declare const D3StackedBarChart: FunctionComponent<D3StackedBarChartProps>;

package/dist/components/d3-stacked-bar-chart/d3-stacked-bar-chart.types.d.ts

@@ -0,0 +1,116 @@
+/**
+ * D3-based stacked bar chart types
+ * Timeline-based bar chart with crosshair cursor and brush selection
+ */
+export type D3StackedBarDataPoint = {
+    timestamp: number;
+    [category: string]: number;
+};
+export type D3StackedBarCategory = {
+    dataKey: string;
+    label: string;
+    color: string;
+    fillOpacity?: number;
+};
+export type D3StackedBarChartProps = {
+    /** Array of data points sorted by timestamp */
+    data: D3StackedBarDataPoint[];
+    /** Array of category definitions */
+    categories: D3StackedBarCategory[];
+    /** Chart title */
+    title?: string;
+    /** Chart subtitle */
+    subtitle?: string;
+    /** Show header (title and subtitle) */
+    showHeader?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltips on hover */
+    showTooltip?: boolean;
+    /** Chart dimensions */
+    width?: number;
+    height?: number;
+    /** Margins for axes */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Time range for x-axis */
+    timeRange?: [number, number];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show axes (deprecated: use showXAxis and showYAxis instead) */
+    showAxes?: boolean;
+    /** Show X-axis */
+    showXAxis?: boolean;
+    /** Show Y-axis */
+    showYAxis?: boolean;
+    /** Format date for axis and tooltip */
+    formatDate?: (timestamp: number) => string;
+    /** Format value for axis and tooltip */
+    formatValue?: (value: number) => string;
+    /** Callback when time range changes */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Enable brush selection */
+    enableBrush?: boolean;
+    /** Zoom to selection - when true, brush clears after selection */
+    zoomToSelection?: boolean;
+    /**
+     * Color for brush selection overlay.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
+    /** Show crosshair cursor on hover */
+    showCrosshair?: boolean;
+    /**
+     * Color for crosshair lines
+     * @default '#666'
+     */
+    crosshairColor?: string;
+    /**
+     * Dash array pattern for crosshair lines
+     * @default '4,4'
+     */
+    crosshairDashArray?: string;
+    /**
+     * Minimum bar width in pixels. Overrides the automatic minimum width behavior.
+     * When not specified, the chart auto-applies a 2px minimum for time ranges > 3 months.
+     * Set to 0 to disable minimum width entirely.
+     */
+    minBarWidth?: number;
+    /**
+     * Scale factor for tooltip size. Use values like 0.8 for 80% size, 1.2 for 120% size.
+     * Affects font sizes, padding, spacing, and color bar width proportionally.
+     * @default 1
+     */
+    tooltipScale?: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * Use this when the chart is placed inside a container with overflow:hidden.
+     * @default false
+     */
+    usePortalTooltip?: boolean;
+    /**
+     * Where to anchor the tooltip relative to the crosshair.
+     * - 'cursor': Position near the cursor/crosshair intersection (default)
+     * - 'top': Position at the top of the chart, centered on the crosshair X
+     * - 'bottom-corner': Position at lower-left or lower-right of crosshair intersection
+     * @default 'cursor'
+     */
+    tooltipAnchor?: 'cursor' | 'top' | 'bottom-corner';
+};
+export type TooltipData = {
+    visible: boolean;
+    x: number;
+    y: number;
+    category: {
+        label: string;
+        color: string;
+    };
+    value: number;
+    startTime: number;
+    endTime: number;
+};

package/dist/components/d3-stacked-bar-chart/hooks/use-d3-stacked-bar.hook.d.ts

@@ -0,0 +1,36 @@
+import { RefObject } from 'react';
+import { D3StackedBarCategory, D3StackedBarDataPoint, TooltipData } from '../d3-stacked-bar-chart.types';
+type UseD3StackedBarProps = {
+    containerRef: RefObject<SVGSVGElement | null>;
+    data: D3StackedBarDataPoint[];
+    categories: D3StackedBarCategory[];
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    timeRange?: [number, number];
+    showGrid?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    enableBrush?: boolean;
+    zoomToSelection?: boolean;
+    onTimeRangeChange?: (range: [number, number]) => void;
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    showCrosshair?: boolean;
+    crosshairColor?: string;
+    crosshairDashArray?: string;
+    brushColor?: string;
+    onTooltipChange?: (tooltip: TooltipData | null) => void;
+    minBarWidth?: number;
+    onCrosshairPositionChange?: (position: {
+        x: number;
+        y: number;
+    } | null) => void;
+};
+export declare const useD3StackedBar: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, showCrosshair, brushColor, onTooltipChange, minBarWidth, onCrosshairPositionChange }: UseD3StackedBarProps) => void;
+export {};

package/dist/components/morph-chart/hooks/use-morph-chart.hook.d.ts

@@ -52,8 +52,13 @@ type UseMorphChartProps = {
     timelineHeight?: number;
     timelineOffset?: number;
     brushColor?: string;
+    showCrosshair?: boolean;
+    onCrosshairMove?: (position: {
+        x: number;
+        y: number;
+    } | null) => void;
 };
-export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor }: UseMorphChartProps) => {
+export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor, showCrosshair, onCrosshairMove }: UseMorphChartProps) => {
     isMorphing: boolean;
     currentMode: MorphMode;
     hoveredCategory: string | null;

package/dist/components/morph-chart/morph-chart.types.d.ts

@@ -127,6 +127,22 @@ export type MorphChartProps = {
      * @default '#69b3a2'
      */
     brushColor?: string;
+    /**
+     * Show crosshair cursor on hover (area mode only).
+     * Crosshairs are hidden during morphing transitions.
+     * @default false
+     */
+    showCrosshair?: boolean;
+    /**
+     * Color for crosshair lines.
+     * @default '#666'
+     */
+    crosshairColor?: string;
+    /**
+     * Dash array pattern for crosshair lines.
+     * @default '4,4'
+     */
+    crosshairDashArray?: string;
 };
 /**
  * Seat position in parliament layout

package/dist/components/shared/chart-tooltip.component.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from 'react';
+import { ChartTooltipProps } from './chart-tooltip.types';
+/**
+ * Chart tooltip component that supports both inline and portal rendering modes.
+ *
+ * Coordinates are provided in SVG viewBox space and transformed to pixel coordinates
+ * based on the actual rendered size of the container.
+ *
+ * When `usePortal` is false (default), the tooltip renders with `position: absolute`
+ * relative to the chart container - this can be clipped by parent overflow settings.
+ *
+ * When `usePortal` is true, the tooltip renders in a React Portal (document.body)
+ * with `position: fixed`, escaping any container overflow constraints.
+ */
+export declare const ChartTooltip: FunctionComponent<ChartTooltipProps>;

package/dist/components/shared/chart-tooltip.types.d.ts

@@ -0,0 +1,62 @@
+import { RefObject } from 'react';
+export type ChartTooltipProps = {
+    /**
+     * Whether the tooltip is visible
+     */
+    visible: boolean;
+    /**
+     * X position in SVG viewBox coordinates
+     */
+    x: number;
+    /**
+     * Y position in SVG viewBox coordinates
+     */
+    y: number;
+    /**
+     * Reference to the chart container element for dimension calculations
+     */
+    containerRef: RefObject<HTMLElement | null>;
+    /**
+     * SVG viewBox width - required to transform viewBox coordinates to pixel coordinates
+     */
+    viewBoxWidth: number;
+    /**
+     * SVG viewBox height - required to transform viewBox coordinates to pixel coordinates
+     */
+    viewBoxHeight: number;
+    /**
+     * Render tooltip in a portal to escape container overflow constraints.
+     * When true, tooltip renders in document.body and positions relative to viewport.
+     * @default false
+     */
+    usePortal?: boolean;
+    /**
+     * Scale factor for tooltip size. Affects padding and base styles.
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * Width threshold in viewBox coordinates for horizontal flip.
+     * When x exceeds this value, tooltip flips to the left side of the cursor.
+     * Only applies when anchorPosition is 'cursor'.
+     */
+    flipThreshold?: number;
+    /**
+     * Where to anchor the tooltip relative to the crosshair.
+     * - 'cursor': Position near the cursor/crosshair intersection (default)
+     * - 'top': Position at the top of the chart, centered on the crosshair X
+     * - 'bottom-corner': Position at lower-left or lower-right of crosshair intersection
+     * @default 'cursor'
+     */
+    anchorPosition?: 'cursor' | 'top' | 'bottom-corner';
+    /**
+     * Top margin of the chart area in viewBox coordinates.
+     * Used when anchorPosition is 'top' to position tooltip correctly.
+     * @default 20
+     */
+    chartTopMargin?: number;
+    /**
+     * Tooltip content
+     */
+    children: React.ReactNode;
+};