@moderneinc/react-charts 1.2.0-next.e6432a → 1.2.0-next.e86ce0

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

@@ -1,10 +1,4 @@
 import { TimelineEvent } from '../timeline-chart/timeline-chart.types';
-/**
- * Display mode for the ChronoChart.
- * - 'point-in-time': Shows a snapshot at a specific moment
- * - 'historical': Shows trends over time
- */
-export type ChronoMode = 'point-in-time' | 'historical';
 /**
  * Represents a data category with visual styling and optional parliament-specific mappings.
  */
@@ -82,6 +76,10 @@ export type ChronoChartProps = {
     timeRange?: [number, number];
     /** Callback when the time range changes (via brush or other interactions) */
     onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for time range selection (constrains brush selection) */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for time range selection (constrains brush selection) */
+    maxAllowedTime?: number;
     /** Enable brush selection for time range in historical mode */
     enableBrush?: boolean;
     /** Show the legend/category table */
@@ -90,6 +88,17 @@ export type ChronoChartProps = {
     showTooltip?: boolean;
     /** Show background grid lines */
     showGrid?: boolean;
+    /**
+     * Color for axis labels (dates on x-axis, values on y-axis).
+     * @default undefined (inherits from SVG default, typically black)
+     */
+    axisLabelColor?: string;
+    /**
+     * Font size for axis labels in pixels.
+     * Increase this value when displaying charts at smaller sizes (e.g., in dashboards).
+     * @default 14
+     */
+    axisLabelSize?: number;
     /** Enable animations when switching between modes */
     enableAnimation?: boolean;
     /** Duration of animations in milliseconds */
@@ -111,4 +120,10 @@ export type ChronoChartProps = {
     onTimelineReady?: (timeline: unknown) => void;
     /** Callback for animation progress updates */
     onAnimationProgress?: (progress: number, stage: string) => void;
+    /**
+     * Color for brush selection overlay in historical mode.
+     * Used for both the selection area and drag handles.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
 };

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

@@ -72,6 +72,12 @@ export type D3StackedAreaChartProps = {
     }>;
     /** Marker visibility mode: 'hover' shows only nearest marker on hover, 'always' shows all markers */
     markerVisibilityMode?: 'always' | 'hover';
+    /**
+     * Color for brush selection overlay.
+     * Used for both the selection area and drag handles.
+     * @default '#69b3a2'
+     */
+    brushColor?: 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

@@ -29,6 +29,7 @@ type UseD3StackedAreaProps = {
     }>;
     markerVisibilityMode?: 'always' | 'hover';
     onMarkerHoverChange?: (isHovering: boolean) => void;
+    brushColor?: string;
 };
-export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange }: 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 }: UseD3StackedAreaProps) => void;
 export {};

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

@@ -16,6 +16,8 @@ type UseMorphChartProps = {
     timeRange?: [number, number];
     showGrid?: boolean;
     showAxes?: boolean;
+    axisLabelColor?: string;
+    axisLabelSize?: number;
     formatDate?: (timestamp: number) => string;
     formatValue?: (value: number) => string;
     markers?: Array<{
@@ -37,6 +39,8 @@ type UseMorphChartProps = {
     parliamentTimestamp?: number;
     enableBrush?: boolean;
     onTimeRangeChange?: (range: [number, number]) => void;
+    minAllowedTime?: number;
+    maxAllowedTime?: number;
     showScaleIndicator?: boolean;
     reposPerSeat?: number;
     timelineEvents?: Array<{
@@ -47,8 +51,9 @@ type UseMorphChartProps = {
     showTimeline?: boolean;
     timelineHeight?: number;
     timelineOffset?: number;
+    brushColor?: string;
 };
-export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset }: 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 }: UseMorphChartProps) => {
     isMorphing: boolean;
     currentMode: MorphMode;
     hoveredCategory: string | null;

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

@@ -43,10 +43,25 @@ export type MorphChartProps = {
     showGrid?: boolean;
     /** Show axes */
     showAxes?: boolean;
+    /**
+     * Color for axis labels (dates on x-axis, values on y-axis).
+     * @default undefined (inherits from SVG default, typically black)
+     */
+    axisLabelColor?: string;
+    /**
+     * Font size for axis labels in pixels.
+     * Increase this value when displaying charts at smaller sizes (e.g., in dashboards).
+     * @default 14
+     */
+    axisLabelSize?: number;
     /** Enable brush selection */
     enableBrush?: boolean;
     /** Callback when time range changes */
     onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for time range selection (constrains brush selection) */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for time range selection (constrains brush selection) */
+    maxAllowedTime?: number;
     /** Format date for axis */
     formatDate?: (timestamp: number) => string;
     /** Format value for axis */
@@ -106,6 +121,12 @@ export type MorphChartProps = {
     timelineHeight?: number;
     /** Space between x-axis and timeline in pixels (default: 35) */
     timelineOffset?: number;
+    /**
+     * Color for brush selection overlay.
+     * Used for both the selection area and drag handles.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
 };
 /**
  * Seat position in parliament layout

package/dist/components/stacked-area-with-timeline/hooks/use-stacked-area-with-timeline.hook.d.ts

@@ -0,0 +1,53 @@
+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';
+type UseStackedAreaWithTimelineOptions = {
+    containerRef: RefObject<SVGSVGElement | null>;
+    data: StackedAreaDataPoint[];
+    categories: D3StackedAreaCategory[];
+    width: number;
+    height: number;
+    margin: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    timelineEvents?: TimelineEvent[];
+    showTimeline?: boolean;
+    timelineHeight?: number;
+    timelineOffset?: number;
+    timeRange?: [number, number];
+    showGrid?: boolean;
+    showAxes?: boolean;
+    axisLabelColor?: string;
+    axisLabelSize?: number;
+    enableBrush?: boolean;
+    onTimeRangeChange?: (range: [number, number]) => void;
+    minAllowedTime?: number;
+    maxAllowedTime?: number;
+    brushColor?: string;
+    formatDate?: (timestamp: number) => string;
+    formatValue?: (value: number) => string;
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+    }>;
+    onHoveredDataChange?: (data: HoveredData) => void;
+    hoveredCategory?: string | null;
+    onTimelineEventHover?: (event: HoveredTimelineEvent) => void;
+};
+type VisibleMarker = {
+    timestamp: number;
+    label?: string;
+    color?: string;
+    x: number;
+};
+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/stacked-area-with-timeline.component.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { StackedAreaWithTimelineProps } from './stacked-area-with-timeline.types';
+export declare const StackedAreaWithTimeline: FunctionComponent<StackedAreaWithTimelineProps>;

package/dist/components/stacked-area-with-timeline/stacked-area-with-timeline.types.d.ts

@@ -0,0 +1,97 @@
+import { D3StackedAreaCategory } from '../d3-stacked-area-chart/d3-stacked-area-chart.types';
+export type StackedAreaDataPoint = {
+    timestamp: number;
+    values: Record<string, number>;
+};
+export type TimelineEvent = {
+    timestamp: number;
+    eventName: string;
+    color?: string;
+};
+export type HoveredData = {
+    label: string;
+    value: number;
+    color: string;
+} | null;
+export type HoveredTimelineEvent = {
+    timestamp: number;
+    eventName: string;
+    x: number;
+} | null;
+export type HoveredMarker = {
+    timestamp: number;
+    label?: string;
+    color?: string;
+    x: number;
+} | null;
+export type StackedAreaWithTimelineProps = {
+    /** Time series data points */
+    data: StackedAreaDataPoint[];
+    /** Category definitions (colors, labels, data keys) */
+    categories: D3StackedAreaCategory[];
+    /** Timeline events to display below the chart */
+    timelineEvents?: TimelineEvent[];
+    /** Show the timeline track (default: true if timelineEvents provided) */
+    showTimeline?: boolean;
+    /** Height of the timeline track in pixels (default: 40) */
+    timelineHeight?: number;
+    /** Vertical space between chart and timeline in pixels (default: 35) */
+    timelineOffset?: number;
+    /** Chart width in pixels (default: 900) */
+    width?: number;
+    /** Chart height in pixels, not including timeline (default: 400) */
+    height?: number;
+    /** Chart margins */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /** Show grid lines (default: true) */
+    showGrid?: boolean;
+    /** Show axes (default: true) */
+    showAxes?: boolean;
+    /**
+     * Color for axis labels (dates on x-axis, values on y-axis).
+     * @default undefined (inherits from SVG default, typically black)
+     */
+    axisLabelColor?: string;
+    /**
+     * Font size for axis labels in pixels.
+     * Increase for smaller chart displays (e.g., dashboards).
+     * @default 14
+     */
+    axisLabelSize?: number;
+    /** Custom date formatter for x-axis */
+    formatDate?: (timestamp: number) => string;
+    /** Custom value formatter for y-axis */
+    formatValue?: (value: number) => string;
+    /** Time range to display [start, end] timestamps */
+    timeRange?: [number, number];
+    /** Enable brush selection for zooming/panning */
+    enableBrush?: boolean;
+    /** Callback when time range changes via brush */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for brush constraint */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for brush constraint */
+    maxAllowedTime?: number;
+    /**
+     * Color for brush selection overlay.
+     * @default '#69b3a2'
+     */
+    brushColor?: string;
+    /** Event markers (vertical lines on the main chart) */
+    markers?: Array<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+    }>;
+    /** Callback when a category is hovered */
+    onHoveredDataChange?: (data: HoveredData) => void;
+    /** Currently hovered category (for external highlighting control) */
+    hoveredCategory?: string | null;
+    /** Callback when a timeline event is hovered */
+    onTimelineEventHover?: (event: HoveredTimelineEvent) => void;
+};

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

@@ -0,0 +1,46 @@
+import { ScaleTime } from 'd3-scale';
+import { Selection } from 'd3-selection';
+import { HoveredTimelineEvent, TimelineEvent } from '../stacked-area-with-timeline.types';
+type RenderTimelineTrackOptions = {
+    /** D3 SVG selection */
+    svg: Selection<SVGSVGElement, unknown, null, undefined>;
+    /** Timeline events to display */
+    events: TimelineEvent[];
+    /** D3 time scale for x-axis */
+    xScale: ScaleTime<number, number>;
+    /** Height of the main chart area (timeline renders below this) */
+    chartHeight: number;
+    /** Width of the chart area */
+    chartWidth: number;
+    /** Height of the timeline track */
+    timelineHeight: number;
+    /** Vertical offset between chart and timeline */
+    timelineOffset: number;
+    /** Optional instance ID for unique CSS classes */
+    instanceId?: string;
+    /** Callback when an event is hovered */
+    setHoveredTimelineEvent: (event: HoveredTimelineEvent) => void;
+    /** Enable brush selection on timeline */
+    enableBrush?: boolean;
+    /** Callback when time range changes via brush */
+    onTimeRangeChange?: (range: [number, number]) => void;
+    /** Minimum allowed timestamp for brush constraint */
+    minAllowedTime?: number;
+    /** Maximum allowed timestamp for brush constraint */
+    maxAllowedTime?: number;
+    /** Color for brush selection overlay */
+    brushColor?: string;
+    /** CSS selector for the main chart group (default: '.main-chart-group') */
+    mainGroupSelector?: string;
+};
+/**
+ * Renders an interactive timeline track below a chart
+ *
+ * Features:
+ * - Event markers as vertical colored lines
+ * - Hover interactions with width expansion
+ * - Optional brush selection with constraint bounds
+ * - 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 {};

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

@@ -16,7 +16,7 @@ export type TimelineSelection = {
     end: number | null;
 };
 export type DragHandleType = 'start' | 'end' | 'body' | null;
-export type DragHandleVariant = 'arrow' | 'grip';
+type DragHandleVariant = 'arrow' | 'grip';
 export type TimelineChartSlotProps = {
     /** Props for the header container (Stack) */
     header?: StackProps;
@@ -153,3 +153,4 @@ export type TimelineSelectedEventsProps = {
     /** Primary color for event items */
     primaryColor?: string;
 };
+export {};