@octanejs/recharts 0.1.62 → 0.1.63
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/package.json +5 -5
- package/src/animation/AnimatedItems.tsrx +36 -31
- package/src/animation/CSSTransitionAnimate.tsrx +1 -2
- package/src/animation/JavascriptAnimate.tsrx +1 -2
- package/src/cartesian/Area.tsrx +414 -386
- package/src/cartesian/AreaRevealShape.tsrx +103 -84
- package/src/cartesian/Bar.tsrx +343 -317
- package/src/cartesian/BarStack.tsrx +33 -28
- package/src/cartesian/CartesianAxis.tsrx +168 -165
- package/src/cartesian/CartesianGrid.tsrx +256 -272
- package/src/cartesian/ErrorBar.tsrx +108 -104
- package/src/cartesian/Funnel.tsrx +405 -382
- package/src/cartesian/GraphicalItemClipPath.tsrx +4 -8
- package/src/cartesian/Line.tsrx +190 -177
- package/src/cartesian/LineDrawShape.tsrx +14 -15
- package/src/cartesian/ReferenceLine.tsrx +119 -105
- package/src/cartesian/Scatter.tsrx +416 -398
- package/src/cartesian/XAxis.tsrx +39 -32
- package/src/cartesian/YAxis.tsrx +47 -37
- package/src/cartesian/ZAxis.tsrx +76 -73
- package/src/chart/AreaChart.tsrx +15 -11
- package/src/chart/BarChart.tsrx +15 -11
- package/src/chart/CategoricalChart.tsrx +32 -26
- package/src/chart/ComposedChart.tsrx +15 -11
- package/src/chart/FunnelChart.tsrx +15 -11
- package/src/chart/LineChart.tsrx +15 -11
- package/src/chart/PieChart.tsrx +15 -11
- package/src/chart/PolarChart.tsrx +45 -48
- package/src/chart/RadarChart.tsrx +38 -32
- package/src/chart/RadialBarChart.tsrx +15 -11
- package/src/chart/RechartsWrapper.tsrx +214 -162
- package/src/chart/Sankey.tsrx +412 -378
- package/src/chart/ScatterChart.tsrx +15 -11
- package/src/chart/SunburstChart.tsrx +162 -155
- package/src/component/ActivePoints.tsrx +19 -13
- package/src/component/Cursor.tsrx +25 -18
- package/src/component/DefaultLegendContent.tsrx +131 -127
- package/src/component/DefaultTooltipContent.tsrx +46 -42
- package/src/component/Dots.tsrx +11 -5
- package/src/component/Label.tsrx +69 -55
- package/src/component/LabelList.tsrx +32 -27
- package/src/component/Legend.tsrx +120 -123
- package/src/component/ResponsiveContainer.tsrx +18 -11
- package/src/component/Text.tsrx +50 -43
- package/src/component/Tooltip.tsrx +234 -223
- package/src/component/TooltipBoundingBox.tsrx +34 -34
- package/src/container/ClipPathProvider.tsrx +1 -3
- package/src/container/Layer.tsrx +5 -1
- package/src/container/RootSurface.tsrx +31 -21
- package/src/container/Surface.tsrx +15 -13
- package/src/context/ErrorBarContext.tsrx +5 -5
- package/src/polar/Pie.tsrx +541 -487
- package/src/polar/PolarAngleAxis.tsrx +245 -227
- package/src/polar/PolarGrid.tsrx +139 -127
- package/src/polar/PolarRadiusAxis.tsrx +204 -185
- package/src/polar/Radar.tsrx +274 -264
- package/src/polar/RadialBar.tsrx +408 -361
- package/src/shape/Cross.tsrx +13 -7
- package/src/shape/Curve.tsrx +54 -44
- package/src/shape/Dot.tsrx +10 -8
- package/src/shape/Polygon.tsrx +38 -29
- package/src/shape/Rectangle.tsrx +73 -28
- package/src/shape/Sector.tsrx +30 -18
- package/src/shape/Symbols.tsrx +13 -11
- package/src/shape/Trapezoid.tsrx +16 -11
- package/src/state/RechartsStoreProvider.tsrx +5 -1
- package/src/synchronisation/useChartSynchronisation.tsrx +8 -7
- package/src/util/BarUtils.tsrx +43 -40
- package/src/util/FunnelUtils.tsrx +5 -5
- package/src/util/RadialBarUtils.tsrx +3 -4
- package/src/util/ScatterUtils.tsrx +13 -8
- package/src/zIndex/ZIndexLayer.tsrx +2 -2
- package/src/zIndex/ZIndexPortal.tsrx +2 -8
|
@@ -109,9 +109,8 @@ function useTooltipSyncEventsListener() {
|
|
|
109
109
|
if (typeof syncMethod === 'function') {
|
|
110
110
|
// The 2.x CategoricalChartState data shape, kept for compatibility.
|
|
111
111
|
const syncMethodParam: MouseHandlerDataParam = {
|
|
112
|
-
activeTooltipIndex:
|
|
113
|
-
? undefined
|
|
114
|
-
: Number(action.payload.index),
|
|
112
|
+
activeTooltipIndex:
|
|
113
|
+
action.payload.index == null ? undefined : Number(action.payload.index),
|
|
115
114
|
isTooltipActive: action.payload.active,
|
|
116
115
|
activeIndex: action.payload.index == null ? undefined : Number(action.payload.index),
|
|
117
116
|
activeLabel: action.payload.label,
|
|
@@ -235,8 +234,8 @@ export function useTooltipChartSynchronisation(
|
|
|
235
234
|
activeIndex: TooltipIndex | undefined,
|
|
236
235
|
isTooltipActive: boolean,
|
|
237
236
|
) {
|
|
238
|
-
const activeDataKey = useAppSelector(
|
|
239
|
-
|
|
237
|
+
const activeDataKey = useAppSelector((state) =>
|
|
238
|
+
selectTooltipDataKey(state, tooltipEventType, trigger),
|
|
240
239
|
);
|
|
241
240
|
const activeGraphicalItemId = useAppSelector(selectActiveTooltipGraphicalItemId);
|
|
242
241
|
const eventEmitterSymbol = useAppSelector(selectEventEmitter);
|
|
@@ -289,8 +288,10 @@ export function useBrushChartSynchronisation() {
|
|
|
289
288
|
const brushEndIndex = useAppSelector((state) => state.chartData.dataEndIndex);
|
|
290
289
|
useEffect(() => {
|
|
291
290
|
if (
|
|
292
|
-
syncId == null ||
|
|
293
|
-
|
|
291
|
+
syncId == null ||
|
|
292
|
+
brushStartIndex == null ||
|
|
293
|
+
brushEndIndex == null ||
|
|
294
|
+
eventEmitterSymbol == null
|
|
294
295
|
) {
|
|
295
296
|
return;
|
|
296
297
|
}
|
package/src/util/BarUtils.tsrx
CHANGED
|
@@ -3,19 +3,19 @@ import type { ActiveShape, DataKey, ShapeAnimationProps } from './types';
|
|
|
3
3
|
import type { Props as RectangleProps } from '../shape/Rectangle.tsrx';
|
|
4
4
|
import type { BarBackgroundShapeProps, BarShapeProps } from '../cartesian/Bar.tsrx';
|
|
5
5
|
|
|
6
|
-
type BarRectangleSharedProps =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
export type BarRectangleProps =
|
|
14
|
-
|
|
6
|
+
type BarRectangleSharedProps = {
|
|
7
|
+
onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
|
|
8
|
+
onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
|
|
9
|
+
onClick?: (e: NativeMouseEvent<SVGPathElement>) => void;
|
|
10
|
+
dataKey: DataKey<any> | undefined;
|
|
11
|
+
} & ShapeAnimationProps &
|
|
12
|
+
Omit<RectangleProps, 'onAnimationStart' | 'onAnimationEnd'>;
|
|
13
|
+
export type BarRectangleProps = BarShapeProps &
|
|
14
|
+
BarRectangleSharedProps & {
|
|
15
15
|
option: ActiveShape<BarShapeProps, SVGPathElement>;
|
|
16
16
|
};
|
|
17
|
-
export type BarBackgroundRectangleProps =
|
|
18
|
-
|
|
17
|
+
export type BarBackgroundRectangleProps = BarBackgroundShapeProps &
|
|
18
|
+
BarRectangleSharedProps & {
|
|
19
19
|
option: ActiveShape<BarBackgroundShapeProps, SVGPathElement>;
|
|
20
20
|
};
|
|
21
21
|
type BarRectangleShapeProps = Omit<BarRectangleProps, 'option'>;
|
|
@@ -35,41 +35,44 @@ const BarBackgroundRectangleShape = Shape<BarBackgroundRectangleShapeProps, SVGP
|
|
|
35
35
|
|
|
36
36
|
export function BarRectangle(barRectangleProps: BarRectangleProps) {
|
|
37
37
|
const { option, ...shapeProps } = barRectangleProps;
|
|
38
|
-
return
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
return (
|
|
39
|
+
<BarRectangleShape
|
|
40
|
+
option={option}
|
|
41
|
+
DefaultShape={defaultBarShape}
|
|
42
|
+
shapeProps={shapeProps}
|
|
43
|
+
activeClassName="recharts-active-bar"
|
|
44
|
+
inActiveClassName="recharts-inactive-bar"
|
|
45
|
+
/>
|
|
46
|
+
);
|
|
45
47
|
}
|
|
46
48
|
|
|
47
49
|
export function BarBackgroundRectangle(backgroundRectangleProps: BarBackgroundRectangleProps) {
|
|
48
50
|
const { option, ...shapeProps } = backgroundRectangleProps;
|
|
49
|
-
return
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
51
|
+
return (
|
|
52
|
+
<BarBackgroundRectangleShape
|
|
53
|
+
option={option}
|
|
54
|
+
DefaultShape={defaultBarShape}
|
|
55
|
+
shapeProps={shapeProps}
|
|
56
|
+
activeClassName="recharts-active-bar"
|
|
57
|
+
inActiveClassName="recharts-inactive-bar"
|
|
58
|
+
/>
|
|
59
|
+
);
|
|
56
60
|
}
|
|
57
61
|
|
|
58
62
|
/**
|
|
59
63
|
* Safely gets minPointSize from the minPointSize prop if it is a function
|
|
60
64
|
*/
|
|
61
|
-
export const minPointSizeCallback =
|
|
62
|
-
|
|
63
|
-
index: number
|
|
64
|
-
)
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
};
|
|
65
|
+
export const minPointSizeCallback =
|
|
66
|
+
(minPointSize: MinPointSize, defaultValue = 0) =>
|
|
67
|
+
(value: unknown, index: number): number => {
|
|
68
|
+
if (isNumber(minPointSize)) return minPointSize;
|
|
69
|
+
const isValueNumberOrNil = isNumber(value) || isNullish(value);
|
|
70
|
+
if (isValueNumberOrNil) {
|
|
71
|
+
return minPointSize(value, index);
|
|
72
|
+
}
|
|
73
|
+
invariant(
|
|
74
|
+
isValueNumberOrNil,
|
|
75
|
+
`minPointSize callback function received a value with type of ${typeof value}. Currently only numbers or null/undefined are supported.`,
|
|
76
|
+
);
|
|
77
|
+
return defaultValue;
|
|
78
|
+
};
|
|
@@ -5,11 +5,11 @@ import { Shape } from './ActiveShapeUtils.tsrx';
|
|
|
5
5
|
|
|
6
6
|
export const defaultFunnelShape = Trapezoid;
|
|
7
7
|
|
|
8
|
-
export type FunnelTrapezoidProps =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
export type FunnelTrapezoidProps = {
|
|
9
|
+
option: Exclude<FunnelProps['shape'], undefined> | FunnelProps['activeShape'];
|
|
10
|
+
isActive: boolean;
|
|
11
|
+
} & ShapeAnimationProps &
|
|
12
|
+
FunnelTrapezoidItem;
|
|
13
13
|
|
|
14
14
|
export function FunnelTrapezoid({ option, ...shapeProps }: FunnelTrapezoidProps) {
|
|
15
15
|
return <Shape option={option} DefaultShape={defaultFunnelShape} shapeProps={shapeProps} />;
|
|
@@ -18,10 +18,9 @@ export interface RadialBarSectorProps extends RadialBarDataItem, ShapeAnimationP
|
|
|
18
18
|
isActive: boolean;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
|
-
type RadialBarSectorComponentProps =
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
};
|
|
21
|
+
type RadialBarSectorComponentProps = RadialBarSectorProps & {
|
|
22
|
+
option: Exclude<RadialBarProps['shape'], undefined> | RadialBarProps['activeShape'];
|
|
23
|
+
};
|
|
25
24
|
|
|
26
25
|
export function RadialBarSector({ option, ...shapeProps }: RadialBarSectorComponentProps) {
|
|
27
26
|
return <Shape option={option} DefaultShape={defaultRadialBarShape} shapeProps={shapeProps} />;
|
|
@@ -5,8 +5,8 @@ import { Shape } from './ActiveShapeUtils.tsrx';
|
|
|
5
5
|
import { DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME } from './Constants';
|
|
6
6
|
import type { GraphicalItemId } from '../state/graphicalItemsSlice';
|
|
7
7
|
|
|
8
|
-
export type ScatterShapeProps =
|
|
9
|
-
|
|
8
|
+
export type ScatterShapeProps = ScatterPointItem &
|
|
9
|
+
ShapeAnimationProps & {
|
|
10
10
|
isActive: boolean;
|
|
11
11
|
index: number;
|
|
12
12
|
[DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId;
|
|
@@ -20,15 +20,20 @@ function renderSymbols(props: ScatterSymbolShapeProps) {
|
|
|
20
20
|
|
|
21
21
|
const ScatterShape = Shape<ScatterSymbolShapeProps, SVGPathElement>;
|
|
22
22
|
|
|
23
|
-
export function ScatterSymbol({
|
|
23
|
+
export function ScatterSymbol({
|
|
24
|
+
option,
|
|
25
|
+
...props
|
|
26
|
+
}: {
|
|
24
27
|
option: ActiveShape<ScatterSymbolShapeProps, SVGPathElement> | SymbolType;
|
|
25
28
|
} & ScatterShapeProps) {
|
|
26
29
|
if (typeof option === 'string') {
|
|
27
|
-
return
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
30
|
+
return (
|
|
31
|
+
<ScatterShape
|
|
32
|
+
option={<Symbols type={option} {...props} />}
|
|
33
|
+
DefaultShape={renderSymbols}
|
|
34
|
+
shapeProps={props}
|
|
35
|
+
/>
|
|
36
|
+
);
|
|
32
37
|
}
|
|
33
38
|
|
|
34
39
|
return <ScatterShape option={option} DefaultShape={renderSymbols} shapeProps={props} />;
|
|
@@ -32,8 +32,8 @@ export function ZIndexLayer(props: ZIndexLayerProps) {
|
|
|
32
32
|
const lastPortalElementRef = useRef<Element | undefined>(undefined);
|
|
33
33
|
const registeredZIndexesRef = useRef(new Set<number>());
|
|
34
34
|
const dispatch = useAppDispatch();
|
|
35
|
-
const portalElement: Element | undefined = useAppSelector(
|
|
36
|
-
|
|
35
|
+
const portalElement: Element | undefined = useAppSelector((state) =>
|
|
36
|
+
selectZIndexPortalElement(state, zIndex, isPanorama),
|
|
37
37
|
);
|
|
38
38
|
|
|
39
39
|
useLayoutEffect(() => {
|
|
@@ -8,10 +8,7 @@ import { useAppDispatch, useAppSelector } from '../state/hooks';
|
|
|
8
8
|
import { registerZIndexPortalElement, unregisterZIndexPortalElement } from '../state/zIndexSlice';
|
|
9
9
|
import { selectAllRegisteredZIndexes } from './zIndexSelectors';
|
|
10
10
|
|
|
11
|
-
function ZIndexSvgPortal(props: {
|
|
12
|
-
zIndex: number;
|
|
13
|
-
isPanorama: boolean;
|
|
14
|
-
}) {
|
|
11
|
+
function ZIndexSvgPortal(props: { zIndex: number; isPanorama: boolean }) {
|
|
15
12
|
const { zIndex, isPanorama } = props;
|
|
16
13
|
const ref = useRef<SVGGElement | null>(null);
|
|
17
14
|
const dispatch = useAppDispatch();
|
|
@@ -27,10 +24,7 @@ function ZIndexSvgPortal(props: {
|
|
|
27
24
|
return <g tabIndex={-1} ref={ref} className={'recharts-zIndex-layer_' + zIndex}></g>;
|
|
28
25
|
}
|
|
29
26
|
|
|
30
|
-
export function AllZIndexPortals(props: {
|
|
31
|
-
children?: OctaneNode;
|
|
32
|
-
isPanorama: boolean;
|
|
33
|
-
}) @{
|
|
27
|
+
export function AllZIndexPortals(props: { children?: OctaneNode; isPanorama: boolean }) @{
|
|
34
28
|
const { children, isPanorama } = props;
|
|
35
29
|
const allRegisteredZIndexes: ReadonlyArray<number> | undefined = useAppSelector(
|
|
36
30
|
selectAllRegisteredZIndexes,
|