@moderneinc/react-charts 1.2.0-next.fe4657 → 1.3.0-next.2608df

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) */

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,95 @@
+/**
+ * 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;
+};
+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/stacked-area-with-timeline/hooks/use-stacked-area-with-timeline.hook.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from 'react';
 import { D3StackedAreaCategory } from '../../d3-stacked-area-chart/d3-stacked-area-chart.types';
 import { HoveredData, HoveredMarker, HoveredTimelineEvent, StackedAreaDataPoint, TimelineEvent } from '../stacked-area-with-timeline.types';
-export type UseStackedAreaWithTimelineOptions = {
+type UseStackedAreaWithTimelineOptions = {
     containerRef: RefObject<SVGSVGElement | null>;
     data: StackedAreaDataPoint[];
     categories: D3StackedAreaCategory[];
@@ -38,15 +38,16 @@ export type UseStackedAreaWithTimelineOptions = {
     hoveredCategory?: string | null;
     onTimelineEventHover?: (event: HoveredTimelineEvent) => void;
 };
-export type VisibleMarker = {
+type VisibleMarker = {
     timestamp: number;
     label?: string;
     color?: string;
     x: number;
 };
-export type UseStackedAreaWithTimelineResult = {
+type UseStackedAreaWithTimelineResult = {
     hoveredTimelineEvent: HoveredTimelineEvent;
     hoveredMarker: HoveredMarker;
     visibleMarkers: VisibleMarker[];
 };
 export declare const useStackedAreaWithTimeline: ({ containerRef, data, categories, width, height, margin, timelineEvents, showTimeline, timelineHeight, timelineOffset, timeRange, showGrid, showAxes, axisLabelColor, axisLabelSize, enableBrush, onTimeRangeChange, minAllowedTime, maxAllowedTime, brushColor, formatDate, formatValue, markers, onHoveredDataChange, hoveredCategory, onTimelineEventHover }: UseStackedAreaWithTimelineOptions) => UseStackedAreaWithTimelineResult;
+export {};

package/dist/components/stacked-area-with-timeline/utils/render-timeline-track.d.ts

@@ -1,16 +1,7 @@
 import { ScaleTime } from 'd3-scale';
 import { Selection } from 'd3-selection';
-export type TimelineEvent = {
-    timestamp: number;
-    eventName: string;
-    color?: string;
-};
-export type HoveredTimelineEvent = {
-    timestamp: number;
-    eventName: string;
-    x: number;
-} | null;
-export type RenderTimelineTrackOptions = {
+import { HoveredTimelineEvent, TimelineEvent } from '../stacked-area-with-timeline.types';
+type RenderTimelineTrackOptions = {
     /** D3 SVG selection */
     svg: Selection<SVGSVGElement, unknown, null, undefined>;
     /** Timeline events to display */
@@ -52,3 +43,4 @@ export type RenderTimelineTrackOptions = {
  * - Double-click to reset to full time range
  */
 export declare function renderTimelineTrack({ svg, events, xScale, chartHeight, chartWidth, timelineHeight, timelineOffset, instanceId, setHoveredTimelineEvent, enableBrush, onTimeRangeChange, minAllowedTime, maxAllowedTime, brushColor, mainGroupSelector }: RenderTimelineTrackOptions): void;
+export {};