@octanejs/recharts 0.1.61 → 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
package/src/shape/Cross.tsrx
CHANGED
|
@@ -24,14 +24,20 @@ export function Cross(crossProps: Props) {
|
|
|
24
24
|
const { x = 0, y = 0, top = 0, left = 0, width = 0, height = 0, className, ...rest } = crossProps;
|
|
25
25
|
const props = { x, y, top, left, width, height, ...rest };
|
|
26
26
|
if (
|
|
27
|
-
!isNumber(x) ||
|
|
28
|
-
|
|
27
|
+
!isNumber(x) ||
|
|
28
|
+
!isNumber(y) ||
|
|
29
|
+
!isNumber(width) ||
|
|
30
|
+
!isNumber(height) ||
|
|
31
|
+
!isNumber(top) ||
|
|
32
|
+
!isNumber(left)
|
|
29
33
|
) {
|
|
30
34
|
return null;
|
|
31
35
|
}
|
|
32
|
-
return
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
36
|
+
return (
|
|
37
|
+
<path
|
|
38
|
+
{...svgPropertiesAndEvents(props)}
|
|
39
|
+
className={clsx('recharts-cross', className)}
|
|
40
|
+
d={getPath(x, y, width, height, top, left)}
|
|
41
|
+
/>
|
|
42
|
+
);
|
|
37
43
|
}
|
package/src/shape/Curve.tsrx
CHANGED
|
@@ -32,14 +32,12 @@ export type CurveType =
|
|
|
32
32
|
| 'stepBefore'
|
|
33
33
|
| 'stepAfter'
|
|
34
34
|
| CurveFactory;
|
|
35
|
-
type AreaPoint =
|
|
36
|
-
Coordinate
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
base?: NullableCoordinate;
|
|
42
|
-
};
|
|
35
|
+
type AreaPoint = Coordinate & {
|
|
36
|
+
base: Coordinate;
|
|
37
|
+
};
|
|
38
|
+
type NullableAreaPoint = NullableCoordinate & {
|
|
39
|
+
base?: NullableCoordinate;
|
|
40
|
+
};
|
|
43
41
|
export type BaseLineType = number | ReadonlyArray<NullableCoordinate>;
|
|
44
42
|
interface CurveProps {
|
|
45
43
|
className?: SVGProps<SVGPathElement>['className'];
|
|
@@ -63,20 +61,21 @@ type CurveMouseEvents = {
|
|
|
63
61
|
onMouseOver?: CurveMouseEventHandler;
|
|
64
62
|
onMouseOut?: CurveMouseEventHandler;
|
|
65
63
|
};
|
|
66
|
-
export type Props =
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
64
|
+
export type Props = Omit<
|
|
65
|
+
PresentationAttributesWithProps<CurveProps, SVGPathElement>,
|
|
66
|
+
| 'type'
|
|
67
|
+
| 'points'
|
|
68
|
+
| 'onClick'
|
|
69
|
+
| 'onMouseEnter'
|
|
70
|
+
| 'onMouseLeave'
|
|
71
|
+
| 'onMouseDown'
|
|
72
|
+
| 'onMouseUp'
|
|
73
|
+
| 'onMouseMove'
|
|
74
|
+
| 'onMouseOver'
|
|
75
|
+
| 'onMouseOut'
|
|
76
|
+
> &
|
|
77
|
+
CurveMouseEvents &
|
|
78
|
+
CurveProps;
|
|
80
79
|
type GetPathProps = Pick<Props, 'type' | 'points' | 'baseLine' | 'layout' | 'connectNulls'>;
|
|
81
80
|
// Port of shape/Curve.tsx — the line/area path. The `d` string comes straight
|
|
82
81
|
// from victory-vendor's d3-shape line/area generators (same dependency, same
|
|
@@ -157,28 +156,37 @@ export const getPath = ({
|
|
|
157
156
|
connectNulls = defaultCurveProps.connectNulls,
|
|
158
157
|
}: GetPathProps): string | null => {
|
|
159
158
|
const curveFactory = getCurveFactory(type, layout);
|
|
160
|
-
const formatPoints: ReadonlyArray<NullableCoordinate> =
|
|
161
|
-
|
|
159
|
+
const formatPoints: ReadonlyArray<NullableCoordinate> = connectNulls
|
|
160
|
+
? points.filter(defined)
|
|
161
|
+
: points;
|
|
162
162
|
|
|
163
163
|
// An area chart's array `baseLine` pairs each point with its baseline
|
|
164
164
|
// counterpart FIRST, so the `defined` filter drops both sides together.
|
|
165
165
|
if (Array.isArray(baseLine)) {
|
|
166
|
-
const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map(
|
|
167
|
-
|
|
168
|
-
|
|
166
|
+
const areaPoints: ReadonlyArray<NullableAreaPoint> = points.map((entry, index) => ({
|
|
167
|
+
...entry,
|
|
168
|
+
base: baseLine[index],
|
|
169
|
+
}));
|
|
169
170
|
let lineFunction: D3AreaCurve<AreaPoint>;
|
|
170
171
|
if (layout === 'vertical') {
|
|
171
|
-
lineFunction = shapeArea<AreaPoint>()
|
|
172
|
+
lineFunction = shapeArea<AreaPoint>()
|
|
173
|
+
.y(getY)
|
|
174
|
+
.x1(getX)
|
|
175
|
+
.x0((d) => d.base.x);
|
|
172
176
|
} else {
|
|
173
|
-
lineFunction = shapeArea<AreaPoint>()
|
|
177
|
+
lineFunction = shapeArea<AreaPoint>()
|
|
178
|
+
.x(getX)
|
|
179
|
+
.y1(getY)
|
|
180
|
+
.y0((d) => d.base.y);
|
|
174
181
|
}
|
|
175
182
|
// d3 runs the defined predicate before coordinate accessors; its single
|
|
176
183
|
// generic cannot express the nullable inputs accepted after this guard.
|
|
177
|
-
const nullableLineFunction = lineFunction
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
const finalPoints: ReadonlyArray<NullableAreaPoint> =
|
|
181
|
-
|
|
184
|
+
const nullableLineFunction = lineFunction
|
|
185
|
+
.defined(areaDefined)
|
|
186
|
+
.curve(curveFactory) as D3AreaCurve<NullableAreaPoint>;
|
|
187
|
+
const finalPoints: ReadonlyArray<NullableAreaPoint> = connectNulls
|
|
188
|
+
? areaPoints.filter(areaDefined)
|
|
189
|
+
: areaPoints;
|
|
182
190
|
return nullableLineFunction(finalPoints);
|
|
183
191
|
}
|
|
184
192
|
let lineFunction: D3LineCurve<Coordinate> | D3AreaCurve<Coordinate>;
|
|
@@ -189,9 +197,9 @@ export const getPath = ({
|
|
|
189
197
|
} else {
|
|
190
198
|
lineFunction = shapeLine<Coordinate>().x(getX).y(getY);
|
|
191
199
|
}
|
|
192
|
-
const nullableLineFunction = lineFunction
|
|
193
|
-
|
|
194
|
-
|
|
200
|
+
const nullableLineFunction = lineFunction
|
|
201
|
+
.defined(defined)
|
|
202
|
+
.curve(curveFactory) as D3LineCurve<NullableCoordinate>;
|
|
195
203
|
return nullableLineFunction(formatPoints);
|
|
196
204
|
};
|
|
197
205
|
|
|
@@ -210,11 +218,13 @@ export function Curve(props: Props) {
|
|
|
210
218
|
};
|
|
211
219
|
const realPath: string | null | undefined =
|
|
212
220
|
points && points.length ? getPath(getPathInput) : path;
|
|
213
|
-
return
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
221
|
+
return (
|
|
222
|
+
<path
|
|
223
|
+
{...svgPropertiesNoEvents(props)}
|
|
224
|
+
{...adaptEventHandlers(props)}
|
|
225
|
+
className={clsx('recharts-curve', className)}
|
|
226
|
+
d={realPath === null ? undefined : realPath}
|
|
227
|
+
ref={pathRef}
|
|
228
|
+
/>
|
|
229
|
+
);
|
|
220
230
|
}
|
package/src/shape/Dot.tsrx
CHANGED
|
@@ -19,14 +19,16 @@ export function Dot(props: Props) {
|
|
|
19
19
|
const { cx, cy, r, className } = props;
|
|
20
20
|
const layerClass = clsx('recharts-dot', className);
|
|
21
21
|
if (isNumber(cx) && isNumber(cy) && isNumber(r)) {
|
|
22
|
-
return
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
return (
|
|
23
|
+
<circle
|
|
24
|
+
{...svgPropertiesNoEvents(props)}
|
|
25
|
+
{...adaptEventHandlers(props)}
|
|
26
|
+
className={layerClass}
|
|
27
|
+
cx={cx}
|
|
28
|
+
cy={cy}
|
|
29
|
+
r={r}
|
|
30
|
+
/>
|
|
31
|
+
);
|
|
30
32
|
}
|
|
31
33
|
return null;
|
|
32
34
|
}
|
package/src/shape/Polygon.tsrx
CHANGED
|
@@ -55,13 +55,15 @@ function getSinglePolygonPath(points: ReadonlyArray<Coordinate>, connectNulls?:
|
|
|
55
55
|
if (connectNulls) {
|
|
56
56
|
segmentPoints = [segmentPoints.reduce((res, segPoints) => [...res, ...segPoints], [])];
|
|
57
57
|
}
|
|
58
|
-
const polygonPath = segmentPoints
|
|
59
|
-
(segPoints) =>
|
|
60
|
-
(
|
|
61
|
-
path
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
58
|
+
const polygonPath = segmentPoints
|
|
59
|
+
.map((segPoints) =>
|
|
60
|
+
segPoints.reduce(
|
|
61
|
+
(path, point, index) =>
|
|
62
|
+
path + (index === 0 ? 'M' : 'L') + round(point.x) + ',' + round(point.y),
|
|
63
|
+
'',
|
|
64
|
+
),
|
|
65
|
+
)
|
|
66
|
+
.join('');
|
|
65
67
|
return segmentPoints.length === 1 ? polygonPath + 'Z' : polygonPath;
|
|
66
68
|
}
|
|
67
69
|
|
|
@@ -71,8 +73,11 @@ function getRanglePath(
|
|
|
71
73
|
connectNulls?: boolean,
|
|
72
74
|
) {
|
|
73
75
|
const outerPath = getSinglePolygonPath(points, connectNulls);
|
|
74
|
-
return (
|
|
75
|
-
|
|
76
|
+
return (
|
|
77
|
+
(outerPath.slice(-1) === 'Z' ? outerPath.slice(0, -1) : outerPath) +
|
|
78
|
+
'L' +
|
|
79
|
+
getSinglePolygonPath(Array.from(baseLinePoints).reverse(), connectNulls).slice(1)
|
|
80
|
+
);
|
|
76
81
|
}
|
|
77
82
|
|
|
78
83
|
export function Polygon(props: Props) {
|
|
@@ -84,34 +89,38 @@ export function Polygon(props: Props) {
|
|
|
84
89
|
if (baseLinePoints && baseLinePoints.length) {
|
|
85
90
|
const hasStroke = others.stroke && others.stroke !== 'none';
|
|
86
91
|
const rangePath = getRanglePath(points, baseLinePoints, connectNulls);
|
|
87
|
-
return
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
?
|
|
92
|
+
return (
|
|
93
|
+
<g className={layerClass}>
|
|
94
|
+
<path
|
|
95
|
+
{...svgPropertiesAndEvents(others)}
|
|
96
|
+
fill={rangePath.slice(-1) === 'Z' ? others.fill : 'none'}
|
|
97
|
+
stroke="none"
|
|
98
|
+
d={rangePath}
|
|
99
|
+
/>
|
|
100
|
+
{hasStroke ? (
|
|
101
|
+
<path
|
|
96
102
|
{...svgPropertiesAndEvents(others)}
|
|
97
103
|
fill="none"
|
|
98
104
|
d={getSinglePolygonPath(points, connectNulls)}
|
|
99
105
|
/>
|
|
100
|
-
: null}
|
|
101
|
-
|
|
102
|
-
|
|
106
|
+
) : null}
|
|
107
|
+
{hasStroke ? (
|
|
108
|
+
<path
|
|
103
109
|
{...svgPropertiesAndEvents(others)}
|
|
104
110
|
fill="none"
|
|
105
111
|
d={getSinglePolygonPath(baseLinePoints, connectNulls)}
|
|
106
112
|
/>
|
|
107
|
-
: null}
|
|
108
|
-
|
|
113
|
+
) : null}
|
|
114
|
+
</g>
|
|
115
|
+
);
|
|
109
116
|
}
|
|
110
117
|
const singlePath = getSinglePolygonPath(points, connectNulls);
|
|
111
|
-
return
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
118
|
+
return (
|
|
119
|
+
<path
|
|
120
|
+
{...svgPropertiesAndEvents(others)}
|
|
121
|
+
fill={singlePath.slice(-1) === 'Z' ? others.fill : 'none'}
|
|
122
|
+
className={layerClass}
|
|
123
|
+
d={singlePath}
|
|
124
|
+
/>
|
|
125
|
+
);
|
|
117
126
|
}
|
package/src/shape/Rectangle.tsrx
CHANGED
|
@@ -41,12 +41,10 @@ function getRectanglePath(x: number, y: number, width: number, height: number, r
|
|
|
41
41
|
const roundedWidth = round(width);
|
|
42
42
|
const roundedHeight = round(height);
|
|
43
43
|
const maxRadius = Math.min(Math.abs(roundedWidth) / 2, Math.abs(roundedHeight) / 2);
|
|
44
|
-
const ySign =
|
|
45
|
-
|
|
46
|
-
const xSign =
|
|
47
|
-
roundedWidth >= 0 ? 1 : -1;
|
|
44
|
+
const ySign = roundedHeight >= 0 ? 1 : -1;
|
|
45
|
+
const xSign = roundedWidth >= 0 ? 1 : -1;
|
|
48
46
|
const clockWise =
|
|
49
|
-
roundedHeight >= 0 && roundedWidth >= 0 || roundedHeight < 0 && roundedWidth < 0 ? 1 : 0;
|
|
47
|
+
(roundedHeight >= 0 && roundedWidth >= 0) || (roundedHeight < 0 && roundedWidth < 0) ? 1 : 0;
|
|
50
48
|
let path;
|
|
51
49
|
|
|
52
50
|
if (maxRadius > 0 && Array.isArray(radius)) {
|
|
@@ -58,40 +56,71 @@ function getRectanglePath(x: number, y: number, width: number, height: number, r
|
|
|
58
56
|
// roundTemplateLiteral`M${…},${…}` etc. — values rounded, whitespace verbatim.
|
|
59
57
|
path = 'M' + round(x) + ',' + round(y + ySign * newRadius[0]);
|
|
60
58
|
if (newRadius[0] > 0) {
|
|
61
|
-
path +=
|
|
59
|
+
path +=
|
|
60
|
+
'A ' +
|
|
61
|
+
round(newRadius[0]) +
|
|
62
|
+
',' +
|
|
63
|
+
round(newRadius[0]) +
|
|
64
|
+
',0,0,' +
|
|
65
|
+
round(clockWise) +
|
|
62
66
|
',' +
|
|
63
67
|
round(x + xSign * newRadius[0]) +
|
|
64
68
|
',' +
|
|
65
|
-
|
|
69
|
+
round(y);
|
|
66
70
|
}
|
|
67
71
|
path += 'L ' + round(x + width - xSign * newRadius[1]) + ',' + round(y);
|
|
68
72
|
if (newRadius[1] > 0) {
|
|
69
|
-
path +=
|
|
73
|
+
path +=
|
|
74
|
+
'A ' +
|
|
75
|
+
round(newRadius[1]) +
|
|
76
|
+
',' +
|
|
77
|
+
round(newRadius[1]) +
|
|
78
|
+
',0,0,' +
|
|
79
|
+
round(clockWise) +
|
|
70
80
|
',\n ' +
|
|
71
81
|
round(x + width) +
|
|
72
82
|
',' +
|
|
73
|
-
|
|
83
|
+
round(y + ySign * newRadius[1]);
|
|
74
84
|
}
|
|
75
85
|
path += 'L ' + round(x + width) + ',' + round(y + height - ySign * newRadius[2]);
|
|
76
86
|
if (newRadius[2] > 0) {
|
|
77
|
-
path +=
|
|
87
|
+
path +=
|
|
88
|
+
'A ' +
|
|
89
|
+
round(newRadius[2]) +
|
|
90
|
+
',' +
|
|
91
|
+
round(newRadius[2]) +
|
|
92
|
+
',0,0,' +
|
|
93
|
+
round(clockWise) +
|
|
78
94
|
',\n ' +
|
|
79
95
|
round(x + width - xSign * newRadius[2]) +
|
|
80
96
|
',' +
|
|
81
|
-
|
|
97
|
+
round(y + height);
|
|
82
98
|
}
|
|
83
99
|
path += 'L ' + round(x + xSign * newRadius[3]) + ',' + round(y + height);
|
|
84
100
|
if (newRadius[3] > 0) {
|
|
85
|
-
path +=
|
|
101
|
+
path +=
|
|
102
|
+
'A ' +
|
|
103
|
+
round(newRadius[3]) +
|
|
104
|
+
',' +
|
|
105
|
+
round(newRadius[3]) +
|
|
106
|
+
',0,0,' +
|
|
107
|
+
round(clockWise) +
|
|
86
108
|
',\n ' +
|
|
87
109
|
round(x) +
|
|
88
110
|
',' +
|
|
89
|
-
|
|
111
|
+
round(y + height - ySign * newRadius[3]);
|
|
90
112
|
}
|
|
91
113
|
path += 'Z';
|
|
92
114
|
} else if (maxRadius > 0 && radius === +radius && radius > 0) {
|
|
93
115
|
const r = Math.min(maxRadius, radius);
|
|
94
|
-
path =
|
|
116
|
+
path =
|
|
117
|
+
'M ' +
|
|
118
|
+
round(x) +
|
|
119
|
+
',' +
|
|
120
|
+
round(y + ySign * r) +
|
|
121
|
+
'\n A ' +
|
|
122
|
+
round(r) +
|
|
123
|
+
',' +
|
|
95
124
|
round(r) +
|
|
96
125
|
',0,0,' +
|
|
97
126
|
round(clockWise) +
|
|
@@ -141,11 +170,20 @@ function getRectanglePath(x: number, y: number, width: number, height: number, r
|
|
|
141
170
|
round(x) +
|
|
142
171
|
',' +
|
|
143
172
|
round(y + height - ySign * r) +
|
|
144
|
-
|
|
173
|
+
' Z';
|
|
145
174
|
} else {
|
|
146
|
-
path =
|
|
175
|
+
path =
|
|
176
|
+
'M ' +
|
|
177
|
+
round(x) +
|
|
178
|
+
',' +
|
|
179
|
+
round(y) +
|
|
180
|
+
' h ' +
|
|
181
|
+
round(width) +
|
|
182
|
+
' v ' +
|
|
183
|
+
round(height) +
|
|
184
|
+
' h ' +
|
|
147
185
|
round(-width) +
|
|
148
|
-
|
|
186
|
+
' Z';
|
|
149
187
|
}
|
|
150
188
|
return path;
|
|
151
189
|
}
|
|
@@ -168,7 +206,12 @@ export function Rectangle(rectangleProps: Props) {
|
|
|
168
206
|
const { x, y, width, height, radius, className } = props;
|
|
169
207
|
|
|
170
208
|
if (
|
|
171
|
-
x !== +x ||
|
|
209
|
+
x !== +x ||
|
|
210
|
+
y !== +y ||
|
|
211
|
+
width !== +width ||
|
|
212
|
+
height !== +height ||
|
|
213
|
+
width === 0 ||
|
|
214
|
+
height === 0
|
|
172
215
|
) {
|
|
173
216
|
return null;
|
|
174
217
|
}
|
|
@@ -176,14 +219,16 @@ export function Rectangle(rectangleProps: Props) {
|
|
|
176
219
|
|
|
177
220
|
// Static path — the update-animation branch is a Phase 5 port.
|
|
178
221
|
const { radius: _radius, ...otherPathProps } = svgPropertiesAndEvents(props);
|
|
179
|
-
return
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
222
|
+
return (
|
|
223
|
+
<path
|
|
224
|
+
{...otherPathProps}
|
|
225
|
+
x={round(x)}
|
|
226
|
+
y={round(y)}
|
|
227
|
+
width={round(width)}
|
|
228
|
+
height={round(height)}
|
|
229
|
+
radius={typeof radius === 'number' ? radius : undefined}
|
|
230
|
+
className={layerClass}
|
|
231
|
+
d={getRectanglePath(x, y, width, height, radius)}
|
|
232
|
+
/>
|
|
233
|
+
);
|
|
189
234
|
}
|
package/src/shape/Sector.tsrx
CHANGED
|
@@ -31,8 +31,8 @@ interface SectorProps {
|
|
|
31
31
|
onMouseEnter?: (e: NativeMouseEvent<SVGPathElement>) => void;
|
|
32
32
|
onMouseLeave?: (e: NativeMouseEvent<SVGPathElement>) => void;
|
|
33
33
|
}
|
|
34
|
-
export type Props =
|
|
35
|
-
|
|
34
|
+
export type Props = Omit<SVGProps<SVGPathElement>, 'cx' | 'cy' | 'dangerouslySetInnerHTML'> &
|
|
35
|
+
Partial<SectorProps>;
|
|
36
36
|
// Port of shape/Sector.tsx — the pie/radial-bar wedge (arc path with optional
|
|
37
37
|
// per-corner rounding). Path strings must be BYTE-IDENTICAL to upstream:
|
|
38
38
|
// recharts builds them with roundTemplateLiteral (every interpolated number
|
|
@@ -106,8 +106,7 @@ const getSectorPath = ({
|
|
|
106
106
|
const innerStartPoint = polarToCartesian(cx, cy, innerRadius, startAngle);
|
|
107
107
|
const innerEndPoint = polarToCartesian(cx, cy, innerRadius, tempEndAngle);
|
|
108
108
|
const innerSweep = +(startAngle <= tempEndAngle);
|
|
109
|
-
path +=
|
|
110
|
-
roundTemplateLiteral`L ${innerEndPoint.x},${innerEndPoint.y}
|
|
109
|
+
path += roundTemplateLiteral`L ${innerEndPoint.x},${innerEndPoint.y}
|
|
111
110
|
A ${innerRadius},${innerRadius},0,
|
|
112
111
|
${largeArc},${innerSweep},
|
|
113
112
|
${innerStartPoint.x},${innerStartPoint.y} Z`;
|
|
@@ -129,7 +128,11 @@ const getSectorWithCorner = ({
|
|
|
129
128
|
endAngle,
|
|
130
129
|
}: GeometrySectorWithCornerRadius) => {
|
|
131
130
|
const sign = mathSign(endAngle - startAngle);
|
|
132
|
-
const {
|
|
131
|
+
const {
|
|
132
|
+
circleTangency: soct,
|
|
133
|
+
lineTangency: solt,
|
|
134
|
+
theta: sot,
|
|
135
|
+
} = getTangentCircle({
|
|
133
136
|
cx,
|
|
134
137
|
cy,
|
|
135
138
|
radius: outerRadius,
|
|
@@ -138,7 +141,11 @@ const getSectorWithCorner = ({
|
|
|
138
141
|
cornerRadius,
|
|
139
142
|
cornerIsExternal,
|
|
140
143
|
});
|
|
141
|
-
const {
|
|
144
|
+
const {
|
|
145
|
+
circleTangency: eoct,
|
|
146
|
+
lineTangency: eolt,
|
|
147
|
+
theta: eot,
|
|
148
|
+
} = getTangentCircle({
|
|
142
149
|
cx,
|
|
143
150
|
cy,
|
|
144
151
|
radius: outerRadius,
|
|
@@ -147,10 +154,9 @@ const getSectorWithCorner = ({
|
|
|
147
154
|
cornerRadius,
|
|
148
155
|
cornerIsExternal,
|
|
149
156
|
});
|
|
150
|
-
const outerArcAngle =
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
: Math.abs(startAngle - endAngle) - sot - eot;
|
|
157
|
+
const outerArcAngle = cornerIsExternal
|
|
158
|
+
? Math.abs(startAngle - endAngle)
|
|
159
|
+
: Math.abs(startAngle - endAngle) - sot - eot;
|
|
154
160
|
if (outerArcAngle < 0) {
|
|
155
161
|
if (forceCornerRadius) {
|
|
156
162
|
const cornerDiameter = cornerRadius * 2;
|
|
@@ -169,7 +175,11 @@ const getSectorWithCorner = ({
|
|
|
169
175
|
A${cornerRadius},${cornerRadius},0,0,${sweep},${eolt.x},${eolt.y}
|
|
170
176
|
`;
|
|
171
177
|
if (innerRadius > 0) {
|
|
172
|
-
const {
|
|
178
|
+
const {
|
|
179
|
+
circleTangency: sict,
|
|
180
|
+
lineTangency: silt,
|
|
181
|
+
theta: sit,
|
|
182
|
+
} = getTangentCircle({
|
|
173
183
|
cx,
|
|
174
184
|
cy,
|
|
175
185
|
radius: innerRadius,
|
|
@@ -179,7 +189,11 @@ const getSectorWithCorner = ({
|
|
|
179
189
|
cornerRadius,
|
|
180
190
|
cornerIsExternal,
|
|
181
191
|
});
|
|
182
|
-
const {
|
|
192
|
+
const {
|
|
193
|
+
circleTangency: eict,
|
|
194
|
+
lineTangency: eilt,
|
|
195
|
+
theta: eit,
|
|
196
|
+
} = getTangentCircle({
|
|
183
197
|
cx,
|
|
184
198
|
cy,
|
|
185
199
|
radius: innerRadius,
|
|
@@ -189,17 +203,15 @@ const getSectorWithCorner = ({
|
|
|
189
203
|
cornerRadius,
|
|
190
204
|
cornerIsExternal,
|
|
191
205
|
});
|
|
192
|
-
const innerArcAngle =
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
: Math.abs(startAngle - endAngle) - sit - eit;
|
|
206
|
+
const innerArcAngle = cornerIsExternal
|
|
207
|
+
? Math.abs(startAngle - endAngle)
|
|
208
|
+
: Math.abs(startAngle - endAngle) - sit - eit;
|
|
196
209
|
if (innerArcAngle < 0 && cornerRadius === 0) {
|
|
197
210
|
return path + 'L' + cx + ',' + cy + 'Z';
|
|
198
211
|
}
|
|
199
212
|
const innerLargeArc = +(innerArcAngle > 180);
|
|
200
213
|
const innerSweep = +(sign > 0);
|
|
201
|
-
path +=
|
|
202
|
-
roundTemplateLiteral`L${eilt.x},${eilt.y}
|
|
214
|
+
path += roundTemplateLiteral`L${eilt.x},${eilt.y}
|
|
203
215
|
A${cornerRadius},${cornerRadius},0,0,${sweep},${eict.x},${eict.y}
|
|
204
216
|
A${innerRadius},${innerRadius},0,${innerLargeArc},${innerSweep},${sict.x},${sict.y}
|
|
205
217
|
A${cornerRadius},${cornerRadius},0,0,${sweep},${silt.x},${silt.y}Z`;
|
package/src/shape/Symbols.tsrx
CHANGED
|
@@ -14,8 +14,8 @@ export interface InnerSymbolsProp {
|
|
|
14
14
|
size?: number;
|
|
15
15
|
sizeType?: SizeType;
|
|
16
16
|
}
|
|
17
|
-
export type SymbolsProps =
|
|
18
|
-
|
|
17
|
+
export type SymbolsProps = Omit<SVGProps<SVGPathElement>, keyof InnerSymbolsProp> &
|
|
18
|
+
InnerSymbolsProp;
|
|
19
19
|
// Port of shape/Symbols.tsx — the scatter/legend marker shapes, drawn by
|
|
20
20
|
// victory-vendor's d3-shape symbol generators (byte-identical `d` output).
|
|
21
21
|
import {
|
|
@@ -88,9 +88,9 @@ export function Symbols(symbolsProps: SymbolsProps) {
|
|
|
88
88
|
}
|
|
89
89
|
const getSymbolPath = () => {
|
|
90
90
|
const symbolFactory = getSymbolFactory(realType);
|
|
91
|
-
const symbolGen = shapeSymbol()
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
const symbolGen = shapeSymbol()
|
|
92
|
+
.type(symbolFactory)
|
|
93
|
+
.size(calculateAreaSize(size, sizeType, realType));
|
|
94
94
|
const s = symbolGen();
|
|
95
95
|
if (s === null) {
|
|
96
96
|
return undefined;
|
|
@@ -100,12 +100,14 @@ export function Symbols(symbolsProps: SymbolsProps) {
|
|
|
100
100
|
const { className, cx, cy } = props;
|
|
101
101
|
const filteredProps = svgPropertiesAndEvents(props);
|
|
102
102
|
if (isNumber(cx) && isNumber(cy) && isNumber(size)) {
|
|
103
|
-
return
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
103
|
+
return (
|
|
104
|
+
<path
|
|
105
|
+
{...filteredProps}
|
|
106
|
+
className={clsx('recharts-symbols', className)}
|
|
107
|
+
transform={'translate(' + cx + ', ' + cy + ')'}
|
|
108
|
+
d={getSymbolPath()}
|
|
109
|
+
/>
|
|
110
|
+
);
|
|
109
111
|
}
|
|
110
112
|
return null;
|
|
111
113
|
}
|
package/src/shape/Trapezoid.tsrx
CHANGED
|
@@ -65,10 +65,13 @@ export function Trapezoid(outsideProps: Props) {
|
|
|
65
65
|
const { x, y, upperWidth, lowerWidth, height, className } = trapezoidProps;
|
|
66
66
|
|
|
67
67
|
if (
|
|
68
|
-
x !== +x ||
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
x !== +x ||
|
|
69
|
+
y !== +y ||
|
|
70
|
+
upperWidth !== +upperWidth ||
|
|
71
|
+
lowerWidth !== +lowerWidth ||
|
|
72
|
+
height !== +height ||
|
|
73
|
+
(upperWidth === 0 && lowerWidth === 0) ||
|
|
74
|
+
height === 0
|
|
72
75
|
) {
|
|
73
76
|
return null;
|
|
74
77
|
}
|
|
@@ -76,11 +79,13 @@ export function Trapezoid(outsideProps: Props) {
|
|
|
76
79
|
|
|
77
80
|
// Static path — the update-animation branch is a Phase 5 port. Upstream's
|
|
78
81
|
// static branch wraps the path in a <g>, so mirror that.
|
|
79
|
-
return
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
82
|
+
return (
|
|
83
|
+
<g>
|
|
84
|
+
<path
|
|
85
|
+
{...svgPropertiesAndEvents(trapezoidProps)}
|
|
86
|
+
className={layerClass}
|
|
87
|
+
d={getTrapezoidPath(x, y, upperWidth, lowerWidth, height)}
|
|
88
|
+
/>
|
|
89
|
+
</g>
|
|
90
|
+
);
|
|
86
91
|
}
|
|
@@ -29,5 +29,9 @@ export function RechartsStoreProvider(props: RechartsStoreProviderProps) {
|
|
|
29
29
|
if (storeRef.current == null) {
|
|
30
30
|
storeRef.current = createRechartsStore(preloadedState, reduxStoreName);
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return (
|
|
33
|
+
<Provider context={RechartsReduxContext} store={storeRef.current}>
|
|
34
|
+
{children}
|
|
35
|
+
</Provider>
|
|
36
|
+
);
|
|
33
37
|
}
|