react-native-gifted-charts 1.4.72 → 1.4.73
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.
|
@@ -23,8 +23,8 @@ export var BubbleChart = function (props) {
|
|
|
23
23
|
var _a, _b, _c, _d, _e, _f;
|
|
24
24
|
var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
25
25
|
var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
26
|
-
var secondaryXAxis = props.secondaryXAxis;
|
|
27
|
-
var _g = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps, totalWidth = _g.totalWidth, animationDuration = _g.animationDuration, _h = _g.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _h === void 0 ? 0 : _h, getY = _g.getY, getX = _g.getX, maxValue = _g.maxValue, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, showTextOnFocus = _g.showTextOnFocus, focusEnabled = _g.focusEnabled, focusTogether = _g.focusTogether, selectedLineNumber = _g.selectedLineNumber, lastLineNumber = _g.lastLineNumber, initialSpacing = _g.initialSpacing, spacing = _g.spacing, containerHeight = _g.containerHeight, handleFocus = _g.handleFocus, handleUnFocus = _g.handleUnFocus, isAnimated = _g.isAnimated, showBubbleOnFocus = _g.showBubbleOnFocus, showBubbleLabelOnFocus = _g.showBubbleLabelOnFocus, bubblesShape = _g.bubblesShape, bubblesWidth = _g.bubblesWidth, bubblesHeight = _g.bubblesHeight, bubblesColor = _g.bubblesColor, bubblesRadius = _g.bubblesRadius, labelFontSize = _g.labelFontSize, labelTextStyle = _g.labelTextStyle, startIndex = _g.startIndex, endIndex = _g.endIndex, showValuesAsBubbleLabels = _g.showValuesAsBubbleLabels, hideBubbles = _g.hideBubbles, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, labelsExtraHeight = _g.labelsExtraHeight, xAxisThickness = _g.xAxisThickness, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, rotateLabel = _g.rotateLabel, allowFontScaling = _g.allowFontScaling, borderColor = _g.borderColor, borderWidth = _g.borderWidth, opacity = _g.opacity, xAxisLabelTexts = _g.xAxisLabelTexts, showRegressionLine = _g.showRegressionLine, regressionLineX1 = _g.regressionLineX1, regressionLineY1 = _g.regressionLineY1, regressionLineX2 = _g.regressionLineX2, regressionLineY2 = _g.regressionLineY2, regressionLineConfig = _g.regressionLineConfig;
|
|
26
|
+
var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel;
|
|
27
|
+
var _g = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps, totalWidth = _g.totalWidth, animationDuration = _g.animationDuration, _h = _g.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _h === void 0 ? 0 : _h, getY = _g.getY, getX = _g.getX, maxValue = _g.maxValue, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, showTextOnFocus = _g.showTextOnFocus, focusEnabled = _g.focusEnabled, focusTogether = _g.focusTogether, selectedLineNumber = _g.selectedLineNumber, lastLineNumber = _g.lastLineNumber, initialSpacing = _g.initialSpacing, spacing = _g.spacing, containerHeight = _g.containerHeight, handleFocus = _g.handleFocus, handleUnFocus = _g.handleUnFocus, isAnimated = _g.isAnimated, showBubbleOnFocus = _g.showBubbleOnFocus, showBubbleLabelOnFocus = _g.showBubbleLabelOnFocus, bubblesShape = _g.bubblesShape, bubblesWidth = _g.bubblesWidth, bubblesHeight = _g.bubblesHeight, bubblesColor = _g.bubblesColor, bubblesRadius = _g.bubblesRadius, labelFontSize = _g.labelFontSize, labelTextStyle = _g.labelTextStyle, startIndex = _g.startIndex, endIndex = _g.endIndex, showValuesAsBubbleLabels = _g.showValuesAsBubbleLabels, hideBubbles = _g.hideBubbles, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, labelsExtraHeight = _g.labelsExtraHeight, xAxisThickness = _g.xAxisThickness, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, rotateLabel = _g.rotateLabel, allowFontScaling = _g.allowFontScaling, borderColor = _g.borderColor, borderWidth = _g.borderWidth, opacity = _g.opacity, xAxisLabelTexts = _g.xAxisLabelTexts, showRegressionLine = _g.showRegressionLine, regressionLineX1 = _g.regressionLineX1, regressionLineY1 = _g.regressionLineY1, regressionLineX2 = _g.regressionLineX2, regressionLineY2 = _g.regressionLineY2, regressionLineConfig = _g.regressionLineConfig, scatterChart = _g.scatterChart;
|
|
28
28
|
var progress = useRef(new Animated.Value(0)).current;
|
|
29
29
|
var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
|
|
30
30
|
var AnimatedRegressionLineY = useRef(new Animated.Value(0)).current;
|
|
@@ -176,7 +176,7 @@ export var BubbleChart = function (props) {
|
|
|
176
176
|
height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
|
|
177
177
|
},
|
|
178
178
|
rotateLabel && { transform: [{ rotate: '60deg' }] },
|
|
179
|
-
], children: _jsx(Text, { style: { textAlign: 'center' }, allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
|
|
179
|
+
], children: _jsx(Text, { style: [{ textAlign: 'center' }, xAxisLabelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
|
|
180
180
|
};
|
|
181
181
|
var renderAnimatedLabel = function (top, index, label) {
|
|
182
182
|
var _a, _b;
|
|
@@ -199,17 +199,12 @@ export var BubbleChart = function (props) {
|
|
|
199
199
|
opacity: appearingOpacity,
|
|
200
200
|
},
|
|
201
201
|
rotateLabel && { transform: [{ rotate: '60deg' }] },
|
|
202
|
-
], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
|
|
202
|
+
], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, xAxisLabelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label }) }));
|
|
203
203
|
};
|
|
204
|
-
var
|
|
205
|
-
// textColor: any,
|
|
206
|
-
// textFontSize: any,
|
|
207
|
-
// textFontFamily: any,
|
|
208
|
-
// textFontWeight: any,
|
|
209
|
-
startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
|
|
204
|
+
var renderBubbles = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
|
|
210
205
|
var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
|
|
211
206
|
return dataForRender.map(function (item, index) {
|
|
212
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
207
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
213
208
|
if (index < startIndex || index > endIndex)
|
|
214
209
|
return null;
|
|
215
210
|
if (item.hideBubble) {
|
|
@@ -276,7 +271,10 @@ export var BubbleChart = function (props) {
|
|
|
276
271
|
var textLabel = !showTextOnFocus && !showValuesAsDataPointsText
|
|
277
272
|
? item.label
|
|
278
273
|
: text.toString();
|
|
279
|
-
var
|
|
274
|
+
var formattedTextLabel = textLabel
|
|
275
|
+
? ((_e = formatBubbleLabel === null || formatBubbleLabel === void 0 ? void 0 : formatBubbleLabel(textLabel)) !== null && _e !== void 0 ? _e : textLabel)
|
|
276
|
+
: '';
|
|
277
|
+
var textStyle = ((_g = (_f = item.labelTextStyle) !== null && _f !== void 0 ? _f : labelTextStyle) !== null && _g !== void 0 ? _g : {});
|
|
280
278
|
var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
|
|
281
279
|
var defaultFontSize = 14;
|
|
282
280
|
return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
|
|
@@ -293,7 +291,7 @@ export var BubbleChart = function (props) {
|
|
|
293
291
|
? index === selectedIndex
|
|
294
292
|
? dataPointsColor
|
|
295
293
|
: 'none'
|
|
296
|
-
: dataPointsColor, stroke: (
|
|
294
|
+
: dataPointsColor, stroke: (_h = item.borderColor) !== null && _h !== void 0 ? _h : borderColor, strokeWidth: (_j = item.borderWidth) !== null && _j !== void 0 ? _j : borderWidth, strokeOpacity: (_l = (_k = item.borderOpacity) !== null && _k !== void 0 ? _k : props.borderOpacity) !== null && _l !== void 0 ? _l : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
|
|
297
295
|
item.onPress
|
|
298
296
|
? item.onPress(item, index)
|
|
299
297
|
: props.onPress
|
|
@@ -309,7 +307,7 @@ export var BubbleChart = function (props) {
|
|
|
309
307
|
? index === selectedIndex
|
|
310
308
|
? dataPointsColor
|
|
311
309
|
: 'none'
|
|
312
|
-
: dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (
|
|
310
|
+
: dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_m = item.borderColor) !== null && _m !== void 0 ? _m : borderColor, strokeWidth: (_o = item.borderWidth) !== null && _o !== void 0 ? _o : borderWidth, strokeOpacity: (_q = (_p = item.borderOpacity) !== null && _p !== void 0 ? _p : props.borderOpacity) !== null && _q !== void 0 ? _q : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
|
|
313
311
|
item.onPress
|
|
314
312
|
? item.onPress(item, index)
|
|
315
313
|
: props.onPress
|
|
@@ -321,12 +319,13 @@ export var BubbleChart = function (props) {
|
|
|
321
319
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
322
320
|
handleUnFocus();
|
|
323
321
|
}
|
|
324
|
-
} })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width:
|
|
325
|
-
(item.labelShiftX || props.labelShiftX || 0) -
|
|
322
|
+
} })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
326
323
|
labelWidth / 2 +
|
|
327
|
-
|
|
324
|
+
6 +
|
|
325
|
+
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
326
|
+
10 +
|
|
328
327
|
(item.labelShiftY || props.labelShiftY || 0) -
|
|
329
|
-
(
|
|
328
|
+
(scatterChart ? bubblesRadius + 10 : 0), children: showBubbleLabelOnFocus
|
|
330
329
|
? index === selectedIndex &&
|
|
331
330
|
(focusTogether || key == selectedLineNumber)
|
|
332
331
|
? labelComponent(item, index) // not pushed in latest release
|
|
@@ -340,20 +339,27 @@ export var BubbleChart = function (props) {
|
|
|
340
339
|
(item.labelShiftX || props.labelShiftX || 0),
|
|
341
340
|
top: getYOrSecondaryY(item.y) -
|
|
342
341
|
defaultFontSize / 1.5 +
|
|
343
|
-
(item.labelShiftY || props.labelShiftY || 0)
|
|
342
|
+
(item.labelShiftY || props.labelShiftY || 0) -
|
|
343
|
+
(scatterChart ? bubblesRadius + 10 : 0),
|
|
344
344
|
opacity: isAnimated ? appearingDataPoints : 1,
|
|
345
345
|
}, children: showBubbleLabelOnFocus
|
|
346
346
|
? index === selectedIndex &&
|
|
347
347
|
(focusTogether || key == selectedLineNumber)
|
|
348
348
|
? labelComponent(item, index) // not pushed in latest release
|
|
349
349
|
: null
|
|
350
|
-
: labelComponent(item, index) }))) : null) :
|
|
351
|
-
|
|
350
|
+
: labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
351
|
+
Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
|
|
352
|
+
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
353
|
+
Math.max(10, fontSize / 1.5) +
|
|
354
|
+
(item.labelShiftY || props.labelShiftY || 0) -
|
|
355
|
+
(scatterChart ? bubblesRadius + 10 : 0), children: _jsx(Text, { style: __assign(__assign({}, textStyle), { fontSize: fontSize }), children: formattedTextLabel }) })) : (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
|
|
356
|
+
Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
|
|
352
357
|
(item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
|
|
353
358
|
fontSize / 1.5 +
|
|
354
|
-
(item.labelShiftY || props.labelShiftY || 0)
|
|
359
|
+
(item.labelShiftY || props.labelShiftY || 0) -
|
|
360
|
+
(scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
|
|
355
361
|
? appearingDataPoints
|
|
356
|
-
: ((
|
|
362
|
+
: ((_r = textStyle.opacity) !== null && _r !== void 0 ? _r : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
|
|
357
363
|
});
|
|
358
364
|
};
|
|
359
365
|
var svgWrapperViewStyle = {
|
|
@@ -371,12 +377,7 @@ export var BubbleChart = function (props) {
|
|
|
371
377
|
height: containerHeightIncludingBelowXAxis,
|
|
372
378
|
// zIndex,
|
|
373
379
|
},
|
|
374
|
-
], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [
|
|
375
|
-
// textColor,
|
|
376
|
-
// textFontSize,
|
|
377
|
-
// textFontFamily,
|
|
378
|
-
// textFontWeight,
|
|
379
|
-
startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
|
|
380
|
+
], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [renderBubbles(hideBubbles, props.data, props.data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
|
|
380
381
|
? AnimatedRegressionLineX
|
|
381
382
|
: regressionLineX2, y2: regressionLineConfig.isAnimated
|
|
382
383
|
? AnimatedRegressionLineY
|
|
@@ -47,7 +47,7 @@ var RenderVerticalLines = function (props) {
|
|
|
47
47
|
zIndex: verticalLinesZIndex || -1,
|
|
48
48
|
}, children: _jsx(Svg, { height: containerHeightIncludingBelowXAxis, width: totalWidth, children: verticalLinesAr.map(function (item, index) {
|
|
49
49
|
var _a, _b, _c, _d, _e, _f;
|
|
50
|
-
if (!index && chartType === chartTypes.BUBBLE)
|
|
50
|
+
if (!index && chartType === chartTypes.BUBBLE && initialSpacing === 0)
|
|
51
51
|
return null;
|
|
52
52
|
var totalSpacing = initialSpacing;
|
|
53
53
|
if (verticalLinesSpacing) {
|
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.73",
|
|
4
4
|
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"registry": "https://registry.npmjs.org/"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"gifted-charts-core": "0.1.
|
|
29
|
+
"gifted-charts-core": "0.1.76"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@babel/cli": "^7.24.8",
|