Merge pull request #882 from Abhinandan-Kushwaha/development

v1.4.47 added the prop hidePointerForMissingValues
Abhinandan-Kushwaha · Oct 27, 2024 · 43ec330 · 43ec330
2 parents 5472745 + 000feae
commit 43ec330
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 31 deletions.
diff --git a/docs/LineChart/LineChartProps.md b/docs/LineChart/LineChartProps.md
@@ -720,20 +720,22 @@ type Pointer = {
   dynamicLegendComponent?: Function; // default null
   dynamicLegendContainerStyle?: Style object; // default null
   horizontalStripConfig?: HorizontalStripConfig; // config for horizontal strip used for crosshair
+  hidePointerForMissingValues?: boolean; // false
+  hidePointerDataPointForMissingValues?: boolean; // unless explicitly specified, takes the value of hidePointerForMissingValues
 };
 ```
 
 ```ts
 type HorizontalStripConfig = {
-  thickness?: number // default: pointerStripWidth
-  length?: number // default: width of the chart
-  color?: ColorValue // default: pointerStripColor
-  strokeDashArray?: number[] // default: pointerConfig.strokeDashArray
-  horizontalStripUptoDataPoint?: boolean // default: false
-  labelComponent?: Function // default: null
-  labelComponentHeight?: number // default: 30
-  labelComponentWidth?: number
-}
+  thickness?: number; // default: pointerStripWidth
+  length?: number; // default: width of the chart
+  color?: ColorValue; // default: pointerStripColor
+  strokeDashArray?: number[]; // default: pointerConfig.strokeDashArray
+  horizontalStripUptoDataPoint?: boolean; // default: false
+  labelComponent?: Function; // default: null
+  labelComponentHeight?: number; // default: 30
+  labelComponentWidth?: number;
+};
 ```
 
 The above properties can be understood with this labelled diagram-

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-charts",
-  "version": "1.4.46",
+  "version": "1.4.47",
   "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.46"
+    "gifted-charts-core": "0.1.47"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

diff --git a/release-notes/release-notes.md b/release-notes/release-notes.md
@@ -1,3 +1,19 @@
+# 🎉 1.4.47
+
+## ✨ Features added-
+
+1. Added the properties `hidePointerForMissingValues` and `hidePointerDataPointForMissingValues` to the **PointerConfig** object. In case there are data items with missing/undefined/null values the library interpolates those values. But if you don't want the pointer to be displayed for such values, you can set the `hidePointerForMissingValues` property to true. Its default value is false. When `hidePointerForMissingValues` is set to true, `hidePointerDataPointForMissingValues` automatically becomes true, unless otherwise specified. See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/issues/881
+
+## 🐛 Bug fixes
+
+1. The vertical strips shown by using the `showStrip` property were always shown over the data points, but now they will be shown beneath the data points. This behaviour can be reversed by using the `showStripOnFocus` prop.
+
+---
+
+---
+
+---
+
 ## 🎉 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

diff --git a/src/LineChart/index.tsx b/src/LineChart/index.tsx
@@ -300,6 +300,7 @@ export const LineChart = (props: LineChartPropsType) => {
     cumulativeSpacingSecondary,
     cumulativeSpacingForSet,
     hideSecondaryPointer,
+    hidePointerDataPointForMissingValues,
     pointerEvents,
     focusEnabled,
     showDataPointOnFocus,
@@ -322,6 +323,7 @@ export const LineChart = (props: LineChartPropsType) => {
     barAndLineChartsWrapperProps,
     areaChart,
     mostNegativeValue,
+    strips,
   } = useLineChart({
     ...props,
     parentWidth: props.parentWidth ?? screenWidth,
@@ -717,7 +719,7 @@ export const LineChart = (props: LineChartPropsType) => {
               )}
             </>
           ) : null}
-          {renderStrips(item, index, key)}
+          {/* {renderStrips(item, index, key)} // handled with strips coming from geifted-charts-core */}
           {hideDataPoints ? null : (
             <>
               {customDataPoint ? (
@@ -893,6 +895,11 @@ export const LineChart = (props: LineChartPropsType) => {
         const pIndex = barAndLineChartsWrapperProps.pointerIndex;
         pointerItemLocal = set.data[pIndex];
         if (set.hidePointers || pointerItemLocal?.hidePointer) return null;
+        if (
+          hidePointerDataPointForMissingValues &&
+          typeof pointerItemLocal.value !== 'number'
+        )
+          return null;
         pointerYLocal = pointerYsForDataSet[index];
         pointerColorLocal =
           pointerConfig?.pointerColorsForDataSet?.[index] ?? pointerColor;
@@ -955,6 +962,11 @@ export const LineChart = (props: LineChartPropsType) => {
         break;
     }
     if (!pointerYLocal) return;
+    if (
+      hidePointerDataPointForMissingValues &&
+      typeof props.data?.[pointerIndex]?.value !== 'number'
+    )
+      return null;
 
     return Pointer({
       pointerX,
@@ -1005,6 +1017,12 @@ export const LineChart = (props: LineChartPropsType) => {
     }
     pointerYLocal = Math.min(...arr);
 
+    if (
+      pointerConfig?.hidePointerForMissingValues &&
+      typeof pointerItemLocal[0].value !== 'number'
+    )
+      return null;
+
     return StripAndLabel({
       autoAdjustPointerLabelPosition,
       pointerX,
@@ -1744,10 +1762,10 @@ export const LineChart = (props: LineChartPropsType) => {
       return (
         <Line
           key={'strip' + (ind * 10000 + index)}
-          x1={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
+          x1={initialSpacing + spacing * index}
           y1={y1}
-          x2={initialSpacing + spacing * index - currentStripWidth / 2 - 1}
-          y2={y1 + actualStripHeight}
+          x2={initialSpacing + spacing * index}
+          y2={y1 + actualStripHeight + 2}
           strokeWidth={currentStripWidth}
           stroke={currentStripColor}
           strokeDasharray={currentStripStrokeDashArray}
@@ -1761,7 +1779,8 @@ export const LineChart = (props: LineChartPropsType) => {
   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)
+        {Object.keys(strips).length > 0 ||
+        (focusEnabled && showStripOnFocus && selectedIndex !== -1) ? ( // render focus strips separately (so that it's rendered below the data points unless specified otherwise)
           <View
             pointerEvents="none"
             style={[
@@ -1777,22 +1796,40 @@ export const LineChart = (props: LineChartPropsType) => {
                 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),
+              {Object.keys(strips).map((stripKey: any) => {
+                return Object.keys(strips[stripKey]).map((ind: any) => {
+                  const {item, index, key} = strips[stripKey][ind];
+                  return renderStrips(item, index, key);
+                });
+              })}
+              {focusEnabled && showStripOnFocus && selectedIndex !== -1 ? (
+                <>
+                  {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.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),
-              )}
+                  {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),
+                  )}
+                </>
+              ) : null}
             </Svg>
           </View>
         ) : null}