ChartDot does not follow ChartPath

[stopachka]

Hey team, I notice that ChartDot, does not always seem to follow the ChartPath. I am not 100% sure how to debug this.

Here's the generate setup:

export default function RainbowWeightChart({ style, diary, profile }) {
  const end = u.currentDate();
  const days = eachDayOfInterval({ start: subDays(end, 30), end: end });
  // Hack to reset ChartPath's caches. 
  // See https://github.com/rainbow-me/react-native-animated-charts/issues/16
  const [points, setPoints] = useState(days.map((x) => ({ x, y: 0 })));
  useEffect(() => {
    setPoints(
      days
        .map((date) => ({ x: +date, y: m.weightForDate(profile, diary, date) }))
        .filter((p) => p.y)
    );
  }, [profile.uid]);

  const { width } = useWindowDimensions();
  const SIZE = width - tw("p-4").paddingLeft * 2;
  return (
    <View style={style}>
      <ChartPathProvider
        hapticsEnabled
        hitSlop={30}
        data={{
          points: points,
          smoothingStrategy: "bezier",
        }}>
        <ChartPath
          height={SIZE / 2}
          stroke={tw("bg-blue-500").backgroundColor}
          width={SIZE}
          strokeWidth={3.5}
          selectedStrokeWidth={3}
          strokeLinecap="round"
          strokeLinejoin="round"
          longPressGestureHandlerProps={{
            maxDist: 100000,
            minDurationMs: 150,
            shouldCancelWhenOutside: false,
          }}
        />
        <ChartDot
          style={{ backgroundColor: tw("bg-blue-200").backgroundColor }}
        />
        <CurrentPositionVerticalLine
          color={tw("bg-blue-500").backgroundColor}
          length={SIZE / 2}
          thickness={2}
        />
        <ChartYLabel
          style={tw(
            "text-blue-200 absolute right-0 text-base text-sm font-bold"
          )}
        />
        <ChartXLabel
          format={xFmt}
          style={tw(
            "text-blue-200 absolute right-0 top-6 text-base text-sm font-bold"
          )}
        />
        <ExtremeLabels
          labelStyle={tw("text-blue-200 text-sm font-bold")}
          width={SIZE}
        />
      </ChartPathProvider>
    </View>
  );
}

I am not 100% sure how to debug this. Will start looking deeper tomorrow, but if ya'll have thoughts in the meantime, much apprecaited!

[stopachka]

Very weird, I was able to hack around this, by simply "copying" the last point, and pushing it onto the list.

let ps = days
      .map((date) => ({ x: +date, y: m.weightForDate(profile, diary, date) }))
      .filter((p) => p.y)
const lastP = ps[ps.length - 1];
const lastPBugfix = lastP && {...lastP};
lastPBugfix && ps.push(lastPBugfix);
setPoints(ps);

I think this may be related to #59 .

[andreibahachenka]

did the same fix

Very weird, I was able to hack around this, by simply "copying" the last point, and pushing it onto the list.

let ps = days
      .map((date) => ({ x: +date, y: m.weightForDate(profile, diary, date) }))
      .filter((p) => p.y)
const lastP = ps[ps.length - 1];
const lastPBugfix = lastP && {...lastP};
lastPBugfix && ps.push(lastPBugfix);
setPoints(ps);

I think this may be related to #59 .

i also did the same fix)

[kierangillen]

You should be able to fix this issue by wrapping <ChartPath/> and <ChartDot/> in its own <View/>, make sure that the View doesn't have any padding or margin.

...
<View>
        <ChartPath
          height={SIZE / 2}
          stroke={tw("bg-blue-500").backgroundColor}
          width={SIZE}
          strokeWidth={3.5}
          selectedStrokeWidth={3}
          strokeLinecap="round"
          strokeLinejoin="round"
          longPressGestureHandlerProps={{
            maxDist: 100000,
            minDurationMs: 150,
            shouldCancelWhenOutside: false,
          }}
        />
        <ChartDot
          style={{ backgroundColor: tw("bg-blue-200").backgroundColor }}
        />
</View>
...