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

package/dist/{components/stacked-area-chart/stacked-area-chart.constants.d.ts → theme/chart-palettes.d.ts}

@@ -1,3 +1,7 @@
+/**
+ * Generates gradient colors for categories, ordered from worst (red) to best (green).
+ */
+export declare function generateMeasureGradient(count: number): string[];
 /**
  * Default colors for stacked area chart categories
  * These colors are designed to work well together and provide good contrast
@@ -24,66 +28,6 @@ export declare const DEFAULT_STACKED_AREA_COLORS: {
     readonly light: "#EDEFEF";
     readonly dark: "#343a40";
 };
-/**
- * Default configuration for stacked area chart
- */
-export declare const DEFAULT_STACKED_AREA_CONFIG: {
-    readonly dimensions: {
-        readonly height: 400;
-        readonly width: "100%";
-        readonly minHeight: 200;
-    };
-    readonly margin: {
-        readonly top: 10;
-        readonly right: 30;
-        readonly left: 0;
-        readonly bottom: 0;
-    };
-    readonly animation: {
-        readonly enabled: true;
-        readonly duration: 1500;
-        readonly easing: "ease";
-    };
-    readonly display: {
-        readonly showHeader: true;
-        readonly showLegend: true;
-        readonly showTooltip: true;
-        readonly showXAxis: true;
-        readonly showYAxis: true;
-        readonly showGrid: true;
-    };
-    readonly curve: {
-        readonly type: "monotone";
-    };
-    readonly stack: {
-        readonly offset: "none";
-    };
-    readonly axis: {
-        readonly strokeColor: "#ADB5BD";
-        readonly tickColor: "#666";
-        readonly labelColor: "#666";
-    };
-    readonly tooltip: {
-        readonly backgroundColor: "rgba(255, 255, 255, 0.95)";
-        readonly borderColor: "#ADB5BD";
-        readonly borderWidth: 1;
-        readonly borderRadius: 4;
-        readonly padding: 10;
-    };
-    readonly legend: {
-        readonly iconSize: 14;
-        readonly iconType: "square";
-        readonly layout: "horizontal";
-        readonly align: "center";
-        readonly verticalAlign: "bottom";
-    };
-    readonly marker: {
-        readonly strokeColor: "#666";
-        readonly strokeWidth: 2;
-        readonly strokeDasharray: "5 5";
-        readonly labelColor: "#666";
-    };
-};
 /**
  * Predefined color palettes for common use cases
  */

package/dist/theme/timeline-defaults.d.ts

@@ -4,7 +4,7 @@ export declare const TIMELINE_DEFAULTS: {
         readonly primary: "#992FB9";
         readonly background: "#FFFFFF";
         readonly border: "#9CA3AF";
-        readonly highlightBackground: "rgba(229, 231, 235, 0.5)";
+        readonly highlightBackground: "rgba(31, 41, 55, 0.14)";
         readonly monthLabel: "#9ca3af";
         readonly tooltipText: "#6b7280";
     };
@@ -13,6 +13,17 @@ export declare const TIMELINE_DEFAULTS: {
         readonly eventWidth: 2;
     };
 };
+/**
+ * Get default slot props with arrow handle styling
+ */
+export declare const getArrowHandleSlotProps: (color?: string) => {
+    startHandle: {
+        sx: SxProps<Theme>;
+    };
+    endHandle: {
+        sx: SxProps<Theme>;
+    };
+};
 export declare const defaultSlotProps: {
     header: {
         sx: SxProps<Theme>;
@@ -38,6 +49,8 @@ export declare const defaultSlotProps: {
     selection: {
         sx: SxProps<Theme>;
     };
+    startHandle: {};
+    endHandle: {};
     tooltip: {
         sx: SxProps<Theme>;
     };
@@ -48,3 +61,14 @@ export declare const defaultSlotProps: {
         sx: SxProps<Theme>;
     };
 };
+/**
+ * Get grip handle slot props with custom color
+ */
+export declare const getGripHandleSlotProps: (color?: string) => {
+    startHandle: {
+        sx: SxProps<Theme>;
+    };
+    endHandle: {
+        sx: SxProps<Theme>;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moderneinc/react-charts",
-  "version": "1.2.0-next.e5d8ee",
+  "version": "1.2.0-next.e86ce0",
   "description": "Parliament chart visualization library for React",
   "type": "module",
   "devEngines": {
@@ -51,14 +51,14 @@
     "@mui/icons-material": ">=7.0.0",
     "@mui/material": ">=7.0.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "recharts": ">=2.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-brush": "^3.0.0",
+    "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
+    "d3-shape": "^3.2.0",
     "d3-transition": "^3.0.1",
     "gsap": "^3.13.0",
     "hast-util-to-html": "^9.0.5",
@@ -78,34 +78,27 @@
     "@storybook/addon-interactions": "^8.4.7",
     "@storybook/addon-links": "^8.4.7",
     "@storybook/addon-themes": "^8.4.7",
-    "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
-    "@types/d3-array": "^3.2.2",
     "@types/d3-axis": "^3.0.6",
     "@types/d3-brush": "^3.0.6",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-shape": "^3.1.7",
     "@types/d3-transition": "^3.0.9",
+    "@types/hast": "^3.0.4",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.44.0",
-    "@typescript-eslint/parser": "^8.44.0",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
     "eslint": "^9.36.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.1",
     "jsdom": "^27.0.0",
     "knip": "^5.66.4",
-    "playwright": "^1.56.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "recharts": "^2.15.0",
-    "semantic-release": "^24.2.0",
+    "semantic-release": "^25.0.2",
     "storybook": "^8.4.7",
     "typescript": "^5.9.2",
     "vite": "^6.0.11",

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

@@ -1,2 +0,0 @@
-export { MorphChart } from './morph-chart.component';
-export type { AreaLayout, AreaPoint, MorphChartCategory, MorphChartDataPoint, MorphChartProps, MorphMode, ParliamentLayout, SeatPosition } from './morph-chart.types';

package/dist/components/morph-chart/utils/animation-utils.d.ts

@@ -1,44 +0,0 @@
-/**
- * Utility functions for animation path manipulation
- * Shared helpers for creating SVG paths from bar geometries
- */
-/**
- * Create a rectangular SVG path from bar dimensions
- * Used as the initial state for path morphing animations
- *
- * @param x - Left edge x-coordinate of the rectangle
- * @param y - Top edge y-coordinate of the rectangle
- * @param width - Width of the rectangle
- * @param height - Height of the rectangle
- * @returns SVG path string representing a closed rectangle
- *
- * @example
- * ```ts
- * const path = createRectPath(100, 50, 20, 80);
- * // Returns: "M 100 130 L 100 50 L 120 50 L 120 130 Z"
- * ```
- */
-export declare function createRectPath(x: number, y: number, width: number, height: number): string;
-/**
- * Create a combined SVG path from multiple bar segments for a single category
- * Connects all bars into a single continuous path suitable for morphing
- *
- * The path traces along the top edges of all bars (left to right),
- * then closes along the bottom baseline, creating a unified shape.
- *
- * @param bars - Array of SVG rect elements to combine
- * @returns SVG path string representing the combined shape
- *
- * @example
- * ```ts
- * const bars = svg.selectAll('.category-java rect').nodes();
- * const combinedPath = createCombinedBarPath(bars);
- * // Returns path that traces outline of all bars
- * ```
- *
- * @remarks
- * - Bars are automatically sorted by x-position (left to right)
- * - Empty array returns empty string
- * - Path draws: bottom-left → tops (left-to-right) → bottom-right → close
- */
-export declare function createCombinedBarPath(bars: SVGRectElement[]): string;

package/dist/components/morph-chart/utils/arc-path-calculator.d.ts

@@ -1,53 +0,0 @@
-/**
- * Arc path calculator for slinky-style seat → bar animations
- * Generates pronounced bezier arc paths for smooth cascading motion
- */
-export interface Point {
-    x: number;
-    y: number;
-}
-export interface ArcPathData {
-    startX: number;
-    startY: number;
-    controlX: number;
-    controlY: number;
-    endX: number;
-    endY: number;
-    distance: number;
-}
-/**
- * Calculate the control point for a quadratic bezier curve
- * Creates a pronounced arc by offsetting perpendicular to the direct path
- *
- * @param start - Starting point (seat position)
- * @param end - Ending point (bar segment position)
- * @param arcIntensity - How pronounced the arc should be (0-1, default 0.35 for 35% offset)
- * @returns Control point for the bezier curve
- */
-export declare function calculateArcControlPoint(start: Point, end: Point, arcIntensity?: number): Point;
-/**
- * Generate complete arc path data for animating a seat to a bar position
- *
- * @param seatPosition - Current seat position in parliament
- * @param barPosition - Target bar segment position
- * @param arcIntensity - How pronounced the arc should be (default 0.35)
- * @returns Complete path data for GSAP animation
- */
-export declare function generateArcPath(seatPosition: Point, barPosition: Point, arcIntensity?: number): ArcPathData;
-/**
- * Generate SVG path string for a quadratic bezier arc
- * Useful for debugging or visual representation
- *
- * @param pathData - Arc path data
- * @returns SVG path string
- */
-export declare function generateSVGPath(pathData: ArcPathData): string;
-/**
- * Calculate points along a quadratic bezier curve
- * Useful for visualizing or debugging the arc path
- *
- * @param pathData - Arc path data
- * @param numPoints - Number of points to generate along the curve (default 20)
- * @returns Array of points along the curve
- */
-export declare function getPointsAlongArc(pathData: ArcPathData, numPoints?: number): Point[];

package/dist/components/morph-chart/utils/morph-interpolator.d.ts

@@ -1,96 +0,0 @@
-import { AreaPoint, SeatPosition } from '../morph-chart.types';
-/**
- * Interpolate between two numbers
- */
-export declare function lerp(start: number, end: number, progress: number): number;
-/**
- * Easing function for smooth morphing (ease-in-out cubic)
- */
-export declare function easeInOutCubic(t: number): number;
-/**
- * Easing function for elastic effect (optional, for more dramatic animation)
- */
-export declare function easeOutElastic(t: number): number;
-/**
- * Map parliament seats to their corresponding positions at the rightmost edge of the area chart
- * Seats should map to the vertical position in the stacked area based on their category
- *
- * @param seats - Parliament seat positions
- * @param areaSlice - Area chart data points at the rightmost time slice
- * @param chartWidth - Width of the area chart
- * @param chartHeight - Height of the area chart
- * @param margin - Chart margins
- */
-export declare function mapSeatsToRightEdge(seats: SeatPosition[], areaSlice: AreaPoint[], chartWidth: number, chartHeight: number): Map<SeatPosition, {
-    x: number;
-    y: number;
-}>;
-/**
- * Calculate interpolated seat position during parliament → area morphing
- *
- * Phase 1 (0.0 - 0.5): Seats move from parliament positions to right edge of area chart
- * Phase 2 (0.5 - 1.0): Seats stay at right edge while areas expand
- *
- * @param seat - Original parliament seat position
- * @param targetPosition - Target position at right edge
- * @param progress - Overall morph progress (0 = parliament, 1 = area)
- */
-export declare function interpolateSeatToEdge(seat: SeatPosition, targetPosition: {
-    x: number;
-    y: number;
-}, progress: number): {
-    x: number;
-    y: number;
-    opacity: number;
-    radius: number;
-};
-/**
- * Calculate interpolated area expansion during parliament → area morphing
- *
- * Phase 1 (0.0 - 0.5): Areas are compressed to right edge (not visible)
- * Phase 2 (0.5 - 1.0): Areas expand leftward from right edge
- *
- * @param progress - Overall morph progress (0 = parliament, 1 = area)
- * @param chartWidth - Full width of area chart
- */
-export declare function interpolateAreaExpansion(progress: number, chartWidth: number): {
-    visibleWidth: number;
-    opacity: number;
-    clipX: number;
-};
-/**
- * Calculate interpolated positions for area → parliament morphing (reverse)
- *
- * Phase 1 (0.0 - 0.5): Areas compress to right edge
- * Phase 2 (0.5 - 1.0): Seats expand from right edge to parliament layout
- */
-export declare function interpolateAreaToParliament(progress: number, chartWidth: number, seat: SeatPosition, edgePosition: {
-    x: number;
-    y: number;
-}): {
-    areaClipX: number;
-    areaOpacity: number;
-    seatX: number;
-    seatY: number;
-    seatOpacity: number;
-    seatRadius: number;
-};
-/**
- * Calculate the vertical stacking position for area points
- * Used to determine where seats should map to at the right edge
- */
-export declare function calculateStackedPosition(value: number, previousSum: number, maxValue: number, chartHeight: number): {
-    y0: number;
-    y1: number;
-};
-/**
- * Extract the rightmost time slice from area chart data
- * This represents the same point-in-time as the parliament chart
- */
-export declare function extractRightmostSlice(data: Array<{
-    timestamp: number;
-    [key: string]: number;
-}>, categories: Array<{
-    dataKey: string;
-    label: string;
-}>, chartHeight: number): AreaPoint[];

package/dist/components/morph-chart/utils/segment-transformer.d.ts

@@ -1,70 +0,0 @@
-import { ScaleLinear, ScaleTime } from 'd3-scale';
-import { MorphChartCategory } from '../morph-chart.types';
-interface StackedSeriesDataPoint {
-    data: {
-        timestamp: number;
-    };
-    0: number;
-    1: number;
-}
-export type SegmentTransform = {
-    segmentId: string;
-    dataKey: string;
-    timestamp: number;
-    x: number;
-    y: number;
-    rotation: number;
-    length: number;
-};
-/**
- * Calculate curve data for stacked area chart
- * Generates the curved path data that segments will transform into
- *
- * @param stackedData - D3 stacked data
- * @param categories - Category definitions
- * @param xScale - X scale (time)
- * @param yScale - Y scale (values)
- * @returns Array of curve data for each category
- */
-export declare function calculateStackedCurveData(stackedData: StackedSeriesDataPoint[][], categories: MorphChartCategory[], xScale: ScaleTime<number, number>, yScale: ScaleLinear<number, number>): Array<{
-    dataKey: string;
-    category: string;
-    points: Array<{
-        x: number;
-        y: number;
-        timestamp: number;
-    }>;
-    pathData: string;
-}>;
-/**
- * Calculate transformations for horizontal bar top segments to align with curves
- * Each segment gets position, rotation, and length data
- *
- * @param barSegments - Array of bar segments with their positions
- * @param curveData - Calculated curve data for all categories
- * @param segmentLength - Desired length of each segment
- * @returns Array of transformation data for each segment
- */
-export declare function calculateSegmentTransforms(barSegments: Array<{
-    dataKey: string;
-    timestamp: number;
-    x: number;
-    y: number;
-    width: number;
-}>, curveData: ReturnType<typeof calculateStackedCurveData>, segmentLength: number): SegmentTransform[];
-/**
- * Extract bar top segment positions from rendered bars
- * Identifies the top edge of each bar segment for transformation
- *
- * @param svg - SVG container with bar elements
- * @returns Array of segment position data
- */
-export declare function extractBarTopPositions(svg: SVGSVGElement): Array<{
-    dataKey: string;
-    timestamp: number;
-    x: number;
-    y: number;
-    width: number;
-    element: SVGElement;
-}>;
-export {};

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

@@ -1,6 +0,0 @@
-import { UseStackedAreaChartProps, UseStackedAreaChartReturn } from '../stacked-area-chart.types';
-/**
- * Manages stacked area chart data validation, processing, and formatting.
- * Handles category validation, timestamp ranges, and max value computation.
- */
-export declare function useStackedAreaChart(props: UseStackedAreaChartProps): UseStackedAreaChartReturn;

package/dist/components/stacked-area-chart/stacked-area-chart.component.d.ts

@@ -1,10 +0,0 @@
-import { FunctionComponent } from 'react';
-import { StackedAreaChartProps } from './stacked-area-chart.types';
-/**
- * Displays time-series data as a stacked area chart with responsive sizing,
- * customizable colors, interactive tooltips, and smooth animations.
- *
- * Designed for ParliamentChart transitions - data structure supports point-in-time
- * views enabling animated morphing between visualizations.
- */
-export declare const StackedAreaChart: FunctionComponent<StackedAreaChartProps>;

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

@@ -1,186 +0,0 @@
-import { BoxProps, StackProps, TypographyProps } from '@mui/material';
-/**
- * Represents a single data point in the stacked area chart.
- * Each property beyond timestamp represents a category value at that point in time.
- *
- * Example:
- * {
- *   timestamp: 1704067200000,
- *   Complete: 120,
- *   Close: 45,
- *   Far: 30
- * }
- */
-export type StackedAreaDataPoint = {
-    timestamp: number;
-    [category: string]: number;
-};
-/**
- * Defines a category (area) in the stacked area chart.
- * The dataKey must match a property in StackedAreaDataPoint.
- */
-export type StackedAreaCategory = {
-    /** Key matching the property name in data points */
-    dataKey: string;
-    /** Display label for the category */
-    label: string;
-    /** Color for this area (hex color or CSS color string) */
-    color: string;
-    /** Optional stroke width in pixels (default: 2) */
-    strokeWidth?: number;
-    /** Optional dash pattern for the stroke (e.g., '5 5' for dashed) */
-    strokeDasharray?: string;
-    /** Optional fill opacity (0-1, default: 0.7) */
-    fillOpacity?: number;
-};
-/**
- * Defines a marker (vertical line) at a specific timestamp.
- * Markers are useful for highlighting significant events like releases, deployments, or milestones.
- */
-export type StackedAreaMarker = {
-    /** Timestamp where the marker should be placed on the X-axis */
-    timestamp: number;
-    /** Optional label to display on the marker */
-    label?: string;
-    /** Optional color for the marker line (default: from config) */
-    color?: string;
-    /** Optional stroke width in pixels (default: from config) */
-    strokeWidth?: number;
-    /** Optional dash pattern for the stroke (e.g., '5 5' for dashed) */
-    strokeDasharray?: string;
-};
-/**
- * Slot props for customizing stacked area chart component styles
- */
-export type StackedAreaChartSlotProps = {
-    /** Props for the outer container (Stack) */
-    container?: StackProps;
-    /** Props for the header container (Stack) */
-    header?: StackProps;
-    /** Props for the title Typography component */
-    title?: TypographyProps;
-    /** Props for the subtitle/description Typography component */
-    subtitle?: TypographyProps;
-    /** Props for the chart container (Box) */
-    chartContainer?: BoxProps;
-};
-/**
- * Props for the StackedAreaChart component
- */
-export type StackedAreaChartProps = {
-    /** Array of data points sorted by timestamp (ascending) */
-    data: StackedAreaDataPoint[];
-    /** Array of category definitions for the areas to display */
-    categories: StackedAreaCategory[];
-    /** Optional array of markers (vertical lines) to display at specific timestamps */
-    markers?: StackedAreaMarker[];
-    /** Optional title displayed above the chart */
-    title?: string;
-    /** Optional subtitle/description displayed below the title */
-    subtitle?: string;
-    /** Show the chart header (title and subtitle) */
-    showHeader?: boolean;
-    /** Height of the chart in pixels (default: 400) */
-    height?: number;
-    /** Width of the chart (default: '100%') */
-    width?: string | number;
-    /** Show the legend */
-    showLegend?: boolean;
-    /** Show the tooltip on hover */
-    showTooltip?: boolean;
-    /** Show X-axis labels */
-    showXAxis?: boolean;
-    /** Show Y-axis labels */
-    showYAxis?: boolean;
-    /** Show grid lines */
-    showGrid?: boolean;
-    /** Enable animations */
-    enableAnimation?: boolean;
-    /** Animation duration in milliseconds (default: 1500) */
-    animationDuration?: number;
-    /** Animation easing function (default: 'ease') */
-    animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
-    /** Custom date formatter for X-axis and tooltip */
-    formatDate?: (timestamp: number) => string;
-    /** Custom value formatter for Y-axis and tooltip */
-    formatValue?: (value: number) => string;
-    /** Custom tooltip formatter */
-    tooltipFormatter?: (value: number, name: string, props: unknown) => [string, string];
-    /** Props for customizing individual component slots */
-    slotProps?: StackedAreaChartSlotProps;
-    /** Margin around the chart (for axis labels) */
-    margin?: {
-        top?: number;
-        right?: number;
-        bottom?: number;
-        left?: number;
-    };
-    /**
-     * Curve type for the area paths
-     * - 'monotone': Smooth curves that preserve monotonicity
-     * - 'linear': Straight lines between points
-     * - 'step': Step function
-     * - 'stepBefore': Step function with vertical at start
-     * - 'stepAfter': Step function with vertical at end
-     */
-    curveType?: 'monotone' | 'linear' | 'step' | 'stepBefore' | 'stepAfter';
-    /**
-     * Stack offset type
-     * - 'none': Stack normally
-     * - 'expand': Normalize to 0-100%
-     * - 'wiggle': Streamgraph layout
-     * - 'silhouette': Centered streamgraph
-     */
-    stackOffset?: 'none' | 'expand' | 'wiggle' | 'silhouette';
-    /**
-     * External time domain control [minTimestamp, maxTimestamp]
-     * When provided, overrides automatic domain calculation and controls the X-axis range.
-     * Useful for synchronizing multiple charts to show the same time range.
-     */
-    timeRange?: [number, number] | null;
-    /**
-     * Callback when user selects a time range via brush or other interaction
-     * Returns [startTimestamp, endTimestamp]
-     */
-    onTimeRangeChange?: (range: [number, number]) => void;
-    /**
-     * Enable brush component for time range selection
-     * When enabled, displays a brush control below the chart that users can drag to select a time range.
-     * Triggers onTimeRangeChange callback when the brush is moved.
-     */
-    enableBrush?: boolean;
-    /**
-     * Zoom to selection mode - When enabled, dragging to select a range
-     * will automatically rescale the chart to show only that range via the timeRange prop.
-     * Selection highlight only shows during drag.
-     */
-    zoomToSelection?: boolean;
-};
-/**
- * Props for the custom hook
- */
-export type UseStackedAreaChartProps = {
-    data: StackedAreaDataPoint[];
-    categories: StackedAreaCategory[];
-    formatDate?: (timestamp: number) => string;
-    formatValue?: (value: number) => string;
-};
-/**
- * Return type for the custom hook
- */
-export type UseStackedAreaChartReturn = {
-    /** Validated and processed data */
-    processedData: StackedAreaDataPoint[];
-    /** Validated categories */
-    processedCategories: StackedAreaCategory[];
-    /** Minimum timestamp in data */
-    minTimestamp: number;
-    /** Maximum timestamp in data */
-    maxTimestamp: number;
-    /** Total value at each timestamp (sum of all categories) */
-    maxTotalValue: number;
-    /** Default date formatter */
-    dateFormatter: (timestamp: number) => string;
-    /** Default value formatter */
-    valueFormatter: (value: number) => string;
-};

package/dist/components/stacked-area-chart/utils/color.utils.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generates gradient colors for categories, ordered from worst (red) to best (green).
- */
-export declare function generateMeasureGradient(count: number): string[];