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

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

@@ -72,11 +72,3 @@ export declare const getGripHandleSlotProps: (color?: string) => {
         sx: SxProps<Theme>;
     };
 };
-export declare const gripHandleSlotProps: {
-    startHandle: {
-        sx: SxProps<Theme>;
-    };
-    endHandle: {
-        sx: SxProps<Theme>;
-    };
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moderneinc/react-charts",
-  "version": "1.2.0-next.fe4657",
+  "version": "1.3.0",
   "description": "Parliament chart visualization library for React",
   "type": "module",
   "devEngines": {
@@ -51,17 +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": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/utilities": "^3.2.2",
-    "d3-array": "^3.2.4",
     "d3-axis": "^3.0.0",
     "d3-brush": "^3.0.0",
-    "d3-force": "^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",
@@ -81,33 +78,26 @@
     "@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": "^25.0.2",
     "storybook": "^8.4.7",
     "typescript": "^5.9.2",

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/accordion-generator.d.ts

@@ -1,102 +0,0 @@
-/**
- * Utility functions for generating accordion-style zig-zag lines
- * Used in the seats-to-lines animation stage
- */
-export interface AccordionLinePoint {
-    x: number;
-    y: number;
-    category: string;
-    categoryIndex: number;
-}
-export interface AccordionLineConfig {
-    centerX: number;
-    centerY: number;
-    radius: number;
-    startAngle: number;
-    endAngle: number;
-    amplitude: number;
-    segments: number;
-}
-/**
- * Generate zig-zag line points for a category's accordion section
- *
- * @param config - Configuration for the accordion line
- * @returns Array of points forming the zig-zag pattern
- */
-export declare function generateAccordionLine(config: AccordionLineConfig): AccordionLinePoint[];
-/**
- * Generate accordion lines for all categories
- *
- * @param categories - Array of categories with their seat counts
- * @param parliamentCenter - Center point of the parliament
- * @param radius - Base radius of the parliament arc
- * @param arcAngle - Total angle of the parliament arc (in radians)
- * @returns Map of category to accordion line points
- */
-export declare function generateCategoryAccordionLines(categories: Array<{
-    name: string;
-    seatCount: number;
-    color: string;
-}>, parliamentCenter: {
-    x: number;
-    y: number;
-}, radius: number, arcAngle?: number): Map<string, AccordionLinePoint[]>;
-/**
- * Generate a single continuous accordion line for all categories
- * Creates one connected slinky that spans the entire parliament arc
- *
- * @param categories - Array of categories with their seat counts
- * @param parliamentCenter - Center point of the parliament
- * @param radius - Base radius of the parliament arc
- * @param arcAngle - Total angle of the parliament arc (in radians)
- * @returns Single array of accordion line points with category info
- */
-export declare function generateContinuousAccordionLine(categories: Array<{
-    name: string;
-    seatCount: number;
-    color: string;
-}>, parliamentCenter: {
-    x: number;
-    y: number;
-}, radius: number, arcAngle?: number): AccordionLinePoint[];
-/**
- * Create SVG path string from accordion line points
- *
- * @param points - Array of accordion line points
- * @param curved - Whether to use curved lines (true) or sharp zig-zags (false)
- * @returns SVG path string
- */
-export declare function createAccordionPath(points: AccordionLinePoint[], curved?: boolean): string;
-/**
- * Calculate intermediate positions for accordion collapse animation with slinky physics
- *
- * @param linePoints - Original accordion line points
- * @param targetX - Target X position (vertical bar location)
- * @param targetY - Target Y position (vertical bar location)
- * @param progress - Animation progress (0-1)
- * @returns Interpolated points for current progress with wave motion
- */
-export declare function interpolateAccordionCollapse(linePoints: AccordionLinePoint[], targetX: number, targetY: number, progress: number): AccordionLinePoint[];
-/**
- * Generate multiple depth layers for slinky 3D effect
- *
- * @param config - Base configuration for accordion line
- * @param numLayers - Number of layers to create (default 3)
- * @returns Array of accordion line configurations with depth properties
- */
-export declare function generateLayeredAccordionLines(config: AccordionLineConfig, numLayers?: number): Array<{
-    points: AccordionLinePoint[];
-    depth: number;
-    opacity: number;
-    strokeWidth: number;
-    blur: number;
-}>;
-/**
- * Generate a single vertical line path for collapsed state
- *
- * @param x - X position of the vertical line
- * @param topY - Top Y position
- * @param bottomY - Bottom Y position
- * @returns SVG path string for vertical line
- */
-export declare function createVerticalLinePath(x: number, topY: number, bottomY: number): string;

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/morph-chart/utils/slinky-3d-generator.d.ts

@@ -1,35 +0,0 @@
-import { Selection } from 'd3-selection';
-export interface Slinky3DConfig {
-    categories: Array<{
-        name: string;
-        color: string;
-        seatCount: number;
-    }>;
-    centerX: number;
-    centerY: number;
-    radius: number;
-    arcAngle: number;
-}
-/**
- * Generate HTML content for 3D slinky rings
- */
-export declare function generate3DSlinkyHTML(categories: Array<{
-    name: string;
-    color: string;
-    seatCount: number;
-}>): string;
-/**
- * Generate CSS styles for 3D slinky effect
- */
-export declare function generate3DSlinkyStyles(instanceId: string): string;
-/**
- * Create 3D slinky elements in SVG using foreignObject
- */
-export declare function create3DSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: Slinky3DConfig, instanceId: string): {
-    wrapper: Selection<SVGForeignObjectElement, unknown, null, undefined>;
-    cleanup: () => void;
-};
-/**
- * Animate 3D slinky compression using GSAP
- */
-export declare function animate3DSlinkyCompression(instanceId: string, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

package/dist/components/morph-chart/utils/svg-slinky-generator.d.ts

@@ -1,25 +0,0 @@
-import { Selection } from 'd3-selection';
-export interface SvgSlinkyConfig {
-    categories: Array<{
-        name: string;
-        color: string;
-        seatCount: number;
-    }>;
-    centerX: number;
-    centerY: number;
-    radius: number;
-    innerRadius: number;
-    arcAngle: number;
-}
-/**
- * Create SVG slinky coils
- */
-export declare function createSvgSlinky(container: Selection<SVGGElement, unknown, null, undefined>, config: SvgSlinkyConfig, instanceId: string): {
-    slinkyGroup: Selection<SVGGElement, unknown, null, undefined>;
-    cleanup: () => void;
-};
-/**
- * Animate SVG slinky closing - stacks rings vertically into a bar on the right
- * Uses staggered animation phases to create realistic slinky walking effect
- */
-export declare function animateSvgSlinkyCompression(slinkyGroup: Selection<SVGGElement, unknown, null, undefined>, timeline: gsap.core.Timeline, startTime: string, duration: number, targetX: number, targetY: number): void;

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>;