Use classes rather than stateless functions in vx-shape, vx-group, etc, moving forward to allow refs? about visx

[hshoff]

Hi @hueypeard thanks for checking out vx and the helpful example code!

Here's an example of working tooltips on the centroid on mouseEnter/Leave that avoids the ref on the <Arc /> and the groupArgs prop: https://www.webpackbin.com/bins/-KojHA8GeGMHfwdcwAIk

Things to note:

• You can wrap your <Arc /> in a <g ref={g => this.mainGroup = g}>
• event handlers have a thunk style signature on vx components

  onMouseEnter={data => event => { console.log(data) }}

• I'm using the withTooltip higher-order component to pass in the common tooltip pattern of updating the tooltip position and data. This HOC passes in hideTooltip(), showTooltip(), tooltipLeft, tooltipTop, and tooltipData. I'm using the <Tooltip /> from @vx/tooltip but you can use your own from your example
• as you pointed out you don't get the centroid in the event handler. I agree this should get added to <Arc /> and will do that in the next release.

Let me know if you have questions about implementation or other ideas for improvement. I want to make vx a comfortable api to work with for developers and your feedback will only help improve vx for everyone as we go!

[hshoff]

Added centroid to the event handler data here: #101

[Flaque]

Hi! :D
Can you give an example of where you would need the ref to get the translated position of an element?

[hueypeard]

Sorry for the elongated example, but I figured the context is necessary. The centroid argument on
Arc's onMouseEnter is something I am submitting an issue about soon. groupArgs on Arc is another thing I am also submitting an issue about, and it simply allows the developer to supply additional arguments to supply to the Arc's containing group.

tl;dr onMouseEnter triggers setActiveData with the screen coordinates of the centroid, and leaving the graph triggers setActiveData with null disabling the tooltip.

class MyChart extends React.Component {
  render() {
    const {
      width,
      height,
      setActiveData,
      activeData,
      data,
      events = false
    } = this.props;

    const radius = Math.min(width, height) / 2;

    return (
      <div>
        <svg
          width={width}
          height={height}
          ref={ref => {
            this.svg = ref;
          }}
        >
          <Arc
            data={_.map(data, (data, dataIdx) => ({
              value: data.length,
              data: data,
              key: dataIdx
            }))}
            top={radius}
            left={radius}
            pieValue={d => d.value}
            outerRadius={radius}
            stroke="#FFFFFF"
            strokeWidth={2}
            fill="#FF00FF"
            onMouseEnter={(e, arc, centroid) => {
              // get screen offset of centroid
              const point = this.svg.createSVGPoint();
              point.x = centroid[0];
              point.y = centroid[1];

              // transform centroid according to main group transforms
              const mainGroupNode = ReactDOM.findDOMNode(this.mainGroup);
              const newPoint = point.matrixTransform(mainGroupNode.getScreenCTM());

              // adjust screen offset to be document position
              const left = window.pageXOffset ||
                document.documentElement.scrollLeft;
              const top = window.pageYOffset ||
                document.documentElement.scrollTop;

              const documentX = newPoint.x + left;
              const documentY = newPoint.y + top;

              setActiveData({
                key: arc.data.key,
                x: documentX,
                y: documentY
              });
            }}
            style={{
              pointerEvents: "all"
            }}
            groupArgs={{
              onMouseLeave: () => setActiveData(null)
            }}
            ref={ref => {
              this.mainGroup = ref;
            }}
          />
        </svg>
        {activeData !== null &&
          <div
            style={{
              position: "absolute",
              top: activeData.y,
              left: activeData.x,
              transform: "translateY(-50%)",
              pointerEvents: "none"
            }}
          >
            <div
              style={{ position: "relative" }}
              className="tooltip-wrapper__placement-right"
            >
              <Tooltip
                style={{
                  pointerEvents: "none"
                }}
              >
                Tooltip!
              </Tooltip>
            </div>
          </div>}
      </div>
    );
  }
}
`