Merge pull request #878 from Abhinandan-Kushwaha/development

v1.4.46 added the prop stripOverDataPoints
Abhinandan-Kushwaha · Oct 21, 2024 · 5472745 · 5472745
2 parents e44e394 + 2432bda
commit 5472745
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 41 deletions.
diff --git a/README.md b/README.md
@@ -45,18 +45,14 @@ See the **[release changes by version here.](release-notes/release-notes.md)**
   </tr>
 
   <tr>
+    <td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
     <td><img src='/demos/movingBars.gif' alt='' width=270 height=300/></td>
-    <td><img src='/demos/pielabbelled.svg' alt='' height=280 width=270/></td>
-  </tr>
   <tr>
     <td><img src='/demos/pyrLarge.png' alt='' height=280 width=260/></td>
     <td><img src='/demos/ppnLabelled.png' alt='' height=280 width=300/></td>
   </tr>
-  <tr>
-    <td><img src='/demos/crossHair.gif' alt='' height=280 /></td>
-    <td><img src='/demos/pieExt.png' alt='' height=180 width=400 /></td>
-  </tr>
 </table>
+<img src='/demos/pieExt.png' alt='' height=280 />
 
 ---
 
@@ -139,7 +135,7 @@ See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the
 
 Test strategy and cases are discussed here- [TESTS.md](./TESTS.md) <br />
 Pixel perfection is assured using [react-native-screenshot-test](https://www.npmjs.com/package/react-native-screenshot-test). <br/>
-300+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
+220+ screenshot tests have been written. See the [Reports here](https://abhinandan-kushwaha.github.io/TestingCharts/ss-test/test.html).
 
 Screenshot tests are written in a separate repo named [TestingCharts](https://github.com/Abhinandan-Kushwaha/TestingCharts)
 

diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md
@@ -793,6 +793,7 @@ To achieve this the `focusEnabled` props must be set to true. In addition, use b
 | focusedDataPointIndex     | number        | Index of the focused data point, used to set initially focused data point and to override the focus behaviour on onFocus                      | \_                                        |
 | showDataPointOnFocus      | boolean       | If set true, it shows the data point corresponding to the focused area of the chart                                                           | false                                     |
 | showStripOnFocus          | boolean       | If set true, it shows a vertical strip corresponding to the focused area of the chart                                                         | false                                     |
+| stripOverDataPoints       | boolean       | If set true, the vertical strip appears over the data points, else it appears beneath the data points                                         | false                                     |
 | showTextOnFocus           | boolean       | If set true, it shows the data point text corresponding to the focused area of the chart                                                      | false                                     |
 | showDataPointLabelOnFocus | boolean       | If set true, it shows the data point corresponding to the focused area of the chart                                                           | false                                     |
 | stripHeight               | number        | Height of the vertical strip that becomes visible on pressing the corresponding area of the chart                                             | height of the data point                  |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.45",
+  "version": "1.4.46",
   "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": [
@@ -25,7 +25,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "gifted-charts-core": "0.1.45"
+    "gifted-charts-core": "0.1.46"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,13 @@
+## 🎉 1.4.46
+
+Added the prop named `stripOverDataPoints` to Line charts. If set true, the vertical strip appears over the data points, else it appears beneath the data points. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/877
+
+---
+
+---
+
+---
+
 # 🎉 1.4.45
 
 ## ✨ Features added-

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -304,6 +304,7 @@ export const LineChart = (props: LineChartPropsType) => {
     focusEnabled,
     showDataPointOnFocus,
     showStripOnFocus,
+    stripOverDataPoints,
     showTextOnFocus,
     showDataPointLabelOnFocus,
     stripHeight,
@@ -620,6 +621,7 @@ export const LineChart = (props: LineChartPropsType) => {
     isSecondary: any,
     showValuesAsDataPointsText: any,
     spacingArray: number[],
+    key: number,
   ) => {
     const getYOrSecondaryY = isSecondary ? getSecondaryY : getY;
     return dataForRender.map((item: lineDataItem, index: number) => {
@@ -686,26 +688,7 @@ export const LineChart = (props: LineChartPropsType) => {
       if (showValuesAsDataPointsText) {
         text = originalDataFromProps[index].value;
       }
-
-      const currentStripHeight = item.stripHeight ?? stripHeight;
-      const currentStripWidth = item.stripWidth ?? stripWidth;
-      const currentStripOpacity = item.stripOpacity ?? stripOpacity;
-      const currentStripStrokeDashArray =
-        item.stripStrokeDashArray ?? stripStrokeDashArray ?? '';
-      const currentStripColor = item.stripColor || stripColor;
       const position = I18nManager.isRTL ? 'right' : 'left';
-
-      const y1 = currentStripHeight
-        ? containerHeight - currentStripHeight + 8
-        : containerHeight -
-          dataPointsHeight / 2 +
-          14 -
-          (item.value * containerHeight) / maxValue;
-
-      const actualStripHeight =
-        currentStripHeight ||
-        (item.value * containerHeight) / maxValue - 2 + overflowTop;
-
       return (
         <Fragment key={index}>
           {focusEnabled ? (
@@ -734,19 +717,7 @@ export const LineChart = (props: LineChartPropsType) => {
               )}
             </>
           ) : null}
-          {item.showStrip ||
-          (focusEnabled && index === selectedIndex && showStripOnFocus) ? (
-            <Line
-              x1={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
-              y1={y1}
-              x2={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
-              y2={y1 + actualStripHeight}
-              strokeWidth={currentStripWidth}
-              stroke={currentStripColor}
-              strokeDasharray={currentStripStrokeDashArray}
-              opacity={currentStripOpacity}
-            />
-          ) : null}
+          {renderStrips(item, index, key)}
           {hideDataPoints ? null : (
             <>
               {customDataPoint ? (
@@ -1341,6 +1312,7 @@ export const LineChart = (props: LineChartPropsType) => {
           isSecondary,
           showValuesAsDataPointsText,
           spacingArray,
+          key,
         )}
         {showArrow && (
           <Path
@@ -1750,9 +1722,80 @@ export const LineChart = (props: LineChartPropsType) => {
     },
   };
 
+  const renderStrips = (item: lineDataItem, index: number, ind: number) => {
+    if (item.showStrip || index === selectedIndex) {
+      const currentStripHeight = item.stripHeight ?? stripHeight;
+      const currentStripWidth = item.stripWidth ?? stripWidth;
+      const currentStripOpacity = item.stripOpacity ?? stripOpacity;
+      const currentStripStrokeDashArray =
+        item.stripStrokeDashArray ?? stripStrokeDashArray ?? '';
+      const currentStripColor = item.stripColor || stripColor;
+
+      const y1 = currentStripHeight
+        ? containerHeight - currentStripHeight + 8
+        : containerHeight -
+          (item.dataPointHeight ?? dataPointsHeight1) / 2 +
+          14 -
+          (item.value * containerHeight) / maxValue;
+
+      const actualStripHeight =
+        currentStripHeight ||
+        (item.value * containerHeight) / maxValue - 2 + overflowTop;
+      return (
+        <Line
+          key={'strip' + (ind * 10000 + index)}
+          x1={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+          y1={y1}
+          x2={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+          y2={y1 + actualStripHeight}
+          strokeWidth={currentStripWidth}
+          stroke={currentStripColor}
+          strokeDasharray={currentStripStrokeDashArray}
+          opacity={currentStripOpacity}
+        />
+      );
+    }
+    return null;
+  };
+
   const renderChartContent = (containerHeightIncludingBelowXAxis: number) => {
     return (
       <>
+        {focusEnabled && showStripOnFocus && selectedIndex !== -1 ? ( // render focus strips separately (so that it's rendered below the data points unless specified otherwise)
+          <View
+            pointerEvents="none"
+            style={[
+              svgWrapperViewStyle as ViewStyle,
+              {
+                width: totalWidth,
+                height: containerHeightIncludingBelowXAxis,
+                zIndex: stripOverDataPoints ? 10000 : -1,
+              },
+            ]}>
+            <Svg
+              height={
+                containerHeightIncludingBelowXAxis +
+                (props.overflowBottom ?? dataPointsRadius1)
+              }>
+              {dataSet && pointsFromSet.length
+                ? dataSet.map((set, ind) => {
+                    return set.data.map((item, index) =>
+                      renderStrips(item, index, ind),
+                    );
+                  })
+                : props.data?.map((item, index) =>
+                    renderStrips(item, index, 0),
+                  )}
+              {props.data2?.map((item, index) => renderStrips(item, index, 1))}
+              {props.data3?.map((item, index) => renderStrips(item, index, 2))}
+              {props.data4?.map((item, index) => renderStrips(item, index, 3))}
+              {props.data5?.map((item, index) => renderStrips(item, index, 4))}
+              {props.secondaryData?.map((item, index) =>
+                renderStrips(item, index, 5),
+              )}
+            </Svg>
+          </View>
+        ) : null}
         {dataSet
           ? pointsFromSet.length
             ? dataSet.map((set, index) => {