react-native-gifted-charts 1.4.71 → 1.4.72

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 (4) hide show
  1. package/dist/BubbleChart/index.js +192 -179
  2. package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js +6 -5
  3. package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js +2 -0
  4. package/package.json +2 -2
package/dist/BubbleChart/index.js CHANGED
@@ -10,54 +10,82 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { LineDefaults, useBubbleChart, } from 'gifted-charts-core';
13
+ import { BubbleDefaults, useBubbleChart, } from 'gifted-charts-core';
14
14
  import BarAndLineChartsWrapper from '../Components/BarAndLineChartsWrapper';
15
15
  import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react';
16
16
  import { Animated, Easing, I18nManager, Text, View, } from 'react-native';
17
- import { Circle, ForeignObject, Rect, Svg, Text as CanvasText, } from 'react-native-svg';
17
+ import { Circle, ForeignObject, Rect, Svg, Line } from 'react-native-svg';
18
18
  import { isWebApp, screenWidth } from '../utils';
19
19
  var AnimatedCircle = Animated.createAnimatedComponent(Circle);
20
20
  var AnimatedRect = Animated.createAnimatedComponent(Rect);
21
+ var AnimatedLine = Animated.createAnimatedComponent(Line);
21
22
  export var BubbleChart = function (props) {
22
- var _a, _b, _c, _d;
23
+ var _a, _b, _c, _d, _e, _f;
23
24
  var opacityValue = useMemo(function () { return new Animated.Value(0); }, []);
24
25
  var pointsOpacityValue = useMemo(function () { return new Animated.Value(0); }, []);
25
26
  var secondaryXAxis = props.secondaryXAxis;
26
- var _e = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), 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, showDataPointOnFocus = _e.showDataPointOnFocus, showDataPointLabelOnFocus = _e.showDataPointLabelOnFocus, dataPointsShape = _e.dataPointsShape, dataPointsWidth = _e.dataPointsWidth, dataPointsHeight = _e.dataPointsHeight, dataPointsColor = _e.dataPointsColor, dataPointsRadius = _e.dataPointsRadius, textColor = _e.textColor, textFontSize = _e.textFontSize, startIndex = _e.startIndex, endIndex = _e.endIndex, showValuesAsDataPointsText = _e.showValuesAsDataPointsText, cumulativeSpacing = _e.cumulativeSpacing, hideDataPoints = _e.hideDataPoints, 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;
27
- var radiiValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
28
- var pointsHeightValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
29
- var pointsWidthValues = useMemo(function () { var _a; return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (_) { return new Animated.Value(0); }); }, []);
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;
28
+ var progress = useRef(new Animated.Value(0)).current;
29
+ var AnimatedRegressionLineX = useRef(new Animated.Value(0)).current;
30
+ var AnimatedRegressionLineY = useRef(new Animated.Value(0)).current;
30
31
  var scrollRef = (_b = props.scrollRef) !== null && _b !== void 0 ? _b : useRef(null);
31
32
  var widthValue = useMemo(function () { return new Animated.Value(0); }, []);
32
33
  var appearingOpacity = opacityValue.interpolate({
33
34
  inputRange: [0, 1],
34
35
  outputRange: [0, 1],
35
36
  });
36
- var growingRadii = radiiValues.map(function (r, i) {
37
- var _a, _b;
38
- return r.interpolate({
39
- inputRange: [0, 1],
40
- outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].r) !== null && _b !== void 0 ? _b : dataPointsRadius],
37
+ // const appearRegressionLine = RegressionLine.interpolate({
38
+ // inputRange:[0,1],
39
+ // outputRange:[regressionLineX1,regressionLineX2]
40
+ // })
41
+ var growingRadii = useMemo(function () {
42
+ var _a;
43
+ return ((_a = props.data) !== null && _a !== void 0 ? _a : []).map(function (item) {
44
+ var _a;
45
+ return progress.interpolate({
46
+ inputRange: [0, 1],
47
+ outputRange: [0, (_a = item.r) !== null && _a !== void 0 ? _a : bubblesRadius],
48
+ });
41
49
  });
42
- });
43
- var growingHeight = pointsHeightValues.map(function (h, i) {
50
+ }, [props.data, progress]);
51
+ var growingHeight = ((_c = props.data) !== null && _c !== void 0 ? _c : []).map(function (_, i) {
44
52
  var _a, _b;
45
- return h.interpolate({
53
+ return progress.interpolate({
46
54
  inputRange: [0, 1],
47
- outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointHeight) !== null && _b !== void 0 ? _b : dataPointsHeight],
55
+ outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleHeight) !== null && _b !== void 0 ? _b : bubblesHeight],
48
56
  });
49
57
  });
50
- var growingWidth = pointsHeightValues.map(function (w, i) {
58
+ var growingWidth = ((_d = props.data) !== null && _d !== void 0 ? _d : []).map(function (_, i) {
51
59
  var _a, _b;
52
- return w.interpolate({
60
+ return progress.interpolate({
53
61
  inputRange: [0, 1],
54
- outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].dataPointWidth) !== null && _b !== void 0 ? _b : dataPointsWidth],
62
+ outputRange: [0, (_b = (_a = props.data) === null || _a === void 0 ? void 0 : _a[i].bubbleWidth) !== null && _b !== void 0 ? _b : bubblesWidth],
55
63
  });
56
64
  });
57
65
  var appearingDataPoints = pointsOpacityValue.interpolate({
58
66
  inputRange: [0, 1],
59
67
  outputRange: [0, opacity],
60
68
  });
69
+ var drawRegressionLine = useCallback(function () {
70
+ if (!regressionLineConfig.isAnimated)
71
+ return;
72
+ AnimatedRegressionLineX.setValue(regressionLineX1);
73
+ AnimatedRegressionLineY.setValue(regressionLineY1);
74
+ Animated.parallel([
75
+ Animated.timing(AnimatedRegressionLineX, {
76
+ toValue: regressionLineX2,
77
+ duration: regressionLineConfig.animationDuration,
78
+ easing: Easing.linear,
79
+ useNativeDriver: false, // SVG props
80
+ }),
81
+ Animated.timing(AnimatedRegressionLineY, {
82
+ toValue: regressionLineY2,
83
+ duration: regressionLineConfig.animationDuration,
84
+ easing: Easing.linear,
85
+ useNativeDriver: false, // SVG props
86
+ }),
87
+ ]).start();
88
+ }, [regressionLineConfig]);
61
89
  var decreaseWidth = useCallback(function () {
62
90
  widthValue.setValue(0);
63
91
  Animated.timing(widthValue, {
@@ -77,39 +105,27 @@ export var BubbleChart = function (props) {
77
105
  }).start();
78
106
  }, [opacityValue]);
79
107
  var radiiGrow = useCallback(function () {
80
- radiiValues.forEach(function (radiusValue) {
81
- radiusValue.setValue(0);
82
- Animated.timing(radiusValue, {
83
- toValue: 1,
84
- duration: animationDuration,
85
- easing: Easing.ease,
86
- useNativeDriver: false,
87
- }).start();
88
- });
89
- }, [radiiValues]);
90
- var dataPointsHeightsGrow = useCallback(function () {
91
- pointsHeightValues.forEach(function (h) {
92
- h.setValue(0);
93
- Animated.timing(h, {
94
- toValue: 1,
95
- duration: animationDuration,
96
- easing: Easing.ease,
97
- useNativeDriver: false,
98
- }).start();
99
- });
100
- }, [pointsHeightValues]);
101
- var dataPointsWidthsGrow = useCallback(function () {
102
- pointsWidthValues.forEach(function (w) {
103
- w.setValue(0);
104
- Animated.timing(w, {
105
- toValue: 1,
106
- duration: animationDuration,
107
- easing: Easing.ease,
108
- useNativeDriver: false,
109
- }).start();
110
- });
111
- }, [pointsWidthValues]);
112
- // const dataPointsHeightGrow
108
+ if (bubblesShape === 'rectangular')
109
+ return;
110
+ progress.setValue(0);
111
+ Animated.timing(progress, {
112
+ toValue: 1,
113
+ duration: animationDuration,
114
+ easing: Easing.out(Easing.cubic),
115
+ useNativeDriver: false,
116
+ }).start();
117
+ }, [progress, animationDuration]);
118
+ var bubblesHeightsWidthsGrow = useCallback(function () {
119
+ if (bubblesShape !== 'rectangular')
120
+ return;
121
+ progress.setValue(0);
122
+ Animated.timing(progress, {
123
+ toValue: 1,
124
+ duration: animationDuration,
125
+ easing: Easing.out(Easing.cubic),
126
+ useNativeDriver: false,
127
+ }).start();
128
+ }, [progress, animationDuration]);
113
129
  var dataPointsAppear = useCallback(function () {
114
130
  pointsOpacityValue.setValue(0);
115
131
  Animated.timing(pointsOpacityValue, {
@@ -123,24 +139,28 @@ export var BubbleChart = function (props) {
123
139
  if (isAnimated) {
124
140
  decreaseWidth();
125
141
  labelsAppear();
126
- radiiGrow();
127
142
  dataPointsAppear();
128
- if (dataPointsShape === 'rectangular') {
129
- dataPointsHeightsGrow();
130
- dataPointsWidthsGrow();
143
+ if (bubblesShape === 'rectangular') {
144
+ bubblesHeightsWidthsGrow();
145
+ }
146
+ else {
147
+ radiiGrow();
131
148
  }
132
149
  }
133
- }, [isAnimated, dataPointsShape]);
134
- var svgHeight = containerHeightIncludingBelowXAxis + ((_c = props.overflowBottom) !== null && _c !== void 0 ? _c : 0);
135
- var onStripPress = function (item, index) {
136
- if (props.focusedDataPointIndex === undefined || !props.onFocus) {
137
- setSelectedIndex(index);
138
- }
139
- if (props.onFocus) {
140
- props.onFocus(item, index);
150
+ if (regressionLineConfig.isAnimated) {
151
+ drawRegressionLine();
141
152
  }
142
- };
143
- var renderLabel = function (top, index, label, labelTextStyle, labelComponent) {
153
+ }, [isAnimated, bubblesShape]);
154
+ var svgHeight = containerHeightIncludingBelowXAxis + ((_e = props.overflowBottom) !== null && _e !== void 0 ? _e : 0);
155
+ // const onStripPress = (item: any, index: number) => {
156
+ // if (props.focusedBubbleIndex === undefined || !props.onFocus) {
157
+ // setSelectedIndex(index);
158
+ // }
159
+ // if (props.onFocus) {
160
+ // props.onFocus(item, index);
161
+ // }
162
+ // };
163
+ var renderLabel = function (top, index, label) {
144
164
  var _a, _b;
145
165
  return (_jsx(View, { style: [
146
166
  {
@@ -149,16 +169,16 @@ export var BubbleChart = function (props) {
149
169
  ? containerHeight +
150
170
  60 +
151
171
  ((_a = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsDistanceFromXaxis) !== null && _a !== void 0 ? _a : 15)
152
- : -xAxisTextNumberOfLines * 18,
172
+ : -xAxisTextNumberOfLines * 18 - (containerHeight - 200) / 20,
153
173
  zIndex: 10,
154
174
  width: spacing + labelsExtraHeight,
155
175
  left: initialSpacing + spacing * index - spacing / 2,
156
176
  height: (_b = props.xAxisLabelsHeight) !== null && _b !== void 0 ? _b : xAxisTextNumberOfLines * 18,
157
177
  },
158
178
  rotateLabel && { transform: [{ rotate: '60deg' }] },
159
- ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { style: [{ textAlign: 'center' }, labelTextStyle], allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label })) }));
179
+ ], children: _jsx(Text, { style: { textAlign: 'center' }, allowFontScaling: allowFontScaling, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
160
180
  };
161
- var renderAnimatedLabel = function (top, index, label, labelTextStyle, labelComponent) {
181
+ var renderAnimatedLabel = function (top, index, label) {
162
182
  var _a, _b;
163
183
  return (_jsx(Animated.View, { style: [
164
184
  {
@@ -179,95 +199,101 @@ export var BubbleChart = function (props) {
179
199
  opacity: appearingOpacity,
180
200
  },
181
201
  rotateLabel && { transform: [{ rotate: '60deg' }] },
182
- ], children: labelComponent ? (labelComponent()) : (_jsx(Text, { allowFontScaling: allowFontScaling, style: [{ textAlign: 'center' }, labelTextStyle], numberOfLines: xAxisTextNumberOfLines, children: label })) }));
202
+ ], children: _jsx(Text, { allowFontScaling: allowFontScaling, style: { textAlign: 'center' }, numberOfLines: xAxisTextNumberOfLines, children: label }) }));
183
203
  };
184
- var renderDataPoints = function (hideDataPoints, dataForRender, originalDataFromProps, dataPtsShape, dataPtsWidth, dataPtsHeight, dataPtsColor, dataPtsRadius, textColor, textFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, spacingArray, key) {
204
+ var renderDataPoints = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize,
205
+ // textColor: any,
206
+ // textFontSize: any,
207
+ // textFontFamily: any,
208
+ // textFontWeight: any,
209
+ startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
185
210
  var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
186
211
  return dataForRender.map(function (item, index) {
187
- var _a, _b, _c, _d, _e, _f, _g, _h;
212
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
188
213
  if (index < startIndex || index > endIndex)
189
214
  return null;
190
- if (item.hideDataPoint) {
215
+ if (item.hideBubble) {
191
216
  return null;
192
217
  }
193
- var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
218
+ var bubblesShape, bubblesWidth, bubblesHeight, dataPointsColor, bubblesRadius, text, customBubble, labelComponent;
194
219
  if (index === selectedIndex &&
195
220
  (focusTogether || key === selectedLineNumber)) {
196
- dataPointsShape =
197
- item.focusedDataPointShape ||
198
- props.focusedDataPointShape ||
199
- item.dataPointShape ||
200
- dataPtsShape;
201
- dataPointsWidth =
202
- item.focusedDataPointWidth ||
203
- props.focusedDataPointWidth ||
204
- item.dataPointWidth ||
205
- dataPtsWidth;
206
- dataPointsHeight =
207
- item.focusedDataPointHeight ||
208
- props.focusedDataPointHeight ||
209
- item.dataPointHeight ||
210
- dataPtsHeight;
221
+ bubblesShape =
222
+ item.focusedBubbleShape ||
223
+ props.focusedBubbleShape ||
224
+ item.bubbleShape ||
225
+ bubsShape;
226
+ bubblesWidth =
227
+ item.focusedBubbleWidth ||
228
+ props.focusedBubbleWidth ||
229
+ item.bubbleWidth ||
230
+ bubsWidth;
231
+ bubblesHeight =
232
+ item.focusedBubbleHeight ||
233
+ props.focusedBubbleHeight ||
234
+ item.bubbleHeight ||
235
+ bubsHeight;
211
236
  dataPointsColor =
212
- item.focusedDataPointColor ||
213
- props.focusedDataPointColor ||
214
- LineDefaults.focusedDataPointColor;
215
- dataPointsRadius =
216
- (_c = (_b = (_a = item.focusedDataPointRadius) !== null && _a !== void 0 ? _a : props.focusedDataPointRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : dataPtsRadius;
237
+ item.focusedBubbleColor ||
238
+ props.focusedBubbleColor ||
239
+ BubbleDefaults.focusedBubbleColor;
240
+ bubblesRadius =
241
+ (_c = (_b = (_a = item.focusedBubbleRadius) !== null && _a !== void 0 ? _a : props.focusedBubbleRadius) !== null && _b !== void 0 ? _b : item.r) !== null && _c !== void 0 ? _c : bubsRadius;
217
242
  if (showTextOnFocus) {
218
- text = item.dataPointText;
243
+ text = item.label;
219
244
  }
220
- customDataPoint =
221
- item.focusedCustomDataPoint ||
222
- props.focusedCustomDataPoint ||
223
- item.customDataPoint ||
224
- props.customDataPoint;
225
- dataPointLabelComponent =
226
- item.focusedDataPointLabelComponent ||
227
- item.dataPointLabelComponent ||
228
- props.focusedDataPointLabelComponent ||
229
- props.dataPointLabelComponent;
245
+ customBubble =
246
+ item.focusedCustomBubble ||
247
+ props.focusedCustomBubble ||
248
+ item.customBubble ||
249
+ props.customBubble;
250
+ labelComponent =
251
+ item.focusedLabelComponent ||
252
+ item.labelComponent ||
253
+ props.focusedLabelComponent ||
254
+ props.labelComponent;
230
255
  }
231
256
  else {
232
- dataPointsShape = item.dataPointShape || dataPtsShape;
233
- dataPointsWidth = item.dataPointWidth || dataPtsWidth;
234
- dataPointsHeight = item.dataPointHeight || dataPtsHeight;
235
- dataPointsColor = item.dataPointColor || dataPtsColor;
236
- dataPointsRadius = (_d = item.r) !== null && _d !== void 0 ? _d : dataPtsRadius;
257
+ bubblesShape = item.bubbleShape || bubsShape;
258
+ bubblesWidth = item.bubbleWidth || bubsWidth;
259
+ bubblesHeight = item.bubbleHeight || bubsHeight;
260
+ dataPointsColor = item.bubbleColor || bubsColor;
261
+ bubblesRadius = (_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius;
237
262
  if (showTextOnFocus) {
238
263
  text = '';
239
264
  }
240
- customDataPoint = item.customDataPoint || props.customDataPoint;
241
- dataPointLabelComponent =
242
- item.dataPointLabelComponent || props.dataPointLabelComponent;
265
+ customBubble = item.customBubble || props.customBubble;
266
+ labelComponent = item.labelComponent || props.labelComponent;
243
267
  }
244
268
  if (showValuesAsDataPointsText) {
245
269
  text = originalDataFromProps[index].y;
246
270
  }
247
- var dataPointLabelWidth = item.dataPointLabelWidth
248
- ? item.dataPointLabelWidth
249
- : props.dataPointLabelWidth
250
- ? props.dataPointLabelWidth
271
+ var labelWidth = item.labelWidth
272
+ ? item.labelWidth
273
+ : props.labelWidth
274
+ ? props.labelWidth
251
275
  : 30;
276
+ var textLabel = !showTextOnFocus && !showValuesAsDataPointsText
277
+ ? item.label
278
+ : text.toString();
279
+ var textStyle = ((_f = (_e = item.labelTextStyle) !== null && _e !== void 0 ? _e : labelTextStyle) !== null && _f !== void 0 ? _f : {});
280
+ var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
281
+ var defaultFontSize = 14;
252
282
  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) {
253
283
  var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
254
284
  handleFocus(index);
255
- }, onPressOut: handleUnFocus })) : null })) : null, hideDataPoints ? null : (_jsxs(_Fragment, { children: [customDataPoint ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: initialSpacing -
256
- dataPointsWidth / 2 +
257
- ((_e = spacingArray[index - 1]) !== null && _e !== void 0 ? _e : 0), y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, children: customDataPoint(item, index) })) : (_jsx(Animated.View, { style: {
285
+ }, 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: {
258
286
  position: 'absolute',
259
287
  // height: svgHeight,
260
288
  // width: totalWidth,
261
- left: initialSpacing -
262
- dataPointsWidth / 2 +
263
- ((_f = spacingArray[index - 1]) !== null && _f !== void 0 ? _f : 0),
264
- top: getYOrSecondaryY(item.y) - dataPointsHeight / 2,
289
+ left: getX(index) - bubblesWidth / 2,
290
+ top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
265
291
  opacity: isAnimated ? appearingOpacity : 1,
266
- }, children: customDataPoint(item, index) }))) : null, dataPointsShape === 'rectangular' ? (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedRect, { x: getX(spacingArray, index) - dataPointsWidth / 2, y: getYOrSecondaryY(item.y) - dataPointsHeight / 2, width: isAnimated ? growingWidth[index] : dataPointsWidth, height: isAnimated ? growingHeight[index] : dataPointsHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showDataPointOnFocus
292
+ }, children: customBubble(item, index) }))) : null, bubblesShape === 'rectangular' ? (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedRect, { x: getX(index) - bubblesWidth / 2, y: getYOrSecondaryY(item.y) - bubblesHeight / 2, width: isAnimated ? growingWidth[index] : bubblesWidth, height: isAnimated ? growingHeight[index] : bubblesHeight, opacity: isAnimated ? appearingDataPoints : opacity, fill: showBubbleOnFocus
267
293
  ? index === selectedIndex
268
294
  ? dataPointsColor
269
295
  : 'none'
270
- : dataPointsColor, onPress: function () {
296
+ : dataPointsColor, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, strokeOpacity: (_k = (_j = item.borderOpacity) !== null && _j !== void 0 ? _j : props.borderOpacity) !== null && _k !== void 0 ? _k : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
271
297
  item.onPress
272
298
  ? item.onPress(item, index)
273
299
  : props.onPress
@@ -279,11 +305,11 @@ export var BubbleChart = function (props) {
279
305
  if (!item.onPress && !props.onPress && focusEnabled) {
280
306
  handleUnFocus();
281
307
  }
282
- } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedCircle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : dataPointsRadius, fill: showDataPointOnFocus
308
+ } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: showBubbleOnFocus
283
309
  ? index === selectedIndex
284
310
  ? dataPointsColor
285
311
  : 'none'
286
- : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_g = item.borderColor) !== null && _g !== void 0 ? _g : borderColor, strokeWidth: (_h = item.borderWidth) !== null && _h !== void 0 ? _h : borderWidth, onPress: function () {
312
+ : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_l = item.borderColor) !== null && _l !== void 0 ? _l : borderColor, strokeWidth: (_m = item.borderWidth) !== null && _m !== void 0 ? _m : borderWidth, strokeOpacity: (_p = (_o = item.borderOpacity) !== null && _o !== void 0 ? _o : props.borderOpacity) !== null && _p !== void 0 ? _p : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
287
313
  item.onPress
288
314
  ? item.onPress(item, index)
289
315
  : props.onPress
@@ -295,47 +321,39 @@ export var BubbleChart = function (props) {
295
321
  if (!item.onPress && !props.onPress && focusEnabled) {
296
322
  handleUnFocus();
297
323
  }
298
- } })) }, index)), dataPointLabelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: dataPointLabelWidth, x: initialSpacing +
299
- (item.dataPointLabelShiftX ||
300
- props.dataPointLabelShiftX ||
301
- 0) -
302
- dataPointLabelWidth / 2 +
324
+ } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: labelWidth, x: initialSpacing +
325
+ (item.labelShiftX || props.labelShiftX || 0) -
326
+ labelWidth / 2 +
303
327
  spacing * index, y: containerHeight +
304
- (item.dataPointLabelShiftY ||
305
- props.dataPointLabelShiftY ||
306
- 0) -
307
- (item.y * containerHeight) / maxValue, children: showDataPointLabelOnFocus
328
+ (item.labelShiftY || props.labelShiftY || 0) -
329
+ (item.y * containerHeight) / maxValue, children: showBubbleLabelOnFocus
308
330
  ? index === selectedIndex &&
309
331
  (focusTogether || key == selectedLineNumber)
310
- ? dataPointLabelComponent(item, index) // not pushed in latest release
332
+ ? labelComponent(item, index) // not pushed in latest release
311
333
  : null
312
- : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
334
+ : labelComponent(item, index) })) : (_jsx(Animated.View, { style: {
313
335
  position: 'absolute',
314
336
  height: svgHeight,
315
- width: dataPointLabelWidth,
316
- left: initialSpacing +
317
- (item.dataPointLabelShiftX ||
318
- props.dataPointLabelShiftX ||
319
- 0) -
320
- dataPointLabelWidth / 2 +
321
- spacing * index,
322
- top: containerHeight +
323
- (item.dataPointLabelShiftY ||
324
- props.dataPointLabelShiftY ||
325
- 0) -
326
- (item.y * containerHeight) / maxValue,
327
- }, children: showDataPointLabelOnFocus
337
+ width: labelWidth,
338
+ left: getX(index) -
339
+ defaultFontSize / 2 +
340
+ (item.labelShiftX || props.labelShiftX || 0),
341
+ top: getYOrSecondaryY(item.y) -
342
+ defaultFontSize / 1.5 +
343
+ (item.labelShiftY || props.labelShiftY || 0),
344
+ opacity: isAnimated ? appearingDataPoints : 1,
345
+ }, children: showBubbleLabelOnFocus
328
346
  ? index === selectedIndex &&
329
347
  (focusTogether || key == selectedLineNumber)
330
- ? dataPointLabelComponent(item, index) // not pushed in latest release
348
+ ? labelComponent(item, index) // not pushed in latest release
331
349
  : null
332
- : dataPointLabelComponent(item, index) }))) : null) : text || item.dataPointText ? (!showTextOnFocus || index === selectedIndex ? (_jsx(CanvasText, { fill: item.textColor || textColor, fontSize: item.textFontSize || textFontSize, x: getX(spacingArray, index) -
333
- dataPointsWidth +
334
- (item.textShiftX || props.textShiftX || 0), y: getYOrSecondaryY(item.y) -
335
- dataPointsHeight / 2 +
336
- (item.textShiftY || props.textShiftY || 0), children: !showTextOnFocus && !showValuesAsDataPointsText
337
- ? item.dataPointText
338
- : text })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
350
+ : labelComponent(item, index) }))) : null) : textLabel ? (!showTextOnFocus || index === selectedIndex ? (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
351
+ Math.min(bubblesRadius, (textLabel.length * fontSize) / 3) +
352
+ (item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
353
+ fontSize / 1.5 +
354
+ (item.labelShiftY || props.labelShiftY || 0), fontSize: fontSize, opacity: isAnimated
355
+ ? appearingDataPoints
356
+ : ((_q = textStyle.opacity) !== null && _q !== void 0 ? _q : 1) }), children: textLabel })) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
339
357
  });
340
358
  };
341
359
  var svgWrapperViewStyle = {
@@ -346,7 +364,6 @@ export var BubbleChart = function (props) {
346
364
  transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
347
365
  };
348
366
  var renderChartContent = function () {
349
- var _a;
350
367
  return (_jsxs(View, { style: [
351
368
  svgWrapperViewStyle,
352
369
  {
@@ -354,23 +371,19 @@ export var BubbleChart = function (props) {
354
371
  height: containerHeightIncludingBelowXAxis,
355
372
  // zIndex,
356
373
  },
357
- ], children: [_jsx(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: renderDataPoints(hideDataPoints, props.data, props.data, dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, textColor, textFontSize, startIndex, endIndex, false, showValuesAsDataPointsText, cumulativeSpacing, 0) }), (_a = props.data) === null || _a === void 0 ? void 0 : _a.map(function (item, index) {
358
- var _a, _b, _c, _d, _e, _f;
359
- var secondaryLabel = (_c = (_a = item.secondaryLabel) !== null && _a !== void 0 ? _a : (_b = secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelTexts) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : '';
360
- var secondaryLabelTextStyle = (_f = (_e = (_d = item.secondaryLabelTextStyle) !== null && _d !== void 0 ? _d : secondaryXAxis === null || secondaryXAxis === void 0 ? void 0 : secondaryXAxis.labelsTextStyle) !== null && _e !== void 0 ? _e : item.labelTextStyle) !== null && _f !== void 0 ? _f : props.xAxisLabelTextStyle;
361
- return (_jsxs(View, { children: [isAnimated
362
- ? renderAnimatedLabel(false, index, item.label ||
363
- (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
364
- ? props.xAxisLabelTexts[index]
365
- : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent)
366
- : renderLabel(false, index, item.label ||
367
- (props.xAxisLabelTexts && props.xAxisLabelTexts[index]
368
- ? props.xAxisLabelTexts[index]
369
- : ''), item.labelTextStyle || props.xAxisLabelTextStyle, item.labelComponent), secondaryXAxis
370
- ? isAnimated
371
- ? renderAnimatedLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
372
- : renderLabel(true, index, secondaryLabel, secondaryLabelTextStyle, item.secondaryLabelComponent)
373
- : null] }, index));
374
+ ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [renderDataPoints(hideBubbles, props.data, props.data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize,
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
+ ? AnimatedRegressionLineX
381
+ : regressionLineX2, y2: regressionLineConfig.isAnimated
382
+ ? AnimatedRegressionLineY
383
+ : 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) {
384
+ return (_jsx(View, { children: isAnimated
385
+ ? renderAnimatedLabel(false, index, label)
386
+ : renderLabel(false, index, label) }, index));
374
387
  })] }));
375
388
  };
376
389
  var remainingScrollViewProps = {
@@ -379,7 +392,7 @@ export var BubbleChart = function (props) {
379
392
  (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
380
393
  },
381
394
  bounces: props.bounces,
382
- overScrollMode: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
395
+ overScrollMode: (_f = props.overScrollMode) !== null && _f !== void 0 ? _f : 'auto',
383
396
  };
384
397
  return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
385
398
  };
package/dist/Components/BarAndLineChartsWrapper/renderHorizSections.js CHANGED
@@ -36,6 +36,7 @@ export var renderHorizSections = function (props) {
36
36
  var negativeSectionsCountDiffPrimaryVsSecondary = secondaryHorizSectionsBelow.length - horizSectionsBelow.length;
37
37
  var isLineChart = chartType === chartTypes.LINE;
38
38
  var isLineBiColor = chartType === chartTypes.LINE_BI_COLOR;
39
+ var chartWiseTotalWidth = chartType === chartTypes.BUBBLE ? totalWidth : totalWidth - spacing;
39
40
  var renderAxesAndRules = function (index) {
40
41
  var _a, _b, _c, _d, _e, _f, _g, _h;
41
42
  var invertedIndex = horizSections.length - index - 1;
@@ -49,7 +50,7 @@ export var renderHorizSections = function (props) {
49
50
  {
50
51
  borderColor: yAxisColor,
51
52
  backgroundColor: (_a = sectionColors === null || sectionColors === void 0 ? void 0 : sectionColors[invertedIndex]) !== null && _a !== void 0 ? _a : backgroundColor,
52
- width: (props.width || totalWidth - spacing) + endSpacing,
53
+ width: (props.width || chartWiseTotalWidth) + endSpacing,
53
54
  },
54
55
  !index ? { height: stepHeight / 2, marginTop: stepHeight / 2 } : null,
55
56
  yAxisSide === yAxisSides.RIGHT
@@ -59,14 +60,14 @@ export var renderHorizSections = function (props) {
59
60
  thickness: xAxisThickness,
60
61
  color: xAxisColor,
61
62
  width: xAxisLength ||
62
- (props.width || totalWidth - spacing) + endSpacing,
63
+ (props.width || chartWiseTotalWidth) + endSpacing,
63
64
  dashWidth: dashWidth,
64
65
  dashGap: dashGap,
65
66
  type: xAxisType,
66
67
  } })) : hideRules ? null : (_jsx(Rule, { config: {
67
68
  thickness: (_b = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesThickness) !== null && _b !== void 0 ? _b : rulesThickness,
68
69
  color: (_c = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesColor) !== null && _c !== void 0 ? _c : rulesColor,
69
- width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || totalWidth - spacing) + endSpacing,
70
+ width: (_e = (_d = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesLength) !== null && _d !== void 0 ? _d : rulesLength) !== null && _e !== void 0 ? _e : (props.width || chartWiseTotalWidth) + endSpacing,
70
71
  dashWidth: (_f = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashWidth) !== null && _f !== void 0 ? _f : dashWidth,
71
72
  dashGap: (_g = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.dashGap) !== null && _g !== void 0 ? _g : dashGap,
72
73
  type: (_h = rulesConfigArrayLocal === null || rulesConfigArrayLocal === void 0 ? void 0 : rulesConfigArrayLocal.rulesType) !== null && _h !== void 0 ? _h : rulesType,
@@ -113,7 +114,7 @@ export var renderHorizSections = function (props) {
113
114
  ? ((_b = secondaryXAxis.thickness) !== null && _b !== void 0 ? _b : xAxisThickness)
114
115
  : 0,
115
116
  backgroundColor: backgroundColor,
116
- width: (props.width || totalWidth - spacing) + endSpacing,
117
+ width: (props.width || chartWiseTotalWidth) + endSpacing,
117
118
  },
118
119
  yAxisSide === yAxisSides.RIGHT
119
120
  ? { borderRightWidth: yAxisThickness }
@@ -241,7 +242,7 @@ export var renderHorizSections = function (props) {
241
242
  thickness: rulesThickness,
242
243
  color: rulesColor,
243
244
  width: rulesLength ||
244
- (props.width || totalWidth - spacing) + endSpacing,
245
+ (props.width || chartWiseTotalWidth) + endSpacing,
245
246
  dashWidth: dashWidth,
246
247
  dashGap: dashGap,
247
248
  type: rulesType,
package/dist/Components/BarAndLineChartsWrapper/renderVerticalLines.js CHANGED
@@ -47,6 +47,8 @@ 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)
51
+ return null;
50
52
  var totalSpacing = initialSpacing;
51
53
  if (verticalLinesSpacing) {
52
54
  totalSpacing = verticalLinesSpacing * (index + 1);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-gifted-charts",
3
- "version": "1.4.71",
3
+ "version": "1.4.72",
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.74"
29
+ "gifted-charts-core": "0.1.75"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@babel/cli": "^7.24.8",