@moderneinc/react-charts 1.2.0-next.2d0a72 → 1.2.0-next.2f2ee2

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

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { ChronoChartProps } from './chrono-chart.types';
+export declare const ChronoChart: FunctionComponent<ChronoChartProps>;

package/dist/components/{chrono-perspective-chart/chrono-perspective-chart.types.d.ts → chrono-chart/chrono-chart.types.d.ts}

@@ -1,6 +1,6 @@
 import { TimelineEvent } from '../timeline-chart/timeline-chart.types';
-export type ChronoPerspectiveMode = 'point-in-time' | 'historical';
-export type ChronoPerspectiveCategory = {
+export type ChronoMode = 'point-in-time' | 'historical';
+export type ChronoCategory = {
     id: string;
     label: string;
     color: string;
@@ -9,14 +9,14 @@ export type ChronoPerspectiveCategory = {
         hatchPattern?: string;
     };
 };
-export type ChronoPerspectiveData = {
+export type ChronoData = {
     timeSeries: Array<{
         timestamp: number;
         values: Record<string, number>;
     }>;
-    categories: ChronoPerspectiveCategory[];
+    categories: ChronoCategory[];
     metadata: {
-        totalRepositories: number;
+        total: number;
         specialCounts?: {
             notApplicable: number;
             noLst: number;
@@ -25,17 +25,12 @@ export type ChronoPerspectiveData = {
     };
     events?: TimelineEvent[];
 };
-export type ChronoPerspectiveChartProps = {
-    data: ChronoPerspectiveData;
-    /**
-     * @deprecated Use selectedIndex instead. Will be removed in next major version.
-     * Mode prop kept for backward compatibility only.
-     */
-    mode?: ChronoPerspectiveMode;
+export type ChronoChartProps = {
+    data: ChronoData;
     /**
      * Index of the time series data point to display in point-in-time mode.
      * - If set: Chart shows point-in-time view for data at this index
-     * - If undefined: Chart shows historical view
+     * - If undefined: Chart shows historical view (default)
      * - If data.timeSeries.length === 1: Automatically shows point-in-time mode
      *
      * Note: Changing selectedIndex does NOT trigger animation. Animation only
@@ -45,6 +40,7 @@ export type ChronoPerspectiveChartProps = {
     title?: string;
     subtitle?: string;
     showHeader?: boolean;
+    width?: number;
     height?: number;
     timeRange?: [number, number];
     onTimeRangeChange?: (range: [number, number]) => void;

package/dist/components/{chrono-perspective-chart → chrono-chart}/components/category-table.types.d.ts

@@ -5,9 +5,13 @@ export type CategoryTableItem = {
     percentage: number;
     color: string;
     tooltip?: string;
+    max?: number;
+    min?: number;
 };
 export type CategoryTableProps = {
     categories: CategoryTableItem[];
     activeCategory: string | null;
     onCategoryHover: (categoryId: string | null) => void;
+    mode: 'point-in-time' | 'historical';
+    visible?: boolean;
 };

package/dist/components/chrono-chart/utils/data-transformer.d.ts

@@ -0,0 +1,9 @@
+import { MorphChartCategory, MorphChartDataPoint } from '../../morph-chart/morph-chart.types';
+import { ChronoData } from '../chrono-chart.types';
+import { CategoryTableItem } from '../components/category-table.types';
+export declare const extractLatestValues: (data: ChronoData, mode?: "point-in-time" | "historical") => CategoryTableItem[];
+export declare const transformToMorphChart: (data: ChronoData) => {
+    data: MorphChartDataPoint[];
+    categories: MorphChartCategory[];
+};
+export declare const validateChronoData: (data: ChronoData) => void;

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

@@ -11,6 +11,7 @@ export type D3StackedAreaCategory = {
     label: string;
     color: string;
     strokeWidth?: number;
+    strokeDasharray?: string;
     fillOpacity?: number;
 };
 export type D3StackedAreaChartProps = {
@@ -18,6 +19,16 @@ export type D3StackedAreaChartProps = {
     data: D3StackedAreaDataPoint[];
     /** Array of category definitions */
     categories: D3StackedAreaCategory[];
+    /** 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;
@@ -32,8 +43,12 @@ export type D3StackedAreaChartProps = {
     timeRange?: [number, number];
     /** Show grid lines */
     showGrid?: boolean;
-    /** Show axes */
+    /** Show axes (deprecated: use showXAxis and showYAxis instead) */
     showAxes?: boolean;
+    /** Show X-axis */
+    showXAxis?: boolean;
+    /** Show Y-axis */
+    showYAxis?: boolean;
     /** Enable animations */
     enableAnimation?: boolean;
     /** Animation duration */
@@ -46,12 +61,17 @@ export type D3StackedAreaChartProps = {
     onTimeRangeChange?: (range: [number, number]) => void;
     /** Enable brush selection */
     enableBrush?: boolean;
+    /** Zoom to selection - when true, brush clears after selection and expects chart to zoom via timeRange update */
+    zoomToSelection?: boolean;
     /** Markers (vertical lines for events) */
     markers?: Array<{
         timestamp: number;
         label?: string;
         color?: string;
+        strokeDasharray?: string;
     }>;
+    /** Marker visibility mode: 'hover' shows only nearest marker on hover, 'always' shows all markers */
+    markerVisibilityMode?: 'always' | 'hover';
     /** 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

@@ -14,8 +14,10 @@ type UseD3StackedAreaProps = {
     };
     timeRange?: [number, number];
     showGrid?: boolean;
-    showAxes?: boolean;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
     enableBrush?: boolean;
+    zoomToSelection?: boolean;
     onTimeRangeChange?: (range: [number, number]) => void;
     formatDate?: (timestamp: number) => string;
     formatValue?: (value: number) => string;
@@ -23,7 +25,10 @@ type UseD3StackedAreaProps = {
         timestamp: number;
         label?: string;
         color?: string;
+        strokeDasharray?: string;
     }>;
+    markerVisibilityMode?: 'always' | 'hover';
+    onMarkerHoverChange?: (isHovering: boolean) => void;
 };
-export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showAxes, enableBrush, onTimeRangeChange, formatDate, formatValue, markers }: UseD3StackedAreaProps) => void;
+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 {};

package/dist/components/morph-chart/hooks/shared/computations.d.ts

@@ -3,7 +3,8 @@ import { StageDurations } from './types';
  * Calculate stage durations from total animation duration
  *
  * Splits the total duration into proportional stages for smooth timing:
- * - 30% Seats to bar transformation
+ * - 27% Seats to bar transformation
+ * - 3% Pause to appreciate seat-to-bar transition
  * - 25% Bar slide to timeline + axes appear
  * - 25% Other bars grow from baseline
  * - 20% Bars morph to curved areas
@@ -15,9 +16,10 @@ import { StageDurations } from './types';
  * ```ts
  * const durations = calculateStageDurations(2000);
  * // {
- * //   seatsToBar: 600,           // 30%
+ * //   seatsToBar: 540,           // 27%
+ * //   crossFadePause: 60,        // 3%
  * //   barSlideToTimeline: 500,   // 25%
- * //   axesAndBarsGrow: 500,       // 25%
+ * //   axesAndBarsGrow: 500,      // 25%
  * //   barsToArea: 400            // 20%
  * // }
  * ```

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

@@ -9,8 +9,10 @@
  * Calculated as fractions of total duration for smooth timing
  */
 export type StageDurations = {
-    /** Frame 1→2: Seats directly transform to vertical bar (30% of total) */
+    /** Frame 1→2: Seats directly transform to vertical bar (27% of total) */
     seatsToBar: number;
+    /** Pause after cross-fade to appreciate seat-to-bar transition (3% of total) */
+    crossFadePause: number;
     /** Frame 2→3: Bar slides to timeline + axes/grid appear (25% of total) */
     barSlideToTimeline: number;
     /** Frame 3→4: Other bars grow from baseline (25% of total) */

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

@@ -35,10 +35,51 @@ type UseMorphChartProps = {
     hoveredCategory?: string | null;
     maxSeats?: number;
     parliamentTimestamp?: number;
+    enableBrush?: boolean;
+    onTimeRangeChange?: (range: [number, number]) => void;
+    showScaleIndicator?: boolean;
+    reposPerSeat?: number;
+    timelineEvents?: Array<{
+        timestamp: number;
+        eventName: string;
+        color?: string;
+    }>;
+    showTimeline?: boolean;
+    timelineHeight?: number;
+    timelineOffset?: number;
 };
-export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, formatDate, formatValue, markers: _markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp }: UseMorphChartProps) => {
+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) => {
     isMorphing: boolean;
     currentMode: MorphMode;
     hoveredCategory: string | null;
+    scaleIndicatorOpacity: number;
+    visibleMarkers: {
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    }[];
+    hoveredMarker: {
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    } | null;
+    setHoveredMarker: import('react').Dispatch<import('react').SetStateAction<{
+        timestamp: number;
+        label?: string;
+        color?: string;
+        x: number;
+    } | null>>;
+    hoveredTimelineEvent: {
+        timestamp: number;
+        eventName: string;
+        x: number;
+    } | null;
+    setHoveredTimelineEvent: import('react').Dispatch<import('react').SetStateAction<{
+        timestamp: number;
+        eventName: string;
+        x: number;
+    } | null>>;
 };
 export {};

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

@@ -94,6 +94,18 @@ export type MorphChartProps = {
      * If not provided, defaults to the rightmost (most recent) timestamp.
      */
     parliamentTimestamp?: number;
+    /** Timeline events to display below the x-axis (area mode only) */
+    timelineEvents?: Array<{
+        timestamp: number;
+        eventName: string;
+        color?: string;
+    }>;
+    /** Show timeline track (default: false) */
+    showTimeline?: boolean;
+    /** Timeline track height in pixels (default: 40) */
+    timelineHeight?: number;
+    /** Space between x-axis and timeline in pixels (default: 35) */
+    timelineOffset?: number;
 };
 /**
  * Seat position in parliament layout

package/dist/components/morph-chart/utils/area-renderer.d.ts

@@ -4,6 +4,7 @@ interface AreaRenderOptions {
     xScale: (value: Date) => number;
     yScale: (value: number) => number;
     addClasses?: boolean;
+    instanceId?: string;
 }
 interface StackedDataPoint {
     data: {

package/dist/components/morph-chart/utils/bar-renderer.d.ts

@@ -1,5 +1,3 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { Selection } from 'd3-selection';
 import { MorphChartCategory } from '../morph-chart.types';
 export type StackedBarSegment = {
     timestamp: number;
@@ -11,13 +9,6 @@ export type StackedBarSegment = {
     color: string;
     isSpecialCategory: boolean;
 };
-/**
- * Render stacked bars for all timestamps
- * Creates rect elements that can be animated in height and width
- * Bars are rendered as a Riemann sum (touching each other with no gaps)
- */
-export declare function renderStackedBars(svg: Selection<SVGGElement, unknown, null, undefined>, stackedData: StackedBarSegment[], xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>, _unusedBarWidth: number, // Keep for API compatibility but calculate dynamically
-_instanceId: string): void;
 /**
  * Generate stacked bar data from time series
  * Converts raw data into stacked segments for bar rendering

package/dist/components/morph-chart/utils/parliament-renderer.d.ts

@@ -9,6 +9,8 @@ interface ParliamentRenderOptions {
     centerX: number;
     centerY: number;
     addClasses?: boolean;
+    instanceId?: string;
+    parliamentRadius?: number;
 }
 /**
  * Render parliament seats into an SVG container

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

@@ -42,6 +42,13 @@ export type TimelineChartProps = {
     selectedRange?: TimelineSelection;
     /** Height of the timeline container in pixels (default: 32) */
     height?: number;
+    /** Margin around the timeline drawable area (for alignment with other charts) */
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
     /** Custom date formatter */
     formatDate?: (timestamp: number) => string;
     /** Custom month/year formatter */