@moderneinc/react-charts 1.2.0-next.e6432a → 1.2.0-next.fd7ce8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/chrono-chart/chrono-chart.types.d.ts +15 -6
- package/dist/components/morph-chart/hooks/use-morph-chart.hook.d.ts +5 -1
- package/dist/components/morph-chart/morph-chart.types.d.ts +15 -0
- package/dist/components/timeline-chart/timeline-chart.types.d.ts +2 -1
- package/dist/index.cjs +73 -73
- package/dist/index.js +9608 -9458
- package/package.json +2 -2
|
@@ -1,10 +1,4 @@
|
|
|
1
1
|
import { TimelineEvent } from '../timeline-chart/timeline-chart.types';
|
|
2
|
-
/**
|
|
3
|
-
* Display mode for the ChronoChart.
|
|
4
|
-
* - 'point-in-time': Shows a snapshot at a specific moment
|
|
5
|
-
* - 'historical': Shows trends over time
|
|
6
|
-
*/
|
|
7
|
-
export type ChronoMode = 'point-in-time' | 'historical';
|
|
8
2
|
/**
|
|
9
3
|
* Represents a data category with visual styling and optional parliament-specific mappings.
|
|
10
4
|
*/
|
|
@@ -82,6 +76,10 @@ export type ChronoChartProps = {
|
|
|
82
76
|
timeRange?: [number, number];
|
|
83
77
|
/** Callback when the time range changes (via brush or other interactions) */
|
|
84
78
|
onTimeRangeChange?: (range: [number, number]) => void;
|
|
79
|
+
/** Minimum allowed timestamp for time range selection (constrains brush selection) */
|
|
80
|
+
minAllowedTime?: number;
|
|
81
|
+
/** Maximum allowed timestamp for time range selection (constrains brush selection) */
|
|
82
|
+
maxAllowedTime?: number;
|
|
85
83
|
/** Enable brush selection for time range in historical mode */
|
|
86
84
|
enableBrush?: boolean;
|
|
87
85
|
/** Show the legend/category table */
|
|
@@ -90,6 +88,11 @@ export type ChronoChartProps = {
|
|
|
90
88
|
showTooltip?: boolean;
|
|
91
89
|
/** Show background grid lines */
|
|
92
90
|
showGrid?: boolean;
|
|
91
|
+
/**
|
|
92
|
+
* Color for axis labels (dates on x-axis, values on y-axis).
|
|
93
|
+
* @default undefined (inherits from SVG default, typically black)
|
|
94
|
+
*/
|
|
95
|
+
axisLabelColor?: string;
|
|
93
96
|
/** Enable animations when switching between modes */
|
|
94
97
|
enableAnimation?: boolean;
|
|
95
98
|
/** Duration of animations in milliseconds */
|
|
@@ -111,4 +114,10 @@ export type ChronoChartProps = {
|
|
|
111
114
|
onTimelineReady?: (timeline: unknown) => void;
|
|
112
115
|
/** Callback for animation progress updates */
|
|
113
116
|
onAnimationProgress?: (progress: number, stage: string) => void;
|
|
117
|
+
/**
|
|
118
|
+
* Color for brush selection overlay in historical mode.
|
|
119
|
+
* Used for both the selection area and drag handles.
|
|
120
|
+
* @default '#69b3a2'
|
|
121
|
+
*/
|
|
122
|
+
brushColor?: string;
|
|
114
123
|
};
|
|
@@ -16,6 +16,7 @@ type UseMorphChartProps = {
|
|
|
16
16
|
timeRange?: [number, number];
|
|
17
17
|
showGrid?: boolean;
|
|
18
18
|
showAxes?: boolean;
|
|
19
|
+
axisLabelColor?: string;
|
|
19
20
|
formatDate?: (timestamp: number) => string;
|
|
20
21
|
formatValue?: (value: number) => string;
|
|
21
22
|
markers?: Array<{
|
|
@@ -37,6 +38,8 @@ type UseMorphChartProps = {
|
|
|
37
38
|
parliamentTimestamp?: number;
|
|
38
39
|
enableBrush?: boolean;
|
|
39
40
|
onTimeRangeChange?: (range: [number, number]) => void;
|
|
41
|
+
minAllowedTime?: number;
|
|
42
|
+
maxAllowedTime?: number;
|
|
40
43
|
showScaleIndicator?: boolean;
|
|
41
44
|
reposPerSeat?: number;
|
|
42
45
|
timelineEvents?: Array<{
|
|
@@ -47,8 +50,9 @@ type UseMorphChartProps = {
|
|
|
47
50
|
showTimeline?: boolean;
|
|
48
51
|
timelineHeight?: number;
|
|
49
52
|
timelineOffset?: number;
|
|
53
|
+
brushColor?: string;
|
|
50
54
|
};
|
|
51
|
-
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) => {
|
|
55
|
+
export declare const useMorphChart: ({ containerRef, data, categories, mode, width, height, margin, timeRange, showGrid, showAxes, axisLabelColor, formatDate, formatValue, markers, arcAngle, parliamentRadius, seatSize, animationDuration, onMorphComplete, onAnimationStateChange, onTimelineReady, onAnimationProgress, onHoveredDataChange, hoveredCategory: externalHoveredCategory, maxSeats, parliamentTimestamp, enableBrush, onTimeRangeChange, minAllowedTime: minAllowedTimeConstraint, maxAllowedTime: maxAllowedTimeConstraint, showScaleIndicator, reposPerSeat, timelineEvents, showTimeline, timelineHeight, timelineOffset, brushColor }: UseMorphChartProps) => {
|
|
52
56
|
isMorphing: boolean;
|
|
53
57
|
currentMode: MorphMode;
|
|
54
58
|
hoveredCategory: string | null;
|
|
@@ -43,10 +43,19 @@ export type MorphChartProps = {
|
|
|
43
43
|
showGrid?: boolean;
|
|
44
44
|
/** Show axes */
|
|
45
45
|
showAxes?: boolean;
|
|
46
|
+
/**
|
|
47
|
+
* Color for axis labels (dates on x-axis, values on y-axis).
|
|
48
|
+
* @default undefined (inherits from SVG default, typically black)
|
|
49
|
+
*/
|
|
50
|
+
axisLabelColor?: string;
|
|
46
51
|
/** Enable brush selection */
|
|
47
52
|
enableBrush?: boolean;
|
|
48
53
|
/** Callback when time range changes */
|
|
49
54
|
onTimeRangeChange?: (range: [number, number]) => void;
|
|
55
|
+
/** Minimum allowed timestamp for time range selection (constrains brush selection) */
|
|
56
|
+
minAllowedTime?: number;
|
|
57
|
+
/** Maximum allowed timestamp for time range selection (constrains brush selection) */
|
|
58
|
+
maxAllowedTime?: number;
|
|
50
59
|
/** Format date for axis */
|
|
51
60
|
formatDate?: (timestamp: number) => string;
|
|
52
61
|
/** Format value for axis */
|
|
@@ -106,6 +115,12 @@ export type MorphChartProps = {
|
|
|
106
115
|
timelineHeight?: number;
|
|
107
116
|
/** Space between x-axis and timeline in pixels (default: 35) */
|
|
108
117
|
timelineOffset?: number;
|
|
118
|
+
/**
|
|
119
|
+
* Color for brush selection overlay.
|
|
120
|
+
* Used for both the selection area and drag handles.
|
|
121
|
+
* @default '#69b3a2'
|
|
122
|
+
*/
|
|
123
|
+
brushColor?: string;
|
|
109
124
|
};
|
|
110
125
|
/**
|
|
111
126
|
* Seat position in parliament layout
|
|
@@ -16,7 +16,7 @@ export type TimelineSelection = {
|
|
|
16
16
|
end: number | null;
|
|
17
17
|
};
|
|
18
18
|
export type DragHandleType = 'start' | 'end' | 'body' | null;
|
|
19
|
-
|
|
19
|
+
type DragHandleVariant = 'arrow' | 'grip';
|
|
20
20
|
export type TimelineChartSlotProps = {
|
|
21
21
|
/** Props for the header container (Stack) */
|
|
22
22
|
header?: StackProps;
|
|
@@ -153,3 +153,4 @@ export type TimelineSelectedEventsProps = {
|
|
|
153
153
|
/** Primary color for event items */
|
|
154
154
|
primaryColor?: string;
|
|
155
155
|
};
|
|
156
|
+
export {};
|