@moderneinc/react-charts 1.2.0-next.c015c0 → 1.2.0

package/dist/theme/default-colors.d.ts

@@ -13,14 +13,6 @@ export declare const DEFAULT_CHART_COLORS: {
         readonly 600: "#40c048";
     };
 };
-/**
- * Measure gradient colors used for progress/distance categories
- * Shared between ParliamentChart and StackedAreaChart for visual consistency
- *
- * Color progression: Green (best/complete) → Red (worst/farthest)
- * Used for categories like: Complete, Closest, Close, Far, Farthest
- */
-export declare const MEASURE_GRADIENT_COLORS: readonly ["#4CA75A", "#FDDA04", "#FFC008", "#FF9800", "#F9A91B", "#FF5C24", "#ED4134", "#CB3446"];
 /**
  * Color configuration type for parliament chart theming
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moderneinc/react-charts",
-  "version": "1.2.0-next.c015c0",
+  "version": "1.2.0",
   "description": "Parliament chart visualization library for React",
   "type": "module",
   "devEngines": {
@@ -49,8 +49,7 @@
     "@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": {
     "hast-util-to-html": "^9.0.5",
@@ -87,7 +86,6 @@
     "jsdom": "^27.0.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "recharts": "^2.15.0",
     "semantic-release": "^24.2.0",
     "storybook": "^8.4.7",
     "typescript": "^5.9.2",

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.constants.d.ts

@@ -1,115 +0,0 @@
-/**
- * Default colors for stacked area chart categories
- * These colors are designed to work well together and provide good contrast
- * Migration colors match the exact gradient used in ParliamentChart for visual consistency
- */
-export declare const DEFAULT_STACKED_AREA_COLORS: {
-    readonly critical: "#dc3545";
-    readonly high: "#fd7e14";
-    readonly medium: "#ffc107";
-    readonly low: "#17a2b8";
-    readonly complete: "#40c048";
-    readonly inProgress: "#007bff";
-    readonly farthest: string | undefined;
-    readonly far: string | undefined;
-    readonly close: string | undefined;
-    readonly closest: string | undefined;
-    readonly completed: string | undefined;
-    readonly primary: "#007bff";
-    readonly secondary: "#6c757d";
-    readonly success: "#40c048";
-    readonly danger: "#dc3545";
-    readonly warning: "#ffc107";
-    readonly info: "#17a2b8";
-    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
- */
-export declare const STACKED_AREA_PALETTES: {
-    readonly migration: string[];
-    readonly severity: readonly ["#dc3545", "#fd7e14", "#ffc107", "#17a2b8", "#17a2b8"];
-    readonly status: readonly ["#dc3545", "#ffc107", "#40c048"];
-    readonly extended: readonly ["#e74c3c", "#e67e22", "#f39c12", "#2ecc71", "#3498db", "#9b59b6", "#1abc9c", "#95a5a6"];
-    readonly colorblindSafe: readonly ["#0173B2", "#DE8F05", "#029E73", "#CC78BC", "#CA9161", "#FBAFE4", "#949494", "#ECE133"];
-};
-/**
- * Category label constants for common use cases
- * These match the categories used in ParliamentChart for transition compatibility
- */
-export declare const CATEGORY_LABELS: {
-    readonly FARTHEST: "Farthest";
-    readonly FAR: "Far";
-    readonly CLOSE: "Close";
-    readonly CLOSEST: "Closest";
-    readonly COMPLETE: "Complete";
-    readonly CRITICAL: "Critical";
-    readonly HIGH: "High";
-    readonly MEDIUM: "Medium";
-    readonly LOW: "Low";
-    readonly INFO: "Info";
-    readonly NOT_APPLICABLE: "N/A";
-    readonly NO_LST: "No LST";
-    readonly DATA_MISSING: "Data Missing";
-};

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

@@ -1,163 +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';
-};
-/**
- * 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,9 +0,0 @@
-/**
- * Maps category index to a color from the measure gradient.
- * Mirrors ParliamentChart logic - first category gets worst color (red), last gets best (green).
- */
-export declare function getMeasureGradientColor(index: number, totalCategories: number): string;
-/**
- * Generates gradient colors for categories, ordered from worst (red) to best (green).
- */
-export declare function generateMeasureGradient(count: number): string[];