Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ChartDot does not follow ChartPath #66

Open
stopachka opened this issue Jan 12, 2022 · 3 comments
Open

ChartDot does not follow ChartPath #66

stopachka opened this issue Jan 12, 2022 · 3 comments

Comments

@stopachka
Copy link

image
image

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
Copy link
Author

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants