PointerConfig includes undefined/interpolated values

[dannybit]

Description

I am trying to use pointerConfig to let the user scroll the pointer across the datapoints in the chart. My chart includes datapoint with undefined values which are interpolated using interpolateMissingValues={true}. However, the pointer selection includes these datapoints. Is there a way to filter these datapoints or jump to the next or previous datapoint with a value defined?
Here is an example (there are no datapoints defined between the 2 datapoints):

Here is the code to reproduce:

<LineChart
  disableScroll={true}
  interpolateMissingValues={true}
  data={[{ value: 100 }, { value: undefined }, { value: 150 }]}
  spacing={10}
  pointerConfig={{
    pointerStripHeight: 160,
    pointerStripColor: "white",
    pointerStripWidth: 2,
    pointerColor: ThemeColors.primary,
    radius: 6,
    pointerLabelWidth: 100,
    pointerLabelHeight: 90,
    persistPointer: false,
    activatePointersOnLongPress: true,
    autoAdjustPointerLabelPosition: false,
    pointerLabelComponent: (items, items2, pointerIndex) => {
      return (
        <View
          style={{
            height: 90,
            width: 100,
            justifyContent: "center",
            marginTop: -30,
            marginLeft: -40,
          }}
        >
          <View
            style={{
              paddingHorizontal: 14,
              paddingVertical: 6,
              borderRadius: 16,
              backgroundColor: "white",
            }}
          >
            <Text
              style={{ fontWeight: "bold", textAlign: "center" }}
            >
              {"$" + items[0].value + ".0"}
            </Text>
          </View>
        </View>
      );
    },
  }}
/>

Steps to reproduce

1. Create LineChart with undefined values, pointerConfig and interpolateMissingValues set to true.
2. Scroll the pointer to the undefined value.
3. Pointer tries to render a LabelComponent for the interpolated/undefined value.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.43

React Native version

0.74.3

Platforms

iOS

Workflow

None

[Abhinandan-Kushwaha]

Hi @dannybit 👋
Thanks for requesting this feature. It is now available from versions 1.4.47 onwards.

I have 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.

[dannybit]

Awesome! Thank you for implementing all these changes so quickly!!!

[szepetry]

@Abhinandan-Kushwaha Thanks for adding this! I was using cubic interpolation to handle this but wasn't loving the results, and I saw this version add interpolation. 👯
One issue I see is when intentionally using undefined or null values in data, I get a type check error. It would be nice if that could be skipped when interpolation is on.

Type '{ value: number | undefined; labelComponent: () => false | Element; customDataPoint: () => Element; }[]' is not assignable to type 'lineDataItem[]'. Type '{ value: number | undefined; labelComponent: () => false | React.JSX.Element; customDataPoint: () => React.JSX.Element; }' is not assignable to type 'lineDataItem'. Types of property 'value' are incompatible. Type 'number | undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'.ts(2322) types.d.ts(18, 5): The expected type comes from property 'data' which is declared here on type 'IntrinsicAttributes & LineChartPropsType'