react-native-gifted-charts 1.4.38 → 1.4.39
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/PieChart/index.js +1 -1
- package/dist/PieChart/main.js +123 -169
- package/package.json +2 -2
package/dist/PieChart/index.js
CHANGED
package/dist/PieChart/main.js
CHANGED
|
@@ -1,188 +1,142 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import React from 'react';
|
|
3
|
-
import { View } from 'react-native';
|
|
3
|
+
import { TouchableWithoutFeedback, View, } from 'react-native';
|
|
4
4
|
import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, Line, } from 'react-native-svg';
|
|
5
5
|
import { getPieChartMainProps, pieColors, } from 'gifted-charts-core';
|
|
6
6
|
import { rnVersion } from '../utils';
|
|
7
7
|
export var PieChartMain = function (props) {
|
|
8
|
-
var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, toggleFocusOnPress = _a.toggleFocusOnPress, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, pData = _a.pData, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadius = _a.extraRadius, showExternalLabels = _a.showExternalLabels, getExternaLabelProperties = _a.getExternaLabelProperties;
|
|
8
|
+
var _a = getPieChartMainProps(props), isThreeD = _a.isThreeD, isBiggerPie = _a.isBiggerPie, data = _a.data, showInnerComponent = _a.showInnerComponent, radius = _a.radius, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, shadowWidth = _a.shadowWidth, backgroundColor = _a.backgroundColor, shadowColor = _a.shadowColor, semiCircle = _a.semiCircle, pi = _a.pi, initialAngle = _a.initialAngle, shadow = _a.shadow, donut = _a.donut, strokeWidth = _a.strokeWidth, strokeColor = _a.strokeColor, innerRadius = _a.innerRadius, showText = _a.showText, textColor = _a.textColor, textSize = _a.textSize, tiltAngle = _a.tiltAngle, labelsPosition = _a.labelsPosition, showTextBackground = _a.showTextBackground, textBackgroundColor = _a.textBackgroundColor, showValuesAsLabels = _a.showValuesAsLabels, showGradient = _a.showGradient, gradientCenterColor = _a.gradientCenterColor, toggleFocusOnPress = _a.toggleFocusOnPress, minShiftX = _a.minShiftX, minShiftY = _a.minShiftY, total = _a.total, horizAdjustment = _a.horizAdjustment, vertAdjustment = _a.vertAdjustment, cx = _a.cx, cy = _a.cy, pData = _a.pData, mData = _a.mData, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, extraRadius = _a.extraRadius, showExternalLabels = _a.showExternalLabels, getExternaLabelProperties = _a.getExternaLabelProperties, coordinates = _a.coordinates, onPressed = _a.onPressed;
|
|
9
9
|
var prevSide = 'right';
|
|
10
10
|
var prevLabelComponentX = 0;
|
|
11
11
|
var wasFirstItemOnPole = false;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
(
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
: item.
|
|
12
|
+
var onPressHandler = function (e) {
|
|
13
|
+
var rad = radius;
|
|
14
|
+
var _a = e.nativeEvent, x = _a.locationX, y = _a.locationY;
|
|
15
|
+
x -= extraRadius;
|
|
16
|
+
y -= extraRadius;
|
|
17
|
+
var r = Math.sqrt(Math.pow((x - cx), 2) + Math.pow((y - cy), 2));
|
|
18
|
+
if (r > rad)
|
|
19
|
+
return;
|
|
20
|
+
var a = Math.atan2(y - cy, x - cx);
|
|
21
|
+
for (var index = 0; index < data.length; index++) {
|
|
22
|
+
var angle = coordinates[index];
|
|
23
|
+
var sx = angle.sx, sy = angle.sy, ax = angle.ax, ay = angle.ay;
|
|
24
|
+
var startAngle = Math.atan2(sy - cy, sx - cx);
|
|
25
|
+
var endAngle = Math.atan2(ay - cy, ax - cx);
|
|
26
|
+
if (startAngle < endAngle) {
|
|
27
|
+
if (startAngle < a && a < endAngle) {
|
|
28
|
+
onPressed(data[index], index);
|
|
29
|
+
break;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
else {
|
|
33
|
+
if (a > startAngle || a < endAngle) {
|
|
34
|
+
onPressed(data[index], index);
|
|
35
|
+
break;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
return (_jsx(TouchableWithoutFeedback, { onPress: onPressHandler, children: _jsxs(View, { pointerEvents: "box-only", style: [
|
|
41
|
+
{
|
|
42
|
+
backgroundColor: backgroundColor,
|
|
43
|
+
height: semiCircle
|
|
44
|
+
? (canvasHeight + paddingVertical) / 2 + extraRadius
|
|
45
|
+
: canvasHeight + paddingVertical + extraRadius * 2,
|
|
46
|
+
width: canvasWidth + paddingHorizontal + extraRadius * 2,
|
|
47
|
+
overflow: 'hidden',
|
|
48
|
+
},
|
|
49
|
+
isThreeD && { transform: [{ rotateX: tiltAngle }] },
|
|
50
|
+
], children: [_jsxs(Svg, { pointerEvents: rnVersion >= 720000 ? 'box-none' : 'auto', viewBox: "".concat(strokeWidth / -2 + minShiftX - extraRadius - paddingHorizontal / 2, " ").concat(strokeWidth / -2 + minShiftY - extraRadius - paddingVertical / 2, " ").concat((radius + extraRadius + strokeWidth) * 2 +
|
|
51
|
+
paddingHorizontal +
|
|
52
|
+
horizAdjustment +
|
|
53
|
+
(horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadius + strokeWidth) * 2 +
|
|
54
|
+
paddingVertical +
|
|
55
|
+
vertAdjustment +
|
|
56
|
+
(vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
|
|
57
|
+
return (_jsxs(RadialGradient, { id: 'grad' + index, cx: "50%", cy: "50%", rx: "50%", ry: "50%", fx: "50%", fy: "50%", gradientUnits: "userSpaceOnUse", children: [_jsx(Stop, { offset: "0%", stopColor: item.gradientCenterColor || gradientCenterColor, stopOpacity: "1" }), _jsx(Stop, { offset: "100%", stopColor: item.color || pieColors[index % 9], stopOpacity: "1" })] }, index + ''));
|
|
58
|
+
}) }), data.length === 1 ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
|
|
59
|
+
? "url(#grad".concat(0, ")")
|
|
60
|
+
: data[0].color || pieColors[0 % 9] }) })) : (data.map(function (item, index) {
|
|
61
|
+
var _a = coordinates[index], sx = _a.sx, sy = _a.sy, ax = _a.ax, ay = _a.ay;
|
|
62
|
+
if (isBiggerPie && index)
|
|
63
|
+
return null;
|
|
64
|
+
return (_jsx(Path, { d: "M ".concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0), " L ").concat(sx, " ").concat(sy, " A ").concat(radius, " ").concat(radius, " 0 ").concat(semiCircle ? 0 : data[index].value > total / 2 ? 1 : 0, " 1 ").concat(ax, " ").concat(ay, " L ").concat(cx + (item.shiftX || 0), " ").concat(cy + (item.shiftY || 0)), stroke: item.strokeColor || strokeColor, strokeWidth: props.focusOnPress && props.selectedIndex === index
|
|
58
65
|
? 0
|
|
59
|
-
: item.strokeWidth
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
?
|
|
63
|
-
:
|
|
64
|
-
|
|
65
|
-
|
|
66
|
+
: item.strokeWidth === 0
|
|
67
|
+
? 0
|
|
68
|
+
: item.strokeWidth || strokeWidth, fill: props.selectedIndex === index || item.peripheral
|
|
69
|
+
? 'none'
|
|
70
|
+
: showGradient
|
|
71
|
+
? "url(#grad".concat(index, ")")
|
|
72
|
+
: item.color || pieColors[index % 9] }, index + 'a'));
|
|
73
|
+
})), (showText || showInnerComponent || showExternalLabels) &&
|
|
74
|
+
data.map(function (item, index) {
|
|
75
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
76
|
+
var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
|
|
77
|
+
if (isBiggerPie && index)
|
|
78
|
+
return null;
|
|
79
|
+
if (!props.data[index].value)
|
|
80
|
+
return null;
|
|
81
|
+
var mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
|
|
82
|
+
var my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
|
|
83
|
+
var midx = (mx + cx) / 2;
|
|
84
|
+
var midy = (my + cy) / 2;
|
|
85
|
+
var x = midx, y = midy;
|
|
86
|
+
var labelPosition = item.labelPosition || labelsPosition;
|
|
87
|
+
if (labelPosition === 'onBorder') {
|
|
88
|
+
x = mx;
|
|
89
|
+
y = my;
|
|
66
90
|
}
|
|
67
|
-
else if (
|
|
68
|
-
|
|
91
|
+
else if (labelPosition === 'outward') {
|
|
92
|
+
x = (midx + mx) / 2;
|
|
93
|
+
y = (midy + my) / 2;
|
|
69
94
|
}
|
|
70
|
-
if (
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
95
|
+
else if (labelPosition === 'inward') {
|
|
96
|
+
x = (midx + cx) / 2;
|
|
97
|
+
y = (midy + cy) / 2;
|
|
98
|
+
}
|
|
99
|
+
x += item.shiftX || 0;
|
|
100
|
+
y += item.shiftY || 0;
|
|
101
|
+
if (data.length === 1) {
|
|
102
|
+
if (donut) {
|
|
103
|
+
y =
|
|
104
|
+
(radius -
|
|
105
|
+
innerRadius +
|
|
106
|
+
(item.textBackgroundRadius ||
|
|
107
|
+
props.textBackgroundRadius ||
|
|
108
|
+
item.textSize ||
|
|
109
|
+
textSize)) /
|
|
110
|
+
2;
|
|
75
111
|
}
|
|
76
112
|
else {
|
|
77
|
-
|
|
113
|
+
y = cy;
|
|
78
114
|
}
|
|
79
115
|
}
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return null
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
var mx = cx * (1 + Math.sin(2 * pi * mData[index] + initialAngle));
|
|
90
|
-
var my = cy * (1 - Math.cos(2 * pi * mData[index] + initialAngle));
|
|
91
|
-
var midx = (mx + cx) / 2;
|
|
92
|
-
var midy = (my + cy) / 2;
|
|
93
|
-
var x = midx, y = midy;
|
|
94
|
-
var labelPosition = item.labelPosition || labelsPosition;
|
|
95
|
-
if (labelPosition === 'onBorder') {
|
|
96
|
-
x = mx;
|
|
97
|
-
y = my;
|
|
98
|
-
}
|
|
99
|
-
else if (labelPosition === 'outward') {
|
|
100
|
-
x = (midx + mx) / 2;
|
|
101
|
-
y = (midy + my) / 2;
|
|
102
|
-
}
|
|
103
|
-
else if (labelPosition === 'inward') {
|
|
104
|
-
x = (midx + cx) / 2;
|
|
105
|
-
y = (midy + cy) / 2;
|
|
106
|
-
}
|
|
107
|
-
x += item.shiftX || 0;
|
|
108
|
-
y += item.shiftY || 0;
|
|
109
|
-
if (data.length === 1) {
|
|
110
|
-
if (donut) {
|
|
111
|
-
y =
|
|
112
|
-
(radius -
|
|
113
|
-
innerRadius +
|
|
114
|
-
(item.textBackgroundRadius ||
|
|
116
|
+
var _h = getExternaLabelProperties(item, mx, my, cx, cy, prevSide, prevLabelComponentX, index === data.length - 1, // isLast
|
|
117
|
+
wasFirstItemOnPole), labelLineColor = _h.labelLineColor, labelLineThickness = _h.labelLineThickness, labelComponentHeight = _h.labelComponentHeight, inX = _h.inX, inY = _h.inY, outX = _h.outX, outY = _h.outY, finalX = _h.finalX, labelComponentX = _h.labelComponentX, labelComponentY = _h.labelComponentY, localExternalLabelComponent = _h.localExternalLabelComponent, isRightHalf = _h.isRightHalf;
|
|
118
|
+
prevSide = isRightHalf ? 'right' : 'left';
|
|
119
|
+
prevLabelComponentX = labelComponentX;
|
|
120
|
+
if (index === 0)
|
|
121
|
+
wasFirstItemOnPole = labelComponentY !== outY;
|
|
122
|
+
return (_jsxs(React.Fragment, { children: [showExternalLabels ? (_jsxs(G, { children: [_jsx(Line, { x1: inX, x2: outX, y1: inY, y2: outY, stroke: labelLineColor, strokeWidth: labelLineThickness }), _jsx(Line, { x1: outX, x2: finalX, y1: outY, y2: outY, stroke: labelLineColor, strokeWidth: labelLineThickness }), localExternalLabelComponent ? (_jsx(G, { x: labelComponentX, y: labelComponentY + labelComponentHeight / 2, children: (_b = localExternalLabelComponent === null || localExternalLabelComponent === void 0 ? void 0 : localExternalLabelComponent(item, index)) !== null && _b !== void 0 ? _b : null })) : null] })) : null, showTextBackground ? (_jsx(Circle, { cx: x + ((_d = (_c = item.shiftTextBackgroundX) !== null && _c !== void 0 ? _c : item.shiftTextX) !== null && _d !== void 0 ? _d : 0), cy: y +
|
|
123
|
+
((_f = (_e = item.shiftTextBackgroundY) !== null && _e !== void 0 ? _e : item.shiftTextY) !== null && _f !== void 0 ? _f : 0) -
|
|
124
|
+
(item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
|
|
115
125
|
props.textBackgroundRadius ||
|
|
116
126
|
item.textSize ||
|
|
117
|
-
textSize))
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
(item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
|
|
133
|
-
props.textBackgroundRadius ||
|
|
134
|
-
item.textSize ||
|
|
135
|
-
textSize, fill: item.textBackgroundColor || textBackgroundColor, onPress: function () {
|
|
136
|
-
item.onLabelPress
|
|
137
|
-
? item.onLabelPress()
|
|
138
|
-
: props.onLabelPress
|
|
139
|
-
? props.onLabelPress(item, index)
|
|
140
|
-
: item.onPress
|
|
141
|
-
? item.onPress()
|
|
142
|
-
: props.onPress
|
|
143
|
-
? props.onPress(item, index)
|
|
144
|
-
: null;
|
|
145
|
-
if (props.focusOnPress) {
|
|
146
|
-
if (props.selectedIndex === index) {
|
|
147
|
-
if (toggleFocusOnPress) {
|
|
148
|
-
props.setSelectedIndex(-1);
|
|
149
|
-
}
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
props.setSelectedIndex(index);
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
} })) : null, showText && (_jsx(SvgText, { fill: item.textColor || textColor || pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
|
|
156
|
-
(item.shiftTextX || 0) -
|
|
157
|
-
(item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
|
|
158
|
-
item.onLabelPress
|
|
159
|
-
? item.onLabelPress()
|
|
160
|
-
: props.onLabelPress
|
|
161
|
-
? props.onLabelPress(item, index)
|
|
162
|
-
: item.onPress
|
|
163
|
-
? item.onPress()
|
|
164
|
-
: props.onPress
|
|
165
|
-
? props.onPress(item, index)
|
|
166
|
-
: null;
|
|
167
|
-
if (props.focusOnPress) {
|
|
168
|
-
if (props.selectedIndex === index) {
|
|
169
|
-
if (toggleFocusOnPress) {
|
|
170
|
-
props.setSelectedIndex(-1);
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
else {
|
|
174
|
-
props.setSelectedIndex(index);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}, children: item.text || (showValuesAsLabels ? item.value + '' : '') })), localPieInnerComponent ? (_jsx(G, { x: x, y: y, children: (_g = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _g !== void 0 ? _g : null })) : null] }, index));
|
|
178
|
-
})] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {
|
|
179
|
-
width: radius * 2,
|
|
180
|
-
height: radius * 2,
|
|
181
|
-
backgroundColor: shadowColor,
|
|
182
|
-
borderRadius: radius,
|
|
183
|
-
position: 'absolute',
|
|
184
|
-
top: shadowWidth + paddingVertical / 2,
|
|
185
|
-
left: paddingHorizontal / 2,
|
|
186
|
-
zIndex: -1,
|
|
187
|
-
} })) : null] }));
|
|
127
|
+
textSize, fill: item.textBackgroundColor || textBackgroundColor })) : null, showText && (_jsx(SvgText, { fill: item.textColor ||
|
|
128
|
+
textColor ||
|
|
129
|
+
pieColors[(index + 2) % 9], fontSize: item.textSize || textSize, fontFamily: item.font || props.font, fontWeight: item.fontWeight || props.fontWeight, fontStyle: item.fontStyle || props.fontStyle || 'normal', x: x +
|
|
130
|
+
(item.shiftTextX || 0) -
|
|
131
|
+
(item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), children: item.text || (showValuesAsLabels ? item.value + '' : '') })), localPieInnerComponent ? (_jsx(G, { x: x, y: y, children: (_g = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _g !== void 0 ? _g : null })) : null] }, index));
|
|
132
|
+
})] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {
|
|
133
|
+
width: radius * 2,
|
|
134
|
+
height: radius * 2,
|
|
135
|
+
backgroundColor: shadowColor,
|
|
136
|
+
borderRadius: radius,
|
|
137
|
+
position: 'absolute',
|
|
138
|
+
top: shadowWidth + paddingVertical / 2,
|
|
139
|
+
left: paddingHorizontal / 2,
|
|
140
|
+
zIndex: -1,
|
|
141
|
+
} })) : null] }) }));
|
|
188
142
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gifted-charts",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.39",
|
|
4
4
|
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"registry": "https://registry.npmjs.org/"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"gifted-charts-core": "0.1.
|
|
28
|
+
"gifted-charts-core": "0.1.40"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@babel/cli": "^7.24.8",
|