react-native-gifted-charts 1.4.26 → 1.4.28

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.
Files changed (3) hide show
  1. package/dist/PieChart/index.js +9 -9
  2. package/dist/PieChart/main.js +15 -17
  3. package/package.json +2 -2
package/dist/PieChart/index.js CHANGED
@@ -14,7 +14,7 @@ import { View } from 'react-native';
14
14
  import { PieChartMain } from './main';
15
15
  import { pieColors, usePieChart } from 'gifted-charts-core';
16
16
  export var PieChart = function (props) {
17
- var _a = usePieChart(props), radius = _a.radius, extraRadiusForFocused = _a.extraRadiusForFocused, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical;
17
+ var _a = usePieChart(props), radius = _a.radius, extraRadius = _a.extraRadius, selectedIndex = _a.selectedIndex, setSelectedIndex = _a.setSelectedIndex, startAngle = _a.startAngle, total = _a.total, donut = _a.donut, isThreeD = _a.isThreeD, semiCircle = _a.semiCircle, inwardExtraLengthForFocused = _a.inwardExtraLengthForFocused, canvasWidth = _a.canvasWidth, canvasHeight = _a.canvasHeight, innerRadius = _a.innerRadius, innerCircleColor = _a.innerCircleColor, innerCircleBorderWidth = _a.innerCircleBorderWidth, innerCircleBorderColor = _a.innerCircleBorderColor, shiftInnerCenterX = _a.shiftInnerCenterX, shiftInnerCenterY = _a.shiftInnerCenterY, tiltAngle = _a.tiltAngle, isDataShifted = _a.isDataShifted, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical;
18
18
  var renderInnerCircle = function (innerRadius, innerCircleBorderWidth) {
19
19
  if (props.centerLabelComponent || (donut && !isDataShifted)) {
20
20
  return (_jsx(View, { style: [
@@ -29,12 +29,12 @@ export var PieChart = function (props) {
29
29
  left: canvasWidth / 2 -
30
30
  innerRadius +
31
31
  shiftInnerCenterX +
32
- extraRadiusForFocused +
32
+ extraRadius +
33
33
  paddingHorizontal / 2,
34
34
  top: canvasHeight / 2 -
35
35
  innerRadius +
36
36
  shiftInnerCenterY +
37
- extraRadiusForFocused +
37
+ extraRadius +
38
38
  paddingVertical / 2,
39
39
  borderWidth: innerCircleBorderWidth,
40
40
  borderColor: innerCircleBorderColor,
@@ -66,17 +66,17 @@ export var PieChart = function (props) {
66
66
  if (!total)
67
67
  return null;
68
68
  return (_jsxs(View, { style: {
69
- height: (radius + extraRadiusForFocused + paddingVertical / 2) *
69
+ height: (radius + extraRadius + paddingVertical / 2) *
70
70
  (props.semiCircle ? 1 : 2),
71
- width: (radius + extraRadiusForFocused + paddingHorizontal / 2) * 2,
71
+ width: (radius + extraRadius + paddingHorizontal / 2) * 2,
72
72
  overflow: 'hidden',
73
- }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
73
+ }, children: [_jsx(View, { style: { position: 'absolute' }, children: _jsx(PieChartMain, __assign({}, props, { selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) }), renderInnerCircle(innerRadius, innerCircleBorderWidth), props.data.length > 1 &&
74
74
  props.data[selectedIndex] && // don't forget to add this one so there are no errors when the data is empty / updating
75
75
  (props.focusOnPress || props.sectionAutoFocus) &&
76
76
  selectedIndex !== -1 && (_jsx(View, { pointerEvents: "box-none", style: {
77
77
  position: 'absolute',
78
- top: -extraRadiusForFocused,
79
- left: -extraRadiusForFocused,
78
+ top: -extraRadius,
79
+ left: -extraRadius,
80
80
  }, children: _jsx(PieChartMain, __assign({}, props, { data: [
81
81
  {
82
82
  value: props.data[selectedIndex].value,
@@ -95,5 +95,5 @@ export var PieChart = function (props) {
95
95
  peripheral: true,
96
96
  strokeWidth: 0,
97
97
  },
98
- ], radius: radius + extraRadiusForFocused, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadiusForFocused: extraRadiusForFocused })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth)] }));
98
+ ], radius: radius + extraRadius, initialAngle: startAngle, innerRadius: props.innerRadius || radius / 2.5, isBiggerPie: true, setSelectedIndex: setSelectedIndex, paddingHorizontal: paddingHorizontal, paddingVertical: paddingVertical, extraRadius: extraRadius })) })), renderInnerCircle(innerRadius - inwardExtraLengthForFocused, inwardExtraLengthForFocused ? 0 : innerCircleBorderWidth)] }));
99
99
  };
package/dist/PieChart/main.js CHANGED
@@ -1,31 +1,28 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import React from 'react';
3
3
  import { View } from 'react-native';
4
- import Svg, { Path, Circle, Text as SvgText, Defs, RadialGradient, Stop, G, } from 'react-native-svg';
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, extraRadiusForFocused = _a.extraRadiusForFocused;
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;
9
9
  return (_jsxs(View, { pointerEvents: "box-none", style: [
10
10
  {
11
11
  backgroundColor: backgroundColor,
12
12
  height: semiCircle
13
- ? (canvasHeight + paddingVertical) / 2 + extraRadiusForFocused
14
- : canvasHeight + paddingVertical + extraRadiusForFocused * 2,
15
- width: canvasWidth + paddingHorizontal + extraRadiusForFocused * 2,
13
+ ? (canvasHeight + paddingVertical) / 2 + extraRadius
14
+ : canvasHeight + paddingVertical + extraRadius * 2,
15
+ width: canvasWidth + paddingHorizontal + extraRadius * 2,
16
16
  overflow: 'hidden',
17
17
  },
18
18
  isThreeD && { transform: [{ rotateX: tiltAngle }] },
19
- ], children: [_jsxs(Svg, { pointerEvents: rnVersion >= 720000 ? 'box-none' : 'auto', viewBox: "".concat(strokeWidth / -2 + minShiftX - extraRadiusForFocused - paddingHorizontal / 2, " ").concat(strokeWidth / -2 +
20
- minShiftY -
21
- extraRadiusForFocused -
22
- paddingVertical / 2, " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
19
+ ], 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 +
23
20
  paddingHorizontal +
24
21
  horizAdjustment +
25
- (horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadiusForFocused + strokeWidth) * 2 +
22
+ (horizAdjustment ? strokeWidth : 0), " ").concat((radius + extraRadius + strokeWidth) * 2 +
26
23
  paddingVertical +
27
24
  vertAdjustment +
28
- (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadiusForFocused) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
25
+ (vertAdjustment ? strokeWidth : 0)), height: (radius + extraRadius) * 2 + strokeWidth + paddingVertical, width: (radius + extraRadius) * 2 + strokeWidth + paddingHorizontal, children: [_jsx(Defs, { children: data.map(function (item, index) {
29
26
  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 + ''));
30
27
  }) }), data.length === 1 ? (_jsx(_Fragment, { children: _jsx(Circle, { cx: cx, cy: cy, r: radius, fill: showGradient
31
28
  ? "url(#grad".concat(0, ")")
@@ -78,9 +75,9 @@ export var PieChartMain = function (props) {
78
75
  }
79
76
  }
80
77
  } }, index + 'a'));
81
- })), (showText || showInnerComponent) &&
78
+ })), (showText || showInnerComponent || showExternalLabels) &&
82
79
  data.map(function (item, index) {
83
- var _a, _b, _c, _d, _e, _f;
80
+ var _a, _b, _c, _d, _e, _f, _g;
84
81
  var localPieInnerComponent = (_a = item.pieInnerComponent) !== null && _a !== void 0 ? _a : props.pieInnerComponent;
85
82
  if (isBiggerPie && index)
86
83
  return null;
@@ -121,8 +118,9 @@ export var PieChartMain = function (props) {
121
118
  y = cy;
122
119
  }
123
120
  }
124
- return (_jsxs(React.Fragment, { children: [showTextBackground ? (_jsx(Circle, { cx: x + ((_c = (_b = item.shiftTextBackgroundX) !== null && _b !== void 0 ? _b : item.shiftTextX) !== null && _c !== void 0 ? _c : 0), cy: y +
125
- ((_e = (_d = item.shiftTextBackgroundY) !== null && _d !== void 0 ? _d : item.shiftTextY) !== null && _e !== void 0 ? _e : 0) -
121
+ var _h = getExternaLabelProperties(item, mx, my, cx, cy), 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, localExternalLabelComponent = _h.localExternalLabelComponent;
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: outY + 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) -
126
124
  (item.textSize || textSize) / 4, r: item.textBackgroundRadius ||
127
125
  props.textBackgroundRadius ||
128
126
  item.textSize ||
@@ -146,7 +144,7 @@ export var PieChartMain = function (props) {
146
144
  props.setSelectedIndex(index);
147
145
  }
148
146
  }
149
- } })) : null, _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 +
147
+ } })) : 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 +
150
148
  (item.shiftTextX || 0) -
151
149
  (item.textSize || textSize) / 1.8, y: y + (item.shiftTextY || 0), onPress: function () {
152
150
  item.onLabelPress
@@ -168,7 +166,7 @@ export var PieChartMain = function (props) {
168
166
  props.setSelectedIndex(index);
169
167
  }
170
168
  }
171
- }, children: item.text || (showValuesAsLabels ? item.value + '' : '') }), localPieInnerComponent ? (_jsx(G, { x: x, y: y, children: (_f = localPieInnerComponent === null || localPieInnerComponent === void 0 ? void 0 : localPieInnerComponent(item, index)) !== null && _f !== void 0 ? _f : null })) : null] }, index));
169
+ }, 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));
172
170
  })] }), isThreeD && shadow && !semiCircle ? (_jsx(View, { style: {
173
171
  width: radius * 2,
174
172
  height: radius * 2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.4.26",
3
+ "version": "1.4.28",
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"
28
+ "gifted-charts-core": "^0.1.29"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@babel/cli": "^7.24.8",