Merge pull request #935 from Abhinandan-Kushwaha/development

v1.4.48 Major release with features n fixes

docs/BarChart/BarChartProps.md

@@ -27,6 +27,7 @@
 | spacing                      | number               | Distance between 2 consecutive bars in the Bar chart                                                                                              | 20                  |
 | backgroundColor              | ColorValue           | Background color of the Bar chart                                                                                                                 | \_                  |
 | sectionColors                | ColorValue           | Background color of the horizontal sections of the chart                                                                                          | backgroundColor     |
+| customBackground             | CustomBackground     | An object used to set a custom background component (See the properties of this object below)                                                     | \_                  |
 | scrollref                    | any                  | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered                                               | React.useRef()      |
 | scrollToIndex                | number               | scroll to a particular index on chart load                                                                                                        | \_                  |
 | disableScroll                | boolean              | To disable horizontal scroll                                                                                                                      | false               |
@@ -170,6 +171,20 @@ type FocusedBarConfig = {
 };
 ```
 
+#### CustomBackground
+
+```ts
+type CustomBackground = {
+  color?: ColorValue
+  component?: Function
+  horizontalShift?: number
+  verticalShift?: number
+  height?: number
+  width?: number
+  widthAdjustment?: number
+}
+```
+
 ---
 
 **Alert!**\

docs/LineChart/LineChartProps.md

@@ -26,6 +26,7 @@
 | adjustToWidth                 | boolean              | When set to true, it auto computes the spacing value to fit the Line chart in the available width                 | false                         |
 | backgroundColor               | ColorValue           | Background color of the Bar chart                                                                                 | \_                            |
 | sectionColors                 | ColorValue           | Background color of the horizontal sections of the chart                                                          | backgroundColor               |
+| customBackground              | CustomBackground     | An object used to set a custom background component (See the properties of this object below)                     | \_                            |
 | scrollref                     | any                  | ref object that can be used to control the horizontal ScrollView inside which the chart is rendered               | React.useRef()                |
 | scrollToIndex                 | number               | scroll to a particular index on chart load                                                                        | \_                            |
 | disableScroll                 | boolean              | To disable horizontal scroll                                                                                      | false                         |
@@ -101,6 +102,20 @@ type DataSet = {
 };
 ```
 
+#### CustomBackground
+
+```ts
+type CustomBackground = {
+  color?: ColorValue
+  component?: Function
+  horizontalShift?: number
+  verticalShift?: number
+  height?: number
+  width?: number
+  widthAdjustment?: number
+}
+```
+
 **Alert!**\
 These props are correlated:
 
@@ -666,6 +681,8 @@ The default value of `showArrowBase` is true. To fill the arrow with `fillColor`
 1. **item** (object in the data array at the index of the data point)
 2. **index** (index of the data point)
 
+**Note** When using `customDataPoint`, make sure to pass the custom point's height and using the props- `dataPointsHeight` and `dataPointsWidth`. Not passing these props might result in an improper alignment of the custom data points.
+
 ---
 
 ## pointerConfig
@@ -704,10 +721,12 @@ type Pointer = {
   autoAdjustPointerLabelPosition?: boolean; // default: false
   pointerVanishDelay?: number; // default: 150
   activatePointersOnLongPress?: boolean; // default: false
+  activatePointersInstantlyOnTouch?: boolean; // default: true
   activatePointersDelay?: number; // default: 150
   initialPointerIndex?: number; // default -1
   initialPointerAppearDelay?: number; // if isAnimated, then animationDuration, else 0
   persistPointer?: boolean; // false
+  resetPointerIndexOnRelease?: boolean; // false
   hidePointer1?: boolean; // default: false
   hidePointer2?: boolean; // default: false
   hidePointer3?: boolean; // default: false
@@ -812,6 +831,8 @@ To achieve this the `focusEnabled` props must be set to true. In addition, use b
 | focusedDataPointColor     | ColorValue    | Color of the data points when focused due to press event                                                                                      | item.dataPointsColor OR dataPointsColor   |
 | focusedDataPointRadius    | number        | Radius of the data points when focused due to press event                                                                                     | item.dataPointsRadius OR dataPointsRadius |
 | focusedCustomDataPoint    | Function      | Custom data point when focused due to press event                                                                                             | item.customDataPoint OR customDataPoint   |
+| focusTogether             | boolean       | In case of multi-line charts, Unless `focusTogether` is set to `false`, all the data points at the focused index get focused together         | true |
+| focusProximity            | number        | Sets the distance from a data point upto which a press event should result in focusing that data point                                        | Infinity |
 
 #### Example of onFocus :
 
@@ -821,6 +842,8 @@ onFocus={(item, index) => {
 }}
 ```
 
+**Read more about `focus` here- [Focusing](../dev/LineChart//Focusing.md)**
+
 **_Note_** Some props have been renamed in version `1.3.2`
 Here is the list of prop names changed in version `1.3.2`-
 

docs/dev/LineChart/Focusing.md

@@ -0,0 +1,27 @@
+## Focusing
+
+A data point can be focused using the `focusEnabled` prop.
+A focused data point can have a different color, shape and size using the props (or properties of data items)- 
+1. focusedDataPointShape
+2. focusedDataPointColor
+3. focusedDataPointRadius
+4. focusedDataPointWidth
+5. focusedDataPointHeight
+
+When `focusEnabled` prop is `true`, on pressing anywhere on the chart body, the data point nearest to the pressed point gets focused. We can also set the distance from a data point upto which a press event should result in focusing that data point using the prop `focusProximity`.
+
+The data point remained in focused state till a given duration using the `delayBeforeUnFocus` prop which takes the focus duration in milliseconds, the default value being 300.
+To let the focus events to persist forever, the `unFocusOnPressOut` prop can be set to `false`, the default value being true.
+
+## Multi-line scenario
+
+When more than one lines are rendered using `dataSet` or `data2`, `data3`... or `secondaryData`, then a press event selects the neares data point's index and sets that index as focused. This results in focusing the data points at that index from each data array. This means all the vertically aligned points will be focused simultaneously. To disable this behaviour, and focus only one point at a a time, we can set the `focusTogether` prop to `false`, default being true.
+
+### How does focus work
+
+Focusing has been implemented in a rather hacky manner.
+We are rendering `n` rectangles (using `<Rect>` from svg) where `n` is the size of the longest data arry amongst all data arrays. So, the entire chart width is divided into `n` rectangles. When a press event occurs, one of the rectangles is pressed and its index is saved in the `selectedIndex` state variable. Unless `focusTogether` is set to `false`, all the data points lying in the selected rectangle get focused together.
+
+<img src='../../../demos/strips.png' alt=''/>
+
+The logic to set/unset the selected index is written a function named `renderDataPoints` which is called for each individual line. So if we have `n` data arrays or `n` arrays in the `dataSet`, then `renderDataPoints` is called `n` times. This means that each red color rectangle we see in the above chart will be rendered `n` times (which is absurd and inefficient). To avoid this redundancy, we use the variable named **`selectedLineNumber`** and make sure that this logic runs only for the last data array. See the condition- `key === lastLineNumber - 1`

docs/dev/LineChart/LineChart.md

@@ -0,0 +1 @@
+**[Focusing](Focusing.md)** \

examples/LineChart/GradientLineAndLabel.tsx

@@ -79,6 +79,8 @@ const GradientLineAndLabel = () => {
         customDataPoint={item => {
           return customDataPointComp(item.value);
         }}
+        dataPointsHeight={16}
+        dataPointsWidth={16}
       />
     </View>
   );

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.47",
+  "version": "1.4.48",
   "description": "The most complete library for Bar, Line, Area, Pie, Donut, Stacked Bar and Population Pyramid charts in React Native. Allows 2D, 3D, gradient, animations and live data updates.",
   "main": "dist/index.js",
   "files": [
@@ -26,7 +26,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.47"
+    "gifted-charts-core": "0.1.49"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

release-notes/release-notes.md

@@ -1,3 +1,52 @@
+# 🎉 1.4.48
+
+## ✨ Features added-
+
+1. Added support for `barMarginBottom` to stacked bar charts. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/126#issuecomment-2475778997
+2. Added the prop `customBackground` to Bar, Line, Area charts. `customBackground` is an object with following keys (All of which are optional). See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/790
+
+#### CustomBackground
+
+```ts
+type CustomBackground = {
+  color?: ColorValue
+  component?: Function
+  horizontalShift?: number
+  verticalShift?: number
+  height?: number
+  width?: number
+  widthAdjustment?: number
+}
+```
+
+3. Added the props- `focusTogether` and `focusProximity` to Line and Area charts to control the focus behaviour. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/910 
+4. BarChart lineConfig with strokeDashArray support. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/927
+5. Added the property `resetPointerIndexOnRelease` inside `pointerConfig` to set pointerIndex to -1 upon releasing the pointer. Default value is `false`. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/854
+6. Added the property `activatePointersInstantlyOnTouch` inside `pointerConfig` whose default value is `true`. When set to false, the pointer will be activated not instantly after touch, but on dragging after touch. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/discussions/934
+
+
+## 🐛 Bug fixes
+
+1. Fixed the issue- `barMarginBottom` not working for Bar charts.
+2. Fixed issue with X-axis label position in stacked bar charts with negative values.
+3. Some fix about vertical lines in Line charts.
+4. Fixed the issue- "LineChart - Strip and Points not showing beyond x index 0 for DataSet". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/911
+5. Fixed the issue- "hidePointer doesn't work". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/932
+6. Fixed the issue- "Custom Data Point in wrong position with non-uniform spacing on data in LineChart" Seehttps://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/923
+7. Fixed the issue- "extrapolateMissingValues not working with dataSet". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/916
+8. Fixed the issue- "The first property setting of BarChart/LineChart RulesConfigArray does not take effect". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/893
+9. Fixed the issue- "areaChart2, areaChart3, areaChart4... props not working". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/892
+10. Fixed the issue- "overflowTop parameter behaviour & verticalLinesHeight". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/884
+11. Fixed the issue- "Text formatting for labels not working for the focused Pie". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/886
+12. Fixed the issue- "PieChart focused Pie label styling does not work properly". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/886
+13. Fixed the issue- "Custom data points are not shown on web". See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/889
+
+---
+
+---
+
+---
+
 # 🎉 1.4.47
 
 ## ✨ Features added-

src/BarChart/Animated2DWithGradient.tsx

@@ -22,7 +22,6 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
     animationDuration,
     noGradient,
     noAnimation,
-    barMarginBottom,
     barInnerComponent,
     intactTopLabel,
     showValuesAsTopLabel,
@@ -77,19 +76,17 @@ const Animated2DWithGradient = (props: Animated2DWithGradientPropsType) => {
             bottom: 0,
             width: barWidth,
             overflow: 'hidden',
-            height:
-              (noAnimation
-                ? Math.max(props.minHeight, Math.abs(height))
-                : height) - (barMarginBottom || 0),
+            height: noAnimation
+              ? Math.max(props.minHeight, Math.abs(height))
+              : height,
           }}>
           <View
             style={[
               {
                 width: '100%',
-                height:
-                  (noAnimation
-                    ? Math.max(props.minHeight, Math.abs(height))
-                    : height) - (barMarginBottom || 0),
+                height: noAnimation
+                  ? Math.max(props.minHeight, Math.abs(height))
+                  : height,
               },
               item.barStyle || barStyle,
             ]}>