Skip to content
This repository has been archived by the owner on Jul 13, 2020. It is now read-only.

xaxis, yaxis, line, rects, etc #49

Open
mr-wellick opened this issue Sep 14, 2019 · 0 comments
Open

xaxis, yaxis, line, rects, etc #49

mr-wellick opened this issue Sep 14, 2019 · 0 comments

Comments

@mr-wellick
Copy link
Owner

These two components, XAxis and YAxis, have the same logic more or less. The same is true of the other components listed in the title of the issue.

The main difference is whether we use an x or y axis! Look into generalizing this structure throughout the listed components.

const XAxis = () => {
  const ref = useRef(null);
  const { aes, dimensions } = useContext(ChartContext);
  // aes contains two values representing either the x or y values we want to visualize
  const scale = useScale(aes[0]);
  // need to set the range to properly display our graph visually
  scale.range([dimensions.padding, dimensions.width - dimensions.padding]);

  useEffect(() => {
    const axisLocation = `translate(0, ${dimensions.height - dimensions.padding})`;
    const node = select(ref.current).attr('transform', axisLocation);
    node.call(axisBottom(scale));
  }, [dimensions.height, dimensions.padding, scale]);

  return <g ref={ref} />;
};

const YAxis = () => {
  const ref = useRef(null);
  const { aes, dimensions } = useContext(ChartContext);
  // aes contains two values representing either the x or values we want to visualize
  const scale = useScale(aes[1]);
  // need to set the range to properly display our graph visually
  scale.range([dimensions.height - dimensions.padding, dimensions.padding]);

  useEffect(() => {
    const axisLocation = `translate(${dimensions.padding}, 0)`;
    const node = select(ref.current).attr('transform', axisLocation);
    node.call(axisLeft(scale));
  }, [dimensions.padding, scale]);

  return <g ref={ref} />;
};
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant