react-native-gifted-charts 1.4.74 → 1.4.75
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/BubbleChart/index.js +104 -26
- package/dist/index.d.ts +1 -1
- package/package.json +2 -2
|
@@ -26,7 +26,7 @@ var __read = (this && this.__read) || function (o, n) {
|
|
|
26
26
|
return ar;
|
|
27
27
|
};
|
|
28
28
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
29
|
-
import { BubbleDefaults, useBubbleChart, withinMinMaxRange, } from 'gifted-charts-core';
|
|
29
|
+
import { BubbleDefaults, defaultBubbleColors, useBubbleChart, withinMinMaxRange, } from 'gifted-charts-core';
|
|
30
30
|
import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
|
|
31
31
|
import { Fragment, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
|
|
32
32
|
import { Animated, Easing, I18nManager, Text, View, } from 'react-native';
|
|
@@ -40,10 +40,12 @@ export var BubbleChart = function (props) {
|
|
|
40
40
|
var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
41
41
|
var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
42
42
|
var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel;
|
|
43
|
-
var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), data = _e.data, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showBubbleOnFocus = _e.showBubbleOnFocus, showBubbleLabelOnFocus = _e.showBubbleLabelOnFocus, bubblesShape = _e.bubblesShape, bubblesWidth = _e.bubblesWidth, bubblesHeight = _e.bubblesHeight, bubblesColor = _e.bubblesColor, bubblesRadius = _e.bubblesRadius, labelFontSize = _e.labelFontSize, labelTextStyle = _e.labelTextStyle, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsBubbleLabels = _e.showValuesAsBubbleLabels, hideBubbles = _e.hideBubbles, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity, borderOpacity = _e.borderOpacity, xAxisLabelTexts = _e.xAxisLabelTexts, showRegressionLine = _e.showRegressionLine, regressionLineX1 = _e.regressionLineX1, regressionLineY1 = _e.regressionLineY1, regressionLineX2 = _e.regressionLineX2, regressionLineY2 = _e.regressionLineY2, regressionLineConfig = _e.regressionLineConfig, scatterChart = _e.scatterChart, maxRadius = _e.maxRadius, minRadius = _e.minRadius, extraWidthDueToBubble = _e.extraWidthDueToBubble, showGradient = _e.showGradient, centerColorForGradient = _e.centerColorForGradient;
|
|
43
|
+
var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), data = _e.data, barAndLineChartsWrapperProps = _e.barAndLineChartsWrapperProps, totalWidth = _e.totalWidth, animationDuration = _e.animationDuration, _f = _e.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _f === void 0 ? 0 : _f, getY = _e.getY, getX = _e.getX, maxValue = _e.maxValue, selectedIndex = _e.selectedIndex, setSelectedIndex = _e.setSelectedIndex, showTextOnFocus = _e.showTextOnFocus, focusEnabled = _e.focusEnabled, focusTogether = _e.focusTogether, selectedLineNumber = _e.selectedLineNumber, lastLineNumber = _e.lastLineNumber, initialSpacing = _e.initialSpacing, spacing = _e.spacing, containerHeight = _e.containerHeight, handleFocus = _e.handleFocus, handleUnFocus = _e.handleUnFocus, isAnimated = _e.isAnimated, showBubbleOnFocus = _e.showBubbleOnFocus, showBubbleLabelOnFocus = _e.showBubbleLabelOnFocus, bubblesShape = _e.bubblesShape, bubblesWidth = _e.bubblesWidth, bubblesHeight = _e.bubblesHeight, bubblesColor = _e.bubblesColor, bubblesRadius = _e.bubblesRadius, labelFontSize = _e.labelFontSize, labelMaxLength = _e.labelMaxLength, labelTextStyle = _e.labelTextStyle, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsBubbleLabels = _e.showValuesAsBubbleLabels, hideBubbles = _e.hideBubbles, xAxisLabelsVerticalShift = _e.xAxisLabelsVerticalShift, labelsExtraHeight = _e.labelsExtraHeight, xAxisThickness = _e.xAxisThickness, xAxisTextNumberOfLines = _e.xAxisTextNumberOfLines, rotateLabel = _e.rotateLabel, allowFontScaling = _e.allowFontScaling, borderColor = _e.borderColor, borderWidth = _e.borderWidth, opacity = _e.opacity, borderOpacity = _e.borderOpacity, xAxisLabelTexts = _e.xAxisLabelTexts, showRegressionLine = _e.showRegressionLine, regressionLineX1 = _e.regressionLineX1, regressionLineY1 = _e.regressionLineY1, regressionLineX2 = _e.regressionLineX2, regressionLineY2 = _e.regressionLineY2, regressionLineCoordinates = _e.regressionLineCoordinates, regressionLineConfig = _e.regressionLineConfig, regressionLineConfigs = _e.regressionLineConfigs, scatterChart = _e.scatterChart, maxRadius = _e.maxRadius, minRadius = _e.minRadius, extraWidthDueToBubble = _e.extraWidthDueToBubble, showGradient = _e.showGradient, centerColorForGradient = _e.centerColorForGradient;
|
|
44
44
|
var progress = useRef(new Animated.Value(0)).current;
|
|
45
45
|
var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
|
|
46
46
|
var AnimatedRegressionLineY = useRef(new Animated.Value(0)).current;
|
|
47
|
+
var animatedRegressionLineXValues = useMemo(function () { return regressionLineConfigs.map(function () { return new Animated.Value(0); }); }, [regressionLineConfigs.length]);
|
|
48
|
+
var animatedRegressionLineYValues = useMemo(function () { return regressionLineConfigs.map(function () { return new Animated.Value(0); }); }, [regressionLineConfigs.length]);
|
|
47
49
|
var scrollRef = (_b = props.scrollRef) !== null && _b !== void 0 ? _b : useRef(null);
|
|
48
50
|
var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
49
51
|
var appearingOpacity = opacityValue.interpolate({
|
|
@@ -93,8 +95,46 @@ export var BubbleChart = function (props) {
|
|
|
93
95
|
outputRange: [0, borderOpacity],
|
|
94
96
|
});
|
|
95
97
|
var drawRegressionLine = useCallback(function () {
|
|
96
|
-
|
|
98
|
+
var hasMultipleRegressionLines = regressionLineConfigs.length > 0;
|
|
99
|
+
if (hasMultipleRegressionLines) {
|
|
100
|
+
var animations_1 = [];
|
|
101
|
+
regressionLineConfigs.forEach(function (config, index) {
|
|
102
|
+
if (!config.isAnimated) {
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
var coordinates = regressionLineCoordinates[index];
|
|
106
|
+
if (!coordinates) {
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
var x1 = coordinates.regressionLineX1, x2 = coordinates.regressionLineX2, y1 = coordinates.regressionLineY1, y2 = coordinates.regressionLineY2;
|
|
110
|
+
var animatedX = animatedRegressionLineXValues[index];
|
|
111
|
+
var animatedY = animatedRegressionLineYValues[index];
|
|
112
|
+
if (!animatedX || !animatedY) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
animatedX.setValue(x1);
|
|
116
|
+
animatedY.setValue(y1);
|
|
117
|
+
animations_1.push(Animated.timing(animatedX, {
|
|
118
|
+
toValue: x2,
|
|
119
|
+
duration: config.animationDuration,
|
|
120
|
+
easing: Easing.linear,
|
|
121
|
+
useNativeDriver: false, // SVG props
|
|
122
|
+
}));
|
|
123
|
+
animations_1.push(Animated.timing(animatedY, {
|
|
124
|
+
toValue: y2,
|
|
125
|
+
duration: config.animationDuration,
|
|
126
|
+
easing: Easing.linear,
|
|
127
|
+
useNativeDriver: false, // SVG props
|
|
128
|
+
}));
|
|
129
|
+
});
|
|
130
|
+
if (animations_1.length) {
|
|
131
|
+
Animated.parallel(animations_1).start();
|
|
132
|
+
}
|
|
97
133
|
return;
|
|
134
|
+
}
|
|
135
|
+
if (!regressionLineConfig.isAnimated) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
98
138
|
AnimatedRegressionLineX.setValue(regressionLineX1);
|
|
99
139
|
AnimatedRegressionLineY.setValue(regressionLineY1);
|
|
100
140
|
Animated.parallel([
|
|
@@ -111,7 +151,17 @@ export var BubbleChart = function (props) {
|
|
|
111
151
|
useNativeDriver: false, // SVG props
|
|
112
152
|
}),
|
|
113
153
|
]).start();
|
|
114
|
-
}, [
|
|
154
|
+
}, [
|
|
155
|
+
regressionLineConfig,
|
|
156
|
+
regressionLineX1,
|
|
157
|
+
regressionLineX2,
|
|
158
|
+
regressionLineY1,
|
|
159
|
+
regressionLineY2,
|
|
160
|
+
regressionLineConfigs,
|
|
161
|
+
regressionLineCoordinates,
|
|
162
|
+
animatedRegressionLineXValues,
|
|
163
|
+
animatedRegressionLineYValues,
|
|
164
|
+
]);
|
|
115
165
|
var decreaseWidth = useCallback(function () {
|
|
116
166
|
widthValue.setValue(0);
|
|
117
167
|
Animated.timing(widthValue, {
|
|
@@ -179,10 +229,18 @@ export var BubbleChart = function (props) {
|
|
|
179
229
|
}, animationDuration + 20);
|
|
180
230
|
}
|
|
181
231
|
}
|
|
182
|
-
|
|
232
|
+
var hasAnimatedRegressionLine = regressionLineConfig.isAnimated ||
|
|
233
|
+
regressionLineConfigs.some(function (config) { return config.isAnimated; });
|
|
234
|
+
if (hasAnimatedRegressionLine) {
|
|
183
235
|
drawRegressionLine();
|
|
184
236
|
}
|
|
185
|
-
}, [
|
|
237
|
+
}, [
|
|
238
|
+
isAnimated,
|
|
239
|
+
bubblesShape,
|
|
240
|
+
regressionLineConfig.isAnimated,
|
|
241
|
+
regressionLineConfigs,
|
|
242
|
+
drawRegressionLine,
|
|
243
|
+
]);
|
|
186
244
|
var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
|
|
187
245
|
// const onStripPress = (item: any, index: number) => {
|
|
188
246
|
// if (props.focusedBubbleIndex === undefined || !props.onFocus) {
|
|
@@ -242,9 +300,8 @@ export var BubbleChart = function (props) {
|
|
|
242
300
|
var renderBubbles = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
|
|
243
301
|
var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
|
|
244
302
|
return dataForRender.map(function (item, index) {
|
|
245
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
246
|
-
if (index < startIndex || index > endIndex)
|
|
247
|
-
return null;
|
|
303
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
|
|
304
|
+
// if (index < startIndex || index > endIndex) return null;
|
|
248
305
|
if (item.hideBubble) {
|
|
249
306
|
return null;
|
|
250
307
|
}
|
|
@@ -289,7 +346,10 @@ export var BubbleChart = function (props) {
|
|
|
289
346
|
bubblesShape = item.bubbleShape || bubsShape;
|
|
290
347
|
bubblesWidth = item.bubbleWidth || bubsWidth;
|
|
291
348
|
bubblesHeight = item.bubbleHeight || bubsHeight;
|
|
292
|
-
dataPointsColor =
|
|
349
|
+
dataPointsColor =
|
|
350
|
+
item.bubbleColor ||
|
|
351
|
+
bubsColor ||
|
|
352
|
+
defaultBubbleColors[index % defaultBubbleColors.length];
|
|
293
353
|
bubblesRadius = withinMinMaxRange((_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius, maxRadius, minRadius);
|
|
294
354
|
if (showTextOnFocus) {
|
|
295
355
|
text = '';
|
|
@@ -311,27 +371,34 @@ export var BubbleChart = function (props) {
|
|
|
311
371
|
var formattedTextLabel = textLabel
|
|
312
372
|
? ((_e = formatBubbleLabel === null || formatBubbleLabel === void 0 ? void 0 : formatBubbleLabel(textLabel)) !== null && _e !== void 0 ? _e : textLabel)
|
|
313
373
|
: '';
|
|
374
|
+
if (formattedTextLabel.length > labelMaxLength) {
|
|
375
|
+
formattedTextLabel =
|
|
376
|
+
formattedTextLabel.slice(0, labelMaxLength - 3) + '...';
|
|
377
|
+
}
|
|
314
378
|
var textStyle = ((_g = (_f = item.labelTextStyle) !== null && _f !== void 0 ? _f : labelTextStyle) !== null && _g !== void 0 ? _g : {});
|
|
315
379
|
var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
|
|
316
380
|
var defaultFontSize = 14;
|
|
317
381
|
var fillColorForAnimatedGradientOnAndroid = isAnimationOver
|
|
318
382
|
? "url(#radial".concat(index, ")")
|
|
319
383
|
: dataPointsColor;
|
|
384
|
+
var localBorderColor = (_j = (_h = item.borderColor) !== null && _h !== void 0 ? _h : borderColor) !== null && _j !== void 0 ? _j : defaultBubbleColors[index % defaultBubbleColors.length];
|
|
320
385
|
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) {
|
|
321
386
|
var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
|
|
322
387
|
handleFocus(index);
|
|
323
|
-
}, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
|
|
388
|
+
}, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_k = item.indexUsedInDevForDataSet) !== null && _k !== void 0 ? _k : index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
|
|
324
389
|
position: 'absolute',
|
|
325
390
|
// height: svgHeight,
|
|
326
391
|
// width: totalWidth,
|
|
327
|
-
left: getX(
|
|
392
|
+
left: getX((_l = item.indexUsedInDevForDataSet) !== null && _l !== void 0 ? _l : index) -
|
|
393
|
+
bubblesWidth / 2,
|
|
328
394
|
top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
|
|
329
395
|
opacity: isAnimated ? appearingOpacity : 1,
|
|
330
|
-
}, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX(
|
|
396
|
+
}, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX((_m = item.indexUsedInDevForDataSet) !== null && _m !== void 0 ? _m : index) -
|
|
397
|
+
bubblesWidth / 2, y: getYOrSecondaryY(item.y) - bubblesHeight / 2, width: isAnimated ? growingWidth[index] : bubblesWidth, height: isAnimated ? growingHeight[index] : bubblesHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showBubbleOnFocus
|
|
331
398
|
? index === selectedIndex
|
|
332
399
|
? dataPointsColor
|
|
333
400
|
: 'none'
|
|
334
|
-
: dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke:
|
|
401
|
+
: dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke: localBorderColor, 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 ? appearingBorder : borderOpacity), onPress: function () {
|
|
335
402
|
item.onPress
|
|
336
403
|
? item.onPress(item, index)
|
|
337
404
|
: props.onPress
|
|
@@ -343,7 +410,7 @@ export var BubbleChart = function (props) {
|
|
|
343
410
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
344
411
|
handleUnFocus();
|
|
345
412
|
}
|
|
346
|
-
} })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((
|
|
413
|
+
} })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX((_r = item.indexUsedInDevForDataSet) !== null && _r !== void 0 ? _r : index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((_s = item.showGradient) !== null && _s !== void 0 ? _s : showGradient)
|
|
347
414
|
? isAndroid && isAnimated
|
|
348
415
|
? fillColorForAnimatedGradientOnAndroid
|
|
349
416
|
: "url(#radial".concat(index, ")")
|
|
@@ -353,7 +420,7 @@ export var BubbleChart = function (props) {
|
|
|
353
420
|
? opacity
|
|
354
421
|
: appearingDataPointsAndroid
|
|
355
422
|
: appearingDataPoints
|
|
356
|
-
: opacity, stroke:
|
|
423
|
+
: opacity, stroke: localBorderColor, strokeWidth: (_t = item.borderWidth) !== null && _t !== void 0 ? _t : borderWidth, strokeOpacity: (_v = (_u = item.borderOpacity) !== null && _u !== void 0 ? _u : props.borderOpacity) !== null && _v !== void 0 ? _v : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
|
|
357
424
|
item.onPress
|
|
358
425
|
? item.onPress(item, index)
|
|
359
426
|
: props.onPress
|
|
@@ -365,7 +432,7 @@ export var BubbleChart = function (props) {
|
|
|
365
432
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
366
433
|
handleUnFocus();
|
|
367
434
|
}
|
|
368
|
-
} })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
435
|
+
} })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_w = item.indexUsedInDevForDataSet) !== null && _w !== void 0 ? _w : index) -
|
|
369
436
|
labelWidth / 2 +
|
|
370
437
|
6 +
|
|
371
438
|
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
@@ -380,7 +447,7 @@ export var BubbleChart = function (props) {
|
|
|
380
447
|
position: 'absolute',
|
|
381
448
|
height: svgHeight,
|
|
382
449
|
width: labelWidth,
|
|
383
|
-
left: getX(index) -
|
|
450
|
+
left: getX((_x = item.indexUsedInDevForDataSet) !== null && _x !== void 0 ? _x : index) -
|
|
384
451
|
defaultFontSize / 2 +
|
|
385
452
|
(item.labelShiftX || props.labelShiftX || 0),
|
|
386
453
|
top: getYOrSecondaryY(item.y) -
|
|
@@ -393,19 +460,19 @@ export var BubbleChart = function (props) {
|
|
|
393
460
|
(focusTogether || key == selectedLineNumber)
|
|
394
461
|
? labelComponent(item, index) // not pushed in latest release
|
|
395
462
|
: null
|
|
396
|
-
: labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
397
|
-
|
|
463
|
+
: labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_y = item.indexUsedInDevForDataSet) !== null && _y !== void 0 ? _y : index) -
|
|
464
|
+
(formattedTextLabel.length * fontSize) / 4 +
|
|
398
465
|
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
399
466
|
Math.max(10, fontSize / 1.5) +
|
|
400
467
|
(item.labelShiftY || props.labelShiftY || 0) -
|
|
401
|
-
(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) -
|
|
402
|
-
|
|
468
|
+
(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((_z = item.indexUsedInDevForDataSet) !== null && _z !== void 0 ? _z : index) -
|
|
469
|
+
(formattedTextLabel.length * fontSize) / 4 +
|
|
403
470
|
(item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
|
|
404
471
|
fontSize / 1.5 +
|
|
405
472
|
(item.labelShiftY || props.labelShiftY || 0) -
|
|
406
473
|
(scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
|
|
407
474
|
? appearingDataPoints
|
|
408
|
-
: ((
|
|
475
|
+
: ((_0 = textStyle.opacity) !== null && _0 !== void 0 ? _0 : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
|
|
409
476
|
});
|
|
410
477
|
};
|
|
411
478
|
var svgWrapperViewStyle = {
|
|
@@ -425,12 +492,23 @@ export var BubbleChart = function (props) {
|
|
|
425
492
|
},
|
|
426
493
|
], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth + extraWidthDueToBubble, onPress: props.onBackgroundPress, children: [showGradient && (_jsx(Defs, { children: data === null || data === void 0 ? void 0 : data.map(function (item, index) {
|
|
427
494
|
var _a;
|
|
428
|
-
return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_a = item.centerColorForGradient) !== null && _a !== void 0 ? _a : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor ||
|
|
429
|
-
|
|
495
|
+
return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_a = item.centerColorForGradient) !== null && _a !== void 0 ? _a : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor ||
|
|
496
|
+
bubblesColor ||
|
|
497
|
+
defaultBubbleColors[index % defaultBubbleColors.length] })] }, index));
|
|
498
|
+
}) })), renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0), regressionLineConfigs.length ? (regressionLineConfigs.map(function (config, index) {
|
|
499
|
+
var _a = regressionLineCoordinates[index], regressionLineX1 = _a.regressionLineX1, regressionLineX2 = _a.regressionLineX2, regressionLineY1 = _a.regressionLineY1, regressionLineY2 = _a.regressionLineY2;
|
|
500
|
+
var animatedX = animatedRegressionLineXValues[index];
|
|
501
|
+
var animatedY = animatedRegressionLineYValues[index];
|
|
502
|
+
return (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: config.isAnimated
|
|
503
|
+
? (animatedX !== null && animatedX !== void 0 ? animatedX : regressionLineX2)
|
|
504
|
+
: regressionLineX2, y2: config.isAnimated
|
|
505
|
+
? (animatedY !== null && animatedY !== void 0 ? animatedY : regressionLineY2)
|
|
506
|
+
: regressionLineY2, stroke: config.color, strokeOpacity: config.opacity, strokeWidth: config.thickness, strokeDasharray: config.strokeDashArray }));
|
|
507
|
+
})) : showRegressionLine ? (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
|
|
430
508
|
? AnimatedRegressionLineX
|
|
431
509
|
: regressionLineX2, y2: regressionLineConfig.isAnimated
|
|
432
510
|
? AnimatedRegressionLineY
|
|
433
|
-
: regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray }))] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
|
|
511
|
+
: regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray })) : null] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
|
|
434
512
|
return (_jsx(View, { children: isAnimated
|
|
435
513
|
? renderAnimatedLabel(false, index, label)
|
|
436
514
|
: renderLabel(false, index, label) }, index));
|
package/dist/index.d.ts
CHANGED
|
@@ -6,4 +6,4 @@ export { LineChartBicolor } from './LineChart/LineChartBicolor';
|
|
|
6
6
|
export { PopulationPyramid } from './PopulationPyramid';
|
|
7
7
|
export { RadarChart } from './RadarChart';
|
|
8
8
|
export { BubbleChart } from './BubbleChart';
|
|
9
|
-
export { type barDataItem, type barDataItemNullSafe, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type lineDataItemNullSafe, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, CurveType, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type Linecap, type RulesConfig, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type Pointer, type HighlightedRange, type LineSegment, type LineProperties, Framework, type XAxisConfig, type DataPointProps, type IntersectionAreaConfig, type LabelLineConfig, type TooltipProps, type RadarChartProps, type BubbleChartPropsType, type PolygonConfig, type GridConfig, type GridSectionConfig, type AsterLinesConfig, } from 'gifted-charts-core';
|
|
9
|
+
export { type barDataItem, type barDataItemNullSafe, type stackDataItem, type BarChartPropsType, type StackedBarChartPropsType, type pieDataItem, type PieChartPropsType, type lineDataItem, type lineDataItemNullSafe, type bicolorLineDataItem, type LineChartPropsType, type LineChartBicolorPropsType, type popnPyramidDataItem, type PopulationPyramidPropsType, chartTypes, ruleTypes, CurveType, yAxisSides, EdgePosition, type DataSet, type DataSetNullSafe, type DataSetForBubbleChart, type Linecap, type RulesConfig, type LabelsPosition, type PointerEvents, type secondaryYAxisType, type secondaryLineConfigType, type referenceConfigType, type arrowConfigType, type Pointer, type HighlightedRange, type LineSegment, type LineProperties, Framework, type XAxisConfig, type DataPointProps, type IntersectionAreaConfig, type LabelLineConfig, type TooltipProps, type RadarChartProps, type BubbleChartPropsType, type PolygonConfig, type GridConfig, type GridSectionConfig, type AsterLinesConfig, } from 'gifted-charts-core';
|
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.75",
|
|
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.79"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@babel/cli": "^7.24.8",
|