react-native-gifted-charts 1.4.71 → 1.4.73

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/BubbleChart/index.js +195 -181
  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
- 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); }); }, []);
26
+ var secondaryXAxis = props.secondaryXAxis, xAxisLabelTextStyle = props.xAxisLabelTextStyle, formatBubbleLabel = props.formatBubbleLabel;
27
+ var _g = useBubbleChart(__assign(__assign({}, props), { parentWidth: (_a = props.parentWidth) !== null && _a !== void 0 ? _a : screenWidth })), barAndLineChartsWrapperProps = _g.barAndLineChartsWrapperProps, totalWidth = _g.totalWidth, animationDuration = _g.animationDuration, _h = _g.containerHeightIncludingBelowXAxis, containerHeightIncludingBelowXAxis = _h === void 0 ? 0 : _h, getY = _g.getY, getX = _g.getX, maxValue = _g.maxValue, selectedIndex = _g.selectedIndex, setSelectedIndex = _g.setSelectedIndex, showTextOnFocus = _g.showTextOnFocus, focusEnabled = _g.focusEnabled, focusTogether = _g.focusTogether, selectedLineNumber = _g.selectedLineNumber, lastLineNumber = _g.lastLineNumber, initialSpacing = _g.initialSpacing, spacing = _g.spacing, containerHeight = _g.containerHeight, handleFocus = _g.handleFocus, handleUnFocus = _g.handleUnFocus, isAnimated = _g.isAnimated, showBubbleOnFocus = _g.showBubbleOnFocus, showBubbleLabelOnFocus = _g.showBubbleLabelOnFocus, bubblesShape = _g.bubblesShape, bubblesWidth = _g.bubblesWidth, bubblesHeight = _g.bubblesHeight, bubblesColor = _g.bubblesColor, bubblesRadius = _g.bubblesRadius, labelFontSize = _g.labelFontSize, labelTextStyle = _g.labelTextStyle, startIndex = _g.startIndex, endIndex = _g.endIndex, showValuesAsBubbleLabels = _g.showValuesAsBubbleLabels, hideBubbles = _g.hideBubbles, xAxisLabelsVerticalShift = _g.xAxisLabelsVerticalShift, labelsExtraHeight = _g.labelsExtraHeight, xAxisThickness = _g.xAxisThickness, xAxisTextNumberOfLines = _g.xAxisTextNumberOfLines, rotateLabel = _g.rotateLabel, allowFontScaling = _g.allowFontScaling, borderColor = _g.borderColor, borderWidth = _g.borderWidth, opacity = _g.opacity, xAxisLabelTexts = _g.xAxisLabelTexts, showRegressionLine = _g.showRegressionLine, regressionLineX1 = _g.regressionLineX1, regressionLineY1 = _g.regressionLineY1, regressionLineX2 = _g.regressionLineX2, regressionLineY2 = _g.regressionLineY2, regressionLineConfig = _g.regressionLineConfig, scatterChart = _g.scatterChart;
28
+ 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' }, xAxisLabelTextStyle], 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,99 @@ 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' }, xAxisLabelTextStyle], 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 renderBubbles = function (hideBubbles, dataForRender, originalDataFromProps, bubsShape, bubsWidth, bubsHeight, bubsColor, bubsRadius, labelFontSize, startIndex, endIndex, isSecondary, showValuesAsDataPointsText, key) {
185
205
  var getYOrSecondaryY = getY; //isSecondary ? getSecondaryY : getY;
186
206
  return dataForRender.map(function (item, index) {
187
- var _a, _b, _c, _d, _e, _f, _g, _h;
207
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
188
208
  if (index < startIndex || index > endIndex)
189
209
  return null;
190
- if (item.hideDataPoint) {
210
+ if (item.hideBubble) {
191
211
  return null;
192
212
  }
193
- var dataPointsShape, dataPointsWidth, dataPointsHeight, dataPointsColor, dataPointsRadius, text, customDataPoint, dataPointLabelComponent;
213
+ var bubblesShape, bubblesWidth, bubblesHeight, dataPointsColor, bubblesRadius, text, customBubble, labelComponent;
194
214
  if (index === selectedIndex &&
195
215
  (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;
216
+ bubblesShape =
217
+ item.focusedBubbleShape ||
218
+ props.focusedBubbleShape ||
219
+ item.bubbleShape ||
220
+ bubsShape;
221
+ bubblesWidth =
222
+ item.focusedBubbleWidth ||
223
+ props.focusedBubbleWidth ||
224
+ item.bubbleWidth ||
225
+ bubsWidth;
226
+ bubblesHeight =
227
+ item.focusedBubbleHeight ||
228
+ props.focusedBubbleHeight ||
229
+ item.bubbleHeight ||
230
+ bubsHeight;
211
231
  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;
232
+ item.focusedBubbleColor ||
233
+ props.focusedBubbleColor ||
234
+ BubbleDefaults.focusedBubbleColor;
235
+ bubblesRadius =
236
+ (_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
237
  if (showTextOnFocus) {
218
- text = item.dataPointText;
238
+ text = item.label;
219
239
  }
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;
240
+ customBubble =
241
+ item.focusedCustomBubble ||
242
+ props.focusedCustomBubble ||
243
+ item.customBubble ||
244
+ props.customBubble;
245
+ labelComponent =
246
+ item.focusedLabelComponent ||
247
+ item.labelComponent ||
248
+ props.focusedLabelComponent ||
249
+ props.labelComponent;
230
250
  }
231
251
  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;
252
+ bubblesShape = item.bubbleShape || bubsShape;
253
+ bubblesWidth = item.bubbleWidth || bubsWidth;
254
+ bubblesHeight = item.bubbleHeight || bubsHeight;
255
+ dataPointsColor = item.bubbleColor || bubsColor;
256
+ bubblesRadius = (_d = item.r) !== null && _d !== void 0 ? _d : bubsRadius;
237
257
  if (showTextOnFocus) {
238
258
  text = '';
239
259
  }
240
- customDataPoint = item.customDataPoint || props.customDataPoint;
241
- dataPointLabelComponent =
242
- item.dataPointLabelComponent || props.dataPointLabelComponent;
260
+ customBubble = item.customBubble || props.customBubble;
261
+ labelComponent = item.labelComponent || props.labelComponent;
243
262
  }
244
263
  if (showValuesAsDataPointsText) {
245
264
  text = originalDataFromProps[index].y;
246
265
  }
247
- var dataPointLabelWidth = item.dataPointLabelWidth
248
- ? item.dataPointLabelWidth
249
- : props.dataPointLabelWidth
250
- ? props.dataPointLabelWidth
266
+ var labelWidth = item.labelWidth
267
+ ? item.labelWidth
268
+ : props.labelWidth
269
+ ? props.labelWidth
251
270
  : 30;
271
+ var textLabel = !showTextOnFocus && !showValuesAsDataPointsText
272
+ ? item.label
273
+ : text.toString();
274
+ var formattedTextLabel = textLabel
275
+ ? ((_e = formatBubbleLabel === null || formatBubbleLabel === void 0 ? void 0 : formatBubbleLabel(textLabel)) !== null && _e !== void 0 ? _e : textLabel)
276
+ : '';
277
+ var textStyle = ((_g = (_f = item.labelTextStyle) !== null && _f !== void 0 ? _f : labelTextStyle) !== null && _g !== void 0 ? _g : {});
278
+ var fontSize = textStyle.fontSize || item.labelFontSize || labelFontSize;
279
+ var defaultFontSize = 14;
252
280
  return (_jsxs(Fragment, { children: [focusEnabled ? (_jsx(_Fragment, { children: key === lastLineNumber - 1 ? (_jsx(Rect, { x: initialSpacing + (spacing * index - spacing / 2), y: 8, width: spacing, height: containerHeight - 0, fill: 'none', onPressIn: function (evt) {
253
281
  var locationY = evt.nativeEvent.locationY; // Note that we have another property named pageY which can be useful
254
282
  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: {
283
+ }, 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
284
  position: 'absolute',
259
285
  // height: svgHeight,
260
286
  // 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,
287
+ left: getX(index) - bubblesWidth / 2,
288
+ top: getYOrSecondaryY(item.y) - bubblesHeight / 2,
265
289
  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
290
+ }, 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
291
  ? index === selectedIndex
268
292
  ? dataPointsColor
269
293
  : 'none'
270
- : dataPointsColor, onPress: function () {
294
+ : dataPointsColor, stroke: (_h = item.borderColor) !== null && _h !== void 0 ? _h : borderColor, strokeWidth: (_j = item.borderWidth) !== null && _j !== void 0 ? _j : borderWidth, strokeOpacity: (_l = (_k = item.borderOpacity) !== null && _k !== void 0 ? _k : props.borderOpacity) !== null && _l !== void 0 ? _l : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
271
295
  item.onPress
272
296
  ? item.onPress(item, index)
273
297
  : props.onPress
@@ -279,11 +303,11 @@ export var BubbleChart = function (props) {
279
303
  if (!item.onPress && !props.onPress && focusEnabled) {
280
304
  handleUnFocus();
281
305
  }
282
- } })) }, index)) : (_jsx(Fragment, { children: customDataPoint ? null : (_jsx(AnimatedCircle, { cx: getX(spacingArray, index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : dataPointsRadius, fill: showDataPointOnFocus
306
+ } })) }, index)) : (_jsx(Fragment, { children: customBubble ? null : (_jsx(AnimatedCircle, { cx: getX(index), cy: getYOrSecondaryY(item.y), r: isAnimated ? growingRadii[index] : bubblesRadius, fill: showBubbleOnFocus
283
307
  ? index === selectedIndex
284
308
  ? dataPointsColor
285
309
  : '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 () {
310
+ : dataPointsColor, opacity: isAnimated ? appearingDataPoints : opacity, stroke: (_m = item.borderColor) !== null && _m !== void 0 ? _m : borderColor, strokeWidth: (_o = item.borderWidth) !== null && _o !== void 0 ? _o : borderWidth, strokeOpacity: (_q = (_p = item.borderOpacity) !== null && _p !== void 0 ? _p : props.borderOpacity) !== null && _q !== void 0 ? _q : (isAnimated ? appearingDataPoints : opacity), onPress: function () {
287
311
  item.onPress
288
312
  ? item.onPress(item, index)
289
313
  : props.onPress
@@ -295,47 +319,47 @@ export var BubbleChart = function (props) {
295
319
  if (!item.onPress && !props.onPress && focusEnabled) {
296
320
  handleUnFocus();
297
321
  }
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 +
303
- spacing * index, y: containerHeight +
304
- (item.dataPointLabelShiftY ||
305
- props.dataPointLabelShiftY ||
306
- 0) -
307
- (item.y * containerHeight) / maxValue, children: showDataPointLabelOnFocus
322
+ } })) }, index)), labelComponent ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
323
+ labelWidth / 2 +
324
+ 6 +
325
+ (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
326
+ 10 +
327
+ (item.labelShiftY || props.labelShiftY || 0) -
328
+ (scatterChart ? bubblesRadius + 10 : 0), children: showBubbleLabelOnFocus
308
329
  ? index === selectedIndex &&
309
330
  (focusTogether || key == selectedLineNumber)
310
- ? dataPointLabelComponent(item, index) // not pushed in latest release
331
+ ? labelComponent(item, index) // not pushed in latest release
311
332
  : null
312
- : dataPointLabelComponent(item, index) })) : (_jsx(View, { style: {
333
+ : labelComponent(item, index) })) : (_jsx(Animated.View, { style: {
313
334
  position: 'absolute',
314
335
  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
336
+ width: labelWidth,
337
+ left: getX(index) -
338
+ defaultFontSize / 2 +
339
+ (item.labelShiftX || props.labelShiftX || 0),
340
+ top: getYOrSecondaryY(item.y) -
341
+ defaultFontSize / 1.5 +
342
+ (item.labelShiftY || props.labelShiftY || 0) -
343
+ (scatterChart ? bubblesRadius + 10 : 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) : formattedTextLabel ? (!showTextOnFocus || index === selectedIndex ? (isWebApp ? (_jsx(ForeignObject, { height: svgHeight, width: totalWidth, x: getX(index) -
351
+ Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
352
+ (item.labelShiftX || props.labelShiftX || 0), y: getYOrSecondaryY(item.y) -
353
+ Math.max(10, fontSize / 1.5) +
354
+ (item.labelShiftY || props.labelShiftY || 0) -
355
+ (scatterChart ? bubblesRadius + 10 : 0), children: _jsx(Text, { style: __assign(__assign({}, textStyle), { fontSize: fontSize }), children: formattedTextLabel }) })) : (_jsx(Animated.Text, { style: __assign(__assign({}, textStyle), { position: 'absolute', left: getX(index) -
356
+ Math.min(bubblesRadius, (formattedTextLabel.length * fontSize) / 3) +
357
+ (item.labelShiftX || props.labelShiftX || 0), top: getYOrSecondaryY(item.y) -
358
+ fontSize / 1.5 +
359
+ (item.labelShiftY || props.labelShiftY || 0) -
360
+ (scatterChart ? bubblesRadius + 10 : 0), fontSize: fontSize, opacity: isAnimated
361
+ ? appearingDataPoints
362
+ : ((_r = textStyle.opacity) !== null && _r !== void 0 ? _r : 1) }), children: formattedTextLabel }))) : null) : null, index === selectedIndex ? _jsx(Text, { children: '' }) : null] }))] }, index));
339
363
  });
340
364
  };
341
365
  var svgWrapperViewStyle = {
@@ -346,7 +370,6 @@ export var BubbleChart = function (props) {
346
370
  transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
347
371
  };
348
372
  var renderChartContent = function () {
349
- var _a;
350
373
  return (_jsxs(View, { style: [
351
374
  svgWrapperViewStyle,
352
375
  {
@@ -354,23 +377,14 @@ export var BubbleChart = function (props) {
354
377
  height: containerHeightIncludingBelowXAxis,
355
378
  // zIndex,
356
379
  },
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));
380
+ ], children: [_jsxs(Svg, { height: svgHeight, width: totalWidth, onPress: props.onBackgroundPress, children: [renderBubbles(hideBubbles, props.data, props.data, bubblesShape, bubblesWidth, bubblesHeight, bubblesColor, bubblesRadius, labelFontSize, startIndex, endIndex, false, showValuesAsBubbleLabels, 0), showRegressionLine && (_jsx(AnimatedLine, { x1: regressionLineX1, y1: regressionLineY1, x2: regressionLineConfig.isAnimated
381
+ ? AnimatedRegressionLineX
382
+ : regressionLineX2, y2: regressionLineConfig.isAnimated
383
+ ? AnimatedRegressionLineY
384
+ : 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) {
385
+ return (_jsx(View, { children: isAnimated
386
+ ? renderAnimatedLabel(false, index, label)
387
+ : renderLabel(false, index, label) }, index));
374
388
  })] }));
375
389
  };
376
390
  var remainingScrollViewProps = {
@@ -379,7 +393,7 @@ export var BubbleChart = function (props) {
379
393
  (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, ev);
380
394
  },
381
395
  bounces: props.bounces,
382
- overScrollMode: (_d = props.overScrollMode) !== null && _d !== void 0 ? _d : 'auto',
396
+ overScrollMode: (_f = props.overScrollMode) !== null && _f !== void 0 ? _f : 'auto',
383
397
  };
384
398
  return (_jsx(BarAndLineChartsWrapper, __assign({}, barAndLineChartsWrapperProps, { scrollRef: scrollRef, animatedWidth: widthValue, renderChartContent: renderChartContent, remainingScrollViewProps: remainingScrollViewProps, nestedScrollEnabled: props.nestedScrollEnabled })));
385
399
  };
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 && initialSpacing === 0)
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.73",
4
4
  "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar, Population Pyramid, Radar and Bubble charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
5
5
  "main": "dist/index.js",
6
6
  "files": [
@@ -26,7 +26,7 @@
26
26
  "registry": "https://registry.npmjs.org/"
27
27
  },
28
28
  "dependencies": {
29
- "gifted-charts-core": "0.1.74"
29
+ "gifted-charts-core": "0.1.76"
30
30
  },
31
31
  "devDependencies": {
32
32
  "@babel/cli": "^7.24.8",