@moderneinc/react-charts 1.3.0-next.44efd5 → 1.3.0-next.bc5134
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.
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
* D3-based stacked area chart types
|
|
3
3
|
* Built for seamless morphing with parliament chart
|
|
4
4
|
*/
|
|
5
|
+
export type HoveredAreaData = {
|
|
6
|
+
timestamp: number;
|
|
7
|
+
category: {
|
|
8
|
+
label: string;
|
|
9
|
+
color: string;
|
|
10
|
+
};
|
|
11
|
+
value: number;
|
|
12
|
+
};
|
|
5
13
|
export type D3StackedAreaDataPoint = {
|
|
6
14
|
timestamp: number;
|
|
7
15
|
[category: string]: number;
|
|
@@ -78,6 +86,18 @@ export type D3StackedAreaChartProps = {
|
|
|
78
86
|
* @default '#69b3a2'
|
|
79
87
|
*/
|
|
80
88
|
brushColor?: string;
|
|
89
|
+
/** Show crosshair cursor on hover */
|
|
90
|
+
showCrosshair?: boolean;
|
|
91
|
+
/**
|
|
92
|
+
* Color for crosshair lines
|
|
93
|
+
* @default '#666'
|
|
94
|
+
*/
|
|
95
|
+
crosshairColor?: string;
|
|
96
|
+
/**
|
|
97
|
+
* Dash array pattern for crosshair lines
|
|
98
|
+
* @default '4,4'
|
|
99
|
+
*/
|
|
100
|
+
crosshairDashArray?: string;
|
|
81
101
|
/** Mode for morphing animation */
|
|
82
102
|
morphMode?: 'area' | 'parliament' | 'morphing';
|
|
83
103
|
/** Parliament layout data (for morphing) */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { RefObject } from 'react';
|
|
2
|
-
import { D3StackedAreaCategory, D3StackedAreaDataPoint } from '../d3-stacked-area-chart.types';
|
|
2
|
+
import { D3StackedAreaCategory, D3StackedAreaDataPoint, HoveredAreaData } from '../d3-stacked-area-chart.types';
|
|
3
3
|
type UseD3StackedAreaProps = {
|
|
4
4
|
containerRef: RefObject<SVGSVGElement>;
|
|
5
5
|
data: D3StackedAreaDataPoint[];
|
|
@@ -30,6 +30,14 @@ type UseD3StackedAreaProps = {
|
|
|
30
30
|
markerVisibilityMode?: 'always' | 'hover';
|
|
31
31
|
onMarkerHoverChange?: (isHovering: boolean) => void;
|
|
32
32
|
brushColor?: string;
|
|
33
|
+
showCrosshair?: boolean;
|
|
34
|
+
crosshairColor?: string;
|
|
35
|
+
crosshairDashArray?: string;
|
|
36
|
+
onHoveredAreaChange?: (data: HoveredAreaData | null) => void;
|
|
37
|
+
onCrosshairMove?: (position: {
|
|
38
|
+
x: number;
|
|
39
|
+
y: number;
|
|
40
|
+
} | null) => void;
|
|
33
41
|
};
|
|
34
|
-
export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange, brushColor }: UseD3StackedAreaProps) => void;
|
|
42
|
+
export declare const useD3StackedArea: ({ containerRef, data, categories, width, height, margin, timeRange, showGrid, showXAxis, showYAxis, enableBrush, zoomToSelection, onTimeRangeChange, formatDate, formatValue, markers, markerVisibilityMode, onMarkerHoverChange, brushColor, showCrosshair, crosshairColor, crosshairDashArray, onHoveredAreaChange, onCrosshairMove }: UseD3StackedAreaProps) => void;
|
|
35
43
|
export {};
|