Merge pull request #841 from Abhinandan-Kushwaha/development

v1.4.40 added dynamicLegendComponent and fixed alignment & label posi…

docs/BarChart/BarChartProps.md

@@ -336,7 +336,7 @@ The properties of this line chart can be controlled using the `lineConfig` prop
 | xAxisTextNumberOfLines         | number                        | Number of lines for x axis label text                                                                          | 1                            |
 | xAxisLabelsHeight              | number                        | Height of X axis labels container                                                                              | xAxisTextNumberOfLines \* 18 |
 | xAxisLabelsVerticalShift       | number                        | prop to adjust the vertical position of X axis labels (move X axis labels up or down)                          | 0                            |
-| labelsExtraHeight              | number                        | used to display large rotated labels on X-axis (use this only when using the **rotateLabel** prop)             | 0                            |
+| labelsExtraHeight              | number                        | used to display large rotated labels on X-axis (useful when using the **rotateLabel** prop)                    | 0                            |
 | secondaryYAxis                 | secondaryYAxisType            | displays and controls the properties of the secondary Y axis on the right side                                 | null                         |
 | secondaryData                  | Array of items                | the secondary data that will be rendered along the secondary Y axis                                            | undefined                    |
 | secondaryXAxis                 | XAxisConfig                   | properties of the secondary X-axis (appearing at the top of the chart)                                         | values of the primary X-axis |

docs/LineChart/LineChartProps.md

@@ -710,6 +710,8 @@ type Pointer = {
   strokeDashArray?: Array<number>;
   barTouchable?: boolean; //default : false (only applicable to bar charts having pointerConfig)
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto'; // default: "none
+  dynamicLegendComponent?: Function; // default null
+  dynamicLegendContainerStyle?: Style object; // default null
 };
 ```
 
@@ -744,6 +746,16 @@ When the chart is released, it returns the index -1.<br/>
 
 When using pointers with dataSet, you can set pointer colors on each data line using the pointerColorsForDataSet which is an array of color values.
 
+#### dynamicLegendComponent
+
+`dynamicLegendComponent` is a property inside the **pointerConfig** prop, very similar to `pointerLabelComponent`, the only difference is that it is stationary whereas _pointerLabelComponent_ moves as the pointer moves. You can set the position of the `dynamicLegendComponent` using the **`dynamicLegendContainerStyle`** property in the _pointerConfig_ <br /> <br />
+You are supposed to assign a callback function to `dynamicLegendComponent`. The callback function receives 2 parameters-
+1. Array of currently selected items (in case you are rendering a single line, the array will have a single item)
+2. Index of the selected item.
+<br />
+
+**Note:** The legend component appears only as long as the pointer remains remains on the screen. To make the dynamic legend remain persistently on the screen, you can set the `persistPointer` property to true. The `initialPointerIndex` property can also be useful.
+
 ### onFocus and strip related props
 
 Line or Area charts can be made interactive by allowing users to press on the chart and highlight that particular data point. For example-

release-notes/release-notes.md

@@ -1,3 +1,30 @@
+# 🎉 1.4.40
+
+## ✨ Features added-
+
+Added the properties `dynamicLegendComponent` and `dynamicLegendContainerStyle` inside the **_pointerConfig_** object. <br />
+<br />
+
+**dynamicLegendComponent** is a property inside the **pointerConfig** prop, very similar to `pointerLabelComponent`, the only difference is that it is stationary whereas _pointerLabelComponent_ moves as the pointer moves. You can set the position of the _dynamicLegendComponent_ using the **`dynamicLegendContainerStyle`** property inside _pointerConfig_ <br /> <br />
+You are supposed to assign a callback function to **dynamicLegendComponent**. The callback function receives 2 parameters-
+   1. Array of currently selected items (in case you are rendering a single line, the array will have a single item)
+   2. Index of the selected item.
+<br />
+
+**Note:** The legend component appears only as long as the pointer remains remains on the screen. To make the dynamic legend remain persistently on the screen, you can set the `persistPointer` property to true. The `initialPointerIndex` property can also be useful.
+
+## 🐛 Bug fixes
+
+1. Fixed the issue- `autoShiftLabels` not working properly. See https://gifted-charts.web.app/barchart/#xAxisShift
+
+2. Fixed the issue- "Bar alignment issue when using the `labelsExtraHeight` prop." See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/839
+
+---
+
+---
+
+---
+
 # 🎉 1.4.39
 
 ## 🐛 Bug fixes

src/BarChart/RenderBars.tsx

@@ -127,9 +127,13 @@ const RenderBars = (props: RenderBarsPropsType) => {
                   ? -40
                   : -6 -
                     xAxisTextNumberOfLines * 18 -
-                    xAxisLabelsVerticalShift) -
+                    (value < 0
+                      ? -xAxisLabelsVerticalShift
+                      : xAxisLabelsVerticalShift)) -
                 barMarginBottom -
-                labelsDistanceFromXaxis,
+                (value < 0 && !autoShiftLabels
+                  ? -labelsDistanceFromXaxis
+                  : labelsDistanceFromXaxis),
           },
           rotateLabel
             ? horizontal
@@ -150,7 +154,7 @@ const RenderBars = (props: RenderBarsPropsType) => {
                       {
                         translateY: autoShiftLabels
                           ? 0
-                          : 16.5 * xAxisTextNumberOfLines + 14,
+                          : 16.5 * xAxisTextNumberOfLines + 12,
                       },
                     ],
                   }

src/BarChart/index.tsx

@@ -182,7 +182,7 @@ export const BarChart = (props: BarChartPropsType) => {
   const contentContainerStyle: ViewStyle = {
     position: 'absolute',
     height: containerHeightIncludingBelowXAxis,
-    bottom: 60,
+    bottom: 60 + labelsExtraHeight,
     paddingLeft: initialSpacing,
     width: totalWidth,
     flexDirection: 'row',
@@ -297,7 +297,7 @@ export const BarChart = (props: BarChartPropsType) => {
                 position: 'absolute',
                 height:
                   extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
-                bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
+                bottom: xAxisLabelsVerticalShift,
                 width: totalWidth,
               }}>
               {renderStripAndLabel(null)}
@@ -311,7 +311,7 @@ export const BarChart = (props: BarChartPropsType) => {
                 position: 'absolute',
                 height:
                   extendedContainerHeight + noOfSectionsBelowXAxis * stepHeight,
-                bottom: xAxisLabelsVerticalShift + labelsExtraHeight,
+                bottom: xAxisLabelsVerticalShift,
                 width: totalWidth,
                 zIndex: 20,
               }}>

src/LineChart/index.tsx

@@ -2287,6 +2287,26 @@ export const LineChart = (props: LineChartPropsType) => {
             </View>
           );
         })}
+        {pointerConfig?.dynamicLegendComponent && pointerX > 0 ? (
+          <View
+            style={[
+              {position: 'absolute'},
+              pointerConfig.dynamicLegendContainerStyle,
+            ]}>
+            {pointerConfig.dynamicLegendComponent(
+              dataSet
+                ? pointerItemsForSet
+                : [
+                    pointerItem,
+                    pointerItem2,
+                    pointerItem3,
+                    pointerItem4,
+                    pointerItem5,
+                  ].filter(item => !!item),
+              pointerIndex,
+            )}
+          </View>
+        ) : null}
       </>
     );
   };