react-native-gifted-charts 1.4.74 → 1.4.76
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/README.md +21 -11
- package/dist/BubbleChart/index.js +117 -32
- package/dist/index.d.ts +1 -1
- package/package.json +4 -3
package/README.md
CHANGED
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
<img src="/demos/redditLogo.png" height="auto" width="32" height="32" />
|
|
21
21
|
</a>
|
|
22
22
|
</p>
|
|
23
|
-
The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and
|
|
23
|
+
The most loved library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar, Bubble and Scatter charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.
|
|
24
24
|
|
|
25
25
|
### Yet another chart library? Why?
|
|
26
26
|
|
|
@@ -44,24 +44,24 @@ The exact same piece of code that you write to render charts in react-native, ca
|
|
|
44
44
|
|
|
45
45
|
See the **[release changes by version here.](release-notes/release-notes.md)**
|
|
46
46
|
|
|
47
|
-
<img src='/demos/bars.png' alt=''/>
|
|
48
|
-
<img src='/demos/lineArea.png' alt=''/>
|
|
49
|
-
<img src='/demos/blues.png' alt=''/>
|
|
47
|
+
<img src='/demos/bars.png' alt='Bar Chart'/>
|
|
48
|
+
<img src='/demos/lineArea.png' alt='Line and Area Chart'/>
|
|
49
|
+
<img src='/demos/blues.png' alt='Bar and Pie Chart'/>
|
|
50
50
|
<table>
|
|
51
51
|
<tr>
|
|
52
|
-
<td><img src='/demos/scrollLine.gif' alt='' width=320 height=280/></td>
|
|
53
|
-
<td><img src='/demos/animatedDataLine.gif' alt='' width=320 height=260/></td>
|
|
52
|
+
<td><img src='/demos/scrollLine.gif' alt='Area Chart with Pointer' width=320 height=280/></td>
|
|
53
|
+
<td><img src='/demos/animatedDataLine.gif' alt='Area Chart with Changing Data' width=320 height=260/></td>
|
|
54
54
|
</tr>
|
|
55
55
|
|
|
56
56
|
<tr>
|
|
57
|
-
<td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
|
|
58
|
-
<td><img src='/demos/
|
|
57
|
+
<td><img src='/demos/crossHair.gif' alt='Area Chart with Crosshair' height=280 /></td>
|
|
58
|
+
<td><img src='/demos/bubble.png' alt='Bubble Chart' height=280/></td>
|
|
59
59
|
<tr>
|
|
60
|
-
<td><img src='/demos/radar.png' alt='' height=280 width=320/></td>
|
|
61
|
-
<td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
|
|
60
|
+
<td><img src='/demos/radar.png' alt='Radar Chart' height=280 width=320/></td>
|
|
61
|
+
<td><img src='/demos/ppnLabelled.png' alt='Population Pyramid Chart' height=280 width=300/></td>
|
|
62
62
|
</tr>
|
|
63
63
|
</table>
|
|
64
|
-
<img src='/demos/pieExt.png' alt='' height=280 />
|
|
64
|
+
<img src='/demos/pieExt.png' alt='Donut Chart with External Labels' height=280 />
|
|
65
65
|
|
|
66
66
|
---
|
|
67
67
|
|
|
@@ -120,6 +120,16 @@ const data=[ {value:50}, {value:80}, {value:90}, {value:70} ]
|
|
|
120
120
|
// For Donut chart, just add the prop donut to the <PieChart/> component
|
|
121
121
|
|
|
122
122
|
<PieChart data = {data} donut />
|
|
123
|
+
|
|
124
|
+
// For Scatter chart, just add the prop scatterChart to the <BubbleChart/> component
|
|
125
|
+
|
|
126
|
+
<BubbleChart
|
|
127
|
+
data = {[
|
|
128
|
+
{x: 20, y: 4, r: 10},
|
|
129
|
+
{x: 40, y: 6, r: 20},
|
|
130
|
+
]}
|
|
131
|
+
scatterChart
|
|
132
|
+
/>
|
|
123
133
|
```
|
|
124
134
|
|
|
125
135
|
## Props tables
|
|
@@ -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';
|
|
@@ -39,11 +39,13 @@ export var BubbleChart = function (props) {
|
|
|
39
39
|
var _a, _b, _c, _d;
|
|
40
40
|
var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
41
41
|
var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
|
|
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;
|
|
42
|
+
var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel, regressionLinesBehindBubbles = props.regressionLinesBehindBubbles;
|
|
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) {
|
|
@@ -204,7 +262,7 @@ export var BubbleChart = function (props) {
|
|
|
204
262
|
? containerHeight +
|
|
205
263
|
60 +
|
|
206
264
|
((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
|
|
207
|
-
: -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20,
|
|
265
|
+
: -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20 - 4,
|
|
208
266
|
zIndex: 10,
|
|
209
267
|
width: spacing + labelsExtraHeight,
|
|
210
268
|
left: left,
|
|
@@ -230,7 +288,7 @@ export var BubbleChart = function (props) {
|
|
|
230
288
|
((_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _b !== void 0 ? _b : 15)
|
|
231
289
|
: rotateLabel
|
|
232
290
|
? 10
|
|
233
|
-
: -xAxisTextNumberOfLines * 18,
|
|
291
|
+
: -xAxisTextNumberOfLines * 18 - 4,
|
|
234
292
|
zIndex: 10,
|
|
235
293
|
width: spacing + labelsExtraHeight,
|
|
236
294
|
left: left,
|
|
@@ -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, _1, _2;
|
|
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,35 @@ 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];
|
|
385
|
+
var bubbleKey = "".concat(key, "-").concat((_k = item.indexUsedInDevForDataSet) !== null && _k !== void 0 ? _k : '', "-").concat((_l = item.label) !== null && _l !== void 0 ? _l : '', "-").concat(index);
|
|
320
386
|
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
387
|
var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
|
|
322
388
|
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: {
|
|
389
|
+
}, onPressOut: handleUnFocus })) : null })) : null, hideBubbles ? null : (_jsxs(_Fragment, { children: [customBubble ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_m = item.indexUsedInDevForDataSet) !== null && _m !== void 0 ? _m : index, index), y: getYOrSecondaryY(item.y) - bubblesHeight / 2, children: customBubble(item, index) })) : (_jsx(Animated.View, { style: {
|
|
324
390
|
position: 'absolute',
|
|
325
391
|
// height: svgHeight,
|
|
326
392
|
// width: totalWidth,
|
|
327
|
-
left: getX(
|
|
393
|
+
left: getX((_o = item.indexUsedInDevForDataSet) !== null && _o !== void 0 ? _o : index, index) -
|
|
394
|
+
bubblesWidth / 2,
|
|
328
395
|
top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
|
|
329
396
|
opacity: isAnimated ? appearingOpacity : 1,
|
|
330
|
-
}, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX(
|
|
397
|
+
}, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX((_p = item.indexUsedInDevForDataSet) !== null && _p !== void 0 ? _p : index, index) -
|
|
398
|
+
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
399
|
? index === selectedIndex
|
|
332
400
|
? dataPointsColor
|
|
333
401
|
: 'none'
|
|
334
|
-
: dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke:
|
|
402
|
+
: dataPointsColor, fillOpacity: isAnimated ? appearingDataPoints : opacity, stroke: localBorderColor, strokeWidth: (_q = item.borderWidth) !== null && _q !== void 0 ? _q : borderWidth, strokeOpacity: (_s = (_r = item.borderOpacity) !== null && _r !== void 0 ? _r : props.borderOpacity) !== null && _s !== void 0 ? _s : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
|
|
335
403
|
item.onPress
|
|
336
404
|
? item.onPress(item, index)
|
|
337
405
|
: props.onPress
|
|
@@ -343,7 +411,7 @@ export var BubbleChart = function (props) {
|
|
|
343
411
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
344
412
|
handleUnFocus();
|
|
345
413
|
}
|
|
346
|
-
} })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((
|
|
414
|
+
} })) }, "rectBub-".concat(index))) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX((_t = item.indexUsedInDevForDataSet) !== null && _t !== void 0 ? _t : index, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: ((_u = item.showGradient) !== null && _u !== void 0 ? _u : showGradient)
|
|
347
415
|
? isAndroid && isAnimated
|
|
348
416
|
? fillColorForAnimatedGradientOnAndroid
|
|
349
417
|
: "url(#radial".concat(index, ")")
|
|
@@ -353,7 +421,7 @@ export var BubbleChart = function (props) {
|
|
|
353
421
|
? opacity
|
|
354
422
|
: appearingDataPointsAndroid
|
|
355
423
|
: appearingDataPoints
|
|
356
|
-
: opacity, stroke:
|
|
424
|
+
: opacity, stroke: localBorderColor, strokeWidth: (_v = item.borderWidth) !== null && _v !== void 0 ? _v : borderWidth, strokeOpacity: (_x = (_w = item.borderOpacity) !== null && _w !== void 0 ? _w : props.borderOpacity) !== null && _x !== void 0 ? _x : (isAnimated ? appearingBorder : borderOpacity), onPress: function () {
|
|
357
425
|
item.onPress
|
|
358
426
|
? item.onPress(item, index)
|
|
359
427
|
: props.onPress
|
|
@@ -365,7 +433,7 @@ export var BubbleChart = function (props) {
|
|
|
365
433
|
if (!item.onPress && !props.onPress && focusEnabled) {
|
|
366
434
|
handleUnFocus();
|
|
367
435
|
}
|
|
368
|
-
} })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
436
|
+
} })) }, "bubble-".concat(index))), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_y = item.indexUsedInDevForDataSet) !== null && _y !== void 0 ? _y : index, index) -
|
|
369
437
|
labelWidth / 2 +
|
|
370
438
|
6 +
|
|
371
439
|
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
@@ -380,7 +448,7 @@ export var BubbleChart = function (props) {
|
|
|
380
448
|
position: 'absolute',
|
|
381
449
|
height: svgHeight,
|
|
382
450
|
width: labelWidth,
|
|
383
|
-
left: getX(index) -
|
|
451
|
+
left: getX((_z = item.indexUsedInDevForDataSet) !== null && _z !== void 0 ? _z : index, index) -
|
|
384
452
|
defaultFontSize / 2 +
|
|
385
453
|
(item.labelShiftX || props.labelShiftX || 0),
|
|
386
454
|
top: getYOrSecondaryY(item.y) -
|
|
@@ -393,24 +461,24 @@ export var BubbleChart = function (props) {
|
|
|
393
461
|
(focusTogether || key == selectedLineNumber)
|
|
394
462
|
? labelComponent(item, index) // not pushed in latest release
|
|
395
463
|
: null
|
|
396
|
-
: labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
|
|
397
|
-
|
|
464
|
+
: labelComponent(item, index) }))) : null) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX((_0 = item.indexUsedInDevForDataSet) !== null && _0 !== void 0 ? _0 : index, index) -
|
|
465
|
+
(formattedTextLabel.length * fontSize) / 4 +
|
|
398
466
|
(item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
|
|
399
467
|
Math.max(10, fontSize / 1.5) +
|
|
400
468
|
(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
|
-
|
|
469
|
+
(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((_1 = item.indexUsedInDevForDataSet) !== null && _1 !== void 0 ? _1 : index, index) -
|
|
470
|
+
(formattedTextLabel.length * fontSize) / 4 +
|
|
403
471
|
(item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
|
|
404
472
|
fontSize / 1.5 +
|
|
405
473
|
(item.labelShiftY || props.labelShiftY || 0) -
|
|
406
474
|
(scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
|
|
407
475
|
? appearingDataPoints
|
|
408
|
-
: ((
|
|
476
|
+
: ((_2 = textStyle.opacity) !== null && _2 !== void 0 ? _2 : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, bubbleKey));
|
|
409
477
|
});
|
|
410
478
|
};
|
|
411
479
|
var svgWrapperViewStyle = {
|
|
412
480
|
position: 'absolute',
|
|
413
|
-
top:
|
|
481
|
+
top: xAxisLabelsVerticalShift, // 281 + xAxisLabelsVerticalShift + labelsExtraHeight - xAxisThickness,
|
|
414
482
|
left: 0,
|
|
415
483
|
zIndex: 1,
|
|
416
484
|
transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
|
|
@@ -424,16 +492,33 @@ export var BubbleChart = function (props) {
|
|
|
424
492
|
// zIndex,
|
|
425
493
|
},
|
|
426
494
|
], 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
|
-
var _a;
|
|
428
|
-
|
|
429
|
-
|
|
495
|
+
var _a, _b, _c;
|
|
496
|
+
var gradientKey = "radial-gradient-".concat((_a = item.indexUsedInDevForDataSet) !== null && _a !== void 0 ? _a : '', "-").concat((_b = item.label) !== null && _b !== void 0 ? _b : '', "-").concat(index);
|
|
497
|
+
return (_jsxs(RadialGradient, { id: "radial".concat(index), cx: "50%", cy: "50%", r: "50%", children: [_jsx(Stop, { offset: "0%", stopColor: (_c = item.centerColorForGradient) !== null && _c !== void 0 ? _c : centerColorForGradient }), _jsx(Stop, { offset: "100%", stopColor: item.bubbleColor ||
|
|
498
|
+
bubblesColor ||
|
|
499
|
+
defaultBubbleColors[index % defaultBubbleColors.length] })] }, gradientKey));
|
|
500
|
+
}) })), !regressionLinesBehindBubbles
|
|
501
|
+
? renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0)
|
|
502
|
+
: null, regressionLineConfigs.length ? (regressionLineConfigs.map(function (config, index) {
|
|
503
|
+
var _a = regressionLineCoordinates[index], regressionLineX1 = _a.regressionLineX1, regressionLineX2 = _a.regressionLineX2, regressionLineY1 = _a.regressionLineY1, regressionLineY2 = _a.regressionLineY2;
|
|
504
|
+
var animatedX = animatedRegressionLineXValues[index];
|
|
505
|
+
var animatedY = animatedRegressionLineYValues[index];
|
|
506
|
+
return (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: config.isAnimated
|
|
507
|
+
? (animatedX !== null && animatedX !== void 0 ? animatedX : regressionLineX2)
|
|
508
|
+
: regressionLineX2, y2: config.isAnimated
|
|
509
|
+
? (animatedY !== null && animatedY !== void 0 ? animatedY : regressionLineY2)
|
|
510
|
+
: regressionLineY2, stroke: config.color, strokeOpacity: config.opacity, strokeWidth: config.thickness, strokeDasharray: config.strokeDashArray }));
|
|
511
|
+
})) : showRegressionLine ? (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
|
|
430
512
|
? AnimatedRegressionLineX
|
|
431
513
|
: regressionLineX2, y2: regressionLineConfig.isAnimated
|
|
432
514
|
? AnimatedRegressionLineY
|
|
433
|
-
: regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray }))
|
|
515
|
+
: regressionLineY2, stroke: regressionLineConfig.color, strokeOpacity: regressionLineConfig.opacity, strokeWidth: regressionLineConfig.thickness, strokeDasharray: regressionLineConfig.strokeDashArray })) : null, regressionLinesBehindBubbles
|
|
516
|
+
? renderBubbles(hideBubbles, data, data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0)
|
|
517
|
+
: null] }), xAxisLabelTexts === null || xAxisLabelTexts === void 0 ? void 0 : xAxisLabelTexts.map(function (label, index) {
|
|
518
|
+
var labelKey = "".concat(label, "-").concat(index);
|
|
434
519
|
return (_jsx(View, { children: isAnimated
|
|
435
520
|
? renderAnimatedLabel(false, index, label)
|
|
436
|
-
: renderLabel(false, index, label) },
|
|
521
|
+
: renderLabel(false, index, label) }, labelKey));
|
|
437
522
|
})] }));
|
|
438
523
|
};
|
|
439
524
|
var remainingScrollViewProps = {
|
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,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-gifted-charts",
|
|
3
|
-
"version": "1.4.
|
|
4
|
-
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and
|
|
3
|
+
"version": "1.4.76",
|
|
4
|
+
"description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar, Bubble and SCatter charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist"
|
|
@@ -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.80"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
32
|
"@babel/cli": "^7.24.8",
|
|
@@ -80,6 +80,7 @@
|
|
|
80
80
|
"population",
|
|
81
81
|
"pyramid",
|
|
82
82
|
"bubble",
|
|
83
|
+
"scatter",
|
|
83
84
|
"react",
|
|
84
85
|
"react native",
|
|
85
86
|
"react-native"
|