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

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

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

@@ -1,4 +0,0 @@
-export { StackedAreaWithTimeline } from './stacked-area-with-timeline.component';
-export type { HoveredData, HoveredTimelineEvent, StackedAreaDataPoint, StackedAreaWithTimelineProps, TimelineEvent } from './stacked-area-with-timeline.types';
-export type { HoveredTimelineEvent as TimelineHoveredEvent, RenderTimelineTrackOptions, TimelineEvent as TimelineEventData } from './utils/render-timeline-track';
-export { renderTimelineTrack } from './utils/render-timeline-track';